Ext Direct

Ext.direct可能是ExtJS 3.0版本比较热门的特性，现在不少人都在关注。Ext.direct，JavaScript中称之为Comet 和 Reverse Ajax，对Java程序来说，和JMS机制一样，就是将服务器端信息推送到客户端，JMS推送到Java应用，而Ext.direct推送到是客户端浏览器。如何向在浏览器端实现订阅，通常是通过Applet，ActiveX和Flash实现，当然ExtJS是通过一个flash组件完成的，这个也是目前实现Comet的通行做法。Ext.direct特性对Web开发帮助非常大，之前要实现信息实施更新，基本都是定时刷新，而Ext.direct和 Comet技术，可以实现消息订阅和推送，那么这种实时消息提醒就非常方便，如聊天室，监控系统，耗时较长的操作等，这些实现起来就非常简单啦。

感觉EXT3.x增加的最好的功能之一就是这个Ext.Direct了，它实现了类似于DWR的功能，把方法暴露在服务端以便直接在前端像类一样使用后台的方法，可以使用户不再关注ajax的request和response的处理了。。而且很好地直接使用了json格式，不需要我们自己来转换，不过现在为止除了和EXT框架整合比较方便意外，我觉得其他功能还有待改善，并不能替代DWR在JAVA-AJAX之间使用的地位，嘛...毕竟是新东西，值得学习一下！



1.去下载源代码，EXT官方并没有对java的支持。。。很囧，php都支持了啊。。。好吧找到google code的一个开源项目来支持java，下载地址:http://code.google.com/p/directjngine/downloads /list 导入里面的lib包里的jar以及最关键的deliverables/directjngine.1.2.jar



2.可以写个java类了:

TestDirect.java:
Java代码

1. package com.xuyi.web.direct;
2.
3. import com.softwarementors.extjs.djn.config.annotations.DirectMethod;
4. import com.xuyi.vo.User;
5.
6. /**
7. * @author xuyi
8. *
9. */
10. public class TestDirect {
11. //注意注解
12. @DirectMethod
13. public String testData(String data){
14. return data;
15. }
16.
17. @DirectMethod
18. public User testUser(){
19. User user = new User();
20. user.setUsername("xuyi");
21. user.setPassword("123");
22. user.setAge(28);
23. return user;
24. }
25.
26. }

package com.xuyi.web.direct;

import com.softwarementors.extjs.djn.config.annotations.DirectMethod;
import com.xuyi.vo.User;

/**
* @author xuyi
*
*/
public class TestDirect {
//注意注解
@DirectMethod
public String testData(String data){
return data;
}

@DirectMethod
public User testUser(){
User user = new User();
user.setUsername("xuyi");
user.setPassword("123");
user.setAge(28);
return user;
}

}

3.用到的User对象:

User.java:
Java代码

1. package com.xuyi.vo;
2.
3. /**
4. * @author xuyi
5. *
6. */
7. public class User {
8.
9. private String username;
10.
11. private String password;
12.
13. private int age;
14.
15. public int getAge() {
16. return age;
17. }
18.
19. public void setAge(int age) {
20. this.age = age;
21. }
22.
23. public String getPassword() {
24. return password;
25. }
26.
27. public void setPassword(String password) {
28. this.password = password;
29. }
30.
31. public String getUsername() {
32. return username;
33. }
34.
35. public void setUsername(String username) {
36. this.username = username;
37. }
38.
39.
40. }

package com.xuyi.vo;

/**
* @author xuyi
*
*/
public class User {

private String username;

private String password;

private int age;

public int getAge() {
return age;
}

public void setAge(int age) {
this.age = age;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}


}

4.OK,后台准备就绪，开始进行配置吧，先在web.xml里面进行相关的配置，这个不用多说，DWR也一样要配servlet,具体看注释吧:

web.xml中加入如下代码:
Xml代码

1. <servlet>
2. <servlet-name>action</servlet-name>
3. <servlet-class>
4. org.apache.struts.action.ActionServlet
5. </servlet-class>
6. <init-param>
7. <param-name>config</param-name>
8. <param-value>
9. /WEB-INF/conf/struts/struts-config.xml
10. </param-value>
11. </init-param>
12. <init-param>
13. <param-name>debug</param-name>
14. <param-value>3</param-value>
15. </init-param>
16. <init-param>
17. <param-name>detail</param-name>
18. <param-value>3</param-value>
19. </init-param>
20. <load-on-startup>0</load-on-startup>
21. </servlet>
22.
23. <servlet>
24. <servlet-name>DjnServlet</servlet-name>
25. <servlet-class>
26. com.softwarementors.extjs.djn.servlet.DirectJNgineServlet
27. </servlet-class>
28.
29. <init-param>
30. <param-name>debug</param-name>
31. <param-value>true</param-value>
32. </init-param>
33.
34. <init-param>
35. <param-name>minify</param-name>
36. <param-value>true</param-value>
37. </init-param>
38.
39. <init-param>
40. <param-name>providersUrl</param-name>
41. <param-value>djn/directprovider</param-value>
42. </init-param>
43.
44. <init-param>
45. <param-name>batchRequestsMultithreadingEnabled</param-name>
46. <param-value>false</param-value>
47. </init-param>
48.
49. <!-- api域： 对应下面的各个param-name的前缀，可以设置多个不同的域-->
50. <init-param>
51. <param-name>apis</param-name>
52. <param-value>test</param-value>
53. </init-param>
54.
55. <!-- test.对应上面的域 test/用来安放其自动生成的js文件 -->
56. <init-param>
57. <param-name>test.apiFile</param-name>
58. <param-value>test/test.js</param-value>
59. </init-param>
60.
61. <!-- test.对应上面的域 命名空间会在页面加载时候用上 -->
62. <init-param>
63. <param-name>test.apiNamespace</param-name>
64. <param-value>Ext.xuyi</param-value>
65. </init-param>
66.
67. <!-- test.对应上面的域 类的具体包路径 -->
68. <init-param>
69. <param-name>test.classes</param-name>
70. <param-value>com.xuyi.web.direct.TestDirect</param-value>
71. </init-param>
72.
73. <load-on-startup>1</load-on-startup>
74. </servlet>
75. <!-- 默认servlet路径 -->
76. <servlet-mapping>
77. <servlet-name>DjnServlet</servlet-name>
78. <url-pattern>/djn/directprovider/*</url-pattern>
79. </servlet-mapping>

<servlet>
<servlet-name>action</servlet-name>
<servlet-class>
org.apache.struts.action.ActionServlet
</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>
/WEB-INF/conf/struts/struts-config.xml
</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>3</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>3</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>

<servlet>
<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>minify</param-name>
<param-value>true</param-value>
</init-param>

<init-param>
<param-name>providersUrl</param-name>
<param-value>djn/directprovider</param-value>
</init-param>

<init-param>
<param-name>batchRequestsMultithreadingEnabled</param-name>
<param-value>false</param-value>
</init-param>

<!-- api域： 对应下面的各个param-name的前缀，可以设置多个不同的域-->
<init-param>
<param-name>apis</param-name>
<param-value>test</param-value>
</init-param>

<!-- test.对应上面的域 test/用来安放其自动生成的js文件 -->
<init-param>
<param-name>test.apiFile</param-name>
<param-value>test/test.js</param-value>
</init-param>

<!-- test.对应上面的域 命名空间会在页面加载时候用上 -->
<init-param>
<param-name>test.apiNamespace</param-name>
<param-value>Ext.xuyi</param-value>
</init-param>

<!-- test.对应上面的域 类的具体包路径 -->
<init-param>
<param-name>test.classes</param-name>
<param-value>com.xuyi.web.direct.TestDirect</param-value>
</init-param>

<load-on-startup>1</load-on-startup>
</servlet>
<!-- 默认servlet路径 -->
<servlet-mapping>
<servlet-name>DjnServlet</servlet-name>
<url-pattern>/djn/directprovider/*</url-pattern>
</servlet-mapping>

5.页面使用：

test_direct_1.jsp：
Html代码

1. <%@ page language="java" pageEncoding="UTF-8"%>
2. <html>
3. <head>
4. <title>Ext3 Direct功能示例</title>
5. <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script>
6. <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script>
7. <script type="text/javascript" src="${ctxPath}/test/test.js"></script>
8. </head>
9. <body>
10. <script type="text/javascript">
11. //Register provider
12. //use namespace Ext.xuyi
13. Ext.xuyi.REMOTING_API.enableBuffer = 0;
14. Ext.Direct.addProvider(Ext.xuyi.REMOTING_API);
15. //hello function
16. hello=function(){
17. TestDirect.testData("hello,Ext Direct!",function(data){
18. console.log(data);
19. alert(data);
20. });
21. }
22. //user function
23. user=function(){
24. TestDirect.testUser(function(data){
25. console.log(data);
26. alert("username:" + data.username+" password:"+data.password+" age:"+data.age);
27. });
28. }
29.
30. </script>
31. <input type="button" value="hello" οnclick="hello();">
32.
33. <input type="button" value="user" οnclick="user();">
34.
35. </body>
36. </html>

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ext3 Direct功能示例</title>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="${ctxPath}/test/test.js"></script>
</head>
<body>
<script type="text/javascript">
//Register provider
//use namespace Ext.xuyi
Ext.xuyi.REMOTING_API.enableBuffer = 0;
Ext.Direct.addProvider(Ext.xuyi.REMOTING_API);
//hello function
hello=function(){
TestDirect.testData("hello,Ext Direct!",function(data){
console.log(data);
alert(data);
});
}
//user function
user=function(){
TestDirect.testUser(function(data){
console.log(data);
alert("username:" + data.username+" password:"+data.password+" age:"+data.age);
});
}

</script>
<input type="button" value="hello" οnclick="hello();">

<input type="button" value="user" οnclick="user();">

</body>
</html>