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

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


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:


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.


Here the url attribute specifies the path of the image.



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.


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


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.


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

Create the JSF page for login page as;


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



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.




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.

By admin

Leave a Reply

%d bloggers like this: