Templates in JSF2
>> 02 December 2010
Le même article en français
Templates let you have a common layout or look used by multiple views.
Say you have a killer layout for your site, you want to use it with all your views. Without any change, or with customization.
Using a common stylesheet is good, but not a whole solution. What if you need to use exactly the same structure. Here is an example
jsf_style.css
<!--/* Masthead */
#masthead {
position:relative;
padding:10px;
background-color:#FFF;
height: 50px;
border: 1px #000 solid;
margin-right:18%;
}
/********************************************************************************
Sidebar
*******************************************************************************/
/* Sidebar */
#sidebar {
float:left;
padding:12px;
width:14%;
background-color:#fcb968;
border: 1px #c0c0c0 solid;
}
/********************************************************************************
Content
*******************************************************************************/
/* Content */
#content {
position:relative;
margin-left:16%;
margin-right:18%;
padding:12px;
border: 2px #fcb968 solid;
}
-->
layout.xhtml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>Using templates in JSF 2</title>
</head>
<body>
<!-- +++++++++++++++++++++++++++++++++MASTHEAD+++++++++++++++++++++++++++-->
<div id="masthead">
<h1 align="center">Using templates in JSF 2</h1>
</div>
<!-- +++++++++++++++++++++++++++ SIDEBAR AND LINKS +++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="#">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- +++++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
</div>
</body>
</html>
Display
To create a template
- Insert a namespace instruction
- For every place you want to customize put a "ui:insert" instruction with an attribute "name". The body of <u:insert can be overridden from a composition using <ui:define
- <ui:insert without a body has simply no default value
To use the previous example "layout.xhtml" as a template and customize the header of every composition (file that uses the template) :
- Add <ui:insert with a body. The same name attribute, will be used in the composition to override the body (with the instruction <ui:define). Note that the styling instruction (h1) is now outside <ui:insert>. If you do not provide a <ui:define name="header" the template will use the default <ui:insert> body. The same thing is done for <title>
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1>
- Create a composition, call it formation.xhtml (see create composition later) and define a content for the <ui:insert name="header"
layout.xhtml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</title></head>
<body>
<!-- +++++++++++++++++++MASTHEAD++++++++++++++++++++++++++++++++++++++++++++ -->
<div id="masthead">
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1></div>
<!-- +++++++++++++++++++SIDEBAR AND LINKS ++++++++++++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="formation.jsf">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- ++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<p>Line1</p>
<p>Line2</p>
<p>Line3</p>
</div>
</body>
</html>
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Formation in JSF 2 (Learning)
</ui:define>
</ui:composition>Note:
All parties of "layout.xhtml" that are not customized by <ui:isert> stay as is.
The header has now changed.
Display
Note:
In the same way, we can create another composition that uses the template with another custom header. Another composition for instance index.xhtml that does not provide a <ui:define name="header" will still use the default header value defined in the template.
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Testing
</ui:define>
</ui:composition>
Display
index.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
</ui:composition>
Display
I don't want a default in template
If you want to customize a section in the template without using a default text or style, you can use <ui:insert without a body. <ui:composition stays the same.Example
The party content has no default now. Text is different in compositions, and formation.xhtml uses <ol>
layout.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<LINK REL="StyleSheet" HREF="stylesheets/jsf_style.css" TYPE="text/css" />
<title>
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</title>
</head>
<body>
<!-- +++++++++++++++++++++MASTHEAD++++++++++++++++++++++++++++++++++++++ -->
<div id="masthead">
<h1 align="center">
<ui:insert name="header">
Using templates in JSF 2
</ui:insert>
</h1>
</div>
<!-- ++++++++++++++SIDEBAR AND LINKS +++++++++++++++++++++++++++++++++++++++ -->
<div id="sidebar">
<p><a href="formation.jsf">Formations</a></p>
<p><a href="#">Testing</a></p>
<p><a href="#">JSF 2</a></p>
</div>
<!-- +++++++++++++++++++++++CONTENT++++++++++++++++++++++++++++++++++++++++ -->
<div id="content">
<ui:insert name="content" />
</div>
</body></html>
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Testing
</ui:define>
<ui:define name="content">
<p>Line1 in Testing</p>
<p>Line2 in Testing</p>
<p>Line3 in Testing</p>
</ui:define>
</ui:composition>Display
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
Formation in JSF 2 (Learning)
</ui:define>
<ui:define name="content">
<ol>
<li>Line1 in Testing</li>
<li>Line2 in Testing</li>
<li>Line3 in Testing</li>
</ol>
</ui:define>
</ui:composition>Display
How to create a composition
- Use <ui:composition. "template" attribute's value is the full path to the template created previously.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
...
...
</ui:composition>
- Inside the composition use <ui:define to override, or replace every <ui:insert you want to customize in the template.
<ui:composition>
...
<ui:define name="header">
Testing
</ui:define>
...
</ui:composition>
Going further using <ui:include
If the text in <ui:define> is composed of more that one or two sentences, or even if it's only a sentence that you want to define it once to keep maintenance easy, you can use <ui:include>.Using <ui:include is straightforward. You give it as a "src" the path to the file to be included
Example :
formation.xhtml and testing.xhtml will use <ui:include to include another composition file "header.xhtml".
Note:
The file extension is .xhtml in <ui:include
<title> in template.xhtml does not use <ui:insert anymore
header.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:graphicImage url="images/logo.gif" width="100px" />
<br/>
<h:outputText value="http://www.java-javafx.com"/>
</ui:composition>
formation.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
<ui:include src="header.xhtml">
</ui:include>
<br/>
Formation in JSF 2 (Learning)
</ui:define>
<ui:define name="content">
<ol>
<li>Line1 in Testing</li>
<li>Line2 in Testing</li>
<li>Line3 in Testing</li>
</ol>
</ui:define>
</ui:composition>
testing.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"
template="layout.xhtml">
<ui:define name="header">
<ui:include src="header.xhtml">
</ui:include>
<br/>
Testing
</ui:define>
<ui:define name="content">
<p>Line1 in Testing</p>
<p>Line2 in Testing</p>
<p>Line3 in Testing</p>
</ui:define>
</ui:composition>
Display
Summary :
To create a template
=====================
-Insert a namespace instruction
xmlns:ui="http://java.sun.com/jsf/facelets"
-For every place you want to customize put a "ui:insert" instruction with an attribute "name".
This <ui:insert is replaced with the value of a <ui:define in a composition
The body of <u:insert can be used as a default text, if the <ui:define for the same name attribute is absent
<ui:insert name="attribute_name1" /> no default
or
<ui:insert name="attribute_name2">
Default text
</ui:insert>
How to create a composition
============================
-Use <ui:composition to define a composition. "template" attribute's value is the full path to the template to be used.
(with .xhtml extension)
-Use a namespace : xmlns:ui="http://java.sun.com/jsf/facelets"
-Inside the composition tag, use <ui:define to override, or replace every <ui:insert you want to customize in the template.
-You can use <ui:include> inside <ui:define to include a composition. "src" is the path to the file with .xhtml extension
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="path_To_Template_File.xhtml">
...
<ui:define name="attribute_name1">
Text that override template's text
</ui:define>
...
<ui:define name="attribute_name2">
<ui:include src="path_To_TheFile_To_Include.xhtml">
</ui:include>
</ui:composition>
Le même article en français
0 comments:
Post a Comment