JSF Tutorial #13 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Drop-Down List – selectOneMenu

In this video, I will show you how to use JSF Forms and Drop-Down Lists (selectOneMenu).

Please SUBSCRIBE to my YouTube channel.

Download JSF Source Code

# Video
1 Introduction
2 JavaServer Faces Overview
3 Setting up your Development Environment - Overview
4 Installing Tomcat - MS Windows
5 Installing Tomcat - Mac OS X
6 Installing Eclipse - MS Windows
7 Installing Eclipse - Mac OS X
8 Connecting Eclipse to Tomcat
9 JSF Behind the Scenes
10 JSF HelloWorld
11 Creating JSF HTML Forms
12 JSF Forms and Managed Beans
13 Drop-Down Lists - Part 1
14 Drop-Down Lists - Part 2
15 Radio Buttons
16 Check Boxes
17 Prepopulating Forms
18 Recommended JSF Books and Resources

Do You Need More Details?

  • Do you need to connect to a database?
  • Display SQL results in a HTML table?
  • Perform SQL insert, updates and deletes?
I have a premium course that shows you how to complete all of these tasks.
  • Database Integration with JDBC
  • Displaying Data in Lists and Tables
  • Validating HTML Forms
  • Implementing Business Logic with Managed Beans
  • Deploying applications with WAR Files
Read more about the premium course at http://www.luv2code.com/jsf-for-beginners

Follow luv2code with the links below:

– Website: http://www.luv2code.com
– YouTube: http://goo.gl/EV6Kwv
– Twitter: http://goo.gl/ALMzLG
– Facebook: http://goo.gl/8pDRdA

JSF Tutorial Transcript:

Hey, welcome back. In this video, I’m going to show you how to use JSF forms and drop-down list. We’ll cover the following topics. First we’ll define what are drop-down list, then we’ll do a review of the HTML select tag. Next we’ll discuss some JSF terminology, then we’ll put it all together with the full JSF page example. All right, we have a lot of good things in store. Let’s go ahead and get started.

What exactly are drop-down list and we’ve all used them before, right? You have a form, they have a list of options, you scroll through the list of options and you select the one that matches for you and then that information is set there, you can continue to fill out the information and go ahead and submit the form. That’s the idea of a drop-down list, you’ve seen this before.

Drop-down list have been around for awhile. Let’s do a quick review of how we can do this with HTML. We’ll have an HTML tag called select, we give the name of the tag and then you simply embed a list of options. In this case we have Brazil, France, Germany and India. This snippet of HTML will give us a list similar to what we have here on the right side. Just a list of options that a user can select.

Now we’ll look at how we can use these items in JSF. In the JSF world a drop-down list is represented by the tag of selectOneMenu, eewww, okay. The name is not really straightforward but it’s a drop-down list and the whole idea here is it allows you to select one item from a menu and that’s how they came up with the name of selectOneMenu.

I’m not a huge fan of the name but that’s the actual tag that we’ll use for drop-down list, selectOneMenu and we’ll go ahead and take a look at some examples of how to use this.

This drop-down list again we’ll have a form, we’ll have a list of countries, a user can choose one of the countries there from the list. How we will do this with JSF? Where is the code and how could we put this together? Here on the center of the slide we have this idea of a selectOneMenu and then we give the value #{studentTwo.country}, we’re going to map that to a managed bean field. Then we’ll just go through and we just drop in a list of items, Brazil, France, Germany, India. Notice here when we give the select items we provide an item value and label. The label is the information that will show up on the screen that the user will see and then the value is an actual code that you can have for that entry. In this example the value and the label are the same but you can imagine an example where the value could be the 3 letter country code and the label could be the normal full name of the country.

All right, now we saw the little code snippet. Let’s go ahead and pull this together with an example. On the top left I’ll have this form, students_two_form.xhtml. We’re going to have a new entry here for country and that’s going to be in our drop-down list. We’ll also have a managed bean, we’ll call this managed bean studentTwo just so it’s a different class name than our previous examples. It’s going to have the actual country and then at the bottom we’ll have a student_two_response.xhtml. We’ll simply update this confirmation page to also list the country that the user selected.

Now whenever I have a new programming task, I always like to build a to do list. The first thing we are going to do is we are going to add a new managed beam called studentTwo and it’s going to have the first name, last name and a new field called country.

Then we’ll update the form to make use of our JSF tag selectOneMenu that’s for our drop-down list and then we’ll also update the confirmation page to display the selected country. We could say the students county is X. All right, a lot of good things in store. Let’s go ahead and get started.

All right let’s go ahead and move into Eclipse. Once I’m in Eclipse I’m going to use that existing project that we’ve been working on so far, hello, that was created in one of our previous videos. The first thing I need to do is create a managed beam. I’m going to move down into my Java source directory, I’ll right click, I’ll say new, class and the name of the class is studentTwo and again we are using a different name just to make it unique from the previous example that we worked on. Then I’ll keep all the other defaults here and I’ll hit the Finish button.

Okay, this is our basic student class. Our StudentTwo is going to be a managed beam and I’ll import the appropriate items and again remember that we need to import javax.faces.bean.managedbean, select that item and eclipse will help you out there. Great. Now we need to simply define our fields for first name, last name and the country. Let me just expand the window here for a second. Okay, great, we have first name, last name and country. Country is the new item that we are adding here for this example. All right, this looks pretty good so far.

Now the next thing we need to do of course is create a no argument constructor. I’ll just create this new constructor here for studentTwo, it does nothing, very good.

Let me just give us some free space here and now we need to generate the getters and setters for our fields. This will expose properties to the JSF system. Again I’ll make use of that really cool Eclipse trick of doing a right click, going to source, and then moving down to generate getters and setters. Remember Eclipse will actually generate the getters and setters for us automatically. It will give me a box here, I’ll go ahead and select the fields that I want, I’ll choose country, first name and last name and I’ll hit OK and now we have this new code that was just created for us. This looks really good.

We have methods for first name, and we have methods for last name and finally we have methods for country. All right this is great. All right now that our bean is taken care of, let’s go ahead and move over to our form. I’ll move into the web content directory, web content, I’ll choose student_two_form.xhtml, just expand the window here. Now we’ll keep all the standard stuff that we have before. The one thing I’m going to add here is a new entry here for country and I’ll setup my selectOneMenu. This is our drop-down list and we are going to list all the countries that a user can select.

Here on line 24, I have a selectOneMenu, I bind it to studentTwo.country.

Remember in the student two class we have a field called country with public getters and setter methods. Then I’ll read and write to that managed beam and then we’ll just go through and list on all the different options. The item value and the label. Again labels are just displayed to the user and the values and code we can use in the background. That’s pretty much it, that’s our form and then finally we have our submit button and our action we are going to send it over to a new page student_two_response and remember we don’t have to get the extesntion here, JSF will automatically look for a page called student_two_response.xhtml.

All right let’s go ahead and move over to our confirmation page. Our confirmation page is student_two_response.xhtml. I’ll go ahead and open up this file. We have on line 12, we have the information before the students confirmed, the new information is on line 16, the students country and then here we give the #{studentTwo.country}, they’ll actually talk to that managed bean called the getter method on for country so to call studenttwo.getcountry and the results will be displayed right here in the page and that’s basically it. Good job.

All right, I just ran the application. Here is our form, we have first name, last name and we also have our drop-down list, I’ll go ahead and for first name I’ll enter Ajay Rao and for the country, go and choose something item out of here, I’ll choose India and if everything looks good to me, I’ll go ahead and hit the submit button and then we’ll get our confirmation page.

This student’s country is India. This is great, it works exactly as desired. Good job.

Okay, in summary, what we did was we actually learned about drop-down list. We also reviewed the HTML select tag. We looked at some of the JSF terminology for selectOneMenu and then finally we wrapped it all up with the full JSF page example. A lot of good things we’ve accomplished here. All right so this wraps up the video. In this video I showed you how to use JSF forms and drop-down list. Stay tuned because I’m going to make some enhancements to this example, instead of hard coding the form data, I’m going to show you how to read the form data from a managed beam. Stay tuned for the next video. I’ll see you then.

Did you like my blog post?

Signup now and receive an email when I publish new luv2code content.

I will never give away, trade or sell your email address. You can unsubscribe at any time.


Leave a Reply