The tags in this library add templating — a powerful view composition technique — to JSF. Templating is so useful that there are entire frameworks, such as Tiles and SiteMesh, that are built around the concept of templating. So what is templating, how can you benefit from it, and how does this tag library implement it?
If you've used JSP before, you've probably used
The prototypical example for
jsp:include is a header on each page in a web
application. One JSP page, say header.jsp,
encapsulates the header content, and the header is included by each
page. You encapsulate and reuse
content, so that changes to one file, header.jsp, affect the
header on every page.
This tab library contains a tag —
that's analagous to
but encapsulating and reusing content is only half the templating story,
because templating also lets you
encapsulate and reuse layout.
You define a single template (meaning layout), and
that template with multiple compositions. So now
you can control the layout of many pages with a single
template (layout). Let's take a look at an example.
First, we define a template:
In the preceeding listing, we've defined a layout, also known as a
template. That template uses the
ui:insert tag to insert pieces of a page — namely,
title, heading, and content —
defined in a composition. Notice that on line 8, we
define a default title, in case one isn't provided
by the composition. Also note that on line 12 we have the
tag, which lets the user activate
a popup window with debugging information by typing CTRL + Shift + d.
The title, heading, and content pieces of the page referenced in the template are defined in a separate XHTML file in a composition, like this:
At runtime, JSF synthesizes the two previous XHTML pages to create a
single JSF view by inserting the
pieces defined in the composition into the template (that template is
layout.xhtml, which is the first
listing above). JSF also disregards everything outside of the
tag so that we don't
wind up with two
body elements in the view.
Also, note that we use the
tag on line 14 to include content (which happens to be a table) from
another XHTML page, so that we can reuse
that table in other views.
So why do we have two XHTML pages to define a single view? Why not simply take the pieces and manually insert them into the layout so that we have only a single XHTML page? The answer is simple: we have separated layout from the content so that we can reuse that layout among multiple compositions. For example, now we can define another composition that uses the same layout:
By encapsulating the layout, we can reuse that layout among multiple
compositions. Just like
ui:include lets us encapsulate and reuse
conent, JSF compositions let us encapsulate and reuse
layout, so that changes to a single layout can affect multiple views.
Fundamentally, that's what this
tag library is all about.
|ID (tag prefix)||
This tag is the same as
Use this tag to create a component and
specify a filename for the component as either the source of a
Defines a composition that
optionally uses a template, as outlined in the description of the ui tag
library. Multiple compositions can use the same template, thus
encapsulating and reusing layout. JSF disregards everything outside of
the composition, which lets developers embed compositions in well-formed
XHTML pages that can be viewed in an XHTML viewer, such as Dreamweaver
or a browser, without including extraneous elements such as
Typically, the best place to put the
You can use the
Note ui:debug only works when the ProjectStage is set to Development.
Content defined by the
Because JSF does not disregard everything outside of the
Use this tag —which
is very similar to JSP's
You supply a filename, through
Inserts content into a template. That content is defined —with
Use this tag to pass parameters to an included file (using
Use this tag as an alternative to
Remove content from a page. This tag is often used in
conjunction with the