描述

對于表單標簽,分為兩種標簽: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.

模板相關屬性

Javascript相關屬性

Tooltip 相關屬性

通用屬性

什么時候一些屬性不起作用(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的設置是這樣工作的:

1. 對于form,ID被設定為action的名字.在前一個例子中,ID會設置為"updatePerson".
2. 對于表單元素,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>標簽出現.

1. checkbox - 輸出一個復選框
2. checkboxlist - 輸出一個復選框列表
3. combobox - 輸出一個部件,可以從下拉框的內容填充一個文本框
4. datepicker - 輸出一個日期選擇不見,使用了 JavaScript 和 DOM
5. doubleselect - 輸出一個雙選下拉框部件,第二個下拉框依賴第一個
6. head - 輸出對應theme的HEAD部分的內容,例如 CSS 和 JavaScript 引用
7. file - 輸出一個文件選擇框
8. form - 輸出一個form(表單)
9. hidden - 輸出一個hidden表單字段
10. label - 輸出一個 label
11. optiontransferselect- 輸出一個選項移動下拉組件,主要是兩個下拉框和用來在兩個下拉框之間移動選項的按鈕.
12. password - 輸出一個密碼輸入框
13. radio - 輸出一個單選框
14. reset - 輸出一個reset表單按鈕
15. richtexteditor - 輸出一個富文本編輯器
16. select - 輸出一個下拉框
17. submit - 輸出一個submit按鈕
18. textarea - 輸出一個文本輸入區域(textarea)
19. textfield - 輸出一個文本輸入框
20. token - 輸出一個隱藏的字段來防止多次提交表單
21. updownselect - 輸出一個下拉框組件,帶有上下按鈕來移動下拉框組件的元素