WEBVTT 1 00:00:00.452 --> 00:00:02.547 All right, so now I have this new project created. 2 00:00:02.547 --> 00:00:04.925 The first thing I wanna do is create that HTML form 3 00:00:04.925 --> 00:00:07.675 that we saw in the earlier slide. 4 00:00:09.989 --> 00:00:12.597 So I'll simply move to the web content folder, 5 00:00:12.597 --> 00:00:16.067 right click, and I'll say new HTML file. 6 00:00:16.067 --> 00:00:18.008 And this is the actual file called 7 00:00:18.008 --> 00:00:19.669 hello-world.xhtml. 8 00:00:19.669 --> 00:00:21.592 It's gonna have an actual input form 9 00:00:21.592 --> 00:00:24.509 for our little hello-world example. 10 00:00:29.160 --> 00:00:30.465 So I go ahead and click next. 11 00:00:30.465 --> 00:00:32.043 I can choose an actual template 12 00:00:32.043 --> 00:00:33.731 I want to use for this file. 13 00:00:33.731 --> 00:00:35.075 There's a lot of templates out here. 14 00:00:35.075 --> 00:00:36.824 It's not really important right now 15 00:00:36.824 --> 00:00:39.576 but I'll just go ahead and choose a new facelet template. 16 00:00:39.576 --> 00:00:40.873 But don't worry about it too much 17 00:00:40.873 --> 00:00:43.525 because I'm actually gonna delete everything that's there, 18 00:00:43.525 --> 00:00:46.330 but I'll go ahead and hit finish right here. 19 00:00:46.330 --> 00:00:48.981 So there gonna give me a lot of template stuff, 20 00:00:48.981 --> 00:00:50.841 but I really don't need it for this demo. 21 00:00:50.841 --> 00:00:53.392 So I'm just gonna simply select all of this text 22 00:00:53.392 --> 00:00:55.975 and simply delete it right now. 23 00:01:06.282 --> 00:01:07.411 All right, so I've wiped that out, 24 00:01:07.411 --> 00:01:11.010 I'm gonna drop in some code that I have had previously, 25 00:01:11.010 --> 00:01:13.136 but don't worry, I'll actually walk through all the steps 26 00:01:13.136 --> 00:01:16.469 of the code that I'm gonna drop in here. 27 00:01:17.500 --> 00:01:19.010 All right, so let's go ahead and walk through it. 28 00:01:19.010 --> 00:01:22.291 So on lines two through five, we actually give a reference 29 00:01:22.291 --> 00:01:24.158 for the JSF custom tags. 30 00:01:24.158 --> 00:01:26.620 I'll talk more about this in some later videos, 31 00:01:26.620 --> 00:01:29.553 but JSF has a collection of tags that will generate 32 00:01:29.553 --> 00:01:32.167 HTML content for us automatically. 33 00:01:32.167 --> 00:01:35.834 So we'll make use of these in the page here. 34 00:01:36.936 --> 00:01:39.236 So first off I'll set up our HTML head section, 35 00:01:39.236 --> 00:01:43.393 again I'm using one of the HTML custom tags from JSF, 36 00:01:43.393 --> 00:01:44.226 h:head. 37 00:01:46.684 --> 00:01:48.926 So that gives us the normal heading and the title. 38 00:01:48.926 --> 00:01:52.005 Then I move on down to the actual body of the HTML page. 39 00:01:52.005 --> 00:01:55.019 And again, note I'm using the h:body, 40 00:01:55.019 --> 00:01:58.311 that's the JSF custom tag that we're using here. 41 00:01:58.311 --> 00:02:01.543 So now let's go ahead and set up the HTML form. 42 00:02:01.543 --> 00:02:03.583 So the little graphic I have on the screen 43 00:02:03.583 --> 00:02:06.138 as far as what's your name, with a submit button, 44 00:02:06.138 --> 00:02:10.867 it's rendered by this piece of code on lines 12 through 15. 45 00:02:10.867 --> 00:02:12.652 All right so let me just clean up the text 46 00:02:12.652 --> 00:02:14.740 here for a bit just so we can walk through it 47 00:02:14.740 --> 00:02:16.691 and talk about it so let me just get some extra 48 00:02:16.691 --> 00:02:20.292 white space, and slide it up the screen a bit. 49 00:02:20.292 --> 00:02:22.766 All right, so I have this h:inputtext, 50 00:02:22.766 --> 00:02:26.453 so again, h: means that it's a JSF custom tag. 51 00:02:26.453 --> 00:02:29.228 This will give us an input text field. 52 00:02:29.228 --> 00:02:32.781 The actual ID or name for the field is called name, 53 00:02:32.781 --> 00:02:35.928 the actual value it's gonna bind this value to a 54 00:02:35.928 --> 00:02:38.294 request perimeter called the username, 55 00:02:38.294 --> 00:02:41.174 and then we have a colon placeholder saying actual prompt, 56 00:02:41.174 --> 00:02:42.233 what's your name. 57 00:02:42.233 --> 00:02:44.746 line:15% And then on line 16 we have a command button, 58 00:02:44.746 --> 00:02:46.961 line:15% so this is effectively our submit button, 59 00:02:46.961 --> 00:02:49.430 line:15% and the action is myresponse. 60 00:02:49.430 --> 00:02:51.899 line:15% So it'll actually submit it to this page called 61 00:02:51.899 --> 00:02:53.316 line:15% myresponse.xhtml. 62 00:02:54.631 --> 00:02:57.323 line:15% Again, with JFS all the pages are written 63 00:02:57.323 --> 00:02:59.477 line:15% using .xhtml extension. 64 00:02:59.477 --> 00:03:01.055 line:15% And that's how this form is set up, 65 00:03:01.055 --> 00:03:03.461 line:15% and this is how we'll actually submit data across to 66 00:03:03.461 --> 00:03:05.544 line:15% the actual response page. 67 00:03:06.387 --> 00:03:07.220 line:15% All right, 68 00:03:07.220 --> 00:03:09.554 line:15% so now let's go ahead and create that response page. 69 00:03:09.554 --> 00:03:11.078 Let me move over here in my window. 70 00:03:11.078 --> 00:03:14.495 Under web content I'll say new HTML file. 71 00:03:15.356 --> 00:03:19.523 The actual page name or file name is myresponse.xhtml. 72 00:03:21.229 --> 00:03:22.850 Put the x on there. 73 00:03:22.850 --> 00:03:27.221 I'll hit next, I'll choose one of the templates again, 74 00:03:27.221 --> 00:03:29.862 I'll hit finish, but again don't worry about the template, 75 00:03:29.862 --> 00:03:31.856 we're gonna actually delete all of this text, 76 00:03:31.856 --> 00:03:33.985 line:15% so I'll just go through it and hit cut 77 00:03:33.985 --> 00:03:36.797 line:15% and then I'll drop in some code that I had previously. 78 00:03:36.797 --> 00:03:40.880 But again I'll walk through each line of it here. 79 00:03:41.991 --> 00:03:43.704 So here we start off with just a reference 80 00:03:43.704 --> 00:03:45.503 for the JSF custom tags. 81 00:03:45.503 --> 00:03:47.526 I'm really only using just one of the tags here, 82 00:03:47.526 --> 00:03:49.391 the h tag for HTML, 83 00:03:49.391 --> 00:03:53.474 our basic header, and then we'll set up our body. 84 00:03:55.188 --> 00:03:56.987 And then for the body we're gonna say hello 85 00:03:56.987 --> 00:03:59.142 and we're gonna give the actual username. 86 00:03:59.142 --> 00:04:01.309 So you say #{theUserName}. 87 00:04:02.351 --> 00:04:04.906 So that's the actual user that was submitted 88 00:04:04.906 --> 00:04:07.113 on the HTML form, and here we're actually 89 00:04:07.113 --> 00:04:09.280 displaying that form data. 90 00:04:12.901 --> 00:04:14.697 All right, so that's enough with the coding, 91 00:04:14.697 --> 00:04:16.930 let's go ahead and run the application. 92 00:04:16.930 --> 00:04:19.933 So I'll select my file hello world at xhtml, 93 00:04:19.933 --> 00:04:22.993 and I'll choose run as and I'll select run 94 00:04:22.993 --> 00:04:23.826 on server. 95 00:04:25.831 --> 00:04:27.595 So this will actually run the application 96 00:04:27.595 --> 00:04:30.428 and we'll see a view of it right here in our browser 97 00:04:30.428 --> 00:04:32.511 that's inside of eclipse. 98 00:04:35.048 --> 00:04:36.269 A couple of things to note here is that 99 00:04:36.269 --> 00:04:38.633 we have this hello world at xhtml, 100 00:04:38.633 --> 00:04:41.409 and it's faces/helloworld at xhtml. 101 00:04:41.409 --> 00:04:44.213 So this is all being passed through the JSF 102 00:04:44.213 --> 00:04:45.463 faces servelet. 103 00:04:46.308 --> 00:04:49.588 I'll go ahead and type in the name of John Doe, 104 00:04:49.588 --> 00:04:52.463 I'll hit submit, and then I get the response. 105 00:04:52.463 --> 00:04:54.313 Hello, John Doe. 106 00:04:54.313 --> 00:04:57.391 Just like the code was developed in the previous section. 107 00:04:57.391 --> 00:04:58.572 All right, so this looks good, 108 00:04:58.572 --> 00:05:00.745 so let's go ahead and try this on a real browser. 109 00:05:00.745 --> 00:05:03.144 So I'll just go ahead and copy this URL, 110 00:05:03.144 --> 00:05:05.697 and then I'll bring up my Firefox browser, 111 00:05:05.697 --> 00:05:07.584 and check it out. 112 00:05:07.584 --> 00:05:11.751 So in Firefox I'll just drop in or paste that URL, 113 00:05:12.763 --> 00:05:15.669 and this gives me the actual form we saw earlier, 114 00:05:15.669 --> 00:05:18.578 I'll go ahead and type in my name, 115 00:05:18.578 --> 00:05:21.693 Mary Public, and then I'll hit submit. 116 00:05:21.693 --> 00:05:23.246 And it says hello, Mary Public. 117 00:05:23.246 --> 00:05:24.945 So this is pretty good, this is all working 118 00:05:24.945 --> 00:05:26.266 as desired. 119 00:05:26.266 --> 00:05:29.016 So good job with our hello world. 120 00:05:32.210 --> 00:05:34.234 All right so that wraps up the video, 121 00:05:34.234 --> 00:05:36.039 in this video we created a hello world 122 00:05:36.039 --> 00:05:37.504 program with JSF. 123 00:05:37.504 --> 00:05:39.853 We created an input form, and we created 124 00:05:39.853 --> 00:05:43.057 a response page and we linked everything together. 125 00:05:43.057 --> 00:05:43.890 Good job.