Struts2与ajax的组合

11lingxian

浏览: 365707 次
性别:
来自: 青岛

最近访客更多访客>>

devcang

wangchh8134

zjy_369

ztcwh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

Ajax Dojo Struts json JavaScript

Struts2 与ajax 的组合
在当今——Web 2.0概念铺天盖地的Internet环境下，简易的AJAX 集成对于一个成功的WEB框架来说是不可或缺的。因此，Struts 2其中的一个重要的功能（Feature）就是“First-class AJAX support - Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags（大意：一流的AJAX 支持——通过AJAX 标志增加互动性和灵活性，而且使用这些AJAX 标志与普通的Struts标志同样简单）”。
实现原理
基于不重新发明轮子的原则，Struts 2并没有开发新的AJAX 框架，而是使用时下Java EE平台中比较流行的AJAX 框架——Dojo和DWR。
最近在Musachy Barroso等同志的无私奉献下，开发了Struts 2的JSON插件（Plugin），极大地方便了我们输出JSON结果（Result）。
JSON插件（Plugin）
在Struts 2的showcase中的AJAX 部分，JSON的结果输出是通过Freemaker模板实现。这种方法在简易性和灵活性上都比不上JSON插件，所以JSON插件值得向大家五星推荐。
下面让我们看一个JSON插件的例子。
首先到以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包，并将其加入你的WebContent\WEB-INF\lib下。
接下是本例子的Action代码：

package tutorial;

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;
    }
}

清单1 src/tutorial/JsonPluginAction.java
以上代码值得注意的是，通过@JSON的JAVA注释（Annotation），我们可以改变JSON结果的属性名称，另外带有transient修饰符与没有Getter方法的字段（field）都不会被串行化为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>

清单2 src/struts.xml
上面配置文件的“package”元素和以往不同的是，它扩展了“json-default”而不是“struts-default”。 “json-default”是在jsonplugin-0.11.jar包里的struts-plugin.xml中定义的。该文件同时定义了 “json”的结果类型，有兴趣的朋友可以打开此文件看看。
发布运行应用程序，在浏览器中键入：http://localhost:8080/Struts2 _Ajax /JsonPlugin.action，出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为“application/json”。把文件下载下来，用记事本打开，内容如下：
{"ISBN":15645912,"comments":["It's no bad!","WOW!","No comment!"],"price":0.9999,"title":"Max On Java"}
清单3 例子1输出的JSON串
当然这还不是一个完整的AJAX 的例子，下面让我们写一个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>

清单4 WebContent/JsonPlugin.html
以上代码中，我没有使用任何的AJAX 的Javascript包，而是参考《Professional Javascript For Web Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。
打开http://localhost:8080/Struts2 _Ajax /JsonPlugin.html，点击“Retrieve Book”按钮，页面如下图所示：

图1 JsonPlugin.html页面输出
Struts 2与Dojo
Dojo是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。
Struts 2基于Dojo编写一些AJAX 标志（在Dojo中称为Widget），要使用这些标志的AJAX 功能，需要将标志的“theme”属性设为“ajax ”。同时，亦需要将加入在<head>与</head>之间加入<s:head theme="ajax " />。当使用这些标志的AJAX 功能，有些属性可能会经常用到，所以我会对这些属性稍作解释。
名称描述
href XHR（XMLHttpRequest）请求的地址
listenTopics 监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知<s:autocompleter />重新加载其备选项（Options）
notifyTopics 完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget
formId 需要提交到服务器的表单的ID
formFilter 过滤表单字段的Javascript函数名称
indicator 在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等
表1 常用的AJAX 标志属性
这些标志包括：<s:a />、<s: submit />、<s:autocompleter />和<s:tree />等，下面我将分别讲解。
1、<s:a />和<s:submit />
这两个标志方便了我们的调用XHR实现AJAX ，所以上面的HTML如果使用了这两标志将会变得更简单，因为我们不用再去理会繁锁的XHR创建和设定的工作。下面是示例代码：

<%@ 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>

清单5 WebContent/LinkButton.jsp
可能上述代码还不够简洁，因为我将HTML格式化的工作都放在Javascript中完成。但如果你的XHR返回的是HTML片段，你可以简单地将<s:a />或<s:submit />的“targets”属性设为“bookHolder”即可，详情大家可以参考Struts 2 Showcase。至于返回HTML片段，可以通过Action + Freemaker完成。
2、<s:autocompleter />
Autocomplete是比较经典的AJAX 应用，虽然谷歌已经停止使用这一功能，但就Autocompleter自身而言的确是很酷的。下面是一个<s:autocompleter />的例子。
首先，我要伪造一些字符串数据，代码如下：

package tutorial;

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");
    }
}

清单6 src/tutorial/Datas.java
然后是用于获取和过滤数据的Action，代码如下：

package tutorial;

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;
    }
}

清单7 src/tutorial/AutocmpleterAction.java
上述Action会以JSON的形式返回以start开头的Datas.NAMES的中字符串，以下是此Action的配置：

<action name="Autocompleter" class="tutorial.AutocompleterAction">
    <result type="json">
        <param name="root">names</param>
    </result>
</action>

清单8 Autocompleter Action的配置代码片段
在JSON类型结果的参数中加入“root”参数可以设定输出JSON结果的根，以上述情况为例，如果没有“root”参数，输出将为“{ "names": [ ["xxx", "xxx"]...] }”，加了之后变就会成“[ ["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>

清单9 WebContent/Autocompleter.jsp
上述页面包含两个<s:autocompleter />标志，前者使用“simple”模板，所以不具有AJAX 功能，它的数据将以HTML方式输出到最终页面里；而后者则使用了“ajax ”模板，每当输入框的值发生改变时，它都向URL“/Autocompleter.action”发送请求，Action根据请求中的start参数的值，返回相当的JSON，在请求完成后页面通过回调函数改变输入框的下拉提示，效果如下图所示：

图2 Autocompleter.jsp页面输出
3、<s:tree />
树是是比较常用的数据结构，因为它可以很好地体现真实世界中对象之间的关系。<s:tree />的使用也相对简单，但需要说明的是——Struts 2.0.6 GA版本的<s:tree />是有BUG的，大家可以点击这个链接https://issues.apache.org/struts/browse/WW-1813了解详细的情况。这个BUG主要是在<s:tree />的通过“treeCollapsedTopic”、“treeExpandedTopic”和“treeSelectedTopic”设定的话题（Topic）都没有起作用，上述链接相应给出了解决方法，但我认为该方法太麻烦（需要自己重新编译和打包Struts 2），所以下面的例子，我将另辟徯径，请参考以下代码。

<%@ 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>

清单10 WebContent/Tree.jsp
因为Dojo的树控件，即使在没有设定“selector”情况下，也会自动生成一个默认的Selector，所以只要将其事件绑定到特定的事件处理函数即可。
打开http://localhost:8080/Struts2 _Ajax /Tree.jsp，点击任一树节点，页面如下图所示：

图3 Tree.jsp页面输出
更多<s:tree />
在Struts 2的showcase中有两个<s:tree />的例子，分别是静态树与动态树。所谓的静态树即是在编写JSP代码时通过<s:treenode />生成树节点。我的上一篇文章的例子就是一个典型的静态树。而动态树则是在程序运行期间，Struts 2 运行时（Runtime）根据程序中的数据动态创建树节点。虽然在两个例子中<s:tree />的theme属性都为“ajax ”，但是从严格意义上来说，这两种树都不属于AJAX 树，因为它们都是在输出页面时将全部节点加载到其中，而不是在父节点展开时通过XHR（XMLHttpRequest）获取节点数据。
动态树
下面我们先看一下动态树的例子，接着再一步步地将其改造为名副其实的AJAX 树。下例将会把WEB应用程序的目录树展现在JSP页面中。因此，我需要先包装一下java.io.File 类，代码如下：

package tutorial;

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];
    }
}

清单1 src/tutorial/FileWrapper.java
之所以需要对File类进行如此包装，是因为<s:tree />用于动态树时，rootNode、nodeIdProperty、nodeTitleProperty 和 childCollectionProperty等属性都必填的。
然后是Action类的代码如下：

package tutorial;

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;
    }
}

清单2 src/tutorial/DynamicTreeAction.java
上述代码取得WEB应用程序的根目录的绝对路径后，初始化FileWrapper对象root。该对象将为JSP页面的<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');
            }
           
            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>

清单3 WebContent/Tree.jsp
因为<s:tree />的treeCollapsedTopic和treeExpandedTopic属性都没有起作用，所以如果我们想要监听这两个事件，就必须使用上述代码的方法。
最后是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>

清单4 src/struts.xml
发布运行应用程序，在浏览器地址栏中键入http://localhost:8080/Struts2 _Ajax 2/DynamicTree.action，有如下图所示页面：

图1 动态树示例
AJAX 树
正如我在文章开头所说，Struts 2所提供的静态树和动态树都不是严格意义上的AJAX 树。下面就让我们来实现一个如假包换的AJAX 树。首先要说明的是，Struts 2的<s:tree />默认是不支持这种按需加载数据的AJAX 树。不过因为它是基于Dojo的树控件（Widget）所以要扩展也很方便。
Dojo 通过名为“TreeRPCController”的控件实现 AJAX 树，它会监听被控制树的事件。当发生展开节点的事件时，TreeRPCController就会向URL发送XHR请求，该URL由TreeRPCController的RPCUrl 属性定义。XHR请求格式类似如下格式：
http://localhost:8080/Struts2 _Ajax 2/Ajax Tree.action?action=getChildren&data={"node":{"widgetId":"file_226092423","objectId":"C:\\Program Files\\Tomcat 5.5\\webapps\\Struts2 _Ajax 2","index":0,"isFolder":true},"tree":{"widgetId":"appFiles","objectId":""}}&dojo.preventCache=1182913465392
清单5 XHR样本
显而易见，请求中包含三个参数，分别是action为“getChildren”（固定值），data一个包含当前节点与树信息的JSON串和 dojo.preventCache随机串，用于缓存不同节点的请求响应（父节点只会在第一次被展开时到服务器端加载数据，之后都是从浏览器的缓存中读取数据，可以提高应用程序性能）。
首先我要先写一个加载树节点数据的Action类，代码如下：

package tutorial;

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();
    }
}

清单6 src/tutorial/Ajax TreeAction.java
上述代码可能需要解释一下：
1. action属性对应于XHR中的action，如果它为“getChildren”时，则需要进行加载子节点操作。否则，会读取树的根节点，并返回JSP页面；
2. 通过上面XHR的分析，大家可以知道data是代表树和当前节点的JSON串，故应将其反串行化为Map对象，并将其 objectId属性取出。通常情况下，Dojo树的objectId属性代表服务器端的对象的标识，在本例中为文件夹的绝对路径；
3. wrappers属性表示当前文件夹下的文件数组，它被传送到Freemarker页面，翻译为Dojo树节点数组的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>
]

清单7 WebContent/Ajax Tree.ftl
以上代码中<#list></#lsit>的写法是Freemarker中遍历集合的写法；而<#if r.children?size gt 0>判断“r”对象的children属性是否为空；r.absolutePath?js_string 就是将“r”的absolutePath属性的值输出为Javascript 的字串符形式；<#if r_has_next></#if>判断集合是否有下一项数据。如果希望更详细地了解Freemarker的使用，请参考该手册。
接下来，让我们看看Action的配置代码片段：

<action name="AjaxTree" class="tutorial.AjaxTreeAction">
        <result>AjaxTree.jsp</result>
       <result name="ajax" type="freemarker">AjaxTree.ftl</result>
</action>

清单8 src/struts.xml配置片段
最后是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>

清单9 WebContent/Ajax Tree.jsp
由于上面所提及的原因，我在上述的代码中并没有使用<s:tree />标志，而是使用了Dojo的写法——创建 widgetId 为“treeController”的 TreeRPCController 并将设为树的控制器。
发布运行应用程序，在浏览器地址栏中键入http://localhost:8080/Struts2 _Ajax 2/Ajax Tree.action，点开某个节点，在节点加载的过程中，加号图标变成时钟状图标，如下图所示页面：

图2 AJAX 树示例
自定义<s:tree />的AJAX 的主题（theme）
Struts 2的标志过人之外在于它允许开发人员自定义标志的页面输出。要做到这一点，你所需要做的只是创建一个自定义的theme并将其应用到相应标志。下面就让我自定义一个真正的AJAX 的<s:tree/>的theme。
首先，你的源文件的根目录下新建包“template.realajax ”。
然后，在上一步所建的包中新建“tree.ftl”文件，内容如下：

<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>

清单10 src/template/realajax /tree.ftl
对上述稍作解释，上述代码主要在原版的src/template/ajax /tree.ftl的基础上添加了TreeRPCController的控件，并只输出根节点。由于<s:tree />没有类似nodeObjectIdProperty的属性，所以我用了value属性表示objectId对应的属性名称。
接着新建tree-close.ftl文件，内容和原版的一样，如下所示：
<#if parameters.label?exists></div></#if></div>
清单11 src/template/realajax /tree-close.ftl
再下来就应该是将theme应用到<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>

清单12 WebContent/Ajax TreeTheme.jsp
上述代码中<s:tree />的用法，除了theme改为“realajax ”和多了value="absolutePath"外，几乎和静态树中的一样。
为了不影响前一个例子，我们为该JSP文件配置类型相同的Action，如下代码所示：

<action name="AjaxTreeTheme" class="tutorial.AjaxTreeAction">
        <result>AjaxTreeTheme.jsp</result>
       <result name="ajax" type="freemarker">AjaxTree.ftl</result>
 </action>

清单13 src/struts.xml配置片段
发布运行应用程序，在浏览器地址栏中键入http://localhost:8080/Struts2 _Ajax 2/Ajax TreeTheme.action，结果如图2所示。
总结
通过上述例子，大家知道Struts 2 的AJAX 标志是基于Dojo控件开发的，所以如果大家希望熟练地使用这些标志，最好去了解一下Dojo。
本来还打算介绍一下Struts 2与DWR，不过看看文章的篇幅似乎足够自成一篇了，因此DWR相关的内容要留待下文继续了。

分享到：

freemarker语法 | Struts2 Ajax

2008-09-26 19:45
浏览 5628
评论(2)
查看更多

2 楼 hongmeikaile 2011-05-16

1 楼 leehomjan 2010-01-08

初学 Ajax
受教了。。谢谢。。。

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论