In JSF 2.0, you are allow to create your custom tag to render a pre-defined content. A custom tag is look like a normal JSF tag, and uses “ui:composition” to insert content into the page.

Here’s the summary steps to create a custom tag in JSF 2.0.

  1. Uses :ui:compisition” tag to create a predefined content in an XHTML page.
  2. Declares the custom tag in a tag library descriptor.
  3. Register the tag library descriptor in the web.xml.

Custom Tag Example

A guide to create a custom tag, which will insert two pre-defined submit and reset buttons into a page.

1. Custom Tag

Create a normal XHTML file to implement the custom tag, which uses “ui:composition” tag to group submit and reset button together.

WEB-INF/tags/com/mkyong/button.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:body>
       <ui:composition>
 
		<h:commandButton type="submit" value="#{buttonSubmitLabel}" />
		<h:commandButton type="reset" value="#{buttonResetLabel}" />
 
       </ui:composition>
    </h:body>
</html>

2. Tag Library

Define custom tag detail in a tag library descriptor file.

  1. namespace – Namespace of this tag library, create an unique name to avoid conflict.
  2. tag-name – Custom tag name.
  3. source – Implementation of the custom tag.

WEB-INF\mkyong.taglib.xml

<?xml version="1.0"?>
<!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://mkyong.com/facelets</namespace>
    <tag>
	<tag-name>button</tag-name>
	<source>tags/com/mkyong/button.xhtml</source>
    </tag>
</facelet-taglib>

3. Register in web.xml

Register the tag library in web.xml file.

 <!-- Load custom tag into JSF web application -->
 <context-param>
    <param-name>facelets.LIBRARIES</param-name>
    <param-value>/WEB-INF/mkyong.taglib.xml</param-value>
 </context-param>

4. Use Custom Tag

To use the custom tag, you have to declare its namespace on top, and use it like a normal JSF tag.

<?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:mkyong="http://mkyong.com/facelets"
      >
    <h:body>
    	<h1>Custome Tags in JSF 2.0</h1>
 
    	<mkyong:button 
    		buttonSubmitLabel="Submit" 
    		buttonResetLabel="Reset" />
 
    </h:body>
</html>

The “mkyong:button” custom tag will render one submit button and one reset button.

jsf2-custom-tag--example

Download Source Code

Download It – JSF-2-Custom-Tag-Example.zip (11KB)
Tags :
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

Related Posts

Popular Posts