感觉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:
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:
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中加入如下代码:
<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的前缀,可以设置多个不同的域 在value中用逗号隔开-->
<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:
<%@ 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>
6.访问页面点击按钮即可看到效果!