小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

《研磨struts2》第十四章對(duì)Ajax的支持之14.3AjaxJSPtags

 LibraryPKU 2013-08-24

14.3  Ajax JSP tags

14.3.1概述

為了使開發(fā)Ajax變得輕松愜意，Struts2提供了一些JSP Tags，通過這些自定義的標(biāo)簽庫(kù)，使得開發(fā)人員無需掌握額外的知識(shí)即可開發(fā)Ajax的應(yīng)用。

       從Struts2.1開始，不再推薦使用Dojo的Plugin，而是改用Ajax的tags，包括：

  • head：用來下載Dojo文件和相應(yīng)的Javascript代碼
  • div：用來動(dòng)態(tài)的加載并展示html內(nèi)容
  • a：展示為Html的超鏈接形式，點(diǎn)擊后觸發(fā)一個(gè)Ajax的請(qǐng)求
  • submit：展示為Html的按鈕形式，點(diǎn)擊后可觸發(fā)異步提交
  • bind：用來關(guān)聯(lián)事件和對(duì)應(yīng)的事件處理程序
  • datetimepicker：日歷組件
  • autocompleter：能實(shí)現(xiàn)自動(dòng)完成的功能，類似于搜索框的自動(dòng)完成功能
  • textarea：一個(gè)復(fù)雜的文本編輯器組件
  • tabbedpanel：一個(gè)顯示多頁(yè)面tab面板的組件
  • tree：一個(gè)在頁(yè)面上展示為樹的組件
  • treenode：用來展示為樹中節(jié)點(diǎn)的組件

要使用Struts2.1的Ajax Tags，需要做以下的工作：

       1：把Dojo插件，也就是struts2-dojo-plugin-2.1.8.1.jar文件，復(fù)制到WEB-INF/lib文件夾下

       2：在頁(yè)面上增加taglib的引用，<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

       3：在每個(gè)頁(yè)面的頂部包含head標(biāo)簽

       好了，基本的知識(shí)就了解到這里，接下來看看具體如何使用Struts2的Ajax tags。

14.3.2 head標(biāo)簽

1：功能

head標(biāo)簽的地位比較特殊，它的功能是用來下載Dojo文件和相應(yīng)的Javascript代碼，因此所有其他使用Dojo標(biāo)簽的頁(yè)面都應(yīng)該包含這個(gè)標(biāo)簽。

2：屬性

head標(biāo)簽的屬性有：

建議大家在開發(fā)期間，把compressed設(shè)置為false，debug設(shè)置為true，這樣方便大家調(diào)試程序；但是在交付給客戶的時(shí)候，應(yīng)該把compressed設(shè)置為true，debug設(shè)置為false，這樣可以加快程序的運(yùn)行。

3：使用示例

在開發(fā)期間使用head標(biāo)簽，大致應(yīng)為：

 

java代碼：
  1. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  2. <head>  
  3.    <sx:head debug="true" extraLocales="en-us,nl-nl,de-de"/>  
  4. </head>  

在運(yùn)行期間使用head標(biāo)簽，大致應(yīng)為：

 

java代碼：
  1. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  2. <head>  
  3.   <sx:head/>  
  4. </head>  

14.3.3 div標(biāo)簽

1：功能

div標(biāo)簽展示為html中的Div元素，但是div標(biāo)簽?zāi)軌虍惒降摹?dòng)態(tài)的加載需要展示的內(nèi)容，而且div標(biāo)簽還提供一個(gè)內(nèi)部的計(jì)時(shí)器，可以循環(huán)的在設(shè)定的時(shí)間點(diǎn)去重新加載需要展示的內(nèi)容。

2：屬性

div標(biāo)簽的屬性很多，這里羅列一些常用的：



3：使用示例

div標(biāo)簽的使用是非常簡(jiǎn)單的，來通過一個(gè)示例進(jìn)行說明，實(shí)現(xiàn)的功能非常簡(jiǎn)單，就是通過div來異步顯示Action返回的信息。

（1）先看看action的實(shí)現(xiàn)，只是簡(jiǎn)單的返回了一個(gè)信息，非常簡(jiǎn)單，示例代碼如下：

 

java代碼：
  1. public class AjaxServerAction extends ActionSupport {  
  2.     private InputStream inputStream;  
  3.     public InputStream getInputStream() {  
  4.         return inputStream;  
  5.     }  
  6.       
  7.     public String execute() throws Exception {  
  8.         Thread.sleep(3000L);  
  9.         inputStream = new ByteArrayInputStream("這是一個(gè)div的測(cè)試".getBytes("utf-8"));  
  10.         return this.SUCCESS;  
  11.     }  
  12. }  

（2）相應(yīng)的struts.xml配置如下：

 

java代碼：
  1. <action name="ajaxServerAction" class="cn.javass.ajax.AjaxServerAction">  
  2.             <result  type="stream">  
  3.                 <param name="contentType">text/html</param>  
  4.                 <param name="inputName">inputStream</param>  
  5.             </result>  
  6. </action>  

（3）然后來看看頁(yè)面的實(shí)現(xiàn)，主要就是div標(biāo)簽的基本使用了，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <head>  
  5.   <sx:head/>  
  6. </head>  
  7. <sx:div  
  8.     href="ajaxServerAction.action"  
  9.     showLoadingText="true"  
  10.     loadingText="正在加載內(nèi)容,請(qǐng)稍候"  
  11.     errorText="對(duì)不起,加載資源失敗,請(qǐng)重試"  
  12. >  
  13. </sx:div>  

（4）去運(yùn)行測(cè)試一下看看，剛開始運(yùn)行應(yīng)該如下圖所示：

圖14.3  Div標(biāo)簽示例開始頁(yè)面

       然后在3秒后，Action運(yùn)行完成并返回內(nèi)容，此時(shí)應(yīng)該如下圖所示：

圖14.4  Div標(biāo)簽示例結(jié)果頁(yè)面

14.3.4 a標(biāo)簽和submit標(biāo)簽

1：功能

a標(biāo)簽和submit標(biāo)簽的功能是類似的，都能夠發(fā)起一個(gè)Ajax請(qǐng)求，只不過a標(biāo)簽展示為html中的a元素，而submit標(biāo)簽展示成為按鈕的形式。

兩個(gè)元素都有一個(gè)target的屬性，用來指定顯示Ajax響應(yīng)后的信息的元素，通常是一個(gè)div元素。

2：屬性

a標(biāo)簽和submit標(biāo)簽的屬性也很類似，兩個(gè)標(biāo)簽都有的常用屬性有：



當(dāng)然也有一些不同的元素，除了上面這些共同的元素，a標(biāo)簽自有的元素有：

submit標(biāo)簽自有的元素有：

3：使用示例

（1）對(duì)Action稍作修改，讓它接收頁(yè)面?zhèn)鬟f的參數(shù)，示例代碼如下：

 

java代碼：
  1. public class AjaxServerAction extends ActionSupport {  
  2.     public String account;  
  3.     public String name;  
  4.       
  5.     private InputStream inputStream;  
  6.     public InputStream getInputStream() {  
  7.         return inputStream;  
  8.     }  
  9.       
  10.     public String execute() throws Exception {  
  11.         System.out.println("接收的參數(shù)，帳戶="+account+",姓名="+name);  
  12.         if(account!=null && account.indexOf("test")>=0){  
  13.             inputStream = new ByteArrayInputStream("這是一個(gè)A標(biāo)簽的測(cè)試".getBytes("utf-8"));  
  14.         }else{  
  15.             inputStream = new ByteArrayInputStream("這是一個(gè)Submit的測(cè)試".getBytes("utf-8"));  
  16.         }  
  17.         return this.SUCCESS;  
  18.     }  
  19. }  

（2）struts.xml的配置沒有改變，就不去贅述了

（3）頁(yè)面也需要發(fā)生一些改變，要做一個(gè)提交的頁(yè)面，同時(shí)會(huì)使用a標(biāo)簽或submit標(biāo)簽，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8. <s:div id="showMsg">  
  9. </s:div>  
  10.   
  11. <s:form action="ajaxServerAction" method="post">  
  12.     <s:textfield name="account" label="賬號(hào)"></s:textfield>  
  13.     <s:textfield name="name" label="姓名"></s:textfield>  
  14.     <sx:submit targets="showMsg"></sx:submit>  
  15. </s:form>  
  16.   
  17. <sx:a targets="showMsg" href="ajaxServerAction.action?account=test&name=testname">a標(biāo)簽的測(cè)試</sx:a>  

（4）運(yùn)行測(cè)試一下，結(jié)果如下：

圖14.5  a標(biāo)簽示例頁(yè)面

圖14.6  submit標(biāo)簽示例頁(yè)面

14.3.5 bind標(biāo)簽

1：功能

bind標(biāo)簽主要用來把一個(gè)事件和事件處理程序關(guān)聯(lián)起來，當(dāng)然它也可以把一個(gè)對(duì)象的事件和一個(gè)topic聯(lián)系起來。

2：屬性

bind標(biāo)簽的屬性很多，這里羅列一些常用的：


3：使用示例

Bind標(biāo)簽的使用是非常簡(jiǎn)單的，來通過一個(gè)示例進(jìn)行說明，實(shí)現(xiàn)的功能非常簡(jiǎn)單，就是為一個(gè)按鈕綁定上一個(gè)onclick的事件。

（1）Action和struts.xml就沿用上面示例的Action和struts.xml，這里就不去贅述了。只是把返回的數(shù)據(jù)修改成了：

 

java代碼：
  1. inputStream = new ByteArrayInputStream("這是一個(gè)Bind的測(cè)試".getBytes("utf-8"));  

（2）然后來看看頁(yè)面的實(shí)現(xiàn)，主要就是bind標(biāo)簽的基本使用了，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8. <s:div id="showMsg">  
  9. </s:div>  
  10.   
  11. <input type="button" id="myButton" value="保存">  
  12. <sx:bind  
  13.     id="myBind"  
  14.     href="ajaxServerAction.action"  
  15.     sources="myButton"  
  16.     events="onclick"  
  17.     targets="showMsg"  
  18. >  
  19. </sx:bind>  

（4）去運(yùn)行測(cè)試一下看看，運(yùn)行應(yīng)該如下圖所示：

圖14.7  bind標(biāo)簽示例頁(yè)面

14.3.6datetimepicker標(biāo)簽

1：功能

datetimepicker標(biāo)簽主要用來實(shí)現(xiàn)一個(gè)日期控件，可以表現(xiàn)為一個(gè)日歷表或者是一個(gè)ie時(shí)間表。

2：屬性

datetimepicker標(biāo)簽的屬性很多，這里羅列一些常用的：


設(shè)置日期格式時(shí)，各個(gè)字母代表的含義如下：

3：使用示例

       看看使用datetimepicker標(biāo)簽來顯示日期的樣子，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <sx:datetimepicker  
  10.     adjustWeeks="true"  
  11.     displayFormat="yyyy-MM-dd"  
  12.     toggleType="explode"  
  13. >  
  14. </sx:datetimepicker>  

運(yùn)行效果如下圖所示：

圖14.8  datetimepicker標(biāo)簽示例頁(yè)面

14.3.7 autocompleter標(biāo)簽

1：功能

autocompleter標(biāo)簽實(shí)現(xiàn)的是具有自動(dòng)完成功能的組合框，輸入一定的數(shù)據(jù)后，會(huì)出現(xiàn)一個(gè)下拉塊，里面羅列著一些與輸入相關(guān)的關(guān)鍵詞，你可以通過選擇一個(gè)來自動(dòng)完成輸入。當(dāng)然也可以直接點(diǎn)擊下拉列表來選擇一個(gè)值。

2：屬性

autocompleter標(biāo)簽的屬性很多，這里羅列一些常用的：



3：返回一個(gè)List的使用示例

autocompleter標(biāo)簽的使用并不復(fù)雜，只是它需要嵌套在一個(gè)標(biāo)簽內(nèi)使用；另外標(biāo)簽使用的選項(xiàng)可以是一個(gè)集合，也可以是JSON對(duì)象，分別來通過示例進(jìn)行說明，實(shí)現(xiàn)的功能非常簡(jiǎn)單，就是通過autocompleter標(biāo)簽來異步顯示可自動(dòng)完成的信息。

先看看從Action返回一個(gè)List給autocompleter標(biāo)簽的情況。

（1）先看看action的實(shí)現(xiàn)，在execute方法里面為list填充初始值，示例代碼如下：


java代碼：
  1. public class AutocompleteAction extends ActionSupport{  
  2.     public List<String> users = new ArrayList<String>();  
  3.     /** 
  4.      * 用來判斷是需要初始化數(shù)據(jù)還是處理提交的請(qǐng)求 
  5.      */  
  6.     public String submitFlag = "";  
  7.     /** 
  8.      * 用來接收被選中的項(xiàng)的值 
  9.      */  
  10.     public String testKey = "";  
  11.       
  12.     public String execute(){  
  13.         if("show".equals(submitFlag)){  
  14.             users.add("張三");  
  15.             users.add("張三豐");  
  16.             users.add("李四");  
  17.             users.add("李四郎");  
  18.         }else{  
  19.             System.out.println("你選中的是==="+testKey);  
  20.         }  
  21.         return this.SUCCESS;  
  22.     }  
  23. }  

注意其中的testKey屬性，它用來接收被選中項(xiàng)的值，它對(duì)應(yīng)著頁(yè)面autocompleter標(biāo)簽中的name屬性，它是自動(dòng)在name屬性后 面添加Key而得到。也就是說，現(xiàn)在獲取值的屬性是testKey，那么頁(yè)面autocompleter標(biāo)簽中的name屬性的值就應(yīng)該是test。當(dāng) 然，也可以通過在autocompleter標(biāo)簽中的keyName屬性來指定這個(gè)值。

（2）相應(yīng)的struts.xml配置如下：

 

java代碼：
  1. <action name="autoAction" class="cn.javass.ajax.AutocompleteAction">  
  2.             <result name="success">/ajax/tags.jsp</result>  
  3. </action>  

（3）然后來看看頁(yè)面的實(shí)現(xiàn)，主要就是autocompleter標(biāo)簽的基本使用了，要注意放到表單里面，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <s:form action="autoAction" method="post">  
  10.     <input type="hidden" name="submitFlag" value="request"/>  
  11.     <sx:autocompleter name="test" list="users" autoComplete="true"></sx:autocompleter>  
  12.     <s:submit></s:submit>  
  13. </s:form>  

（4）運(yùn)行的url是：http://localhost:9080/helloworld/autoAction.action?submitFlag=show，去運(yùn)行測(cè)試一下看看，剛開始運(yùn)行應(yīng)該如下圖所示：

圖14.9  autocompleter標(biāo)簽示例開始頁(yè)面

       點(diǎn)擊下拉圖標(biāo)，如下圖所示：

圖14.10  autocompleter標(biāo)簽示例點(diǎn)擊下拉圖標(biāo)的頁(yè)面

       如果在輸入框中輸入，比如輸入張三，然后刪掉三字，可以看到自動(dòng)提示的信息如下圖，你完全可以通過選擇一個(gè)來實(shí)現(xiàn)自動(dòng)輸入：

圖14.11  autocompleter標(biāo)簽示例自動(dòng)完成頁(yè)面

4：返回JSON的使用示例

autocompleter標(biāo)簽使用返回的JSON也不復(fù)雜，只是返回值要符合一定的格式而已。autocompleter標(biāo)簽所接受的json格式大致有：

（1）如果返回的是數(shù)組，那么一定要是個(gè)2維的數(shù)組，格式大致如下：

 

java代碼：
  1. [  
  2.  ['第一個(gè)元素的key','第一個(gè)元素的value'],  
  3.  ['第二個(gè)元素的key','第二個(gè)元素的value']  
  4.   ......  
  5. ]  

其中元素的key值就是在下拉列表里面顯示的值，而value就是選中后提交到后臺(tái)的值。

（2）如果你在autocompleter標(biāo)簽中設(shè)置了“dataFieldName”這個(gè)屬性，假定設(shè)定的值為“dataFieldName=test”，那么返回的2維數(shù)組的格式大致如下：

 

java代碼：
  1. {     
  2.     "test":[  
  3.             ['第一個(gè)元素的key','第一個(gè)元素的value'],  
  4.             ['第二個(gè)元素的key','第二個(gè)元素的value']  
  5.              ......  
  6.            ]  
  7. }  

或者如下格式：

 

java代碼：
  1. {     
  2.     "test":{  
  3.             '第一個(gè)元素的key' : '第一個(gè)元素的value',  
  4.             '第二個(gè)元素的key' : '第二個(gè)元素的value'  
  5.              ......  
  6.            }  
  7. }  

（3）如果你在autocompleter標(biāo)簽中設(shè)置了“name”這個(gè)屬性，假定設(shè)定的值為“name=test”，那么返回的格式大致如下：

 

java代碼：
  1. {  
  2.      "tests" : [  
  3.                 ['第一個(gè)元素的key','第一個(gè)元素的value'],  
  4.                 ['第二個(gè)元素的key','第二個(gè)元素的value']   
  5.                 ......    
  6.                ]  
  7. }  

（4）如果返回是一個(gè)map，那么返回的格式大致如下：

 

java代碼：
  1. {  
  2.     '第一個(gè)元素的key' : '第一個(gè)元素的value',  
  3.     '第二個(gè)元素的key' : '第二個(gè)元素的value'  
  4.     ......    
  5. }  

接下來就簡(jiǎn)單看看從Action返回一個(gè)JSON字符串給autocompleter標(biāo)簽的實(shí)現(xiàn)。

（1）先看看action的實(shí)現(xiàn)，在execute方法里面為list填充初始值，然后拼接成為一個(gè)符合格式要求的字符串，并把這個(gè)字符串放置到request的屬性里面，示例代碼如下：

 

java代碼：
  1. public class AutocompleteAction extends ActionSupport{  
  2.     public List<String> users = new ArrayList<String>();  
  3.     /** 
  4.      * 用來判斷是需要初始化數(shù)據(jù)還是處理提交的請(qǐng)求 
  5.      */  
  6.     public String submitFlag = "";  
  7.     /** 
  8.      * 用來接收被選中的項(xiàng)的值 
  9.      */  
  10.     public String testKey = "";  
  11.       
  12.     public String execute(){  
  13.         if("show".equals(submitFlag)){  
  14.             users.add("張三");  
  15.             users.add("張三豐");  
  16.             users.add("李四");  
  17.             users.add("李四郎");  
  18.               
  19.             StringBuffer buffer = new StringBuffer();  
  20.             buffer.append("[");  
  21.             for(int i=0;i<users.size();i++){  
  22.                 buffer.append("['"+users.get(i)+"','"+users.get(i)+"']");  
  23.                 if(i!=users.size()-1){  
  24.                     buffer.append(",");  
  25.                 }  
  26.             }  
  27.             buffer.append("]");           
  28.             ServletActionContext.getRequest().setAttribute("jsonStr",buffer.toString());   
  29.             return "toJson";  
  30.         }else{  
  31.             System.out.println("你選中的是==="+testKey);  
  32.         }  
  33.         return this.SUCCESS;  
  34.     }  
  35. }  

（2）相應(yīng)的struts.xml配置如下：

 

java代碼：
  1. <action name="autoAction" class="cn.javass.ajax.AutocompleteAction">  
  2.             <result name="success">/ajax/tags.jsp</result>  
  3.             <result name="toJson">/ajax/toJson.jsp</result>  
  4. </action>  

（3）接下來看看返回JSON字符串的頁(yè)面，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <%=request.getAttribute("jsonStr")%>  

（4）然后來看看頁(yè)面的實(shí)現(xiàn)，主要就是autocompleter標(biāo)簽的基本使用了，要注意放到表單里面，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <s:form action="autoAction" method="post">  
  10.     <input type="hidden" name="submitFlag" value="request"/>  
  11.     <sx:autocompleter name="test" href="/helloworld/autoAction.action?submitFlag=show"></sx:autocompleter>  
  12.     <s:submit></s:submit>  
  13. </s:form>  

注意里面配置了href，它就指向自動(dòng)填充所需要的值的來源。

（5）運(yùn)行的url是：http://localhost:9080/helloworld/ajax/tags.jsp，去運(yùn)行測(cè)試一下看看，效果跟前面直接返回List的效果應(yīng)該是一樣的。

14.3.8textarea標(biāo)簽

1：功能

textarea標(biāo)簽用來實(shí)現(xiàn)復(fù)雜的文本編輯框，類似于大家在郵件系統(tǒng)或是博客系統(tǒng)里面看到的，可以在線編輯的文本框，可以設(shè)置一些基本的格式。

2：屬性

textarea標(biāo)簽的常用屬性有：

3：使用示例

（1）textarea標(biāo)簽的使用很簡(jiǎn)單，直接在頁(yè)面上使用就可以了，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <s:form action="autoAction" method="post">  
  10.     <sx:textarea name="test" rows="10" cols="50"></sx:textarea>  
  11.     <s:submit></s:submit>  
  12. </s:form>  

如果后臺(tái)想要接收到textarea的值，只需要設(shè)置一個(gè)屬性跟textarea標(biāo)簽的name值一樣就可以了。

（4）運(yùn)行測(cè)試一下，結(jié)果如下：

圖14.12  textarea標(biāo)簽示例頁(yè)面

這里要注意一個(gè)問題，部分IE可能對(duì)textarea標(biāo)簽支持得不是很好，剛顯示出來的時(shí)候全部并在一起，點(diǎn)擊輸入框的時(shí)候就展開了，在Firefox上就一切正常。

14.3.9tabbedpanel標(biāo)簽

1：功能

tabbedpanel標(biāo)簽用來實(shí)現(xiàn)多頁(yè)簽的面板，也被稱為tab面板，而且單個(gè)面板可以單獨(dú)關(guān)閉，就類似于Eclipse打開開發(fā)的源文件一樣。

2：屬性

tabbedpanel標(biāo)簽的常用屬性有：



3：使用示例

（1）對(duì)Action稍作修改，只是把返回的數(shù)據(jù)修改成了：

 

java代碼：
  1. inputStream = new ByteArrayInputStream("這是一個(gè)Tab的測(cè)試".getBytes("utf-8"));  

 

java代碼：
  1. （2）struts.xml的配置沒有改變，就不去贅述了  
  2. （3）頁(yè)面也需要發(fā)生一些改變，主要是使用tabbedpanel標(biāo)簽，示例代碼如下：  

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <sx:tabbedpanel id="test" >  
  10.    <sx:div id="one" label="第一個(gè)面板">  
  11.        <s:form>  
  12.            <s:textfield name="userId" label="用戶編號(hào)"/>  
  13.            <s:textfield name="name" label="用戶名稱"/>  
  14.        </s:form>  
  15.    </sx:div>  
  16.    <sx:div id="two" label="第二個(gè)面板" href="ajaxServerAction.action" >  
  17.    </sx:div>  
  18. </sx:tabbedpanel>  

（4）運(yùn)行測(cè)試一下，結(jié)果如下：

圖14.13  tabbedpanel標(biāo)簽示例頁(yè)面一

       點(diǎn)擊第二個(gè)面板，結(jié)果如下：

圖14.14  tabbedpanel標(biāo)簽示例頁(yè)面二

14.3.10tree和treenode標(biāo)簽

1：功能

tree標(biāo)簽用來實(shí)現(xiàn)在頁(yè)面展示一個(gè)樹形結(jié)構(gòu)，它可以包含一個(gè)或多個(gè)treenode標(biāo)簽。tree標(biāo)簽實(shí)現(xiàn)的是一個(gè)基于dojo的樹。treenode標(biāo)簽里面還可以包含一個(gè)到多個(gè)treenode標(biāo)簽，形成父子節(jié)點(diǎn)。

2：屬性

tree標(biāo)簽的常用屬性有：

 


3：靜態(tài)樹示例

       為了讓大家更好的掌握樹的使用，先來個(gè)簡(jiǎn)單的，就是直接在頁(yè)面上寫死的數(shù)據(jù)，也就是制造一顆靜態(tài)樹。

（1）直接在頁(yè)面上使用tree標(biāo)簽和treenode標(biāo)簽，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8.   
  9. <sx:tree id="depRoot" label="部門">  
  10.     <sx:treenode id="dev" label="開發(fā)部">  
  11.         <sx:treenode id="dev1" label="開發(fā)一部"></sx:treenode>  
  12.         <sx:treenode id="dev2" label="開發(fā)二部"></sx:treenode>  
  13.     </sx:treenode>  
  14.     <sx:treenode id="test" label="測(cè)試部"></sx:treenode>  
  15.     <sx:treenode id="market" label="市場(chǎng)部"></sx:treenode>  
  16. </sx:tree>  

（2）運(yùn)行測(cè)試一下，結(jié)果如下：

圖14.15  tree標(biāo)簽示例頁(yè)面

4：動(dòng)態(tài)樹使用示例

       接下來把構(gòu)建樹的數(shù)據(jù)后移，放到Action中去構(gòu)建。為了與tree標(biāo)簽里面的屬性進(jìn)行匹配，需要在后臺(tái)構(gòu)建一個(gè)節(jié)點(diǎn)模型，是JavaBean格式的，這個(gè)JavaBean里面的屬性，在頁(yè)面上使用tree標(biāo)簽的時(shí)候進(jìn)行使用。

（1）先就來看看這個(gè)節(jié)點(diǎn)的模型對(duì)象，示例代碼如下：

 

java代碼：
  1. public class Node {  
  2.     /** 
  3.      * 到時(shí)候配置到tree標(biāo)簽的nodeIdProperty 
  4.      */  
  5.     private String id;  
  6.     /** 
  7.      * 到時(shí)候配置到tree標(biāo)簽的nodeTitleProperty 
  8.      */  
  9.     private String name;  
  10.     /** 
  11.      * 到時(shí)候配置到tree標(biāo)簽的childCollectionProperty 
  12.      */  
  13.     private List<Node> children = new ArrayList<Node>();  
  14.       
  15.     public String getId() {  
  16.         return id;  
  17.     }  
  18.     public void setId(String id) {  
  19.         this.id = id;  
  20.     }  
  21.     public List<Node> getChildren() {  
  22.         return children;  
  23.     }  
  24.     public void setChildren(List<Node> children) {  
  25.         this.children = children;  
  26.     }  
  27.     public String getName() {  
  28.         return name;  
  29.     }  
  30.     public void setName(String name) {  
  31.         this.name = name;  
  32.     }  
  33. }  

（2）在Action里面來組裝樹，示例代碼如下：

 

java代碼：
  1. public class TreeAction extends ActionSupport {  
  2.     /** 
  3.      * 用作樹的根節(jié)點(diǎn)，對(duì)應(yīng)到tree標(biāo)簽的rootNode 
  4.      */  
  5.     public Node depRoot = new Node();  
  6.     public String execute(){  
  7.         //在這里構(gòu)建樹  
  8.         depRoot.setId("theRoot");  
  9.         depRoot.setName("部門");  
  10.           
  11.         Node dev = new Node();  
  12.         dev.setId("dev");  
  13.         dev.setName("開發(fā)部");  
  14.           
  15.         Node dev1 = new Node();  
  16.         dev1.setId("dev1");  
  17.         dev1.setName("開發(fā)一部");  
  18.           
  19.         Node dev2 = new Node();  
  20.         dev2.setId("dev2");  
  21.         dev2.setName("開發(fā)二部");  
  22.           
  23.         dev.getChildren().add(dev1);  
  24.         dev.getChildren().add(dev2);  
  25.           
  26.         Node test = new Node();  
  27.         test.setId("test");  
  28.         test.setName("測(cè)試部");  
  29.           
  30.         Node market = new Node();  
  31.         market.setId("market");  
  32.         market.setName("市場(chǎng)部");  
  33.           
  34.         depRoot.getChildren().add(dev);  
  35.         depRoot.getChildren().add(test);  
  36.         depRoot.getChildren().add(market);  
  37.           
  38.         return this.SUCCESS;  
  39.     }  
  40. }  

（3）對(duì)應(yīng)的struts.xml的配置，示例代碼如下：

 

java代碼：
  1. <action name="treeAction" class="cn.javass.ajax.TreeAction">  
  2.             <result name="success">/ajax/tags.jsp</result>  
  3. </action>  

（4）頁(yè)面也需要發(fā)生一些改變，主要是使用tree標(biāo)簽，示例代碼如下：

 

java代碼：
  1. <%@ page contentType="text/html; charset=gb2312"%>  
  2. <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head>  
  3. <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>  
  4. <%@taglib prefix="s" uri="/struts-tags" %>  
  5. <head>  
  6.   <sx:head/>  
  7. </head>  
  8. <sx:tree rootNode="depRoot"  
  9.         nodeTitleProperty="name"  
  10.         nodeIdProperty="id"  
  11.         childCollectionProperty="children"  
  12. >  
  13. </sx:tree>  

上面配置的各個(gè)屬性，同后臺(tái)的Node對(duì)象和Action對(duì)象都有關(guān)系，具體的參見相應(yīng)的注釋，這里就不去贅述了。

（5）運(yùn)行的url是：http://localhost:9080/helloworld/treeAction.action，去運(yùn)行測(cè)試一下看看，效果和剛才靜態(tài)樹的效果應(yīng)該是一樣的。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多