Home › Add a parameter to a facelet template

Add a parameter to a facelet template 

Fang
Joined:
08/13/2009
Posts:
164

October 31, 2011 21:10:10    Last update: October 31, 2011 21:13:10
In this example I'll add a parameter to a facelets template. The example contains three tabs, each tab points to a different page. The tab control is shared among all pages, therefore, it is put in the template.

Starting from the simple facelet example, make these additions:
  1. Create a new template WEB-INF/templates/tabs.xhtml: 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Facelets Template Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    body {
	font-family: arial,sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
    }

    ul {
	margin: 0;
	padding: 0;
    }

    div {
	padding: 0 10px;
    }

    .nav-tabs {
	background-color: #333;
	height: 32px;
	border-top: #333 2px solid;
    }

    .nav-tabs li {
	float: left;
	margin: 0 1px;
	padding: 0;
	list-style: none outside none;
    }

    .nav-tabs li a {
	color: #666;
	background-color: #BBB;
	border-bottom: 1px solid #999;
	display: block;
	font-size: 1.16em;
	font-weight: bold;
	line-height: 31px;
	padding: 0 10px;
	text-decoration: none;
    }

    .nav-tabs li.active a {
	background-color: #FFF;
	color: #666;
	border-bottom: 1px solid #FFF;
    }
    </style>
    </h:head>

    <h:body>
    <div class="nav-tabs">
	<ul>
	    <li class="#{tab eq 'about' ? 'active' : ''}">
		<a href="about.jsf">About Us</a>
	    </li>
	    
	    <li class="#{tab eq 'news' ? 'active' : ''}">
		<a href="news.jsf">News</a>
	    </li>
	    
	    <li class="#{tab eq 'partner' ? 'active' : ''}">
		<a href="partner.jsf">Partners</a>
	    </li>
	</ul>
    </div>

    <div id="tab-content">
    <ui:insert name="tab-content"></ui:insert>
    </div>
    </h:body>
</html>

  2. Add a page for the about tab (about.xhtml): 
    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   template="/WEB-INF/templates/tabs.xhtml">
    <ui:param name="tab" value="about"/>

    <ui:define name="tab-content">
	<h2>About Us</h2>
    </ui:define>
</ui:composition>

  3. Add a page for the news tab (news.xhtml): 
    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   template="/WEB-INF/templates/tabs.xhtml">
    <ui:param name="tab" value="news"/>

    <ui:define name="tab-content">
	<h2>Recent News</h2>
    </ui:define>
</ui:composition>

  4. Add a page for the partner tab (partner.xhtml): 
    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   template="/WEB-INF/templates/tabs.xhtml">
    <ui:param name="tab" value="partner"/>

    <ui:define name="tab-content">
	<h2>Join Our Partner Network!</h2>
    </ui:define>
</ui:composition>


Build and re-deploy the application. Launch the browser and load page http://localhost:8080/facelet-demo/about.jsf.

This is a screenshot:

Share |
| Comment  | Tags