10WebWork UI标签.docx
- 文档编号:10499016
- 上传时间:2023-02-14
- 格式:DOCX
- 页数:39
- 大小:61.80KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 10WebWork UI标签 10 WebWork UI 标签
![提示](https://static.bdocx.com/images/bang_tan.gif)