struts2表单标签

  <script language="JavaScript" type="text/javascript"> function showBreadcrumbsEllipsis() { document.getElementById('breadcrumbsEllipsis').style.display = 'none'; document.getElementById('breadcrumbsExpansion').style.display = 'inline'; } </script> Dashboard > WebWork2文档中文化计划 > Tags > Form Tags

	WebWork2文档中文化计划	Log In
Form Tags

<!----><!---->

 Browse Space

• View
• Info

Added by scud, last edited by yangkaifeng on May 21, 2006  (view change) <style type="text/css"> div.auto_complete { width: 350px; background: #fff; } div.auto_complete ul { border: 1px solid #888; margin: 0; padding: 0; width: 100%; list-style-type: none; } div.auto_complete ul li { margin: 0; padding: 3px; } div.auto_complete ul li.selected { background-color: #ffb; } div.auto_complete ul strong.highlight { color: #800; margin: 0; padding: 0; } </style><!----><!----> <script language="JavaScript" type="text/javascript"> function doAddLabel(hideTextfieldAfterAddParam) { // stub } function onAddLabel() { // stub } function showLabelsInput() { // stub } </script> <!---->

Labels: 

(None)

<!---->

Add Labels
Enter labels to add to this page: Tip: Looking for a label? Just start typing.

<script type="text/javascript"> // if there is javascript support, enable the [Edit] link that enables AJAX label adding/removing functionality if (document.getElementById('editLabelsLink')) { document.getElementById('editLabelsLink').style.display = 'inline'; } </script>

<!---->

描述

对于表单标签,分为两种标签:form标签本身,和所有来包装单个的表单元素的其他标签.form标签本身的行为不同于它内部的元素,这是很重要的.在我们为所有表单标签,包括form标签在内,提供一个参考手册之前,我们必须先描述一些通用的属性.

请确认你已经读过了 Tag Syntax 文档 并且理解标签的属性语法是如何工作的.

表单标签 Themes

就像前面我们在Themes and Templates里面提到的,HTML标签(包括表单标签)都是模板驱动的.模板按照form的theme分组.WebWork缺省提供了三种theme:

• simple
• xhtml, 扩展了 simple (缺省theme)
• ajax, 扩展了 xhtml

记住: xhtml theme 输出两列表格. 如果你需要不同的布局,我们强烈推荐你 不要 编写自己的HTML,而是创建自己的theme或者利用simple theme.

使用simple theme的缺点就是它不支持其他theme那么多的属性.例如.label属性在simple theme里没有任何用处.类似的,simple theme提供的功能也远远少于xhtml和ajax theme提供的:自动显示错误信息就不被支持.

通用属性

所有表单标签扩展了 UIBean 类.这个基类有一些通用属性,分为三种:模板相关的,javascript相关的和通用属性.我们不会在这里说明这些属性,而是维护每个标签的参考.然而,熟悉UI标签的结构以及那些属性对所有标签是可用的,也不失为一个好主意.

除了这些属性之外,对于所有表单元素标签存在一个特殊的属性: form(例如: ${parameters.form}). 这代表输出form标签的参数,并且允许你在你的表单元素和表单(form)本身之间进行交互.例如,在一个模板里,你可以通过 ${parameters.form.id} 访问form的ID.

模板相关属性

属性 Theme 数据类型 描述

templateDir	n/a	String	定义模板目录
theme	n/a	String	定义theme名称
template	n/a	String	定义模板名称

Javascript相关属性

属性 Theme 数据类型 描述

onclick	simple	String	html javascript onclick 属性
ondbclick	simple	String	html javascript ondbclick 属性
onmousedown	simple	String	html javascript onmousedown 属性
onmouseup	simple	String	html javascript onmouseup 属性
onmouseover	simple	String	html javascript onmouseover 属性
onmouseout	simple	String	html javascript onmouseout 属性
onfocus	simple	String	html javascript onfocus 属性
onblur	simple	String	html javascript onblur 属性
onkeypress	simple	String	html javascript onkeypress 属性
onkeyup	simple	String	html javascript onkeyup 属性
onkeydown	simple	String	html javascript onkeydown 属性
onselect	simple	String	html javascript onselect 属性
onchange	simple	String	html javascript onchange 属性

Tooltip 相关属性

属性 数据类型 缺省值 描述

tooltip	String	none	设置此组件的tooltip
tooltipIcon	String	/webwork/static/tooltip/tooltip.gif	tooltip图标的url
tooltipAboveMousePointer	Boolean	false	在鼠标光标位置上放置tooltip.另外设置 tooltipOffseY 允许你设置从鼠标光标位置的垂直位移.
tooltipBgColor	String	#e6ecff	tooltip的背景色.
tooltipBgImg	String	none	背景图片.
tooltipBorderWidth	String	1	tooltip边框的宽度.
tooltipBorderColor	String	#003399	tooltip边框的背景色
tooltipDelay	String	500	显示Tooltip的时间延迟(毫秒). 类似基于操作系统的tooltip的行为.
tooltipFixCoordinateX	String	not specified	固定tooltip在指定的X坐标上.例如和tooltipSticky属性结合时很有用.
tooltipFixCoordinateY	String	not specified	固定tooltip在指定的Y坐标上.例如和tooltipSticky属性结合时很有用.
tooltipFontColor	String	#000066	字体颜色.
tooltipFontFace	String	arial,helvetica,sans-serif	字体,例如 verdana,geneva,sans-serif
tooltipFontSize	String	11px	字体大小,例如 30px
tooltipFontWeight	String	normal	Font weight. 可以是 normal 或者 bold
tooltipLeftOfMousePointer	Boolean	false	在鼠标光标位置左侧的Tooltip位置
tooltipOffsetX	String	12	相对鼠标光标位置的水平位移.
tooltipOffsetY	String	15	相对鼠标光标位置的垂直位移.
tooltipOpacity	String	100	tooltip的透明度. 不透明度是行对透明度而言的.设置的值必须是一个介于0(完全透明)和100(不透明)之间的数字.Opera尚未支持.
tooltipPadding	String	3	内部间隔,例如,边框和内容之间的空格,例如文字或者图片
tooltipShadowColor	String	#cccccc	使用指定的颜色创建阴影.
tooltipShadowWidth	String	5	使用指定的宽度(距离)创建阴影.
tooltipStatic	Boolean	false	就像基于操作系统的tooltip, tooltip不随着鼠标光标移动而移动.
tooltipSticky	Boolean	false	tooltip一直停留在它初始的位置,直到另外一个tooltip被激活,或者用户点击了文档.
tooltipStayAppearTime	String	0	指定一个tooltip消失的时间间隔(毫秒),即时鼠标还在相关的HTML元素上不懂,设置<=0,就和没有定义一样.
tooltipTextAlign	String	left	调整包括标题和tooltip内容的文字位置.可以是right, left 或 justify
tooltipTitle	String	none	标题
tooltipTitleColor	String	#ffffff	title文字的颜色
tooltipWidth	String	300	tooltip的宽度

通用属性

属性 Theme 数据类型 描述

cssClass	simple	String	定义 html class 属性
cssStyle	simple	String	定义html style 属性
title	simple	String	定义html title 属性
disabled	simple	String	定义html disabled 属性
label	xhtml	String	定义表单元素的label
labelPosition	xhtml	String	定义表单元素的label位置(top/left),缺省为left
requiredposition	xhtml	String	定义required 标识相对label元素的位置 (left/right),缺省是 right
name	simple	String	表单元素的name映射
required	xhtml	Boolean	在label中添加 * (true增加,否则不增加)
tabIndex	simple	String	定义html tabindex 属性
value	simple	Object	定义表单元素的value

 

什么时候一些属性不起作用(When Some Attributes Don't Apply)

注意有一些标签有一些任何模板都没有使用的属性,可能是没有意义或者是不需要.例如,form标签,支持 tableindex 属性,但是没有一个theme能输出它.同时,就像前面提到的,特定的theme不会利用一些属性.

Value/Name 的关系

在很多标签里,除了form标签,在 name 和 value 属性之间存在一个独特的关系. name 属性用于得到表单元素的名字以及提交时用到.实际上它也是你希望绑定值的表达式.在大多数情况下,它是一个简单的JavaBean属性,例如 "firstName".这会最终调用setFirstName.

类似的,你经常也希望在你的表单元素里显示相同的JavaBean属性的已经存在的数据.现在, value 属性派上了用场. 一个 "%{firstName}"会调用getFirstName来在你的表单里显示它,允许用户编辑这个值并重新提交它.

你可以使用下面的代码,它会工作的很好:

<@ww.form action="updatePerson">                        <@ww.textfield label="First name" name="firstName" value="%{firstName}"/>                        ...                        </@ww.form>

然而,因为 name 和 value 的关系经常是可预知的,我们会自动为你处理这些,这样做就可以:

<@ww.form action="updatePerson">                        <@ww.textfield label="First name" name="firstName"/>                        ...                        </@ww.form>

大多数的属性直接使用和属性相同的key暴露给底层的模板,(例如 ${parameters.label}) , value 属性不是这样的. 相反,它可以通过 "nameValue" 主键来访问 (例如 ${parameters.nameValue} ) ,这表示它可能从 name 属性或者是明确地使用 value 属性定义来生成的.

ID Name 设置

所有的表单标签自动为你设置一个 ID. 你可以自由地按照你希望的那样覆盖这个值. ID的设置是这样工作的:

1. 对于form,ID被设定为action的名字.在前一个例子中,ID会设置为"updatePerson".
2. 对于表单元素,ID为设定为 [form's ID]_[element name]

Required 属性

在很多WebWork UI标签上的"required" 属性只有当你开启了客户端校验并且有一个校验器和特定字段关联时缺省才是true.

Tooltip(工具提示)

每个Form UI组件 (在xhtml/css_xhtml或者其他扩展了它们的theme里) 可以有设置给它们的tooltip.Form组件的tooltip相关的属性一旦定义就会设置给所以在它内部创建的表单UI组件,除非表单元素组件自己明确地在tooltip属性里设定来覆盖.

在例子1中,textfield会从包含它的form中继承 tooltipAboveMousePointer 属性.换句话说,尽管它没有定义一个 tooltipAboveMousePointer 属性,它会从包含它的form的属性中继承过来定义为true的属性.

在例子2中,textfield会从包含它的form继承tooltipAboveMousePointer 和 tooltipLeftOfMousePointer 属性,但是tooltipLeftOfMousePointer 被textfield自己的属性覆盖了.因此,textfield实际上会有一个为定义为true的tooltipAboveMousePointer 属性,从包含它的form中继承而来,具有一个定义为false的tooltipLeftOfMousePointer 属性,因为textfield自己覆盖了这个定义.

例子 3, 4 和5 显示了不同的设置tooltipConfig属性的方法.

• 例子 3:通过param标签的标签体(body)设置 tooltip配置.
• 例子 4:通过param标签的value属性来设置tooltip配置
• 例子 5:通过component标签的tooltipConfig属性来设置 tooltip 配置

例子1

<ww:form                        tooltipConfig="#{'tooltipAboveMousePointer':'true',                        'tooltipBgColor='#eeeeee'}" .... >                        ....                        <ww:textfield label="Customer Name" tooltip="Enter the customer name" .... />                        ....                        </ww:form>

例子2

<ww:form                        tooltipConfig="#{'tooltipAboveMousePointer':'true',                        'tooltipLeftOfMousePointer':'true'}" ... >                        ....                        <ww:textfield label="Address"                        tooltip="Enter your address"                        tooltipConfig="#{'tooltipLeftOfMousePointer':'false'}" />                        ....                        </ww:form>

例子3

<ww:textfield                        label="Customer Name"                        tooltip="One of our customer Details'">                        <ww:param name="tooltipConfig">                        tooltipWidth = 150 |                        tooltipAboveMousePointer = false |                        tooltipLeftOfMousePointer = false                        </ww:param>                        </ww:textfield>

例子4

<ww:textfield                        label="Customer Address"                        tooltip="Enter The Customer Address" >                        <ww:param                        name="tooltipConfig"                        value="#{'tooltipStatic':'true',                        'tooltipSticky':'true',                        'tooltipAboveMousePointer':'false',                        'tooltipLeftOfMousePointer':'false'}"  />                        </ww:textfield>

例子5

<ww:textfield                        label="Customer Telephone Number"                        tooltip="Enter customer Telephone Number"                        tooltipConfig="#{'tooltipBgColor':'#cccccc',                        'tooltipFontColor':'#eeeeee',                        'tooltipAboveMousePointer':'false',                        'tooltipLeftOfMousePointer':'false'}" />

表单标签参考手册

有一点很重要值得注意,所有的插入某些内容到valuestack里的标签(例如i18n或者bean标签)会在标签结束时移除这些对象.这意味着如果你实例化了一个bean使用bean标签 (<ww:bean name="'br.univap.fcc.sgpw.util.FormattersHelper'">) ,这个bean会一直在valuestack里可以使用,直到</ww:bean>标签出现.

1. checkbox - 输出一个复选框
2. checkboxlist - 输出一个复选框列表
3. combobox - 输出一个部件,可以从下拉框的内容填充一个文本框
4. datepicker - 输出一个日期选择不见,使用了 JavaScript 和 DOM
5. doubleselect - 输出一个双选下拉框部件,第二个下拉框依赖第一个
6. head - 输出对应theme的HEAD部分的内容,例如 CSS 和 JavaScript 引用
7. file - 输出一个文件选择框
8. form - 输出一个form(表单)
9. hidden - 输出一个hidden表单字段
10. label - 输出一个 label
11. optiontransferselect- 输出一个选项移动下拉组件,主要是两个下拉框和用来在两个下拉框之间移动选项的按钮.
12. password - 输出一个密码输入框
13. radio - 输出一个单选框
14. reset - 输出一个reset表单按钮
15. richtexteditor - 输出一个富文本编辑器
16. select - 输出一个下拉框
17. submit - 输出一个submit按钮
18. textarea - 输出一个文本输入区域(textarea)
19. textfield - 输出一个文本输入框
20. token - 输出一个隐藏的字段来防止多次提交表单
21. updownselect - 输出一个下拉框组件,带有上下按钮来移动下拉框组件的元素

<!---->

Children   Hide Children | View in hierarchy

checkbox (WebWork2文档中文化计划)
checkboxlist (WebWork2文档中文化计划)
combobox (WebWork2文档中文化计划)
datepicker (WebWork2文档中文化计划)
doubleselect (WebWork2文档中文化计划)
file (WebWork2文档中文化计划)
form (WebWork2文档中文化计划)
head (WebWork2文档中文化计划)
hidden (WebWork2文档中文化计划)
label (WebWork2文档中文化计划)
optiontransferselect (WebWork2文档中文化计划)
password (WebWork2文档中文化计划)
radio (WebWork2文档中文化计划)
reset (WebWork2文档中文化计划)
richtexteditor (WebWork2文档中文化计划)
select (WebWork2文档中文化计划)
submit (WebWork2文档中文化计划)
textarea (WebWork2文档中文化计划)
textfield (WebWork2文档中文化计划)
token (WebWork2文档中文化计划)
updownselect (WebWork2文档中文化计划)

<!----><!---->

<!---->