JavaServer Faces technology offers a basic set of standard UI components that enable quick and easy construction of user interfaces for web applications. These components mostly map one-to-one to the elements in HTML 4. However, an application often requires a component that has additional functionality or requires a completely new component. JavaServer Faces technology allows extension of standard components to enhance their functionality or to create custom components. In the next slides you`ll learn whey and when to use these custom component and how to use - custom tags - custom validator - custom converter Enjoy!

1. Custom Components
in JSF

2. UI components in JSF
• javax.faces.component.UIComponent
– Java class that is responsible for representing
a self-contained piece of the user interface
• Renderer
– helper to the UIComponent that deals with
how that specific UIComponent class should
appear in a specific kind of client device.

3. Why to use a custom renderer
• Separate the semantics of a component
from its appearance
• Support different kinds of client devices
with the same kind of authoring
experience
• Associate your custom component with
different renderers so that you can
render the component on different
clients.

4. When to use a custom component
• You need to add new behavior to a standard component, such as
generating an additional type of event
• You need to take a different action in the request processing of the
value of a component from what is available in any of the existing
standard components.
• You want to take advantage of an HTML capability offered by your
target browser, but none of the standard JavaServer Faces
components take advantage of the capability in the way you want, if
at all.
• You need to render to a non-HTML client that requires extra
components not supported by HTML.
– you might also need a custom renderer along with the component;
or you might need only a custom renderer.

5. When not to use a custom
component
• You need to aggregate components to create a new component that has its
own unique behavior
– use a composite component
• You simply need to manipulate data on the component or add application-
specific functionality to it.
– create a managed bean
• You need to convert a component’s data to a type not supported by its
renderer.
– use a converter
• You need to perform validation on the component data.
– use a validator
• You need to register event listeners on components.
– use the f:valueChangeListener and f:actionListener tags
or
– bind the component’s actionListener or valueChangeListener attributes
to a method in a managed bean

6. Composite components
• A special type of template that acts as a component
• Consists of a collection of markup tags and other
existing components
• Has a customized, defined functionality
• Can have validators, converters, and listeners attached
to it like any other component.
• Most common tags: composite:interface,
composite:implementation,
composite:attribute, composite:valueHolder,
composite:actionSource

7. Creating a composite component
• Create a .xhtml file, and declare the composite
namespace.
• Use composite tags composite:interface,
composite:attribute and
composite:implementation, to define content of
the composite component.
• Put composite components (“.xhtml” file) into
JSF’s resources folder
• Use the composite component
– The folder name of the composite components is
defined the component access path

8. Creating a custom tag
• Create a xhtml file and define contents in it
using ui:composition tag
• Create a tag library descriptor (.taglib.xml
file) and declares the above custom tag in
it.
• Register the tag library descriptor in
web.xml
• Use custom tag

9. Creating a custom validator
• Create a validator class by implements
javax.faces.validator.Validator interface.
• Override validate() method.
• Assign an unique validator ID via
@FacesValidator annotation.
• Reference custom validator class to JSF
component via f:validator tag.

10. Creating a custom converter
• Create a converter class by implementing
javax.faces.convert.Converter interface.
• Override both getAsObject() and
getAsString() methods.
• Assign an unique converter ID with
@FacesConverter annotation.
• Link your custom converter class to JSF
component via f:converter tag.

11. Q&A

12. Sources
• Oracle Docs. The Java EE 6 Tutorial.
http://docs.oracle.com/javaee/6/tutorial/doc/
• WebCenter Content Developer's Guide for Content Server. Chapter
15: Creating Custom Components.
http://docs.oracle.com/cd/E23943_01/doc.1111/e10807/c15_create_
custom_comp.htm#CSSDK1227
• M. Kyong. Custom Tags in JSF 2.0.
http://www.mkyong.com/jsf2/custom-tags-in-jsf-2-0/
• M. Kyong. Custom Converter in JSF 2.0.
http://www.mkyong.com/jsf2/custom-converter-in-jsf-2-0/
• M. Kyong. Custom Validator in JSF 2.0.
http://www.mkyong.com/jsf2/custom-validator-in-jsf-2-0/