Facelets

Chapter 6. Developing and Using Composition Components

6.1 What Are Composition Components?

Compositions are the core unifying idea of Facelets and the foundation of its reusability. Facelets treats view documents as a set of instructions for composing a tree of UIComponent instances (aka a Faces view). It can compose a UIComponent tree from either a single view document or multiple view documents. As its name implies, the ui:composition tag plays a key role in this framework—each ui:composition tag marks the start of a branch of UIComponent instances. There are several ways that you can use this tag. For example, it can define content that is included in another view, as shown in Example 8 in Chapter 3. Developing JSF Views with Facelets. Example 8 included views for each of the major sections of the page: header, left navigation, center content, right sidebar, and footer. Example 28 and Example 29 contain code fragments that demonstrate using the ui:composition tag in this way.

Example 28. Including a composition

<!--  including-view.xhtml  -->
<div id="left-navigation">
    <ui:include src="included-view.xhtml"/>
</div>
<!--  included-view.xhtml  -->
<ui:composition>
   <!-- left navigation content -->
</ui:composition>

In this example, the reusable content is in the included document. Facelets trims all tags and text outside of the ui:composition tag in the included document.

A template client also can use the ui:composition tag to weave in reusable content from a template document. Example 13 ...