JSF Tutorial #17 – JavaServer Faces Tutorial (JSF 2.2) – Pre-populating JSF Forms

In this video, I will show you how to pre-populate JSF forms.

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:

Hey. Welcome back. In this video I’m going to show you how to pre-populate JSF forms. We’ll start off with a demo of pre-populating. Then we’ll take a look at how to load form data. Then finally, we’ll wrap it up with a full JSF page example. Some great stuff here. Let’s go ahead and dive in.

Here’s our demo. Basically, when the form is first loaded it will already have data pre-populated in it. You can think of it as maybe editing a student or something. 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 a managed bean. 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 alluded to earlier in the video series, but now we’ll actually cover it in detail. This is how JSF can actually pre-load or pre-populate some of your form data. Let’s go ahead and start with a code example. Here we have our JSF form. Then we have the first name label. We make use of the input text where they can enter the user’s first name. Then also we have the value referencing a managed bean. 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 that it will call studentfive.getfirstname. It will 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.

When the page is loaded, JSF will call studentfive.getfirstname. Now the normal process still works, meaning when we submit, it will call studentfive.setfirstname.

Just like in all of our previous videos, we’ll pull it all together with an example. In the top left we’ll have our student_five_form.xhtml. In the center we’ll have a managed bean. We’ll call it student five to make it unique from the other beans. Then at the bottom we’ll have our response page, student_five_response.xhtml. Here’s the information for our “To Do” list. The first thing we need to do is ad a new managed bean class called studentfive. We’ll have three fields: firstname, lastname, and favoritelanguage. Then we’ll modify the code to pre-populate the data in the bean. I’ll show you the actual coding techniques to make that happen. Good stuff here. Let’s go ahead and start coding.

Let’s move into Eclipse. What we’re going to do is make use of an existing project so far: hello world. 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. Help we’ll start with the student_five_form.xhtml. This form is very similar. We’ve seen a lot of this stuff before for student five. In our form section, on line 15, we have our first name and our last name, and the programming languages. That’s the basics there of the form.

Then scrolling back up to first name, this is where we set up the first name label and we set up studentfive.firstname. 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. 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.

The next thing we need to do is actually create a new class for that managed bean, studentfive. I’ll click in my Java source code directory under my package. I’ll simply do a right click and I’ll say new Java class. This will bring up a dialog. The name of the class is StudentFive. I’ll keep all the other defaults. Once you’re happy with that, you can move down and hit the finished button. This creates a basic shell of a class. We’re going to make use of it as a managed bean. We’ve done all this before. We go through and simply do an import on javax.faces.bean. Then we’ll drop in our fields here for first name, last name, and favorite language. We’ve done all this stuff before.

What I’d like to do is go through and actually create a no argument constructor here. The no argument constructor, the same name as the class: StudentFive. It does nothing for right now. Then we’ll also make use of the getters and setters here. We’ll 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 dialog. We simply go through and choose the items we want here, so we’ll choose all of them: favoritelanguage, firstname, and lastname. We’ll keep all the other defaults. Then we’ll simply hit okay.

All right, great. Eclipse did all the work, generated all those getters and setters for me for firstname, lastname, and favoritelanguage.

Now what I need to do is modify the constructor to pre-populate the data in the bean, since out of our constructor I’ll set up code for pre-populating the bean data. Here I’ll set firstname = Mary, lastname is Public, and the favoritelanguage of Ruby. That’s really all we have to do. The first time they load this bean, then it will actually call the getter methods and it will actually read this information. That’s one way of pre-populating.

Another way is that we could also read this information from a database. I’ll cover all those gory details as far as database integration in the premium version of the course. Don’t worry, you’ll get all the details of it later in the course. Excellent. 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. Again, remember when it makes use of that input text and the value, it will actually call the getter methods. In the constructor, we’ve already pre-populated that information. That’s how we get the values here for first name, last name, and the favorite programming language. This is very good. Good job.

We made some really good progress in this video. We went through the pre-populate demo. We also went through the actual process of loading the form data, and we pulled it all together with a full JSF page example. Great job. This wraps up the video. In this video we learned how to pre-populate JSF forms.

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