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.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns=""   
		<h:commandButton type="submit" value="#{buttonSubmitLabel}" />
		<h:commandButton type="reset" value="#{buttonResetLabel}" />

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.


<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
  "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"

3. Register in web.xml

Register the tag library in web.xml file.

 <!-- Load custom tag into JSF web application -->

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" 
<html xmlns=""   
    	<h1>Custome Tags in JSF 2.0</h1>
    		buttonResetLabel="Reset" />

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


Download Source Code

Download It – (11KB)
Tags :
Founder of, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.
My website is hosted by Liquid Web, I really like their fast and helpful support, it saved me a lot of time. Furthermore, their servers are extremely reliable, fast and stable, I don't remember when was the last time we had server downtime. Btw, they're offering $100 Coupon now, if you are sourcing for great hosting provider, go grab it.

Related Posts

Popular Posts