WEBVTT 1 00:00:00.000 --> 00:00:02.181 Hey, welcome back. 2 00:00:02.181 --> 00:00:05.055 So in this video, we're gonna learn how to list students 3 00:00:05.055 --> 00:00:09.493 and this time we're gonna apply cascading style sheets. 4 00:00:09.493 --> 00:00:11.295 So we'll cover the following topics. 5 00:00:11.295 --> 00:00:13.789 We'll list the students out with cascading style sheets. 6 00:00:13.789 --> 00:00:15.749 We'll also look at the Big Picture 7 00:00:15.749 --> 00:00:17.879 just to see how everything fits together. 8 00:00:17.879 --> 00:00:19.591 And then we'll do a Code Walk Through, 9 00:00:19.591 --> 00:00:21.231 just to see how we can apply the 10 00:00:21.231 --> 00:00:24.304 cascading style sheets to our JSF page. 11 00:00:24.304 --> 00:00:26.663 Alright, so we have a lot of good things in store. 12 00:00:26.663 --> 00:00:28.830 Let's go ahead and dig in. 13 00:00:31.930 --> 00:00:33.968 So this is the GUI for our application 14 00:00:33.968 --> 00:00:36.557 or our page, really, at the top we'll have a header 15 00:00:36.557 --> 00:00:38.153 and then in the main section we'll 16 00:00:38.153 --> 00:00:40.118 have our data table. 17 00:00:40.118 --> 00:00:41.978 So for our header section we'll apply 18 00:00:41.978 --> 00:00:44.971 one of our cascading style sheet 19 00:00:44.971 --> 00:00:48.511 so we'll have a bold text with a background blue 20 00:00:48.511 --> 00:00:50.018 and then for the center section 21 00:00:50.018 --> 00:00:51.911 we'll have our data table component. 22 00:00:51.911 --> 00:00:53.498 And so we'll apply some styles here. 23 00:00:53.498 --> 00:00:54.608 We'll have a header section 24 00:00:54.608 --> 00:00:56.672 and then we'll make use of alternating colors 25 00:00:56.672 --> 00:00:59.520 for the various rows here in our table. 26 00:00:59.520 --> 00:01:01.687 This will be very similar to the styles 27 00:01:01.687 --> 00:01:05.520 that we applied in one of the previous videos. 28 00:01:07.731 --> 00:01:09.333 Alright, so just to kind of make sure 29 00:01:09.333 --> 00:01:11.162 we understand how everything fits together 30 00:01:11.162 --> 00:01:12.597 this is the Big Picture. 31 00:01:12.597 --> 00:01:13.910 So we're gonna have this new file here 32 00:01:13.910 --> 00:01:15.862 called list-students.xhtml. 33 00:01:15.862 --> 00:01:18.877 It's gonna apply the cascading styles to the page 34 00:01:18.877 --> 00:01:20.569 and then this person will make use 35 00:01:20.569 --> 00:01:22.370 of the student controller which in turn 36 00:01:22.370 --> 00:01:25.312 delegates the call off to the Student Database Utility 37 00:01:25.312 --> 00:01:27.645 which talks to the database. 38 00:01:29.140 --> 00:01:32.209 So I won't cover the Controller or DbUtil that much 39 00:01:32.209 --> 00:01:33.808 because we've already covered that portion of it 40 00:01:33.808 --> 00:01:35.538 already in the previous videos. 41 00:01:35.538 --> 00:01:37.764 I'll simply focus on applying the CSS styles 42 00:01:37.764 --> 00:01:39.181 to this JSF page. 43 00:01:41.966 --> 00:01:43.783 Alright, so let's go ahead and move into the clips 44 00:01:43.783 --> 00:01:45.451 and let's do a code walkthrough. 45 00:01:45.451 --> 00:01:46.919 So what I'd like to do is continue 46 00:01:46.919 --> 00:01:49.143 to use the previous project that we had open. 47 00:01:49.143 --> 00:01:51.883 Jdbc-student-tracker and that's the version 1 48 00:01:51.883 --> 00:01:54.716 that we had in the previous video. 49 00:01:56.500 --> 00:01:57.602 And what I'd like to do is go ahead 50 00:01:57.602 --> 00:02:00.004 and go look at the web content folder. 51 00:02:00.004 --> 00:02:03.687 There's a file on here called list-students.xhtml. 52 00:02:03.687 --> 00:02:05.449 So this is the version of the JSF file 53 00:02:05.449 --> 00:02:07.641 that will list out the students 54 00:02:07.641 --> 00:02:10.891 and apply the style sheets accordingly. 55 00:02:11.886 --> 00:02:12.840 So let's go ahead and open up 56 00:02:12.840 --> 00:02:15.507 this file and take a look at it. 57 00:02:17.004 --> 00:02:18.830 So on lines six through eight, 58 00:02:18.830 --> 00:02:20.886 we're gonna use the same approach as before. 59 00:02:20.886 --> 00:02:24.732 So preRenderView will call studentController.LoadStudents 60 00:02:24.732 --> 00:02:26.978 and again this'll do all the heavy lifting 61 00:02:26.978 --> 00:02:28.897 when the page is first loaded. 62 00:02:28.897 --> 00:02:30.261 It'll get the students in the memory 63 00:02:30.261 --> 00:02:34.428 and then we can use them later on in our application. 64 00:02:35.747 --> 00:02:37.955 Now moving down to line 16, this is where 65 00:02:37.955 --> 00:02:40.501 we actually load or reference the style sheet. 66 00:02:40.501 --> 00:02:43.669 So here we have h:outputStylesheet 67 00:02:43.669 --> 00:02:45.910 we give library of css 68 00:02:45.910 --> 00:02:47.160 name style.css. 69 00:02:48.338 --> 00:02:50.608 And, again, we've learned already how to 70 00:02:50.608 --> 00:02:52.363 make use of style sheets and JSF, 71 00:02:52.363 --> 00:02:54.058 but this is just a refresher. 72 00:02:54.058 --> 00:02:56.082 So, moving back over to our directory structure, 73 00:02:56.082 --> 00:02:59.810 under resources/css we have a file out there 74 00:02:59.810 --> 00:03:02.252 called styles.css and this is basically 75 00:03:02.252 --> 00:03:04.007 a cascading style sheet with all 76 00:03:04.007 --> 00:03:05.390 your various styles in it. 77 00:03:05.390 --> 00:03:06.794 So I won't go into that in details, 78 00:03:06.794 --> 00:03:08.389 but the file is out there, you can review it 79 00:03:08.389 --> 00:03:09.722 at your leisure. 80 00:03:13.765 --> 00:03:18.227 Alright, so I'll just move back into the JSF page. 81 00:03:18.227 --> 00:03:21.080 Lines 22-26 is basically setting up 82 00:03:21.080 --> 00:03:23.808 that header section for FooBar University 83 00:03:23.808 --> 00:03:28.199 applying an appropriate style that's mapped to that. 84 00:03:28.199 --> 00:03:32.366 Here on line 32 we display any error messages that occurred. 85 00:03:36.163 --> 00:03:39.846 And then on lines 36-39 we kind of start off 86 00:03:39.846 --> 00:03:42.951 the reference here for our data table. 87 00:03:42.951 --> 00:03:44.983 So, again, our data table's gonna make use 88 00:03:44.983 --> 00:03:46.977 of the studentController.students, 89 00:03:46.977 --> 00:03:49.103 have a temporary variable for tempStudent. 90 00:03:49.103 --> 00:03:51.968 The most important part here is lines 37-39. 91 00:03:51.968 --> 00:03:54.227 This is where we apply the appropriate styles 92 00:03:54.227 --> 00:03:55.845 to this data table. 93 00:03:55.845 --> 00:03:57.903 So we set up the class, the headerClass, 94 00:03:57.903 --> 00:04:01.983 and the rowClasses for alternating colors. 95 00:04:01.983 --> 00:04:03.684 And, again, we've seen this before, 96 00:04:03.684 --> 00:04:07.851 just a refresh of it here for this example with JDCB. 97 00:04:11.313 --> 00:04:13.431 And that's basically it, everything else stays the same. 98 00:04:13.431 --> 00:04:14.963 So you're columns for your first name, 99 00:04:14.963 --> 00:04:19.130 last name, and email, so on, that all stays the same. 100 00:04:20.661 --> 00:04:22.548 Alright, so let's go ahead and run this one. 101 00:04:22.548 --> 00:04:24.860 Select the file and right click. 102 00:04:24.860 --> 00:04:28.777 Now choose Run As, then I'll say Run on Server. 103 00:04:30.449 --> 00:04:32.245 Okay, great, so this runs and right here 104 00:04:32.245 --> 00:04:33.998 on our browser we see the outputs. 105 00:04:33.998 --> 00:04:37.042 So now we have FooBar University with those styles applied 106 00:04:37.042 --> 00:04:39.943 and also our data table, so if you remember 107 00:04:39.943 --> 00:04:41.851 from one of our previous videos, 108 00:04:41.851 --> 00:04:44.871 we had a very basic, raw, ugly table. 109 00:04:44.871 --> 00:04:47.637 Now we've applied styles to it and it looks pretty. 110 00:04:47.637 --> 00:04:49.325 And, again, all of this information 111 00:04:49.325 --> 00:04:51.269 is coming from the database thanks to 112 00:04:51.269 --> 00:04:54.931 our Student Controller and our Student DbUtil. 113 00:04:54.931 --> 00:04:56.647 So this is a very good first start 114 00:04:56.647 --> 00:04:58.365 at building on our application 115 00:04:58.365 --> 00:05:00.829 to retrieve information from the database 116 00:05:00.829 --> 00:05:03.542 and also make it look pretty. 117 00:05:03.542 --> 00:05:05.125 So good job so far. 118 00:05:07.018 --> 00:05:08.833 So let's go ahead and wrap up this video. 119 00:05:08.833 --> 00:05:10.795 We learned how to list students and also 120 00:05:10.795 --> 00:05:12.398 apply cascading style sheets. 121 00:05:12.398 --> 00:05:13.980 We looked at the Big Picture 122 00:05:13.980 --> 00:05:17.211 and then we also did a Code Walk Through 123 00:05:17.211 --> 00:05:18.294 So, good job.