extJs -direct使用

小灰灰 2021-05-12 11:50 526阅读 0赞

#  #

# 一、什么是DirectJngine #

#         2009年7月7日，ExtJS 3.0崭新出炉。其中一个重要功能为Direct，提供了客户端平滑访问服务器端方法的机制，类似于RPC。Direct是后端无关的，允许你选择自己喜欢的后端环境，例如Java、.NET、PHP、Ruby、Perl等。目前在Java环境的后端实现中，DirectJNgine最为完整。工作原理及使用方法：DJN在应用中注册一个Sevlet，所有客户端与服务器端的通信均通过该Sevlet完成。    #

#          DirectJNgine是Java版Ext Direct API的实现，它允许应用程序使用ExtJS调用Java方法，从而使JavaScript调用Java方法变得透明，摆脱过去繁琐费时的调用方法。 #

# 二、下载DirectJNgine： #

#          DirectJNgine下载地址：[http://code.google.com/p/directjngine/][http_code.google.com_p_directjngine]，目前最新版本为1.3，下载后解压即可，里面包含有DirectJNgine类库（lib）、帮助文档(doc)、实例(demo)等。 #

#           要使用DirectJNgine当然少不了Extjs类库支持，Ext类库在[http://www.sencha.com ][http_www.sencha.com]很容易找到，不再啰嗦。下载完毕将ExtJS类文件拷贝至项目的WebContent目录下。 #

**三、依赖文件：**

项目中使用DirectJNgine需要将以下jar文件添加至web应用程序的WEB-INF/lib目录下：

（1）DirectJNgine.jar：位于deliverables/directingine.xxx.jar；

（2）DirectJNgine使用第三方类库：①位于lib/\*.jar下的所用文件，子目录除外；②位于lib/runtimeonly/\*.jar  如果需要启用客户端参数调试模式，需要在web app项目中加入下面两个Js文件：

（3）djn-remote-call-support.js：位于deliverables/ djn-remote-call-support.js；

（4）ejn-assert.js：位于deliverables/ejn-assert.js。

**四、实例：**

在Extjs/examples/direct目录下可以查看到ExtJS提供的一些使用Direct API的例子，这些例子都采用PHP作为服务器端处理。当然在服务器端采用JAVA也很容易，不用担心，下面就来看以实际例子看DirectJNgine如何运作。

## 1实例说明 ##

本例按照DirectJNing官方提供文档实例进行演示，项目目录结构图一：

![117586_1305530942wWf5.png][]

图一

说明：

（1）       Java Resources:src目录存放服务器端Java文件，其中log4j.properties可以参考DirectJNgine下载目录中提供的配置信息根据自己项目情况做配置即可；

（2）       WebContent/djn和WebContent/ejn存放djn-remote-call-support.js、deliverables/ejn-assert.js，这步不是必须的；

（3）       Ext-3.3.3：存放ExtJs类库文件；

（4）       test：存放实例源码，本例静态代码文件为testAction.html，下面会用到。

其他文件内容就不详述。

## 2 在web.xml中配置DirectJNgine Servlet ##

在web.xml中，注意该Sevlet的配置 ：

<servlet-name>DjnServlet</servlet-name>

<servlet-class>

com.softwarementors.extjs.djn.servlet.DirectJNgineServlet

</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

<init-param>

<param-name>providersUrl</param-name>

<param-value>djn/directprovider</param-value>

</init-param>

<!—more parameters –->

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>DjnServlet</servlet-name>

<url-pattern>/djn/directprovider/\*</url-pattern>

</servlet-mapping>

com.softwarementors.extjs.djn.servlet.DirectJNgineServlet 即为DierctJNgine的Servlet引擎。初始化参数debug设置为true，DirectJNgine会为我们动态生成-dubug.js文件，不懂先不管后边一看便知。Servlet url-pattern必须使用“/\*”结尾，官方推荐使用/djn/directprovider/\*就别改了。

当然还用其他参数，别急慢慢来，这步是使用DirectJNgine的最基础配置，接着往下看。

## 3 设计服务器端Java方法 ##

服务器端代码如下：

**package** com.demo.ext.directjngine;

**import** com.softwarementors.extjs.djn.config.annotations.DirectMethod;

**public class** TestAction \{

@DirectMethod

**public** String doEcho(String data)\{

**return** data;

@DirectMethod

**public double** multiply(String num)\{

**try**\{

**double** num\_ = Double.*parseDouble*(num);

**return** num\_\*0.8;

\}**catch**( NumberFormatException e)\{

**throw** e;

说明：

（1）   TestAction实现两个方法：deEcho()实现返回输入参数，multiply()则对输入的参数做八折操作并返回折扣价。

（2）   @DirectMethod则对以上两个方法做注解，表明这些方法会被客户端调用，这两个方法会被DirectJNgine引擎自动生成客户端代码（可能不理解，没管理往下看，实践完后自然明白）。

EirectJNgine还有其他注解参数，先不管，目前掌握这个就够了，待原理搞懂了自己便可尝试使用其他参数。

## 3 让JavaScript能够使用服务器端方法 ##

接下来就要配置4.2中的DirectMethod，使它能够暴露给js客户端，从而调用服务器端方法，很简单，只需要把4.2中的TestAction类在web.xml中配置下即可。web.xml配置代码如下：

……

<init-param>

<param-name>apis</param-name>

<param-value>test </param-value>

</init-param>

<init-param>

<param-name>test.apiFile</param-name>

<param-value>test/testApi.js</param-value>

</init-param>

<init-param>

<param-name>test.apiNamespace</param-name>

<param-value>Ext.test</param-value>

</init-param>

<init-param>

<param-name>test.classes</param-name>

<param-value> com.demo.ext.directjngine.TestAction </param-value>

</init-param>

……

</servlet>

参数都是键值对形式，以下配置说明：

键apis：可以理解把本模块应用程序起个别名，以便组织模块（个人理解）。本模块命名为test，如果有多个用逗号分隔即可；

键%apiName%.apiFile：本例中%apiName%=test（test.apiFile）即在apis中定义的别名，用于定义DirectJNgine自动生成的js代码存放位置。在本例存放到test/testApi.js中，这个文件服务器端会自动生成，注意这里的生成路径相对于webapp的跟目录。%apiName%.apiFile后面的“.apiFile”为固定模式，我们只需要根据项目配置%apiName%即可；

键%apiName%.aipNamespace：用于定义自动生成js代码的命名空间。同上我们只需要替换%apiName%为test即可。

键%apiName%.classes：为本模块依赖的后端java类，它的值可以有多个类，用逗号分隔即可。本例中就是com.demo.ext.directjngine.TestAction，这样客户端js就可以调用TestAction中所有使用@DirectMethod注解的方法。

通过以上配置服务器端Java类的方法就暴露给客户端JavaScript了，下面说下如何调用这些方法。发布项目重启web服务，可以查看到test文件夹下多了三个文件分别是：testApi.js、testApi-debug.js和testApi-min.js。打开testApi.js代码如下：

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

\* Code generated automatically by DirectJNgine

\* DO NOT MODIFY MANUALLY!!

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

Ext.namespace( 'Ext.test');

Ext.test.PROVIDER\_BASE\_URL=window.location.protocol + '//' + window.location.host + '/' + (window.location.pathname.split('/').length>2 ? window.location.pathname.split('/')\[1\]+ '/' : '')  + 'djn/directprovider';

Ext.test.POLLING\_URLS = \{

message : Ext.test.PROVIDER\_BASE\_URL + '/poll/message' /\* () => String -- calls com.demo.ext.directjnging.TestAction.handlMessagePoll \*/

Ext.test.REMOTING\_API = \{

url: Ext.test.PROVIDER\_BASE\_URL,

type: 'remoting',

actions: \{

TestAction: \[

name: 'doEcho'/\*(String) => String \*/,

len: 1,

formHandler: false

\},

name: 'multiply'/\*(String) => double \*/,

len: 1,

formHandler: false

有点感觉了吧，接着往下看。

## 4 Ext.Direct调用服务器端方法 ##

### 4.1引入自动生成的js文件 ###

在testAction.html<head></head>引入如下代码：

<head>

……

href=*"../ext-3.3.3/resources/css/ext-all.css"* />

src=*"../ext-3.3.3/adapter/ext/ext-base.js"*></script>

……

Ext.onReady(**function**()\{

//下面再扩充

\});

</script>

</head>

说明：

（1）       引入ext基础文件包含css和js文件；

（2）       引入testApi.js：这个文件时自动生成的，具体引用路径就是我们在test.apiFile中定义的路径，由于本例直接定义在test/testApi.js，与testAction.html同一级目录所以就直接引用没有加入目录结构，根据自己定义路径引用相应的文件

### 4.2通过Ext.Drect注册服务器端方法 ###

为使Extjs能够调用java方法，需要注册一个远程供应器。扩充Ext.onReady以便注册服务器端方法，代码如下：

Ext.onReady(**function**()\{

Ext.Direct.addProvider(

Ext.test.REMOTING\_API

);

\});

这里Ext.test是我们在web.xml定义Servlet参数的test.apiNamespace的值，REMOTING\_API是自动生成的testApi.js中定义的供应器配置。

### 4.3调用服务器端方法 ###

我们通过构造一个TextField和一个DisplayField组件用于接收参数并输出处理后内容，通过Button组件调用事件，我们先看运行效果，再分析代码原理。继续扩充Ext.onReady代码如下：

Ext.onReady(**function**()\{

Ext.Direct.addProvider(

Ext.test.REMOTING\_API

);

**var** text = **new** Ext.form.TextField(\{ //输入参数容器

fieldLabel:"输入内容",

width:230

\});

**var** out = **new** Ext.form.DisplayField(\{ //输出内容容器

cls: 'x-form-text',

fieldLabel:"输出内容",

width:230

\});

**var** btn =  **new** Ext.Button(\{ //触发调用事件

text:"调用Java方法",

handler:**function**()\{

**var** value = text.getValue();

TestAction.doEcho(value,**function**(result ,e)\{  //这里是调用方法

**var** t = e.getTransaction();

**var** content = String.format('成功调用\{0\}.\{1\} ，返回数据为:\{2\}',t.action,t.method,result);

out.setValue(content);

\});

**var** panel = **new** Ext.form.FormPanel(\{

title:"简单Ext.Direct例子",

width:400,

autoScroll:**true**,

applyTo:Ext.getBody(),

items:\[text,out\],

bbar:\[btn\]

\});

运行页面数据数据点击按钮前如下图二：

![117586_130553097677R2.png][]

图二

点击“调用Java方法”按钮后，如图三所示：

![117586_1305530994oX00.png][]

图三

从上图可以看出成功调用java方法，并返回数据。

## 5、Ext.Direct调用过程分析 ##

（1）在4.3中我们看到，DirectJNgine通过web.xml配自动生成了testApi.js文件，通过查看Ext.Direct源码发现，Ext.Direct把我们使用@DirectMethod注册的方法都按照事件方法进行注册，事件名默认就是我们的函数名，如：”doEcho()等”。

（2）我们使用“类名.方法名”进行调用，方法参数依次传入，最后传入JavaScript函数作回调函数，用于接收服务端返回结果，如：TestAction.doEcho(value,function(result,e)\{……\});如果有三个输入参数则按照如下形式调用：TestAction.doEcho(value1, value2, value3,function(result,e)\{……\})。下面看下本例中调用过程：

TestAction.doEcho(value,**function**(result ,e)\{

**var** t = e.getTransaction();

**var** content = String.format('成功调用\{0\}.\{1\} ，返回数据为:\{2\}',t.action,t.method,result);

out.setValue(content);

\});

回调函数通过参数result接收返回数据，附加参数e为事件对象，它包含调用的Action和method名等其他信息。

**6、总结：**

# 到这里DirectJNgine的简单使用方法基本介绍完毕，不知道你有没有为Ext.Direct这种数据通讯方案感到兴奋，至少我稍微兴奋了一把。它可以：后端实现和前台调用彻底分离，同样的后台实现可以很快换成其他方案，如Java换成php或.net，前端调用不需要任何改变，这一特性体现在它采用JSON作为数据交换格式，即testApi.js中自动生成的Ext.test.REMOTING\_API。 #

[http_code.google.com_p_directjngine]: http://code.google.com/p/directjngine/
[http_www.sencha.com]: http://www.sencha.com%20%E5%BE%88%E5%AE%B9%E6%98%93%E6%89%BE%E5%88%B0%EF%BC%8C%E4%B8%8D%E5%86%8D%E5%95%B0%E5%97%A6%E3%80%82%E4%B8%8B%E8%BD%BD%E5%AE%8C%E6%AF%95%E5%B0%86extjs%E7%B1%BB%E6%96%87%E4%BB%B6%E6%8B%B7%E8%B4%9D%E8%87%B3%E9%A1%B9%E7%9B%AE%E7%9A%84webcontent/
[117586_1305530942wWf5.png]: /images/20210511/a592a51cdcfe483396f6710e5893334b.png
[117586_130553097677R2.png]: /images/20210511/e5e0877a95644d5b8745efbc35c710ac.png
[117586_1305530994oX00.png]: /images/20210511/7b19843dd13e4a43bac9ad4cb48e308e.png