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.
To organize web pages in a standard approach, we have to use layout mechanisms in web applications.
To provide layout mechanisms in web application we have to use a separate frame work like tiles f/w provided by apache
Tiles F/W is a commonly used f/w in almost all the web f/w like struts1, struts2,JSF,Spring..
If 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
Commons- beanutils-1.6
Commons- collections-3.2
Commons- digester-1.8
Commons- loggings-1.0.4
Commons- 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=”–”>
</f:Subview>
- Where id attribute will takes an identify for the current sub view
Layout.JSP
<%@taglib prefix=”f”url=”http://java.sun.com/JSF / cone%>
<%@taglib prefix=”files”url=”WEB-INIF/Struts-files.ltd”%>
<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.jar meta-INFtlds(get struts – files led) and kee in WEB. INF Folder)
RICH Faces
- RICH Faces is an advanced UI Component f/w for easily integrating Ajax capabilities into JSF Application?
- RICH Faces is designed on the basis of Ajax, it will improve the other areas of JSF like component Development, performance,..
- Rich faces are available in 2 component libraries Ajax controllers Rich faces components
- 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
- 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
0 Responses on Layouts in JSF- Tiles"