Composite Component 介紹

Composite Component 介紹

hycyeh39@gmail.com

實作步驟:

1. 在 [context_root/resources 下建立 your_directory/your_component.xhtml。(後續使用時的 name space 為 http://java.sun.com/jsf/composite/[your_directory]，tag 的名稱為 your_component。

2. 在 your_component.xhtml 中建立複合元件所需要的: 1) interface 及 2) implementation. Your_component.xhtml 中仍要有 及 。

3. 使用 來宣告複合元件要使用的: attributes, attachable converters, attachable validators。

3(a) 宣告屬性的名字及是否為必要。 的使用參考http://docs.oracle.com/javaee/6/tutorial/doc/gkhwv.html。

3(b) 宣要可附加 converter 及 validator 的 UI元件。target 屬性指向在 中要套用的 UI 元件的名稱；name 為在使用複合元件時converter/validator 標籤要附加時的接口介面。

3(c) 另外還可使用 開放 中的元件，讓使用者附加 converter 至該元件。

3(d) 使用 開放 中的元件，該使用者能附加 actionListener 至該元件。

4. 使用 實作複合元件。在 可以放入多個 UIComponent 元件進行實作。

4(a) 要在元件中使用屬性的值，使用#{cc.attr}。#{cc} 是複合元件中的自動變數(implicit variable)，先前在 中定義的屬性可以透過 #{cc.attr.yourAttributeName}取得。

範例說明

 一個 composite component，內有 email 輸入欄位及一個圖示的連結。按下圖示的連結後會驗證 email 格式是否正確，並執行連結指定的方法。

檔案結構

檔案結構如上圖。在[context_root]/resources 下放置複合元件的 xhtml 檔comps/emailBox.xhtml、使用到的 css 檔css/styles.css及圖片檔 images/sendmail.jpg。

Composite Component 定義檔 ([context_root]/resources/comps/emaiBox.html)

• #9 宣告複合元件所需的輸入屬性
• #10 第一個屬性為 email，是必要的屬性
• #11 第二個屬性為 image，為圖示連結所要使用到的圖形
• #12 第三個屬性為 actionMethod，為按下圖示連結後要執行的方法。方法的簽章如 method-signature 屬性中指定，傳回 String，沒有傳入參數。
• #14 公開位於 #19 的 Validator 及 Converter 介面
• #17 Composite Component 實作開始
• #18 宣告一個及 id 為 form
• #19 宣告一個文字輸入元件  此元件的 value 屬性會 bind 到使用者透過屬性  email 所傳入的 bean property。
• #20 宣告一個 元件，其 action 為使用傳入之方法，方法簽章在#13 已宣告。
• #21 宣告一個 元件，做為 元件的圖示。該元件的 url 屬性也是由使用者傳入，並透過屬性 image 取得。

使用自訂複合元件

上圖左邊為使用前述複合元件的 index.xhtml 檔 。在 index.xhtml 中:

• #7 宣告要引用的複合元件的 name space 為 http://java.sun.com/jsf/composite/comps。注意，url 中的 comps 目錄的實際位置是 [context_root]/resources/comps
• #11 使用自訂複合元件，該元件有 3 個屬性: email, image, actionMethod。這三個屬性於上圖右手邊的 emailBox.xhtml 檔案中的 #10~#13 中定義。
• #14 為複合元件中的 的外掛進來的驗證器，使用 for 屬性指定該驗證器要對應的介面接口，該接口位於複合元件介面中的  

參考資料

1.  EE 6: Develop Web Applications with JSF, Student Guide II, 2014
2. 來源: Composite Example in lab files for Java EE 6 Training course.
3. Chapter 12 Composite Components: Advanced Topics and Example, https://docs.oracle.com/javaee/6/tutorial/doc/gkhxa.html, accessed on 7/29/2015.