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.
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.
