WEBVTT 1 00:00:02.309 --> 00:00:04.277 Hi, welcome back. 2 00:00:04.277 --> 00:00:07.614 In this video I'm gonna show you how to use JSF forms 3 00:00:07.614 --> 00:00:09.114 and managed beans. 4 00:00:11.538 --> 00:00:13.865 Here's a list of topics that we'll cover. 5 00:00:13.865 --> 00:00:17.101 First off we'll find out what are managed beans. 6 00:00:17.101 --> 00:00:19.456 Then we'll discuss the requirements for creating 7 00:00:19.456 --> 00:00:21.425 a managed bean. 8 00:00:21.425 --> 00:00:25.525 Next we'll discuss how to create a managed bean with code. 9 00:00:25.525 --> 00:00:28.400 Then we'll discuss JSF expression language 10 00:00:28.400 --> 00:00:30.973 for accessing managed beans. 11 00:00:30.973 --> 00:00:33.981 And then we'll learn how to set a managed bean property 12 00:00:33.981 --> 00:00:37.356 from the JSF page, and likewise, 13 00:00:37.356 --> 00:00:40.226 we'll learn how to get or read the managed bean property 14 00:00:40.226 --> 00:00:41.559 from a JSF page. 15 00:00:42.664 --> 00:00:44.577 All right, so we have a lot of good things in store. 16 00:00:44.577 --> 00:00:47.160 Let's go ahead and get started. 17 00:00:49.574 --> 00:00:52.360 The common question that's often asked from new developers 18 00:00:52.360 --> 00:00:55.102 with JSF is well, what exactly is a managed bean? 19 00:00:55.102 --> 00:00:59.269 Well, a managed bean is simply a regular Java class. 20 00:01:00.192 --> 00:01:02.737 It's commonly used to hold the form data, 21 00:01:02.737 --> 00:01:05.653 so when you submit a form it'll hold the form data for you. 22 00:01:05.653 --> 00:01:09.157 You can also use managed beans to hold your business logic 23 00:01:09.157 --> 00:01:11.959 and we'll cover that later in the course. 24 00:01:11.959 --> 00:01:14.657 Now, the main idea here is that the bean is actually 25 00:01:14.657 --> 00:01:18.830 created and managed by JSF hence the name of managed bean. 26 00:01:18.830 --> 00:01:21.709 Your, your code will not have to manually create the bean. 27 00:01:21.709 --> 00:01:25.792 It'll be automatically created by the JSF system. 28 00:01:29.206 --> 00:01:32.951 One thing that's very important is that managed beans 29 00:01:32.951 --> 00:01:37.471 are not to be confused with Enterprise Java beans or EJBs. 30 00:01:37.471 --> 00:01:39.172 EJBs are a totally different technology, 31 00:01:39.172 --> 00:01:40.727 a totally different subject. 32 00:01:40.727 --> 00:01:42.821 So don't mix the two up. 33 00:01:42.821 --> 00:01:46.988 Managed beans are not the same as Enterprise Java beans. 34 00:01:51.649 --> 00:01:54.475 This diagram here is a very good layout of you can use 35 00:01:54.475 --> 00:01:57.601 managed beans in a JSF application. 36 00:01:57.601 --> 00:02:01.615 So notice in the top left we have the student form.xhtml. 37 00:02:01.615 --> 00:02:04.497 This is where the user will actually enter their form data. 38 00:02:04.497 --> 00:02:05.586 They'll hit the submit button. 39 00:02:05.586 --> 00:02:08.900 Behind the scenes what JSF will do is it'll actually set 40 00:02:08.900 --> 00:02:11.227 data on a managed bean, so remember, 41 00:02:11.227 --> 00:02:14.324 the managed bean holds your form data. 42 00:02:14.324 --> 00:02:17.544 Then it goes over to the student confirmtation.xhtml, 43 00:02:17.544 --> 00:02:21.506 another page, and then this page can actually access 44 00:02:21.506 --> 00:02:24.687 that managed bean and read data from that managed bean. 45 00:02:24.687 --> 00:02:26.952 So it'll basically read the form data that was submitted 46 00:02:26.952 --> 00:02:28.950 on the previous page. 47 00:02:28.950 --> 00:02:30.569 So they'll read in the students first name, 48 00:02:30.569 --> 00:02:32.341 along with the students last name, 49 00:02:32.341 --> 00:02:34.538 and give a confirmation page, and I'll show you 50 00:02:34.538 --> 00:02:37.595 how all this works here in a second. 51 00:02:37.595 --> 00:02:41.005 All right, so let me switch over 52 00:02:41.005 --> 00:02:42.906 and show you a live demo of this example. 53 00:02:42.906 --> 00:02:45.271 So again, this is our student form HTML. 54 00:02:45.271 --> 00:02:47.823 I can enter the user's first name and last name, 55 00:02:47.823 --> 00:02:52.375 and then I can move down and hit the submit button. 56 00:02:52.375 --> 00:02:55.161 Once I hit the submit button in the background JSF 57 00:02:55.161 --> 00:02:58.364 will take that form data, use that managed bean, 58 00:02:58.364 --> 00:03:00.485 store that information in the managed bean, 59 00:03:00.485 --> 00:03:03.859 and then it will send us over to our response page 60 00:03:03.859 --> 00:03:07.957 or confirmation page, and this person can access 61 00:03:07.957 --> 00:03:09.720 that managed bean or read in that information 62 00:03:09.720 --> 00:03:10.553 from the managed bean. 63 00:03:10.553 --> 00:03:11.509 So this all works out pretty good, 64 00:03:11.509 --> 00:03:12.939 and I'll actually show you all the low level code 65 00:03:12.939 --> 00:03:14.590 on how to make this happen in this video. 66 00:03:14.590 --> 00:03:18.039 Now you may wonder, what are the requirements 67 00:03:18.039 --> 00:03:20.393 for creating a managed bean? 68 00:03:20.393 --> 00:03:23.336 I mean, how do I create the code? 69 00:03:23.336 --> 00:03:26.126 Well, first off it's just a regular Java class, 70 00:03:26.126 --> 00:03:29.222 and you have to follow these rules. 71 00:03:29.222 --> 00:03:31.194 So your Java class needs to have a public, 72 00:03:31.194 --> 00:03:33.470 no argument constructor. 73 00:03:33.470 --> 00:03:36.961 It also needs to expose properties via public getter 74 00:03:36.961 --> 00:03:38.453 and setter methods. 75 00:03:38.453 --> 00:03:41.667 And finally, your class needs to make use of an annotation 76 00:03:41.667 --> 00:03:43.244 at managed bean. 77 00:03:43.244 --> 00:03:45.381 This is actually a new feature of JSF two. 78 00:03:45.381 --> 00:03:47.896 In previous versions you actually had to configure 79 00:03:47.896 --> 00:03:50.137 all these beans via config file. 80 00:03:50.137 --> 00:03:54.453 But the annotation support is a new feature of JSF two. 81 00:03:54.453 --> 00:03:59.036 Now that we understand the theory behind managed beans 82 00:03:59.036 --> 00:04:00.938 let's go ahead and look at some code, 83 00:04:00.938 --> 00:04:03.026 and see how we can actually create our own managed bean 84 00:04:03.026 --> 00:04:04.109 from scratch. 85 00:04:06.550 --> 00:04:09.577 So what I'll do is I'll move into Eclipse. 86 00:04:09.577 --> 00:04:10.951 I'm gonna make use of that same project we've been 87 00:04:10.951 --> 00:04:13.045 using so far, that hello world project. 88 00:04:13.045 --> 00:04:15.033 So we're not gonna create a new one. 89 00:04:15.033 --> 00:04:16.336 We're simply gonna use the existing one. 90 00:04:16.336 --> 00:04:18.027 So if you don't have the hello world just go back 91 00:04:18.027 --> 00:04:20.369 to the previous videos where I showed you 92 00:04:20.369 --> 00:04:21.874 how to set up the hello world example. 93 00:04:21.874 --> 00:04:25.338 Now in the Java resources directory I'm gonna actually 94 00:04:25.338 --> 00:04:27.758 create a new Java class, so I'll make use 95 00:04:27.758 --> 00:04:31.008 of this package com.luv2code.jsf.hello. 96 00:04:37.296 --> 00:04:39.587 And I'll create this new class called student. 97 00:04:39.587 --> 00:04:42.337 This is gonna be my managed bean, 98 00:04:43.834 --> 00:04:47.401 and I'll hit the finish button in the bottom corner. 99 00:04:47.401 --> 00:04:50.533 So to create a basic set up here for a student class. 100 00:04:50.533 --> 00:04:53.076 Now, since this is the managed bean I need to make use 101 00:04:53.076 --> 00:04:56.525 of that annotation, at managed bean. 102 00:04:56.525 --> 00:04:59.853 So I'll just say at managed bean. 103 00:04:59.853 --> 00:05:01.829 Now we don't have this imported yet, 104 00:05:01.829 --> 00:05:03.699 so we need to do an explicit import for this managed bean. 105 00:05:03.699 --> 00:05:07.946 Now one area to be very careful of is that there is two 106 00:05:07.946 --> 00:05:11.754 managed bean classes, one in the Javax.faces.bean package, 107 00:05:11.754 --> 00:05:14.568 and another one in Java X annotation. 108 00:05:14.568 --> 00:05:18.285 Here you wanna be sure to use Java X faces bean, 109 00:05:18.285 --> 00:05:20.702 that's for JSF managed beans. 110 00:05:22.820 --> 00:05:25.909 All right, so we have this annotation imported properly. 111 00:05:25.909 --> 00:05:30.076 Now what I'd like to do is create two fields for this class. 112 00:05:31.116 --> 00:05:34.866 So I'd like to create a first name field, 113 00:05:34.866 --> 00:05:38.866 and a last name field, and they're both strings. 114 00:05:40.290 --> 00:05:43.116 Now if you remember from the slides, 115 00:05:43.116 --> 00:05:44.788 the first thing we need to do is 116 00:05:44.788 --> 00:05:46.002 create a no argument constructor. 117 00:05:46.002 --> 00:05:47.722 So remember we create a constructor by simply using 118 00:05:47.722 --> 00:05:52.058 the same name as the class, and we have no return type. 119 00:05:52.058 --> 00:05:54.623 So that's our no arg constructor, 120 00:05:54.623 --> 00:05:56.000 and that's in place, and we kind of meet 121 00:05:56.000 --> 00:05:58.250 that one requirement there. 122 00:06:00.482 --> 00:06:02.874 Next what we need to do is create getter and setter 123 00:06:02.874 --> 00:06:05.062 methods to expose properties. 124 00:06:05.062 --> 00:06:08.963 So we need to have public getter and setter methods. 125 00:06:08.963 --> 00:06:12.147 Now what I could do is I could manually write these out 126 00:06:12.147 --> 00:06:14.860 but what I'll do is actually make use of a neat trick 127 00:06:14.860 --> 00:06:18.398 in Eclipse where Eclipse can actually generate source code 128 00:06:18.398 --> 00:06:22.565 for you and Eclipse can generate the getters and setters. 129 00:06:23.536 --> 00:06:26.421 So I'll right click, I'll choose source, 130 00:06:26.421 --> 00:06:29.470 and then I'll move down to this entry generate 131 00:06:29.470 --> 00:06:31.033 getters and setters. 132 00:06:31.033 --> 00:06:33.513 Hmmm, looks very interesting. 133 00:06:33.513 --> 00:06:37.659 So I can use this feature here to automatically 134 00:06:37.659 --> 00:06:39.992 generate source code for me. 135 00:06:41.214 --> 00:06:43.856 So that'll bring up a dialog box that'll give you 136 00:06:43.856 --> 00:06:45.744 a list of all of your fields that you have, 137 00:06:45.744 --> 00:06:47.786 and it'll ask you which ones you wanna create 138 00:06:47.786 --> 00:06:49.112 getters and setters with. 139 00:06:49.112 --> 00:06:51.070 So I'll choose both of them, first name and last name. 140 00:06:51.070 --> 00:06:54.073 You can set some other options here but I'll go ahead 141 00:06:54.073 --> 00:06:57.033 and keep the defaults and I'll hit OK. 142 00:06:57.033 --> 00:07:00.440 And now Eclipse just did a lot of good work for us. 143 00:07:00.440 --> 00:07:02.203 This is very interesting here. 144 00:07:02.203 --> 00:07:04.324 So it created getters and setter methods. 145 00:07:04.324 --> 00:07:08.114 So it created a get first name, set first name, 146 00:07:08.114 --> 00:07:11.082 and that was created automatically by Eclipse, 147 00:07:11.082 --> 00:07:13.021 and it also did a similar thing here for last name, 148 00:07:13.021 --> 00:07:15.704 a get last name and set last name. 149 00:07:15.704 --> 00:07:18.962 So again, a very nice tip here where Eclipse can generate 150 00:07:18.962 --> 00:07:20.896 source code for you. 151 00:07:20.896 --> 00:07:23.305 So, we're in good shape right now. 152 00:07:23.305 --> 00:07:26.225 We have our public no arg constructor. 153 00:07:26.225 --> 00:07:27.881 We have our getter and setter methods 154 00:07:27.881 --> 00:07:30.505 and we have our managed bean. 155 00:07:30.505 --> 00:07:33.683 So everything is all lined up just right for us. 156 00:07:33.683 --> 00:07:35.233 This looks really good. 157 00:07:35.233 --> 00:07:36.566 Good job so far. 158 00:07:42.229 --> 00:07:44.308 The chance to have expression language 159 00:07:44.308 --> 00:07:47.721 is used to access properties of a managed bean. 160 00:07:47.721 --> 00:07:50.010 So you've seen this syntax earlier, 161 00:07:50.010 --> 00:07:51.974 but I didn't really have a chance 162 00:07:51.974 --> 00:07:53.968 to give a full discussion on it, and I'll do that now. 163 00:07:53.968 --> 00:07:56.314 So the basic syntax of it is you have a pound 164 00:07:56.314 --> 00:07:58.842 with a curly brace, and you get the bean name 165 00:07:58.842 --> 00:07:59.925 dot the property name. 166 00:07:59.925 --> 00:08:02.587 This will allow you to access that property, 167 00:08:02.587 --> 00:08:05.569 either to read the data or to set the data. 168 00:08:05.569 --> 00:08:07.663 I'll show you some examples of this coming up 169 00:08:07.663 --> 00:08:09.377 as far as using it with forms 170 00:08:09.377 --> 00:08:11.473 and also with confirmation pages. 171 00:08:11.473 --> 00:08:15.223 So, here's an example of setting a managed bean property 172 00:08:15.223 --> 00:08:16.556 from a JSF page. 173 00:08:18.641 --> 00:08:20.964 So if you have a form set up you can make use 174 00:08:20.964 --> 00:08:23.482 of the input text and you say value equals 175 00:08:23.482 --> 00:08:27.221 and then you have student dot first name. 176 00:08:27.221 --> 00:08:30.276 So what happens is that when you actually submit the form 177 00:08:30.276 --> 00:08:34.443 JSF will call student dot set first name, all right? 178 00:08:35.763 --> 00:08:37.493 So note here the property name. 179 00:08:37.493 --> 00:08:40.510 JSF will automatically call set first name, 180 00:08:40.510 --> 00:08:44.177 or set whatever that given property name is. 181 00:08:47.282 --> 00:08:50.194 We just saw an example of setting a bean property. 182 00:08:50.194 --> 00:08:53.509 Well, how do we, how do you actually read or get 183 00:08:53.509 --> 00:08:55.512 a bean property in a JSF page? 184 00:08:55.512 --> 00:08:58.187 So, to get a property, you simply use, make use 185 00:08:58.187 --> 00:08:59.882 of the JSF expression language. 186 00:08:59.882 --> 00:09:03.020 So here's an output saying student's name is. 187 00:09:03.020 --> 00:09:06.180 I used the pound curly brace and then I say student 188 00:09:06.180 --> 00:09:07.953 dot first name. 189 00:09:07.953 --> 00:09:09.571 So again, I give the bean name 190 00:09:09.571 --> 00:09:12.101 just student dot the property. 191 00:09:12.101 --> 00:09:15.018 In the background JSF will actually 192 00:09:16.105 --> 00:09:18.300 call student dot get first name. 193 00:09:18.300 --> 00:09:21.820 So note here student dot get whatever that property name 194 00:09:21.820 --> 00:09:24.131 and here our property name is first name. 195 00:09:24.131 --> 00:09:25.792 They're actually calling methods on our Java bean 196 00:09:25.792 --> 00:09:28.507 or our managed bean in the background 197 00:09:28.507 --> 00:09:30.840 when they process this page. 198 00:09:35.448 --> 00:09:38.585 So let's go ahead and pull this together with an example. 199 00:09:38.585 --> 00:09:41.353 In this example I'm going to have two JSF pages. 200 00:09:41.353 --> 00:09:45.323 I'll have a student form.xhtml, where they'll enter 201 00:09:45.323 --> 00:09:47.088 the data, and I have a second page called student 202 00:09:47.088 --> 00:09:49.366 confirmation.xhtml, and we'll make use of that 203 00:09:49.366 --> 00:09:53.533 managed bean that we created a little earlier in this video. 204 00:09:58.083 --> 00:10:00.796 All right, so let's switch into Eclipse. 205 00:10:00.796 --> 00:10:05.459 What I'll do is I'll first take a look at two files here, 206 00:10:05.459 --> 00:10:09.570 like I mentioned earlier, student form.xhtml, 207 00:10:09.570 --> 00:10:12.153 and student confirmation.xhtml. 208 00:10:13.774 --> 00:10:16.049 So let's go ahead and start with the form. 209 00:10:16.049 --> 00:10:18.817 So, we've seen a lot of this stuff before. 210 00:10:18.817 --> 00:10:22.274 I'm not gonna cover all the, the high level stuff, 211 00:10:22.274 --> 00:10:24.039 but what I will do is just highlight the form, 212 00:10:24.039 --> 00:10:26.476 and we'll cover the aspects of the form. 213 00:10:26.476 --> 00:10:28.198 So on line 14 what we'll do is we 214 00:10:28.198 --> 00:10:31.555 will give a label for first name. 215 00:10:31.555 --> 00:10:34.938 We'll make use of this JSF UE component input text 216 00:10:34.938 --> 00:10:36.311 and then the value that we'll have 217 00:10:36.311 --> 00:10:38.948 here is student dot first name. 218 00:10:38.948 --> 00:10:41.617 So when we actually submit the form data in the background 219 00:10:41.617 --> 00:10:45.344 JSF will call student dot set first name. 220 00:10:45.344 --> 00:10:49.511 Now, JSF also makes use of this when they show the form 221 00:10:50.641 --> 00:10:52.715 for the first time by calling a getter on it, 222 00:10:52.715 --> 00:10:54.280 but we'll, we'll cover that later. 223 00:10:54.280 --> 00:10:57.961 Now, for last name also a similar thing for this input text. 224 00:10:57.961 --> 00:11:02.584 So on that form field, we'll have student dot last name. 225 00:11:02.584 --> 00:11:05.583 So when they actually do a submit JSF will call 226 00:11:05.583 --> 00:11:09.826 student dot set last name, and then finally 227 00:11:09.826 --> 00:11:11.615 here's our submit button, which is our command button, 228 00:11:11.615 --> 00:11:13.431 again, right? 229 00:11:13.431 --> 00:11:15.245 And then the action, this is where we 230 00:11:15.245 --> 00:11:18.293 tell it the actual code to call. 231 00:11:18.293 --> 00:11:21.768 So here we're actually gonna send it over to a confirmation 232 00:11:21.768 --> 00:11:24.969 page, student response, and as we learned 233 00:11:24.969 --> 00:11:28.863 earlier this will actually call student response.xhtml, 234 00:11:28.863 --> 00:11:32.225 but we don't have to give the explicit extension. 235 00:11:32.225 --> 00:11:35.225 JSF will call that XHTML by default. 236 00:11:37.512 --> 00:11:39.202 Now let's go ahead and look at that 237 00:11:39.202 --> 00:11:41.795 student response.xhtml file. 238 00:11:41.795 --> 00:11:44.651 So this is really just a confirmation page 239 00:11:44.651 --> 00:11:48.818 of saying hey, we, this is the information that we read in. 240 00:11:50.003 --> 00:11:53.170 So when we went down here to the body, 241 00:11:55.291 --> 00:11:57.163 I just have some normal output, some static text. 242 00:11:57.163 --> 00:12:01.490 The student is confirmed, and then we'll make use of the JSF 243 00:12:01.490 --> 00:12:02.717 expression language. 244 00:12:02.717 --> 00:12:04.287 I'll say student dot first name, 245 00:12:04.287 --> 00:12:05.915 so it's gonna call that managed bean and say 246 00:12:05.915 --> 00:12:08.608 student dot get first name. 247 00:12:08.608 --> 00:12:10.263 It's gonna read the data. 248 00:12:10.263 --> 00:12:12.582 We'll do a similar thing here for the last name. 249 00:12:12.582 --> 00:12:15.116 We'll have student dot last name. 250 00:12:15.116 --> 00:12:18.567 So student dot get last name is what JSF will call 251 00:12:18.567 --> 00:12:20.067 in the background. 252 00:12:23.407 --> 00:12:24.819 And that's basically the, how it works 253 00:12:24.819 --> 00:12:28.902 with setting up a confirmation page here for JSF. 254 00:12:33.959 --> 00:12:35.817 Now let's go ahead and run this application 255 00:12:35.817 --> 00:12:36.675 and here's the output for it. 256 00:12:36.675 --> 00:12:37.570 So we have our form. 257 00:12:37.570 --> 00:12:40.052 We get the first name and the last name. 258 00:12:40.052 --> 00:12:42.776 I'll enter john for the first name, Doe for the last name, 259 00:12:42.776 --> 00:12:44.443 and I'll hit submit. 260 00:12:49.331 --> 00:12:51.453 And then we'll get the results. 261 00:12:51.453 --> 00:12:54.891 The student is confirmed and again this is our confirmation 262 00:12:54.891 --> 00:12:58.262 page and they'll drop in the student dot first name 263 00:12:58.262 --> 00:13:01.638 and they'll also drop in student dot last name, 264 00:13:01.638 --> 00:13:04.133 which is actually making use of our managed bean 265 00:13:04.133 --> 00:13:05.816 in the background. 266 00:13:05.816 --> 00:13:07.983 So this looks really good. 267 00:13:08.917 --> 00:13:10.230 We've looked at all the different components, 268 00:13:10.230 --> 00:13:12.780 and we pull it all together with a nice coding example. 269 00:13:12.780 --> 00:13:13.613 Good job. 270 00:13:16.769 --> 00:13:20.144 All right so in summary in this video 271 00:13:20.144 --> 00:13:21.759 we learned what managed beans are. 272 00:13:21.759 --> 00:13:23.873 We also learned about the coding requirements for a managed 273 00:13:23.873 --> 00:13:26.390 bean, and we created a managed bean from scratch. 274 00:13:26.390 --> 00:13:30.233 We also discussed the JSF expression language 275 00:13:30.233 --> 00:13:32.760 and how we can use it to set bean properties 276 00:13:32.760 --> 00:13:35.843 from a JSF page, and also how to read bean properties 277 00:13:35.843 --> 00:13:37.176 from a JSF page. 278 00:13:38.132 --> 00:13:40.961 Well, this wraps up the video. 279 00:13:40.961 --> 00:13:43.034 In this video we learned how to use 280 00:13:43.034 --> 00:13:45.674 JSF forms and managed beans. 281 00:13:45.674 --> 00:13:48.200 We also got a detailed view of how to create 282 00:13:48.200 --> 00:13:52.367 the managed beans and how to use them in our JSF pages.