Javatpoint Logo
Javatpoint Logo

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.

JSF Facelets templates 1

2) Select JavaServer Faces and Facelets Template from categories and file types respectively.

JSF Facelets templates 2

3) Select CSS layout for the Facelets template file.

JSF Facelets templates 3

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

JSF Facelets templates 4




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA