WebWork UI标签
一、UI标签概述
1、UI组件的组成
WebWork是不绑定视图技术的框架，可以使用JSP、Velocity、FreeMarker或者其他支持的方法来编写用户界面。默认情况下，WebWork仅支持JSP标签的方法来调用UI标签。
WebWork UI标签可以用任何模板语言编写。
Template
一个Template就是一个使用Velocity、JSP或者FreeMarker编写的文件，用来生成HTML标记。
Theme
一个theme就是一套组合在一起的模板，形成一套公用的感观。
Tag
一个tag就是一个JSP标签，用来读取属性并利用属性输出模板。
2、themes
Theme定义了布局和风格。WebWork内置的theme：xhtml、simple、css_xhtml等。任何一个都可以扩展或复制以制作你的个性化的theme。
二、UI标签通用属性
1、通用属性
|
属性 |
Theme |
数据类型 |
描述 |
|
name |
simple |
String |
表单元素映射的名字 |
|
value |
simple |
Object |
表单元素的值 |
|
label |
XHTML |
String |
XHTML theme中使用的label，simple theme会忽略 |
|
labelposition |
XHTML |
String |
label元素的位置，top位于元素的上部，left位于元素的左边 |
|
required |
XHTML |
Boolean |
如果为true，一个星号会显示在label的右边，表明这个字段是必填的，在默认情况下，如果一个字段级的校验器被映射到这个字段名，该值就为true |
|
id |
simple |
String |
HTML id 属性，允许简单地和JavaScript集成 |
|
cssClass |
simple |
String |
表单元素的class属性 |
|
cssStyle |
simple |
String |
表单元素的style属性 |
|
disabled |
simple |
Boolean |
表单元素的disabled属性 |
|
tabindex |
simple |
String |
表单元素的tabindex属性 |
|
theme |
N/A |
String |
模板要在哪个theme里查找，默认情况下，如果不是在webwork.properties里指定的theme，就是XHTML |
|
template |
N/A |
String |
用来输出UI标签的模板，所有UI标签都有一个默认的模板（除component标签），但模板可以被重新设置 |
2、id属性
除了form标签之外，所有的 UI标签都有一个id属性的默认值。一般建议设置该属性，理由如下：
第一点：它让表单的label更紧密地与你的表单结合在一起，因为它指定了for属性。
第二点：可以和JavaScript集成。
如果不指定，默认的值就是[formName]_[elementName]。
三、简单标签
1、form标签
功能：担当容器的角色。
属性：
action : [String]要提交到action的名字
namespace :[String]action的命名空间，默认的命名空间取决于当前的request
method : [String]POST或GET
target : [String]form提交的目标窗口。一般是框架名、_blank、_top或者任何其他指定的target值
enctype : 进行文件上传时设置为multipart/form-data
openTemplate :默认映射到form.vm
validate: 用来进行客户端校验
注:默认情况下，name属性的值就是要提交的action的名字。
2、textfield标签
功能：文本输入
属性：
maxlength : [String]可以输入的最大长度
readonly : [Boolean]设置为true时，用户不能输入
size : [String]可视尺寸
3、password标签
功能：与textfield类似，但默认时值不会显示
属性：
maxlength :
[String]可以输入的最大长度
readonly : [Boolean]设置为true时，用户不能输入
size : [String]可视尺寸
show : [Boolean]默认为false，设置为true时，password字段会被预置
4、textarea标签
功能：用来输入大数量文本。
属性：
cols : [String]文本区域的列数
rows : [String]文本区域的行数
readonly : [Boolean]设置为true时，用户不能输入
wrap : [String]指定文本区域的内容是否应该换行
5、checkbox标签
功能：复选框
属性：
fieldValue : [String]复选框选中时提交给action的值
范例：
<ww:checkbox label="Is Flag" name="flag" fieldValue="true" value="true"/>
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>CheckBox Example:</H2>
<ww:form action="checkboxAction.action" method="post">
<ww:checkbox label="Is Flag" name="flag" fieldValue="true" value="true"/>
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
CheckboxAction.java
package com.example;
import com.opensymphony.xwork.ActionSupport;
import com.opensymphony.xwork.Preparable;
public class CheckboxAction extends ActionSupport implements Preparable{
private boolean flag = false;
private String message;
public boolean getFlag(){
return flag;
}
public void setFlag(boolean flag){
this.flag = flag;
}
public String getMessage(){
return message;
}
public void prepare(){
}
public String execute() throws Exception{
if(flag)
message = "You have selected the checkbox!";
else
message = "You have not selected!";
return SUCCESS;
}
}
res.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>CheckBox Example:</H2>
<ww:property value="message"/>
</body>
</html>
四、基于集合的标签
1、select标签
功能：选项框
属性：
list : [Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。
listKey : [String]列表的key的表达式，默认为key
listValue : [String]列表的value的表达式，默认为value
headerKey : [String]如果用户选择了header选项，用来提交的值
headerValue : [String]用户看到的header选项的内容
emptyOption : [Boolean]设置为true时，一个空的选项会放在header选项和从列表中取出的选项之间
multiple : [Boolean]设置为true时，允许用户选择多个值
size : [String]指定列表框的大小
范例1：
<ww:select label="City" name="city" list="{'Huhehot','Baotou','Beijing','Shanghai','Tianjin'}"/>
<ww:select label="Sex" name="sex" list="#{1:'Man',2:'Woman'}"/>
<ww:select label="Book" name="book" list="{'C','C++','C#','Java','J2ME','J2EE','Spring','WebWork','DWR'}" headerKey="0" headerValue="Please select a book"/>
<ww:select label="Books" name="books" list="{'C','C++','C#','Java','J2ME','J2EE','Spring','WebWork','DWR'}" multiple="true" size="5"/>
<ww:select label="Computer" name="computer" list="{'HP','IBM','SAMSUNG','LENOVO'}" emptyOption="true"/>
范例2：
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<ww:action name="initSelectAction" executeResult="true"/>
</body>
</html>
package com.example;
import com.opensymphony.xwork.ActionSupport;
import com.opensymphony.xwork.Preparable;
import java.util.*;
public class InitSelectAction extends ActionSupport implements Preparable{
private DirectoryDAO directoryDAO;
private List directoryList;
private Map directoryMap;
public void setDirectoryDAO(DirectoryDAO directoryDAO){
this.directoryDAO = directoryDAO;
}
public List getDirectoryList(){
return directoryList;
}
public Map getDirectoryMap(){
return directoryMap;
}
public void prepare(){
directoryList = directoryDAO.getAllDirectory();
directoryMap = directoryDAO.getAllMapdirectory();
}
public String execute() throws Exception{
return SUCCESS;
}
}
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>Select Example:</H2>
<ww:form action="selectAction.action" method="post">
<ww:select label="City1" name="city1"list="directoryList" listKey="content" listValue="content"/>
<ww:select label="City2" name="city2"list="directoryMap"/>
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>MulSelect Example:</H2>
<ww:form action="mulSelectAction.action" method="post">
<ww:select label="City" name="city" list="#{1:'HHHT',2:'BJ',3:'TJ',4:'GZ'}" multiple="true"/>
<ww:select label="Book" name="book" list="{'C','C++','C#','Java','J2SE','J2ME','J2EE','Spring','WebWork','EJB3'}" multiple="true"/>
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
package com.example;
import com.opensymphony.xwork.ActionSupport;
import java.util.*;
public class MulSelectAction extends ActionSupport{
private List city = new ArrayList();
private List book = new ArrayList();
public void setCity(List city){
this.city = city;
}
public void setBook(List book){
this.book = book;
}
public List getCity(){
return city;
}
public List getBook(){
return book;
}
public String execute() throws Exception{
return SUCCESS;
}
public void validate(){
if(city.size()==0)
addFieldError("city","Please select citys!");
if(book.size()==0)
addFieldError("book","Please select books!");
}
}
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Res Page</title>
</head>
<body>
<H2>MulSelect Example:</H2>
City:
<ww:iterator value="city">
<ww:property/>
</ww:iterator>
<br>
Book:
<ww:iterator value="book">
<ww:property/>
</ww:iterator>
</body>
</html>
功能：单选按钮
属性：
list: [Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。
listKey : [String]列表的key的表达式，默认为key
listValue :[String]列表的value的表达式，默认为value
范例：
<ww:radio label="Sex" name="sex" list="{'Man','Woman'}"/>
3、checkboxlist标签
功能：多选标签
属性：
list : [Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。
listKey : [String]列表的key的表达式，默认为key
listValue : [String]列表的value的表达式，默认为value
范例：
<ww:checkboxlist label="City" name="city" list="#{1:'HHHT',2:'BJ',3:'TJ',4:'GZ'}"/>
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>Checkboxlist Example:</H2>
<ww:form action="checkboxlistAction.action" method="post">
<ww:checkboxlist label="City" name="city" list="#{1:'HHHT',2:'BJ',3:'TJ',4:'GZ'}"/>
<ww:checkboxlist label="Book" name="book" list="{'C','C++','C#','Java','J2SE','J2ME','J2EE','Spring','WebWork','EJB3'}"/>
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
CheckboxlistAction.java
package com.example;
import com.opensymphony.xwork.ActionSupport;
import java.util.*;
public class CheckboxlistAction extends ActionSupport{
private List city = new ArrayList();
private List book = new ArrayList();
public void setCity(List city){
this.city = city;
}
public void setBook(List book){
this.book = book;
}
public List getCity(){
return city;
}
public List getBook(){
return book;
}
public String execute() throws Exception{
return SUCCESS;
}
public void validate(){
if(city.size()==0)
addFieldError("city","Please select citys!");
if(book.size()==0)
addFieldError("book","Please select books!");
}
}
Res.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Res Page</title>
</head>
<body>
<H2>Checkboxlist Example:</H2>
City:
<ww:iterator value="city">
<ww:property/>
</ww:iterator>
<br>
Book:
<ww:iterator value="book">
<ww:property/>
</ww:iterator>
</body>
</html>
五、高级标签
1、label标签
功能：在表单中显示只读的参数。
属性：
label : label输出的标题，即在XHTML中输出到左边或上边的内容
范例：
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>Label and Hidden Example:</H2>
<ww:form action="labelAction.action" method="post">
<ww:textfield label="Name" name="username"/>
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
LabelAction.java
package com.example;
import com.opensymphony.xwork.ActionSupport;
public class LabelAction extends ActionSupport{
private String username;
public void setUsername(String username){
this.username = username;
}
public String getUsername(){
return username;
}
public String execute() throws Exception{
return SUCCESS;
}
}
res.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Res Page</title>
</head>
<body>
<H2>Label and Hidden Example:</H2>
<ww:label label="Your Name" name="username"/>
<ww:hidden name="username"/>
</body>
</html>
<ww:label label="Your Name" name="username"/>
2、hidden标签
功能：一个类型为"hidden"的INPUT标签
属性：通用属性
范例：
<ww:hidden name="username"/>
生成的HTML：
<input type="hidden" name="username" value="John" id="username"/>
3、doubleselect标签
功能：选项分组，该标签输出绑定在一起的两个select标签。
属性：
List : [Collection、Map、Array或Iterator]表达式，用来对用户在第一个下拉框要选择的选项列表求值。
listKey : [String]列表的key的表达式，默认为key
listValue : [String]列表的value的表达式，默认为value
doubleList : [Collection、Map、Array或Iterator]表达式，用来对用户在第二个下拉框要选择的选项列表求值。
doubleListKey: [String]列表的key的表达式，默认为key
doubleListValue :[String]列表的value的表达式，默认为value
doubleName : [String]用来映射到第二个下拉框的表单元素的名字
doubleValue : [Object]第二个下拉框的表单元素的值
headerKey : [String]如果用户选择了header选项，用来提交的值。只对第一个下拉框适用
headerValue : [String]用户看到的header选项的内容。只对第一个下拉框适用
emptyOption : [Boolean]设置为true时，一个空的选项会放在header选项和从列表中取出的选项之间。只对第一个下拉框适用
multiple : [Boolean]设置为true时，两个下拉框都允许用户选择多个值
size: [String]指定两个列表框的大小
范例：
***
4、combo box
功能：支持选择和手工输入的文本框
属性：
maxlength :[String]可以输入的最大长度
readonly : [Boolean]设置为true时，用户不能输入
size : [String]可视尺寸
list : [Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。
范例：
<ww:combobox label="City" name="city"
list="{'Huhehot','Baotou','Wuhai','ERDOS','Jining','Hailaer'}" labelposition="top" />
index.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<H2>Combo Box Example:</H2>
<ww:form action="comboboxAction.action" method="post">
<ww:combobox label="City" name="city" list="{'Huhehot','Baotou','Wuhai','ERDOS','Jining','Hailaer'}" labelposition="top" />
<ww:submit value="Submit"/>
</ww:form>
</body>
</html>
comboboxAction.java
package com.example;
import com.opensymphony.xwork.ActionSupport;
public class ComboboxAction extends ActionSupport{
private String city;
public void setCity(String city){
this.city = city;
}
public String getCity(){
return city;
}
public String execute() throws Exception{
return SUCCESS;
}
}
res.jsp
<%@ taglib prefix="ww" uri="webwork" %>
<html>
<head>
<title>Res Page</title>
</head>
<body>
<H2>Label and Hidden Example:</H2>
<ww:label label="You select the city is " name="city"/>
</body>
</html>
5、component标签
功能：提供一种建立自定义UI标签的方式。
六、其他常用高级标签
1、file
范例：
<ww:file label="File" name="anUploadFile" accept="text/*" />
2、date
范例：
<ww:bean name="java.util.Date" id="date"/> <ww:date name="date" format="yyyy-MM-dd"/>
3、actionmessage
<ww:actionmessage />
Render action messages if they exists
范例：
<ww:actionmessage />
<ww:form .... >
....
</ww:form>
4、fielderror
<ww:fielderror/>
Render field error (all or partial depending on param tag nested)if they exists
Examples
<!-- example 1 --> <ww:fielderror /> <!-- example 2 --> <ww:fielderror> <ww:param>field1</ww:param> <ww:param>field2</ww:param> </ww:fielderror> <ww:form .... > .... </ww:form>
OR
<ww:fielderror>
<ww:param value="%{'field1'}" />
<ww:param value="%{'field2'}" />
</ww:fielderror>
<ww:form .... >
....
</ww:form>
Description
Example 1: display all field errors
Example 2: display field errors only for 'field1' and 'field2'
5、actionerror
<ww:actionerror />
Render action errors if they exists
范例：
<ww:actionerror /> <ww:form .... > .... </ww:form>
6、optgroup
范例：
<ww:select label="My Selection" name="mySelection" value="%{'POPEYE'}" list="%{#{'SUPERMAN':'Superman', 'SPIDERMAN':'spiderman'}}">
<ww:optgroup label="Adult" list="%{#{'SOUTH_PARK':'South Park'}}" />
<ww:optgroup label="Japanese" list="%{#{'POKEMON':'pokemon','DIGIMON':'digimon','SAILORMOON':'Sailormoon'}}" />
</ww:select>
7、reset
Render a reset button
Render a reset button. The reset tag is used together with the form tag to provide form resetting. The reset can have two different types of rendering:
input: renders as html <input type="reset"...>
button: renders as html <button type="reset"...>
范例：
<ww:reset value="%{'Reset'}" />
Render an button reset:
<ww:reset type="button" value="%{'Reset'}" label="Reset the form"/>
8、submit
Render a submit button
Render a submit button. The submit tag is used together with the form tag to provide asynchronous form submissions. The submit can have three different types of rendering:
input: renders as html <input type="submit"...>
image: renders as html <input type="image"...>
button: renders as html <button type="submit"...>
范例：
<ww:submit value="%{'Submit'}" />
Render an image submit:
<ww:submit type="image" value="%{'Submit'}" label="Submit the form" src="submit.gif"/>
Render an button submit:
<ww:submit type="button" value="%{'Submit'}" label="Submit the form"/>
9、debug
Render debug tag
Renders an debug tag.
The debug information contain mostly stack information:
Value Stack Contents
Stack Context
范例：
<ww:debug/>
10、subset
Takes an iterator and outputs a subset of it
范例：
<!-- A: List basic -->
<ww:subset source="myList">
<ww:iterator>
<ww:property />
</ww:iterator>
</ww:subset>
<!-- B: List with count -->
<ww:subset source="myList" count="3">
<ww:iterator>
<ww:property />
</ww:iterator>
</ww:subset>
<!-- C: List with start -->
<ww:subset source="myList" count="13" start="3">
<ww:iterator>
<ww:property />
</ww:iterator>
</ww:subset>
11、head
Render a chunk of HEAD for your HTML file
Renders parts of the HEAD section for an HTML file. This is useful as some themes require certain CSS and JavaScript includes.
If, for example, your page has ajax components integrated, without having the default theme set to ajax, you might want to use the head tag with theme="ajax" so that the typical ajax header setup
will be included in the page.
The tag also includes the option to set a custom datepicker theme if needed. See calendarcss parameter for description for details.
If you use the ajax theme you can turn a debug flag on by setting the debug parameter to true.
范例：
<head> <title>My page</title> <ww:head/> </head>
<head> <title>My page</title> <ww:head theme="ajax" calendarcss="calendar-green"/> </head>
<head> <title>My page</title> <ww:head theme="ajax" debug="true"/> </head>
七、带有JavaScript程序的高级标签
在WebWork2.2.x中，使用带有JavaScript程序的标签时，需要将修改web.xml中的配置，即必须使用FilterDispatcher，用Filter才能得到resource,而且要匹配/*，在页面的head之间要有<ww:head/>，从而确保能够正确访问资源。
<filter>
<filter-name>webwork</filter-name>
<filter-class>com.opensymphony.webwork.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>webwork</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
1、datepicker
绘制日期选取器控件.
WebWork 2.2版本的实现使用jscalendar替换了不支持本地化的tigracalendar.如果在应用中使用了旧版本的控件,请检查地区和日期格式设置.如果不想让日历看起来是透明的,确保在页面中包含了下面列出的正确的样式表(stylesheet).
如果不在<ww:form />标签中使用时,一定要设置id属性,将选中的日期值复制到文本框元素时需要使用该属性.
format参数：
|
%a |
简写的星期名称 (三个英文,或一个中文) |
||
|
%A |
完整的星期名称 |
||
|
%b |
简写的月份名称 (三位的字母或中文数字) |
||
|
%B |
完整的月份名称 |
||
|
%C |
显示世纪 |
||
|
%d |
两位数的日期( 00 .. 31 ) |
||
|
%e |
日期 ( 0 .. 31 ) |
||
|
%H |
小时 ( 00 .. 23 ) |
||
|
%I |
小时 ( 01 .. 12 ) |
||
|
%j |
在一年中的天数序号( 000 .. 366 ) |
||
|
%k |
小时 ( 0 .. 23 ) |
||
|
%l |
小时 ( 1 .. 12 ) |
||
|
%m |
数字月份 ( 01 .. 12 ) |
||
|
%M |
分钟数 ( 00 .. 59 ) |
||
|
%n |
换行符 |
||
|
%p |
|