組件模型的關鍵考驗就是:能否從第三方供應商購買組件,并把它們插入應用程序?與可購買可視 Swing 組件一樣,也可以購買 Java ServerFaces (JSF) 組件!需要一個好玩的日歷?可以在開源實現和商業組件之間選擇??梢赃x擇購買一個,而不是自行開發復雜的基于 Web 的 GUI 組件。
JSF 擁有一個與 AWT 的 GUI 組件模型類似的組件模型。可以用 JSF 創建可重用組件。但不幸的是,存在一個誤解:用 JSF 創建組件很困難。不要相信這些從未試過它的人們的 FUD!開發 JSF 組件并不困難。由于不用一遍又一遍重復相同的代碼,可以節約時間。一旦創建了組件,就可以容易地把組件拖到任何 JSP、甚至任何 JSF 表單中,如果正在處理的站點有 250 個頁面,這就很重要了。JSF 的大多數功能來自基類。因為所有的繁重工作都由 API 和基類完成,所以 JSF 把組件創建變得很容易。
貫穿這個系列,我一直在試圖幫助您克服造成許多 Java 開發人員逃避使用 JSF 技術的 FUD。我討論了對這項技術的基本誤解,介紹了它的底層框架和它最有價值的開發特性。有了這些基礎工作之后,我認為您已經可以采取行動,開發自己的定制 JSF 組件了。使用 JSF 的東西,我敢保證要比您想像的要更加容易,而且從節約的時間和精力上來說,回報如此之多,多得不能忽略。
這篇文章中的示例是用 JDK 1.5 和 Tomcat 開發的。請單擊頁面頂部的 示例代碼 下載示例源代碼。注意,與以前的文章不同,這篇文章沒有關聯的 build 文件,因為我特意把它留給您作為一個練習了。只要設置 IDE 或編譯器,把 /src 中的類編譯到 /webapp/WEB-INF/classes ,并在 /webapp/WEB-INF/lib 中包含所有 JAR 文件(以及 servlet-api.jar 和 jsp-api.jar ,它們包含在 Tomcat 中)。
JSF 組件模型與 AWT GUI 組件模型類似。它有事件和屬性,就像 Swing 組件模型一樣。它也有包含組件的容器,容器也是組件,也可以由其他容器包含。從理論上說,JSF 組件模型分離自 HTML 和 JSP。JSF 自帶的標準組件集里面有 JSP 綁定,可以生成 HTML 渲染。
JSF 組件的示例包括日歷輸入組件和 HTML 富文本輸入組件。您可能從來沒時間去編寫這樣的組件,但是如果它們已經存在,那會如何呢?通過把常用功能變成商品,組件模型降低了向 Web 應用程序添加更多功能的門檻。
組件的功能通常圍繞著兩個動作:解碼和編碼數據。 解碼 是把進入的請求參數轉換成組件的值的過程。 編碼 是把組件的當前值轉換成對應的標記(也就是 HTML)的過程。
JSF 框架提供了兩個選項用于編碼和解碼數據。使用 直接實現 方式,組件自己實現解碼和編碼。使用 委托實現 方式,組件委托渲染器進行編碼和解碼。如果選擇委托實現,可以把組件與不同的渲染器關聯,會在頁面上以不同的方式渲染組件;例如多選列表框和一列復選框。
因此,JSF 組件由兩部分構成:組件和渲染器。JSF 組件 類定義 UI 組件的狀態和行為; 渲染器 定義如何從請求讀取組件、如何顯示組件 —— 通常通過 HTML 渲染。渲染器把組件的值轉換成適當的標記。事件排隊和性能驗證發生在組件內部。
在圖 1 中可以看到數據編碼和解碼出現在 JSF 生命周期中的什么階段(到現在,我希望您已經熟悉 JSF 生命周期了)。
圖 1. JSF 生命周期和 JSF 組件
![]() |
|
所有 JSF 組件的基類是
UIComponent
。在開發自己的組件時,需要繼承
UIComponentBase
,它擴展了
UIComponent
并提供了
UIComponent
中所有抽象方法的默認實現。
組件擁有雙親和標識符。每個組件都關聯著一個 組件類型 ,組件類型用于在 face 的上下文配置文件(faces-config.xml)中登記組件??梢杂?JSF-EL (表達式語言)把 JSF 組件綁定到受管理的 bean 屬性。可以把表達式關聯到組件上的任何屬性,這樣就允許用 JSF-EL 設置組件的屬性值。在創建使用 JSF-EL 綁定的組件屬性時,需要創建值綁定表達式。在調用綁定屬性的 getter 方法時,除非 setter 方法已經設置了值,否則 getter 方法必須用值綁定獲得值。
組件可以作為
ValueHolder
或
EditableValueHolder
。
ValueHolder
與一個或多個
Validator
和
Converter
相關聯;所以 JSF UI 組件也與
Validator
和
Converter
關聯(請參閱
參考資料
獲得更多關于 JSF 驗證和轉換的內容。)
像表單字段組件這樣的組件擁有一個
ValueBinding
,它必須綁定到 JavaBean 的讀寫屬性。組件可以調用
getParent
方法訪問它們的雙親,也可以調用
getChildren
方法訪問它們的子女。組件也可以有
facet 組件
,facet 組件是當前組件的子組件,可以調用
getFacets
方法訪問它,這個方法返回一個映射。Facets 是著名的子組件。
這里描述的許多組件的概念將會是接下來展示的示例的一部分,所以請記住它們!
![]() |
|
我們用一個又好又容易的示例來開始 JSF 組件的開發:我將展示如何渲染 Label 標記(示例:
<label>Form Test</label>
)。
下面是我要采取的步驟:
-
擴展 UIComponent
-
創建一個類,擴展
UIComponent
- 保存組件狀態
- 用 faces-config.xml 登記組件
-
創建一個類,擴展
-
定義渲染器或者內聯地實現它
- 覆蓋 encode
- 覆蓋 decode
- 用 faces-config.xml 登記渲染器
-
創建定制標記,繼承 UIComponentTag
- 返回渲染器類型
- 返回組件類型
- 設置可能使用 JSF 表達式的屬性
Label 示例將演示 JSF 組件開發的以下方面:
- 創建組件
- 直接實現渲染器
- 編碼輸出
- 把定制標記與組件關聯
返回 圖 1 ,可以看到在這個示例中會有兩個生命周期屬性在活動。它們是 Apply Request Value 和 Render Response 。
在圖 2 中,可以看到在 JSP 中如何使用 Label 標記的(
<label>Form Test</label>
)。
圖 2. 在 JSP 中使用 JSF 標記
第一步是創建一個組件,繼承
UIOutput
,后者是
UIComponent
的子類。 除了繼承這個類之外,我還添加了組件將會顯示的 label 屬性,如清單 1 所示:
清單 1. 繼承 UIComponent 并添加 label
|
接下來要做的是保存組件狀態。JSF 通常通過會話、隱藏表單字段、cookies 等進行實際的存儲和狀態管理。(這通常是用戶配置的設置)。要保存組件狀態,需要覆蓋組件的
saveState
和
restoreState
方法,如清單 2 所示:
清單 2. 保存組件狀態
|
可以注意到,我使用的是 JDK 1.5。我對編譯器進行了設置,所以我必須指定 override 注釋,以便指明哪些方法要覆蓋基類的方法。這樣做可以更容易地標識出 JSF 的鉤子在哪。
創建組件的最后一步是用 faces-config.xml 登記它,如下所示:
|
下面要做的是內聯地定義渲染器的功能。稍后我會介紹如何創建獨立的渲染器?,F在,先從編碼 Label 組件的輸出、顯示 label 開始,如清單 3 所示:
清單 3. 編碼組件的輸出
|
注意,響應寫入器(
javax.faces.context.ResponseWriter
)可以容易地處理 HTML 這樣的標記語言。清單 3 的代碼輸出 <label> 元素體內的 label 的值。
下面顯示的 family 屬性用來把 Label 組件與渲染器關聯。雖然目前 Label 組件還不需要這個屬性(因為還沒有獨立的渲染器),但是在這篇文章后面,在介紹如何創建獨立渲染器的時候,會需要它。
|
如果正在使用來自 Sun Microsystems 的 JSF 參考實現(不是 MyFaces 實現),那么就不得不在組件創建代碼中添加下面一段:
|
Sun 的 JSF RI 期望,在組件沒有渲染器的時候,渲染器會發送一個空指針異常。MyFaces 實現不要求處理這個需求,但是在代碼中包含以上方法依然是個好主意,這樣組件既可以在 MyFaces 環境中工作也可以在 JSF RI 環境中工作了。
![]() |
|
JSF 組件不是天生綁定到 JSP 上的。要連接起 JSP 世界和 JSF 世界,需要能夠返回組件類型的定制標記(然后在 faces-context 文件中登記)和渲染器,如圖 3 所示。
圖 3. 連接 JSF 和 JSP
注意,由于沒有獨立的渲染器,所以可以給
getRendererType()
返回 null 值。還請注意,必須已經把
label
屬性的值從定制標記設置到組件上,如下所示:
|
記住,
Tag
設置從 JSP 到 Label 組件的綁定,如圖 4 所示。
圖 4. 綁定 JSF 和 JSP
現在要做的全部工作就是創建一個 TLD(標記庫描述符)文件,以登記定制標記,如清單 4 所示:
清單 4. 登記定制標記
|
一旦定義了 TLD 文件,就可以開始在 JSP 中使用標記了,如下面示例所示:
|
現在就可以了 —— 開發一個簡單的 JSP 組件不需要更多了。但是如果想創建稍微復雜一些的組件,針對更復雜的使用場景時該怎么辦?請繼續往下看。
![]() |
|
在下一個示例中,我將介紹如何創建這樣一個組件(和標記),它可以記住最后一個人離開的位置。Field 組件把多個組件的工作組合到一個組件中。復合組件是 JSF 組件開發的重點,會節約大量時間!
Field 組件把標簽、文本輸入和消息功能組合到一個組件。Field 的文本輸入功能允許用戶輸入文本。如果有問題(例如輸入不正確),它的標簽功能會顯示紅色,還會顯示星號(*)表示必需的字段。它的消息功能允許它在必要的時候寫出出錯消息。
Field 組件示例演示了以下內容:
- UIInput 組件
- 處理值綁定和組件屬性
- 解碼來自請求參數的值
- 處理出錯消息
與 Label 組件不同,Field 組件使用獨立渲染器。如果為一個基于 HTML 的應用程序開發組件,那么不要費力使用獨立渲染器。這么做是額外的無用功。如果正在開發許多 JSF 組件,打算賣給客戶,而針對的客戶又不止一個,那么就需要獨立的渲染器了。簡而言之,渲染器適用于商業框架的開發人員,不適用于開發內部 Web 應用程序的應用程序開發人員。
由于我已經介紹了創建組件、定義渲染器以及創建定制標記的基本步驟,所以這次我讓代碼自己說話,我只點出幾個重要的細節。在清單 5 中,可以看到在典型的應用程序示例中如何使用 Field 標記的:
清單 5. Field 標記
|
以上標記輸出以下 HTML:
|
圖 5 顯示了瀏覽器中這些內容可能顯示的效果。
圖 5. Field 組件
清單 6 顯示了創建 Field 組件的代碼。因為這個組件負責輸入文本而不僅僅是輸出它(像 Label 那樣),所以要從繼承
UIInput
開始,而不是從繼承
UIOutput
開始。
清單 6. Field 繼承 UIInput
|
可以注意到,代表片段中遺漏了編碼方法。這是因為編碼和解碼發生在獨立的渲染器中。我稍后會介紹它。
雖然 Label 組件只有一個屬性(JSP 屬性),可是 Field 組件卻有多個屬性,即
label
、
errorStyle
、
errorStyleClass
和
value
。
label
和
value
屬性位于 Field 組件的核心,而
errorStyle
和
errorStyleClass
是特定于 HTML 的。因為這些屬性是特定于 HTML 的,所以不需要讓它們作為 Field 組件的屬性;相反,只是把它們作為組件屬性進行傳遞,只有渲染器知道這些屬性。
像使用 Label 組件時一樣,需要用定制標記把 Field 組件綁定到 JSP,如清單 7 所示:
清單 7. 為 FieldComponent 創建定制標記
|
從概念上說,在上面的代碼和 Label 組件之間找不出太大區別。但是,在這個示例中,
setProperties
方法有些不同:
|
雖然
label
屬性傳遞時的方式與前面的示例相同,但是
errorStyleClass
和
errorStyle
屬性不是這樣傳遞的。相反,它們被添加到 JSF 組件的
屬性映射
中。
Renderer
類會使用屬性映射去渲染類和樣式屬性。這個設置允許特定于 HTML 的代碼從組件脫離。
這個修訂后的
setProperties
方法實際的值綁定代碼也有些不同,如下所示。
|
這個代碼允許 Field 組件的
value
屬性綁定到后臺 bean。出于示例的原因,我把
CDManagerBean
的 title 屬性綁定到 Field 組件,像下面這樣:
value="#{CDManagerBean.title}
。值綁定是用
Application
對象創建的。
Application
對象是創建值綁定的工廠。這個組件擁有保存值綁定的特殊方法,即
setValueBinding
;可以有不止一個值綁定。
最后介紹渲染器,但并不是說它不重要。獨立渲染器必須考慮的主要問題是解碼(輸入) 和編碼(輸出)。Field 組件做的編碼比解碼多得多,所以它的渲染器有許多編碼方法,而只有一個解碼方法。在清單 8 中,可以看到 Field 組件的渲染器:
清單 8. FieldRenderer 擴展自 Renderer
|
正如前面提到的,渲染器做的主要工作就是解碼輸入和編碼輸出。我先從解碼開始,因為它是最容易的。
FieldRenderer
的 decode 方法如下所示:
|
Label 組件不需要進行解碼,因為它是一個
UIOutput
組件。
Field
組件是一個
UIInput
組件,這意味著它接受輸入,所以
必須
進行解碼。decode 方法可以從會話、cookie、頭、請求等處讀取值。在大多數請問下,decode 方法只是像上面那樣從請求參數讀取值。
Field 渲染器
的 decode 方法從組件得到
clientId
,以標識要查找的請求參數。給定組件容器的路徑,
clientId
被計算成為組件的全限定名稱。而且,因為示例組件在表單中(是個容器),所以它的
clientid
應當是
nameOfForm:nameOfComponent
這樣的,或者是示例中的
cdForm:artist、cdForm:price、cdForm:title
。decode 方法的最后一步是把提交的值保存到組件(稍后會轉換并驗證它,請參閱
參考資料
獲取更多關于驗證和轉換的內容)。
編碼方法沒什么驚訝的。它們與 Label 組件中看到的類似。第一個方法
encodeBegin
,委托給三個幫助器方法
encodeLabel
、
encodeInput
和
encodeMessage
,如下所示:
|
encodeLabel
方法負責在出錯的時候,把標簽的顏色改成紅色(或者在樣式表中指定的其他什么顏色),并用星號 (*) 標出必需的字段,如下所示:
|
首先,
encodeLabel
方法檢查是否有錯誤,如果有就輸出
errorStyle
和
errorStyleClass
(更好的版本是只有在它們不為空的時候才輸出 —— 但是我把它留給您做練習?。?。然后幫助器方法會檢查組件是不是必需的字段,如果是,就輸出星號。
encodeMessages
和
encodeInput
方法做的就是這件事,即輸出出錯消息并為 Field 組件生成 HTML 輸入的文本字段。
您可能已經注意到,有一個方法我還沒有介紹。這個方法就是這個類中的“黑馬”方法。如果您閱讀
Renderer
(所有渲染器都要擴展的抽象類)的 javadoc,您可能會感覺到這樣的方法是不需要的,現有的就足夠了:這就是我最開始時想的。但是,您和我一樣,都錯了!
實際上,基類
Renderer
并不
自動調用
Renderer
子類的相關轉換器 —— 即使
Renderer
的 javadoc 和 JSF 規范建議它這樣做,它也沒做。MyFaces 和 JSF RI 擁有為它們的渲染器執行這個魔術的類(特定于它們的實現),但是在核心 JSF API 中并沒有涉及這項功能。
相反,需要使用方法
getConvertedValues
鎖定相關的轉換器并調用它。清單 9 顯示的方法根據值綁定的類型找到正確的轉換器:
清單 9. getConvertedValues 方法
|
清單 9 的代碼添加了
Render
javadoc 和 JSF 規范都讓您相信應當是自動執行的功能,而實際上并不是。另一方面,請注意如果
沒有
獨立的
Renderer
,就
不需要
以上(
getConvertedValues
)方法。
UIComponentBase
類(Field 組件的超類)在直接渲染器的情況下提供了這個功能。請接受我的建議,只在特別想嘗試或者在編寫商業框架的時候,才考慮采用渲染器。在其他情況下,它們不值得額外的付出。
如果想知道如何把組件和渲染器關聯,那么只要看看圖 6 即可。
圖 6. 把渲染器映射到組件
定制標記有兩個方法,分別返回組件類型和渲染器類型。這些方法用于查找配置在 faces-config.xml 中的正確的渲染器和組件。請注意(雖然圖中沒有)組件必須返回正確的 family 類型。
![]() |
|
通過這些內容,您已經切實地了解了 JSF 組件開發的核心。當然,在這個領域還有許多其他主題需要涉及 —— 包括發出組件事件、國際化組件、創建
UICommand
樣式的組件,以及更多。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
