com.sun.faces.metadata.taglib.faces.facelets.taglib.xml Maven / Gradle / Ivy
Jakarta Faces Facelets Tag Library
The tags in this
library add templating — a powerful view composition
technique — to Faces. 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 Jakarta Server Pages before, you've probably used jsp:include
.
The prototypical example for
jsp:include
is a header on each page in a web
application. One Jakarta Server Pages 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 —ui:include
—
that's analagous to jsp:include
,
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
you reuse
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.
A Templating Example
First, we define a template:
- <!DOCTYPE html>
- <html xmlns:ui="jakarta.faces.facelets">
- <head>
-
<link
href="styles.css"
rel="stylesheet"
type="text/css"/>
-
<title><ui:insert
name="title">Default Title</ui:insert></title>
- </head>
-
- <body>
-
<ui:debug/>
-
<div
class="heading">
-
<ui:insert
name="heading"/>
-
</div>
-
-
<div
class="content">
-
<ui:insert
name="content"/>
-
</div>
- </body>
- </html>
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 ui:debug
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:
- <!DOCTYPE html>
- <html xmlns:ui="jakarta.faces.facelets">
- <body>
- <ui:composition
template="/layout.xhtml">
-
-
<ui:define
name="title">A List of Contacts</ui:define>
-
<ui:define
name="heading">Contacts</ui:define>
-
-
<ui:define
name="content">
-
<ui:include
src="contactsTable.xhtml"
/>
-
</ui:define>
-
- </ui:composition>
- </body>
- </html>
At runtime, Faces synthesizes the two previous XHTML pages to create a
single Faces view by inserting the
pieces defined in the composition into the template (that template is
layout.xhtml, which is the first
listing above). Faces also disregards everything outside of the composition
tag so that we don't
wind up with two body
elements in the view.
Also, note that we use the ui:include
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:
- <!DOCTYPE html>
- <html xmlns:ui="jakarta.faces.facelets">
- <body>
- <ui:composition
template="/layout.xhtml">
-
-
<ui:define
name="title">Create a Contact</ui:define>
-
<ui:define
name="heading">Create Contact</ui:define>
-
-
<ui:define
name="content">
-
<ui:include
src="createContactForm.xhtml"/>
-
</ui:define>
-
- </ui:composition>
- </body>
- </html>
By encapsulating the layout, we can reuse that layout among multiple
compositions. Just like
ui:include
lets us encapsulate and reuse
conent, Faces 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.
]]>
jakarta.faces.facelets
This tag is the same as
ui:composition
, except for two things: Faces creates a
component and adds it directly to the tree, and there's no associated
template.
Use this tag to create a component and
specify a filename for the component as either the source of a
ui:include
, or the source of a Facelets tag.
]]>
component
com.sun.faces.facelets.tag.ui.ComponentRefHandler
The identifier of the component that Faces inserts into the
component tree. If an identifier is
not explicitly specified by the page author, Faces will assign an
identifier based on the algorithm
that it uses for all components.