Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create templates with JSF

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.

JSF(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

   <ui:insert name="header" >
      <ui:include src="header.xhtml" />
   </ui:insert>

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.

Listing 2: Sample displaying define operation

       <ui:define name="header">
           <h2>Custom header text</h2>
       </ui:define>

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.

Listing 3: Sample displaying include operation

   <ui:insert name="content" >
      <ui:include src="contents.xhtml" />
   </ui:insert> 

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.

Listing 4: Sample displaying the usage of composition

Usage 1: In template mode

<ui:composition template="templates/commonheader.xhtml">
         <ui:define name="header">
            <h2>Custom page 1 header</h2>
         </ui:define>			         	
</ui:composition> 

Usage 2: In component mode

<body>
      <ui:composition> 
         <h1>Default common header</h1>
      </ui:composition>	
</body>

Following diagram shows the general components of a JSF template.

Common architecture of a 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.

Listing 5: Sample displaying header component (header_name.xhtml)

<ui:composition> 
   <h1>Default header component</h1>	
</ui:composition>

Step Two

In step two we will create the footer component. Same composition tag will be used to define the footer.

Listing 6: Sample displaying footer component (footer_name.xhtml)

<ui:composition> 
   <h1>Default footer component</h1>	
</ui:composition>

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.

Listing 7: Sample displaying content component (contents_name.xhtml)

<ui:composition> 
   <h1>Defaults content page</h1>	
</ui:composition>

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.

Listing 8: Sample displaying template (template.xhtml)

<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>

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

<h:body>
   <ui:composition template="template.xhtml">	
</h:body>

Listing 10: Sample loading the template with custom content

<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>

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)

<?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>

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)

<?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>

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)

<?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)

<?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>

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)

<?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>	

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.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login