In this chapter, we will cover:
- Building a "HelloWorld" JSF custom component
- Renderers/validators for custom components
- Adding AJAX support to JSF custom components
- Using Proxy ID library for dynamic IPs
- Using JSF ID Generator
- Accessing resources from custom components
- Custom components with Archetypes for Maven
- RichFaces CDK and custom components
- Composite custom components with zero Java
- Creating a login composite component in JSF 2.0
- Building a spinner composite component in JSF 2.0
- Mixing JSF and Dojo widget for custom components
By default, JSF comes with a set of components divided into different categories. Depending on their usage, we have input components, output components, controls, buttons, menus, and so on. Every time we write a JSF page, we are using these components, such as HTML tags and so on. This happens because, in a JSF model, components are shipped with JSF and they have JSP bindings and generate HTML renderings.
As you will see over the course of the chapter, a JSF component is based on two major actions, known as decoding and encoding. These two notions are very important for you to understand how a JSF component works or how to write a new one, therefore, here are their definitions:
- Decoding: This is the action that converts the incoming request parameters to the values of the component
- Encoding: This is the action that converts the current values of the component into the corresponding markup (HTML)
These actions are available through two approaches:
- Direct Implementation: In this approach the component must implement the decoding and encoding actions.
- Delegated Implementation: In this approach the component delegates the job to a renderer that will do the encoding and decoding actions.
Now, let's take a high-level view over the JSF components lifecycle. For this we present you with the following figure, which should make things clear:
As you can see, the encoding action happens in Apply Request Values Phase, while the decoding happens in the Render Response Phase.
Now, let's make a step forward and let's talk about the implementation of JSF custom components. Let's overview the classes that we should write for creating a JSF custom component:
- UI Component: This is the component itself (the component logic). It extends the
UIComponentBaseor an existing JSFUIComponent. Optionally it can contain the logic to render the component, or rendering logic can be separated into another class. - Renderer: This class renders a component on different devices, such as PDAs, mobile browsers, and so on.
- UI Component Tag: This class represents a JSP tag handler class. It allows the UI Component to be used in a JSP. Optionally, it can provide a renderer class for the UI Component class.
- TLD document: This is a JSP tag library descriptor document, which associates the tag handler class with a tag in a JSP page.
- Other classes: Other custom helper classes such as converters, validators, listeners, and so on.
In this chapter, you will see a series of recipes that will show you how to implement JSF custom components, and obviously, the previous classes.
Note
Before deciding to implement a JSF custom component, don't forget to perform a detailed search on Google (or on your favourite search engine) to see if your component is already available under some project, such as PrimeFaces, MyFaces, RichFaces, IceFaces, ADF Faces, and so on. It may spare you the trouble.