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