email article printer friendly get the code more resources

Implement a Graphical JSF Component
See how simple it is to build a graphical Web application component that cannot be built easily using pure HTML
by Marc Durocher

April 7, 2005

Developers agree that having the right tools for creating interactive Web interfaces allow them to focus their time on core requirements and customization, and at the end of the day deliver applications on time. JavaServer Faces (JSF) technology brings many advantages to creating interactive Web applications versus other technologies such as JavaServer Pages or Apache Struts. JSF provides a clear separation between application logic and GUI presentation, improved maintenance capability for Web applications, and a framework for the development and reuse of Web UI components.

Many Web application developers are now migrating to use JSF, but they are finding the set of predefined JSF UI components limited to basic DHTML widgets. Advanced applications such as supervision or business-process monitoring need advanced visualization components that are compatible with the JSF framework. The JSF framework's standardization makes it easy to develop custom Web GUI components that can be reused. In addition, Web component vendors are now able to provide more sophisticated components, with the assurance that Web application developers will be able to easily take advantage of these components. Such JSF UI components must integrate and deploy cleanly into the JSF run-time framework and must integrate well at design time into IDEs that provide JSF support.

Despite the standard UI framework brought by JSF, there are several pitfalls and traps for the person developing their first custom JSF component. Let's look at how to build a graphical JSF component that cannot be built easily using pure HTML. The characteristics of a graphical JSF component require not only the generation of DHTML, but also some extra support for image generation and client-side interactions. We'll illustrate these characteristics with an example of a charting component that is designed to provide graphical charts, as well as various client-side navigation and interaction facilities. We'll also look at the steps required to integrate the chart component into a JSF-enabled IDE. By understanding the design of the charting component, you will have a better understanding of how a graphical JSF component can be implemented, which should allow you to develop your own custom JSF graphical components.