In JSP, templating is achieved by defining a header.jsp and <jsp:include...> ing the header.jsp in each page. If header.jsp is changed, all pages that jsp:include header.jsp will automatically get that change. Thus the header content has been encapsulated in header.jsp and reused in multiple pages.
In JSF templating, there are 3 elements to templating
Element 1. Template
Defines layout of pages. Layout has markup to construct the structure of page (5, 6 & 7 in the example below) and sectionsnot standard terminology (1 in example below)that can be filled up with contents. Templates can optionally define default contents for sections (2 in example below defines a default, 3 and 4 don't define a default).
Example: template.xhtml<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head> 5 structure of layout
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title> 6 structure of layout
<ui:insert name="title"> 1 Defines a section named "title"
Default Title 2 Default contents for the "title" section
</ui:insert>
</title>
</head>
<body>
<div class="heading"> 7 structure of layout
<ui:insert name="heading"/> 3 A section named "heading" with no default contents
</div>
<div class="content">
<ui:insert name="content"/> 4 A section named "content" with no default contents
</div>
</body>
</html>
Element 2. Section ContentsNot standard terminology
These are contents that could go into any section defined in the template. For example, there could be one section-contents xhtml file for user login and another for new employee creation.
An user login page could look like this
Example: userLogin.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui::composition> <h:form>
<h:inputText
value="#{user.name}"/> 1 User name
<h:inputSecret
value="#{user.password}"/> 2 Password
<h:commandButton
action="#{userController.loginAction}"
<h:outputText value="#{msgs.login}"/> 3 Login button
</h:commandButton>
</h:form>
</ui:composition>
</html>
</html>
Element 3. Composition
The composition brings the template (template.xhtml in this example) and section contents (login.xhtml) together by specifying which section contents (each in its own xhtml) should go into which sections (defined in the template)Example: login.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/template.xhtml"> 1 This composition will use sections defined in template.xhtml <ui:define name="content"> 2 Child elements of this ui:define is the content of section named "content". The section named "content" is defined at 4 of template.xhtml.
<ui:include src="userLogin.xhtml"/>
</ui:define>
<ui:define name="heading">
User login heading 5 Contents of "heading" section
</ui:define>
</ui:composition>
</html> 6 This composition chooses not to override the "title" section (define at 1 of template.xhtml). So the default contents defined by template.xhtml will take effect.
By encapsulating the layout, it can be reused across multiple compositions.
[ Source ]
No comments:
Post a Comment