server|web|交互|站点 在创建交互式网络应用方面，Java Server Faces（以下建成为JSF）相对于诸如Java Server Pages或Apache Struts等同类技术而言拥有很多优势。JSF十分清晰地分离了应用逻辑层与用户界面表示层，提高了网络应用软件的维护能力，JSF同时还提供了一个架构用于开发和重用网络用户界面组件。
很多网络应用程序的开发者正在转移到JSF上来，但他们同时也发现预定义的JSF用户界面组件受到DHTML功能的限制。一些高级应用，例如监控或商务进程监测，需要和JSF架构兼容的高级视觉组件。
在JSF架构的标准之上开发自定义的用于网络图形用户界面的组件是一件轻松的事情，这些组件可以被应用程序员重用。而且，网络组件的开发者现在可以提供更加复杂的组件，同时可以保证开发者可以轻松的享受这些组件带来的优势和便利。这些JSF用户界面组件必须简洁地整合与部署到JSF运行时架构，而且在应用软件设计过程中，还要较好地整合到提供JSF支持的集成开发环境（IDE）中
除了JSF自带的基本的用户界面架构之外，在第一次开发自定义组件的时候，开发者还会遇到一些缺陷和障碍。在这篇文章当中，我们将要介绍如何构建图形化的JSF组件，这种组件使用纯HTML是非常难以实现的。图形化JSF组件的特色之处在于，不仅需要生成DHTML，而且还需要一些额外的图形生成与客户端交互的支持。我们将使用一个图表组件的例子来演示，这个图表组件是用来提供图表和各种客户端的浏览与交互功能。最后，将展示如何将图表组件整合到支持JSF的集成开发环境中。在理解了这个图表组件的设计过程之后，开发者将对如何实现图形化的JSF组件有更深入的理解，希望能够对他们开发自定义的JSF图形组件有所帮助。
什么是Java Server Faces？
JSF是一个标准的服务器端架构，用于简化网络应用软件表示层的构建。开发人员可以组装这些可复用的用户界面组件来创建网页，将这些组件绑定到应用程序的数据源，并利用服务器端的事件处理器来处理客户端事件。依据JSF规范，组件开发者所制作的组件可以简洁地整合到JSF运行时架构，而且在应用软件设计过程中，还可以整合到与JSF兼容的集成开发环境中。JSR 127规范定义了这样的JSF架构，还同时提供了比如输入栏和按钮等基本用户界面组件的可供参考的实现。JSF组件中的绝大部分都符合HTML 2.0标准中的HTML组件和标签的规范。这些相对简单的组件对于很多网络应用程序来讲已经足够了。
然而，很多应用程序，比如监控或监测系统，需要更复杂的数据表示与交互，例如图表、图示和映射等。因为在HTML中直接生成复杂图形的能力有限，所以设计这些高级组件也并不直观。一种解决方案就是让服务器端的组件将图片传送到客户端，然而，这会带来它自身的问题因为最基本的HTML的图片交互功能是很有限的。所以，最后必须使用JavaScript来实现用户的数据浏览与交互功能。
创建简单的JSF组件
本文将这部分将描述一个非常简单的JSF组件的开发步骤，这个组件的功能是将CSS导入到一个HTML的网页上。这个简单组件的描述和代码将作为基础知识，为下一部分继续讲解高级JSF图表组件打下基础。
图1 展示了如何使用组件及其结果
图1
使用这一组件的好处在于，只要通过JSF动作去改变组件的设定值就能够改变整个页面的外观。
一个JSF组件由一些Java类和配置文件组成，为了创建一个自定义的JSF组件，开发人员需要：
1. 编写一个扩展JSF基础组件类的Java类
2. 为默认的渲染工具编写一个渲染器
3. 编写一个Java类来描述标签，这个标签将用于JSP页面
4. 编写一个标签库定义文件
5. 编写一个JSF配置文件
步骤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方法，我们可以在组件中实现这两种方法来达到这一目标。
[1] [2] 下一页
