JSF Tutorial #12: JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Managed Beans

In this video, I will show you how to use JSF Forms and Managed Beans.

Please SUBSCRIBE to my YouTube channel.


Download JSF Source Code

# Video
1 Introduction
2 JavaServer Faces Overview
3 Setting up your Development Environment - Overview
4 Installing Tomcat - MS Windows
5 Installing Tomcat - Mac OS X
6 Installing Eclipse - MS Windows
7 Installing Eclipse - Mac OS X
8 Connecting Eclipse to Tomcat
9 JSF Behind the Scenes
10 JSF HelloWorld
11 Creating JSF HTML Forms
12 JSF Forms and Managed Beans
13 Drop-Down Lists - Part 1
14 Drop-Down Lists - Part 2
15 Radio Buttons
16 Check Boxes
17 Prepopulating Forms
18 Recommended JSF Books and Resources

Do You Need More Details?

  • Do you need to connect to a database?
  • Display SQL results in a HTML table?
  • Perform SQL insert, updates and deletes?
I have a premium course that shows you how to complete all of these tasks.
  • Database Integration with JDBC
  • Displaying Data in Lists and Tables
  • Validating HTML Forms
  • Implementing Business Logic with Managed Beans
  • Deploying applications with WAR Files
Read more about the premium course at http://www.luv2code.com/jsf-for-beginners

Follow luv2code with the links below:

– Website: http://www.luv2code.com
– YouTube: http://goo.gl/EV6Kwv
– Twitter: http://goo.gl/ALMzLG
– Facebook: http://goo.gl/8pDRdA

JSF Tutorial Transcript:

Hi. Welcome back. In this video I’m going to 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 the JSF Expression Language for accessing Managed Beans.

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 JSF page. All right, 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, “What exactly is a Managed Bean?”

A Managed Bean is simply a regular Java class. It’s commonly used to hold the form data, you send it a form it’ll hold the form data for you. You can also use Managed Beans to hold you 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 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 EJB’s. EJB’s 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 how you can use Managed Beans in a JSF application. Notice on 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, remember the Managed Bean holds your form data.

Then it goes over to the student_confirmation.xhtml another page and then this page can actually access that Managed Bean and read data from that Managed Bean. That basically reads the form data that will submit it on the previous page. That reads in the student’s first name along with the student’s last name and give a confirmation page. I’ll show you how all this works here in a second.

All right, let me switch over and show you a live demo of this example. 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.

Then it’ll 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. This all works out pretty good and now let me 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?”

First of it’s just a regular Java class and you have to follow these rules. Your Java class needs to have a public no argument constructor. It also needs expose properties via public getter and setter methods. Finally your class needs to make use of an annotation at Managed Bean, this is actually a no feature of JSF2. In previous versions you actually had to configure all these beans via config file but the annotation support is the new feature of JSF2.

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. What I’ll do is I’ll move into clips, I’m going to make use of that same project we’ve been using so far that hello world project. We’re not going to create a new one, we’re simply going to use the existing one.

If you don’t have the hello world just go back to the previous videos where I showed you how to setup the hello world example. Now, and the Java resources directory I’m going to actually create a new Java class so I’ll make use this package com.luv2code.jsf.hello. I’ll create this new class called Student, this is going to be my Managed Bean.

Now, hit the finish button in the bottom corner.

I create a basic stuff here for a Student class. Now, since this is the Managed Bean I need to make use of that annotation @ManagedBean, I’ll just say @ManagedBean. Now, we’ll have this import again so we need to do an explicit import for this Managed Bean. Now, one area to be very careful of is that there’s two Managed Bean classes, one in the javax.faces.bean package and another in javax.annotation.

Here you want to be sure to use javax.faces.bean that’s for JSF Managed Beans. All right, we have this annotation import 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 strengths. Now, if you remember from the slides the first thing we need to do is create a no argument constructor.

Remember we create a constructor by simply using the same name as the class and we it has no return type. That’s our 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 getters and setters. I’ll right click, I’ll choose source and then I move down to this entry generate getters and setters. Looks very interesting.

I can use this feature here to automatically generate source code for me. They’ll bring up a dialog box, they’ll give you a list of all of your fields that you have and they’ll ask you which ones you want to create getters and setters with. I’ll choose both 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 okay.

Now, Eclipse just did a lot of good work for us, this is very interesting here. It created getters and setter methods so it created a get first name, set first name, that was created automatically by Eclipse. It also did a similar thing here for last name, a get last name and set last name. Again, a very nice tip here where Eclipse can generate source code for you.

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. Everything is all lined up just right for us, this is really good. Good job so far. The JSF expression language is used to access properties of a Managed Bean. 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.

The basic syntax of it is you give a pound with a curly brace and you give the beanName 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.

Here’s an example of setting a Managed Bean property from a JSF page. If you have a form setup you can make use of the input text and you say value equals and you have student.firstname. What happens is that when you actually submit the form JSF will call student.setfirstname, all right? Note here the property name, JSF will automatically call set.firstname or set whatever that given property name is.

We just saw an example of setting a bean property, well how do you actually read or get a bean property in a JSF page. To get a property you simply use … Make use of the JSF expression language. Here is an output saying student’s name is, I use the pound curly brace and then I say student.firstname.

Again, I gave the bean name just student dot a property. In the background JSF will actually call student.getfirstname. Note here student.get whatever that property name and here our property name is first name. There is you calling methods in our Jave Bean or a Managed Bean in the background when they process this page.

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 studentform.xhtml where I’ll enter the data, the second page call student_confirmation.xhtml and we’ll make use of that Managed Bean that we created a little earlier in this video.

All right, let’s switch in to 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. Let’s go ahead and start with the form. We’ve seen a lot of this stuff before, I’m not going to cover all the high level stuff but what I will do is just highlight the form and we’ll cover the aspects of the form.

On line 14 what we’ll do is we will give a label for first name, we’ll make use of this JSF unit component inputtext and then the value that we’ll have here is student.firstname. When we actually submit the form data, in the background JSF will call student.setfirstname. 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 cover that later.

Now, for last name also a similar thing for this input text. In that form field we’ll have student.lastname so when they actually do a submit JSF will call student.setlastname. Then finally here’s our submit button which is our command button again, right? Then the action this is where we tell it the actual code to call.

Here we’ll actually going to send it over to a confirmation page student response. As we learned earlier this will actually call student_response.xhtml but we don’t have to get the explicit extension, JSF will call that XHTML by default. Now, let’s go ahead and look at that student_response.xhtml file.

This is really just a confirmation page of saying, “Hey, this is the information that we read in.” Moving down here to the body, I’ll just have some normal outputs, some static text, the student is confirmed and then we’ll make use of the JSF expression language. I’ll say student.firstname so it’s going to call that Managed Bean and say student.getfirstname. It’s going to read the data.

We’ll do a similar thing here for the last name while we have student.lastname. Student.getlastname is what JSF will call in the background. That’s basically though 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. We have our form, we get the first name and the last name, John for the first name, Doe for the last name and I’ll hit submit.

Then we’ll get the results, “The student is confirmed,” and again this is our confirmation page and they’ll drop in the student.firstname and they’ll also drop in student.lastname which is actually making use of our Managed Bean in the background. This looks really good, we looked at all the different components and pull it all together with the nice coating example. Good job.

All right, in summary in this video we learned what Managed Beans are, we also learned about the coding requirements for our Managed Bean and we created the Managed Bean from scratch. We also discuss the JSF expression language and how we can use it to set bean properties from a JSF page. Also how to read bean properties from a JSF page.

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 use them in our JSF pages.

Did you like my blog post?

Signup now and receive an email when I publish new luv2code content.

I will never give away, trade or sell your email address. You can unsubscribe at any time.


Leave a Reply