Custom Componentsin JSF

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.

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.

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.

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 tagsor – bind the component’s actionListener or valueChangeListener attributes to a method in a managed bean

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

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

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

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.

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.

Q&A

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/