描述
對於表單標籤,分爲兩種標籤: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 - 輸出一個下拉框組件,帶有上下按鈕來移動下拉框組件的元素
