Struts2的标签之UI标签

1：UI标签分为分为以下几种：
      *Form Tags：表单标签，包含所有可以用在Form表单里面的标签
       *Non-Form UI Tags：非表单标签，主要包含错误展示，组件等。
       *Ajax Tags：用来支持Ajax的标签。
 
2：模板和主题
     *模板(Template)
       就是一些代码，在Struts2中是由FreeMarker来编写的，标签使用这些代码能渲染生成相应的HTML代码
      一个标签需要知道自己显示什么数据，以及最终生成什么样的HTML代码，其中，显示什么数据往往是通过用户指定的OGNL表达式去值栈取，而最终生成什么样的HTML代码，就是由一组FreeMarker的模板来定义，每个标签都会有自己对应的FreeMarker模板，这组模板在Struts2核心jar包的template包中。


     *主题(Theme)
       就是一系列模板的集合。通常情况下，这一系列模板会有相同或者类似的风格，这样能保证功能或者视觉效果的一致性。
       Strut2标签是使用一个模板来生成最终的HTML代码，这也意味着，如果使用不同的模板，那么同一个标签所生成的HTML代码并不一样，也意味着不同的标签所生成的HTML代码的风格也可能不一样。
      每一个主题包含一系列的模板，这些模板就会有相同或者类似的风格，从而解决上面的问题，这也意味着，在Struts2中，可以通过切换主题来切换标签的HTML风格。
 
      *Struts2的内建主题：
          *simple：只生成最基本的HTML元素，没有任何附加功能。
          *xhtml：在simple的基础上提供附加功能，提供布局功能，Label显示名称，以及验证框架和国际化框架的集成。
          *css_html: 在xhtml的基础上，添加对CSS的支持和控制。
         *Ajax：继承自xhtml, 提供Ajax的支持。
       其中，xhtml为默认的主题，但是，xhtml主题有一定的局限性，因为它使用表格进行布局，只支持每一行放一个表单项，这样一来，要是有复杂的页面布局，不好弄了。
 修改默认的主题：
      在struts.xml中，<constant name="struts.ui.theme" value="simple" />
     在struts.properties中，struts.ui.theme = simple


3：表单标签的通用属性
    *与css相关的属性
        cssClass, cssStyle, cssErrorClass, cssErrorStyle
    *与触发事件相关的属性
      onblur, onchange, onclick, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
     onselect
    *与悬浮提示相关的属性
     jsTooltipEnabled: 是否允许用javascript来生成悬浮提示
     tooltip：悬浮提示的内容
      tooltipDelay:悬浮提示出现的延迟时间，以ms为单位
     tooltipIcon：悬浮提示使用图标的URL路径
   
    *其他来源于HTML的属性
    accesskey：指定快捷键，如果设置这个属性为x，按Alt+xz组合键就可以快速定位到这个生成的HTML组件
    disabled, id, tabindex, title
    
    *与提示文本相关的属性
     label：用来显示在HTML组件前的文本
     key：同label一样，也是用来显示在HTML组件前的文本，但是其内容取自国际化信息
     labelposition：标签文本显示的位置，可以选择top或者left


    *与模板和主题相关的属性
    template, templateDir, theme
    *是否为必填的属性
    required：指定此生成的HTML组件是否为必填项
   requiredposition：指定此生成的HTML组件是必填项时提示信息显示的位置，可以是left或者right
4：Struts2标签和一般的HTML表单便签的不同
   * 
  <form action="/helloworld/ognlAction.action" method="post"></form>
    <s:form action="/ognlAction.action" method="post"></s:form>
     <s:form action="/ognlAction.action" method="post" namespace="/testNamespace"></s:form>
<s:form>的action属性不用带应用上下文，如/helloworld, 可以使用namespace属性来指定使用到的命名空间。
 *
<textarea>默认值</textarea>
  <s:textarea value="默认值"/>
     
指定默认值的方式不一样


*单选框radio
     常见的属性：
           list：用于生成单选框的集合，必须配置
           listKey: 生成的radio的value属性
           listValue: 生成的radio后面显示的文字
     
   简单示例：

        Action的内容

        

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public List<User> getUserList() {  
4.         return userList;  
5.     }  
6.   
7.     public void setUserList(List<User> userList) {  
8.         this.userList = userList;  
9.     }  
10.       
11.     public String execute() {  
12.           
13.         User user1 = new User();  
14.         user1.setName("zhangsan");  
15.         user1.setAge(20);  
16.           
17.         User user2 = new User();  
18.         user2.setName("lisi");  
19.         user2.setAge(22);  
20.           
21.         userList.add(user2);  
22.         userList.add(user1);  
23.           
24.         return SUCCESS;  
25.     }  
26.       

页面jsp的内容：

    

[html]  view plain  copy

1. <s:radio name="radio1" list="userList" listKey="name" listValue="age"/>  

输出结果：

 

*复选框checkboxlist:

   *action的内容

       

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public String[] getCheckbox1() {  
4.         String[] checkbox1 = new String[2];  
5.         checkbox1[0] = "zhangsan";  
6.         checkbox1[1] = "lisi";  
7.         return checkbox1;  
8.     }  
9.   
10.     public List<User> getUserList() {  
11.         return userList;  
12.     }  
13.   
14.     public void setUserList(List<User> userList) {  
15.         this.userList = userList;  
16.     }  
17.       
18.     public String execute() {  
19.           
20.         User user1 = new User();  
21.         user1.setName("zhangsan");  
22.         user1.setAge(20);  
23.           
24.         User user2 = new User();  
25.         user2.setName("lisi");  
26.         user2.setAge(22);  
27.           
28.         User user3 = new User();  
29.         user3.setName("wangwu");  
30.         user3.setAge(30);  
31.           
32.         userList.add(user2);  
33.         userList.add(user1);  
34.         userList.add(user3);  
35.           
36.         return SUCCESS;  
37.     }  

*页面jsp的内容：

   

[html]  view plain  copy

1. <s:checkboxlist name="checkbox1" list="userList"  listKey="name" listValue="age"></s:checkboxlist>  

*输出结果：

  

 

     通过action的getCheckbox1方法为checkbox赋值

*下拉框

属性：list，listKey，listValue

headerKey: 在所有的选项前再添加额外的一个选项作为其标题的value属性

headerValue: 在所有的选项前再添加额外的一个选项作为其标题的显示文字

emptyOption: 是否在标题和真实的选项之间加一个空选项

multiple: 用户是否可以同时选择多项

size:下拉框的高度，即最多可以同时显示多少个选项

简单示例：

action的内容：

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public String[] getSelect1() {  
4.         String[] select1 = new String[2];  
5.         select1[0] = "zhangsan";  
6.         select1[1] = "lisi";  
7.         return select1;  
8.     }  
9.   
10.     public List<User> getUserList() {  
11.         return userList;  
12.     }  
13.   
14.     public void setUserList(List<User> userList) {  
15.         this.userList = userList;  
16.     }  
17.       
18.     public String execute() {  
19.           
20.         User user1 = new User();  
21.         user1.setName("zhangsan");  
22.         user1.setAge(20);  
23.           
24.         User user2 = new User();  
25.         user2.setName("lisi");  
26.         user2.setAge(22);  
27.           
28.         User user3 = new User();  
29.         user3.setName("wangwu");  
30.         user3.setAge(30);  
31.           
32.         userList.add(user2);  
33.         userList.add(user1);  
34.         userList.add(user3);  
35.           
36.         return SUCCESS;  
37.     }  

页面jsp的内容：

[html]  view plain  copy

1. <s:select name="select1" list="userList" listKey="name" listValue="age" multiple="true" size="5"></s:select>  

输出结果：

 

5：复杂操作标签

*head标签

仅仅把head标签放到页面内，没有任何的参数，它可以自动识别页面需要的Struts2的哪些辅助性文件，并帮助用户自动导入，比如某些Struts2的标签需要使用Struts2提供的某些js文件，那么head标签就可以自动发现并导入这些js文件

<s:head>

*combobox标签

combobox标签用于生成一个文本框和一个下拉框，下拉框出现在文本框的下面，在最终提高的时候只提交文本框的输入值，下拉框用于在其选项改变时，也就是onchange事件被触发时，把自身的被选中项的值赋到文本框上

与文本框有关的属性： maxlength size readonly

与下拉框有关的属性：list, listKey, listValue

简单示例：

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public Integer[] getSelect1() {  
4.         Integer[] select1 = new Integer[1];  
5.         select1[0] = 20;  
6.         return select1;  
7.     }  
8.   
9.     public List<User> getUserList() {  
10.         return userList;  
11.     }  
12.   
13.     public void setUserList(List<User> userList) {  
14.         this.userList = userList;  
15.     }  
16.       
17.     public String execute() {  
18.           
19.         User user1 = new User();  
20.         user1.setName("zhangsan");  
21.         user1.setAge(20);  
22.           
23.         User user2 = new User();  
24.         user2.setName("lisi");  
25.         user2.setAge(22);  
26.           
27.         User user3 = new User();  
28.         user3.setName("wangwu");  
29.         user3.setAge(30);  
30.           
31.         userList.add(user2);  
32.         userList.add(user1);  
33.         userList.add(user3);  
34.           
35.         return SUCCESS;  
36.     }  
37.       

页面内容：

[html]  view plain  copy

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <%@ taglib prefix="s" uri="/struts-tags" %>  
4.   
5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
6. <html>  
7. <head>  
8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
9. <title>comboboxlist用法</title>  
10. <s:head/>  
11. </head>  
12. <body>  
13.   <s:form action="" method="post" theme="simple">  
14.     
15.    <s:combobox name="select1" list="userList" listKey="age" listValue="name" size="20">  
16.    </s:combobox>  
17.      
18.    </s:form>  
19. </body>  
20. </html>  

注意要引用<s:head>标签

输出效果图：

 

*uploadselect标签

*生成一个可以自由上下移动选项的下拉框。

*allowMoveUp: 是否显示“上移”按钮，默认为显示

allowMovoDown: 是否显示“下移”按钮，默认为显示

allowSelectAll: 是否显示“全选”按钮，默认为显示

moveUpLabel: 上移按钮显示的文本

moveDownLabel: 下移按钮显示的文本

selectAllLabel: 全选按钮显示的文本

简单示例：

action的内容：

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public Integer[] getSelect1() {  
4.         Integer[] select1 = new Integer[1];  
5.         select1[0] = 20;  
6.         return select1;  
7.     }  
8.   
9.     public List<User> getUserList() {  
10.         return userList;  
11.     }  
12.   
13.     public void setUserList(List<User> userList) {  
14.         this.userList = userList;  
15.     }  
16.       
17.     public String execute() {  
18.           
19.         User user1 = new User();  
20.         user1.setName("zhangsan");  
21.         user1.setAge(20);  
22.           
23.         User user2 = new User();  
24.         user2.setName("lisi");  
25.         user2.setAge(22);  
26.           
27.         User user3 = new User();  
28.         user3.setName("wangwu");  
29.         user3.setAge(30);  
30.           
31.         userList.add(user2);  
32.         userList.add(user1);  
33.         userList.add(user3);  
34.           
35.         return SUCCESS;  
36.     }  

页面jsp的内容：

[html]  view plain  copy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
5. <title>updownselect用法</title>  
6. <s:head/>  
7. </head>  
8. <body>  
9.   <s:form action="" method="post" theme="simple">    
10.    <s:updownselect list="userList" name="select1" listKey="age" listValue="name"  
11.       allowMoveUp="true" moveUpLabel="上移" allowMoveDown="true" allowSelectAll="true"  
12.       moveDownLabel="下移" selectAllLabel="全选"  />  
13.    </s:form>  
14. </body>  
15. </html>  

输出效果如下图：

 

*optiontransferselect标签

它用来生成两个下拉框，这两个下拉框左右放置，有按钮可以控制将选项在两个下拉框之间转移，在每个下拉框还有按钮可以像updownselect标签那样控制选项上下移动

主要属性可以分为四组：

*控制左下拉框名字以及数据来源

*name, list, listKey, listValue, headerKey, headerValue

*控制右下拉框名字以及数据源

*doubleName, doubleList, doubleListKey, doubleListValue, doubleHeaderKey, doubleHeaderValue

*控制两个下拉框之间的左右移动按钮

*allowAddAllToLeft, allowAddToLeft, allowAddToRight, allowAddAllToRight, addAllToLeftLabel, addAllToRightLabel, addToLeftLabel, addToRightLabel

*控制两个下拉框之间的上下移按钮

*allowUpDownOnLeft, allowUpDownOnRight, leftDownLabel, leftUpLabel, rightUpLabel, rightDownLabel, allowSelectAll

简单示例：

  action内容：

[java]  view plain  copy

1. private List<User> userList = new ArrayList();  
2.       
3.     public Integer[] getSelect1() {  
4.         Integer[] select1 = new Integer[1];  
5.         select1[0] = 20;  
6.         return select1;  
7.     }  
8.   
9.     public List<User> getUserList() {  
10.         return userList;  
11.     }  
12.   
13.     public void setUserList(List<User> userList) {  
14.         this.userList = userList;  
15.     }  
16.       
17.     public String execute() {  
18.           
19.         User user1 = new User();  
20.         user1.setName("zhangsan");  
21.         user1.setAge(20);  
22.           
23.         User user2 = new User();  
24.         user2.setName("lisi");  
25.         user2.setAge(22);  
26.           
27.         User user3 = new User();  
28.         user3.setName("wangwu");  
29.         user3.setAge(30);  
30.           
31.         userList.add(user2);  
32.         userList.add(user1);  
33.         userList.add(user3);  
34.           
35.         return SUCCESS;  
36.     }  

页面jsp：

[html]  view plain  copy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
2. <html>  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
5. <title>optiontransferselect用法</title>  
6. <s:head/>  
7. </head>  
8. <body>  
9.   <s:form action="" method="post" theme="simple">    
10.    <s:optiontransferselect name="select1" doubleList="userList2" list="userList" listKey="age" listValue="name" doubleName="select2"  
11.                            headerKey="" headerValue="请选择" doubleListKey="age" doubleListValue="name" doubleHeaderKey=""  
12.                            doubleHeaderValue="请选择" addAllToLeftLabel="全部左移" addAllToRightLabel="全部右移" addToLeftLabel="左移"  
13.                            addToRightLabel="右移" allowAddAllToLeft="true" allowAddToLeft="true" allowAddToRight="true"  
14.                            allowAddAllToRight="true" allowUpDownOnLeft="true" allowUpDownOnRight="true" leftUpLabel="上移"  
15.                            leftDownLabel="下移" rightUpLabel="上移" rightDownLabel="下移" allowSelectAll="false"  
16.       />  
17.    </s:form>  
18. </body>  
19. </html>  

输出结果：

 

  

原文链接：http://blog.csdn.net/woshisap/article/details/7296383