|
级别: 中级
Rick Hightower , CTO, ArcMind
2005 年 8 月 16 日
在四部分的 怀疑论者的 JSF 系列的最后一期中，Rick Hightower 介绍了省时运动，它可以一次或永远地说服您：JSF 组件开发要比您想像的更容易。
组件模型的关键考验就是：能否从第三方供应商购买组件，并把它们插入应用程序？与可购买可视 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 id="cdForm">
<h:inputHidden id="rowIndex" value="#{CDManagerBean.rowIndex}" />
<arcmind:field id="title"
value="#{CDManagerBean.title}"
label="Title:"
errorStyleClass="errorText"
required="true" /> <br />
<arcmind:field id="artist"
value="#{CDManagerBean.artist}"
label="Artist:"
errorStyleClass="errorText"
required="true" /> <br />
<arcmind:field id="price"
value="#{CDManagerBean.price}"
label="CD Price:"
errorStyleClass="errorText"
required="true">
<f:validateDoubleRange maximum="1000.0" minimum="1.0"/>
</arcmind:field>
|
以上标记输出以下 HTML：
<label style="" class="errorText">Artist*</label>
<input type="text" id="cdForm:artist "
name=" 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 errorStyle="";
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 方法如下所示：
@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);
}
|
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，如下所示：
@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();
}
|
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 样式的组件，以及更多。请参阅 参考资料 获得 JSF 的阅读列表！
在编写这篇文章的过程中，我遇到了 Renderer 的一个技术障碍，它使我发现了 getConvertedValues 方法的工作方式。尽管我以前遇到过 Converter 问题并处理过它，但是那时我是在一个紧张的（生产）日程中做这件事的。在生产工作中进行的研究，不必像在 how-to 文章中做得那么详细；所以这一次，我必须不仅学习如何修补问题，还要学习弄清如何 做对。通过这整个过程，我最终在非常深的层次上学会并体验了 JSF 组件处理工作的方式。所以，有时绕点弯路会看到优美的风景。
我希望在这个由四部分组成的系列中，您已经学到了关于使用 JSF 的优势的充足知识，以及它如何工作的基础知识，还希望您会喜欢进一步深入这项技术。而且当您有时可能迷失方向的时候，请不要陷入 FUD。相反，请记住我说过的：弯路会看到优美的风景，请继续前行。 |