今天学习了Struts2的Ajax,当然看的也是别人的教程,看后感觉Struts的Ajax的封装后的标签使用十分好用,我简单的理一下学习的顺序:
一、首先Struts2的Ajax引用了Dojo和DWR这两个JS框架。
而且Struts很好的封装了他们,在引用时需要添加jar包(struts2-dwr-plugin-2.3.4.jar和struts2-dojo-plugin-2.3.4.jar)
这两个jar包导入后就可以在JSP页面上引用Struts的Ajax标签:<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
然后dojo提供了一些列的Ajax控件,当然我们最常用的还是<sx:a />和<sx:submit/>以及<sx:div />等标签。下面我贴一下系列文章<研磨Struts2>系列文章的例子。
14.3 Ajax JSP tags
14.3.1概述
为了使开发Ajax变得轻松惬意,Struts2提供了一些JSP Tags,通过这些自定义的标签库,使得开发人员无需掌握额外的知识即可开发Ajax的应用。
从Struts2.1开始,不再推荐使用Dojo的Plugin,而是改用Ajax的tags,包括:
- head:用来下载Dojo文件和相应的Javascript代码
- div:用来动态的加载并展示html内容
- a:展示为Html的超链接形式,点击后触发一个Ajax的请求
- submit:展示为Html的按钮形式,点击后可触发异步提交
- bind:用来关联事件和对应的事件处理程序
- datetimepicker:日历组件
- autocompleter:能实现自动完成的功能,类似于搜索框的自动完成功能
- textarea:一个复杂的文本编辑器组件
- tabbedpanel:一个显示多页面tab面板的组件
- tree:一个在页面上展示为树的组件
- treenode:用来展示为树中节点的组件
要使用Struts2.1的Ajax Tags,需要做以下的工作:
1:把Dojo插件,也就是struts2-dojo-plugin-2.1.8.1.jar文件,复制到WEB-INF/lib文件夹下
2:在页面上增加taglib的引用,<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
3:在每个页面的顶部包含head标签
好了,基本的知识就了解到这里,接下来看看具体如何使用Struts2的Ajax tags。
14.3.2 head标签
1:功能
head标签的地位比较特殊,它的功能是用来下载Dojo文件和相应的Javascript代码,因此所有其他使用Dojo标签的页面都应该包含这个标签。
2:属性
head标签的属性有:
![](http://sishuok.com/forum/upload/2012/4/18/b9b83b70e06092c9a5012905f1721a27__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/7ed4ffb7e83bc51cad26bccf42b6d9d4__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
建议大家在开发期间,把compressed设置为false,debug设置为true,这样方便大家调试程序;但是在交付给客户的时候,应该把compressed设置为true,debug设置为false,这样可以加快程序的运行。
3:使用示例
在开发期间使用head标签,大致应为:
java代码:
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <head>
- <sx:head debug="true" extraLocales="en-us,nl-nl,de-de"/>
- </head>
在运行期间使用head标签,大致应为:
java代码:
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <head>
- <sx:head/>
- </head>
14.3.3 div标签
1:功能
div标签展示为html中的Div元素,但是div标签能够异步的、动态的加载需要展示的内容,而且div标签还提供一个内部的计时器,可以循环的在设定的时间点去重新加载需要展示的内容。
2:属性
div标签的属性很多,这里罗列一些常用的:
![](http://sishuok.com/forum/upload/2012/4/18/fcb7811e0d4c504b9230c1160b657d62__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/97a49adb0828d541b030b131f5a38406__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/641bb7b79923c127a5431abefc97670b__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/9098836ca16ea632cd9d6b39900615f7__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/edf2ea203edd0dacd30d22079f032a62__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:使用示例
div标签的使用是非常简单的,来通过一个示例进行说明,实现的功能非常简单,就是通过div来异步显示Action返回的信息。
(1)先看看action的实现,只是简单的返回了一个信息,非常简单,示例代码如下:
java代码:
- public class AjaxServerAction extends ActionSupport {
- private InputStream inputStream;
- public InputStream getInputStream() {
- return inputStream;
- }
-
- public String execute() throws Exception {
- Thread.sleep(3000L);
- inputStream = new ByteArrayInputStream("这是一个div的测试".getBytes("utf-8"));
- return this.SUCCESS;
- }
- }
(2)相应的struts.xml配置如下:
java代码:
- <action name="ajaxServerAction" class="cn.javass.ajax.AjaxServerAction">
- <result type="stream">
- <param name="contentType">text/html</param>
- <param name="inputName">inputStream</param>
- </result>
- </action>
(3)然后来看看页面的实现,主要就是div标签的基本使用了,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <head>
- <sx:head/>
- </head>
- <sx:div
- href="ajaxServerAction.action"
- showLoadingText="true"
- loadingText="正在加载内容,请稍候"
- errorText="对不起,加载资源失败,请重试"
- >
- </sx:div>
(4)去运行测试一下看看,刚开始运行应该如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/e30c14d041bc212687bcc78860f95771__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.3 Div标签示例开始页面
然后在3秒后,Action运行完成并返回内容,此时应该如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/1dab9c3b42273044ea3c935af975eb6d__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.4 Div标签示例结果页面
14.3.4 a标签和submit标签
1:功能
a标签和submit标签的功能是类似的,都能够发起一个Ajax请求,只不过a标签展示为html中的a元素,而submit标签展示成为按钮的形式。
两个元素都有一个target的属性,用来指定显示Ajax响应后的信息的元素,通常是一个div元素。
2:属性
a标签和submit标签的属性也很类似,两个标签都有的常用属性有:
![](http://sishuok.com/forum/upload/2012/4/18/531ae8495199b8453c19ae60d57b0f0d__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/8876adc2667ca5c6c40dd756146fd190__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/ac22334ef56391fbce5ac4920276fcb2__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/7091e6b4c249057e3069731fbed9ae74__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/5150d3e052f2c2ca0f5dca13941f3a3f__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
当然也有一些不同的元素,除了上面这些共同的元素,a标签自有的元素有:
![](http://sishuok.com/forum/upload/2012/4/18/329168ddab283012390d9571d4763993__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
submit标签自有的元素有:
3:使用示例
(1)对Action稍作修改,让它接收页面传递的参数,示例代码如下:
java代码:
- public class AjaxServerAction extends ActionSupport {
- public String account;
- public String name;
-
- private InputStream inputStream;
- public InputStream getInputStream() {
- return inputStream;
- }
-
- public String execute() throws Exception {
- System.out.println("接收的参数,帐户="+account+",姓名="+name);
- if(account!=null && account.indexOf("test")>=0){
- inputStream = new ByteArrayInputStream("这是一个A标签的测试".getBytes("utf-8"));
- }else{
- inputStream = new ByteArrayInputStream("这是一个Submit的测试".getBytes("utf-8"));
- }
- return this.SUCCESS;
- }
- }
(2)struts.xml的配置没有改变,就不去赘述了
(3)页面也需要发生一些改变,要做一个提交的页面,同时会使用a标签或submit标签,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
- <s:div id="showMsg">
- </s:div>
-
- <s:form action="ajaxServerAction" method="post">
- <s:textfield name="account" label="帐号"></s:textfield>
- <s:textfield name="name" label="姓名"></s:textfield>
- <sx:submit targets="showMsg"></sx:submit>
- </s:form>
-
- <sx:a targets="showMsg" href="ajaxServerAction.action?account=test&name=testname">a标签的测试</sx:a>
(4)运行测试一下,结果如下:
![](http://sishuok.com/forum/upload/2012/4/18/03fd684b408041dca78e2810cedbeb1e__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.5 a标签示例页面
![](http://sishuok.com/forum/upload/2012/4/18/554e6f958e6ed17a06780daba3d11ef1__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.6 submit标签示例页面
14.3.5 bind标签
1:功能
bind标签主要用来把一个事件和事件处理程序关联起来,当然它也可以把一个对象的事件和一个topic联系起来。
2:属性
bind标签的属性很多,这里罗列一些常用的:
![](http://sishuok.com/forum/upload/2012/4/18/283feafc59f920eb94f08de1212e6beb__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/546324651c091d1b8a8b4f9bacce2c32__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/48f427e80edcef209a00b18256714556__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:使用示例
Bind标签的使用是非常简单的,来通过一个示例进行说明,实现的功能非常简单,就是为一个按钮绑定上一个onclick的事件。
(1)Action和struts.xml就沿用上面示例的Action和struts.xml,这里就不去赘述了。只是把返回的数据修改成了:
java代码:
- inputStream = new ByteArrayInputStream("这是一个Bind的测试".getBytes("utf-8"));
(2)然后来看看页面的实现,主要就是bind标签的基本使用了,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
- <s:div id="showMsg">
- </s:div>
-
- <input type="button" id="myButton" value="保存">
- <sx:bind
- id="myBind"
- href="ajaxServerAction.action"
- sources="myButton"
- events="onclick"
- targets="showMsg"
- >
- </sx:bind>
(4)去运行测试一下看看,运行应该如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/b2b4c1f9137b5353c9548adb99be524c__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.7 bind标签示例页面
14.3.6datetimepicker标签
1:功能
datetimepicker标签主要用来实现一个日期控件,可以表现为一个日历表或者是一个ie时间表。
2:属性
datetimepicker标签的属性很多,这里罗列一些常用的:
![](http://sishuok.com/forum/upload/2012/4/18/2735ad47c92bc861147dd07e29479f4e__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/f8ef7f1890dd30c1b7d3095d4dc3755a__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/6f59090da64526c1dd87bd1d8b3ad47c__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
设置日期格式时,各个字母代表的含义如下:
![](http://sishuok.com/forum/upload/2012/4/18/5ccf72e937bbddd4529f384a2e3c76aa__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:使用示例
看看使用datetimepicker标签来显示日期的样子,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <sx:datetimepicker
- adjustWeeks="true"
- displayFormat="yyyy-MM-dd"
- toggleType="explode"
- >
- </sx:datetimepicker>
运行效果如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/eb4373780840f990a5c084bced2fee60__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.8 datetimepicker标签示例页面
14.3.7 autocompleter标签
1:功能
autocompleter标签实现的是具有自动完成功能的组合框,输入一定的数据后,会出现一个下拉块,里面罗列着一些与输入相关的关键词,你可以通过选择一个来自动完成输入。当然也可以直接点击下拉列表来选择一个值。
2:属性
autocompleter标签的属性很多,这里罗列一些常用的:
![](http://sishuok.com/forum/upload/2012/4/18/344ade0d4e1540e04b1bde679d56547e__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/669d8e27daf170a539c32e4035d7f4a7__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/bc43e8f33637f773e8dfae4a7f9c66e9__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/ff0cb09d0d876a0feeac1843cd6ccbd5__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/7d066c2851d0b06b2b44da590f61e7a6__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:返回一个List的使用示例
autocompleter标签的使用并不复杂,只是它需要嵌套在一个标签内使用;另外标签使用的选项可以是一个集合,也可以是JSON对象,分别来通过示例进行说明,实现的功能非常简单,就是通过autocompleter标签来异步显示可自动完成的信息。
先看看从Action返回一个List给autocompleter标签的情况。
(1)先看看action的实现,在execute方法里面为list填充初始值,示例代码如下:
java代码:
- public class AutocompleteAction extends ActionSupport{
- public List<String> users = new ArrayList<String>();
-
-
-
- public String submitFlag = "";
-
-
-
- public String testKey = "";
-
- public String execute(){
- if("show".equals(submitFlag)){
- users.add("张三");
- users.add("张三丰");
- users.add("李四");
- users.add("李四郎");
- }else{
- System.out.println("你选中的是==="+testKey);
- }
- return this.SUCCESS;
- }
- }
注意其中的testKey属性,它用来接收被选中项的值,它对应着页面autocompleter标签中的name属性,它是自动在name属性后面添加Key而得到。也就是说,现在获取值的属性是testKey,那么页面autocompleter标签中的name属性的值就应该是test。当然,也可以通过在autocompleter标签中的keyName属性来指定这个值。
(2)相应的struts.xml配置如下:
java代码:
- <action name="autoAction" class="cn.javass.ajax.AutocompleteAction">
- <result name="success">/ajax/tags.jsp</result>
- </action>
(3)然后来看看页面的实现,主要就是autocompleter标签的基本使用了,要注意放到表单里面,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <s:form action="autoAction" method="post">
- <input type="hidden" name="submitFlag" value="request"/>
- <sx:autocompleter name="test" list="users" autoComplete="true"></sx:autocompleter>
- <s:submit></s:submit>
- </s:form>
(4)运行的url是:http://localhost:9080/helloworld/autoAction.action?submitFlag=show,去运行测试一下看看,刚开始运行应该如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/20f87f3e0cbba947879942166bcc4b78__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.9 autocompleter标签示例开始页面
点击下拉图标,如下图所示:
![](http://sishuok.com/forum/upload/2012/4/18/8ca9b8623bfae4e2154986fb5acb0418__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.10 autocompleter标签示例点击下拉图标的页面
如果在输入框中输入,比如输入张三,然后删掉三字,可以看到自动提示的信息如下图,你完全可以通过选择一个来实现自动输入:
![](http://sishuok.com/forum/upload/2012/4/18/81efeaf4f1b68e96a47e518fa1be3b48__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.11 autocompleter标签示例自动完成页面
4:返回JSON的使用示例
autocompleter标签使用返回的JSON也不复杂,只是返回值要符合一定的格式而已。autocompleter标签所接受的json格式大致有:
(1)如果返回的是数组,那么一定要是个2维的数组,格式大致如下:
java代码:
- [
- ['第一个元素的key','第一个元素的value'],
- ['第二个元素的key','第二个元素的value']
- ......
- ]
其中元素的key值就是在下拉列表里面显示的值,而value就是选中后提交到后台的值。
(2)如果你在autocompleter标签中设置了“dataFieldName”这个属性,假定设定的值为“dataFieldName=test”,那么返回的2维数组的格式大致如下:
java代码:
- {
- "test":[
- ['第一个元素的key','第一个元素的value'],
- ['第二个元素的key','第二个元素的value']
- ......
- ]
- }
或者如下格式:
java代码:
- {
- "test":{
- '第一个元素的key' : '第一个元素的value',
- '第二个元素的key' : '第二个元素的value'
- ......
- }
- }
(3)如果你在autocompleter标签中设置了“name”这个属性,假定设定的值为“name=test”,那么返回的格式大致如下:
java代码:
- {
- "tests" : [
- ['第一个元素的key','第一个元素的value'],
- ['第二个元素的key','第二个元素的value']
- ......
- ]
- }
(4)如果返回是一个map,那么返回的格式大致如下:
java代码:
- {
- '第一个元素的key' : '第一个元素的value',
- '第二个元素的key' : '第二个元素的value'
- ......
- }
接下来就简单看看从Action返回一个JSON字符串给autocompleter标签的实现。
(1)先看看action的实现,在execute方法里面为list填充初始值,然后拼接成为一个符合格式要求的字符串,并把这个字符串放置到request的属性里面,示例代码如下:
java代码:
- public class AutocompleteAction extends ActionSupport{
- public List<String> users = new ArrayList<String>();
-
-
-
- public String submitFlag = "";
-
-
-
- public String testKey = "";
-
- public String execute(){
- if("show".equals(submitFlag)){
- users.add("张三");
- users.add("张三丰");
- users.add("李四");
- users.add("李四郎");
-
- StringBuffer buffer = new StringBuffer();
- buffer.append("[");
- for(int i=0;i<users.size();i++){
- buffer.append("['"+users.get(i)+"','"+users.get(i)+"']");
- if(i!=users.size()-1){
- buffer.append(",");
- }
- }
- buffer.append("]");
- ServletActionContext.getRequest().setAttribute("jsonStr",buffer.toString());
- return "toJson";
- }else{
- System.out.println("你选中的是==="+testKey);
- }
- return this.SUCCESS;
- }
- }
(2)相应的struts.xml配置如下:
java代码:
- <action name="autoAction" class="cn.javass.ajax.AutocompleteAction">
- <result name="success">/ajax/tags.jsp</result>
- <result name="toJson">/ajax/toJson.jsp</result>
- </action>
(3)接下来看看返回JSON字符串的页面,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <%=request.getAttribute("jsonStr")%>
(4)然后来看看页面的实现,主要就是autocompleter标签的基本使用了,要注意放到表单里面,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <s:form action="autoAction" method="post">
- <input type="hidden" name="submitFlag" value="request"/>
- <sx:autocompleter name="test" href="/helloworld/autoAction.action?submitFlag=show"></sx:autocompleter>
- <s:submit></s:submit>
- </s:form>
注意里面配置了href,它就指向自动填充所需要的值的来源。
(5)运行的url是:http://localhost:9080/helloworld/ajax/tags.jsp,去运行测试一下看看,效果跟前面直接返回List的效果应该是一样的。
14.3.8textarea标签
1:功能
textarea标签用来实现复杂的文本编辑框,类似于大家在邮件系统或是博客系统里面看到的,可以在线编辑的文本框,可以设置一些基本的格式。
2:属性
textarea标签的常用属性有:
![](http://sishuok.com/forum/upload/2012/4/18/a900b279f9ec9b2c60ff9d50ab99060b__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:使用示例
(1)textarea标签的使用很简单,直接在页面上使用就可以了,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <s:form action="autoAction" method="post">
- <sx:textarea name="test" rows="10" cols="50"></sx:textarea>
- <s:submit></s:submit>
- </s:form>
如果后台想要接收到textarea的值,只需要设置一个属性跟textarea标签的name值一样就可以了。
(4)运行测试一下,结果如下:
![](http://sishuok.com/forum/upload/2012/4/18/588fe65a281f6045e8b6bae5856c49a9__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.12 textarea标签示例页面
这里要注意一个问题,部分IE可能对textarea标签支持得不是很好,刚显示出来的时候全部并在一起,点击输入框的时候就展开了,在Firefox上就一切正常。
14.3.9tabbedpanel标签
1:功能
tabbedpanel标签用来实现多页签的面板,也被称为tab面板,而且单个面板可以单独关闭,就类似于Eclipse打开开发的源文件一样。
2:属性
tabbedpanel标签的常用属性有:
![](http://sishuok.com/forum/upload/2012/4/18/bd5fe31a53961d721ec6c2f413c50059__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/78e1ae23e5c2fec656a0b80b0651ea19__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/2cfd73fd6cc783de207fe13eba3867f2__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/fc0f629bfd7f74c1e37e340de5e01fb5__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/845459444f760f4b30fd3d9a3e86e0d8__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:使用示例
(1)对Action稍作修改,只是把返回的数据修改成了:
java代码:
- inputStream = new ByteArrayInputStream("这是一个Tab的测试".getBytes("utf-8"));
java代码:
- (2)struts.xml的配置没有改变,就不去赘述了
- (3)页面也需要发生一些改变,主要是使用tabbedpanel标签,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <sx:tabbedpanel id="test" >
- <sx:div id="one" label="第一个面板">
- <s:form>
- <s:textfield name="userId" label="用户编号"/>
- <s:textfield name="name" label="用户名称"/>
- </s:form>
- </sx:div>
- <sx:div id="two" label="第二个面板" href="ajaxServerAction.action" >
- </sx:div>
- </sx:tabbedpanel>
(4)运行测试一下,结果如下:
![](http://sishuok.com/forum/upload/2012/4/18/45c0c508e157e68d702422ce2af670ad__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.13 tabbedpanel标签示例页面一
点击第二个面板,结果如下:
![](http://sishuok.com/forum/upload/2012/4/18/187ac7caff405e6507fae7fed2560ce4__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.14 tabbedpanel标签示例页面二
14.3.10tree和treenode标签
1:功能
tree标签用来实现在页面展示一个树形结构,它可以包含一个或多个treenode标签。tree标签实现的是一个基于dojo的树。treenode标签里面还可以包含一个到多个treenode标签,形成父子节点。
2:属性
tree标签的常用属性有:
![](http://sishuok.com/forum/upload/2012/4/18/ca7866c5678f5d206fb22ed7ba6324db__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/bd3e438fb3ed146d14e20bbbc69bf9ba__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/afca2fb5b25bb4837e130ad93aef9d8e__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
![](http://sishuok.com/forum/upload/2012/4/18/6b27c932ad6e5296d0cfc51f49dfcb4f__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
3:静态树示例
为了让大家更好的掌握树的使用,先来个简单的,就是直接在页面上写死的数据,也就是制造一颗静态树。
(1)直接在页面上使用tree标签和treenode标签,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
-
- <sx:tree id="depRoot" label="部门">
- <sx:treenode id="dev" label="开发部">
- <sx:treenode id="dev1" label="开发一部"></sx:treenode>
- <sx:treenode id="dev2" label="开发二部"></sx:treenode>
- </sx:treenode>
- <sx:treenode id="test" label="测试部"></sx:treenode>
- <sx:treenode id="market" label="市场部"></sx:treenode>
- </sx:tree>
(2)运行测试一下,结果如下:
![](http://sishuok.com/forum/upload/2012/4/18/5e7031f1d0e5e9fc0197137feb41724a__%E6%9C%AA%E5%91%BD%E5%90%8D.jpg)
图14.15 tree标签示例页面
4:动态树使用示例
接下来把构建树的数据后移,放到Action中去构建。为了与tree标签里面的属性进行匹配,需要在后台构建一个节点模型,是JavaBean格式的,这个JavaBean里面的属性,在页面上使用tree标签的时候进行使用。
(1)先就来看看这个节点的模型对象,示例代码如下:
java代码:
- public class Node {
-
-
-
- private String id;
-
-
-
- private String name;
-
-
-
- private List<Node> children = new ArrayList<Node>();
-
- public String getId() {
- return id;
- }
- public void setId(String id) {
- this.id = id;
- }
- public List<Node> getChildren() {
- return children;
- }
- public void setChildren(List<Node> children) {
- this.children = children;
- }
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- }
(2)在Action里面来组装树,示例代码如下:
java代码:
- public class TreeAction extends ActionSupport {
-
-
-
- public Node depRoot = new Node();
- public String execute(){
-
- depRoot.setId("theRoot");
- depRoot.setName("部门");
-
- Node dev = new Node();
- dev.setId("dev");
- dev.setName("开发部");
-
- Node dev1 = new Node();
- dev1.setId("dev1");
- dev1.setName("开发一部");
-
- Node dev2 = new Node();
- dev2.setId("dev2");
- dev2.setName("开发二部");
-
- dev.getChildren().add(dev1);
- dev.getChildren().add(dev2);
-
- Node test = new Node();
- test.setId("test");
- test.setName("测试部");
-
- Node market = new Node();
- market.setId("market");
- market.setName("市场部");
-
- depRoot.getChildren().add(dev);
- depRoot.getChildren().add(test);
- depRoot.getChildren().add(market);
-
- return this.SUCCESS;
- }
- }
(3)对应的struts.xml的配置,示例代码如下:
java代码:
- <action name="treeAction" class="cn.javass.ajax.TreeAction">
- <result name="success">/ajax/tags.jsp</result>
- </action>
(4)页面也需要发生一些改变,主要是使用tree标签,示例代码如下:
java代码:
- <%@ page contentType="text/html; charset=gb2312"%>
- <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>
- <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
- <%@taglib prefix="s" uri="/struts-tags" %>
- <head>
- <sx:head/>
- </head>
- <sx:tree rootNode="depRoot"
- nodeTitleProperty="name"
- nodeIdProperty="id"
- childCollectionProperty="children"
- >
- </sx:tree>
上面配置的各个属性,同后台的Node对象和Action对象都有关系,具体的参见相应的注释,这里就不去赘述了。
(5)运行的url是:http://localhost:9080/helloworld/treeAction.action,去运行测试一下看看,效果和刚才静态树的效果应该是一样的。
私塾在线网站原创《研磨struts2》系列
转自请注明出处:【http://sishuok.com/forum/blogPost/list/4131.html】