Jsf custom tag tutorial

by

JSF custom tag example:

JSF provides the facility to create custom tag to render a pre-defined content. A JSF custom tag uses “ui:composition” to insert content into the page.

Steps to create the JSF custom tag:

1. First create a predefined content in an XHTML page with ui:compisition tag.
2. Declares and define the custom tag details in a tag library descriptor.
3. Register the tag library descriptor in the web.xml file.

Example:

test.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:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:jwe="https://www.w3schools.blog/facelets">
<h:body>
	<h2>JSF custom tag example.</h2>
	<jwe:buttonPanel submitLabel="Submit" 
	                 cancelLabel="Cancel" />
</h:body>
</html>

buttonPanel.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:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<ui:composition> 
         <h:commandButton type="submit" value="#{submitLabel}" />
         <br/><br/>
         <h:commandButton type="reset" value="#{cancelLabel}" /> 
    </ui:composition>
</h:body>
</html>

w3schools.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>https://www.w3schools.blog/facelets</namespace>
   <tag>
      <tag-name>buttonPanel</tag-name>
      <source>buttonPanel.xhtml</source>
   </tag>
</facelet-taglib>

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

<?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">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
        </servlet-class>
    </servlet>
 
    <context-param>
      <param-name>
       javax.faces.FACELETS_LIBRARIES
      </param-name>
      <param-value>
       /WEB-INF/w3schools.taglib.xml
      </param-value>
    </context-param>
 
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample49/faces/test.xhtml

Output:

JSF example49-1
 
Download this example.