1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Building Web Applications with Java EE 6

JSF Form Elements Part 2



The course is part of this learning path

Start course
1h 16m

This course explores the fundamentals of web applications, JavaServer Faces, and then walks you through a variety of projects that will give you a practical demonstration of how to create a web application and how to use various components of JavaServer Faces.

Learning Objectives

  • Understand the fundamentals of web applications
  • Learn about JavaServer Faces, and how they can be used in your applications

Intended Audience

This course is intended for anyone who already has basic knowledge of Java and now wants to learn about Java EE.


Basic knowledge of Java programming.


Hello dear friends. In this video, we will continue examining JSF form elements. Let's start. In the last video, we have added a button but we didn't talk about it. Of course, in any application, we will need a button. Command button is our button. With action attribute, we will make our operation. Value will be our button text. Let's add another button and name it Second. Let's look. Now let's give actions to the buttons. For example, we can redirect users to other pages. Let's add two new pages. Add new xhtml. 

Name will be First. In this, I will add an output label. This page is the first page. Let's add another page and name it Second. Add an output text. This page is Second. Now, let's go back to the top of the index page. In Second button, we will redirect to the second page. In the other button, we will go to the first page. Let's try. Look, now we can go to the second page. First page, let's look. Although the link address still points to index.xhtml, the content belongs to the second page. If you want to redirect page in a new page, you can use redirect command in button. If we write faces-redirect-true.

Let's try again. Look, now the URL address displays Second.xhtml, but in the other button link is still index. We will talk about the command button again, but for now, that's enough. For passwords, we can use inputSecret. This as an input only hides password characters. Let's try. Look, our characters seem as dots. For images, we will use graphic image. URL attribute defines the path of image. To hold images, we need a folder. In web folder, we will add a resources folder. And into this folder, we will add an image folder. After that, we can add our images in this folder. Some applications may require a checkbox. For a checkbox like user type as isAdmin, we can use select boolean checkbox. Let's add a boolean checkbox for isAdmin. Let's add an output label as isAdmin. Let's look. Now we can see our single checkbox. If you would like to select multiple values from given options, hobbies in our case, you could use the selectManyCheckbox element. Add a many select checkbox. Now we have to add items. For many checkbox, we will use selectItem tag to add options.

Now, there are two important attributes. The item label is the text area that we will see on page. The other one is item value. This will be our value. As you know, in projects, we will use these data types with enums. And in enums, there are some number of quality of these values like swimming1 and reading2. Let's try. Look, we can see the options available and can also select more than one option. Go on with radio buttons. For radio button, we will use selectOneRadio. Radio buttons used to choose one option from multiple options. It is widely used in exam systems or quiz etc. Add positions. Let's try. Look, we can only select one option in radio buttons. In your application, you may want to use a dropdown list.

For dropdown list, we can use selectOneMenu tag. If you would like to select more than one option from dropdown, then you can use the manyMenu tag. Let's look at countries. If you want to select more than one option from the dropdown, then you can use manyMenu tags. Let's copy and change them with many. Done. Let's try. Look, we have two dropdowns. And in the first one, we can select only one of them. But in the second one, we can select more than one option. Like the checkbox, you can also use list box with one or many options. Usage of list box is the identical to checkbox. Let's copy the code. Change with list box, and let's try. That's all I have for now. In the next video, we will create a small project with JSF that includes all these elements and managed beans. See you in the next video.


About the Author
Learning Paths

OAK Academy is made up of tech experts who have been in the sector for years and years and are deeply rooted in the tech world. They specialize in critical areas like cybersecurity, coding, IT, game development, app monetization, and mobile development.

Covered Topics