描述

對(duì)于表單標(biāo)簽,分為兩種標(biāo)簽:form標(biāo)簽本身,和所有來包裝單個(gè)的表單元素的其他標(biāo)簽.form標(biāo)簽本身的行為不同于它內(nèi)部的元素,這是很重要的.在我們?yōu)樗斜韱螛?biāo)簽,包括form標(biāo)簽在內(nèi),提供一個(gè)參考手冊(cè)之前,我們必須先描述一些通用的屬性.

請(qǐng)確認(rèn)你已經(jīng)讀過了 Tag Syntax 文檔 并且理解標(biāo)簽的屬性語法是如何工作的.

表單標(biāo)簽 Themes

就像前面我們?cè)?a title="Themes and Templates" >Themes and Templates里面提到的,HTML標(biāo)簽(包括表單標(biāo)簽)都是模板驅(qū)動(dòng)的.模板按照form的theme分組.WebWork缺省提供了三種theme:

• simple
• xhtml, 擴(kuò)展了 simple (缺省theme)
• ajax, 擴(kuò)展了 xhtml

記住: xhtml theme 輸出兩列表格. 如果你需要不同的布局,我們強(qiáng)烈推薦你 不要 編寫自己的HTML,而是創(chuàng)建自己的theme或者利用simple theme.

使用simple theme的缺點(diǎn)就是它不支持其他theme那么多的屬性.例如.label屬性在simple theme里沒有任何用處.類似的,simple theme提供的功能也遠(yuǎn)遠(yuǎn)少于xhtml和ajax theme提供的:自動(dòng)顯示錯(cuò)誤信息就不被支持.

通用屬性

所有表單標(biāo)簽擴(kuò)展了 UIBean 類.這個(gè)基類有一些通用屬性,分為三種:模板相關(guān)的,javascript相關(guān)的和通用屬性.我們不會(huì)在這里說明這些屬性,而是維護(hù)每個(gè)標(biāo)簽的參考.然而,熟悉UI標(biāo)簽的結(jié)構(gòu)以及那些屬性對(duì)所有標(biāo)簽是可用的,也不失為一個(gè)好主意.

除了這些屬性之外,對(duì)于所有表單元素標(biāo)簽存在一個(gè)特殊的屬性: form(例如: ${parameters.form}). 這代表輸出form標(biāo)簽的參數(shù),并且允許你在你的表單元素和表單(form)本身之間進(jìn)行交互.例如,在一個(gè)模板里,你可以通過 ${parameters.form.id} 訪問form的ID.

模板相關(guān)屬性

Javascript相關(guān)屬性

Tooltip 相關(guān)屬性

通用屬性

什么時(shí)候一些屬性不起作用(When Some Attributes Don't Apply)

注意有一些標(biāo)簽有一些任何模板都沒有使用的屬性,可能是沒有意義或者是不需要.例如,form標(biāo)簽,支持 tableindex 屬性,但是沒有一個(gè)theme能輸出它.同時(shí),就像前面提到的,特定的theme不會(huì)利用一些屬性.

Value/Name 的關(guān)系

在很多標(biāo)簽里,除了form標(biāo)簽,在 name 和 value 屬性之間存在一個(gè)獨(dú)特的關(guān)系. name 屬性用于得到表單元素的名字以及提交時(shí)用到.實(shí)際上它也是你希望綁定值的表達(dá)式.在大多數(shù)情況下,它是一個(gè)簡單的JavaBean屬性,例如 "firstName".這會(huì)最終調(diào)用setFirstName.

類似的,你經(jīng)常也希望在你的表單元素里顯示相同的JavaBean屬性的已經(jīng)存在的數(shù)據(jù).現(xiàn)在, value 屬性派上了用場(chǎng). 一個(gè) "%{firstName}"會(huì)調(diào)用getFirstName來在你的表單里顯示它,允許用戶編輯這個(gè)值并重新提交它.

你可以使用下面的代碼,它會(huì)工作的很好:

<@ww.form action="updatePerson">
                        <@ww.textfield label="First name" name="firstName" value="%{firstName}"/>
                        ...
                        </@ww.form>

然而,因?yàn)?name 和 value 的關(guān)系經(jīng)常是可預(yù)知的,我們會(huì)自動(dòng)為你處理這些,這樣做就可以:

<@ww.form action="updatePerson">
                        <@ww.textfield label="First name" name="firstName"/>
                        ...
                        </@ww.form>

大多數(shù)的屬性直接使用和屬性相同的key暴露給底層的模板,(例如 ${parameters.label}) , value 屬性不是這樣的. 相反,它可以通過 "nameValue" 主鍵來訪問 (例如 ${parameters.nameValue} ) ,這表示它可能從 name 屬性或者是明確地使用 value 屬性定義來生成的.

ID Name 設(shè)置

所有的表單標(biāo)簽自動(dòng)為你設(shè)置一個(gè) ID. 你可以自由地按照你希望的那樣覆蓋這個(gè)值. ID的設(shè)置是這樣工作的:

1. 對(duì)于form,ID被設(shè)定為action的名字.在前一個(gè)例子中,ID會(huì)設(shè)置為"updatePerson".
2. 對(duì)于表單元素,ID為設(shè)定為 [form's ID]_[element name]

Required 屬性

在很多WebWork UI標(biāo)簽上的"required" 屬性只有當(dāng)你開啟了客戶端校驗(yàn)并且有一個(gè)校驗(yàn)器和特定字段關(guān)聯(lián)時(shí)缺省才是true.

Tooltip(工具提示)

每個(gè)Form UI組件 (在xhtml/css_xhtml或者其他擴(kuò)展了它們的theme里) 可以有設(shè)置給它們的tooltip.Form組件的tooltip相關(guān)的屬性一旦定義就會(huì)設(shè)置給所以在它內(nèi)部創(chuàng)建的表單UI組件,除非表單元素組件自己明確地在tooltip屬性里設(shè)定來覆蓋.

在例子1中,textfield會(huì)從包含它的form中繼承 tooltipAboveMousePointer 屬性.換句話說,盡管它沒有定義一個(gè) tooltipAboveMousePointer 屬性,它會(huì)從包含它的form的屬性中繼承過來定義為true的屬性.

在例子2中,textfield會(huì)從包含它的form繼承tooltipAboveMousePointer 和 tooltipLeftOfMousePointer 屬性,但是tooltipLeftOfMousePointer 被textfield自己的屬性覆蓋了.因此,textfield實(shí)際上會(huì)有一個(gè)為定義為true的tooltipAboveMousePointer 屬性,從包含它的form中繼承而來,具有一個(gè)定義為false的tooltipLeftOfMousePointer 屬性,因?yàn)閠extfield自己覆蓋了這個(gè)定義.

例子 3, 4 和5 顯示了不同的設(shè)置tooltipConfig屬性的方法.

• 例子 3:通過param標(biāo)簽的標(biāo)簽體(body)設(shè)置 tooltip配置.
• 例子 4:通過param標(biāo)簽的value屬性來設(shè)置tooltip配置
• 例子 5:通過component標(biāo)簽的tooltipConfig屬性來設(shè)置 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'}" />

表單標(biāo)簽參考手冊(cè)

有一點(diǎn)很重要值得注意,所有的插入某些內(nèi)容到valuestack里的標(biāo)簽(例如i18n或者bean標(biāo)簽)會(huì)在標(biāo)簽結(jié)束時(shí)移除這些對(duì)象.這意味著如果你實(shí)例化了一個(gè)bean使用bean標(biāo)簽 (<ww:bean name="'br.univap.fcc.sgpw.util.FormattersHelper'">) ,這個(gè)bean會(huì)一直在valuestack里可以使用,直到</ww:bean>標(biāo)簽出現(xiàn).

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