Facelets Templates
It is a tool which provides the facility to implement the user interface. Templating is a useful Facelets feature that allows you to create a page that will act as the base for the other pages in an application. By using templates, you can reuse code and avoid recreating similarly pages again and again. Templating also helps in maintaining a standard look and feel in an application with a large number of pages.
The following table contains Facelets tags that are used for creating templates.
Templates Tags
| Tag | Function |
|---|---|
| ui:component | It is used to define a component that is created and added to the component tree. |
| ui:composition | It is used to define a page composition that optionally uses a template. Content outside of this tag is ignored. |
| ui:debug | It is used to define a debug component that is created and added to the component tree. |
| ui:decorate | It is similar to the composition tag but does not disregard content outside this tag. |
| ui:define | It is used to define content that is inserted into a page by a template. |
| ui:fragment | It is similar to the component tag but does not disregard content outside this tag. |
| ui:include | It is used to encapsulate and reuse content for multiple pages. |
| ui:insert | It is used to insert content into a template. |
| ui:param | It is used to pass parameters to an included file. |
| ui:repeat | It is used as an alternative for loop tags, such as c:forEach or h:dataTable. |
| ui:remove | It is used to remove content from a page. |
Creating Facelets Template
Creating template involves the following steps. Here, we are using Net Bean IDE to create the Facelets Template.
1) Creating new file.
2) Select JavaServer Faces and Facelets Template from categories and file types respectively.
3) Select CSS layout for the Facelets template file.
The Facelets tag library includes the main templating tag ui:insert. A template page which is created with this tag allows you to define a default structure for a page. We can use template page as a template for other pages.
// template.xhtml
The above template file is divided into four sections: a top section, a left section, a content section and a main section. We can further reuse this structure for the other pages of the application.
// index.xhtml
In index file, we have used png images to represent template layout. You can place your own images to execute this project.
ui:composition tag is used to implement template into the index.xhtml file.
ui:define tag is used to insert content into the implemented template.
Output:
// index page
