JSF - Adding Labels, Image, Button and Text Field in JSF View Pages With Examples

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

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

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_5

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

JSF_ADD_UI_Com_-7

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

Here the url attribute specifies the path of the image.

Output:

JSF_ADD_UI_Com_5

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

Create the cardetails.xhtml page which displays the details of the car.

cardetails.xhtml

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

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

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

Create the JSF page for login page as;

login.xhtml

Now we create success and failure pages rendered respectively depending on the correct or incorrect username and password fields.

success.xhtml

failure.xhtml

Once we are done with the above said changes run the program.

JSF-Labels-Login

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

Output:

JSF-UI-Tags-Project-300x450

The project structure looks as below:

JSF-UI-Tags-Project-300x450

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.

By admin

Leave a Reply