Implement a Graphical JSF Component (Continued)

For the most part, JSF components correspond directly to the HTML components and tags available in the HTML 2.0 specification. This set of relatively simple components is sufficient for many Web applications. However, many applications such as supervision or monitoring require more complex data display and interaction such as charting, diagramming, and mapping. The design of these advanced components is not obvious because of the limited capability to render complex graphics widgets directly in HTML. The solution requires that the server-side components deliver images to the client, but it brings its own problems because interactions on basic HTML images are limited. Finally, JavaScript must be used to enable the client-side interactions that allow the user to navigate and interact with the data.

Let's take a look at the steps for developing a very simple JSF component, one that imports CSS into an HTML page. The description and code samples for this simple component will then serve as background as we develop our advanced JSF charting component. Figure 1 shows how to use the component that we are going to develop and the result that we will get. The benefit of using such a component is to be able to change the complete look of the page by changing the component value from a JSF action.

Develop a Component
A JSF component consists of several Java classes and configuration files. To create a custom JSF component, you'll need to develop a Java class that extends one of the JSF base component classes; develop a renderer for the default render kit; develop a Java class that describes the tag that will be used in the JSP page; write a tag library definition (TLD) file; and write the JSF configuration file. Let's take a closer look at these five steps.

Develop the component Java class. The component class is responsible for managing the properties that represent the component's state. Therefore, we must choose an appropriate base class for the component, based on its behavior, such as an input or output component (see Listing 1). The component described here extends javax.faces.component.UIOutput to display a URL pointing to a style sheet file or the contents of an inline style sheet. The component can be used to switch from one style sheet to another in a JSF action. The link property specifies the type of the value: either a URL or the inline style. The component must also be able to store and restore its state between requests to the server using an object processed by the JSF framework. The state of a component consists of the significant property values that are needed to rebuild the object. The JSF framework automatically calls the saveState() and restoreState() methods, which we have implemented in our component to achieve this goal.

Develop the renderer. The renderer has two roles. First, the renderer is responsible for emitting an appropriate HTML fragment that will render the component in the client. Usually, this HTML fragment will consist of some HTML tags that are suitable for rendering in general Web browsers. This phase of the JSF life cycle is called the encoding or render-response phase. This rendering phase can also be used to emit JavaScript code that can be used to enhance client-side interaction.

The second role of a renderer is to decode the data that comes from the client to update the server-side component state (for example, the text that the user enters in a text field). The standard renderer kit is mandatory, but other renderer kits can be provided to offer an alternate client-side representation or language such as SVG (see Resources). The renderer implemented (see Listing 2) chooses the type of CSS to be emitted in the HTML page by checking the link property of the component.

Develop the tag class. Again, the JSF framework provides base classes you may want to extend to write the tag associated with the component. The tag class is responsible for defining the component type and the rendering type of the component that will be used in the faces-config.xml file, which will be described shortly. It's also responsible for creating the JSF component (handled by the JSF framework) and passing attributes that are contained in the JSF tag to initialize the component (see Listing 3).

The tag provides setters and getters to manage the link and value attributes. When the component is created, the setProperties() method is called to initialize its properties from the tag attributes. Each tag attribute can be either a literal value or a binding to a bean property.