Today is Tuesday, 17th January 2017

Archive for June, 2015


JSF Tutorial #14 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Drop-Down List – selectOneMenu – Part 2

In this video, I will show you how to use JSF Forms and Drop-Down Lists. I’ll enhance the previous example to read the form values from a managed bean.

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, we’re going to cover part two of JSF forms and drop-down lists. What we’re going to do in this example is that we’re going to enhance the previous video example. Instead of having to drop-down list values, hard coded in the JSF page, what we’re going to do instead is leave the values from the managed bean. This will make the application a bit more dynamic. Let’s go ahead and move into Eclipse. Again, we’re going to continue with the same project as before, hello project. I’m going to edit the file StudentTwo.java. This is our managed bean from the previous video. What I’m going to do here is I want to update the managed bean to to contain a list of options. This will be the list of countries that a user can select. I’ll just import the type List. This is the list of country options.

Now, what we need to do next is populate this list with some data. The first thing I’ll do is I’ll construct the list in the constructor, so countryOptions = new ArrayList<>(). Then I’ll go through and fix the import here for our ArrayList. This is java.util.ArrayList. Then I need to just drop in the list of options here. I want to drop in some code that I already have. I have this ArrayList of strings and I’m going to simply add in the various countries: Brazil, France, Germany, India, and so on. Now, the next thing I need to do is actually create a getter method for that list of country options. Again, I’ll make use of that Eclipse trick where I’ll do a right click. I’ll choose Source. Then move down to generate getters and setters. In the box here, I’ll expand the list here for countryOptions and I’ll select the options for getCountryOptions. I really only need a getter here, I don’t need a setter. Then, as far as the placement of this getter, I’ll place it right after the after studentTwo, right after the constructor or this class. Next, the actual insertion point, and then I’ll hit okay.

And so on lines, thirty-nine down to forty-one, this is the new code that Eclipse just entered for me. It’s a public getter method for countryOptions and it’s going to return the list of strings to the calling program. All right. This looks really good right now. I’ll do some quick clean up here and great, so we’re in really good shape right now with this addition to the managed bean. The next thing I need to do is update my form. I need to update the drop-down list. Instead of having a hard coded values, I need to make use of that managed bean. I’m moving to the code that I had before from the previous video and I will simply select all of the code that was hard coded and I’ll actually remove it or delete it from this file. Instead, what I’ll do is I’ll drop-in some new code. Right now, selectOneMenu value studentTwo.country, that’s the same. This is the important line here. Here’s selectItems plural and I have value#{studentTwo.countryOptions}. When this page is loaded, JSF will actually call studentTwo.getCountryOptions. It’s going to return that list of streams that we’ve already defined inside of that managed bean class.

This is how we can get the list of options from the managed bean as a post to hard coding it in the JSF page. Now I just run the application and here’s the output. We have our first name, last name, so I enter Ajay Rao again and then for country. Now this country drop-down list is being populated by the information from our managed bean. It’s no longer being hard coded in the JSF page but that data is coming from our managed bean. Now I’m going to click submit and here we listed student’s country of India. That works out as desired. In this part of it, nothing’s really changed as far as the confirmation page. All right. This looks really good. Good job.

This wraps up the video. In this video, we learned how to use JSF forms and drop-down list. In particular, we enhanced our previous example to make use of managed beans for the form data. Instead of using the hard coded data in the JSF page, we actually have the data being pulled from a managed bean.

Share


JSF Tutorial #13 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Drop-Down List – selectOneMenu

In this video, I will show you how to use JSF Forms and Drop-Down Lists (selectOneMenu).

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:

00:00
Hey, welcome back. In this video, I’m going to show you how to use JSF forms and drop-down list. We’ll cover the following topics. First we’ll define what are drop-down list, then we’ll do a review of the HTML select tag. Next we’ll discuss some JSF terminology, then we’ll put it all together with the full JSF page example. All right, we have a lot of good things in store. Let’s go ahead and get started.

What exactly are drop-down list and we’ve all used them before, right? You have a form, they have a list of options, you scroll through the list of options and you select the one that matches for you and then that information is set there, you can continue to fill out the information and go ahead and submit the form. That’s the idea of a drop-down list, you’ve seen this before.

Drop-down list have been around for awhile. Let’s do a quick review of how we can do this with HTML. We’ll have an HTML tag called select, we give the name of the tag and then you simply embed a list of options. In this case we have Brazil, France, Germany and India. This snippet of HTML will give us a list similar to what we have here on the right side. Just a list of options that a user can select.

Now we’ll look at how we can use these items in JSF. In the JSF world a drop-down list is represented by the tag of selectOneMenu, eewww, okay. The name is not really straightforward but it’s a drop-down list and the whole idea here is it allows you to select one item from a menu and that’s how they came up with the name of selectOneMenu.

02:00
I’m not a huge fan of the name but that’s the actual tag that we’ll use for drop-down list, selectOneMenu and we’ll go ahead and take a look at some examples of how to use this.

This drop-down list again we’ll have a form, we’ll have a list of countries, a user can choose one of the countries there from the list. How we will do this with JSF? Where is the code and how could we put this together? Here on the center of the slide we have this idea of a selectOneMenu and then we give the value #{studentTwo.country}, we’re going to map that to a managed bean field. Then we’ll just go through and we just drop in a list of items, Brazil, France, Germany, India. Notice here when we give the select items we provide an item value and label. The label is the information that will show up on the screen that the user will see and then the value is an actual code that you can have for that entry. In this example the value and the label are the same but you can imagine an example where the value could be the 3 letter country code and the label could be the normal full name of the country.

All right, now we saw the little code snippet. Let’s go ahead and pull this together with an example. On the top left I’ll have this form, students_two_form.xhtml. We’re going to have a new entry here for country and that’s going to be in our drop-down list. We’ll also have a managed bean, we’ll call this managed bean studentTwo just so it’s a different class name than our previous examples. It’s going to have the actual country and then at the bottom we’ll have a student_two_response.xhtml. We’ll simply update this confirmation page to also list the country that the user selected.

Now whenever I have a new programming task, I always like to build a to do list. The first thing we are going to do is we are going to add a new managed beam called studentTwo and it’s going to have the first name, last name and a new field called country.

04:00
Then we’ll update the form to make use of our JSF tag selectOneMenu that’s for our drop-down list and then we’ll also update the confirmation page to display the selected country. We could say the students county is X. All right, a lot of good things in store. Let’s go ahead and get started.

All right let’s go ahead and move into Eclipse. Once I’m in Eclipse I’m going to use that existing project that we’ve been working on so far, hello, that was created in one of our previous videos. The first thing I need to do is create a managed beam. I’m going to move down into my Java source directory, I’ll right click, I’ll say new, class and the name of the class is studentTwo and again we are using a different name just to make it unique from the previous example that we worked on. Then I’ll keep all the other defaults here and I’ll hit the Finish button.

Okay, this is our basic student class. Our StudentTwo is going to be a managed beam and I’ll import the appropriate items and again remember that we need to import javax.faces.bean.managedbean, select that item and eclipse will help you out there. Great. Now we need to simply define our fields for first name, last name and the country. Let me just expand the window here for a second. Okay, great, we have first name, last name and country. Country is the new item that we are adding here for this example. All right, this looks pretty good so far.

Now the next thing we need to do of course is create a no argument constructor. I’ll just create this new constructor here for studentTwo, it does nothing, very good.

06:00
Let me just give us some free space here and now we need to generate the getters and setters for our fields. This will expose properties to the JSF system. Again I’ll make use of that really cool Eclipse trick of doing a right click, going to source, and then moving down to generate getters and setters. Remember Eclipse will actually generate the getters and setters for us automatically. It will give me a box here, I’ll go ahead and select the fields that I want, I’ll choose country, first name and last name and I’ll hit OK and now we have this new code that was just created for us. This looks really good.

We have methods for first name, and we have methods for last name and finally we have methods for country. All right this is great. All right now that our bean is taken care of, let’s go ahead and move over to our form. I’ll move into the web content directory, web content, I’ll choose student_two_form.xhtml, just expand the window here. Now we’ll keep all the standard stuff that we have before. The one thing I’m going to add here is a new entry here for country and I’ll setup my selectOneMenu. This is our drop-down list and we are going to list all the countries that a user can select.

Here on line 24, I have a selectOneMenu, I bind it to studentTwo.country.

08:00
Remember in the student two class we have a field called country with public getters and setter methods. Then I’ll read and write to that managed beam and then we’ll just go through and list on all the different options. The item value and the label. Again labels are just displayed to the user and the values and code we can use in the background. That’s pretty much it, that’s our form and then finally we have our submit button and our action we are going to send it over to a new page student_two_response and remember we don’t have to get the extesntion here, JSF will automatically look for a page called student_two_response.xhtml.

All right let’s go ahead and move over to our confirmation page. Our confirmation page is student_two_response.xhtml. I’ll go ahead and open up this file. We have on line 12, we have the information before the students confirmed, the new information is on line 16, the students country and then here we give the #{studentTwo.country}, they’ll actually talk to that managed bean called the getter method on for country so to call studenttwo.getcountry and the results will be displayed right here in the page and that’s basically it. Good job.

All right, I just ran the application. Here is our form, we have first name, last name and we also have our drop-down list, I’ll go ahead and for first name I’ll enter Ajay Rao and for the country, go and choose something item out of here, I’ll choose India and if everything looks good to me, I’ll go ahead and hit the submit button and then we’ll get our confirmation page.

10:00
This student’s country is India. This is great, it works exactly as desired. Good job.

Okay, in summary, what we did was we actually learned about drop-down list. We also reviewed the HTML select tag. We looked at some of the JSF terminology for selectOneMenu and then finally we wrapped it all up with the full JSF page example. A lot of good things we’ve accomplished here. All right so this wraps up the video. In this video I showed you how to use JSF forms and drop-down list. Stay tuned because I’m going to make some enhancements to this example, instead of hard coding the form data, I’m going to show you how to read the form data from a managed beam. Stay tuned for the next video. I’ll see you then.

Share


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:

00:00
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.

00:50
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.

01:51
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.

03:17
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.

03:55
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.

04:47
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.

06:00
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.

08:13
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.

10:00
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.

11:40
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.

Share