Instructor: Hey, welcome back.
In this video, I'm gonna show you
how to use JSF forms and dropdown lists.
We'll cover the following topics.
First, we'll define what are dropdown lists?
Then, we'll do a review of the HTML <select> tag.
Next, we'll discuss some JSF terminology.
Then, we'll pull it altogether
with the full JSF page example.
Alright, so we have a lot of good things in store.
Let's go ahead and get started.
So, what exactly are dropdown lists?
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,
and you can continue to fill out the information
and go ahead and submit the form.
So, that's the idea of a dropdown list,
so you've seen these before.
So, dropdown lists have been around for awhile,
so let's do a quick review of how we can do this with HTML.
So, we'll have an HTML tag called select,
we give the name of the tag,
and then you simply embed a list of options.
So, in this case we have Brazil,
France, Germany, and India.
So, this snippet of HTML would give us a list
similar to what we have here on the right side,
just a list of options that a user can select.
So now, we'll look at how we can use these items in JSF.
In the JSF world, a dropdown list
is represented by the tag of selectOneMenu.
Eeh, okay.
So, the name is not really straightforward,
but it's a dropdown 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.
So, I'm not a huge fan of the name,
but that's the actual tag
that we'll use for dropdown list, selectOneMenu.
And we'll go ahead and take a look
at some examples of how to use this.
So this dropdown 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.
So, how will we do this with JSF?
Where is the code and how could we put this together?
So, here on the center of the slide,
we have this idea of a selectOneMenu,
and then we give the value #{studentTwo.country}.
So, we're gonna map that to a managed bean field.
Then, we just go through
and we just drop in a list of items,
so Brazil, France, Germany, India.
So notice here when we go to selectItem
we provide an item value and label.
So, 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 three letter country code
and the label could be the normal, full name of the country.
Alright, so now we saw the little code snippet.
Let's go ahead and pull this together with an example.
So, in the top left I'll have this form,
student_two_form.xhtml.
We're gonna have a new entry here for country.
That's gonna be our dropdown 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 gonna have the actual country.
And then at the bottom we'll have
a student_two_response.xhtml.
So, 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.
So, the first thing we're gonna do
is we're gonna add a new managed bean called StudentTwo,
and it's gonna have the firstName, lastName,
and a new field called country.
Then, we'll update the form
to make use of our JSF tag, the selectOneMenu,
that's for our dropdown list.
Then, we'll also update the confirmation page
to display the selected country.
So it could say the student's country is X.
Alright, so there are a lot of good things in store.
Let's go ahead and get started.
Alright, so let's go ahead and move into Eclipse.
Once I'm in Eclipse I'm gonna use that existing project
that we've been working on so far, hello.
So, that was created in one of our previous videos.
The first thing I need to do is create the managed bean.
So, I'm gonna 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're using a different name
just to make it unique from the previous example
that we worked on.
And I'll keep all the other defaults here
and I'll hit the Finish button.
Okay, so this is our basic student class.
Our StudentTwo is gonna be a managed bean,
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, so 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, so we have firstName, lastName, and country.
So, country is a new item that we're adding here
for this example.
Alright, so this looks pretty good so far.
Now, the next thing we need to do, of course,
is create a no argument constructor
So I'll just create
this new constructor here for StudentTwo.
Does nothing, very good.
Let me just give us some free space here.
Now, we need to generate
the getters and setters for our fields,
so this will expose properties to the JSF system.
So 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.
So remember, Eclipse will actually generate
the getters and setters for us automatically.
So, it'll give me a box here.
I'll go ahead and select the fields that I want.
So, I'll choose country, firstName, and lastName.
Then I'm gonna hit OK
and now we have this new code
that was just created for us.
So this looks really good.
So we have fields for, I'm sorry,
we have methods for our firstName,
and we have methods for our lastName,
and finally we have methods for country.
Alright, this is great.
Alright, so now that our bean is taken care of,
let's go ahead and move over to our form.
So, I'm moving to the WebContent directory, so WebContent.
I'll choose student_two_form.xhtml,
just expand the window here,
and we'll keep all the standard stuff that we had before.
The one thing I'm gonna add here
is a new entry here for country,
and I'll set up my selectOneMenu.
So, this is our dropdown list,
and we're gonna list all the countries
that the user can select.
So, here on Line 24 I have the selectOneMenu.
I bind it to studentTwo.country.
So remember in the studentTwo class
we have a field called country
with public getters and setter methods,
so that'll read and write to that managed bean.
And then we just go through
and list out all the different options,
the itemValue and the label.
Again, label is what's displayed to the user,
and the value is a code we can use in the background.
That's pretty much it, so that's our form.
And then finally we have our Submit button and our action.
We're gonna send it over to a new page,
student_two_response.
And remember, we don't have to give the extension here.
JSF will automatically look for a page
called student_two_response.xhtml.
Alright, so let's go ahead
and move over to our confirmation page.
So, our confirmation page is student_two_response.xhtml.
I'll go ahead and open up this file.
So, we have on Line 12 we have the information before,
the student is confirmed.
The new information is on Line 16, the student's country,
and then here we give the #{studentTwo.country}.
So, that'll actually talk to that managed bean,
it'll call the getter method for country,
so it'll call studentTwo.getCountry,
and the results will be displayed right here on the page.
That's basically it, good job.
Alright, so I just ran the application.
Here's our form.
We have first name, last name,
and we also have our dropdown list.
So, I'll go ahead and for the first name
I'll enter Ajay Rao,
and for the country
go through 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.
The student's country is India.
So this is great.
So it works exactly as desired.
Good job.
Okay, so in summary what we did
was we actually learned about dropdown lists.
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.
So, a lot of good things we've accomplished here.
Alright, so this wraps up the video.
In this video, I showed you
how to use JSF forms and dropdown lists.
Stay tuned, because I'm gonna make
some enhancements to this example.
Instead of hard coding the form data,
I'm gonna show you how to read the form data
from a managed bean.
So, stay tuned for the next video.
I'll see you then.