組件模型的關鍵考驗就是：能否從第三方供應商購買組件，并把它們插入應用程序？與
可購買可視 Swing 組件一樣，也可以購買 Java ServerFaces (JSF)
組件！需要一個好玩的日歷？可以在開源實現和商業組件之間選擇。可以選擇購買一個，而不是自行開發復雜的基于 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 組件模型
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 樣式的 Hello World！
我們用一個又好又容易的示例來開始 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 標記
第 1 步：擴展 UIComponent
第一步是創建一個組件，繼承 UIOutput，后者是 UIComponent 的子類。 除了繼承這個類之外，我還添加了組件將會顯示的 label 屬性，如清單 1 所示：
清單 1. 繼承 UIComponent 并添加 label
import java.io.IOException;import javax.faces.component.UIOutput;import javax.faces.context.FacesContext;import javax.faces.context.ResponseWriter;public class LabelComponent extends UIOutput{ private String label; public String getLabel() { return label; } public void setLabel(String label) { this.label = label; }...
|
接下來要做的是保存組件狀態。JSF 通常通過會話、隱藏表單字段、cookies 等進行實際的存儲和狀態管理。（這通常是用戶配置的設置）。要保存組件狀態，需要覆蓋組件的 saveState 和 restoreState 方法，如清單 2 所示：
清單 2. 保存組件狀態
@Override public Object saveState(FacesContext context) { Object values[] = new Object[2]; values[0] = super.saveState(context); values[1] = label; return ((Object) (values)); } @Override public void restoreState(FacesContext context, Object state) { Object values[] = (Object[])state; super.restoreState(context, values[0]); label = (String)values[1]; }
|
可以注意到，我使用的是 JDK 1.5。我對編譯器進行了設置，所以我必須指定 override 注釋，以便指明哪些方法要覆蓋基類的方法。這樣做可以更容易地標識出 JSF 的鉤子在哪。
創建組件的最后一步是用 faces-config.xml 登記它，如下所示：
<faces-config> <component> <component-type>simple.Label</component-type> <component-class> arcmind.simple.LabelComponent </component-class> </component>...
|
第 2 步：定義渲染器
下面要做的是內聯地定義渲染器的功能。稍后我會介紹如何創建獨立的渲染器。現在，先從編碼 Label 組件的輸出、顯示 label 開始，如清單 3 所示：
清單 3. 編碼組件的輸出
public class LabelComponent extends UIOutput{ ... public void encodeBegin(FacesContext context) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement("label", this); writer.write(label); writer.endElement("label"); writer.flush(); } ...}
|
注意，響應寫入器（javax.faces.context.ResponseWriter）可以容易地處理 HTML 這樣的標記語言。清單 3 的代碼輸出 <label> 元素體內的 label 的值。
下面顯示的 family 屬性用來把 Label 組件與渲染器關聯。雖然目前 Label 組件還不需要這個屬性（因為還沒有獨立的渲染器），但是在這篇文章后面，在介紹如何創建獨立渲染器的時候，會需要它。
public class LabelComponent extends UIOutput{ ... public String getFamily(){ return "simple.Label"; } ...}
|
插曲：研究 JSF-RI
如果正在使用來自 Sun Microsystems 的 JSF 參考實現（不是 MyFaces 實現），那么就不得不在組件創建代碼中添加下面一段：
public void encodeEnd(FacesContext context) throws IOException { return;}public void decode(FacesContext context) { return;}
|
Sun 的 JSF RI 期望，在組件沒有渲染器的時候，渲染器會發送一個空指針異常。MyFaces 實現不要求處理這個需求，但是在代碼中包含以上方法依然是個好主意，這樣組件既可以在 MyFaces 環境中工作也可以在 JSF RI 環境中工作了。
|
MyFaces 更好！
如果正在使用 Sun JSF RI 或其他替代品，那么請幫自己一個忙，轉到 MyFaces。雖然 MyFaces 不總是 更好的實現，但是目前它是。它的錯誤消息要比 Sun JSF RI 的好，而這個框架相比之下更嚴格。
|
|
第 3 步：創建定制標記
JSF 組件不是天生綁定到 JSP 上的。要連接起 JSP 世界和 JSF 世界，需要能夠返回組件類型的定制標記（然后在 faces-context 文件中登記）和渲染器，如圖 3 所示。
圖 3. 連接 JSF 和 JSP
注意，由于沒有獨立的渲染器，所以可以給 getRendererType() 返回 null 值。還請注意，必須已經把 label 屬性的值從定制標記設置到組件上，如下所示：
[LabelTag.java]public class LabelTag extends UIComponentTag {…protected void setProperties(UIComponent component) { /* you have to call the super class */ super.setProperties(component); ((LabelComponent)component).setLabel(label);}
|
記住，Tag 設置從 JSP 到 Label 組件的綁定，如圖 4 所示。
圖 4. 綁定 JSF 和 JSP
現在要做的全部工作就是創建一個 TLD（標記庫描述符）文件，以登記定制標記，如清單 4 所示：
清單 4. 登記定制標記
[arcmind.tld]<taglib> <tlib-version>0.03</tlib-version> <jsp-version>1.2</jsp-version> <short-name>arcmind</short-name> <uri>http://arcmind.com/jsf/component/tags</uri> <description>ArcMind tags</description> <tag> <name>slabel</name> <tag-class>arcmind.simple.LabelTag</tag-class> <attribute> <name>label</name> <description>The value of the label</description> </attribute> </tag>...
|
一旦定義了 TLD 文件，就可以開始在 JSP 中使用標記了，如下面示例所示：
[test.jsp]<%@ taglib prefix="arcmind" uri="http://arcmind.com/jsf/component/tags" %> ... <arcmind:slabel label="Form Test"/>
|
現在就可以了 —— 開發一個簡單的 JSP 組件不需要更多了。但是如果想創建稍微復雜一些的組件，針對更復雜的使用場景時該怎么辦？請繼續往下看。
復合組件
在下一個示例中，我將介紹如何創建這樣一個組件（和標記），它可以記住最后一個人離開的位置。Field 組件把多個組件的工作組合到一個組件中。復合組件是 JSF 組件開發的重點，會節約大量時間！
Field 組件把標簽、文本輸入和消息功能組合到一個組件。Field 的文本輸入功能允許用戶輸入文本。如果有問題（例如輸入不正確），它的標簽功能會顯示紅色，還會顯示星號（*）表示必需的字段。它的消息功能允許它在必要的時候寫出出錯消息。
Field 組件示例演示了以下內容：
- UIInput 組件
- 處理值綁定和組件屬性
- 解碼來自請求參數的值
- 處理出錯消息
與
Label 組件不同，Field 組件使用獨立渲染器。如果為一個基于 HTML
的應用程序開發組件，那么不要費力使用獨立渲染器。這么做是額外的無用功。如果正在開發許多 JSF
組件，打算賣給客戶，而針對的客戶又不止一個，那么就需要獨立的渲染器了。簡而言之，渲染器適用于商業框架的開發人員，不適用于開發內部 Web
應用程序的應用程序開發人員。
了解代碼
由于我已經介紹了創建組件、定義渲染器以及創建定制標記的基本步驟，所以這次我讓代碼自己說話，我只點出幾個重要的細節。在清單 5 中，可以看到在典型的應用程序示例中如何使用 Field 標記的：
清單 5. Field 標記
<f:view> <h2>CD Form</h2> <h:form > <h:inputHidden value="#{CDManagerBean.rowIndex}" /> <arcmind:field value="#{CDManagerBean.title}" label="Title:" errorStyleClass="errorText" required="true" /> <br /> <arcmind:field value="#{CDManagerBean.artist}" label="Artist:" errorStyleClass="errorText" required="true" /> <br /> <arcmind:field value="#{CDManagerBean.price}" label="CD Price:" errorStyleClass="errorText" required="true"> <f:validateDoubleRange maximum="1000.0" minimum="1.0"/> </arcmind:field>
|
以上標記輸出以下 HTML：
<label >Artist*</label><input type="text" " cdForm:artist " />Artist is blank, it must contain characters
|
圖 5 顯示了瀏覽器中這些內容可能顯示的效果。
圖 5. Field 組件
清單 6 顯示了創建 Field 組件的代碼。因為這個組件負責輸入文本而不僅僅是輸出它（像 Label 那樣），所以要從繼承 UIInput 開始，而不是從繼承 UIOutput 開始。
清單 6. Field 繼承 UIInput
package com.arcmind.jsfquickstart;import javax.faces.component.UIInput;import javax.faces.context.FacesContext;/** * @author Richard Hightower * */public class FieldComponent extends UIInput { private String label; @Override public Object saveState(FacesContext context) { Object values[] = new Object[2]; values[0] = super.saveState(context); values[1] = label; return ((Object) (values)); } @Override public void restoreState(FacesContext context, Object state) { Object values[] = (Object[])state; super.restoreState(context, values[0]); label = (String)values[1]; } public FieldComponent (){ this.setRendererType("arcmind.Field"); } /** * @return Returns the label. */ public String getLabel() { return label; } /** * @param label * The label to set. */ public void setLabel(String label) { this.label = label; } @Override public String getFamily() { return "arcmind.Field"; } public boolean isError() { return !this.isValid(); }}
|
可以注意到，代表片段中遺漏了編碼方法。這是因為編碼和解碼發生在獨立的渲染器中。我稍后會介紹它。
值綁定和組件屬性
雖然 Label 組件只有一個屬性（JSP 屬性），可是 Field 組件卻有多個屬性，即 label、errorStyle、errorStyleClass 和 value。label 和 value 屬性位于 Field 組件的核心，而 errorStyle 和 errorStyleClass 是特定于 HTML 的。因為這些屬性是特定于 HTML 的，所以不需要讓它們作為 Field 組件的屬性；相反，只是把它們作為組件屬性進行傳遞，只有渲染器知道這些屬性。
像使用 Label 組件時一樣，需要用定制標記把 Field 組件綁定到 JSP，如清單 7 所示：
清單 7. 為 FieldComponent 創建定制標記
/* * Created on Jul 19, 2004 * */package com.arcmind.jsfquickstart;import javax.faces.application.Application;import javax.faces.component.UIComponent;import javax.faces.context.FacesContext;import javax.faces.el.ValueBinding;import javax.faces.webapp.UIComponentTag;/** * @author Richard Hightower * */public class FieldTag extends UIComponentTag { private String label; private String errorStyleClass=""; private String error; private boolean required; private String value=""; /** * @return Returns the label. */ public String getLabel() { return label; } /** * @param label The label to set. */ public void setLabel(String label) { this.label = label; } /** * @see javax.faces.webapp.UIComponentTag#setProperties * (javax.faces.component.UIComponent) */ @Override protected void setProperties(UIComponent component) { /* You have to call the super class */ super.setProperties(component); ((FieldComponent)component).setLabel(label); component.getAttributes().put("errorStyleClass", errorStyleClass); component.getAttributes().put("errorStyle",errorStyle); ((FieldComponent)component).setRequired(required); FacesContext context = FacesContext.getCurrentInstance(); Application application = context.getApplication(); ValueBinding binding = application.createValueBinding(value); component.setValueBinding("value", binding); } /** * @see javax.faces.webapp.UIComponentTag#getComponentType() */ @Override public String getComponentType() { return "arcmind.Field"; } /** * @see javax.faces.webapp.UIComponentTag#getRendererType() */ @Override public String getRendererType() { return "arcmind.Field"; } /** * @return Returns the errorStyleClass. */ public String getErrorStyleClass() { return errorStyleClass; } /** * @param errorStyleClass The errorStyleClass to set. */ public void setErrorStyleClass(String errorStyleClass) { this.errorStyleClass = errorStyleClass; } /** * @return Returns the errorStyle. */ public String getErrorStyle() { return errorStyle; } /** * @param errorStyle The errorStyle to set. */ public void setErrorStyle(String errorStyle) { this.errorStyle = errorStyle; } /** * @return Returns the required. */ public boolean isRequired() { return required; } /** * @param required The required to set. */ public void setRequired(boolean required) { this.required = required; } /** * @return Returns the value. */ public String getValue() { return value; } /** * @param value The value to set. */ public void setValue(String value) { this.value = value; }}
|
從概念上說，在上面的代碼和 Label 組件之間找不出太大區別。但是，在這個示例中，setProperties 方法有些不同：
protected void setProperties(UIComponent component) { /* You have to call the super class */ super.setProperties(component); ((FieldComponent)component).setLabel(label); component.getAttributes().put("errorStyleClass", errorStyleClass); component.getAttributes().put("errorStyle",errorStyle); ((FieldComponent)component).setRequired(required);
|
雖然 label 屬性傳遞時的方式與前面的示例相同，但是 errorStyleClass 和 errorStyle 屬性不是這樣傳遞的。相反，它們被添加到 JSF 組件的屬性映射 中。Renderer 類會使用屬性映射去渲染類和樣式屬性。這個設置允許特定于 HTML 的代碼從組件脫離。
這個修訂后的 setProperties 方法實際的值綁定代碼也有些不同，如下所示。
protected void setProperties(UIComponent component) { ... FacesContext context = FacesContext.getCurrentInstance(); Application application = context.getApplication(); ValueBinding binding = application.createValueBinding(value); component.setValueBinding("value", binding);
|
這個代碼允許 Field 組件的 value 屬性綁定到后臺 bean。出于示例的原因，我把 CDManagerBean 的 title 屬性綁定到 Field 組件，像下面這樣：value="#{CDManagerBean.title}。值綁定是用 Application 對象創建的。Application 對象是創建值綁定的工廠。這個組件擁有保存值綁定的特殊方法，即 setValueBinding；可以有不止一個值綁定。
獨立渲染器
最后介紹渲染器，但并不是說它不重要。獨立渲染器必須考慮的主要問題是解碼（輸入） 和編碼（輸出）。Field 組件做的編碼比解碼多得多，所以它的渲染器有許多編碼方法，而只有一個解碼方法。在清單 8 中，可以看到 Field 組件的渲染器：
清單 8. FieldRenderer 擴展自 Renderer
package com.arcmind.jsfquickstart;import java.io.IOException;import java.util.Iterator;import java.util.Map;import javax.faces.application.FacesMessage;import javax.faces.component.UIComponent;import javax.faces.component.UIInput;import javax.faces.context.FacesContext;import javax.faces.context.ResponseWriter;import javax.faces.convert.Converter;import javax.faces.convert.ConverterException;import javax.faces.el.ValueBinding;import javax.faces.render.Renderer;/** * @author Richard Hightower * */public class FieldRenderer extends Renderer { @Override public Object getConvertedValue(FacesContext facesContext, UIComponent component, Object submittedValue) throws ConverterException { //Try to find out by value binding ValueBinding valueBinding = component.getValueBinding("value"); if (valueBinding == null) return null; Class valueType = valueBinding.getType(facesContext); if (valueType == null) return null; if (String.class.equals(valueType)) return submittedValue; if (Object.class.equals(valueType)) return submittedValue; Converter converter = ((UIInput) component).getConverter(); converter = facesContext.getApplication().createConverter(valueType); if (converter != null ) { return converter.getAsObject(facesContext, component, (String) submittedValue); }else { return submittedValue; } } @Override public void decode(FacesContext context, UIComponent component) { /* Grab the request map from the external context */ Map requestMap = context.getExternalContext().getRequestParameterMap(); /* Get client ID, use client ID to grab value from parameters */ String clientId = component.getClientId(context); String value = (String) requestMap.get(clientId); FieldComponent fieldComponent = (FieldComponent)component; /* Set the submitted value */ ((UIInput)component).setSubmittedValue(value); } @Override public void encodeBegin(FacesContext context, UIComponent component) throws IOException { FieldComponent fieldComponent = (FieldComponent) component; ResponseWriter writer = context.getResponseWriter(); encodeLabel(writer,fieldComponent); encodeInput(writer,fieldComponent); encodeMessage(context, writer, fieldComponent); writer.flush(); } private void encodeMessage(FacesContext context, ResponseWriter writer, FieldComponent fieldComponent) throws IOException { Iterator iter = context.getMessages(fieldComponent.getClientId(context)); while (iter.hasNext()){ FacesMessage message = (FacesMessage) iter.next(); writer.write(message.getDetail()); } } private void encodeLabel(ResponseWriter writer, FieldComponent fieldComponent) throws IOException{ writer.startElement("label", fieldComponent); if (fieldComponent.isError()) { String errorStyleClass = (String) fieldComponent.getAttributes().get("errorStyleClass"); String errorStyle = (String) fieldComponent.getAttributes().get("errorStyle"); writer.writeAttribute("style", errorStyle, "style"); writer.writeAttribute("class", errorStyleClass, "class"); } writer.write("" + fieldComponent.getLabel()); if (fieldComponent.isRequired()) { writer.write("*"); } writer.endElement("label"); } private void encodeInput(ResponseWriter writer, FieldComponent fieldComponent) throws IOException{ FacesContext currentInstance = FacesContext.getCurrentInstance(); writer.startElement("input", fieldComponent); writer.writeAttribute("type", "text", "type"); writer.writeAttribute("id", fieldComponent.getClientId(currentInstance), "id"); writer.writeAttribute("name", fieldComponent.getClientId(currentInstance), "name"); if(fieldComponent.getValue()!=null) writer.writeAttribute("value", fieldComponent.getValue().toString(), "value"); writer.endElement("input"); }}
|
編碼和解碼
正如前面提到的，渲染器做的主要工作就是解碼輸入和編碼輸出。我先從解碼開始，因為它是最容易的。 FieldRenderer 的 decode 方法如下所示：
@Overridepublic void decode(FacesContext context, UIComponent component) { /* Grab the request map from the external context */ Map requestMap = context.getExternalContext().getRequestParameterMap(); /* Get client ID, use client ID to grab value from parameters */ String clientId = component.getClientId(context); String value = (String) requestMap.get(clientId); FieldComponent fieldComponent = (FieldComponent)component; /* Set the submitted value */ ((UIInput)component).setSubmittedValue(value);}
|
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，如下所示：
@Overridepublic void encodeBegin(FacesContext context, UIComponent component) throws IOException { FieldComponent fieldComponent = (FieldComponent) component; ResponseWriter writer = context.getResponseWriter(); encodeLabel(writer,fieldComponent); encodeInput(writer,fieldComponent); encodeMessage(context, writer, fieldComponent); writer.flush();}
|
encodeLabel 方法負責在出錯的時候，把標簽的顏色改成紅色（或者在樣式表中指定的其他什么顏色），并用星號 (*) 標出必需的字段，如下所示：
private void encodeLabel(ResponseWriter writer, FieldComponent fieldComponent) throws IOException{ writer.startElement("label", fieldComponent); if (fieldComponent.isError()) { String errorStyleClass = (String) fieldComponent.getAttributes().get("errorStyleClass"); String errorStyle = (String) fieldComponent.getAttributes().get("errorStyle"); writer.writeAttribute("style", errorStyle, "style"); writer.writeAttribute("class", errorStyleClass, "class"); } writer.write("" + fieldComponent.getLabel()); if (fieldComponent.isRequired()) { writer.write("*"); } writer.endElement("label");}
|
首先，encodeLabel 方法檢查是否有錯誤，如果有就輸出 errorStyle 和 errorStyleClass（更好的版本是只有在它們不為空的時候才輸出 —— 但是我把它留給您做練習！）。然后幫助器方法會檢查組件是不是必需的字段，如果是，就輸出星號。encodeMessages 和 encodeInput 方法做的就是這件事，即輸出出錯消息并為 Field 組件生成 HTML 輸入的文本字段。
注意，神秘方法！
您可能已經注意到，有一個方法我還沒有介紹。這個方法就是這個類中的“黑馬”方法。如果您閱讀 Renderer（所有渲染器都要擴展的抽象類）的 javadoc，您可能會感覺到這樣的方法是不需要的，現有的就足夠了：這就是我最開始時想的。但是，您和我一樣，都錯了！
實際上，基類 Renderer 并不 自動調用 Renderer 子類的相關轉換器 —— 即使 Renderer 的 javadoc 和 JSF 規范建議它這樣做，它也沒做。MyFaces 和 JSF RI 擁有為它們的渲染器執行這個魔術的類（特定于它們的實現），但是在核心 JSF API 中并沒有涉及這項功能。
相反，需要使用方法 getConvertedValues 鎖定相關的轉換器并調用它。清單 9 顯示的方法根據值綁定的類型找到正確的轉換器：
清單 9. getConvertedValues 方法
@Override public Object getConvertedValue(FacesContext facesContext, UIComponent component, Object submittedValue) throws ConverterException { //Try to find out by value binding ValueBinding valueBinding = component.getValueBinding("value"); if (valueBinding == null) return null; Class valueType = valueBinding.getType(facesContext); if (valueType == null) return null; if (String.class.equals(valueType)) return submittedValue; if (Object.class.equals(valueType)) return submittedValue; Converter converter = ((UIInput) component).getConverter(); converter = facesContext.getApplication().createConverter(valueType); if (converter != null ) { return converter.getAsObject(facesContext, component, (String) submittedValue); }else { return submittedValue; } }
|
清單 9 的代碼添加了 Render javadoc 和 JSF 規范都讓您相信應當是自動執行的功能，而實際上并不是。另一方面，請注意如果沒有 獨立的 Renderer，就不需要 以上（getConvertedValues）方法。UIComponentBase 類（Field 組件的超類）在直接渲染器的情況下提供了這個功能。請接受我的建議，只在特別想嘗試或者在編寫商業框架的時候，才考慮采用渲染器。在其他情況下，它們不值得額外的付出。
如果想知道如何把組件和渲染器關聯，那么只要看看圖 6 即可。
圖 6. 把渲染器映射到組件
定制標記有兩個方法，分別返回組件類型和渲染器類型。這些方法用于查找配置在 faces-config.xml 中的正確的渲染器和組件。請注意（雖然圖中沒有）組件必須返回正確的 family 類型。
結束語
通過這些內容，您已經切實地了解了 JSF 組件開發的核心。當然，在這個領域還有許多其他主題需要涉及 —— 包括發出組件事件、國際化組件、創建 UICommand 樣式的組件，以及更多。