WEBVTT 1 00:00:01.994 --> 00:00:03.663 Hey, welcome back. 2 00:00:03.663 --> 00:00:05.321 In this video, I'm gonna show you 3 00:00:05.321 --> 00:00:08.654 how to use JSF forms and dropdown lists. 4 00:00:12.073 --> 00:00:14.083 We'll cover the following topics. 5 00:00:14.083 --> 00:00:16.882 First, we'll define what are dropdown lists? 6 00:00:16.882 --> 00:00:20.680 Then, we'll do a review of the HTML <select> tag. 7 00:00:20.680 --> 00:00:24.097 Next, we'll discuss some JSF terminology. 8 00:00:24.983 --> 00:00:26.504 Then, we'll pull it altogether 9 00:00:26.504 --> 00:00:29.280 with the full JSF page example. 10 00:00:29.280 --> 00:00:32.080 Alright, so we have a lot of good things in store. 11 00:00:32.080 --> 00:00:34.663 Let's go ahead and get started. 12 00:00:39.289 --> 00:00:41.947 So, what exactly are dropdown lists? 13 00:00:41.947 --> 00:00:43.566 And we've all used them before, right? 14 00:00:43.566 --> 00:00:45.933 You have a form, they have a list of options. 15 00:00:45.933 --> 00:00:47.478 You scroll through the list of options 16 00:00:47.478 --> 00:00:49.897 and you select the one that matches for you. 17 00:00:49.897 --> 00:00:51.716 And then that information is set there, 18 00:00:51.716 --> 00:00:53.553 and you can continue to fill out the information 19 00:00:53.553 --> 00:00:55.383 and go ahead and submit the form. 20 00:00:55.383 --> 00:00:57.005 So, that's the idea of a dropdown list, 21 00:00:57.005 --> 00:00:59.338 so you've seen these before. 22 00:01:04.258 --> 00:01:06.316 So, dropdown lists have been around for awhile, 23 00:01:06.316 --> 00:01:10.024 so let's do a quick review of how we can do this with HTML. 24 00:01:10.024 --> 00:01:13.420 So, we'll have an HTML tag called select, 25 00:01:13.420 --> 00:01:14.995 we give the name of the tag, 26 00:01:14.995 --> 00:01:17.304 and then you simply embed a list of options. 27 00:01:17.304 --> 00:01:18.762 So, in this case we have Brazil, 28 00:01:18.762 --> 00:01:21.012 France, Germany, and India. 29 00:01:23.380 --> 00:01:25.599 So, this snippet of HTML would give us a list 30 00:01:25.599 --> 00:01:27.634 similar to what we have here on the right side, 31 00:01:27.634 --> 00:01:31.467 just a list of options that a user can select. 32 00:01:36.807 --> 00:01:40.218 So now, we'll look at how we can use these items in JSF. 33 00:01:40.218 --> 00:01:42.257 In the JSF world, a dropdown list 34 00:01:42.257 --> 00:01:45.532 is represented by the tag of selectOneMenu. 35 00:01:45.532 --> 00:01:46.707 Eeh, okay. 36 00:01:46.707 --> 00:01:48.255 So, the name is not really straightforward, 37 00:01:48.255 --> 00:01:49.688 but it's a dropdown list, 38 00:01:49.688 --> 00:01:52.287 and the whole idea here is it allows you to select 39 00:01:52.287 --> 00:01:54.264 one item from a menu, 40 00:01:54.264 --> 00:01:56.391 and that's how they came up with the name of selectOneMenu. 41 00:01:56.391 --> 00:01:58.532 So, I'm not a huge fan of the name, 42 00:01:58.532 --> 00:02:00.064 but that's the actual tag 43 00:02:00.064 --> 00:02:04.067 that we'll use for dropdown list, selectOneMenu. 44 00:02:04.067 --> 00:02:04.948 And we'll go ahead and take a look 45 00:02:04.948 --> 00:02:07.948 at some examples of how to use this. 46 00:02:11.391 --> 00:02:13.092 So this dropdown list, again, 47 00:02:13.092 --> 00:02:15.538 we'll have a form, we'll have a list of countries. 48 00:02:15.538 --> 00:02:17.082 A user can choose one of the countries 49 00:02:17.082 --> 00:02:18.259 there from the list. 50 00:02:18.259 --> 00:02:20.479 So, how will we do this with JSF? 51 00:02:20.479 --> 00:02:23.408 Where is the code and how could we put this together? 52 00:02:23.408 --> 00:02:24.885 So, here on the center of the slide, 53 00:02:24.885 --> 00:02:27.496 we have this idea of a selectOneMenu, 54 00:02:27.496 --> 00:02:32.263 and then we give the value #{studentTwo.country}. 55 00:02:32.263 --> 00:02:36.338 So, we're gonna map that to a managed bean field. 56 00:02:36.338 --> 00:02:37.195 Then, we just go through 57 00:02:37.195 --> 00:02:39.306 and we just drop in a list of items, 58 00:02:39.306 --> 00:02:42.139 so Brazil, France, Germany, India. 59 00:02:44.391 --> 00:02:45.953 So notice here when we go to selectItem 60 00:02:45.953 --> 00:02:48.502 we provide an item value and label. 61 00:02:48.502 --> 00:02:49.780 So, the label is the information 62 00:02:49.780 --> 00:02:52.483 that will show up on the screen that the user will see, 63 00:02:52.483 --> 00:02:54.206 and then the value is an actual code 64 00:02:54.206 --> 00:02:56.591 that you can have for that entry. 65 00:02:56.591 --> 00:03:00.130 In this example, the value and the label are the same, 66 00:03:00.130 --> 00:03:01.369 but you can imagine an example 67 00:03:01.369 --> 00:03:05.203 where the value could be the three letter country code 68 00:03:05.203 --> 00:03:09.370 and the label could be the normal, full name of the country. 69 00:03:13.874 --> 00:03:15.711 Alright, so now we saw the little code snippet. 70 00:03:15.711 --> 00:03:18.394 Let's go ahead and pull this together with an example. 71 00:03:18.394 --> 00:03:20.505 So, in the top left I'll have this form, 72 00:03:20.505 --> 00:03:22.766 student_two_form.xhtml. 73 00:03:22.766 --> 00:03:25.206 We're gonna have a new entry here for country. 74 00:03:25.206 --> 00:03:27.414 That's gonna be our dropdown list. 75 00:03:27.414 --> 00:03:29.268 We'll also have a managed bean. 76 00:03:29.268 --> 00:03:31.479 We'll call this managed bean StudentTwo 77 00:03:31.479 --> 00:03:32.930 just so it's a different class name 78 00:03:32.930 --> 00:03:34.677 than our previous examples. 79 00:03:34.677 --> 00:03:36.354 It's gonna have the actual country. 80 00:03:36.354 --> 00:03:37.938 And then at the bottom we'll have 81 00:03:37.938 --> 00:03:40.355 a student_two_response.xhtml. 82 00:03:41.247 --> 00:03:43.159 So, we'll simply update this confirmation page 83 00:03:43.159 --> 00:03:47.925 to also list the country that the user selected. 84 00:03:47.925 --> 00:03:49.867 Now, whenever I have a new programming task, 85 00:03:49.867 --> 00:03:51.616 I always like to build a to do list. 86 00:03:51.616 --> 00:03:52.599 So, the first thing we're gonna do 87 00:03:52.599 --> 00:03:56.205 is we're gonna add a new managed bean called StudentTwo, 88 00:03:56.205 --> 00:03:58.353 and it's gonna have the firstName, lastName, 89 00:03:58.353 --> 00:04:01.161 and a new field called country. 90 00:04:01.161 --> 00:04:02.369 Then, we'll update the form 91 00:04:02.369 --> 00:04:06.479 to make use of our JSF tag, the selectOneMenu, 92 00:04:06.479 --> 00:04:08.856 that's for our dropdown list. 93 00:04:08.856 --> 00:04:11.448 Then, we'll also update the confirmation page 94 00:04:11.448 --> 00:04:13.439 to display the selected country. 95 00:04:13.439 --> 00:04:17.298 So it could say the student's country is X. 96 00:04:17.298 --> 00:04:19.720 Alright, so there are a lot of good things in store. 97 00:04:19.720 --> 00:04:22.303 Let's go ahead and get started. 98 00:04:23.839 --> 00:04:26.478 Alright, so let's go ahead and move into Eclipse. 99 00:04:26.478 --> 00:04:28.505 Once I'm in Eclipse I'm gonna use that existing project 100 00:04:28.505 --> 00:04:31.069 that we've been working on so far, hello. 101 00:04:31.069 --> 00:04:34.553 So, that was created in one of our previous videos. 102 00:04:34.553 --> 00:04:37.426 The first thing I need to do is create the managed bean. 103 00:04:37.426 --> 00:04:40.772 So, I'm gonna move down into my Java source directory. 104 00:04:40.772 --> 00:04:41.657 I'll right click. 105 00:04:41.657 --> 00:04:43.324 I'll say New, Class, 106 00:04:46.082 --> 00:04:48.300 and the name of the class is StudentTwo, 107 00:04:48.300 --> 00:04:49.990 and again, we're using a different name 108 00:04:49.990 --> 00:04:52.087 just to make it unique from the previous example 109 00:04:52.087 --> 00:04:53.587 that we worked on. 110 00:04:55.358 --> 00:04:57.609 And I'll keep all the other defaults here 111 00:04:57.609 --> 00:05:00.192 and I'll hit the Finish button. 112 00:05:03.087 --> 00:05:05.696 Okay, so this is our basic student class. 113 00:05:05.696 --> 00:05:09.196 Our StudentTwo is gonna be a managed bean, 114 00:05:10.177 --> 00:05:12.239 and I'll import the appropriate items. 115 00:05:12.239 --> 00:05:15.248 And again, remember that we need to import 116 00:05:15.248 --> 00:05:17.665 javax.faces.bean.ManagedBean. 117 00:05:19.108 --> 00:05:23.346 Select that item, and Eclipse will help you out there. 118 00:05:23.346 --> 00:05:26.179 Great, so now we need to simply define our fields 119 00:05:26.179 --> 00:05:29.719 for first name, last name, and the country 120 00:05:29.719 --> 00:05:33.719 Let me just expand the window here for a second. 121 00:05:36.254 --> 00:05:40.410 Okay great, so we have firstName, lastName, and country. 122 00:05:40.410 --> 00:05:42.809 So, country is a new item that we're adding here 123 00:05:42.809 --> 00:05:44.226 for this example. 124 00:05:46.255 --> 00:05:49.755 Alright, so this looks pretty good so far. 125 00:05:51.773 --> 00:05:53.234 Now, the next thing we need to do, of course, 126 00:05:53.234 --> 00:05:54.971 is create a no argument constructor 127 00:05:54.971 --> 00:05:55.804 So I'll just create 128 00:05:55.804 --> 00:05:59.258 this new constructor here for StudentTwo. 129 00:05:59.258 --> 00:06:02.030 Does nothing, very good. 130 00:06:02.030 --> 00:06:04.652 Let me just give us some free space here. 131 00:06:04.652 --> 00:06:05.914 Now, we need to generate 132 00:06:05.914 --> 00:06:08.638 the getters and setters for our fields, 133 00:06:08.638 --> 00:06:12.721 so this will expose properties to the JSF system. 134 00:06:14.163 --> 00:06:17.388 So again, I'll make use of that really cool Eclipse trick 135 00:06:17.388 --> 00:06:20.717 of doing a right click, going to Source, 136 00:06:20.717 --> 00:06:23.866 and then moving down to Generate Getters and Setters. 137 00:06:23.866 --> 00:06:25.676 So remember, Eclipse will actually generate 138 00:06:25.676 --> 00:06:29.426 the getters and setters for us automatically. 139 00:06:30.656 --> 00:06:31.899 So, it'll give me a box here. 140 00:06:31.899 --> 00:06:34.126 I'll go ahead and select the fields that I want. 141 00:06:34.126 --> 00:06:38.209 So, I'll choose country, firstName, and lastName. 142 00:06:49.684 --> 00:06:51.129 Then I'm gonna hit OK 143 00:06:51.129 --> 00:06:52.650 and now we have this new code 144 00:06:52.650 --> 00:06:53.873 that was just created for us. 145 00:06:53.873 --> 00:06:56.040 So this looks really good. 146 00:07:02.298 --> 00:07:03.563 So we have fields for, I'm sorry, 147 00:07:03.563 --> 00:07:06.396 we have methods for our firstName, 148 00:07:07.786 --> 00:07:10.414 and we have methods for our lastName, 149 00:07:10.414 --> 00:07:13.998 and finally we have methods for country. 150 00:07:13.998 --> 00:07:15.915 Alright, this is great. 151 00:07:20.360 --> 00:07:21.856 Alright, so now that our bean is taken care of, 152 00:07:21.856 --> 00:07:24.188 let's go ahead and move over to our form. 153 00:07:24.188 --> 00:07:29.168 So, I'm moving to the WebContent directory, so WebContent. 154 00:07:29.168 --> 00:07:32.085 I'll choose student_two_form.xhtml, 155 00:07:34.409 --> 00:07:36.369 just expand the window here, 156 00:07:36.369 --> 00:07:41.297 and we'll keep all the standard stuff that we had before. 157 00:07:41.297 --> 00:07:42.381 The one thing I'm gonna add here 158 00:07:42.381 --> 00:07:45.455 is a new entry here for country, 159 00:07:45.455 --> 00:07:48.275 and I'll set up my selectOneMenu. 160 00:07:48.275 --> 00:07:49.722 So, this is our dropdown list, 161 00:07:49.722 --> 00:07:51.153 and we're gonna list all the countries 162 00:07:51.153 --> 00:07:53.236 that the user can select. 163 00:07:55.112 --> 00:07:58.795 So, here on Line 24 I have the selectOneMenu. 164 00:07:58.795 --> 00:08:01.376 I bind it to studentTwo.country. 165 00:08:01.376 --> 00:08:02.971 So remember in the studentTwo class 166 00:08:02.971 --> 00:08:04.927 we have a field called country 167 00:08:04.927 --> 00:08:07.346 with public getters and setter methods, 168 00:08:07.346 --> 00:08:11.483 so that'll read and write to that managed bean. 169 00:08:11.483 --> 00:08:12.316 And then we just go through 170 00:08:12.316 --> 00:08:14.272 and list out all the different options, 171 00:08:14.272 --> 00:08:15.671 the itemValue and the label. 172 00:08:15.671 --> 00:08:17.812 Again, label is what's displayed to the user, 173 00:08:17.812 --> 00:08:21.324 and the value is a code we can use in the background. 174 00:08:21.324 --> 00:08:24.824 That's pretty much it, so that's our form. 175 00:08:27.316 --> 00:08:30.821 And then finally we have our Submit button and our action. 176 00:08:30.821 --> 00:08:32.854 We're gonna send it over to a new page, 177 00:08:32.854 --> 00:08:34.604 student_two_response. 178 00:08:35.639 --> 00:08:37.935 And remember, we don't have to give the extension here. 179 00:08:37.935 --> 00:08:40.205 JSF will automatically look for a page 180 00:08:40.205 --> 00:08:43.038 called student_two_response.xhtml. 181 00:08:47.360 --> 00:08:48.193 Alright, so let's go ahead 182 00:08:48.193 --> 00:08:50.478 and move over to our confirmation page. 183 00:08:50.478 --> 00:08:55.050 So, our confirmation page is student_two_response.xhtml. 184 00:08:55.050 --> 00:08:58.050 I'll go ahead and open up this file. 185 00:09:03.760 --> 00:09:07.197 So, we have on Line 12 we have the information before, 186 00:09:07.197 --> 00:09:08.489 the student is confirmed. 187 00:09:08.489 --> 00:09:11.728 The new information is on Line 16, the student's country, 188 00:09:11.728 --> 00:09:16.420 and then here we give the #{studentTwo.country}. 189 00:09:16.420 --> 00:09:18.655 So, that'll actually talk to that managed bean, 190 00:09:18.655 --> 00:09:22.072 it'll call the getter method for country, 191 00:09:23.005 --> 00:09:25.318 so it'll call studentTwo.getCountry, 192 00:09:25.318 --> 00:09:28.772 and the results will be displayed right here on the page. 193 00:09:28.772 --> 00:09:31.272 That's basically it, good job. 194 00:09:35.791 --> 00:09:37.982 Alright, so I just ran the application. 195 00:09:37.982 --> 00:09:38.815 Here's our form. 196 00:09:38.815 --> 00:09:40.386 We have first name, last name, 197 00:09:40.386 --> 00:09:42.902 and we also have our dropdown list. 198 00:09:42.902 --> 00:09:44.004 So, I'll go ahead and for the first name 199 00:09:44.004 --> 00:09:46.067 I'll enter Ajay Rao, 200 00:09:46.067 --> 00:09:48.052 and for the country 201 00:09:48.052 --> 00:09:50.261 go through and choose something, item out of here. 202 00:09:50.261 --> 00:09:54.462 I'll choose India, and if everything looks good to me 203 00:09:54.462 --> 00:09:57.795 I'll go ahead and hit the Submit button. 204 00:09:59.078 --> 00:10:01.715 And then we'll get our confirmation page. 205 00:10:01.715 --> 00:10:04.535 The student's country is India. 206 00:10:04.535 --> 00:10:05.368 So this is great. 207 00:10:05.368 --> 00:10:07.710 So it works exactly as desired. 208 00:10:07.710 --> 00:10:08.543 Good job. 209 00:10:11.676 --> 00:10:13.532 Okay, so in summary what we did 210 00:10:13.532 --> 00:10:16.376 was we actually learned about dropdown lists. 211 00:10:16.376 --> 00:10:19.498 We also reviewed the HTML <select> tag. 212 00:10:19.498 --> 00:10:23.316 We looked at some of the JSF terminology for selectOneMenu. 213 00:10:23.316 --> 00:10:24.911 And then, finally, we wrapped it all up 214 00:10:24.911 --> 00:10:27.442 with the full JSF page example. 215 00:10:27.442 --> 00:10:31.525 So, a lot of good things we've accomplished here. 216 00:10:33.528 --> 00:10:35.505 Alright, so this wraps up the video. 217 00:10:35.505 --> 00:10:36.521 In this video, I showed you 218 00:10:36.521 --> 00:10:39.458 how to use JSF forms and dropdown lists. 219 00:10:39.458 --> 00:10:40.516 Stay tuned, because I'm gonna make 220 00:10:40.516 --> 00:10:42.767 some enhancements to this example. 221 00:10:42.767 --> 00:10:44.779 Instead of hard coding the form data, 222 00:10:44.779 --> 00:10:46.745 I'm gonna show you how to read the form data 223 00:10:46.745 --> 00:10:48.178 from a managed bean. 224 00:10:48.178 --> 00:10:49.875 So, stay tuned for the next video. 225 00:10:49.875 --> 00:10:51.375 I'll see you then.