| « | October 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:923781
建立时间:2007年5月10日 |
| |
|
 [struts2]Struts 2与AJAX(2)
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2007/10/27 13:06:07 |
在上一篇文章《Struts 2与AJAX（第一部分）》，我已经简单地介绍了<s:tree />的一些用法，接下来我将继续深入讲解<s:tree />的使用和通过DWR实现AJAX校验。
更多<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 类，代码如下：
500)this.width=500'>package tutorial;500)this.width=500'>500)this.width=500'>import java.io.File;500)this.width=500'>500)this.width=500'>500)this.width=500'>public class FileWrapper 500)this.width=500'>{500)this.width=500'> private File file;500)this.width=500'>500)this.width=500'>500)this.width=500'> public FileWrapper(String path) 500)this.width=500'>{500)this.width=500'> file = new File(path);500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public FileWrapper(File file) 500)this.width=500'>{500)this.width=500'> this.file = file;500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public String getId() 500)this.width=500'>{500)this.width=500'> return "file_" + file.hashCode();500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public String getName() 500)this.width=500'>{500)this.width=500'> return file.getName();500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public String getAbsolutePath() 500)this.width=500'>{500)this.width=500'> return file.getAbsolutePath();500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public FileWrapper[] getChildren() 500)this.width=500'>{500)this.width=500'> File[] files = file.listFiles();500)this.width=500'>500)this.width=500'> if(files != null && files.length > 0) 500)this.width=500'>{500)this.width=500'> int length = files.length;500)this.width=500'> FileWrapper[] wrappers = new FileWrapper[length];500)this.width=500'>500)this.width=500'> for(int i = 0; i < length; ++i) 500)this.width=500'>{500)this.width=500'> wrappers[i] = new FileWrapper(files[i]);500)this.width=500'> }500)this.width=500'> return wrappers;500)this.width=500'> }500)this.width=500'> return new FileWrapper[0];500)this.width=500'> }500)this.width=500'>}清单1 src/tutorial/FileWrapper.java
之所以需要对File类进行如此包装，是因为<s:tree />用于动态树时，rootNode、nodeIdProperty、nodeTitleProperty 和 childCollectionProperty等属性都必填的。
然后是Action类的代码如下：
500)this.width=500'>package tutorial;500)this.width=500'>500)this.width=500'>import javax.servlet.http.HttpServletRequest;500)this.width=500'>500)this.width=500'>import org.apache.struts2.interceptor.ServletRequestAware;500)this.width=500'>500)this.width=500'>import com.opensymphony.xwork2.ActionSupport;500)this.width=500'>500)this.width=500'>500)this.width=500'>public class DynamicTreeAction extends ActionSupport implements ServletRequestAware 500)this.width=500'>{500)this.width=500'> private static final long serialVersionUID = 1128593047269036737L;500)this.width=500'> 500)this.width=500'> private HttpServletRequest request;500)this.width=500'> private FileWrapper root;500)this.width=500'>500)this.width=500'>500)this.width=500'> public void setServletRequest(HttpServletRequest request) 500)this.width=500'>{ 500)this.width=500'> this.request = request;500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> public FileWrapper getRoot() 500)this.width=500'>{500)this.width=500'> return root;500)this.width=500'> }500)this.width=500'> 500)this.width=500'> @Override500)this.width=500'>500)this.width=500'> public String execute() 500)this.width=500'>{500)this.width=500'> root = new FileWrapper(request.getSession().getServletContext().getRealPath("/")); 500)this.width=500'> return SUCCESS;500)this.width=500'> }500)this.width=500'>}清单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_Ajax2/DynamicTree.action，有如下图所示页面：
500)this.width=500'>图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_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=
阅读全文(4641) | 回复(1) | 编辑 | 精华 |
| | |
» 1 »
|