Layouts in JSF- Tiles

Blog Author


Published Date

17th September, 2018




  • Share this blog :

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   Step-1 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   Step-2 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.xml < 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</ > <init-Param> < param-name >definitions-config</ > < param-value >/web-inf/tiles-dets.xml</ > </init-param> <load-on-startup>2</ > < servlet-mapping> < servlet name> faces servlet</> <url-pattern>*.add</> < /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.

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

  Layout.JSP <%@taglib prefix=”f”url=” / cone%> <%@taglib prefix=”files”url=”WEB-INIF/”%> <html> <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 > </td> </tr> <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 > </td></tr> <tr height =”10%”> <td colspan=”2” bg color=”blue”> </f:subiview id =”footer”> <files: insert attribute=” FOOTER ”flush=”false”/ > </f:subiview > </td></tr> </table> </html>   Step-4 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--   Step-5 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

<files-definitions> < definitions name=”--”page=”/--”> < put name=”--”value=”/--”> </definition> <definition name=”--”extends=”/--”> < put name=”--”value=”/--”> </definition> </files-definitions>

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

  Step-6 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 Sac-1.3.jar Ojb bc6.jar      

About Author


Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .

Related Blogs

Write For Us