Javatpoint Logo
Javatpoint Logo

JSF Composite Components

JSF provides the concept of composite components with Facelets. Composite component is a special type of template that acts as a component in your application.

A composite component consists of markup tags and other existing components. This reusable, user-created component has a customized, defined functionality and can have validators, converters, and listeners attached to it like any other component. Any XHTML page that contains markup tags and other components can be converted into a composite component.

The following tablecontains composite tags.

Tag Function
composite:interface It is used to declare the usage contract for a composite component. The composite component can be used as a single component whose feature set is the union of the features declared in the usage contract.
composite:implementation It is used to define the implementation of the composite component. If a composite:interface element appears, there must be a corresponding composite:implementation.
composite:attribute It is used to declare an attribute that may be given to an instance of the composite component in which this tag is declared.
composite:insertChildren It is used to inset child component within the composite component tag in the using page.
composite:valueHolder It is used to declare that the composite component whose contract is declared by the composite:interface in which this element is nested exposes an implementation of ValueHolder suitable for use as the target of attached objects in the using page.
composite:editableValueHolder It is used to declare that the composite component whose contract is declared by the composite:interface in which this element is nested exposes an implementation of EditableValueHolder suitable for use as the target of attached objects in the using page.
composite:actionSource It is used to declare that the composite component whose contract is declared by the composite:interface in which this element is nested exposes an implementation of ActionSource suitable for use as the target of attached objects in the using page.

In the following example, we are crating a composite component that accepts user name and an email address as input.


Creating Composite Component

Before creating composite component make sure you are using proper namespace which is given below.

// composite-component-example.xhtml

In the above example, the composite:interface tag is used to declare the configurable values. The composite:implementation tag is used to declare all the XHTML markups tag and cc.attrs.usernameis used to define the value of the inputText component. The ccis a reserved word for composite components in the JSF. The expression #{cc.attrs.attribute-name} is used to access the attributes defined for the composite component's interface.

The above code is stored as a file named composite-component-example.xhtml in a folder named resources/cominside the application web root directory.

JSF Facelets composite components 1

Using Composite Component

A web page that uses composite component is generally called a using page. The using page includes a reference to the composite component in the xml namespace declarations as given below:

Here, com is folder in which file is stored and co is a reference which is used to access component.

// index.xhtml

After running the project, we get the following user interface on the web page.

JSF Facelets composite components 2
Next TopicJSF Web Resources




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA