Instructor: Hey, welcome back.
In this video, we're gonna learn
how to use JSF forms and checkboxes.
We'll first start off with a checkbox demo,
then we'll look at the JSF terminology
for selectManyCheckbox,
and then we'll wrap it all up with a full JSF page example.
Let's start with our checkbox demo,
and this is based on the previous example
that we've been working on so far.
So, we have our student's first name
and last name that we'll enter,
and then the new section here
is for favorite programming languages.
So, in the previous example,
they could only choose language, now with checkboxes,
they can choose multiple languages.
So, in this case, the user chose Java and C#,
then they'll hit submit, and then in our confirmation page,
now it will display a list
of all the languages that they've selected.
So, here they can actually choose more than one language,
so this is really good.
And I'll show you how to write
all the code to implement this.
In the JSF world, a checkbox is represented
by the tag selectManyCheckbox.
Now, I actually like this name because it makes sense,
and if you recall from some of the previous videos,
I had problems with some of the tag names,
but this one is very straightforward, selectManyCheckbox.
So, you can select many options
from that given checkbox group,
so this is very straightforward, and very intuitive.
So, I'm happy now, good job.
So, let's go ahead and move forward and see how we can
actually use this selectManyCheckbox in our code.
So, in this example here, I'm gonna allow the user
to choose their favorite programming language,
so we just give 'em a little label there at the beginning,
and then in this next slide,
we'll make use of that tag selecManyCheckbox.
And then we specify the value,
meaning which managed bean are we are we binding those to,
so here we're gonna bind it to this managed bean
called studentfour.favoriteLanguages.
So, we're gonna call this property favorite languages,
will really will be an array of strings,
but I'll talk about that in a second.
And now, we'll just go through and we'll just drop in
all the select items that the user
can select for the checkboxes,
so Java, C#, PHP, Ruby, and so on.
So, as you can see, this follows very similar
to some of the previous elements that we've used before
for radio buttons, and our select menus.
In this case,
we're making you select selectManyCheckbox tag.
All right, so let's pull it all together.
So, up in the top left, we're gonna have this form,
StudentFour form.xhtml,
the user can enter their standard stuff,
first name and last name, but now the entry on the new area
that we will have is for favorite programming languages.
So, they'll be able to go through and choose their language,
Java, C#, PHP, Ruby, or whatever.
They'll hit submit, that data will go across,
we'll have a managed bean here in the middle
that's gonna hold the form data,
so our managed bean is gonna be called StudentFour,
and then we'll have this response page in the bottom right,
Student_four_response.html.
Again, we'll display the student's name,
but then we'll also display a list of all of the favorite
programming languages that the user selected.
So, it can be just more than one value here,
so Java, C#, and others if they've chosen that.
So, we'll make use of a list element to kinda display
all of the information that the user entered.
I also like to start with a to do list,
so the first thing we're gonna do
is add a new managed bean for StudentFour.
We're gonna have a first name,
last name, and favorite languages,
so this is gonna be an array of strings for us.
We're gonna update the form
to make use of the selectManyCheckbox,
and then we're gonna update our confirmation page
to display the favorite languages for our student.
Okay, so this looks like fun,
let's go ahead and get started.
All right, so let's go ahead and move into Eclipse.
What we're gonna do is continue to use our existing project,
the hello project, that's from the previous videos.
And, what I'd like to do is go ahead
and move into the Java source directory,
and I wanna look at this file StudentFour.java.
Now, we're not gonna create the file from scratch,
but you can go ahead and create
a new class called StudentFour,
and then you can make the edits that I'll make here.
So, lines five and six, we have our StudentFour,
it's a managed bean,
and you've seen all of this stuff before for building beans.
Now, what I need to do is define our field,
so I'm gonna define our field for first name,
and a field for last name.
And, we've done this many times before.
So, one thing that's new in this example
is that since the user can select multiple languages,
then we need to make use of an array of strings.
So, we can't use just a single string element by itself,
we need to use an array of strings.
And remember, we set up an array
in Java using the square brackets.
So, here I have private String[] FavoriteLanguages.
So, this will allow the JSF system,
when the user selects multiple languages
on the form, to store them accordingly in our bean.
So, lemme just give us some white space here at the bottom.
Next thing we need to do is create
our public no arc constructor,
so our constructor's the same name as the class,
that's nothing for right now which is good.
And now, I need to add all the getter and setter methods,
so again I'm gonna use
the Eclipse technique of inserting the code for me.
So, I just do a right click, I choose source,
and I go to generate getters and setters.
This is gonna bring up a dialogue,
and basically here you just go along
and check off each one of those fields, favorite languages,
first name, and last name, once those are all selected,
then you can go ahead and click the OK button.
Okay great, so Eclipse just generated
a lot of code for us here,
here are the getters and setters for first name,
the getters and setters for late name, and finally,
for this new piece that we're working with,
getters and setters for favorite languages,
and note here how they're using the array of strings,
so string with a square bracket, that means an array.
So, this all looks really good, good job.
Okay, so now the next thing
we need to do is move over to our form.
So, I'll look at this file, student_four_form.html,
I'll go ahead and scroll down to the new section here
for favorite programming languages,
so that's just a label that we'll have,
and then we make use of that selectManyCheckbox tag.
So, for the selectManyCheckbox,
we set up a actual managed bean property
that we're gonna bind it to, so here,
studentFour.favoriteLanguages,
and recall when we submit the data,
JSF will call studentFour.setFavoriteLanguages.
Then, we simply go through and we just drop in
all the options here, Java, C#, PHP, and Ruby, and so on.
So, that gives us the whole checkbox layout for our form.
Then, moving on down,
this is our command button or our submit button,
and then the action for this is student_four_response,
again, as we've learned, whenever we do a submit,
JSF is actually gonna look for a file
called student_four_response.xhtml.
JSF will actually add that extension
on there for you, .html.
So, that's our form, this looks really good.
Finally, what we wanna do is handle our confirmation page,
our response page.
So, this is student_four_response.xhtml,
I'll go ahead and open this file.
So, this is basically just a confirmation for the user,
and one thing that's new here is that when we display
the student's favorite programming languages,
we actually have to loop over each one of the elements
in the array, and display the information.
So, I'm gonna make use of an unordered list ul
that gives you a bullet list in the HTML world.
And I'll make use of this new element here called ui:repeat.
So, this ui repeat will take a value,
which is an actual collection or an array,
and it'll actually do a loop over that collection for you.
So, just think of this like a shortcut
for doing a four loop,
so it's gonna loop over studentFour.favoriteLanguages.
Remember, favorite languages is an array,
so they'll call get favorite languages,
and then based on the array,
they're gonna loop over it as they go through it.
Now, each time they loop over the array,
they'll set up a little temporary variable.
So, we're gonna set our temporary
variable name to be tempLanguage.
Now, once we have that temporary variable,
then we can actually use it inside of our loop.
So, here, I can say tempLanguage,
and I can display that out using a list item,
so that'll give me an actual bullet item
for that given favorite language.
So, this is something new, ui repeat,
it'll basically loop over the array or collection,
and you can use it to display information
in a collection or an array.
So now, let's go ahead and run the application,
so up top, so we have a standard first name and last name,
and then we can go through and choose a favorite language.
And again, we can choose multiple items here
for our favorite language.
So, for this example, we'll choose Java and C#,
and then we'll go ahead and hit the submit button.
And so, we come back with the confirmation page,
and then the student's favorite program language.
So, now this information, that's part of that list that,
that ui repeat, so it's gonna loop over each one
of those languages and then print it out
using a bullet list, or a list item.
And that's how that part works out.
So, this is good, good job.
All right, so let's go ahead and summarize this video.
We started off with the checkbox demo,
we made use of the selectManyCheckbox,
and we pulled it all together with a full JSF page example.
So, let's wrap up the video.
In this video, I showed you
how to use JSF forms and checkboxes.