Instructor: Hey, welcome back.
In this video I'm gonna show you
how to use JSF forms and radio buttons.
In this video we'll cover the following topics.
We'll first start off with the radio button demo
and then we'll look at some JSF terminology
for select one radio and then we'll walk
through a full JSF page example.
Alright, so we have a lot of good things in store,
let's go ahead and get started.
Alright, so here's a radio button demo right now.
Building on our previous examples that we've worked on
before already, so we'll have a first name
and a last name for our student.
And then we have this new radio button section
so they can choose their favorite programming language
and they can choose one of the radio buttons
based on their given programming language.
So here the user selected the language of PHP.
And then we go ahead and hit the submit button
and then we'll see up here on the screen
on the confirmation page that
their favorite programming language is PHP.
So that's the idea of how the radio button works.
Now in the JSF world a radio button
is represented by the tag select one radio.
Now this tag actually makes sense, it follows okay,
so they have the word radio in the tag
so you know that it's some type of radio option.
So you can do select one radio.
And what we'll do on the next slide
is we'll actually see some examples
of how to write code for it.
Alright, so here's a select one radio.
So just give a label here for favorite
programming languages and then I'll make use
of the select one radio tag.
So here's select one radio.
And then I have value equals and this is where
I set up a link to my managed bean.
So student three dot favorite language.
We'll see that in the following slides.
And then from there we just drop out
the different radio options here.
So Java, C#, PHP, Ruby.
And again, item label is what the user will see
and item value's an actual code you can use.
Here I'm using them the same,
but you can easily change that for your own
personal application.
Now let's go ahead and pull it all together
with a JSF page example.
So on the top left we'll have our student form.
So this will be student three form dot XHTML.
We'll have the first name, last name
and then we'll also have the radio buttons
for the favorite programming language
that the user can select.
Then in the center we're gonna have
this new managed bean called student three.
This managed bean will actually
hold the form data that's submitted.
And then down in the bottom right we'll have
our confirmation page or our response page.
So here we'll simply list out the actual
programming language that the student selected.
So in this example here the student's favorite
programming language is PHP.
So let's go ahead and look at our to do list for this.
The first thing we need to do is add a managed bean
for the class student three.
And this managed bean is gonna have three fields.
Our first name, last name and favorite language
which is new.
Then we'll update the form to make use
of the select one radio button.
And then we'll update the confirmation page
to display the favorite language for the student.
Alright, so we have a lot of good things in store.
Let's go ahead and start coding.
Alright, so let's go ahead and move into Eclipse.
Again, we're gonna continue to use our existing
project hello, the hello world project
from our previous video.
And what I like to do as the first thing out
is to move into my Java resources directory
for the source code and I'm gonna look
at this file called student three dot Java.
Now since we've already been working through
this a lot so far in the video series
I'm not gonna create the code from scratch.
We'll just kinda walk through it.
We've seen a lot of this stuff before.
So I have this class student three,
it's a managed bean.
And this is what we're gonna use in our JSF pages.
I'll define the three fields here.
First name, last name and favorite language.
And favorite language is actually
the new item that we're adding to hold
the actual favorite language of the student
from the radio buttons.
And then we'll set up our no argument constructor.
So remember the constructor has the same name as the class.
And then we just have the normal getter, setter
methods here.
So I have the get, set for first name.
The get, set for last name.
And finally, for this new part of the example
get, set for favorite language.
So that's pretty much it for our bean.
So we have our managed bean, we have our constructor
and we have our getter, setter methods for our fields.
So this looks really good.
Alright, so now let's go ahead and take a look at our form.
So I'll move into my web content directory
and I'll look at student three form dot XHTML.
And this form is very similar to our previous examples.
So I'll scroll down past the first name, last name item.
I'll focus in on line 23 here where we will actually
have our favorite programming languages.
So we're gonna make use of the select one radio.
And for the value we'll bind it to our managed bean
from the previous example here.
So student three dot favorite language.
So when we submit the data it'll call
student three dot set favorite language.
Then we just go through and add all the different
options here for the radios.
So we have Java, C#, PHP, Ruby, so on and so forth.
Now we'll move on down to our submit button.
So it's for submit and the action is student three response.
And again, remember it's gonna actually look
for a page called student three response dot XHTML.
JSF will automatically add the extension
dot XHTML on there for you.
Now let's take a look at our response page.
So here I'll just kinda move down a bit.
And line 16 and 17, the student's favorite
programming language.
And I make use of that managed bean.
I'll say student three dot favorite language.
So remember, JSF will call the getter method here.
So JSF will call student three dot get favorite language
and it will display the results here on the screen.
Now here I just ran the application.
Here's our form up top, so we'll start
with the first name and the last name.
And then we'll choose the favorite programming language.
So here you can choose different items.
Here we'll choose PHP and then the user will hit submit.
And then we get the results here on the page.
The student's favorite programming language is PHP.
So this works out as desired, good job.
Okay, so let's go ahead and summarize this video.
We started off with a radio button demo
then we also looked at the select one radio tag
and then we wrapped it all up with a full JSF page example.
Well this wraps up the video.
In this video I showed you how to use
JSF forms and radio buttons.