JSF Text Components – Label, Text Field, Text Area and Password

Filed Under: JSF

The Text components allows the user to add, view and edit data in a form of a web application.

JSF text component includes

Label: A read only text that tells the user what the field name is

Text Field: An editable field to enter the data.

Text Area: User can enter the data that accepts more characters than the text field and can be scrolled easily to enter and view the data.

Input secret text Field: The password and other sensitive information can be hidden from the users by displaying asterix or dot in the text field.

JSF Label

To use the labels in the JSF page include the following namespace in the JSF page as;


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

The <h:outputLabel> tag is used to add labels in a JSF page. Some of the attributes are;

accesskey: Focus is transferred to this elements when pressed.

class: The component class name for including CSS styles.

for: associates with another component attribute with the name specified in “for “.

id: uniquely identifies a component.

escape: indicates the characters sensitive to HTML and XML must be omitted by setting to true.

onblur: Javascript code to execute when the focus on an element is lost

styleClass: CSS class name to be applied while rendering the component

tabindex: Order in which the element is focused by using the Tab key.

value: Sets the value for the current component.

onfocus: Javascript code to execute when the element is focussed.

onclick: javascript code to be executed on click when the mouse pointer is clicked over this element.

ondblclick: Javascript code to be executed on double clicking this element.

Consider an example of adding a label to a JSF page.

textlabel.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>Facelet Title</title>
</h:head>
<h:body>
	<h:panelGrid columns="3">
		<h3>Adding a Text Label</h3>
		<h:outputLabel for="mname">Mobile Company Name:</h:outputLabel>
		<br />
		<br />
		<h:outputLabel for="color">Mobile Color:</h:outputLabel>
		<br />
		<br />
		<h:outputLabel for="model">Mobile Model Number:</h:outputLabel>
	</h:panelGrid>
</h:body>
</html>

Above JSF page produces following output in the browser.

JSF-Text-Components-1

JSF Text Field

The <h:inputText> tag is used to add text fields to the JSF page where user can enter data for the fields.

Some of the attributes of this tag are;

id: unique identifier for the component

alt: Sets the textual description for a component

autocomplete: If the value is set to off the browser disables autocomplete feature for this component.If the value is set to on the autocompletion is performed without browser interfering.

disabled: flag when set to true indicates that the focus should not be received or include during submission of a form

immediate: Component events should be sent immediately rather than before the validation phase.

label: localized name for the component

maxlength: Maximum number of characters allowed for the field.

readonly: restricts user from editing the value of the field.

size: sets the width for the characters

required: set to true indicates that the value is mandatory for this field on submitting the form.

requiredMessage: the message that should be displayed on submit of the form.

value: sets the current value for the component.

Consider an example of adding text fields for name, color and model fields of a mobile. Create a page textfield.xhtml as;

textfield.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>Text fields</title>
</h:head>
<h:body>
	<h3>Adding a Text fields for Mobile</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Company Name:</h:outputLabel>
			<h:inputText id="mname"></h:inputText>
			<br />
			<br />

			<h:outputLabel for="model">Model Number:</h:outputLabel>
			<h:inputText id="model"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText id="color"></h:inputText>
			<br />
			<br />
		</h:panelGrid>
	</h:form>

</h:body>
</html>

When we load the above page on browser, we get below output.

JSF-Text-Components-2

JSF Text Area

The text area allows user to add multiple lines of text and submit the form.The <h:inputTextarea> tag is used to add a text area in the JSF page.

The attributes of the textarea tag are;

cols: indicates the number of columns to be displayed.

onchange: Javascript code to be executed when the value changes after gaining focus.

onclick: Javascript code to be executed on click of an element

onmousemove: Javascript code to be executed when the mouse pointer is moved within the element.

onmouseout: Javascript code to be executed when the mouse pointer is moved away from the element.

onselect: Javascript code to be executed when the user selects the text for this element.

readonly: user cannot change the value of the text field.

rows: Set the number of rows to be displayed.

value: sets the current value for the component.

rendered: indicates whether the component should be rendered or not.

lang: indicates the language to be used for markup.

Create a JSF page textdescription.xhtml as;

textdescription.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>Text fields</title>
</h:head>
<h:body>
	<h3>Adding a Text fields for Mobile</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Company Name:</h:outputLabel>
			<h:inputText id="mname"></h:inputText>
			<br />
			<br />

			<h:outputLabel for="model">Model Number:</h:outputLabel>
			<h:inputText id="model"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText id="color"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="specifications">Specifications</h:outputLabel>
			<h:inputTextarea cols="14" rows="4" style="width:150">
			</h:inputTextarea>

		</h:panelGrid>
	</h:form>
</h:body>
</html>

Below image shows the output produced by above JSF page;

JSF-Text-Components-3

JSF Password Field

The <h:inputSecret> tag is used for password fields where the entered data is displayed in the form of asterix or dot’s for enforcing security on the sensitive information.

Some of the attributes of the tag are;

id: unique identifier for the component

validator: calls the validator method that validates a particular JSF component.

validatormessage: the message that will be displayed to the user upon the validation of a JSF component instead of the built-in standard message.

value: sets the current value for the component

rendered: indicates whether the component should be rendered or not.

maxlength: number of characters allowed for the component.

redisplay: indicates whether the previously entered password should be displayed or not.

onclick: Javascript to be executed on click of the button for the component.

readonly: indicates that the value cannot be edited by the user.

onblur: Javascript to be executed when the element loses the focus.

size: indicates the width of the characters to be entered.

style: indicates css styles that can be applied for a component.

Create a page named login.xhtml that accepts username and password as parameters and validates the user.

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 create success and failure pages as below.

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>
       Login Success!!!!!
    </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>
       Please Login with correct username and password.
    </h:body>
</html>

Below is the Login.java Managed Bean that validates the user input and forward them to either success or failure page.


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("john") && password.equals("john")) {
			return "success";
		} else {
			return "failure";
		}
	}

}

Below images show the output pages.

JSF-Text-Components-4

JSF-Text-Components-5

JSF-Text-Components-6

Finally here is the final project structure in Eclipse.

JSF-Labels-Project

Download the final project from below link and play around with it to learn more.

Comments

  1. User says:

    jsf Text component never rendered on my browser

  2. Harsh Rajpal says:

    Hi Pankaj,

    I think, in this example we will also have a facelets config file which will redirect to success or failure page based on response returned. Or is this done with view resolver??

    If yes then where is the view resolver configured?

    1. Pankaj says:

      Based on the return String, JSF will automatically use the XHTML page. Change the return string in Managed Bean or the name of view page and it won’t work.

  3. james says:

    Since text field and password are similar, why not just have property to set a text field to password. And not a separate tag is added.

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