2009年7月16日 星期四

[Struts2] Simple UI Tags

之前我們介紹了一些 tags,主要都是輔助 programmers 完成頁面上資料的存取,在這裡我將開始描述關於顯示在頁面上與使用者互動的表單 (form)。不過,我先簡介一些共同有的 attributes,因為這些 attributes 如果在介紹 tag 時重複敘述,感覺過於累贅!

共同 attributes

共同的 attributes 就是所有的 tags 都會擁有的,為了之後將重點放在各個 tags 上,我們就將這些 attributes 分開來介紹,這裡要注意的是,如果某個 attribute 的 type 屬於 String,那就表示該 attribute 的 value 只能接受字串,如果想要將 OGNL expression language 寫入,就必須在 expression 加上 %{} 符號 - %{ expression } - 這樣 Struts2 framework 就可以正確解析 OGNL 了!如果該 type 屬於 Object,那你就可以大方的將 OGNL expression 置入,無須加上 %{} 符號了!

































































AttributeTypeDescription
nameString用來設定 form 元件,並且會依照 name 所設定的值,將其對應到 Action 中的 property
valueObject用來設定 form 元件中所包含的值
keyStringi18n 用
labelString設定某個 form 元件顯示的字串
labelpositionString設定 label 顯示的位置:left 或 top
requiredBoolean如果設定為 true,則該 form 元件的 label 會出現 * 符號
idString相同於 HTML 的 id 屬性,通常用於 java script 與 CSS
cssClassString相同於 HTML 的 css 屬性
cssStyleString相同於 HTML 的 style 屬性
disabledBoolean相同於 HTML 的 disabled 屬性
tabindexString相同於 HTML 的 tabindex 屬性


Simple UI tags


上面描述的是共同的 attribute,以下將介紹一些 UI 相關並基礎的 tags,對於共同的 attribute 就不會重複提及。

1) Head Tag
對於任何的 HTML 或 JSP 來說,要產生一個網頁通常都是以 <head> 開頭,對於 Struts2 提供的 <head> 來說,卻不同於一般的 HTML head tag,如果你試過 Struts2 提供的 head tag,你應該會發現,tag 本身並不作任何事情,而是在網頁中默默的幫我們加入一些檔案連結,這些檔案的連結目的在於支援其他的 tag 完成設定。在使用 Struts2 提供的 head tag 時,一定要放置於 HTML 的 head tag 之下,否則自動產生的檔案連結會放到不正確的位置而導致無法使用某些功能!
Struts 的 head tag 本身並沒有其他的 attribute 需要設定,我們可以簡單的使用:

<s:head />

這樣的撰寫就會自動幫我們產生一些檔案的連結。

2) Form Tag
Form tag 對於 UI 來說是最重要的 tag,因為他是所有 UI tag 的上層元件,如果對於 HTML 熟悉的話,form tag 的使用應該不會陌生,而且我們之前就看過蠻多的範例了!下表是一些 form tag 的 attributes (除了共同 attributes 之外):









































AttributeTypeDescription
actionString指定該 form 送出的目標 Action
namespaceString目標 Action 的 namespace,預設值是目前的 namespace
methodString相同於 HTML 的 method attribute,預設值是 POST
targetString相同於 HTML 的 target attribute
enctypeString若要使用檔案上傳,則填入 multipart/form-data
validateBoolean設定該 form 是否使用 javascript 驗證,當使用 Validation Framework 時,此 attribute 要設定為 true,驗證功能才能正常運作

在上述眾多 attributes 中,最重要的莫過於 action 了!因為他主導整個 form 的目標 action,在這裡設定 action attribute 時要注意,我們無須填入 .action 的縮寫,因為 form 元件會幫我們完成,如果目標的 action 與現在是相同的 namespace,我們就無須填寫 namespace,否則我們就需要 namespace attribute 幫助我們找到 Action。每當 form 元件被執行時會有以下三種可能發生的狀況:
  1. 如果 action attribute 沒有被設定,則 form 的目標就會指向目前的 Action
  2. 如果有指定 action attribute,form 就會根據 Action 的位置配合上 namespace 來設定目標。如果 namespace 沒有被指定,就會使用目前的 namespace。當我們在設定 action attribute 時,我們無須加上 .action 的延伸網址
  3. 如果 action attribute 所指定的值不屬於一個 Action,form 元件的目標就會直接將該值作為目標。這種情況下,我們就需要自己加上延伸網址 (如:.jsp, .html 等),並且我們的相對位址需要以 / 作為開頭,例如:/myApp/b.jsp。另外要注意的是,如果我們採用此種方法,即使我們指定 namespace attribute,form 元件也會自動忽略!
3) Textfield Tag
這個 tag 對於你來說也是無可避免的!因為沒有此 tag,你就無法取得使用者的資料,所以這個 tag 也算是最常使用的!不過要注意的是 textfield tag 的 name 與 value attribute,一般來說,我們無需要指定 value attribute,因為我們只需要指定 name attribute 讓 OGNL 幫我們去 ActionContext 中取得對應的值來填入,當然,我們也可以填寫 value attribute,但是要注意的是,如果我們自己有填寫 value attribute,那 name 指定的 OGNL 所取到的值就不會顯示在 textfield tag 上了,這點要注意喔!以下是一些 textfield tag 的 attributes:


























AttributeTypeDescription
maxlengthString指定 textfield 的可輸入最大長度
readonlyBoolean如果設定為 true,則該 textfield 就無法輸入字串
sizeStringtextfield 的長度

4) Password Tag
這個 tag 跟 textfield 幾乎是一樣的,不過當使用者輸入字串時,所有的文字都會被包裝成其他的符號,以防資料外洩!這個 tag 的使用其實跟 textfield 是相同的,所以我就不多說了!以下是 password tag 的 attributes:































AttributeTypeDescription
maxlengthString指定 textfield 的可輸入最大長度
readonlyBoolean如果設定為 true,則該 textfield 就無法輸入字串
sizeStringtextfield 的長度
showPasswordBololean使否將 OGNL 取到的值顯示在 value 中,預設 false

上面列出的 attributes 中,幾乎跟 textfield 是一樣的,不過多了一個 showPassword attribute,這個 attribute 是讓我們設定是否要將 name attribute 中指定的 OGNL 取到的值顯示,在這裡我所謂的顯示不是大剌剌的用文字方式顯示,當然是有被遮蔽的顯示,不過從原始碼中還是可以看到原來的值,所以 showPassword attribute 預設值為 false,為的就是不要產生一些 security issues 來困擾 programmers,在這裡我也建議你不要將此 attribute 設定為 true!

5) Textarea Tag
同樣的,textarea 從開發角度上來說,與 textfield 並沒有太大的差別,主要就是提供使用者多行的輸入欄位!以下就是一些 textarea tag 的 attributes:































AttributeTypeDescription
colsInteger指定 textarea 的行數
rowsInteger指定 textarea 的列數
readonlyBoolean如果設定為 true,則該 textarea 就無法輸入字串
wrapString相同於 HTML 的 wrap attribute

6) Checkbox Tag
這裡的 checkbox 元件如果你認為跟 HTML 的 checkbox 一樣的話,那你就錯了!因為在 Struts2 提供的 checkbox 元件是一個單一 HTML 的 checkbox,這是什麼意思呢?一般的 HTML checkbox 提供了多個選項讓使用者選擇零或多個,但是這裡的 checkbox 只提供使用者一個選項,也就是選或不選。所以這個 checkbox 不同於 HTML 的 checkbox。這個 checkbox 只提供 Boolean 的功能,也就是說其對應的 property 一定要是一個 boolean property,如果要像 HTML 提供的 checkbox 有相同功能的話,要改使用 checkboxlist tag,現在不會提到!
以下是 checkbox tag 的 attribute:





















AttributeTypeDescription
fieldValueString這裡所填寫的 value 是真正會被傳送到 Action 中的值,主要是 true 或 false,預設值為 true
valueString這裡是用來判斷此 checkbox 是否會被勾選

看到上面的 attribute 你一定會感到很奇怪,value attribute 已經是共同的 attribute 了,為何在這裡還會在重新點出呢?原因就在於 checkbox 元件還有一個 fieldValue 這會與 value attribute 搞混!所以在這裡要特別點名。
fieldValue attribute 中的值代表當此 form 被送出後,fieldValue 中填寫的值會真正被送到 Action 中對應的 property,而 value attribute 只是用來判斷此 checkbox 是否需要被勾選。當 OGNL 取得 ValueStack 中的值,會將此值寫入 value attribute 中 (任何一個元件都是這樣),使用者可以看到此 checkbox 是否有被選起來。所以 fieldValue 與 value attribute 之間不要弄混了!
另外,checkbox 所指定的 name attribute,其對應到的 property 需要是一個 boolean 型態,否則會無法運作!

在這裡列出了六種簡單的 UI tag 給你參考,這裡列出的都是針對單一的 property,之後我將介紹關於 Collection-based 相關的 UI tags。

沒有留言: