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;
|
1 2 3 4 |
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://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
|
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"> <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 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
|
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 |
<?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>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 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
|
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 |
<?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>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 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
|
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 |
<?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 create success and failure pages as below.
success.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://java.sun.com/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> Login Success!!!!! </h:body> </html> |
failure.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://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.
|
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 |
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.
Finally here is the final project structure in Eclipse.
Download the final project from below link and play around with it to learn more.