Instructor: Hey, welcome back.
In this video, I'm gonna show you
how to pre-populate JSF forms.
So we'll start off with the demo of pre-populating,
then we'll take a look at how to load form data.
And then finally, we'll wrap it up
with the full JSF page example.
Alright, some great stuff here,
let's go ahead and dive in.
Alright, so here's our demo.
So, basically when the form is first loaded,
it'll already have data pre-populated in it.
So you can think of it
as like maybe editing a student or something.
So, we'll have the student's first name, last name,
and also their selected programming language.
This information will all be pre-populated
by the JSF system and managed bean.
Alright, so let's go ahead and look at the coding for this
and see how it works.
Now, when a form is first loaded,
JSF will call the getter method for each property.
Now this is some information that I eluded to
earlier in the video series,
but now we'll actually cover it in detail.
And this is how JSF can actually pre-load
or pre-populate some of your form data.
Okay, so let's go ahead and start with a code example.
So here we have our JSF form,
and then we have the first name label
and we make use of the input text
where they can enter the user's first name.
And then also we have the value referencing
a managed bean, so we have studentFive.firstName.
Now what really happens in the background
is that when this page or form is actually loaded,
the first thing that JSF will do
is it'll call studentFive.getfirstname.
So it'll check that managed bean
and access that property.
If the property is not null,
then the value will be pre-populated here
in this form field.
So, when the page is loaded,
JSF will call studentFuve.getfirstname.
Now the normal process still works,
meaning when we submit, it'll call studentFive.setfirstname.
Just like in all of our previous videos,
we'll pull it all together with an example.
So on the top left we'll have
our student five form at xhtml.
In the center we'll have a managed bean,
we'll call it Student Five,
to make it unique from the other beans,
and then at the bottom we'll have our response page,
student_five_response.xhtml.
Alright, so here's the information for our to do list.
The first thing we need to do
is add a new managed bean class called student five.
We'll have three fields:
First name, last name and favorite language.
And then we'll modify the code to pre-populate the data
in the bean, and I'll show you the actual coding techniques
to make that happen.
Alright, so good stuff here,
let's go ahead and start coding.
Let's move into Eclipse.
What we're gonna do is make use
of that existing project so far, Hello World,
and that was created in some of our previous videos.
What I'd like to do is take a look at the form pages
that we'll use here.
So here we'll start with the student_five_form.xhtml.
So this form is very similar,
we've seen a lot of this stuff before for student five.
In our forms section on line 15,
we have our first name and our last name,
and the programming languages.
So that's the basics there of the form.
So now scrolling back up to first name,
this is where we set up the first name label,
and we set up studentFive.firstname.
And again, when the form is loaded
they'll call studentFive.getfirstname.
A similar thing here for last name.
When the form is loaded,
they'll call studentFive.getlastname.
So those are the getters.
Now the normal work happens as far as submitting and saving,
but this is for getting or pre-populating the form data.
Well the next thing we need to do
is actually create a new class
for that managed bean, student five.
So I'll go into my Java source directory
under my package.
I'll simple do a right click,
and I'll say New, Java Class.
And this will bring up a dialogue.
The name of the class is Student Five.
And I'll keep all the other defaults.
And once you're happy with that,
you can move down and hit the Finish button.
Great, so this creates a basic shell of a class.
We're gonna make use of it as a managed bean,
and we've done all this before, right?
We go through and simply do an import
on javax.faces.bean,
and then we'll drop in our fields here
for first name, last name and favorite language.
We've done all this stuff before.
And what I'd like to do is go through
and actually create a no argument constructor here.
So, the no argument constructor,
the same name as the class, student five,
and it does nothing for right now.
Then, we'll also make use of the getters and setters here.
So we use that same Eclipse technique.
I'll simply do a right click.
I'll go to source.
And I'll choose Generate Getters and Setters.
This will bring up our dialogue,
and we simply go through and choose the items we want here.
So we'll choose all of them, favorite language,
first name and last name.
We'll keep all of the defaults.
And then we'll simply hit OK.
Alright, great, so Eclipse did all the work,
it generated all those getters and setters for me
for frit name, last name and favorite language.
So now what I need to do is modify the constructor
to pre-populate the data in the bean.
So inside of our constructor, I'll set up code
for pre-populating the bean data.
So here I'll set first name equals Mary,
last name is public,
and the favorite language of Ruby.
And that's really all we have to do.
So the first time they load this bean,
then they'll actually call the getter methods,
and it'll actually read this information.
So that's one way of pre-populating.
Another way is that we could also
read this information from a database.
And I'll cover all those gory details
as far as database integration
in the premium version of the course.
So don't worry, you'll get all the details of it
later in the course.
Excellent, so now that we have the code in place,
we can go ahead and run the application,
and we can see that the first time we load the form,
the data is already pre-populated.
So again, remember when it makes use of that input text
and the value, It'll actually call the getter methods.
And so in the constructor, we've already pre-populated
that information, and that's how we get the values here
for first name, last name,
and the favorite programming language.
So this is very good.
Good job.
So we made some really good progress in this video.
So, we went through the pre-populate demo.
We also went through the actual process
of loading the form data,
and we pull it all together
with the full JSF page example.
Great job.
This wraps up the video.
In this video we learned how to pre-populate JSF forms.