JSF provides a special set of tags that gives the flexibility to manage common tags/parts in one place for more than one application. These tags allow us to create a common layout that can be used across applications.
To use the Facelet tags in the JSF page include the following namespace.
|
1 2 3 4 5 6 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" > |
The following tags are provided by the Facelet tags.
<ui:component> tag
The <ui:component> tag creates a new component and specifies the filename in ui:include tag or in the source of facelet tag. Any text used outside this tag will be ignored by the facelet tag view handler.
The component attributes supported by this tag are;
binding: Binds the component to the backing bean property as specified
class: represents the CSS class name
id: unique identifier of the component
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example of using the ui:component tag by creating a JSF page carcomponent.xhtml as below.
carcomponent.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:ui="https://xmlns.jcp.org/jsf/facelets"> <h:head> <title>UI Component tag</title> </h:head> <h:body> <ui:component> Hello!!! </ui:component> Hi You there? </h:body> </html> |
The text inside the ui:component tag will be displayed in the output and the text outside this tag will be ignored, as shown in the below image.
<ui:composition> tag
The <ui:composition> tag provides a template encapsulating the content to be included in the other facelet.
The attributes supported by this tag are;
class: The CSS component class name
id: unique identifier for the component
parent: reperesents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set,implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
template: inserts the piece of page such as layout defined in the composition.
The ui:composition tag is used in conjunction with the ui:insert tag shown in the example of ui:insert tag.
<ui:decorate> tag
This tag decorates the current JSF page including the content of another facelet. Decorating includes a layout, header, footer etc.
The tag attributes are;
class: The Component CSS class name
id: unique identifier for the component
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type.If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example of decorate tag by wrapping the data in a border and color by creating a JSF page named decorate.xhtml.
decorate.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core"> <h:head> <title>Decorate tag example</title> </h:head> <h:form> <h:panelGrid columns="3" border="2" bgcolor="cyan" cellpadding="2" cellspacing="2"> <f:facet name="caption"> <ui:insert name="caption" /> </f:facet> <ui:insert name="text" /> <ui:insert /> </h:panelGrid> </h:form> </html> |
Here we specify the styles border, color, cellpadding, cellspacing, caption tag and text tag to be inserted.
Create cardecorate.xhtml as;
cardecorate.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Decorate</title> </h:head> <h:body> <ui:decorate template="decorate.xhtml"> <ui:define name="caption"> <h:outputText value="Car Names List" /> </ui:define> <h:outputText value="Zen" /> <h:outputText value="Innova" /> <h:outputText value="Alto" /> <h:outputText value="Qualis" /> <h:outputText value="Polo" /> <h:outputText value="Santro" /> </ui:decorate> </h:body> </html> |
Here we specify the values to be displayed for the caption and text tags and also the decorate template mentioning the decorate.xhtml file. Below image shows the output produced.
<ui:define> tag
This tag defines the content to be inserted into the page by a template. The name attribute value must match with the <ui:insert> tag of the target template to be included.
The tag attributes are;
name: assigns a name to the content inside a define tag.
class: The Component CSS class name.
id: unique identifier for the component
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set,implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
The define tag can be used as
|
1 2 3 4 5 |
<ui:define name="title">Car World</ui:define> <ui:define name="header">List Of Cars</ui:define> <ui:define name="message">Alto,Zen,Innova</ui:define> |
The define tag and insert tag is used in combination to print the values in the insert tag. We will look at the example in the later sections of the post.
<ui:fragment> tag
The <ui:fragment> tag includes the new UI component instance into the JSF Component tree. JSF does not discard the contents outside this tag.
The tag attributes are;
binding: Binds the component to the backing bean property as specified
class: represents the CSS class name
id: unique identifier of the component
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example for this tag by creating a JSF page fragment.xhtml as;
fragment.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head /> <body> <h:form> <ui:fragment> <div>Welcome to the Car World</div> </ui:fragment> How can i help you? </h:form> </body> </html> |
Here the contents outside the tag is also displayed in the output along with the contents within the <ui:fragment> tag.
<ui:include> tag
This tag includes the component in the src attribute as a part of the current JSF page. The filename in the src attribute is relative to the XHTML file that was rendered as a result of the last request.
The attributes are;
src: the file whose contents to be included in the jsf page.
class: represents the CSS class name
id: unique identifier of the component
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example where we want to include an header for the current JSF page from another page.
include.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:f="https://java.sun.com/jsf/core" xmlns:h="https://java.sun.com/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head /> <body> <f:view> <h:form> <ui:include src="https://www.journaldev.com/7012/head.xhtml"></ui:include> Alto <br><br> Santro <br><br> Zen <br><br> VolksWagen </h:form> </f:view> </body> </html> |
Here we include a file “head.xhtml” to display the header information with the “src” attribute of <ui:include> tag.
Create head.xhtml file as;
head.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h1>List Of Cars Available</h1> </h:body> </html> |
Here we include a header tag <h1> with text in it. Below is the output produced by this.
<ui:insert> tag
This tag inserts the contents into a template.
The tag attributes are;
class: represents the CSS class name
id: unique identifier of the component
name: optional attribute that matches the associated tag in the template.
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Create a JSF view page insert.xhtml as
insert.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head> <title><ui:insert name="title" /></title> </h:head> <body> <h2> <ui:insert name="header" /> </h2> <ui:insert name="message" /> </body> </html> |
Here we include the title, header and messages by defining their values in another jsp page message.html
Create message.xhtml as;
message.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html"> <h:head /> <body> <ui:composition template="insert.xhtml"> <ui:define name="title">Car World</ui:define> <ui:define name="header">List Of Cars</ui:define> <ui:define name="message">Alto,Zen,Innova</ui:define> </ui:composition> </body> </html> |
Here we define values for title, header and message and include the insert.xhtml created above.
<ui:param> tag
This tag is used to pass the parameters to an included file or a template.
The attributes are;
name: name of the parameter.
value: value of the parameter.
class: represents the CSS class name.
id: unique identifier of the component.
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example where we want to print a text in the output with the help of param tag.
Create a bean Welcome.java as;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
package com.journaldev.jsf.beans; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class Welcome { private String w1 = "Welcome!!!"; public String getW1() { return w1; } public void setW1(String w1) { this.w1 = w1; } } |
Here we initialize the value to variable w1 and include getter setter methods to fetch the values.
Create welcome.xhtml as;
welcome.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <ui:param name="w1" value="#{welcome.w1}" /> <h3>#{w1}</h3> </h:body> </html> |
Here we use ui param tag and use w1 variable and fetch the value from the welcome bean class into w1 variable and use this variable to print the value.
<ui:remove> tag
This tag removes the content from a page.This tag is used in conjunction with the facelets for additional markup.
The attributes are;
class: represents the CSS class name.
id: unique identifier of the component.
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
Consider an example where we want remove a part of the text from the JSF page. Create carremove.xhtml page as;
carremove.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h:form> Alto Car has power windows <br> <ui:remove> Alto is a good Car </ui:remove> <br> Alto Car gives a good mileage </h:form> </h:body> </html> |
Here we are enclosing the message “Alto is a good Car” in the <ui:remove> tags. So this statement will be excluded in the output.
<ui:repeat> tag
The <ui:repeat> tag iterates over a collection of objects exposed to the page.
The attributes are;
value: name of the collection that the tag iterates.
var: name of the exported value for the current item of iteration.
class: represents the CSS class name.
id: unique identifier of the component.
offset: read write property setting offset from the beginning of the collection from which to start iteration.
parent: represents the parent component for the child or a facet.
rendered: flag that indicates whether the component should be rendered or not.
renderedType: If this property is set, operations during the request processing lifecycle will be delegated to render instance of the type. If this is not set, implement these methods directly.
size: size of the collection to iterate
step: Starting from the first one, iteration will process every step in the list of items.
transient: boolean flag set to true indicates that this component must not be included in the state of component tree.
varStatus: Name of the exported variable for status of the iteration.
Consider an example for the ui:repeat tag;
There is a list of car names and we have to fetch all the names in the jsf page
Create a bean named Car.java as;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.journaldev.jsf.beans; import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class Car { private String carname; private List<Car> cars; public Car(String carname) { this.carname = carname; } public String getCarname() { return carname; } public void setCarname(String carname) { this.carname = carname; } public Car() { } public List<Car> getCars() { if (cars == null) { cars = new ArrayList<Car>(); cars.add(new Car("Innova")); cars.add(new Car("Qualis")); cars.add(new Car("Scorpio")); cars.add(new Car("Xylo")); } return cars; } } |
Here we declare list and insert car names into the list with the add method of the list.
Create car.xhtml page as
car.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://xmlns.jcp.org/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h:form> <ol> <ui:repeat value="#{car.cars}" var="car"> <li><h:outputText value="#{car.carname}" /></li> </ui:repeat> </ol> </h:form> </h:body> </html> |
We use ui:repeat tag to iterate over the list of cars and fetch the values from Car.java bean.
Below image shows the output produced.
Finally below image shows the project structure.
You can download the project from below link and play around with it to learn more.