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

Step 3—Create a Custom Renderer Class
We've implemented the logic and the component that takes input from the page author and stores the values safely
with the StateHelper . Next we will need to implement the renderer that visualizes the component to the user.
It is actually possible to do this without a renderer by implementing the encodeXXX and decode methods on the
UIComponent . This may work well for smaller components and surely would work for our example as well, but this
approach is not scalable. The purpose of renderers is to separate the component logic from the rendering of the UI to
the user. Furthermore, a single component can have multiple renderers for creating different renditions on different
client devices. The markup being rendered for a desktop web browser may not be the same as the markup for a mobile
web browser. So even when you have a small component like our RandomText component it is still better to separate
the Renderer from the UIComponent . Figure 6-4 shows the abstract Renderer class that must be extended to implement
a Renderer for the RandomText component.

Figure 6-4. Abstract Renderer class that must be extended to create a Renderer for the custom component

The key methods to override in a Renderer are listed in Table 6-2 .

Table 6-2. Key Methods to Override When Creating a Renderer for a Custom Component

Method Description

Decode

Decodes any new state on the custom component for the current request. Override this
method when you expect to receive input from the user.

encodeBegin Render the beginning of the custom component to the response stream. Override this method

when you expect to encode child components and you want to output a response to the user
before doing so.

encodeChildren

Render the child components of the custom components. Override this method when you
want to change the way child components are encoded. By default child components are
encoded recursively using their respective renderers. Usually there is no need to override this
method unless you want to block the encoding of children or similar.

encodeEnd Render the ending of the custom component to the response stream. This is the most

common method to override. It is the last encoding method called on the renderer and is
usually the place where custom markup is generated and added to the response stream.

The RandomTextRenderer will extend Renderer and like the component we will annotate the Renderer with a
@FacesRenderer annotation. The annotation has two mandatory attributes: componentFamily and rendererType .
Component family is used to indicate for which component family the renderer is meant. Renderer type is an
identifier that is used to match the renderer with a component in the TLD. Step 4 will illustrate how to match the
rendered and component using the render type and component family.
The RandomTextComponent does not expect any child components and also it does not expect to take any input
from the user. The only method to be overridden is therefore the encodeEnd method. The encodeEnd method must
output a response containing a simple markup similar to that of Listing 6-5.