Layouts in JSF- Tiles

JSF- Tiles Integration:

In case of web applications we have to provide very good user interface to improve look and feel

To improve look & feel for the web application we have to organize all the web pages in a standardization manner.

2To organize web pages in a standard approach, we have to use layout mechanisms in web applications.

2To provide layout mechanisms in web application we have to use a separate frame work like tiles f/w provided by apache

2Tiles F/W is a commonly used f/w in almost all the web f/w like struts1, struts2,JSF,Spring..

2If we want to use tiles F/w in JSF based web appl ns then we have to use the following steps



Get all the files F/W Specific jar files in web app lib folder

2Commons- beanutils-1.6

2Commons- collections-3.2

2Commons- digester-1.8

2Commons- loggings-1.0.4

2Commons- struts



Configure tiles servlef in web. Xml file

The main requirement to Configure tiles servlet in web. Xml file is to load all the files definitions at the time at loading web application i.e at the time of web application  deployment i.e at the time at server start up

àIn files servlet configuration we have to provide” definitions-config” initialization parameter with the names and location of files configuration file i.e files-dfts.xml file



< web-app >

< servlet >

< servlet-name> faces servlet</ servlet-name>

< servlet-class> javax. Faces. Web app. Faces servlef </ >

<add-on-startup>1</ >

< /servlet >

< servlet >

< servlet name> titles servlet</ >

< servlet-class> org.apach.struts tiles servlet</ >


< param-name >definitions-config</ >

< param-value >/web-inf/tiles-dets.xml</ >


<load-on-startup>2</ >

< servlet-mapping>

< servlet name> faces servlet</>


< /web-app >

  • Where faces servlet load-on-startup values should be less when compared with tiles servlet’s load- on- startup value, because we must load faces servlet first then only/ tiles servlet.



Prepare layout page

The main purpose to prepare layout page is to define a particular template in order to organize all the web pages

  • In web appl n, we will use the following templates commonly to organize web pages





  • To prepare layout page with the either of the above templates we have to use files tag library and JSF care tag library

<tiles: insert attribute=”logical- name” flush=”false”/>

  • Where logical- name may be “HEADER”, ”MENU”, ”Footer”, ”Body”..<f:Subview id=”--”>


  • Where id attribute will takes an identify for the current sub view



<%@taglib prefix=”f”url=” / cone%>

<%@taglib prefix=”files”url=”WEB-INIF/”%>


<body >

<center >

<table height =”100%”width=”100%”>

<tr height =”20%”>

<td calspan =”2”align=”center” bg color=”maroon”>

</f:subview id=”header”>

<files: insert attribute=”HEADER”flush=”false”/ >

</f:subiview >



<tr height =”70%”>

<td width =”20%”bg color=”light blue”>

<f:subiview id=”menu” >

<files: insert attribute=” menu ”flush=”false”/ >

</f:subiview ></td>

<td bg color=”light yellow”>

</f:subiview id =”body”>

<files: insert attribute=” BODY ”flush=”false”/ >

</f:subiview >


<tr height =”10%”>

<td colspan=”2” bg color=”blue”>

</f:subiview id =”footer”>

<files: insert attribute=” FOOTER ”flush=”false”/ >

</f:subiview >






Prepare Tiles JSP page

In JSF-Tiles applications, each and every JSP Page is treated as a file, we can prepare only no. of JSP pages as per the applicationn requirement like header. JSP, footer.JSP, Log inform. JSP--



Prepare Tiles Configuration file

The main purpose of files configuration file is to provide as the file def ns which we are going to use in web appl ns

  • To prepare files definition in files Configuration file we have to use the following tags


< definitions name=”--”page=”/--”>

< put name=”--”value=”/--”>


<definition name=”--”extends=”/--”>

< put name=”--”value=”/--”>



  • Where ”name” attribute in< definitions >tag will take logical name to the definition.
  • Where ”page” attribute in< in definitions >tag will take logical jsp page
  • Where <put> tag will provide mapping bet n file logical name& files JSP Page.
  • Where ”name” attribute in< put >tag will take the logical name which are defined in files-dets.xml file and “value” attribute will take files JSP Page
  • In files configuration file, we can extend one def n to another def n s by using “extends” key word like java in heritance.



In clued tiles defines into JSP Pages

To include files defines into a JSP Page, we have to use the following tag from this tag library.

<files: insert definition=”--”flush=”false”/>

Where ”definition” attribute will take logical names of the def n available in files configurations file

Extract struts.jar2 meta-INF2tlds(get struts – files led) and kee in WEB. INF Folder)


RICH Faces

  1. RICH Faces is an advanced UI Component f/w for easily integrating Ajax capabilities into JSF Application?
  2. RICH Faces is designed on the basis of Ajax, it will improve the other areas of JSF like component Development, performance,..
  3. Rich faces are available in 2 component libraries Ajax controllers Rich faces components
  4. To get the above two libraries in xhtml pages are in JSP Pages, we have to use the following user are name spaces.

Ajax: http://rich faces. Org/arj

Rich faceshttp://rich faces. Org/rich

  1. Required jars

Commons-beanu fils-1.7.0 jar

Commons-collections-3.1 jar

Commons-digestere-1.8 jar

Commons-e1-1. 0 jar

Commons-email-1. 0 jar

Commons-file upload-1. 0 jar

Commons-lang-2.1 jar

Commons-logging-1.0.4 jar

Commons-calidator-1.3.1 jar

CSS Parser.0.9.5 jar

Lightlight-1.0. jar

Jste-1.0. jar

Rich faces-components-api-4.3.4. final.jar

Rich faces-components-ui-4.3.4. final.jar

Rich faces-core-api-4.3.4. final.jar

Rich faces-core-api-4.3.4. final.jar


Ojb bc6.jar