JSF Forms and Managed Beans

Chad Darby
A free video tutorial from Chad Darby
Popular Java Spring Instructor - Best Seller
4.6 instructor rating • 8 courses • 444,041 students

Learn more from the full course

JSF 2.2 - Java Server Faces for Beginners - Build a DB App

JSF 2.2 - Build a Real JSF Web Application that connects to a Database - Most Popular JSF course

05:32:28 of on-demand video • Updated October 2020

  • Build a fully functioning JSF web application from scratch
  • Set up your JSF development environment with Tomcat and Eclipse
  • Read HTML form data with JSF
  • Apply HTML form validation with built-in JSF rules and custom rules
  • Integrate Managed Beans to handle business logic
  • Display data using tables
  • Add database support with JDBC: query, insert, update and delete
English 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.