JSF Template
Overview: In this article we will discuss about the implementation of JSF (JavaServer Faces) templates. The template design is an important aspect of any web application. Template is a re-usable component which is used to make web UI development easy and faster.
Introduction: JavaServer Faces is a java based framework for mainly UI component development. It is a server side technology as the states of the UI components are maintained in the server. The UI components are having their own defined life cycle and it follows the java enterprise edition standards (Java EE standards). JSF applications run in a web or application server like tomcat, weblogic, websphere, jetty etc.
JSF Template: A template can be defined as a common interface layout with same style and feature. A template is made as a re-usable component and it is used in all the pages of the application. The advantages of using template are
- Re-usability of the common layout
- Faster development
- Easier maintainability
- Easier enhancement/ modification
- Used as a plug-in component
JSF template is also having the above features. Following are some common facelets tags for providing common features on the UI layer. In the following section I will describe the functionalities of each and every tag.
- ui:insert: As the name suggests, it is used in a template and indicates what to be inserted in the template. It uses a ‘name’ attribute to identify the included page.
Listing 1: Sample displaying insert operation
[code]
<ui:insert name=”header” >
<ui:include src=”header.xhtml” />
</ui:insert>
[/code]
- ui:define :This tag is used to define the content/text to be inserted/replaced with a matching ui:insert tag. It actually replaces the default value (present in the template) with a custom content.
Listing2: Sample displaying define operation
[code]
<ui:define name=”header”>
<h2>Custom header text</h2>
</ui:define>
[/code]
- ui:include: This tag is used to simply include the content of one xhtml page into another xhtml page. This is just like ‘jsp:include’ tag in jsp pages.
Listing3: Sample displaying include operation
[code]
<ui:insert name=”content” >
<ui:include src=”contents.xhtml” />
</ui:insert>
[/code]
- ui:composition: This particular tag has two features. If it is used with a ‘template’ attribute, then it loads the template. The children of this tag are used to define the layout of the template. This tag can also be used to define the group elements and then these group elements are used inside the template.
Listing4: Sample displaying the usage of composition
Usage1: In template mode
[code]
<ui:composition template=”templates/commonheader.xhtml”>
<ui:define name=”header”>
<h2>Custom page 1 header</h2>
</ui:define>
</ui:composition>
[/code]
Usage2: In component mode
[code]
<body>
<ui:composition>
<h1>Default common header</h1>
</ui:composition>
</body>
[/code]
Following diagram shows the general components of a JSF template
Architecture of JSF template
Figure 1: Common architecture of a JSF template
In the following section we will discuss the step by step process to define a JSF template.
Step One: Here we will first create the header component of the template. Later this header component will be plugged-in with the template page. The content is a default one and will be replaced in the actual implementation with custom content. The composition tag has been used to define the header component.
Listing5: Sample displaying header component (header_name.xhtml)
[code]
<ui:composition>
<h1>Default header component</h1>
</ui:composition>
[/code]
Step Two: In step two we will create the footer component. Same composition tag will be used to define the footer.
Listing6: Sample displaying footer component (footer_name.xhtml)
[code]
<ui:composition>
<h1>Default footer component</h1>
</ui:composition>
[/code]
Step Three: In this step we will create the content file. The actual content will be replaced in the template later in the actual implementation. Again composition tag is used to define the content.
Listing7: Sample displaying content component (contents_name.xhtml)
[code]
<ui:composition>
<h1>Defaults content page</h1>
</ui:composition>
[/code]
Step Four: In this step we will create the template file (template.xhtml) with header.xhtml, footer.xhtml and contents.xhtml. These three components will be plugged into the template file which is another (.xhtml) file. We will use ui.insert and ui:include to add the components. The name attribute of the ui:insert tag will be used to identify the corresponding section and replace the content.
Listing8: Sample displaying template (template.xhtml)
[code]
<h:body>
<ui:insert name=”header_name” >
<ui:include src=”header_name.xhtml” />
</ui:insert>
<ui:insert name=”content_name” >
<ui:include src=”contents_name.xhtml” />
</ui:insert>
<ui:insert name=”footer_name” >
<ui:include src=”footer_name.xhtml” />
</ui:insert>
</h:body>
[/code]
Step Five: In this step we will show how to load the template file in a page (home_page.xhtml). In the first example we will load the template file with default content. And in the second example we will load the template and then override the default content ui: define tag. The ui: composition tag will be used in both the examples to load the template.
Listing 9: Sample loading the template with default content
[code]
<h:body>
<ui:composition template=”template.xhtml”>
</h:body>
[/code]
Listing 10: Sample loading the template with custom content
[code]
<h:body>
<ui:composition template=”templates/template.xhtml”>
<ui:define name=”content_name”>
<h:link value=”Page one” outcome=”page_one” />
 
<h:link value=”Page two” outcome=”page_two” />
</ui:define>
</ui:composition>
</h:body>
[/code]
Now in the following section we will create a complte example with all the components.
Create header: Create header file ‘header_comp.xhtml’. As described above this is the common component for header section of the UI layout. The application can use it directly or change the content with custom values.
Listing 11: Sample header file (header_comp.xhtml)
[code]
<?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>
<h1>This is the default header file</h1>
</ui:composition>
</body>
</html>
[/code]
Create footer: Create footer file ‘footer_comp.xhtml’. As described above this is the common component for footer section of the UI layout. The application can use it directly or change the content with custom values.
Listing 12: Sample footer file (footer_comp.xhtml)
[code]
<?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>
<h1>This is default footer page</h1>
</ui:composition>
</body>
</html>
[/code]
Create content page: The content file ‘content_comp.xhtml’ contains the content section of the UI layer. As described above this is the common component for content section of the UI layout. The application can use it directly or change the content with custom text.
Listing 13: Sample content file (content_comp.xhtml)
[code]
<?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>
<h1>This is default content page</h1>
</ui:composition>
</body>
</html>
Create template page: The template file contains all the three components. It is basically assembling all the common components. Then the template will be loaded into the actual page as per the requirement. The contents can be changed with ui:define tag.
Listing 14: Sample template file (template_comp.xhtml)
[code]
<?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:head>This is the header</h:head>
<h:body>
<div style=”border-width:4px; border-color:black; border-style:solid;”>
<ui:insert name=”header_comp” >
<ui:include src=”/templates/header_comp.xhtml” />
</ui:insert>
</div>
<br/>
<div style=”border-width:6px; border-color:black; border-style:solid;”>
<ui:insert name=”content_comp” >
<ui:include src=”/templates/content_comp.xhtml” />
</ui:insert>
</div>
<br/>
<div style=”border-width:4px; border-color:red; border-style:solid;”>
<ui:insert name=”footer_comp” >
<ui:include src=”/templates/footer_comp.xhtml” />
</ui:insert>
</div>
</h:body>
</html>
[/code]
Create sample page: Now we will create a sample page using the template created above.
Listing 15: Sample page with the template (sample_page.xhtml)
[code]
<?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 template=”templates/template_comp.xhtml”>
<ui:define name=”header_name”>
<h2>Sample header</h2>
</ui:define>
<ui:define name=”content_name”>
<h2>Sample content</h2>
<h:link value=”Home” outcome=”home_pg” />
</ui:define>
<ui:define name=”footer_name”>
<h2>Sample footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
[/code]
Conclusion: In this article we have discussed about the JSF components. We have also described different components of a template. At the end of the section we have built a complete page with a JSF template. Hope you have understood the basic concepts and enjoyed the article.
