EXT 3.x使用详细解的Ext.Direct(一)
6673 ワード
EXT 3.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:
3.使用するUserオブジェクト:
User.java:
4.OK、バックグラウンドの準備が整い、配置を始めましょう.まずweb.xmlの中で関連配置を行います.これは言うまでもなく、DWRもservletを配合します.具体的には注釈を見てください.
Web.xmlには、次のコードが追加されています.
5.ページ使用:
test_direct_1.jsp:
6.ページにアクセスボタンをクリックすると効果が見えます!
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.ページにアクセスボタンをクリックすると効果が見えます!