Facelets

Element conversion

In Facelets, templates tags from a tag library can be entered in two forms: directly as a qualified xml element or indirectly via the jsfc attribute on an arbitrary non-qualified element. In the latter case the Facelet compiler will ignore the actual element and will process the element as-if it was the one given by the jsfc attribute.

The following example shows the direct usage of qualified tags:

Using the jsfc attribute, the same code can also be expressed as the example given below:

The above code can be viewed in a browser, and edited with conventional WYSIWYG design tools. This is not possible when directly using the qualified tags. Nevertheless, directly using qualified tags is the most popular way of using Facelets in practice and is the style most used in books and examples.

Templating

Facelets provides a facility for templating. A Facelets file can reference a master template and provide content for the placeholders this master template defines. The file that references such a template is called the template client. Template clients themselves can again be used as a template for other template clients and as such a hierarchy of templates can be created.

The following shows an example of a simple master template:

templates/master_template.xhtml

The above code contains a default HTML 'frame' and a single placeholder called body_content. A template client can use this template as follows:

template_client.xhtml

The above code makes use of the template /templates/master_template.xhtml and provides content for the placeholder in that template. The final result will be a page called template_client.xhtml, which has the content of /templates/master_template.xhtml but with <ui:insert name="body_content"/> replaced by 'This is a template client page that uses the master template.'.

Content re-use

In addition to templating, Facelets provides support for re-use by letting the user include content that resides in a different file. Including such content can be done in 3 different ways:

Referencing a file

The simplest way to include the content of another Facelet is referencing it by name using the <ui:include> tag. This causes the content in the referenced file to be directly included in the calling Facelet by the Facelets compiler. Besides re-using content at multiple locations, this can be used to break down a large Facelet into smaller parts.

The following shows an example:

templates/master_template.xhtml

html_head.xhtml

Custom tags

Facelets supports indirection for including content via custom tags. Such a custom tag can be associated with a Facelet in taglib file. Occurrences of that tag will then be replaced with the content of the associated Facelet.

The following shows an example of this:

templates/master_template.xhtml

The code above uses the tag <my:spacer> to mark the point in the Facelet where content is to be inserted. Such a tag has to be declared in a Taglib file where it can be associated with a Facelet as follows:

example.taglib.xml

The following shows an example of what the actual content Facelet could look like:

spacer.xhtml

Composite components

Besides including content directly, Facelets provides the composite component mechanism that makes content available as a first-class JSF component. Composite components do not need to be declared in a Taglib file, but instead have to be put in a special directory. By convention the content is then automatically assigned a namespace and a tag name. The namespace is constructed of the fixed string 'http://java.sun.com/jsf/composite/' concatenated with the directory name in which the content file resides relative to the 'resources' directory. The tag name becomes the file name without the .xhtml suffix.

The following shows an example of this:

resources/my/spacer.xhtml

The above Facelet is automatically available as a component in namespace 'http://java.sun.com/jsf/composite/my' and tag name 'spacer'

Parameterized includes

To customize included content, Facelets allows parameters to be used. Via those parameters objects can be passed into the included content, where they can be used as variables. For the <ui:include> mechanism the <ui:param> can be used for this, while for the custom tags and composite components normal tag attributes can be used. Composite components require parameters to be declared in their interface section, while for custom tags there is no such requirement and values provided for arbitrary attributes are made available as variables with the same name as said attribute.