Creating Custom UI Components and Other Custom Objects - The Java EE 6 Tutorial: Advanced Topics - page 117

The @FacesRenderer annotation registers the renderer class with the JavaServer Faces
implementation as a renderer class. The annotation identifies the component family as
well as the renderer type.
To perform the rendering for AreaComponent , AreaRenderer must implement an
encodeEnd method. The encodeEnd method of AreaRenderer retrieves the shape,
coordinates, and alternative text values stored in the ImageArea bean that is bound to
AreaComponent . Suppose that the area tag currently being rendered has a value at-
tribute value of “ book203 ”. The following line from encodeEnd gets the value of the
attribute “ book203 ” from the FacesContext instance.
ImageArea ia = (ImageArea)area.getValue();
The attribute value is the ImageArea bean instance, which contains the shape , co-
ords , and alt values associated with the book203 AreaComponent instance.
“ Configuring Model Data ” on page 103 describes how the application stores these values.
After retrieving the ImageArea object, the method renders the values for shape ,
coords , and alt by simply calling the associated accessor methods and passing the
returned values to the javax.faces.context.ResponseWriter instance, as
shown by these lines of code, which write out the shape and coordinates:
Click here to view code image
writer.startElement("area", area);
writer.writeAttribute("alt", iarea.getAlt(), "alt");
writer.writeAttribute("coords", iarea.getCoords(), "coords");
writer.writeAttribute("shape", iarea.getShape(), "shape");
The encodeEnd method also renders the JavaScript for the onmouseout , on-
mouseover , and onclick attributes. The Facelets page need only provide the path to
the images that are to be loaded during an onmouseover or onmouseout action:
Click here to view code image
<bookstore:area id="map3" value="#{Book203}"
onmouseover="resources/images/book_203.jpg"
onmouseout="resources/images/book_all.jpg"
targetImage="mapImage"/>
The AreaRenderer class takes care of generating the JavaScript for these actions, as
shown in the following code from encodeEnd . The JavaScript that AreaRenderer
generates for the onclick action sets the value of the hidden field to the value of the
current area's component ID and submits the page.