Implement a Graphical JSF Component (Continued)

Write the tag library definition (TLD). The TLD is an XML file that describes the tag by associating the name of the tag with the corresponding Java class. The TLD also describes the allowed attributes of the tag (see Listing 4). This TLD defines a tag named css that is bound to the CSSTag class. It also declares the link and value tag attributes.

Write the JSF configuration file. To integrate a JSF component into the framework, you must provide a configuration file called faces-config.xml. This file associates component types and renderer types, which are used in the JSP custom tag handler, to their corresponding Java class, and it also describes the renderer that should be used with each component (see Listing 5). This file defines the faces.CSSFamily component family. In our example, the family is made of a single component of type faces.CSSComponent, which is bound to the CSSComponent class. Finally, the renderer of type HTML.LinkOrInlineRenderer, implemented by the CSSRenderer class, is associated with the faces.CSSFamily family.

Go Graphical
You can also provide additional information if you want your component to integrate into a JSF-enabled IDE. For example, you can provide an XML configuration file named sun-faces-config.xml that describes the properties of the component that should be exposed in the IDE, as well as other design-time information.

Now that we've seen how to create a simple JSF component, let's look at how to create a graphical JSF component. We'll follow the same basic steps to design an advanced JSF graphical component. Let's use the example of a charting component, such as the ILOG JSF charting component, that provides a visual representation of the distribution of data values across a set of categories. The chart is able to display a dataset with various representations such as bars, pies, and bubbles. The JSF charting component has two initial design constraints:

• We already have a Java charting bean component that has all of the graphical presentation capabilities we want. This component can display a wide range of charts and is highly customizable. Ideally, we want to leverage this bean component and use its capabilities to form the basis of our JSF component.
• Common JSF applications need to reload the entire page to refresh the view. This behavior can be appropriate for form-based applications, but it is not appropriate in many cases for highly graphical user interfaces. Therefore, our JSF charting component needs to be able to handle some simple navigation without refreshing the entire page to provide a better user experience.

Here is a solution that satisfies these requirements: The JSF charting component will manage the chart bean component, which includes creating the chart bean, customizing the bean, and making the bean available for server-side actions. Rendering the JSF component will be done in two phases. The JSF renderer generates an <img> tag and a set of JavaScript objects (see Figure 2). The client will request an image from the server. This request is done by a servlet that retrieves the chart bean and generates an image using methods provided by the chart (see Figure 3). Any further user interactions (zooming, panning, changing a style sheet, and so on) that change the chart image only will result in an incremental refresh of the chart image only. If the client-side action requires more than just an update of the chart image, then the page will be submitted (see Figure 4).

The JSF charting component is also accompanied by a set of additional JSF components. An overview displays a global view of the chart, displays a rectangle representing the chart view, and also allows the user to pan the visible area. A legend component shows information about the displayed dataset and can also be displayed in the chart itself, depending on the style of the displayed data. Client-side interactors, such as pan and zoom, are also provided that can be seen as client-side interactions, meaning that interacting with the chart will not reload the entire page as is the case for a regular JSF interaction.