Narrator: Hi, welcome back.
In this video I'm gonna show you how to use JSF forms
and managed beans.
Here's a list of topics that we'll cover.
First off we'll find out what are managed beans.
Then we'll discuss the requirements for creating
a managed bean.
Next we'll discuss how to create a managed bean with code.
Then we'll discuss JSF expression language
for accessing managed beans.
And then we'll learn how to set a managed bean property
from the JSF page, and likewise,
we'll learn how to get or read the managed bean property
from a JSF page.
All right, so we have a lot of good things in store.
Let's go ahead and get started.
The common question that's often asked from new developers
with JSF is well, what exactly is a managed bean?
Well, a managed bean is simply a regular Java class.
It's commonly used to hold the form data,
so when you submit a form it'll hold the form data for you.
You can also use managed beans to hold your business logic
and we'll cover that later in the course.
Now, the main idea here is that the bean is actually
created and managed by JSF hence the name of managed bean.
Your, your code will not have to manually create the bean.
It'll be automatically created by the JSF system.
One thing that's very important is that managed beans
are not to be confused with Enterprise Java beans or EJBs.
EJBs are a totally different technology,
a totally different subject.
So don't mix the two up.
Managed beans are not the same as Enterprise Java beans.
This diagram here is a very good layout of you can use
managed beans in a JSF application.
So notice in the top left we have the student form.xhtml.
This is where the user will actually enter their form data.
They'll hit the submit button.
Behind the scenes what JSF will do is it'll actually set
data on a managed bean, so remember,
the managed bean holds your form data.
Then it goes over to the student confirmtation.xhtml,
another page, and then this page can actually access
that managed bean and read data from that managed bean.
So it'll basically read the form data that was submitted
on the previous page.
So they'll read in the students first name,
along with the students last name,
and give a confirmation page, and I'll show you
how all this works here in a second.
All right, so let me switch over
and show you a live demo of this example.
So again, this is our student form HTML.
I can enter the user's first name and last name,
and then I can move down and hit the submit button.
Once I hit the submit button in the background JSF
will take that form data, use that managed bean,
store that information in the managed bean,
and then it will send us over to our response page
or confirmation page, and this person can access
that managed bean or read in that information
from the managed bean.
So this all works out pretty good,
and I'll actually show you all the low level code
on how to make this happen in this video.
Now you may wonder, what are the requirements
for creating a managed bean?
I mean, how do I create the code?
Well, first off it's just a regular Java class,
and you have to follow these rules.
So your Java class needs to have a public,
no argument constructor.
It also needs to expose properties via public getter
and setter methods.
And finally, your class needs to make use of an annotation
at managed bean.
This is actually a new feature of JSF two.
In previous versions you actually had to configure
all these beans via config file.
But the annotation support is a new feature of JSF two.
Now that we understand the theory behind managed beans
let's go ahead and look at some code,
and see how we can actually create our own managed bean
from scratch.
So what I'll do is I'll move into Eclipse.
I'm gonna make use of that same project we've been
using so far, that hello world project.
So we're not gonna create a new one.
We're simply gonna use the existing one.
So if you don't have the hello world just go back
to the previous videos where I showed you
how to set up the hello world example.
Now in the Java resources directory I'm gonna actually
create a new Java class, so I'll make use
of this package com.luv2code.jsf.hello.
And I'll create this new class called student.
This is gonna be my managed bean,
and I'll hit the finish button in the bottom corner.
So to create a basic set up here for a student class.
Now, since this is the managed bean I need to make use
of that annotation, at managed bean.
So I'll just say at managed bean.
Now we don't have this imported yet,
so we need to do an explicit import for this managed bean.
Now one area to be very careful of is that there is two
managed bean classes, one in the Javax.faces.bean package,
and another one in Java X annotation.
Here you wanna be sure to use Java X faces bean,
that's for JSF managed beans.
All right, so we have this annotation imported properly.
Now what I'd like to do is create two fields for this class.
So I'd like to create a first name field,
and a last name field, and they're both strings.
Now if you remember from the slides,
the first thing we need to do is
create a no argument constructor.
So remember we create a constructor by simply using
the same name as the class, and we have no return type.
So that's our no arg constructor,
and that's in place, and we kind of meet
that one requirement there.
Next what we need to do is create getter and setter
methods to expose properties.
So we need to have public getter and setter methods.
Now what I could do is I could manually write these out
but what I'll do is actually make use of a neat trick
in Eclipse where Eclipse can actually generate source code
for you and Eclipse can generate the getters and setters.
So I'll right click, I'll choose source,
and then I'll move down to this entry generate
getters and setters.
Hmmm, looks very interesting.
So I can use this feature here to automatically
generate source code for me.
So that'll bring up a dialog box that'll give you
a list of all of your fields that you have,
and it'll ask you which ones you wanna create
getters and setters with.
So I'll choose both of them, first name and last name.
You can set some other options here but I'll go ahead
and keep the defaults and I'll hit OK.
And now Eclipse just did a lot of good work for us.
This is very interesting here.
So it created getters and setter methods.
So it created a get first name, set first name,
and that was created automatically by Eclipse,
and it also did a similar thing here for last name,
a get last name and set last name.
So again, a very nice tip here where Eclipse can generate
source code for you.
So, we're in good shape right now.
We have our public no arg constructor.
We have our getter and setter methods
and we have our managed bean.
So everything is all lined up just right for us.
This looks really good.
Good job so far.
The chance to have expression language
is used to access properties of a managed bean.
So you've seen this syntax earlier,
but I didn't really have a chance
to give a full discussion on it, and I'll do that now.
So the basic syntax of it is you have a pound
with a curly brace, and you get the bean name
dot the property name.
This will allow you to access that property,
either to read the data or to set the data.
I'll show you some examples of this coming up
as far as using it with forms
and also with confirmation pages.
So, here's an example of setting a managed bean property
from a JSF page.
So if you have a form set up you can make use
of the input text and you say value equals
and then you have student dot first name.
So what happens is that when you actually submit the form
JSF will call student dot set first name, all right?
So note here the property name.
JSF will automatically call set first name,
or set whatever that given property name is.
We just saw an example of setting a bean property.
Well, how do we, how do you actually read or get
a bean property in a JSF page?
So, to get a property, you simply use, make use
of the JSF expression language.
So here's an output saying student's name is.
I used the pound curly brace and then I say student
dot first name.
So again, I give the bean name
just student dot the property.
In the background JSF will actually
call student dot get first name.
So note here student dot get whatever that property name
and here our property name is first name.
They're actually calling methods on our Java bean
or our managed bean in the background
when they process this page.
So let's go ahead and pull this together with an example.
In this example I'm going to have two JSF pages.
I'll have a student form.xhtml, where they'll enter
the data, and I have a second page called student
confirmation.xhtml, and we'll make use of that
managed bean that we created a little earlier in this video.
All right, so let's switch into Eclipse.
What I'll do is I'll first take a look at two files here,
like I mentioned earlier, student form.xhtml,
and student confirmation.xhtml.
So let's go ahead and start with the form.
So, we've seen a lot of this stuff before.
I'm not gonna cover all the, the high level stuff,
but what I will do is just highlight the form,
and we'll cover the aspects of the form.
So on line 14 what we'll do is we
will give a label for first name.
We'll make use of this JSF UE component input text
and then the value that we'll have
here is student dot first name.
So when we actually submit the form data in the background
JSF will call student dot set first name.
Now, JSF also makes use of this when they show the form
for the first time by calling a getter on it,
but we'll, we'll cover that later.
Now, for last name also a similar thing for this input text.
So on that form field, we'll have student dot last name.
So when they actually do a submit JSF will call
student dot set last name, and then finally
here's our submit button, which is our command button,
again, right?
And then the action, this is where we
tell it the actual code to call.
So here we're actually gonna send it over to a confirmation
page, student response, and as we learned
earlier this will actually call student response.xhtml,
but we don't have to give the explicit extension.
JSF will call that XHTML by default.
Now let's go ahead and look at that
student response.xhtml file.
So this is really just a confirmation page
of saying hey, we, this is the information that we read in.
So when we went down here to the body,
I just have some normal output, some static text.
The student is confirmed, and then we'll make use of the JSF
expression language.
I'll say student dot first name,
so it's gonna call that managed bean and say
student dot get first name.
It's gonna read the data.
We'll do a similar thing here for the last name.
We'll have student dot last name.
So student dot get last name is what JSF will call
in the background.
And that's basically the, how it works
with setting up a confirmation page here for JSF.
Now let's go ahead and run this application
and here's the output for it.
So we have our form.
We get the first name and the last name.
I'll enter john for the first name, Doe for the last name,
and I'll hit submit.
And then we'll get the results.
The student is confirmed and again this is our confirmation
page and they'll drop in the student dot first name
and they'll also drop in student dot last name,
which is actually making use of our managed bean
in the background.
So this looks really good.
We've looked at all the different components,
and we pull it all together with a nice coding example.
Good job.
All right so in summary in this video
we learned what managed beans are.
We also learned about the coding requirements for a managed
bean, and we created a managed bean from scratch.
We also discussed the JSF expression language
and how we can use it to set bean properties
from a JSF page, and also how to read bean properties
from a JSF page.
Well, this wraps up the video.
In this video we learned how to use
JSF forms and managed beans.
We also got a detailed view of how to create
the managed beans and how to use them in our JSF pages.