施用directjngine、Ext Direct调用服务器端Java方法

使用directjngine、Ext Direct调用服务器端Java方法

最近学习Ext高级用法，发现Ext 3.x中的新特性之一的 Direct貌似不错。网上搜索，发现directjngine对Ext Direct 支持不错。于是去官网下载了directjngine[1].1.3.zip，算是比较新的项目包。

根据DirectJNgine_User_Guide，一步步搭建第一个directjngine的demo。

?

第一步，在web.xml中配置DirectJNgine Servlet.我配置的web.xml如下：

?</p><p>?</p><p>相关的参数的注释说明，我已经加载web.xml中了。</p><p>?</p><p>第二步，使你的服务器端方法对JavaScript可见，其实就是说对客户端可见。</p><p>以我的demo为例，我想在hello.html中调用服务器端的方法。于是，我在hello.html中添加如下一段话。</p><p><textarea name="code" src="../djn/djn-remote-call-support.js"></script> <script type="text/javascript" src="../ejn/ejn-assert.js"></script> <!--以上为DirectJNgine的基础JS文件.--> <script type="text/javascript" src="MyActionApi.js"></script>

前两个script引用，是用来调用directjngine提供的默认的一些操作函数。只需引用即可，不需要关注太多。

最后一个js，在启动服务器前，你是看不到的。因为它是directjngine项目，根据你的配置自动生成的。至于其中到底是怎样，下面我会详细介绍。

?

第三步，设计服务器端的方法。如函数名称，是否需要返回值等等。因为在hello.html页面，我将会调用方法。

具体调用代码将在最后的hello.html代码说明部分进行集中说明。

?

第四步，使用Java语言，编写服务器端的方法。附上代码如下：

</p><p>?</p><p>?注意：</p><p>@DirectMethod这个标签很重要，就是通过这个标签和web.xml的一些配置，才会动态生成第二步中需要引入的js。这种书写方式下，你在Java代码中书写的方法名称就是你在前台JS调用的方法名称。如果你觉得这样子不安全，或是不专业。那么可以通过定义别名的方法对方法进行访问。书写形式如下：</p><p>@DirectMethod( method="nameyouwant")</p><p>这样子定义之后，前台JS调用服务器端方法时，方法的名称就是你红色定义的名称了。</p><p>把类编译好后，把class文件放入WEB-INF\classes相应的包目录下。要与web.xml中class文件的包的目录结构相同。</p><p>?</p><p>第五步，告诉DirectJNgine 去哪里寻找服务器端的方法。</p><p>在web.xml的配置中，有如下代码：</p><p>?<textarea name="code" ()INFO : com.softwarementors.extjs.djn.servlet.DirectJNgineServlet - "Servlet GLOBAL configuration: registryConfigurator()INFO : com.softwarementors.extjs.djn.servlet.DirectJNgineServlet - "Servlet 'mynamespace' Api configuration: apiNamespace=Ext.zhouyang, actionsNamespace=, apiFile=MyAction/MyActionApi.js => Full api file: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\directdemo\MyAction\MyActionApi.js, classes=com.softwarementors.extjs.djn.MyAction.MyAction" ()INFO : com.softwarementors.extjs.djn.jscodegen.CodeFileGenerator - "Creating source files for APIs..." ()

?

如果非调试状态，则可以置为false。

?

完成上面的步骤后，启动tomcat，发现在\Tomcat 6.0\webapps\directdemo\MyAction 目录下生成了三个文件。

如下：

MyActionApi.js，MyActionApi-debug.js，MyActionApi-min.js。其中的MyActionApi.js就是我们在第二步中引入的JavaScript。

它的作用相当于Server端代码的API一样，因为有它的存在，客户端的网页才知道服务器端都定义了些什么方法。我的demo中，生成的MyActionApi.js的代码如下：

</p><p>demo下载地址如下，老规矩，不要下载分：</p><p>http://download.csdn.net/source/2768164</p><p>?</p><p>此文只是快速搭建一个demo，深入原理和高级用法，我以后将会写文章说明。</p><p>?</p><p>在CSDN写了篇文章，发现Javaeye导入出现未知错误，没有办法，这里重发一次。应该也算是原创性文章吧。</p><p>?转正请注明出处：</p><p>http://blog.csdn.net/Achilles_Dynasty</p><p>http://aspnetdb.iteye.com/</p> </p><div class="aged2"><script type="text/javascript">a("article_content_down");</script></div> </div> <div id="pagebox" > <a href="/jiaocheng/webqd/" target="_blank">查看更多</a> <A href="/jiaocheng/20121107/1350128.html" title="WebKit源码分析系列之(1) html5 canvas">下一篇</A></div> <div id="MainLeftll"> <div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.com/jiaocheng/20121028/1350129.html">https://www.reader8.com/jiaocheng/20121028/1350129.html</a></div> <div class="related"><span class="relatedIco1">读书人精选</span> <ul class="relatedList"> </ul> </div> <div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div> <div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div> </div> </div> <!-- 文章正文左边结束 --> <!-- 文章正文右边开始 --> <div class="leftbox_r"> <div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> <div class="Rtitle"> <span class="Rtitle_text">热点排行</span></div> <div class="RContl"> <ul> <li><a href="/jiaocheng/20140117/1301491.html" target="_blank">jquery的after与insertAfter的差异</a></li> <li><a href="/jiaocheng/20121007/1266280.html" target="_blank">牛角尖啊牛角尖</a></li> <li><a href="/jiaocheng/20131226/1352920.html" target="_blank">weblogic 认证回绝 Authentication for </a></li> <li><a href="/jiaocheng/20120828/1264084.html" target="_blank">菜鸟阅读Servlet源码值得注意的地方</a></li> <li><a href="/jiaocheng/20131016/1342193.html" target="_blank">（四）事件处理——（8）一个简单的风格</a></li> <li><a href="/jiaocheng/20131015/1300997.html" target="_blank">（四）事件处理——（6）给.ready()回调</a></li> <li><a href="/jiaocheng/20120907/1267538.html" target="_blank">[转]Remote Debugging with Eclipse + W</a></li> <li><a href="/jiaocheng/20140113/1268317.html" target="_blank">在线favicon ico图标文件打造工具</a></li> <li><a href="/jiaocheng/20121010/1268874.html" target="_blank">ext gridpanel 增删节查例子</a></li> <li><a href="/jiaocheng/20121118/1270056.html" target="_blank">元素正中的几种方法</a></li> </ul> </div> <div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div> <!-- 文章正文右边结束 --> </div> <!--主体结束--> <script type="text/javascript">a("article_down_up");</script> <script type="text/javascript">a("foot");</script> <script type="text/javascript">a("article_down_up2");</script> <!--主体结束--> <div style="display:none"> <!--百度统计代码--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script type="text/javascript">a("allbt");</script> </body> </html>