WebWork2文档中文化计划 from表单

注意的地方：
struts.xml中使用通配符情况

<action name="*">
<result>/example/{1}.jsp</result>
</action>

此句的意思是，如果在没有找到匹配的action名称的情况下，默认调用action名称.jsp。第一句中星号指任意，而第二句中{1}指代第一句中星号指代的内容

描述

对于表单标签,分为两种标签: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的设置是这样工作的:

对于form,ID被设定为action的名字.在前一个例子中,ID会设置为"updatePerson".

对于表单元素,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>标签出现.

checkbox - 输出一个复选框

checkboxlist - 输出一个复选框列表

combobox - 输出一个部件,可以从下拉框的内容填充一个文本框

datepicker - 输出一个日期选择不见,使用了 JavaScript 和 DOM

doubleselect - 输出一个双选下拉框部件,第二个下拉框依赖第一个

head - 输出对应theme的HEAD部分的内容,例如 CSS 和 JavaScript 引用

file - 输出一个文件选择框

form - 输出一个form(表单)

hidden - 输出一个hidden表单字段

label - 输出一个 label

optiontransferselect- 输出一个选项移动下拉组件,主要是两个下拉框和用来在两个下拉框之间移动选项的按钮.

password - 输出一个密码输入框

radio - 输出一个单选框

reset - 输出一个reset表单按钮

richtexteditor - 输出一个富文本编辑器

select - 输出一个下拉框

submit - 输出一个submit按钮

textarea - 输出一个文本输入区域(textarea)

textfield - 输出一个文本输入框

token - 输出一个隐藏的字段来防止多次提交表单

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文档中文化计划)
[align=left][/align]
[align=left][/align]
[align=left][/align]

描述

输出一个HTML输入表单.
远程表单(remote form)允许不刷新页面提交表单.结果表单(results from)能在表单当前页插入任意的html元素.

属性

名称	必填	缺省值	类型	描述
onsubmit	false		Object/String	HTML onsubmit 属性
action	false	current action	Object/String	设置提交的action名字, 不需要 .action 后缀
target	false		Object/String	HTML表单target 属性
enctype	false		Object/String	HTML表单enctype 属性
method	false		Object/String	HTML表单method 属性
namespace	false	current namespace	Object/String	所提交Action的命名空间
validate	false	false	Boolean	是否执行客户端/远程校验. 使用xhtml/ajax或者继承它们的theme时有效
portletMode	false		Object/String	表单提交后显示的 portlet 模式
windowState	false		Object/String	表单提交后 要显示的window 的 state
openTemplate	false		Object/String	用来输出html开始部分的模板.
theme	false		Object/String	输出元素时使用的主题(theme)(不使用缺省的)
template	false		Object/String	输出元素时使用的模板(template)(不使用缺省的)
cssClass	false		Object/String	输出元素时的class属性
cssStyle	false		Object/String	输出元素时的css样式定义(译者注:html元素的style属性)
title	false		Object/String	在输出元素时设置html属性title
disabled	false		Object/String	在输出元素时设置html属性disabled
label	false		Object/String	用于输出一个元素对应的label的表达式
labelPosition	false	left	Object/String	不赞成使用.
labelposition	false		Object/String	定义元素标签的位置(top/left)
requiredposition	false		Object/String	定义required属性输出的位置(left|right)
name	false		Object/String	元素的名字
required	false	false	Boolean	如果设置为true, 在输出标签时将显示出此字段是必须输入的(译者注:如果使用默认模板,将会标示为"*")
tabindex	false		Object/String	在输出元素时设置html属性tabindex
value	false		Object/String	预设input元素的value属性.
onclick	false		Object/String	在输出元素时设置html属性onclick
ondblclick	false		Object/String	在输出元素时设置html属性ondblclick
onmousedown	false		Object/String	在输出元素时设置html属性onmousedown
onmouseup	false		Object/String	在输出元素时设置html属性onmouseup
onmouseover	false		Object/String	在输出元素时设置html属性onmouseover
onmousemove	false		Object/String	在输出元素时设置html属性onmousemove
onmouseout	false		Object/String	在输出元素时设置html属性onmouseout
onfocus	false		Object/String	在输出元素时设置html属性onfocus
onblur	false		Object/String	在输出元素时设置html属性onblur
onkeypress	false		Object/String	在输出元素时设置html属性onkeypress
onkeydown	false		Object/String	在输出元素时设置html属性onkeydown
onkeyup	false		Object/String	在输出元素时设置html属性onkeyup
onselect	false		Object/String	在输出元素时设置html属性onselect
onchange	false		Object/String	在输出元素时设置html属性onchange
tooltip	false		String	设置元素的tooltip属性(译者注:tooltip为工具栏提示)
tooltipConfig	false		String	设置tooltip属性的配置
id	false		Object/String	id是定位元素时使用的. 对于UI和表单标签它会被用作HTML的id属性

例子

<ww:form ... />

校验

有两种形式的 客户端校验 , 依赖于你对主题(theme)的设置(xhtml, ajax, 等等). 如果你设置为xhtml主题 或 css_xhtml主题 , 将会是纯客户端校验. 如果你设置为 ajax主题, 将会是基于AJAX的校验. 请阅读 客户端校验 文档获取更多信息.