10WebWork UI标签.docx

10WebWork UI标签.docx

《10WebWork UI标签.docx》由会员分享，可在线阅读，更多相关《10WebWork UI标签.docx（39页珍藏版）》请在冰豆网上搜索。

10WebWorkUI标签

WebWorkUI标签

一、UI标签概述

1、UI组件的组成

WebWork是不绑定视图技术的框架，可以使用JSP、Velocity、FreeMarker或者其他支持的方法来编写用户界面。

默认情况下，WebWork仅支持JSP标签的方法来调用UI标签。

WebWorkUI标签可以用任何模板语言编写。

●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

XHTMLtheme中使用的label，simpletheme会忽略

labelposition

XHTML

String

label元素的位置，top位于元素的上部，left位于元素的左边

required

XHTML

Boolean

如果为true，一个星号会显示在label的右边，表明这个字段是必填的，在默认情况下，如果一个字段级的校验器被映射到这个字段名，该值就为true

id

simple

String

HTMLid属性，允许简单地和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的值

范例：

checkboxlabel="IsFlag"name="flag"fieldValue="true"value="true"/>

index.jsp

<%@taglibprefix="ww"uri="webwork"%>

CheckBoxExample:

formaction="checkboxAction.action"method="post">

checkboxlabel="IsFlag"name="flag"fieldValue="true"value="true"/>

submitvalue="Submit"/>

form>

CheckboxAction.java

packagecom.example;

importcom.opensymphony.xwork.ActionSupport;

importcom.opensymphony.xwork.Preparable;

publicclassCheckboxActionextendsActionSupportimplementsPreparable{

privatebooleanflag=false;

privateStringmessage;

publicbooleangetFlag（）{

returnflag;

}

publicvoidsetFlag（booleanflag）{

this.flag=flag;

}

publicStringgetMessage（）{

returnmessage;

}

publicvoidprepare（）{

}

publicStringexecute（）throwsException{

if（flag）

message="Youhaveselectedthecheckbox!

";

else

message="Youhavenotselected!

";

returnSUCCESS;

}

}

res.jsp

<%@taglibprefix="ww"uri="webwork"%>

CheckBoxExample:

propertyvalue="message"/>

四、基于集合的标签

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：

selectlabel="City"name="city"list="{'Huhehot','Baotou','Beijing','Shanghai','Tianjin'}"/>

selectlabel="Sex"name="sex"list="#{1:

'Man',2:

'Woman'}"/>

selectlabel="Book"name="book"list="{'C','C++','C#','Java','J2ME','J2EE','Spring','WebWork','DWR'}"headerKey="0"headerValue="Pleaseselectabook"/>

selectlabel="Books"name="books"list="{'C','C++','C#','Java','J2ME','J2EE','Spring','WebWork','DWR'}"multiple="true"size="5"/>

selectlabel="Computer"name="computer"list="{'HP','IBM','SAMSUNG','LENOVO'}"emptyOption="true"/>

范例2：

index.jsp

<%@taglibprefix="ww"uri="webwork"%>

actionname="initSelectAction"executeResult="true"/>

InitSelectAction.java

packagecom.example;

importcom.opensymphony.xwork.ActionSupport;

importcom.opensymphony.xwork.Preparable;

importjava.util.*;

publicclassInitSelectActionextendsActionSupportimplementsPreparable{

privateDirectoryDAOdirectoryDAO;

privateListdirectoryList;

privateMapdirectoryMap;

publicvoidsetDirectoryDAO（DirectoryDAOdirectoryDAO）{

this.directoryDAO=directoryDAO;

}

publicListgetDirectoryList（）{

returndirectoryList;

}

publicMapgetDirectoryMap（）{

returndirectoryMap;

}

publicvoidprepare（）{

directoryList=directoryDAO.getAllDirectory（）;

directoryMap=directoryDAO.getAllMapdirectory（）;

}

publicStringexecute（）throwsException{

returnSUCCESS;

}

}

select.jsp

<%@taglibprefix="ww"uri="webwork"%>

SelectExample:

formaction="selectAction.action"method="post">

selectlabel="City1"name="city1"list="directoryList"listKey="content"listValue="content"/>

selectlabel="City2"name="city2"list="directoryMap"/>

submitvalue="Submit"/>

form>

范例3：

index.jsp

<%@taglibprefix="ww"uri="webwork"%>

MulSelectExample:

formaction="mulSelectAction.action"method="post">

selectlabel="City"name="city"list="#{1:

'HHHT',2:

'BJ',3:

'TJ',4:

'GZ'}"multiple="true"/>

selectlabel="Book"name="book"list="{'C','C++','C#','Java','J2SE','J2ME','J2EE','Spring','WebWork','EJB3'}"multiple="true"/>

submitvalue="Submit"/>

form>

MulSelectAction.java

packagecom.example;

importcom.opensymphony.xwork.ActionSupport;

importjava.util.*;

publicclassMulSelectActionextendsActionSupport{

privateListcity=newArrayList（）;

privateListbook=newArrayList（）;

publicvoidsetCity（Listcity）{

this.city=city;

}

publicvoidsetBook（Listbook）{

this.book=book;

}

publicListgetCity（）{

returncity;

}

publicListgetBook（）{

returnbook;

}

publicStringexecute（）throwsException{

returnSUCCESS;

}

publicvoidvalidate（）{

if（city.size（）==0）

addFieldError（"city","Pleaseselectcitys!

"）;

if（book.size（）==0）

addFieldError（"book","Pleaseselectbooks!

"）;

}

}

res.jsp

<%@taglibprefix="ww"uri="webwork"%>

MulSelectExample:

City:

iteratorvalue="city">

property/>

iterator>

Book:

iteratorvalue="book">

property/>

iterator>

2、radio标签

功能：

单选按钮

属性：

●list

[Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。

●listKey

[String]列表的key的表达式，默认为key

●listValue

[String]列表的value的表达式，默认为value

范例：

radiolabel="Sex"name="sex"list="{'Man','Woman'}"/>

3、checkboxlist标签

功能：

多选标签

属性：

●list

[Collection、Map、Array或Iterator]表达式，用来对用户要选择的选项列表求值。

●listKey

[String]列表的key的表达式，默认为key

●listValue

[String]列表的value的表达式，默认为value

范例：

checkboxlistlabel="City"name="city"list="#{1:

'HHHT',2:

'BJ',3:

'TJ',4:

'GZ'}"/>

index.jsp

<%@taglibprefix="ww"uri="webwork"%>

CheckboxlistExample:

formaction="checkboxlistAction.action"method="post">

checkboxlistlabel="City"name="city"list="#{1:

'HHHT',2:

'BJ',3:

'TJ',4:

'GZ'}"/>

checkboxlistlabel="Book"name="book"list="{'C','C++','C#','Java','J2SE','J2ME','J2EE','Spring','WebWork','EJB3'}"/>

submitvalue="Submit"/>

form>

CheckboxlistAction.java

packagecom.example;

importcom.opensymphony.xwork.ActionSupport;

importjava.util.*;

publicclassCheckboxlistActionextendsActionSupport{

privateListcity=newArrayList（）;

privateListbook=newArrayList（）;

publicvoidsetCity（Listcity）{

this.city=city;

}

publicvoidsetBook（Listbook）{

this.book=book;

}

publicListgetCity（）{

returncity;

}

publicListgetBook（）{

returnbook;

}

publicStringexecute（）throwsException{

returnSUCCESS;

}

publicvoidvalidate（）{

if（city.size（）==0）

addFieldError（"city","Pleaseselectcitys!

"）;

if（book.size（）==0）

addFieldError（"book","Pleaseselectbooks!

"）;

}

}

Res.jsp

<%@taglibprefix="ww"uri="webwork"%>

CheckboxlistExample:

City:

iteratorvalue="city">

property/>

iterator>

Book:

iteratorvalue="book">

property/>

iterator>

五、高级标签

1、label标签

功能：

在表单中显示只读的参数。

属性：

●label

label输出的标题，即在XHTML中输出到左边或上边的内容

范例：

index.jsp

<%@taglibprefix="ww"uri="webwork"%>

LabelandHiddenExample:

formaction="labelAction.action"method="post">

textfieldlabel="Name"name="username"/>

submitvalue="Submit"/>

form>

LabelAction.java

packagecom.example;

importcom.opensymphony.xwork.ActionSupport;

publicclassLabelActionextendsActionSupport{

privat