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

In this video, I will show you how to use JSF Forms and Drop-Down Lists. I’ll enhance the previous example to read the form values from a managed bean.

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, we’re going to cover part two of JSF forms and drop-down lists. What we’re going to do in this example is that we’re going to enhance the previous video example. Instead of having to drop-down list values, hard coded in the JSF page, what we’re going to do instead is leave the values from the managed bean. This will make the application a bit more dynamic. Let’s go ahead and move into Eclipse. Again, we’re going to continue with the same project as before, hello project. I’m going to edit the file StudentTwo.java. This is our managed bean from the previous video. What I’m going to do here is I want to update the managed bean to to contain a list of options. This will be the list of countries that a user can select. I’ll just import the type List. This is the list of country options.

Now, what we need to do next is populate this list with some data. The first thing I’ll do is I’ll construct the list in the constructor, so countryOptions = new ArrayList<>(). Then I’ll go through and fix the import here for our ArrayList. This is java.util.ArrayList. Then I need to just drop in the list of options here. I want to drop in some code that I already have. I have this ArrayList of strings and I’m going to simply add in the various countries: Brazil, France, Germany, India, and so on. Now, the next thing I need to do is actually create a getter method for that list of country options. Again, I’ll make use of that Eclipse trick where I’ll do a right click. I’ll choose Source. Then move down to generate getters and setters. In the box here, I’ll expand the list here for countryOptions and I’ll select the options for getCountryOptions. I really only need a getter here, I don’t need a setter. Then, as far as the placement of this getter, I’ll place it right after the after studentTwo, right after the constructor or this class. Next, the actual insertion point, and then I’ll hit okay.

And so on lines, thirty-nine down to forty-one, this is the new code that Eclipse just entered for me. It’s a public getter method for countryOptions and it’s going to return the list of strings to the calling program. All right. This looks really good right now. I’ll do some quick clean up here and great, so we’re in really good shape right now with this addition to the managed bean. The next thing I need to do is update my form. I need to update the drop-down list. Instead of having a hard coded values, I need to make use of that managed bean. I’m moving to the code that I had before from the previous video and I will simply select all of the code that was hard coded and I’ll actually remove it or delete it from this file. Instead, what I’ll do is I’ll drop-in some new code. Right now, selectOneMenu value studentTwo.country, that’s the same. This is the important line here. Here’s selectItems plural and I have value#{studentTwo.countryOptions}. When this page is loaded, JSF will actually call studentTwo.getCountryOptions. It’s going to return that list of streams that we’ve already defined inside of that managed bean class.

This is how we can get the list of options from the managed bean as a post to hard coding it in the JSF page. Now I just run the application and here’s the output. We have our first name, last name, so I enter Ajay Rao again and then for country. Now this country drop-down list is being populated by the information from our managed bean. It’s no longer being hard coded in the JSF page but that data is coming from our managed bean. Now I’m going to click submit and here we listed student’s country of India. That works out as desired. In this part of it, nothing’s really changed as far as the confirmation page. All right. This looks really good. Good job.

This wraps up the video. In this video, we learned how to use JSF forms and drop-down list. In particular, we enhanced our previous example to make use of managed beans for the form data. Instead of using the hard coded data in the JSF page, we actually have the data being pulled from a managed bean.

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