EXT 3.x 使用详解之Ext.Direct(一)

jsczxy2

浏览: 1257700 次
性别:
来自: 常州

最近访客更多访客>>

error0702

sagadan

gaofeng393

yaonai2003

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT Servlet DWR JavaScript Struts

感觉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" onclick="hello();">
		
		<input type="button" value="user" onclick="user();">

	</body>
</html>

6.访问页面点击按钮即可看到效果！

5
顶

0
踩

分享到：

EXT 3.x 使用详解之Ext.Direct(二)---poll ... | 引用一下：EXT调试功能

2010-04-15 16:36
浏览 3945
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论