Facelets Templating in JSF 2.0

Exclusive offer: get 50% off this eBook here
Java EE 6 Development with NetBeans 7

Java EE 6 Development with NetBeans 7 — Save 50%

Develop professional enterprise Java EE applications quickly and easily with this popular IDE

$29.99    $15.00
by David R. Heffelfinger | June 2011 | Java Open Source

JSF 2.0 greatly simplifies web application development. JPA 2.0 features a new criteria API and several other enhancements. EJB session beans have been enhanced to support asynchronous method calls as well as a few other enhancements.

In this article by David R. Heffelfinger, author of Java EE 6 Development with NetBeans 7, we will cover:

  • How to easily generate JSF 2.0 templates via NetBeans wizards
  • How to easily create JSF 2.0 composite components with NetBeans

 

Java EE 6 Development with NetBeans 7

Java EE 6 Development with NetBeans 7

Develop professional enterprise Java EE applications quickly and easily with this popular IDE

        Read more about this book      

(For more resources on Java, see here.)

One advantage that Facelets has over JSP is its templating mechanism. Templates allow us to specify page layout in one place, then we can have template clients that use the layout defined in the template. Since most web applications have consistent layout across pages, using templates makes our applications much more maintainable, since changes to the layout need to be made in a single place. If at one point we need to change the layout for our pages (add a footer, or move a column from the left side of the page to the right side of the page, for example), we only need to change the template, and the change is reflected in all template clients.

NetBeans provides very good support for facelets templating. It provides several templates "out of the box", using common web page layouts.

Java EE 6 Development with NetBeans 7

We can then select from one of several predefined templates to use as a base for our template or simply to use it "out of the box".

Java EE 6 Development with NetBeans 7

NetBeans gives us the option of using HTML tables or CSS for layout. For most modern web applications, CSS is the preferred approach. For our example we will pick a layout containing a header area, a single left column, and a main area.

After clicking on Finish, NetBeans automatically generates our template, along with the necessary CSS files.

The automatically generated template looks like this:

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet"
type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet"
type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>

As we can see, the template doesn't look much different from a regular Facelets file.

Adding a Facelets template to our project

We can add a Facelets template to our project simply by clicking on File | New File, then selecting the JavaServer Faces category and the Facelets Template file type.

Notice that the template uses the following namespace: xmlns:ui="http://java.sun.com/jsf/facelets. This namespace allows us to use the <ui:insert> tag, the contents of this tag will be replaced by the content in a corresponding <ui:define> tag in template clients.

Using the template

To use our template, we simply need to create a Facelets template client, which can be done by clicking on File | New File, selecting the JavaServer Faces category and the Facelets Template Client file type.

Java EE 6 Development with NetBeans 7

After clicking on Next >, we need to enter a file name (or accept the default), and select the template that we will use for our template client.

Java EE 6 Development with NetBeans 7

After clicking on Finish, our template client is created.

<?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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
top
</ui:define>
<ui:define name="left">
left
</ui:define>
<ui:define name="content">
content
</ui:define>
</ui:composition>
</body>
</html>

As we can see, the template client also uses the xmlns:ui="http://java.sun.com/jsf/facelets" namespace. In a template client, the <ui:composition> tag must be the parent tag of any other tag belonging to this namespace. Any markup outside this tag will not be rendered; the template markup will be rendered instead.

The <ui:define> tag is used to insert markup into a corresponding <ui:insert> tag in the template. The value of the name attribute in <ui:define> must match the corresponding <ui:insert> tag in the template.

After deploying our application, we can see templating in action by pointing the browser to our template client URL.

Java EE 6 Development with NetBeans 7

Notice that NetBeans generated a template that allows us to create a fairly elegant page with very little effort on our part. Of course, we should replace the markup in the <ui:define> tags to suit our needs.

Here is a modified version of our template, adding markup to be rendered in the corresponding places in the template:

<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
<h2>Welcome to our Site</h2>
</ui:define>
<ui:define name="left">
<h3>Links</h3>
<ul>
<li>
<h:outputLink value="http://www.packtpub.com">
<h:outputText value="Packt Publishing"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.ensode.net">
<h:outputText value="Ensode.net"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.ensode.com">
<h:outputText value="Ensode Technology,
LLC"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.netbeans.org">
<h:outputText value="NetBeans.org"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.glassfish.
org">
<h:outputText value="GlassFish.org"/>
</h:outputLink>
</li>
<li>
<h:outputLink
value="http://www.oracle.com/technetwork/
java/javaee/overview/index.html">
<h:outputText value="Java EE 6"/>
</h:outputLink>
</li>
<li><h:outputLink value="http://www.oracle.com/
technetwork/java/index.html">
<h:outputText value="Java"/>
</h:outputLink></li>
</ul>
</ui:define>
<ui:define name="content"> <p>
In this main area we would put our main text,
images, forms, etc. In this example we will simply
use the typical filler text that web designers
love to use.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nunc venenatis, diam nec tempor dapibus, lacus
erat vehicula mauris, id lacinia nisi arcu vitae purus. Nam
vestibulum nisi non lacus luctus vel ornare nibh pharetra.
Aenean non lorem lectus, eu tempus lectus. Cras mattis nibh
a mi pharetra ultricies. In consectetur, tellus sit amet pretium
facilisis, enim ipsum consectetur magna, a mattis ligula massa
vel mi. Maecenas id arcu a erat pellentesque vestibulum at
vitae nulla. Nullam eleifend sodales tincidunt. Donec viverra
libero non erat porta sit amet convallis enim commodo. Cras
eu libero elit, ac aliquam ligula. Quisque a elit nec ligula
dapibus porta sit amet a nulla. Nulla vitae molestie ligula.
Aliquam interdum, velit at tincidunt ultrices, sapien mauris
sodales mi, vel rutrum turpis neque id ligula. Donec dictum
condimentum arcu ut convallis. Maecenas blandit, ante
eget tempor sollicitudin, ligula eros venenatis justo, sed
ullamcorper dui leo id nunc. Suspendisse potenti. Ut vel
mauris sem. Duis lacinia eros laoreet diam cursus nec
hendrerit tellus pellentesque.
</p>
</ui:define>
</ui:composition>
</body>

After making the above changes, our template client now renders as follows:

Java EE 6 Development with NetBeans 7

As we can see, creating Facelets templates and template clients with NetBeans is a breeze.

 

Java EE 6 Development with NetBeans 7 Develop professional enterprise Java EE applications quickly and easily with this popular IDE
Published: June 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Java, see here.)

Composite components

A very nice JSF 2.0 feature is the ability to easily write custom JSF components. With JSF 2, creating a custom component involves little more than creating the markup for it, with no Java code or configuration needed. Since custom components are typically composed of other JSF components, they are referred to as composite components.

We can generate a composite component by clicking on File | New, selecting the JavaServer Faces category and the JSF Composite Component file type.

Java EE 6 Development with NetBeans 7

After clicking on Next >, we can specify the file name, project, and folder for our custom component.

Java EE 6 Development with NetBeans 7

To take advantage of JSF 2.0's automatic resource handling and conventions, it is recommended that we don't change the folder where our custom component will be placed.

When we click on Finish, NetBeans generates an empty composite component that we can use as a base to create our own.

<?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:cc="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<cc:interface>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
</cc:implementation>
</html>

Every JSF 2.0 composite component contains two sections, an interface and an implementation.

The interface section must be enclosed inside a <cc:interface> tag. In the interface, we define any attributes that our component will have.

The implementation section contains the markup that will be rendered when we use our composite component.

In our example, we will develop a simple component which we can use to enter the addresses. That way, if we have to enter several addresses in an application, we can encapsulate the logic and/or display in our component. If later we need to change the address entry (to support international addresses, for example), we only need to change our component and all address entry forms in our application will be updated automatically.

After "filling in the blanks", our composite component now looks like this:

<?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:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="addrType"/>
<cc:attribute name="managedBean" required="true"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:panelGrid columns="2">
<f:facet name="header">
<h:outputText value="#{cc.attrs.addrType} Address"/>
</f:facet>
<h:outputLabel for="line1" value="Line 1"/>
<h:inputText id="line1" value="#{cc.attrs.managedBean.
line1}"/>
<h:outputLabel for="line2" value="Line 2"/>
<h:inputText id="line2" value="#{cc.attrs.managedBean.
line2}"/>
<h:outputLabel for="city" value="City"/>
<h:inputText id="city" value="#{cc.attrs.managedBean.
city}"/>
<h:outputLabel for="state" value="state"/>
<h:inputText id="state" value="#{cc.attrs.managedBean.
state}" size="2" maxlength="2"/>
<h:outputLabel for="zip" value="Zip"/>
<h:inputText id="zip" value="#{cc.attrs.managedBean.zip}"
size="5" maxlength="5"/>
</h:panelGrid>
</cc:implementation>
</html>

We specify attributes for our component via the <cc:attribute> tag. This tag has a name attribute used to specify the attribute name, and an optional required attribute that we can use to specify if the attribute is required.

The body of the <cc:implementation> tag looks almost like plain old JSF markup, with one exception, by convention, we can access the tag's attributes by using the #{cc.attrs.ATTRIBUTE_NAME} expression to access the attributes we defined in the component's interface section. Notice that the managedBean attribute of our component must resolve to a JSF managed bean. Pages using our component must use a JSF expression resolving to a managed bean as the value of this attribute. We can access the attributes of this managed bean by simply using the familiar .property notation we have used before, the only difference here is that instead of using a managed bean name in the expression, we must use the attribute name as defined in the interface section.

Now we have a simple but complete composite component, using it in our pages is very simple.

<?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:ezcomp="http://java.sun.com/jsf/composite/ezcomp">
<h:head>
<title>Address Entry</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1">
<ezcomp:address managedBean="#{addressBean}"
addrType="Home"/>
<h:commandButton value="Submit" action="confirmation"
style="display: block; margin: 0
auto;"/>
</h:panelGrid>
</h:form>
</h:body>
</html>

By convention, the namespace for our custom components will always be xmlns:ezcomp="http://java.sun.com/jsf/composite/ezcomp". This is why it is important not to override the default folder where our component will be placed, as doing so breaks this convention. NetBeans provides code completion for our custom composite components, just like it does for standard components.

In our application, we created a simple managed bean named addressBean. It is a simple managed bean with a few properties and corresponding getters and setters, therefore it is not shown. We use this bean as the value of the managedBean attribute of our component. We also used an addressType of "Home", this value will be rendered as a header for our address input component.

After deploying and running our application, we can see our component in action:

Java EE 6 Development with NetBeans 7

As we can see, creating JSF 2.0 composite components with NetBeans is a breeze.

Summary

In this article we saw how we can significantly save time and effort by allowing NetBeans to generate JSF 2.0 templates, including generating the necessary CSS to easily create fairly elegant pages. Then we saw how NetBeans can help us develop JSF 2.0 custom components.


Further resources on this subject:


Java EE 6 Development with NetBeans 7 Develop professional enterprise Java EE applications quickly and easily with this popular IDE
Published: June 2011
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


David R. Heffelfinger

David Heffelfinger is the Chief Technology Officer of Ensode Technology, LLC, a software consulting firm based in the greater Washington DC area. He has been architecting, designing and developing software professionally since 1995 and has been using Java as his primary programming language since 1996. He has worked on many large scale projects for several clients including the US Department of Homeland Security, Freddie Mac, Fannie Mae, and the US Department of Defense. He has a Masters degree in Software Engineering from Southern Methodist University. David is editor in chief of Ensode.net (http://www.ensode.net), a website about Java, Linux, and other technology topics.

Books From Packt


NetBeans IDE 7 Cookbook
NetBeans IDE 7 Cookbook

Java EE 6 with GlassFish 3 Application Server
Java EE 6 with GlassFish 3 Application Server

Learning Ext JS 3.2
Learning Ext JS 3.2

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

Apache Wicket Cookbook
Apache Wicket Cookbook

BlackBerry Java Application Development
BlackBerry Java Application Development

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Learning jQuery 1.3
Learning jQuery 1.3


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software