步骤1:开发组件的Java类
组件类将负责管理代表组件状态的属性，因此，我们必须根据组件的行为(如输入组件或输出组件)，为组件选择适当的基类。
在列表A中描述的组件扩展了javax.faces.component.UIOutput，以显示指向某个样式表文件的URL，或内联式样式表的内容。
列表A
import javax.faces.component.*;
public class CSSComponent extends UIOutput {
private Boolean link;
public String getFamily() {
return "faces.CSSFamily";
}
public boolean isLink() {
if (link != null)
return link.booleanValue();
ValueBinding vb = getValueBinding("link");
if (vb != null) {
Boolean bvb = (Boolean) vb.getValue(FacesContext.
getCurrentInstance());
if (bvb != null)
return bvb.booleanValue();
}
return false;
}
public void setLink(boolean link) {
this.link = new Boolean(link);
}
public Object saveState(FacesContext context) {
return new Object[] { super.saveState(context), link };
}
public void restoreState(FacesContext context,
Object stateObj) {
Object[] state = (Object[]) stateObj;
super.restoreState(context, state[0]);
link = (Boolean) state[1];
}
}
代码中“关联”的属性规定了值的类型:要么是一个URL，要么是内联样式。该组件还必须能够在向服务器发送请求期间，使用经过JSF架构处理过的对象，来存储并恢复自己的状态。JSF架构自动调用saveState和restoreState方法，我们可以在组件中实现这两种方法来达到这一目标。
步骤2:编写渲染器
渲染程序有两个作用。首先，渲染程序负责发送适当的HTML程序段，该程序段能在客户端中渲染组件。通常情况下，这个HTML程序段由一些适于渲染整个网络浏览器的HTML标签组成，这个渲染阶段还能发送增强客户端交互性的JavaScript代码。
渲染程序的第二个作用是对来自客户端的数据进行解码，从而对服务器端的组件状态进行更新(比如用户在文本字段输入的文本)。标准渲染程序软件包具有强制 性，但也可以提供其他渲染程序软件包，用于提供其他的客户端表示方法或SVG之类的语言。
通过检验组件的链接属性，在列表2中实现的渲染程序将选择在HTML页面中发送的CSS样式类别。
列表B
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;
public class CSSRenderer extends Renderer {
public void encodeEnd(FacesContext context,
UIComponent component)
throws IOException {
super.encodeEnd(context, component);
if (component instanceof CSSComponent) {
CSSComponent cssComponent =
(CSSComponent) component;
String css = (String)cssComponent.getValue();
boolean isLink = cssComponent.isLink();
if (css != null)
if (isLink)
context.getResponseWriter().write("＜link type='text/
css' rel='stylesheet' href='" + css + "'/＞");
else
context.getResponseWriter().write("＜style＞\n" + css
+ "\n＜style/＞\n");
}
}
}
