JSF Form Elements Part 2



The course is part of this learning path

Start course
1h 9m

In this course, we will learn the concepts of Java EE 7 with a focus on JavaServer Faces.

Learning Objectives

  • What JavaServer Faces are

Intended Audience

  • Anyone looking to get Oracle Java Certification
  • Those who want to improve Java 7 EE knowledge
  • Java developers


  • Have at least 2 years of Java development experience 

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. CommandButton 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 is 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 BooleanCheckbox. Let's add a BooleanCheckbox 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 itemLabel is the text area that we will see on page. The other one is itemValue. 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 Swimming 1 and Reading 2. 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 selectOne Radio. 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 drop-down list. For drop-down list, we can use selectOneMenu tag. If you would like to select more than one option from drop-down, then you can use the ManyMenu tag. Let's look at countries. If you want to select more than one option from the drop-down, then you can use ManyMenu tags. Let's copy and change them with Many. Done. Let's try. Look, we have two drop-downs 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 Listbox with one or many options. Usage of list box is the identical to checkbox. Let's copy the code. Change with Listbox. 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