BreadcrumbsHome / JSF Tutorial #16 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Check Boxes – selectManyCheckbox
JSF Tutorial #16 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Check Boxes – selectManyCheckbox
Last Updated on Sunday, 10 April 2016 Written by Chad Darby Monday, 13 July 2015
In this video, I will show you how to use JSF Forms and Check Boxes.
Please SUBSCRIBE to my YouTube channel.
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?
- Database Integration with JDBC
- Displaying Data in Lists and Tables
- Validating HTML Forms
- Implementing Business Logic with Managed Beans
- Deploying applications with WAR Files
Follow luv2code with the links below:
JSF Tutorial Transcript:
Hey, and welcome back. In this video we’re going to learn how to use JSF forms and Checkboxes. We’ll first start off with a checkbox demo. Then we’ll look at the JSF terminology for selectManyCheckbox. Then we’ll wrap it all up with a full JSF page example.
Let’s start with our checkbox demo. This is based on the previous example that we’ve been working on so far. We have a student’s first name and last name that we’ll enter. Then the new section here is for favorite programming languages. In the previous example they could only choose one language. Now with checkboxes they can choose multiple languages. In this case the user chose Java and C#. Then they’ll hit submit. Then on our confirmation page, now what we’ll do is we’ll display a list of all the languages that they selected. Here they can actually choose more than one language. This is really good. I’ll show you how to write all the codes to implement this.
In the JSF world, a checkbox is represented by the tag selectManyCheckbox. Now I actually like this name because it makes sense. If you recall from some of the previous videos, I had problems with some of the tag names, but this one is very straightforward: selectManyCheckbox. You can select many options from that given checkbox group. This is very straightforward and very intuitive, so I’m happy now. Good job.
Let’s go ahead and move forward and see how we can actually use this selectManyCheckbox in our code. In this example here we’re going to allow the user to choose their favorite programming language, so we just give them a little label there at the beginning. Then on this next line we’ll make use of that tag selectManyCheckbox.
Then we specify the value, meaning which managed bean will we bind this to. Here we’re going to bind it to this managed bean called studentFour.favoriteLanguages. We’re going to call this property favorite languages, which really will be an array of strings, but I’ll talk about that in a second.
Now we just go through and we just drop in all the different select items that the user can select for the checkboxes, so Java, C#, PHP, Ruby, and so on. As you can see, this follows very similar to some of the previous elements that we’ve used before for radio buttons and our select menus, but in this case we’re making use of that selectManyCheckbox tag.
Let’s pull it all together. Up in the top left we’re going to have this form, Student_four_form.xhtml. The user can enter their standard stuff, first name and last name. Now the new entry or the new area that we’ll have is our favorite programming languages. They’ll be able to go through and choose their language: Java, C#, PHP, Ruby, or whatever. They’ll hit submit. That data will go across. We’ll have a managed bean here in the middle that’s going to hold the form data. Our managed bean is going to be called StudentFour.
Then we’ll have this response page in bottom right: student_four_response.xhtml. Again, we’ll display the student’s name, but then we’ll also display lists of all of the favorite programming languages that the user selected. It can be just more than one value here, so Java, C#, and others if they’ve chosen that. We’ll make use of a list element to display all of the information that the user entered.
I always like to start with a to-do list. The first thing we’re going to do is add a new managed bean for StudentFour. We’re going to have a first name, last name, and favorite languages. This is going to be an array of strings for us. We’re going to update the form to make use of the selectManyCheckbox. Then we’re going to update our confirmation page to display the favorite languages for a student.
This looks like fun. Let’s go ahead and get started.
Let’s go ahead and move into Eclipse. What we’re going to do is continue to use our existing project, the hello project. That’s from the previous videos. What I’d like to do is go ahead and move into the Java source directory and I’m going to look at this file StudentFour.java. Now we’re not going to create the file from scratch but you can go ahead and create a new class called StudentFour, and then you can make the edits that I’ll make here. On lines five and six we have our StudentFour. It’s a managed bean. You’ve seen all of this stuff before for building beans.
Now what I need to do is define our field, so I’m going to define a field for first name and a field for last name. We’ve done this many times before. One thing that’s new in this example is that since the user can select multiple languages, then we need to make use of an array of strings. We can’t use just a single string element by itself, we need to use an array of strings. Remember, we set up an array in Java using the square brackets. Here I have private string, square brackets, favoriteLanguages. This will allow the JSF system, when the user selects multiple languages on the form, to store them accordingly in our bean. Let me just give us some white space here at the bottom.
Next thing we need to do is create our public no-argument constructor. Our constructor is the same name as the class. Does nothing for right now, which is good. Now I need to add all the getter and setter methods. Again, I’m going to use the Eclipse technique of inserting the code for me. I just do a right click. I choose source and I go to generate getters and setters. This is going to bring up a dialogue. Basically here you just go along and check off each one of those fields, favorite languages, first name and last name.
Once those are all selected, then you can go ahead and click the OK button.
Okay, great. Eclipse just generated a lot of code for this here. Here are the getters and setters for first name, the getters and setters for last name, and finally for this new piece that we’re working with, getters and setters for favorite languages. Note here how they’re using the array of strings, string with the square bracket. That means an array. This all looks really good. Good job.
Now the next thing we need to do is move over to our form. I’ll look at this file, student_four_form.hxtml. I’ll go ahead and scroll down to the new section here for favorite programming languages. That’s just the label that we’ll have. Then we make use of that selectManyCheckbox tag. For the selectManyCheckbox we set up the actual managed bean property that we’re going to bind it to, so here, studentFour.favoriteLanguages. Recall when we submit the data JSF will call studentFour.setFavoriteLanguages. Then we simply go through and we just drop in all the options here: Java, C#, PHP, and Ruby, and so on. That gives us the whole checkbox layout for our form.
Then, moving on down, this is our command button or our submit button. Then the action for this is student_four_response. Again, as we’ve learned, whenever we do a submit, JSF is going to actually look for a file called student_four_response.xhtml. JSF will actually add that extension on there for you, .xhtml. That’s our form. This looks really good.
Finally, what we want to do is handle our confirmation page, or our response page. This is student_four_response.xhtml. I’ll go ahead and open this file. This is basically just the confirmation for the user. One thing that’s new here is that when we display the student’s favorite programming languages we actually have to loop over each one of the elements in the array and display the information. I’m going to make use of an unordered list, UL, that gives you a bullet list in the HTML world. I’ll make use of this new element here called ui:repeat. This ui:repeat will take a value which is an actual collection or an array and it will actually do a loop over that collection for you. Just think of it as like a shortcut for doing a four loop. It’s going to loop over studentFour.favoriteLanguages. Remember, favoriteLangues is an array so they’ll call getFavoriteLanguages(). Then based on that array, they’re going to loop over it as they go through it.
Now each time they loop over the array they’ll set up a little temporary variable. We’re going to set our temporary variable name to be tempLanguage. Now once we have that temporary variable, then we can actually use it inside of our loop. Here I can say tempLanguage and I can display that out using a list item. That will give me an actual bullet item for that given favorite language. This is something new, ui:repeat. It will basically loop over an array or a collection. You can use it to display in a collection or an array.
Now let’s go ahead and run the application. Up top we have the standard first name and last name. Then we can go through and choose a favorite language. Again, we can choose multiple items here for our favorite language. For this example we’ll choose Java and C#, and then we’ll go ahead and hit the submit button. We come back with the confirmation page and then the student’s favorite programming language. Now this information, that’s part of that list, that ui:repeat, so it’s going to loop over each one of those languages and then print it out using a bullet list or a list item. That’s how that part works out. This is good. Good job.
Let’s go ahead and summarize this video. We started off with the checkbox demo. We made use of the selectManyCheckbox. We pulled it all together with a full JSF page example. Let’s wrap up the video. In this video I showed you how to use JSF forms and checkboxes.