JSF – Adding Labels, Image, Button and Text Field in JSF View Pages

Filed Under: JSF

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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.

JSF_ADD_UI_Com_1

Now run the application which displays the following output as shown below

JSF_ADD_UI_Com_ 3

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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://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:

JSF_ADD_UI_Com_ 4

Adding Button

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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:

JSF_ADD_UI_Com_5

JSF_ADD_UI_Com_ 6

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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:

JSF_ADD_UI_Com_ 7

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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.

JSF-Labels-Login

Here the password entered is hidden from other users.

JSF_ADD_UI_Com_9

JSF_ADD_UI_Com_11

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://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:

JSF_ADD_UI_Com_12

The project structure looks as below:

JSF-UI-Tags-Project

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages