七步實現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如下：

 <?xml version="1.0" encoding="UTF-8"?><br /><web-app version="2.5"<br />xmlns="http://java.sun.com/xml/ns/javaee"<br />xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"<br />xsi:schemaLocation="http://java.sun.com/xml/ns/javaee<br />http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><br /><!-- 以下為DirectJNgine servlet 預設配置--><br /> <servlet><br /> <servlet-name>DjnServlet</servlet-name><br /> <servlet-class>com.softwarementors.extjs.djn.servlet.DirectJNgineServlet</servlet-class></p><p> <init-param><br /> <param-name>debug</param-name><br /> <param-value>true</param-value><br /> </init-param> </p><p> <init-param><br /> <param-name>providersUrl</param-name><br /> <param-value>djn/directprovider</param-value><br /> </init-param><br /><!-- DirectJNgine servlet 預設配置--></p><p><!-- api域:對應下面的各個param-name的首碼，可以設定多個不同的域--><br /> <init-param><br /> <param-name>apis</param-name><br /> <param-value><br />mynamespace<br /> </param-value><br /> </init-param></p><p><!-- mynamespace對應上面的api域。MyAction對應產生的js相應的檔案夾.伺服器運行後，將在MyAction/下存放自動產生的3個js檔案。這裡的名稱分別為<br />MyActionApi.js,MyActionApi-debug.js,MyActionApi-min.js<br /> --><br /><init-param><br /> <param-name>mynamespace.apiFile</param-name><br /> <param-value>MyAction/MyActionApi.js</param-value><br /> </init-param><br /><!-- mynamespace.對應上面的域."Ext.zhouyang"為命名空間所對應的值。會在頁面載入時候用上. --><br /> <init-param><br /> <param-name>mynamespace.apiNamespace</param-name><br /> <param-value>Ext.zhouyang</param-value><br /> </init-param><br /><!-- mynamespace.對應上面的域. 要使用的類的全路徑名 --><br /> <init-param><br /> <param-name>mynamespace.classes</param-name><br /> <param-value><br /> com.softwarementors.extjs.djn.MyAction.MyAction<br /> </param-value><br /> </init-param></p><p> <load-on-startup>1</load-on-startup><br /> </servlet> </p><p> <servlet-mapping><br /> <servlet-name>DjnServlet</servlet-name><br /> <url-pattern>/djn/directprovider/*</url-pattern><br /> </servlet-mapping></p><p> <welcome-file-list><br /> <welcome-file><br /> index.html<br /> </welcome-file><br /> </welcome-file-list><br /></web-app>

 

相關的參數的注釋說明，我已經載入web.xml中了。

 

第二步，使你的伺服器端方法對JavaScript可見，其實就是說對用戶端可見。

以我的demo為例，我想在hello.html中調用伺服器端的方法。於是，我在hello.html中添加如下一段話。

<!--以下為DirectJNgine的基礎JS檔案，放在djn目錄下，直接引用就可以。--><br /> <script type="text/javascript" src="../djn/djn-remote-call-support.js"></script><br /> <script type="text/javascript" src="../ejn/ejn-assert.js"></script><br /> <!--以上為DirectJNgine的基礎JS檔案.--><br /> <script type="text/javascript" src="MyActionApi.js"></script>

前兩個script引用，是用來調用directjngine提供的預設的一些操作函數。只需引用即可，不需要關注太多。

最後一個js，在啟動伺服器前，你是看不到的。因為它是directjngine項目，根據你的配置自動產生的。至於其中到底是怎樣，下面我會詳細介紹。

 

第三步，設計伺服器端的方法。如函數名稱，是否需要傳回值等等。因為在hello.html頁面，我將會調用方法。

具體調用代碼將在最後的hello.html代碼說明部分進行集中說明。

 

第四步，使用Java語言，編寫伺服器端的方法。附上代碼如下：

package com.softwarementors.extjs.djn.MyAction;<br />import com.softwarementors.extjs.djn.config.annotations.DirectMethod;<br />public class MyAction {<br />@DirectMethod<br />public String doEcho(String parm)<br />{<br />return "參數是" + parm;<br />}<br />@DirectMethod<br />public String doShow()<br />{<br />return "i am not easy";<br />}<br />}<br />

 

 注意：

@DirectMethod這個標籤很重要，就是通過這個標籤和web.xml的一些配置，才會動態產生第二步中需要引入的js。這種書寫方式下，你在Java代碼中書寫的方法名稱就是你在前台JS調用的方法名稱。如果你覺得這樣子不安全，或是不專業。那麼可以通過定義別名的方法對方法進行訪問。書寫形式如下：

@DirectMethod( method="nameyouwant")

這樣子定義之後，前台JS調用伺服器端方法時，方法的名稱就是你紅色定義的名稱了。

把類編譯好後，把class檔案放入WEB-INF/classes相應的包目錄下。要與web.xml中class檔案的包的目錄結構相同。

 

第五步，告訴DirectJNgine 去哪裡尋找伺服器端的方法。

在web.xml的配置中，有如下代碼：

  <init-param><br /> <param-name>mynamespace.classes</param-name><br /> <param-value><br /> com.softwarementors.extjs.djn.MyAction.MyAction<br /> </param-value><br /> </init-param>

在這裡需要注意，mynamespace.classes的紅色部分，一定要與web.xml上面的apis變數的mynamespace相同。

其次，com.softwarementors.extjs.djn.MyAction.MyAction 為第四步中書寫的類的全路徑名稱，如果有多個類，則用英文逗號分隔。

 

第六步，為了讓Extjs可以調用我們的伺服器端方法，我們需要註冊一個遠程調用提供者即a remoting provider。你需要做的就是在hello.html代碼中，加入如下語句，為某一個空間註冊一個遠程調用提供者：

//此處通過命名空間，添加初始化遠程調用API<br />Ext.zhouyang.REMOTING_API.enableBuffer = 0;<br />Ext.Direct.addProvider(Ext.zhouyang.REMOTING_API);</p><p>  

注意：上面的Ext.zhouyang為在web.xml變數中mynamespace.apiNamespace已經定義。

 

第七步，通過JavaScript進行調用伺服器端的方法。

 MyAction.doShow(function(result, e){<br />var t = e.getTransaction();<br />if(e.status){<br />out.append(<br /> String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',<br /> t.action,<br /> t.method,<br /> Ext.encode(result)));<br />}else{<br />out.append(<br /> String.format('<p><b>Call to {0}.{1} failed with message:</b><xmp>{2}</xmp></p>',<br /> t.action,<br /> t.method,<br /> e.message));<br />}<br />out.el.scroll('b', 100000, true);<br />});</p><p>//doEcho函數，此函數有參數。<br />var parm = txtparm.value; //要傳入背景參數<br />MyAction.doEcho(parm, function(result, e){<br />var t = e.getTransaction();<br />if(e.status){<br />out.append(String.format('<p><b>Successful call to {0}.{1} with response:</b><xmp>{2}</xmp></p>',<br />t.action, t.method, Ext.encode(result)));<br />}else{<br />out.append(String.format('<p><b>Call to {0}.{1} failed with message:</b><xmp>{2}</xmp></p>',<br />t.action, t.method, e.message));<br />}<br />out.el.scroll('b', 100000, true);<br />});

上面的代碼排版有點亂，這裡先做些說明，這個demo的下載網址，我最後會附送。可以直接查看代碼。

 

可以看到，對於函數的結構。如果需要傳入參數，則把參數寫在函數前面。

因為JavaScript調用伺服器端方法是非同步，所以，最好的方法就是定義一個回呼函數處理資料，而不是讓程式終止。

所以，對於上面的兩個方法，最後都定義了一個回呼函數。這個函數的作用是用來處理伺服器端返回的資料。

參數result是伺服器端方法返回的資料，e是一個even對象，包括一個事務對象，這個對象包含action和method的名稱和其他一些資訊。

 

e.status表示伺服器端成功執行了函數。如果返回false，則表示伺服器端出現了錯誤。通過e.message就可以查看出錯資訊。

 

其他參數說明：

<init-param><br /> <param-name>debug</param-name><br /> <param-value>true</param-value><br /></init-param>

如果設定為true，在tomcat的log目錄下的stdout_2010****.log檔案中會輸入相關的列印資訊。如：

INFO : com.softwarementors.extjs.djn.servlet.DirectJNgineServlet - "Servlet GLOBAL configuration: debug=true, providersUrl=djn/directprovider, minify=true, batchRequestsMultithreadingEnabled=true, batchRequestsMinThreadsPoolSize=16, batchRequestsMaxThreadsPoolSize=80, batchRequestsMaxThreadsPerRequest=8, batchRequestsMaxThreadKeepAliveSeconds=60, gsonBuilderConfiguratorClass=com.softwarementors.extjs.djn.gson.DefaultGsonBuilderConfigurator, dispatcherClass=com.softwarementors.extjs.djn.servlet.ssm.SsmDispatcher, jsonRequestProcessorThreadClass=com.softwarementors.extjs.djn.servlet.ssm.SsmJsonRequestProcessorThread, contextPath=--not specified: calculated via Javascript--, createSourceFiles=true" ()<br />INFO : com.softwarementors.extjs.djn.servlet.DirectJNgineServlet - "Servlet GLOBAL configuration: registryConfiguratorClass=" ()<br />INFO : com.softwarementors.extjs.djn.servlet.DirectJNgineServlet - "Servlet APIs configuration: apis=mynamespace" ()<br />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" ()<br />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的代碼如下：

/**********************************************************************<br /> *<br /> * Code generated automatically by DirectJNgine<br /> * Copyright (c) 2009, Pedro Agulló Soliveres<br /> *<br /> * DO NOT MODIFY MANUALLY!!<br /> *<br /> **********************************************************************/</p><p>Ext.namespace( 'Ext.zhouyang');</p><p>Ext.zhouyang.PROVIDER_BASE_URL=window.location.protocol + '//' + window.location.host + '/' + (window.location.pathname.split('/').length>2 ? window.location.pathname.split('/')[1]+ '/' : '') + 'djn/directprovider';</p><p>Ext.zhouyang.POLLING_URLS = {<br />}</p><p>Ext.zhouyang.REMOTING_API = {<br /> url: Ext.zhouyang.PROVIDER_BASE_URL,<br /> type: 'remoting',<br /> actions: {<br /> MyAction: [<br /> {<br /> name: 'doEcho'/*(String) => String */,<br /> len: 1,<br /> formHandler: false<br /> },<br /> {<br /> name: 'doShow'/*() => String */,<br /> len: 0,<br /> formHandler: false<br /> }<br /> ]<br /> }<br />}</p><p>

 

 可以看到，包括函數名稱，參數類型，參數個數等都有定義。

 至此，directjngine、Ext Direct調用Java伺服器端方法大功告成。

 demo運行如下：

 

demo如下，老規矩，不要下載分：

http://download.csdn.net/source/2768164

 

此文只是快速搭建一個demo，深入原理和進階用法，我以後將會寫文章說明。

 

轉正請註明出處：http://blog.csdn.net/Achilles_Dynasty