描述
对于表单标签,分为两种标签: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 - 输出一个下拉框组件,带有上下按钮来移动下拉框组件的元素
