There are various UI components that JSF framework includes by default. Let us see some of the most useful ones to render a view. These are different from the traditional HTML tags.
Label Component
The tag is used to add a label in the view page. The ‘for’ attribute in the tag is used to associate the field as form element when the for attribute value matches with the id of the element.
Let’s add a label for the JSF page named label.xhtml
label.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Adding a Label</title>
</h:head>
<h:body>
<h3>Adding a label</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" value="#{car.cname}"></h:inputText>
<br /><br />
<h:outputLabel for="color">Car Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
</h:panelGrid>
</h:form>
</h:body>
</html>
Here the tag is used to add label “CarName” and “CarColor” which is associated with cname,color attribute of the text field as specified in the for clause.
Create a manged bean Car.java
Car.java
package com.journaldev.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class Car {
private String cname;
private String color;
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
To render a particular page after running the project, point the browser to the URL containing the xhtml page. For example , to render label.xhtml, run the project and then type in the complete url:
localhost:8080/JSF_Labels/faces/label.xhtml
Alternatively, you can also right click on the label.xhtml page and select “Run file” if you are using NetBeans IDE. This is a shown below.
Now run the application which displays the following output as shown below
Adding Image
The tag is used to render the image in the JSF view page. The url attribute tells the path from which the image should be picked up for display.
image.xhtml
<?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://java.sun.com/jsf/html">
<h:body>
<h3>Adding Images</h3>
<h:graphicImage value="/car.jpg" />
</h:body>
</html>
Here the url attribute specifies the path of the image.
Output:
The renders a submit button in the page where a user can enter the values with the associated text fields or UI elements and submit these to perform various operations.
button.xhtml
<?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>Add a button</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="cname">Car name</h:outputLabel>
<h:inputText id="cname" value="#{carLabel.cname}"></h:inputText>
<br /><br />
<h:commandButton id="submit" action="cardetails" value="Submit" />
</h:form>
</h:body>
</html>
Create the cardetails.xhtml page which displays the details of the car.
cardetails.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Car Details</title>
</h:head>
<h:body>
#{car.cname}
</h:body>
</html>
Above defined Car.java class will work for this.
Run the application after the above said changes and the below output is seen:
Adding Text Fields
JSF provides three varieties of text field tags.They include h:inputText – The tag adds a textbox next to the label field where user can enter the values.
inputtext.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Adding a Label</title>
</h:head>
<h:body>
<h:form>
<h3>Adding input Text</h3>
<h:panelGrid columns="3">
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" value="#{car.cname}"></h:inputText>
<br /><br />
<h:outputLabel for="color">Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
<br /><br />
</h:panelGrid>
</h:form>
</h:body>
</html>
After making the above said changes run the application which produces the following output in the browser as shown below:
h:inputSecret – This tag is used for password fields where the password entered is masked/hidden. The usage of this tag is as below.
Create a Managed Bean named Login which validates the entered username and password
Login.java
package com.journaldev.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class Login {
private String uname;
private String password;
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String UservalidOrnot() {
if(uname.equals("adam") && password.equals("adam")) {
return "success";
} else {
return "failure";
}
}
}
Create the JSF page for login page as;
login.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Login </title>
</h:head>
<h:body>
<h3>Hiding Input text</h3>
<h:form id="login">
<h:panelGrid columns="3">
<h:outputLabel for="uname">UserName:</h:outputLabel>
<h:inputText id="uname" value="#{login.uname}" ></h:inputText>
<br /><br />
<h:outputLabel for="password">Password</h:outputLabel>
<h:inputSecret id="password" value="#{login.password}"></h:inputSecret>
<br /><br />
<h:commandButton value="Submit" action="#{login.UservalidOrnot}"></h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
Now we create success and failure pages rendered respectively depending on the correct or incorrect username and password fields.
success.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Valid Username and Password
</h:body>
</html>
failure.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
UserName or password is invalid.Please Login with correct username and password.
</h:body>
</html>
Once we are done with the above said changes run the program.
Here the password entered is hidden from other users.
h:inputtextarea – This tag allows user to add text of huge number of characters/lines that does not fit into a text field. Examples include area for writing email content, feedbacks, product review details etc.
textarea.xhtml
<?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://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h3> Text area</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="description">Description:</h:outputLabel>
<h:inputTextarea id="description" value="The number of characters are very huge.It keeps on increasing based on the requirement"></h:inputTextarea>
<br /><br />
</h:panelGrid>
</h:form>
</h:body>
</html>
Output:
The project structure looks as below:
This post is all about adding UI components in JSF Framework view pages. We will be looking into JSF Resource Bundle and Custom Messages in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.