BreadcrumbsHome / JSF Tutorial #15 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Radio Buttons – selectOneRadio
JSF Tutorial #15 – JavaServer Faces Tutorial (JSF 2.2) – JSF Forms and Radio Buttons – selectOneRadio
Last Updated on Sunday, 10 April 2016 Written by Chad Darby Monday, 6 July 2015
In this video, I will show you how to use JSF Forms and Radio Buttons.
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, welcome back. In this video, I’m going to show you how to use JSF forms and the radio buttons. In this video we’ll cover the following topics: we’ll first start off with a radio button demo, then we’ll look at some JSF terminology for selectOneRadio, and then we’ll walk through a full JSF page example. All right, so we have a lot of good things in store. Let’s go ahead and get started.
All right, so here’s a radio button demo right now. Building on our previous examples that we’ve worked on before already, so we’ll have a first name and a last name for a student, and then we have this new radio button section so they can choose their favorite programming language and they can choose one of the radio buttons based on their given programming language. Here the user selected the language of PHP and they would go ahead and hit the submit button and then we’ll see up here on the screen and in the confirmation page that their favorite programming language is PHP. That’s the idea of how the radio button works.
Now in the JSF world, a radio button is represented by the tag selectOneRadio. Now, this tag actually makes sense. It follows, okay, so they have the word radio in the tag so you know that it’s some type of radio option, so you can do selectOneRadio. What we’ll do on the next slide is we’ll actually see some examples of how to write code for it. All right, here’s a selectOneRadio, so I’m going to just give a label here for favorite programming languages, and then I’ll make use of the selectOneRadio tag. Here’s selectOneRadio, and then I have value equalis, and this is where I set up a link to managed bean, so studentThree.favoriteLanguage.
We’ll see that in the following slides. Then from there we just drop out the different radio options here, so Java, C#, PHP, Ruby. Again, item label is what the user will see and item value is an actual code you can use. Here I’m using them the same, but you can easily change that for your own personal application.
Now let’s go ahead and pull it all together with a JSF page example, so on the top left we’ll have our student form, so this will be student_three_form.xhtml. We’ll have the first name and last name, and then we’ll also have the radio buttons for the favorite programming language that the user can select. Then in the center we’re going to have this new managed bean called student three. This managed bean will actually hold the form data that’s submitted. Then down on the bottom right we’ll have our confirmation page or our response page. Here we’ll simply list out the actual programming language that the student selected. In this example here, the student’s favorite language is PHP.
Let’s go ahead and look at our to do list for this. The first thing we need to do is add a managed bean for the class StudentThree, and this managed bean is going to have three fields: our firstName, lastName, and favoriteLanguage, which is new. Then we’ll update the form to make use of the selectOneRadio button, and then we’ll update the confirmation page to display the favorite language for the student. All right, we have a lot of good things in store. Let’s go ahead and start coding.
Let’s go ahead and move into Eclipse. Again, we’re going to continue to use our existing project, “Hello,” the “Hello World” project from our previous video, and what I’d like to do as the first thing out is move into my Java resource directory for the source code, and I’m going to look at this file called StudentThree.java. Now since we’ve already been working through this a lot so far in the video series, I’m not going to create the code from scratch, we’ll just kind of walk through it. We’ve seen a lot of this stuff before. I have this class, StudentThree.
It’s a managed bean, and this is what we’re going to use in our JSF pages. I’ll define the three fields here, firstName, lastName, and favoriteLanguage, and favoriteLanguage is actually the new item that we’re adding to hold the actual favorite language of the student from the radio buttons. Then we’ll set up our no argument constructor, so remember the constructor has the same name as the class. Then we just have the getter setter methods here, so I have the get and set for firstName, the get/set for lastName, and then finally for this new part of the example, get set for favoriteLanguage.
That’s pretty much it for our bean, so we have our managed bean, our constructor, and we have our getter setter methods for our fields. This looks really good. All right, so now let’s go ahead and take a look at our form, so I’m moving to my WebContent directory and I’ll look at student_three_form.xhtml. This form is very similar to our previous examples, so I’ll scroll down past the firstName, lastName item. I’ll focus in on line 23 here where we will actually have our favorite programming languages. We’re going to make use of the selectOneRadio and for the value, we’ll bind it to our managed bean from the previous example here, so studentThree.favoriteLanguage. When we submit the data, it will call studentThree.setFavoriteLanaguage. Then we just go through and add in all the different options here for the radios. We have Java, C#, PHP, Ruby, so on and so forth. Now we’ll move on down to our submit button, so that’s for submit, and the action is student_three_response. Again, remember it’s going to actually look for a page called student_three_response.xhtml.
JSF will automatically add the extension .xhtml on there for you.
Now let’s take a look at our response page. Here I’ll just kind of move down a bit, and line 16 and 17, the student’s favorite program language, and I make use of the managed mean. I’ll say studentThree.favoriteLanguage. Remember, JSF will call the getter method here, so JSF will call studentThree.getFavoriteLangauge and it will display the results here on the screen.
Now here I just ran the application. Here’s our form up top so we’ll start with the first name and the last name. Then we’ll chose the favorite programming language, so here you can choose different items. Here we’ll choose PHP, and then the user will hit submit. Then we get the results here on the page. The student’s favorite programming language is PHP. This works out as desired. Good job!
Okay, so let’s go ahead and summarize this video. We start off with a radio button demo, then we also looked at the selectOneRadio, and then we wrapped it all up with a full JSF page example. Well, this wraps up the video. In this video I showed you how to use JSF forms and radio buttons.