Struts 2：一流的AJAX支持
Struts 2相比Struts 1，在很多方面都有了很大改善，而作為一個(gè)Web框架，其AJAX方面的增強(qiáng)又是非常重要的。在當(dāng)今——Web 2.0概念鋪天蓋地的Internet環(huán)境下，簡(jiǎn)易的AJAX集成對(duì)于一個(gè)成功的WEB框架來說是不可或缺的。因此，Struts 2其中的一個(gè)重要的功能（Feature）就是“First-class AJAX support - Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags（大意：一流的AJAX支持——通過AJAX標(biāo)志增加互動(dòng)性和靈活性，而且使用這些AJAX標(biāo)志與普通的Struts標(biāo)志同樣簡(jiǎn)單）”。
一流的AJAX支持的實(shí)現(xiàn)原理
基于不重新發(fā)明輪子的原則，Struts 2并沒有開發(fā)新的AJAX框架，而是使用時(shí)下Java EE平臺(tái)中比較流行的AJAX框架——Dojo和DWR。最近在Musachy Barroso等同志的無私奉獻(xiàn)下，開發(fā)了Struts 2的JSON插件（Plugin），極大地方便了我們輸出JSON結(jié)果（Result）。
JSON插件（Plugin）
truts 2的showcase中的AJAX部分，JSON的結(jié)果輸出是通過Freemaker模板實(shí)現(xiàn)。這種方法在簡(jiǎn)易性和靈活性上都比不上JSON插件，所以JSON插件值得向大家五星推薦。
下面讓我們看一個(gè)JSON插件的例子。
首先到以下網(wǎng)址http://code.google.com/p/jsonplugin/downloads/list下載JSON插件的JAR包，并將其加入你的WebContent\WEB-INF\lib下。
接下是本例子的Action代碼：
import java.util.ArrayList;
import java.util.List;
import com.googlecode.jsonplugin.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;
public class JsonPluginAction extends ActionSupport {
private static final long serialVersionUID = -6784977600668791997L;
private int bookId;
private String title;
private double price;
private List< String> comments;
private transient String secret1;
private String secret2;
@JSON(name="ISBN")
public int getBookId() {
return bookId;
}
public void setBookId(int bookId) {
this.bookId = bookId;
}
public List< String> getComments() {
return comments;
}
public void setComments(List< String> comments) {
this.comments = comments;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
@Override
public String execute() {
bookId = 15645912;
title = "Max On Java";
price = 0.9999d;
comments = new ArrayList< String>(3);
comments.add("It's no bad!");
comments.add("WOW!");
comments.add("No comment!");
secret1 = "You can't see me!";
secret2 = "I am invisible!";
return SUCCESS;
}
}
以上代碼值得注意的是，通過@JSON的JAVA注釋（Annotation），我們可以改變JSON結(jié)果的屬性名稱，另外帶有transient修飾符與沒有Getter方法的字段（field）都不會(huì)被串行化為JSON。
然后，我們來配置一下此Action，代碼如下：
< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
< struts>
< package name="Struts2_AJAX_DEMO" extends="json-default">
< action name="JsonPlugin" class="tutorial.JsonPluginAction">
< result type="json" />
< /action>
< /package>
< /struts>
上面配置文件的“package”元素和以往不同的是，它擴(kuò)展了“json-default”而不是“struts-default”。“json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定義的。該文件同時(shí)定義了“json”的結(jié)果類型，有興趣的朋友可以打開此文件看看。
發(fā)布運(yùn)行應(yīng)用程序，在瀏覽器中鍵入：http://localhost:8080/Struts2_Ajax/JsonPlugin.action，出現(xiàn)下載文件對(duì)話框，原因是JSON插件將HTTP響應(yīng)（Response）的MIME類型設(shè)為“application/json”。把文件下載下來，用記事本打開，內(nèi)容如下：
{"ISBN":15645912,"comments":["It's no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}
當(dāng)然這還不是一個(gè)完整的AJAX的例子，下面讓我們寫一個(gè)HTML文件將其完成，HTML代碼如下：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" >
< head>
< title>JSON Plugin< /title>
< script type="text/javascript">
var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);
if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
function XMLHttpRequest() {
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oRequest = new ActiveXObject(arrSignatures[i]);
return oRequest;
} catch (oError) { /*ignore*/ }
}
throw new Error("MSXML is not installed on your system.");
}
}
function retrieveBook() {
if(bXmlHttpSupport) {
var sUrl = 'JsonPlugin.action';
var oRequest = new XMLHttpRequest();
oRequest.onreadystatechange = function() {
if(oRequest.readyState == 4) {
var oBook = eval('(' + oRequest.responseText + ')');
var bookHolder = document.getElementById('bookHolder');
var sBook = '< p>< b>ISBN: < /b>' + oBook.ISBN + '< /p>';
sBook += ('< p>< b>Title: < /b>' + oBook.title + '< /p>');
sBook += ('< p>< b>Price: < /b>$' + oBook.price + '< /p>');
sBook += ('< b>< i>Comments: < /i>< /b>< hr/>');
for(i = 0; i < oBook.comments.length; i++) {
sBook += ('< p>< b>#' + (i + 1) + ' < /b>' + oBook.comments[i] + '< /p>');
}
bookHolder.innerHTML = sBook;
}
};
oRequest.open('POST', sUrl);
oRequest.send(null);
}
}
< /script>
< /head>
< body>
< input type="button" value="Retrieve Book" onclick="retrieveBook()" />
< div id="bookHolder">< /div>
< /body>
< /html>
以上代碼中，我沒有使用任何的AJAX的Javascript包，而是參考《Professional Javascript For Web Developer》手工創(chuàng)建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法將JSON字符串變?yōu)镴SON對(duì)象。需要注意的是，要調(diào)用eval函數(shù)時(shí)，必須使用“(”和“)”將JSON字符串括起來，否則會(huì)出錯(cuò)的。
#p#
Struts 2與Dojo
Dojo是開源Javascript工具包，它引了Widget的概念，方便了Javascript面向?qū)ο缶幊蹋∣OP），改進(jìn)Javascript的事件模型。在此我不打算對(duì)此進(jìn)行深入的講解，有興趣的朋友的可以找網(wǎng)上找一些關(guān)于Dojo的資料學(xué)習(xí)。
Struts 2基于Dojo編寫一些AJAX標(biāo)志（在Dojo中稱為Widget），要使用這些標(biāo)志的AJAX功能，需要將標(biāo)志的“theme”屬性設(shè)為“ajax”。同時(shí)，亦需要將加入在< head>與< /head>之間加入< s:head theme="ajax" />。當(dāng)使用這些標(biāo)志的AJAX功能，有些屬性可能會(huì)經(jīng)常用到，所以我會(huì)對(duì)這些屬性稍作解釋。
名稱 描述
href XHR（XMLHttpRequest）請(qǐng)求的地址
listenTopics 監(jiān)聽的Dojo話題（Topic）以觸發(fā)自身，如可以在可以通過發(fā)布（Publish）相應(yīng)的話題，通知< s:autocompleter />重新加載其備選項(xiàng)（Options）
notifyTopics 完成遠(yuǎn)程調(diào)用后，發(fā)出通知，觸發(fā)相應(yīng)的Javascript函數(shù)或Dojo Widget
formId 需要提交到服務(wù)器的表單的ID
formFilter 過濾表單字段的Javascript函數(shù)名稱
indicator 在XHR處理過程中，包含用戶提示的信息的HTML元素的ID，如圖片或DIV等表1 常用的AJAX標(biāo)志屬性
這些標(biāo)志包括：< s:a />、< s: submit />、< s:autocompleter />和< s:tree />等，下面我將分別講解。
1、< s:a />和< s:submit />
這兩個(gè)標(biāo)志方便了我們的調(diào)用XHR實(shí)現(xiàn)AJAX，所以上面的HTML如果使用了這兩標(biāo)志將會(huì)變得更簡(jiǎn)單，因?yàn)槲覀儾挥迷偃ダ頃?huì)繁鎖的XHR創(chuàng)建和設(shè)定的工作。下面是示例代碼：
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>JSON Plugin< /title>
< s:head theme="ajax" />
< script type="text/javascript">
dojo.addOnLoad(function() {
dojo.event.topic.subscribe('retrieveBook', this, function(data, type, e){
if(type == 'load') {
showBook(data);
} else if(type == 'error') {
alert('Can not retrieve the book');
}
});
});
function showBook(strBook) {
var oBook = eval('(' + strBook + ')');
var bookHolder = document.getElementById('bookHolder');
var sBook = '< p>< b>ISBN: < /b>' + oBook.ISBN + '< /p>';
sBook += ('< p>< b>Title: < /b>' + oBook.title + '< /p>');
sBook += ('< p>< b>Price: < /b>$' + oBook.price + '< /p>');
sBook += ('< b>< i>Comments: < /i>< /b>< hr/>');
for(i = 0; i < oBook.comments.length; i++) {
sBook += ('< p>< b>#' + (i + 1) + ' < /b>' + oBook.comments[i] + '< /p>');
}
bookHolder.innerHTML = sBook;
}
< /script>
< /head>
< body>
< s:url id="bookUrl" value="/JsonPlugin.action" />
< s:submit href="%{bookUrl}" theme="ajax" indicator="indicator"
value="Retrieve Book" align="left" notifyTopics="retrieveBook" />
< s:a theme="ajax" href="%{bookUrl}" indicator="indicator"
notifyTopics="retrieveBook">Retrieve Book< /s:a>
< img id="indicator"
src="${pageContext.request.contextPath}/images/indicator.gif"
alt="Loading" style="display:none" />
< div id="bookHolder">< /div>
< /body>
< /html>
能上述代碼還不夠簡(jiǎn)潔，因?yàn)槲覍TML格式化的工作都放在Javascript中完成。但如果你的XHR返回的是HTML片段，你可以簡(jiǎn)單地將< s:a />或< s:submit />的“targets”屬性設(shè)為“bookHolder”即可，詳情大家可以參考Struts 2 Showcase。至于返回HTML片段，可以通過Action + Freemaker完成。
2、< s:autocompleter />
Autocomplete是比較經(jīng)典的AJAX應(yīng)用，雖然谷歌已經(jīng)停止使用這一功能，但就Autocompleter自身而言的確是很酷的。下面是一個(gè)< s:autocompleter />的例子。
首先，我要偽造一些字符串?dāng)?shù)據(jù)，代碼如下：
import java.util.ArrayList;
import java.util.List;
public final class Datas {
public static final List< String> NAMES;
static {
NAMES = new ArrayList< String>();
NAMES.add("Alabama");
NAMES.add("Alaska");
NAMES.add("American Samoa");
NAMES.add("Arizona");
NAMES.add("Arkansas");
NAMES.add("Armed Forces Europe");
NAMES.add("Armed Forces Pacific");
NAMES.add("Armed Forces the Americas");
NAMES.add("California");
NAMES.add("Colorado");
NAMES.add("Connecticut");
NAMES.add("Delaware");
NAMES.add("District of Columbia");
NAMES.add("Federated States of Micronesia");
NAMES.add("Florida");
NAMES.add("Georgia");
NAMES.add("Guam");
NAMES.add("Hawaii");
NAMES.add("Idaho");
NAMES.add("Illinois");
NAMES.add("Indiana");
NAMES.add("Iowa");
NAMES.add("Kansas");
NAMES.add("Kentucky");
NAMES.add("Louisiana");
NAMES.add("Maine");
NAMES.add("Marshall Islands");
NAMES.add("Maryland");
NAMES.add("Massachusetts");
NAMES.add("Michigan");
NAMES.add("Minnesota");
NAMES.add("Mississippi");
NAMES.add("Missouri");
NAMES.add("Montana");
NAMES.add("Nebraska");
NAMES.add("Nevada");
NAMES.add("New Hampshire");
NAMES.add("New Jersey");
NAMES.add("New Mexico");
NAMES.add("New York");
NAMES.add("North Carolina");
NAMES.add("North Dakota");
NAMES.add("Northern Mariana Islands");
NAMES.add("Ohio");
NAMES.add("Oklahoma");
NAMES.add("Oregon");
NAMES.add("Pennsylvania");
NAMES.add("Puerto Rico");
NAMES.add("Rhode Island");
NAMES.add("South Carolina");
NAMES.add("South Dakota");
NAMES.add("Tennessee");
NAMES.add("Texas");
NAMES.add("Utah");
NAMES.add("Vermont");
NAMES.add("Virgin Islands, U.S.");
NAMES.add("Virginia");
NAMES.add("Washington");
NAMES.add("West Virginia");
NAMES.add("Wisconsin");
NAMES.add("Wyoming");
}
}
然后是用于獲取和過濾數(shù)據(jù)的Action，代碼如下：
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
public class AutocompleterAction extends ActionSupport {
private static final long serialVersionUID = -8201401726773589361L;
private List< String[]> names;
private String start;
public void setStart(String start) {
this.start = start;
}
public List< String[]> getNames() {
return names;
}
@Override
public String execute() {
names = new ArrayList< String[]>();
if(start == null || "".equals(start.trim())) {
start = "a";
}
for(String s : Datas.NAMES) {
if(s.toLowerCase().startsWith(start.toLowerCase())) {
names.add(new String[]{ s, s });
}
}
return SUCCESS;
}
}
上述Action會(huì)以JSON的形式返回以start開頭的Datas.NAMES的中字符串，以下是此Action的配置：
< action name="Autocompleter" class="tutorial.AutocompleterAction">
< result type="json">
< param name="root">names< /param>
< /result>
< /action>
在JSON類型結(jié)果的參數(shù)中加入“root”參數(shù)可以設(shè)定輸出JSON結(jié)果的根，以上述情況為例，如果沒有“root”參數(shù)，輸出將為“{ "names": [ ["xxx", "xxx"]...] }”，加了之后變就會(huì)成“[ ["xxx", "xxx"]...] ”。接下來，讓我們看看頁面的代碼：
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Struts 2 AJAX - Autocompleter< /title>
< s:head theme="ajax" />
< /head>
< body>
< h2>
Autocompleter
< /h2>
< s:form action="autocompleterForm">
< s:textfield label="abc" name="abc" />
< tr>
< td class="tdLabel">
< label class="label">
No AJAX Autocompleter:
< /label>
< /td>
< td>
< s:autocompleter theme="simple" name="user"
list="@tutorial.Datas@NAMES" />
< /td>
< /tr>
< tr>
< td class="tdLabel">
< label class="label">
AJAX Autocompleter:
< /label>
< /td>
< td>
< s:url id="dataUrl" value="/Autocompleter.action" />
< s:autocompleter theme="ajax" name="start" href="%{dataUrl}"
loadOnTextChange="true" loadMinimumCount="1" indicator="indicator"
autoComplete="false" showDownArrow="false" />
< img id="indicator"
src="${pageContext.request.contextPath}/images/indicator.gif"
alt="Loading" style="display:none" />
< /td>
< /tr>
< /s:form>
< /body>
< /html>
上述頁面包含兩個(gè)< s:autocompleter />標(biāo)志，前者使用“simple”模板，所以不具有AJAX功能，它的數(shù)據(jù)將以HTML方式輸出到最終頁面里；而后者則使用了“ajax”模板，每當(dāng)輸入框的值發(fā)生改變時(shí)，它都向URL“/Autocompleter.action”發(fā)送請(qǐng)求，Action根據(jù)請(qǐng)求中的start參數(shù)的值，返回相當(dāng)?shù)腏SON，在請(qǐng)求完成后頁面通過回調(diào)函數(shù)改變輸入框的下拉提示，效果如下圖所示：
3、< s:tree />
樹是是比較常用的數(shù)據(jù)結(jié)構(gòu)，因?yàn)樗梢院芎玫伢w現(xiàn)真實(shí)世界中對(duì)象之間的關(guān)系。< s:tree />的使用也相對(duì)簡(jiǎn)單，但需要說明的是——Struts 2.0.6 GA版本的< s:tree />是有BUG的，大家可以點(diǎn)擊這個(gè)鏈接https://issues.apache.org/struts/browse/WW-1813了解詳細(xì)的情況。這個(gè)BUG主要是在< s:tree />的通過“treeCollapsedTopic”、“treeExpandedTopic”和“treeSelectedTopic”設(shè)定的話題（Topic）都沒有起作用，上述鏈接相應(yīng)給出了解決方法，但我認(rèn)為該方法太麻煩（需要自己重新編譯和打包Struts 2），所以下面的例子，我將另辟?gòu)袕剑?qǐng)參考以下代碼。
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Struts 2 AJAX - Tree< /title>
< s:head theme="ajax" debug="true" />
< script type="text/javascript">
function treeNodeSelected(arg) {
alert(arg.source.title + ' selected');
}
dojo.addOnLoad(function() {
var s = dojo.widget.byId('parentId').selector;
dojo.event.connect(s, 'select', 'treeNodeSelected');
});
< /script>
< /head>
< body>
< h2>
Tree
< /h2>
< div style="float:left; margin-right: 50px;">
< s:tree label="parent" id="parentId" theme="ajax"
templateCssPath="/struts/tree.css" showRootGrid="true"
showGrid="true">
< s:treenode theme="ajax" label="child1" id="child1Id">
< s:treenode theme="ajax" label="grandchild1" id="grandchild1Id" />
< s:treenode theme="ajax" label="grandchild2" id="grandchild2Id" />
< s:treenode theme="ajax" label="grandchild3" id="grandchild3Id" />
< /s:treenode>
< s:treenode theme="ajax" label="child2" id="child2Id" />
< s:treenode theme="ajax" label="child3" id="child3Id" />
< s:treenode theme="ajax" label="child4" id="child4Id" />
< s:treenode theme="ajax" label="child5" id="child5Id">
< s:treenode theme="ajax" label="gChild1" id="gChild1Id" />
< s:treenode theme="ajax" label="gChild2" id="gChild2Id" />
< /s:treenode>
< /s:tree>
< /div>
< /body>
< /html>
因?yàn)镈ojo的樹控件，即使在沒有設(shè)定“selector”情況下，也會(huì)自動(dòng)生成一個(gè)默認(rèn)的Selector，所以只要將其事件綁定到特定的事件處理函數(shù)即可。打開http://localhost:8080/Struts2_Ajax/Tree.jsp，點(diǎn)擊任一樹節(jié)點(diǎn)，頁面如下圖所示：
更多< s:tree />
在Struts 2的showcase中有兩個(gè)< s:tree />的例子，分別是靜態(tài)樹與動(dòng)態(tài)樹。所謂的靜態(tài)樹即是在編寫JSP代碼時(shí)通過< s:treenode />生成樹節(jié)點(diǎn)。我的上一篇文章的例子就是一個(gè)典型的靜態(tài)樹。而動(dòng)態(tài)樹則是在程序運(yùn)行期間，Struts 2 運(yùn)行時(shí)（Runtime）根據(jù)程序中的數(shù)據(jù)動(dòng)態(tài)創(chuàng)建樹節(jié)點(diǎn)。雖然在兩個(gè)例子中< s:tree />的theme屬性都為“ajax”，但是從嚴(yán)格意義上來說，這兩種樹都不屬于AJAX樹，因?yàn)樗鼈兌际窃谳敵鲰撁鏁r(shí)將全部節(jié)點(diǎn)加載到其中，而不是在父節(jié)點(diǎn)展開時(shí)通過XHR（XMLHttpRequest）獲取節(jié)點(diǎn)數(shù)據(jù)。
動(dòng)態(tài)樹
下面我們先看一下動(dòng)態(tài)樹的例子，接著再一步步地將其改造為名副其實(shí)的AJAX 樹。下例將會(huì)把WEB應(yīng)用程序的目錄樹展現(xiàn)在JSP頁面中。因此，我需要先包裝一下java.io.File 類，代碼如下：
import java.io.File;
public class FileWrapper {
private File file;
public FileWrapper(String path) {
file = new File(path);
}
public FileWrapper(File file) {
this.file = file;
}
public String getId() {
return "file_" + file.hashCode();
}
public String getName() {
return file.getName();
}
public String getAbsolutePath() {
return file.getAbsolutePath();
}
public FileWrapper[] getChildren() {
File[] files = file.listFiles();
if(files != null && files.length > 0) {
int length = files.length;
FileWrapper[] wrappers = new FileWrapper[length];
for(int i = 0; i < length; ++i) {
wrappers[i] = new FileWrapper(files[i]);
}
return wrappers;
}
return new FileWrapper[0];
}
}
之所以需要對(duì)File類進(jìn)行如此包裝，是因?yàn)? s:tree />用于動(dòng)態(tài)樹時(shí)，rootNode、nodeIdProperty、nodeTitleProperty 和 childCollectionProperty等屬性都必填的。
然后是Action類的代碼如下：
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.interceptor.ServletRequestAware;
import com.opensymphony.xwork2.ActionSupport;
public class DynamicTreeAction extends ActionSupport implements ServletRequestAware {
private static final long serialVersionUID = 1128593047269036737L;
private HttpServletRequest request;
private FileWrapper root;
public void setServletRequest(HttpServletRequest request) {
this.request = request;
}
public FileWrapper getRoot() {
return root;
}
@Override
public String execute() {
root = new FileWrapper(request.getSession().getServletContext().getRealPath("/"));
return SUCCESS;
}
}
上述代碼取得WEB應(yīng)用程序的根目錄的絕對(duì)路徑后，初始化FileWrapper對(duì)象root。該對(duì)象將為JSP頁面的< s:tree />的根節(jié)點(diǎn)。如下代碼所示:
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Struts 2 AJAX - More Tree< /title>
< s:head theme="ajax" debug="true" />
< script type="text/javascript">
/* < ![CDATA[ */
function treeNodeSelected(arg) {
alert(arg.source.title + ' selected');
}
function treeNodeExpanded(arg) {
alert(arg.source.title + ' expanded');
}
function treeNodeCollapsed(arg) {
alert(arg.source.title + ' collapsed');
}
dojo.addOnLoad(function() {
var t = dojo.widget.byId('appFiles');
dojo.event.topic.subscribe(t.eventNames.expand, treeNodeExpanded);
dojo.event.topic.subscribe(t.eventNames.collapse, treeNodeCollapsed);
var s = t.selector;
dojo.event.connect(s, 'select', 'treeNodeSelected');
});
/* ]]> */
< /script>
< /head>
< body>
< h2>
Dynamic Tree Example
< /h2>
< div style="float:left; margin-right: 50px;">
< s:tree id="appFiles" theme="ajax" rootNode="root"
nodeTitleProperty="name" nodeIdProperty="id"
childCollectionProperty="children" />
< /div>
< /body>
< /html>
因?yàn)? s:tree />的treeCollapsedTopic和treeExpandedTopic屬性都沒有起作用，所以如果我們想要監(jiān)聽這兩個(gè)事件，就必須使用上述代碼的方法。
最后是struts.xml配置文件：
< ?xml version="1.0" encoding="UTF-8"?>
< !DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
< struts>
< package name="Struts2_AJAX_DEMO" extends="struts-default">
< action name="DynamicTree" class="tutorial.DynamicTreeAction">
< result>Tree.jsp< /result>
< /action>
< /package>
< /struts>
發(fā)布運(yùn)行應(yīng)用程序，在瀏覽器地址欄中鍵入http://localhost:8080/Struts2_Ajax2/DynamicTree.action，有如下圖所示頁面：
#p#
AJAX 樹
正如我在文章開頭所說，Struts 2所提供的靜態(tài)樹和動(dòng)態(tài)樹都不是嚴(yán)格意義上的AJAX樹。下面就讓我們來實(shí)現(xiàn)一個(gè)如假包換的AJAX樹。首先要說明的是，Struts 2的< s:tree />默認(rèn)是不支持這種按需加載數(shù)據(jù)的AJAX樹。不過因?yàn)樗腔贒ojo的樹控件（Widget）所以要擴(kuò)展也很方便。
Dojo 通過名為“TreeRPCController”的控件實(shí)現(xiàn) AJAX 樹，它會(huì)監(jiān)聽被控制樹的事件。當(dāng)發(fā)生展開節(jié)點(diǎn)的事件時(shí)，TreeRPCController就會(huì)向URL發(fā)送XHR請(qǐng)求，該URL由TreeRPCController的RPCUrl 屬性定義。XHR請(qǐng)求格式類似如下格式：
http://localhost:8080/Struts2_Ajax2/AjaxTree.action?action=getChildren&data={"node":{"widgetId":"file_226092423","objectId":"C:\\Program Files\\Tomcat 5.5\\webapps\\Struts2_Ajax2","index":0,"isFolder":true},"tree":{"widgetId":"appFiles","objectId":""}}&dojo.preventCache=1182913465392
顯而易見，請(qǐng)求中包含三個(gè)參數(shù)，分別是action為“getChildren”（固定值），data一個(gè)包含當(dāng)前節(jié)點(diǎn)與樹信息的JSON串和dojo.preventCache隨機(jī)串，用于緩存不同節(jié)點(diǎn)的請(qǐng)求響應(yīng)（父節(jié)點(diǎn)只會(huì)在第一次被展開時(shí)到服務(wù)器端加載數(shù)據(jù)，之后都是從瀏覽器的緩存中讀取數(shù)據(jù)，可以提高應(yīng)用程序性能）。
首先我要先寫一個(gè)加載樹節(jié)點(diǎn)數(shù)據(jù)的Action類，代碼如下：
import java.util.Map;
import com.googlecode.jsonplugin.JSONExeption;
import com.googlecode.jsonplugin.JSONUtil;
public class AjaxTreeAction extends DynamicTreeAction {
private static final long serialVersionUID = 3970019751740942311L;
private String action;
private String data;
private FileWrapper[] wrappers;
public void setAction(String action) {
this.action = action;
}
public void setData(String data) {
this.data = data;
}
public FileWrapper[] getWrappers() {
return wrappers;
}
@Override
public String execute() {
if("getChildren".equals(action)) {
try {
Object o = JSONUtil.deserialize(data);
String path = ((Map) ((Map) o).get("node")).get("objectId").toString();
wrappers = new FileWrapper(path).getChildren();
} catch (JSONExeption e) {
e.printStackTrace();
}
return "ajax";
}
return super.execute();
}
}
上述代碼可能需要解釋一下：
- action屬性對(duì)應(yīng)于XHR中的action，如果它為“getChildren”時(shí)，則需要進(jìn)行加載子節(jié)點(diǎn)操作。否則，會(huì)讀取樹的根節(jié)點(diǎn)，并返回JSP頁面；
- 通過上面XHR的分析，大家可以知道data是代表樹和當(dāng)前節(jié)點(diǎn)的JSON串，故應(yīng)將其反串行化為Map對(duì)象，并將其 objectId屬性取出。通常情況下，Dojo樹的objectId屬性代表服務(wù)器端的對(duì)象的標(biāo)識(shí)，在本例中為文件夾的絕對(duì)路徑；
- wrappers屬性表示當(dāng)前文件夾下的文件數(shù)組，它被傳送到Freemarker頁面，翻譯為Dojo樹節(jié)點(diǎn)數(shù)組的JSON串。
下面是Freemarker頁面的代碼：
[
< #list wrappers as r>
{ "title": "${r.name}", "isFolder": < #if r.children?size gt 0>true< #else>false< /#if>, "id": "${r.id}", "objectId": "${r.absolutePath?js_string}" }< #if r_has_next>,< /#if>
< /#list>
]
以上代碼中< #list>< /#lsit>的寫法是Freemarker中遍歷集合的寫法；而< #if r.children?size gt 0>判斷“r”對(duì)象的children屬性是否為空；r.absolutePath?js_string 就是將“r”的absolutePath屬性的值輸出為Javascript 的字串符形式；< #if r_has_next>< /#if>判斷集合是否有下一項(xiàng)數(shù)據(jù)。如果希望更詳細(xì)地了解Freemarker的使用，請(qǐng)參考該手冊(cè)。
接下來，讓我們看看Action的配置代碼片段：
< action name="AjaxTree" class="tutorial.AjaxTreeAction">
< result>AjaxTree.jsp< /result>
< result name="ajax" type="freemarker">AjaxTree.ftl< /result>
< /action>
最后是JSP頁面代碼：
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Struts 2 AJAX - More Tree< /title>
< s:head theme="ajax" debug="true" />
< script type="text/javascript">
/* < ![CDATA[ */
function treeNodeSelected(arg) {
alert(arg.source.title + ' selected');
}
dojo.addOnLoad(function() {
var t = dojo.widget.byId('appFiles');
var s = t.selector;
dojo.event.connect(s, 'select', 'treeNodeSelected');
});
/* ]]> */
< /script>
< /head>
< body>
< h2>
AJAX Tree Example
< /h2>
< div style="float:left; margin-right: 50px;">
< script type="text/javascript">
/* < ![CDATA[ */
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
/* ]]> */
< /script>
< div dojoType="TreeRPCController" widgetId="treeController"
DNDcontroller="create" RPCUrl="< s:url />">< /div>
< div dojoType="Tree" widgetId="appFiles" toggle="fade" controller="treeController">
< div dojoType="TreeNode" title='< s:property value="root.name" />'
widgetId='< s:property value="root.id" />'
isFolder='< s:property value="root.children.length > 0" />'
objectId='< s:property value="root.absolutePath" />'>
< /div>
< /div>
< /div>
< /body>
< /html>
由于上面所提及的原因，我在上述的代碼中并沒有使用< s:tree />標(biāo)志，而是使用了Dojo的寫法——?jiǎng)?chuàng)建 widgetId 為“treeController”的 TreeRPCController 并將設(shè)為樹的控制器。
發(fā)布運(yùn)行應(yīng)用程序，在瀏覽器地址欄中鍵入http://localhost:8080/Struts2_Ajax2/AjaxTree.action，點(diǎn)開某個(gè)節(jié)點(diǎn)，在節(jié)點(diǎn)加載的過程中，加號(hào)圖標(biāo)變成時(shí)鐘狀圖標(biāo)，如下圖所示頁面：
自定義< s:tree />的AJAX的主題（theme）
Struts 2的標(biāo)志過人之外在于它允許開發(fā)人員自定義標(biāo)志的頁面輸出。要做到這一點(diǎn)，你所需要做的只是創(chuàng)建一個(gè)自定義的theme并將其應(yīng)用到相應(yīng)標(biāo)志。下面就讓我自定義一個(gè)真正的AJAX的< s:tree/>的theme。
首先，你的源文件的根目錄下新建包“template.realajax”。
然后，在上一步所建的包中新建“tree.ftl”文件，內(nèi)容如下：
< script type="text/javascript">
/* < ![CDATA[ */
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController"); < #-- Added by Max -->
/* ]]> */
< /script>
< #-- Added by Max -->
< div dojoType="TreeRPCController"
widgetId="${parameters.id?html}_controller"
DNDcontroller="create"
RPCUrl="< @s.url />">
< /div>
< #-- End -->
< div dojoType="Tree"
< #if parameters.blankIconSrc?exists>
gridIconSrcT="< @s.url value='${parameters.blankIconSrc}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcL?exists>
gridIconSrcL="< @s.url value='${parameters.gridIconSrcL}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcV?exists>
gridIconSrcV="< @s.url value='${parameters.gridIconSrcV}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcP?exists>
gridIconSrcP="< @s.url value='${parameters.gridIconSrcP}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcC?exists>
gridIconSrcC="< @s.url value='${parameters.gridIconSrcC}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcX?exists>
gridIconSrcX="< @s.url value='${parameters.gridIconSrcX}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcY?exists>
gridIconSrcY="< @s.url value='${parameters.gridIconSrcY}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.gridIconSrcZ?exists>
gridIconSrcZ="< @s.url value='${parameters.gridIconSrcZ}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.expandIconSrcPlus?exists>
expandIconSrcPlus="< @s.url value='${parameters.expandIconSrcPlus}' includeParams='none'/>"
< /#if>
< #if parameters.expandIconSrcMinus?exists>
expandIconSrcMinus="< @s.url value='${parameters.expandIconSrcMinus?html}' includeParams='none'/>"
< /#if>
< #if parameters.iconWidth?exists>
iconWidth="< @s.url value='${parameters.iconWidth?html}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.iconHeight?exists>
iconHeight="< @s.url value='${parameters.iconHeight?html}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.toggleDuration?exists>
toggleDuration=${parameters.toggleDuration?c}
< /#if>
< #if parameters.templateCssPath?exists>
templateCssPath="< @s.url value='${parameters.templateCssPath}' encode="false" includeParams='none'/>"
< /#if>
< #if parameters.showGrid?exists>
showGrid="${parameters.showGrid?default(true)?string}"
< /#if>
< #if parameters.showRootGrid?exists>
showRootGrid="${parameters.showRootGrid?default(true)?string}"
< /#if>
< #if parameters.id?exists>
id="${parameters.id?html}"
< /#if>
< #if parameters.treeSelectedTopic?exists>
publishSelectionTopic="${parameters.treeSelectedTopic?html}"
< /#if>
< #if parameters.treeExpandedTopic?exists>
publishExpandedTopic="${parameters.treeExpandedTopic?html}"
< /#if>
< #if parameters.treeCollapsedTopic?exists>
publishCollapsedTopic="${parameters.treeCollapsedTopic?html}"
< /#if>
< #if parameters.toggle?exists>
toggle="${parameters.toggle?html}"
< /#if>
controller="${parameters.id?html}_controller" < #-- Added by Max -->
>
< #if parameters.label?exists>
< div dojoType="TreeNode" title="${parameters.label?html}"
< #if parameters.nodeIdProperty?exists>
id="${stack.findValue(parameters.nodeIdProperty)}"
< #else>
id="${parameters.id}_root"
< /#if>
>
< #elseif parameters.rootNode?exists>
${stack.push(parameters.rootNode)}
< #-- Edited by Max -->
< div dojoType="TreeNode"
title="${stack.findValue(parameters.nodeTitleProperty)}"
widgetId="${stack.findValue(parameters.nodeIdProperty)}"
isFolder="< #if stack.findValue(parameters.childCollectionProperty)?size gt 0>true< #else>false< /#if>"
objectId="${stack.findValue(parameters.nameValue)}">
< /div>
< #-- End -->
< #assign oldNode = stack.pop()/> < #-- pop the node off of the stack, but don't show it -->
< /#if>
對(duì)上述稍作解釋，上述代碼主要在原版的src/template/ajax/tree.ftl的基礎(chǔ)上添加了TreeRPCController的控件，并只輸出根節(jié)點(diǎn)。由于< s:tree />沒有類似nodeObjectIdProperty的屬性，所以我用了value屬性表示objectId對(duì)應(yīng)的屬性名稱。
接著新建tree-close.ftl文件，內(nèi)容和原版的一樣，如下所示：
< #if parameters.label?exists>< /div>< /#if>< /div>
再下來就應(yīng)該是將theme應(yīng)用到< s:tree />，如下代碼所示：
< %@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
< %@ taglib prefix="s" uri="/struts-tags"%>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< title>Struts 2 AJAX - More Tree< /title>
< s:head theme="ajax" debug="true" />
< script type="text/javascript">
/* < ![CDATA[ */
function treeNodeSelected(arg) {
alert(arg.source.title + ' selected');
}
dojo.addOnLoad(function() {
var t = dojo.widget.byId('appFiles');
var s = t.selector;
dojo.event.connect(s, 'select', 'treeNodeSelected');
});
/* ]]> */
< /script>
< /head>
< body>
< h2>
AJAX Tree Example
< /h2>
< div style="float:left; margin-right: 50px;">
< s:tree id="appFiles" theme="realajax" rootNode="root"
nodeTitleProperty="name" nodeIdProperty="id"
childCollectionProperty="children" value="absolutePath" />
< /div>
< /body>
< /html>
上述代碼中< s:tree />的用法，除了theme改為“realajax”和多了value="absolutePath"外，幾乎和靜態(tài)樹中的一樣。
為了不影響前一個(gè)例子，我們?yōu)樵揓SP文件配置類型相同的Action，如下代碼所示：
< action name="AjaxTreeTheme" class="tutorial.AjaxTreeAction">
< result>AjaxTreeTheme.jsp< /result>
< result name="ajax" type="freemarker">AjaxTree.ftl< /result>
< /action>
清單13 src/struts.xml配置片段
發(fā)布運(yùn)行應(yīng)用程序，在瀏覽器地址欄中鍵入http://localhost:8080/Struts2_Ajax2/AjaxTreeTheme.action，結(jié)果如圖2所示。
總結(jié)
通過上述例子，大家知道Struts 2 的AJAX 標(biāo)志是基于Dojo控件開發(fā)的，所以如果大家希望熟練地使用這些標(biāo)志，最好去了解一下Dojo。
【編輯推薦】
