JSF Composite Components - JavaServer Faces (JSF)

What is JSF Custom Component?

Developers are facilitated to define their own custom components as desired,which can be used for rendering custom contents.

Define JSF Custom Component

JSF Custom component is defined in a two-step process.

Step
Description
1a
Create a resources folder.
Create a xhtml file in resources folder with a composite namespace.
1b
Use composite tagscomposite:interface, composite:attributeandcomposite:implementation,to define content of the composite component. Usecc.attrsincomposite:implementationto get variable defined usingcomposite:attributeincomposite:interface.

Step 1a: Create Custom Component : loginComponent.xhtml

A folder wisdomjobs is created in the resources folder and a file loginComponent.xhtml is created in the folder. In html header, composite namespaces are used.

Step 1b: Use Composite Tags : loginComponent.xhtml

The use of composite tags is described as follows.

S.No
Tag & Description
1
composite:interface
Declares configurable values to be used in composite:implementation.
2
composite:attribute
Configuration values are declared using this tag.
3
composite:implementation
Declares JSF component. Can access the configurable values defined in composite:interface using #{cc.attrs.attribute-name} expression.

How to use JSF Custom Component?

Using a custom component in JSF is a simple process.

Step
Description
2a
Create a xhtml file and use custom component's namespace. Namespace will thehttp://java.sun.com/jsf/<folder-name> where folder-name is folder in resources directory containing the custom component
2b
Use the custom component as normal JSF tags

Step 2a: Use Custom Namespace: home.xhtml

Step 2b: Use Custom Tag: home.xhtml and Pass Values

Example Application

A test JSF application is created to test the custom component in JSF.

Step
Description
1
Create a project with a namehelloworldunder a packagecom.wisdomjobs.testas explained in theJSF - First Applicationchapter.
2
Createresourcesfolder undersrc mainfolder.
3
Createwisdomjobsfolder undersrc main resourcesfolder.
4
CreateloginComponent.xhtmlfile undersrc main resources wisdomjobsfolder.
5
ModifyUserData.javafile as explained below.
6
Modifyhome.xhtmlas explained below. Keep the rest of the files unchanged.
7
Compile and run the application to make sure the business logic is working as per the requirements.
8
Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
9
Launch your web application using appropriate URL as explained below in the last step.

loginComponent.xhtml

UserData.java

home.xhtml

Once all the changes are done, the application is compiled and run as in JSF – Create Application chapter. On successful creation of the application, the result appears as:

JSF Custom Component

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JavaServer Faces (JSF) Topics