描述
对于表单标签,分为两种标签:form标签自己,和全部来包装单个的表单元素的其余标签.form标签自己的行为不一样于它内部的元素,这是很重要的.在咱们为全部表单标签,包括form标签在内,提供一个参考手册以前,咱们必须先描述一些通用的属性.
表单标签 Themes
- 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 属性 |
| |
simple |
String |
html javascript 属性 |
| |
simple |
String |
html javascript 属性 |
| |
simple |
String |
html javascript 属性 |
| |
simple |
String |
html javascript 属性 |
| 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 - 输出一个下拉框组件,带有上下按钮来移动下拉框组件的元素
