Introduction
A fundamental set of industry-standard UI components are provided by JavaServer Faces technology, making it simple and rapid to create user interfaces for web applications. The majority of these parts correspond directly to HTML 4 elements. However, a component with more features or a brand-new component is frequently needed by an application.
Custom Tag in JSF
Facelets, enable us to create our own tags. A customized tag resembles a typical JSF tag. To add content to the page, though, it makes use of Facelets' composition system. Java classes that implement the UIComponentBase interface or XHTML code fragments can both be used to create custom JSF tags.
Define Custom Tags
A custom tag in JSF is defined using the <ui:composition> tag. The new tag's characteristics are defined simply by mentioning them in the Expression Language markup.
In JSF, creating a custom tag in JSF is a three-step procedure.
Step 1: Make an XHTML file and specify its contents with the ui:composition tag.
Step 2: Create a tag library descriptor (.taglib.xml file) and define the custom tag mentioned above.
Step 3: Add the tag library descriptor to web.xml.
Declare Tag Library
Before a custom tag in JSF can be used, it must be declared in a tag library file that contains:
The namespace which is mapped to prefixes in XHTML documents.
The name of each tag and the location of its declaration is in the source file.
Register Tag Library
Finally, a <context-param> tag must be added to the web.xml configuration file to register the tag library file.
Using Custom Tag in JSF
In JSF, using a custom tag is a two-step procedure.
Step 1: Make an XHTML file and utilize the namespace of the custom tag library.
Step 2: Use the custom tag in JSF the same way as any other JSF tag.
Example
We will be going through the steps of creating a Custom Tag in JSF in detail. This example shows how to make a unique JSF component.
faces-config.xml:
<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
</faces-config>web.xml:
We will be updating our 'web.xml' file as below:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<context-param>
<param-name>
javax.faces.PROJECT_STAGE
</param-name>
<param-value>
Development
</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/codingninjas.taglib.xml</param-value>
</context-param>
<servlet>
<servlet-name>faces</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>faces</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>codingninjas.taglib.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.codingninjas.com/facelets</namespace>
<tag>
<tag-name>buttonPanel</tag-name>
<source>com/codingninjas/buttonPanel.xhtml</source>
</tag>
</facelet-taglib>home.xhtml:
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:tp = "http://tutorialspoint.com/facelets">
<h:head>
<title>CodingNinjas Custom Tag</title>
</h:head>
<h:body>
<h2>CodingNinjas Custom Tags Example</h2>
<hr>
<tp:buttonPanel
submitLabel = "Submit"
resetLabel = "Reset" />
</h:body>
</html>
bottonPanel.xhtml:
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
<h:head>
<title>CodingNinjas Custom Tag</title>
</h:head>
<h:body>
<ui:composition>
<h:commandButton
type = "submit"
value = "#{submitLabel}" />
<h:commandButton
type = "reset"
value = "#{resetLabel}" />
</ui:composition>
</h:body>
</html>Output
We will be getting the following output when we run the JSF project. The output will be displayed in 'http://localhost:8000/customtag/faces/home.xhtml'.
Now, we have a custom example shown as output, let's discuss some benefits and shortcomings of a custom tag:
Advantages
The following are the advantages of Custom Tag in JSF.
- Custom tags let the user have self-created JSF tags which can be reused. Thus saving precious time.
- Custom tags in JSF are based on existing concepts and equipment, so we don't have to reinvent and a lot of effort is saved.
Disadvantages
The following are the disadvantages of Custom Tag in JSF.
- Custom Facelets tags lack the power of full-fledged JSF components.
- We cannot add functionality to the Facelets custom tag, such as validators or listeners. We cannot, for example, add an action listener to the javabeat:tutorial tag.
38+ registered 
