Introduction to Facelets

September 26, 2010

Writing Custom Tags

In the final section of the article, we will see how to write custom tag definitions using Facelets. We will extend the display of the menu items as a custom tag. As with all tag definition frameworks, writing custom tag invokes the declaration of the tag in an xml file, providing the implementation of the tag and then finally using it in a client page.

Download Example Code for Facelets

Facelets Example Code

Tag Definition

Here is the listing for the tag definition. It defines two tags ‘verticalMenu’ and ‘horizontalMenu’ in the namespace ‘http://

Tag Definition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems,
Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd" >
<facelet-taglib>
 
	<namespace>http://<pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1".net/facelets</namespace>
 
	<tag>
		<tag-name>verticalMenu</tag-name>
		<source>../tags/verticalMenu.xhtml</source>
	</tag>
 
	<tag>
		<tag-name>horizontalMenu</tag-name>
		<source>../tags/horizontalMenu.xhtml</source>
	</tag>
 
</facelet-taglib>

Vertical Menu
In the implementation of the tag 'verticalMenu', we have imitated that logic that we used in the last section which iterates over the collection for displaying the menu items horizontally.
verticalMenu.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core">
 
	<ui:component>
		<c:forEach var="menuItem" items="#{menus}">
			<a href="#{menuItem.url}">#{menuItem.name}</a>
			<br/>
		</c:forEach>
	</ui:component>
 
</html>

Horizontal Menu
Similarly for the implementation of the tag 'horizontalMenu', we have ensured that the menu items are displayed horizontally leaving the line break tag.
horizontalMenu.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core">
 
	<ui:component>
		<c:forEach var="menuItem" items="#{menus}">
			<a href="#{menuItem.url}">#{menuItem.name}</a>
		</c:forEach>
	</ui:component>
 
</html>

Tag Inclusion
Once these tags are defined, the application's deployment descriptor has to be updated with the tag definition file so that the application accessing the tag has the visibility. The code snippet for the inclusion of the tag definition file is given below.



1
2
3
4
5
6
<context-param>
	    ..
    <param-name>facelets.LIBRARIES</param-name>
    <param-value>/WEB-INF/facelets/custom.xml</param-value>
    ..
    </context-param>

Home Page
The final version of the home page making use of the custom tag is given below. The very first thing that it does is defining the prefix 'jb' pointing to the namespace 'http://
homePage.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:jb="http://<pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1".net/facelets" >
 
	<ui:composition template="templates/template.xhtml">
 
		<ui:define name="leftSideMenu">
			<jb:verticalMenu menus="#{menuBackingBean.leftSideMenuItems}"/>
		</ui:define>
 
		<ui:define name="content">
			Welcome to <pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1"... Here you can see references <br/>
			to Articles, Tips and Mock Questions for Java, J2EE,<br/>
			Spring, Hibernate and other platform.<br/>
		</ui:define>
 
		<ui:define name="rightSideMenu">
			<jb:horizontalMenu menus="#{menuBackingBean.rightSideMenuItems}"/>
		</ui:define>
 
	</ui:composition>
</html>

The definition of the logical areas 'leftSideMenu' and 'rightSideMenu' have been updated with the usage of the custom tag. Note the usage of the tags 'jb:horizontalMenu' and 'jb:verticalMenu' and the passing of the named parameter 'menus'.

Facelets - Tag Demo Application.
Conclusion
This article attempted an introduction to the facelets Framework by providing a brief discussion of the various components. The article initially dealt with the starter application that discussed the various aspects suitable for the setup of a Facelets application. It then went on to details of the templating aspects of Facelets through the ui:composition, ui:define and ui:insert tags. Discussion on backing beans and passing parameters from one facelet page to another facelet page is also discussed along with ui:component tag. Finally the article concluded with writing custom tag libraries.
email
print
«»
Comments
 comments


Related posts:

JSF 1.2 Facelets Components
Introduction to Ajax4Jsf
Introduction to JSF Core Tags Library
Introduction to JSFUnit