Going Deep: JSF Custom Components - JSF and HTML5 - page 144

As a component writer you can write two types of custom components, non-composite components and composite
components. Non-composite components were part of the very first version of JSF and all standard components are
built as non-composite components. Composite components were introduced in JSF 2 and simplify component creation
through the Facelets View Declaration Language (VDL). Non-composite components are implemented in Java code and
require knowledge about the JSF component architecture.
When you develop JSF custom components you must be familiar with a couple of core classes and files. These are
UIComponent , Renderer , and the tag library descriptor (TLD).
UIComponent is an abstract class for which all JSF components extend. UIComponent is responsible for the data,
state, and behavior of the component. In some simple cases it may also be responsible for rendering the output but it
should be avoided to utilize the power of renderers. Renderer is also an abstract class which custom components
can create to control the rendering of the UI of the component to the user. Every component (or component library)
must have a TLD file that exposes the UIComponent as a tag and matches each UIComponent with the appropriate
Renderer . The TLD file is packaged in the META-INF/ directory of a stand-alone library or in the WEB-INF/ directory
if it is packaged with the web application using the components. The name of the TLD file is typically
_COMPONENT-NAME_.taglib.xml , e.g., mycomponents.taglib.xml . The TLD file is referenced in a context parameter in
the web.xml file. The relationship among the three entities can be seen in Figure 6-1 .

Figure 6-1. The two core classes in component development and how they bind together

You can also couple custom components with other custom helpers such as validators, converters, and event
listeners as described in chapters 3 and 4.
Creating a JSF custom component takes a four-step approach.

1. Create the component model and logic

2. Create the custom component class (deriving from UIComponent or one of its subtypes)

3. Create a custom renderer class if the custom component delegates the rendering

4. Create a TLD file that defines and exposes the component and renderer as a tag

Now let's go into the steps in more detail.

The RandomText Custom Component
We will illustrate the implementation of a custom component by stepping through the development of a
component that generates random text from a web service called RandomText hosted at www.randomtext.me .
The purpose of the component is to generate some random text based on input from the user or page author. The
component could be used simply to generate random text or page authors could use it to insert placeholders on
pages during development.