WEBVTT 1 00:00:01.076 --> 00:00:02.785 Hey in this video we're going to cover 2 00:00:02.785 --> 00:00:05.118 the Sample App Architecture. 3 00:00:06.884 --> 00:00:08.672 We'll cover the following topics. 4 00:00:08.672 --> 00:00:11.188 We'll take a look at the application features, 5 00:00:11.188 --> 00:00:14.051 then we'll step back and look at the big picture. 6 00:00:14.051 --> 00:00:18.661 Next we'll discuss the Student Database Utility. 7 00:00:18.661 --> 00:00:20.935 Then we'll look at the Student Controller, 8 00:00:20.935 --> 00:00:22.553 and then finally we'll wrap it all up 9 00:00:22.553 --> 00:00:24.374 by looking at the JSF Page. 10 00:00:24.374 --> 00:00:26.468 Alright so, a lot of good stuff here, 11 00:00:26.468 --> 00:00:29.051 let's go ahead and get started. 12 00:00:30.834 --> 00:00:33.423 So here's just a quick refresher on our application. 13 00:00:33.423 --> 00:00:34.825 So remember, we're building this app 14 00:00:34.825 --> 00:00:36.123 for a fictional company, 15 00:00:36.123 --> 00:00:39.132 or actually a fictional university called FooBar. 16 00:00:39.132 --> 00:00:40.839 We're going to have four main features. 17 00:00:40.839 --> 00:00:43.002 We're going to allow the user to list the students, 18 00:00:43.002 --> 00:00:46.241 add a new student, update and delete a student. 19 00:00:46.241 --> 00:00:48.565 So these are all the core features that you'll need 20 00:00:48.565 --> 00:00:50.902 for a Java database application, 21 00:00:50.902 --> 00:00:53.276 and we'll cover all this in detail. 22 00:00:53.276 --> 00:00:54.963 So here's the big picture. 23 00:00:54.963 --> 00:00:57.558 So we have three main components here. 24 00:00:57.558 --> 00:00:59.220 So starting on the far left we have 25 00:00:59.220 --> 00:01:01.286 a collection of JSF pages, 26 00:01:01.286 --> 00:01:04.630 that we'll use for building our view for the application. 27 00:01:04.630 --> 00:01:07.322 Then in the center we'll have this managed bean, 28 00:01:07.322 --> 00:01:09.407 we'll call it a Student Controller. 29 00:01:09.407 --> 00:01:11.530 Next we'll have this helper class, 30 00:01:11.530 --> 00:01:13.705 which is our Student Database Utility, 31 00:01:13.705 --> 00:01:16.124 and this will connect to the actual database. 32 00:01:16.124 --> 00:01:18.034 Alright, so in the following slides 33 00:01:18.034 --> 00:01:20.340 I'll actually go through each one of these components 34 00:01:20.340 --> 00:01:22.590 and discuss them in detail. 35 00:01:27.184 --> 00:01:28.839 Alright so let's start here with the back, 36 00:01:28.839 --> 00:01:30.872 with our Student Database Utility. 37 00:01:30.872 --> 00:01:32.720 So this is simply a helper class, 38 00:01:32.720 --> 00:01:36.352 that's going to be responsible for accessing the database. 39 00:01:36.352 --> 00:01:39.199 This helper class is going to make use of JDBC code 40 00:01:39.199 --> 00:01:42.369 to access the database and give us the appropriate data. 41 00:01:42.369 --> 00:01:45.307 Now, this is a very common design pattern. 42 00:01:45.307 --> 00:01:49.809 It's called the Data Accessor Object design pattern, or DAO, 43 00:01:49.809 --> 00:01:51.749 and when you join Enterprise Projects 44 00:01:51.749 --> 00:01:52.820 or large scale projects, 45 00:01:52.820 --> 00:01:55.097 you'll see other developers make use of this pattern, 46 00:01:55.097 --> 00:01:57.825 so again, a very common design pattern. 47 00:01:57.825 --> 00:01:59.535 The main purpose of this pattern 48 00:01:59.535 --> 00:02:03.081 is to isolate or encapsulate your database code 49 00:02:03.081 --> 00:02:05.072 to one specific class, 50 00:02:05.072 --> 00:02:07.124 and then what this does, is that, 51 00:02:07.124 --> 00:02:09.717 this actually promotes object reuse. 52 00:02:09.717 --> 00:02:12.842 So other applications can make use of this helper class 53 00:02:12.842 --> 00:02:15.362 and also it's just one self contained area 54 00:02:15.362 --> 00:02:17.725 of where your database code is located. 55 00:02:17.725 --> 00:02:19.595 So again, common pattern, 56 00:02:19.595 --> 00:02:21.815 a best practice that's used in the industry, 57 00:02:21.815 --> 00:02:23.235 and that's a helper class called 58 00:02:23.235 --> 00:02:26.562 the Data Accessor Object or DAO. 59 00:02:26.562 --> 00:02:28.455 If you want more details on this pattern, 60 00:02:28.455 --> 00:02:29.969 you can simply go to Google, 61 00:02:29.969 --> 00:02:32.188 type in the key word, Data Accessor Object, 62 00:02:32.188 --> 00:02:33.780 and you'll get more details on this pattern, 63 00:02:33.780 --> 00:02:37.947 but we'll make use of this pattern for our application. 64 00:02:42.873 --> 00:02:44.608 Alright so let's take a look some of the methods, 65 00:02:44.608 --> 00:02:47.447 here in this helper class, our Student DB Utility. 66 00:02:47.447 --> 00:02:50.173 Alright so basically again, this class is responsible 67 00:02:50.173 --> 00:02:51.769 for communicating with the database, 68 00:02:51.769 --> 00:02:54.879 and giving us data from the database. 69 00:02:54.879 --> 00:02:57.340 So this class actually makes use of another pattern 70 00:02:57.340 --> 00:02:59.307 called a singleton pattern, 71 00:02:59.307 --> 00:03:00.948 and where basically, we'll simply have 72 00:03:00.948 --> 00:03:03.238 one instance of the class available. 73 00:03:03.238 --> 00:03:05.410 I'll get into more details on the singleton pattern 74 00:03:05.410 --> 00:03:07.270 when we move into the code, 75 00:03:07.270 --> 00:03:09.311 but basically at the top we'll have a method called 76 00:03:09.311 --> 00:03:11.593 getInstance that will give us a handle to 77 00:03:11.593 --> 00:03:14.044 a given instance of this helper class. 78 00:03:14.044 --> 00:03:16.726 Then, moving forward, we'll have some other methods here, 79 00:03:16.726 --> 00:03:18.108 such as getStudent, 80 00:03:18.108 --> 00:03:21.841 so we can get a given student based on their user ID. 81 00:03:21.841 --> 00:03:24.784 Then we'll be able to get a list of students. 82 00:03:24.784 --> 00:03:26.299 And then we have the other methods here for 83 00:03:26.299 --> 00:03:28.935 addStudent, update and deleteStudent, 84 00:03:28.935 --> 00:03:30.767 and those are all pretty straightforward, 85 00:03:30.767 --> 00:03:34.791 as far as what they do or what they provide for us. 86 00:03:34.791 --> 00:03:36.793 Again, we'll walk through all of these methods 87 00:03:36.793 --> 00:03:38.102 in all the follow on videos 88 00:03:38.102 --> 00:03:40.497 and you'll see how they work in detail. 89 00:03:40.497 --> 00:03:44.664 Here I simply wanted to just give you an overview. 90 00:03:48.367 --> 00:03:50.381 Alright, so then we also have this idea 91 00:03:50.381 --> 00:03:51.679 of a Student Controller. 92 00:03:51.679 --> 00:03:52.832 So what's the Student Controller? 93 00:03:52.832 --> 00:03:55.298 Well the Student Controller's basically a managed bean, 94 00:03:55.298 --> 00:03:58.000 and it's our interface between the JSF pages 95 00:03:58.000 --> 00:04:01.470 and our helper class, the Student Database Utility. 96 00:04:01.470 --> 00:04:04.686 So the JSF pages will make use of this managed bean, 97 00:04:04.686 --> 00:04:06.441 they'll call a method like load students, 98 00:04:06.441 --> 00:04:08.751 or add student, or update student, 99 00:04:08.751 --> 00:04:11.735 and the managed bean will simply delegate this call 100 00:04:11.735 --> 00:04:13.471 off to the helper class, 101 00:04:13.471 --> 00:04:16.028 and the helper class will do all the heavy lifting 102 00:04:16.028 --> 00:04:17.944 for the database specific work. 103 00:04:17.944 --> 00:04:20.126 Alright so the Managed Bean here is basically 104 00:04:20.126 --> 00:04:22.977 our interface between the JSF page 105 00:04:22.977 --> 00:04:25.727 and the Student Database Utility. 106 00:04:29.430 --> 00:04:30.792 Alright so we have two methods here, 107 00:04:30.792 --> 00:04:32.471 load students and get students. 108 00:04:32.471 --> 00:04:34.813 So basically I'm going to make use of this pattern, 109 00:04:34.813 --> 00:04:37.002 where I basically load the students into memory 110 00:04:37.002 --> 00:04:38.164 for a given view, 111 00:04:38.164 --> 00:04:39.569 and then we call the get students 112 00:04:39.569 --> 00:04:41.280 to give us a handle to that method. 113 00:04:41.280 --> 00:04:43.682 Now behind the scenes, JSF has something called a 114 00:04:43.682 --> 00:04:46.182 request processing lifecycle. 115 00:04:46.182 --> 00:04:48.566 So, for a given web request, 116 00:04:48.566 --> 00:04:51.553 JSF will call X number of methods on your beans. 117 00:04:51.553 --> 00:04:53.753 If your beans have getter methods, 118 00:04:53.753 --> 00:04:57.660 then JSF could possibly call those methods multiple times, 119 00:04:57.660 --> 00:04:59.434 during a single web request. 120 00:04:59.434 --> 00:05:01.288 So you want to make sure that you don't place 121 00:05:01.288 --> 00:05:02.450 any heavy lifting 122 00:05:02.450 --> 00:05:03.700 or intense code 123 00:05:04.691 --> 00:05:05.913 inside of the getter methods. 124 00:05:05.913 --> 00:05:08.686 You simply want to return an object and that's it. 125 00:05:08.686 --> 00:05:11.446 So I place all of the heavy JDBC work, 126 00:05:11.446 --> 00:05:13.889 inside this load students method. 127 00:05:13.889 --> 00:05:15.307 That's mainly for performance reasons 128 00:05:15.307 --> 00:05:18.300 and kind of real world development, 129 00:05:18.300 --> 00:05:19.555 and I'll talk more about it later, 130 00:05:19.555 --> 00:05:20.903 but anyway that's kind of how that'll work 131 00:05:20.903 --> 00:05:23.123 and I'll show you how this all plays into 132 00:05:23.123 --> 00:05:25.790 the examples with the JSF pages. 133 00:05:29.562 --> 00:05:31.265 Alrighty, so let's go ahead and move forward here, 134 00:05:31.265 --> 00:05:34.419 and let's takes a look at our JSF page. 135 00:05:34.419 --> 00:05:35.887 So, in our JSF page we're going to 136 00:05:35.887 --> 00:05:37.382 create a very simple page. 137 00:05:37.382 --> 00:05:40.246 It's called test-db.xhtml. 138 00:05:40.246 --> 00:05:41.797 At the beginning of the page 139 00:05:41.797 --> 00:05:43.973 we're going to make use of an event listener. 140 00:05:43.973 --> 00:05:45.898 So effectively, what this segment of code will do 141 00:05:45.898 --> 00:05:48.403 is that this code will run only once, 142 00:05:48.403 --> 00:05:50.077 when the page is first loaded. 143 00:05:50.077 --> 00:05:52.681 Alright, so here I have, this f:event, 144 00:05:52.681 --> 00:05:54.538 I have type="preRenderView", 145 00:05:54.538 --> 00:05:57.991 meaning this code will run before the page is rendered, 146 00:05:57.991 --> 00:05:59.014 and I have a listener, 147 00:05:59.014 --> 00:06:02.476 and that's an actual call to a method in my managed bean. 148 00:06:02.476 --> 00:06:03.750 So think of this if you've done 149 00:06:03.750 --> 00:06:04.982 some JavaScript work before, 150 00:06:04.982 --> 00:06:07.940 think of this as like doing an onload. 151 00:06:07.940 --> 00:06:09.646 So Basically, when a page is loaded 152 00:06:09.646 --> 00:06:12.001 then they'll execute this piece of code. 153 00:06:12.001 --> 00:06:14.482 So we basically load the students into memory 154 00:06:14.482 --> 00:06:17.021 for the JSF bean or the managed bean. 155 00:06:17.021 --> 00:06:20.047 Then in our body section, we have the data, 156 00:06:20.047 --> 00:06:23.632 and then we reference studentcontroller.students. 157 00:06:23.632 --> 00:06:27.533 So this will basically call studentcontroller.getstudents. 158 00:06:27.533 --> 00:06:29.354 In our managed bean we simply return 159 00:06:29.354 --> 00:06:30.610 a reference for that object. 160 00:06:30.610 --> 00:06:33.612 So again, this is more of a performance optimization 161 00:06:33.612 --> 00:06:35.091 for real world applications. 162 00:06:35.091 --> 00:06:38.598 So basically again, at the top you'll want to load your data 163 00:06:38.598 --> 00:06:40.734 and then later on in the page, in the body, 164 00:06:40.734 --> 00:06:42.338 you want to reference that data. 165 00:06:42.338 --> 00:06:44.537 Because again, remember JSF could possibly 166 00:06:44.537 --> 00:06:46.684 call those getter methods multiple times 167 00:06:46.684 --> 00:06:48.851 and we want to avoid that. 168 00:06:49.873 --> 00:06:52.094 Alright, so let's kind of pull it all together. 169 00:06:52.094 --> 00:06:53.463 So here we're going to have this example, 170 00:06:53.463 --> 00:06:55.330 that's going to make use of 171 00:06:55.330 --> 00:06:57.551 that test-db page that we just saw, 172 00:06:57.551 --> 00:07:00.718 so test-db.xhtml, that's our JSF page. 173 00:07:01.769 --> 00:07:02.741 This page is going to call 174 00:07:02.741 --> 00:07:05.417 the managed bean Student Controller. 175 00:07:05.417 --> 00:07:06.732 The Student Controller will, in turn, 176 00:07:06.732 --> 00:07:10.211 make use of our helper class, Student DbUtil, 177 00:07:10.211 --> 00:07:12.729 and again remember our Student DbUtil, 178 00:07:12.729 --> 00:07:15.221 is responsible for talking to the database 179 00:07:15.221 --> 00:07:16.990 using the JDBC code. 180 00:07:16.990 --> 00:07:18.140 And that's kind of the big picture, 181 00:07:18.140 --> 00:07:20.495 as far as how this all works together, 182 00:07:20.495 --> 00:07:22.917 and what I'll do is I'll actually move over into Eclipse 183 00:07:22.917 --> 00:07:25.247 and then we'll kind of walk through this process 184 00:07:25.247 --> 00:07:27.148 and then you'll see how it all works together. 185 00:07:27.148 --> 00:07:28.260 But here, I just wanted to make sure 186 00:07:28.260 --> 00:07:30.003 that you understood the big picture, 187 00:07:30.003 --> 00:07:32.856 to see how these different pieces fit together. 188 00:07:32.856 --> 00:07:34.356 Alright, good job.