WEBVTT 1 00:00:02.151 --> 00:00:04.043 Hey, welcome back. 2 00:00:04.043 --> 00:00:05.750 In this video, we're gonna learn 3 00:00:05.750 --> 00:00:08.750 how to use JSF forms and checkboxes. 4 00:00:13.580 --> 00:00:16.779 We'll first start off with a checkbox demo, 5 00:00:16.779 --> 00:00:18.620 then we'll look at the JSF terminology 6 00:00:18.620 --> 00:00:20.537 for selectManyCheckbox, 7 00:00:21.521 --> 00:00:25.688 and then we'll wrap it all up with a full JSF page example. 8 00:00:28.317 --> 00:00:30.602 Let's start with our checkbox demo, 9 00:00:30.602 --> 00:00:32.150 and this is based on the previous example 10 00:00:32.150 --> 00:00:34.023 that we've been working on so far. 11 00:00:34.023 --> 00:00:35.675 So, we have our student's first name 12 00:00:35.675 --> 00:00:37.660 and last name that we'll enter, 13 00:00:37.660 --> 00:00:39.122 and then the new section here 14 00:00:39.122 --> 00:00:41.561 is for favorite programming languages. 15 00:00:41.561 --> 00:00:43.075 So, in the previous example, 16 00:00:43.075 --> 00:00:45.793 they could only choose language, now with checkboxes, 17 00:00:45.793 --> 00:00:47.970 they can choose multiple languages. 18 00:00:47.970 --> 00:00:51.660 So, in this case, the user chose Java and C#, 19 00:00:51.660 --> 00:00:54.716 then they'll hit submit, and then in our confirmation page, 20 00:00:54.716 --> 00:00:56.700 now it will display a list 21 00:00:56.700 --> 00:00:59.862 of all the languages that they've selected. 22 00:00:59.862 --> 00:01:02.899 So, here they can actually choose more than one language, 23 00:01:02.899 --> 00:01:04.975 so this is really good. 24 00:01:04.975 --> 00:01:06.360 And I'll show you how to write 25 00:01:06.360 --> 00:01:08.943 all the code to implement this. 26 00:01:12.492 --> 00:01:15.554 In the JSF world, a checkbox is represented 27 00:01:15.554 --> 00:01:18.354 by the tag selectManyCheckbox. 28 00:01:18.354 --> 00:01:21.344 Now, I actually like this name because it makes sense, 29 00:01:21.344 --> 00:01:23.393 and if you recall from some of the previous videos, 30 00:01:23.393 --> 00:01:25.462 I had problems with some of the tag names, 31 00:01:25.462 --> 00:01:28.687 but this one is very straightforward, selectManyCheckbox. 32 00:01:28.687 --> 00:01:30.141 So, you can select many options 33 00:01:30.141 --> 00:01:32.217 from that given checkbox group, 34 00:01:32.217 --> 00:01:35.312 so this is very straightforward, and very intuitive. 35 00:01:35.312 --> 00:01:37.645 So, I'm happy now, good job. 36 00:01:39.489 --> 00:01:41.816 So, let's go ahead and move forward and see how we can 37 00:01:41.816 --> 00:01:45.899 actually use this selectManyCheckbox in our code. 38 00:01:47.064 --> 00:01:49.061 So, in this example here, I'm gonna allow the user 39 00:01:49.061 --> 00:01:50.784 to choose their favorite programming language, 40 00:01:50.784 --> 00:01:54.326 so we just give 'em a little label there at the beginning, 41 00:01:54.326 --> 00:01:55.459 and then in this next slide, 42 00:01:55.459 --> 00:01:59.209 we'll make use of that tag selecManyCheckbox. 43 00:02:02.320 --> 00:02:03.903 And then we specify the value, 44 00:02:03.903 --> 00:02:06.832 meaning which managed bean are we are we binding those to, 45 00:02:06.832 --> 00:02:09.536 so here we're gonna bind it to this managed bean 46 00:02:09.536 --> 00:02:12.647 called studentfour.favoriteLanguages. 47 00:02:12.647 --> 00:02:14.772 So, we're gonna call this property favorite languages, 48 00:02:14.772 --> 00:02:16.445 will really will be an array of strings, 49 00:02:16.445 --> 00:02:19.163 but I'll talk about that in a second. 50 00:02:19.163 --> 00:02:20.745 And now, we'll just go through and we'll just drop in 51 00:02:20.745 --> 00:02:22.265 all the select items that the user 52 00:02:22.265 --> 00:02:24.122 can select for the checkboxes, 53 00:02:24.122 --> 00:02:26.955 so Java, C#, PHP, Ruby, and so on. 54 00:02:28.088 --> 00:02:30.210 So, as you can see, this follows very similar 55 00:02:30.210 --> 00:02:32.859 to some of the previous elements that we've used before 56 00:02:32.859 --> 00:02:36.348 for radio buttons, and our select menus. 57 00:02:36.348 --> 00:02:37.394 In this case, 58 00:02:37.394 --> 00:02:42.033 we're making you select selectManyCheckbox tag. 59 00:02:42.033 --> 00:02:44.104 All right, so let's pull it all together. 60 00:02:44.104 --> 00:02:46.768 So, up in the top left, we're gonna have this form, 61 00:02:46.768 --> 00:02:49.449 StudentFour form.xhtml, 62 00:02:49.449 --> 00:02:51.445 the user can enter their standard stuff, 63 00:02:51.445 --> 00:02:55.106 first name and last name, but now the entry on the new area 64 00:02:55.106 --> 00:02:57.405 that we will have is for favorite programming languages. 65 00:02:57.405 --> 00:02:59.422 So, they'll be able to go through and choose their language, 66 00:02:59.422 --> 00:03:01.705 Java, C#, PHP, Ruby, or whatever. 67 00:03:01.705 --> 00:03:04.959 They'll hit submit, that data will go across, 68 00:03:04.959 --> 00:03:07.085 we'll have a managed bean here in the middle 69 00:03:07.085 --> 00:03:08.578 that's gonna hold the form data, 70 00:03:08.578 --> 00:03:11.802 so our managed bean is gonna be called StudentFour, 71 00:03:11.802 --> 00:03:14.300 and then we'll have this response page in the bottom right, 72 00:03:14.300 --> 00:03:16.916 Student_four_response.html. 73 00:03:16.916 --> 00:03:19.182 Again, we'll display the student's name, 74 00:03:19.182 --> 00:03:22.455 but then we'll also display a list of all of the favorite 75 00:03:22.455 --> 00:03:25.010 programming languages that the user selected. 76 00:03:25.010 --> 00:03:26.775 So, it can be just more than one value here, 77 00:03:26.775 --> 00:03:29.881 so Java, C#, and others if they've chosen that. 78 00:03:29.881 --> 00:03:31.956 So, we'll make use of a list element to kinda display 79 00:03:31.956 --> 00:03:35.706 all of the information that the user entered. 80 00:03:37.445 --> 00:03:39.373 I also like to start with a to do list, 81 00:03:39.373 --> 00:03:40.671 so the first thing we're gonna do 82 00:03:40.671 --> 00:03:43.447 is add a new managed bean for StudentFour. 83 00:03:43.447 --> 00:03:44.578 We're gonna have a first name, 84 00:03:44.578 --> 00:03:46.857 last name, and favorite languages, 85 00:03:46.857 --> 00:03:50.156 so this is gonna be an array of strings for us. 86 00:03:50.156 --> 00:03:51.478 We're gonna update the form 87 00:03:51.478 --> 00:03:55.195 to make use of the selectManyCheckbox, 88 00:03:55.195 --> 00:03:58.341 and then we're gonna update our confirmation page 89 00:03:58.341 --> 00:04:02.551 to display the favorite languages for our student. 90 00:04:02.551 --> 00:04:04.458 Okay, so this looks like fun, 91 00:04:04.458 --> 00:04:07.041 let's go ahead and get started. 92 00:04:08.383 --> 00:04:11.894 All right, so let's go ahead and move into Eclipse. 93 00:04:11.894 --> 00:04:14.734 What we're gonna do is continue to use our existing project, 94 00:04:14.734 --> 00:04:18.901 the hello project, that's from the previous videos. 95 00:04:20.015 --> 00:04:21.750 And, what I'd like to do is go ahead 96 00:04:21.750 --> 00:04:23.894 and move into the Java source directory, 97 00:04:23.894 --> 00:04:26.982 and I wanna look at this file StudentFour.java. 98 00:04:26.982 --> 00:04:28.934 Now, we're not gonna create the file from scratch, 99 00:04:28.934 --> 00:04:30.227 but you can go ahead and create 100 00:04:30.227 --> 00:04:32.301 a new class called StudentFour, 101 00:04:32.301 --> 00:04:36.329 and then you can make the edits that I'll make here. 102 00:04:36.329 --> 00:04:38.922 So, lines five and six, we have our StudentFour, 103 00:04:38.922 --> 00:04:40.233 it's a managed bean, 104 00:04:40.233 --> 00:04:43.867 and you've seen all of this stuff before for building beans. 105 00:04:43.867 --> 00:04:45.737 Now, what I need to do is define our field, 106 00:04:45.737 --> 00:04:47.594 so I'm gonna define our field for first name, 107 00:04:47.594 --> 00:04:49.739 and a field for last name. 108 00:04:49.739 --> 00:04:52.989 And, we've done this many times before. 109 00:04:54.739 --> 00:04:56.343 So, one thing that's new in this example 110 00:04:56.343 --> 00:04:59.559 is that since the user can select multiple languages, 111 00:04:59.559 --> 00:05:02.639 then we need to make use of an array of strings. 112 00:05:02.639 --> 00:05:05.335 So, we can't use just a single string element by itself, 113 00:05:05.335 --> 00:05:07.409 we need to use an array of strings. 114 00:05:07.409 --> 00:05:09.352 And remember, we set up an array 115 00:05:09.352 --> 00:05:11.044 in Java using the square brackets. 116 00:05:11.044 --> 00:05:15.273 So, here I have private String[] FavoriteLanguages. 117 00:05:15.273 --> 00:05:17.684 So, this will allow the JSF system, 118 00:05:17.684 --> 00:05:20.474 when the user selects multiple languages 119 00:05:20.474 --> 00:05:24.641 on the form, to store them accordingly in our bean. 120 00:05:26.431 --> 00:05:29.281 So, lemme just give us some white space here at the bottom. 121 00:05:29.281 --> 00:05:30.587 Next thing we need to do is create 122 00:05:30.587 --> 00:05:32.534 our public no arc constructor, 123 00:05:32.534 --> 00:05:34.975 so our constructor's the same name as the class, 124 00:05:34.975 --> 00:05:38.312 that's nothing for right now which is good. 125 00:05:38.312 --> 00:05:40.601 And now, I need to add all the getter and setter methods, 126 00:05:40.601 --> 00:05:42.020 so again I'm gonna use 127 00:05:42.020 --> 00:05:45.060 the Eclipse technique of inserting the code for me. 128 00:05:45.060 --> 00:05:47.973 So, I just do a right click, I choose source, 129 00:05:47.973 --> 00:05:51.289 and I go to generate getters and setters. 130 00:05:51.289 --> 00:05:53.321 This is gonna bring up a dialogue, 131 00:05:53.321 --> 00:05:54.838 and basically here you just go along 132 00:05:54.838 --> 00:05:58.719 and check off each one of those fields, favorite languages, 133 00:05:58.719 --> 00:06:02.622 first name, and last name, once those are all selected, 134 00:06:02.622 --> 00:06:07.175 then you can go ahead and click the OK button. 135 00:06:07.175 --> 00:06:09.210 Okay great, so Eclipse just generated 136 00:06:09.210 --> 00:06:10.867 a lot of code for us here, 137 00:06:10.867 --> 00:06:14.358 here are the getters and setters for first name, 138 00:06:14.358 --> 00:06:19.035 the getters and setters for late name, and finally, 139 00:06:19.035 --> 00:06:21.126 for this new piece that we're working with, 140 00:06:21.126 --> 00:06:23.158 getters and setters for favorite languages, 141 00:06:23.158 --> 00:06:25.894 and note here how they're using the array of strings, 142 00:06:25.894 --> 00:06:30.663 so string with a square bracket, that means an array. 143 00:06:30.663 --> 00:06:34.080 So, this all looks really good, good job. 144 00:06:38.114 --> 00:06:39.554 Okay, so now the next thing 145 00:06:39.554 --> 00:06:42.804 we need to do is move over to our form. 146 00:06:43.965 --> 00:06:48.132 So, I'll look at this file, student_four_form.html, 147 00:06:48.983 --> 00:06:51.015 I'll go ahead and scroll down to the new section here 148 00:06:51.015 --> 00:06:54.020 for favorite programming languages, 149 00:06:54.020 --> 00:06:57.270 so that's just a label that we'll have, 150 00:06:58.468 --> 00:07:02.635 and then we make use of that selectManyCheckbox tag. 151 00:07:07.252 --> 00:07:08.978 So, for the selectManyCheckbox, 152 00:07:08.978 --> 00:07:11.337 we set up a actual managed bean property 153 00:07:11.337 --> 00:07:13.336 that we're gonna bind it to, so here, 154 00:07:13.336 --> 00:07:15.476 studentFour.favoriteLanguages, 155 00:07:15.476 --> 00:07:17.816 and recall when we submit the data, 156 00:07:17.816 --> 00:07:21.733 JSF will call studentFour.setFavoriteLanguages. 157 00:07:22.743 --> 00:07:24.652 Then, we simply go through and we just drop in 158 00:07:24.652 --> 00:07:28.819 all the options here, Java, C#, PHP, and Ruby, and so on. 159 00:07:31.168 --> 00:07:35.559 So, that gives us the whole checkbox layout for our form. 160 00:07:35.559 --> 00:07:36.856 Then, moving on down, 161 00:07:36.856 --> 00:07:40.317 this is our command button or our submit button, 162 00:07:40.317 --> 00:07:43.888 and then the action for this is student_four_response, 163 00:07:43.888 --> 00:07:47.253 again, as we've learned, whenever we do a submit, 164 00:07:47.253 --> 00:07:49.113 JSF is actually gonna look for a file 165 00:07:49.113 --> 00:07:52.030 called student_four_response.xhtml. 166 00:07:53.251 --> 00:07:55.137 JSF will actually add that extension 167 00:07:55.137 --> 00:07:57.948 on there for you, .html. 168 00:07:57.948 --> 00:08:01.615 So, that's our form, this looks really good. 169 00:08:05.653 --> 00:08:08.420 Finally, what we wanna do is handle our confirmation page, 170 00:08:08.420 --> 00:08:09.987 our response page. 171 00:08:09.987 --> 00:08:13.516 So, this is student_four_response.xhtml, 172 00:08:13.516 --> 00:08:16.266 I'll go ahead and open this file. 173 00:08:18.161 --> 00:08:22.834 So, this is basically just a confirmation for the user, 174 00:08:22.834 --> 00:08:25.501 and one thing that's new here is that when we display 175 00:08:25.501 --> 00:08:27.751 the student's favorite programming languages, 176 00:08:27.751 --> 00:08:30.522 we actually have to loop over each one of the elements 177 00:08:30.522 --> 00:08:33.724 in the array, and display the information. 178 00:08:33.724 --> 00:08:36.441 So, I'm gonna make use of an unordered list ul 179 00:08:36.441 --> 00:08:40.358 that gives you a bullet list in the HTML world. 180 00:08:41.630 --> 00:08:45.797 And I'll make use of this new element here called ui:repeat. 181 00:08:49.863 --> 00:08:52.956 So, this ui repeat will take a value, 182 00:08:52.956 --> 00:08:55.784 which is an actual collection or an array, 183 00:08:55.784 --> 00:08:59.951 and it'll actually do a loop over that collection for you. 184 00:09:01.326 --> 00:09:03.575 So, just think of this like a shortcut 185 00:09:03.575 --> 00:09:05.051 for doing a four loop, 186 00:09:05.051 --> 00:09:08.472 so it's gonna loop over studentFour.favoriteLanguages. 187 00:09:08.472 --> 00:09:11.244 Remember, favorite languages is an array, 188 00:09:11.244 --> 00:09:13.419 so they'll call get favorite languages, 189 00:09:13.419 --> 00:09:14.859 and then based on the array, 190 00:09:14.859 --> 00:09:17.990 they're gonna loop over it as they go through it. 191 00:09:17.990 --> 00:09:20.780 Now, each time they loop over the array, 192 00:09:20.780 --> 00:09:23.013 they'll set up a little temporary variable. 193 00:09:23.013 --> 00:09:24.665 So, we're gonna set our temporary 194 00:09:24.665 --> 00:09:27.190 variable name to be tempLanguage. 195 00:09:27.190 --> 00:09:29.419 Now, once we have that temporary variable, 196 00:09:29.419 --> 00:09:33.195 then we can actually use it inside of our loop. 197 00:09:33.195 --> 00:09:35.872 So, here, I can say tempLanguage, 198 00:09:35.872 --> 00:09:39.387 and I can display that out using a list item, 199 00:09:39.387 --> 00:09:41.191 so that'll give me an actual bullet item 200 00:09:41.191 --> 00:09:44.302 for that given favorite language. 201 00:09:44.302 --> 00:09:46.334 So, this is something new, ui repeat, 202 00:09:46.334 --> 00:09:48.995 it'll basically loop over the array or collection, 203 00:09:48.995 --> 00:09:51.175 and you can use it to display information 204 00:09:51.175 --> 00:09:53.508 in a collection or an array. 205 00:10:00.973 --> 00:10:04.241 So now, let's go ahead and run the application, 206 00:10:04.241 --> 00:10:08.129 so up top, so we have a standard first name and last name, 207 00:10:08.129 --> 00:10:11.783 and then we can go through and choose a favorite language. 208 00:10:11.783 --> 00:10:13.111 And again, we can choose multiple items here 209 00:10:13.111 --> 00:10:14.714 for our favorite language. 210 00:10:14.714 --> 00:10:18.513 So, for this example, we'll choose Java and C#, 211 00:10:18.513 --> 00:10:23.466 and then we'll go ahead and hit the submit button. 212 00:10:23.466 --> 00:10:25.944 And so, we come back with the confirmation page, 213 00:10:25.944 --> 00:10:27.821 and then the student's favorite program language. 214 00:10:27.821 --> 00:10:30.392 So, now this information, that's part of that list that, 215 00:10:30.392 --> 00:10:33.719 that ui repeat, so it's gonna loop over each one 216 00:10:33.719 --> 00:10:35.700 of those languages and then print it out 217 00:10:35.700 --> 00:10:38.485 using a bullet list, or a list item. 218 00:10:38.485 --> 00:10:40.665 And that's how that part works out. 219 00:10:40.665 --> 00:10:42.915 So, this is good, good job. 220 00:10:45.615 --> 00:10:48.495 All right, so let's go ahead and summarize this video. 221 00:10:48.495 --> 00:10:51.106 We started off with the checkbox demo, 222 00:10:51.106 --> 00:10:53.714 we made use of the selectManyCheckbox, 223 00:10:53.714 --> 00:10:57.881 and we pulled it all together with a full JSF page example. 224 00:11:02.993 --> 00:11:04.851 So, let's wrap up the video. 225 00:11:04.851 --> 00:11:06.223 In this video, I showed you 226 00:11:06.223 --> 00:11:09.223 how to use JSF forms and checkboxes.