Templates are a mechanism for laying out common page features.
They are demonstrated in the planets example which can be run
here.
The planets example uses a shared page layout that is used by all of its
web pages.
The layout defines four named variant features.
Individual web pages can plug in different content for these features:
-
windowTitle appears in the browser title bar and tab
-
Login page: "Welcome to the Planetarium"
-
Welcome page: "The Planetarium"
-
Planet pages: The name of the planet
-
titlebar is the panel at the top of the page display
-
Login page: "Welcome to the Planetarium"
-
Other pages: "The Planetarium"
-
sidebar is the panel at the left of the page display
-
Login page: One message and image
-
Other pages: Multiple images as links
-
content is the panel at the bottom right of the page display
-
Login page: Login form
-
Welcome page: Instructions
-
Planet pages: Information about the planet
In the layout template, some of the features define a default content.
This is useful when many of the web pages use the same content in a
feature.
The layout template for the planets application is defined in
masterLayout.xhtml.
This is an ordinary XHTML file except for the ui:insert tags:
-
Each
ui:insert tag names one of the variant features:
windowTitle, titlebar, sidebar, or content
-
If the
ui:insert tag has a body, it is used as default
content for the template
-
A
ui:include tag allow this content to come from
other files
-
Pages use this layout through a ui:composition tag that defines
what is to be inserted using ui:define tags in its body
Web Pages/templates/masterLayout.xhtml
Use ui:composition as in login.xhtml below to make use of
a template:
-
The ui:define tags in the composition correspond to the
ui:insert tags in the master layout template
-
When the template is loaded, each ui:insert tag is replaced
with the contents of the corresponding ui:define
-
Note use of ui:include to get content from another file
Since ui:composition uses a master layout page that already has
html, head, title, and body tags, Facelets
removes all tags outside the ui:composition tag,
explaining why the title is IGNORED.
Web Pages/login.xhtml
-
The included content is wrapped in a ui:composition tag so that
the surrounding tags are stripped
-
However, no template attribute is given because it is already
specified in the including file
Web Pages/sections/login/titlebar.xhtml
-
After the user logs in, the same master layout is used for the
rendered page planetarium.xhtml
-
Note that the titlebar and sidebar are not defined, so
the defaults are used
Web Pages/planetarium.xhtml
-
If the user has logged in and clicks on Saturn, the same master layout
is used again in
saturn.xhtml
-
Each of the planets uses the master layout in the same way
-
In a richer application, the content for each planet would be
in a separate file
Web Pages/saturn.xhtml
-
ui:insert —
Names a variant feature in a template file
-
ui:define —
Defines the content to be placed in a variant feature
-
ui:include —
Includes content from other XHTML pages
-
ui:composition —
Defines content as the target of a ui:include
To use these tags you must add the following attribute to
your html tag:
xmlns:ui="http://java.sun.com/jsf/facelets"