WEBVTT 1 00:00:01.364 --> 00:00:04.728 Hi, this is Chad Darby with luv2code.com. 2 00:00:04.728 --> 00:00:08.128 Welcome back to my tutorial on JavaServer Faces. 3 00:00:08.128 --> 00:00:12.925 In this video, I'll give you an overview of JSF. 4 00:00:12.925 --> 00:00:15.232 We'll cover the following topics. 5 00:00:15.232 --> 00:00:18.817 First, we'll start off with what is JavaServer Faces. 6 00:00:18.817 --> 00:00:22.608 Then we'll discuss the Model-View-Controller Design Pattern. 7 00:00:22.608 --> 00:00:25.777 Next, we'll discuss the benefits of JSF, 8 00:00:25.777 --> 00:00:28.363 as far as why we'd like to use it. 9 00:00:28.363 --> 00:00:30.053 Then we'll take a look at some 10 00:00:30.053 --> 00:00:33.295 third-party JSF UI components. 11 00:00:33.295 --> 00:00:37.135 And finally, we'll wrap up with some JSF resources. 12 00:00:37.135 --> 00:00:38.789 All right, so we have a lot to cover. 13 00:00:38.789 --> 00:00:41.372 Let's go ahead and get started. 14 00:00:42.580 --> 00:00:44.476 So what is JavaServer Faces? 15 00:00:44.476 --> 00:00:45.749 Well, it's basically a framework 16 00:00:45.749 --> 00:00:48.460 for building web applications in Java. 17 00:00:48.460 --> 00:00:50.869 So there are a number of ways of building web apps. 18 00:00:50.869 --> 00:00:53.109 You can go old school and build apps 19 00:00:53.109 --> 00:00:56.023 using just plain servlets and JSPs, 20 00:00:56.023 --> 00:00:58.675 or you can make use of a framework. 21 00:00:58.675 --> 00:01:01.416 Now granted, there's a lot of frameworks out there like 22 00:01:01.416 --> 00:01:06.246 Struts, Spring MVC and so on, however JavaServer Faces, 23 00:01:06.246 --> 00:01:09.903 or JSF, is the standard web application framework 24 00:01:09.903 --> 00:01:11.813 for the Java Enterprise Edition. 25 00:01:11.813 --> 00:01:13.682 This is key, it's a standard, so it's 26 00:01:13.682 --> 00:01:17.035 officially blessed by Oracle, as far as having 27 00:01:17.035 --> 00:01:21.005 a specification for building web applications, using Java. 28 00:01:21.005 --> 00:01:23.667 Also, a nice benefit here, with JSF, 29 00:01:23.667 --> 00:01:25.810 is that it's a very popular framework, 30 00:01:25.810 --> 00:01:29.652 so a lot of Java shops use it for building web applications. 31 00:01:29.652 --> 00:01:32.464 Also, it's commonly requested, 32 00:01:32.464 --> 00:01:35.165 by hiring companies or hiring managers, 33 00:01:35.165 --> 00:01:38.905 that a developer should have experience with JSF. 34 00:01:38.905 --> 00:01:43.488 So it's always good to get this bullet on your resume, 35 00:01:43.488 --> 00:01:45.784 and also added to your skillset. 36 00:01:45.784 --> 00:01:48.352 Also, a really nice thing about JSF is that 37 00:01:48.352 --> 00:01:51.493 it follows some of the industry patterns, or standards. 38 00:01:51.493 --> 00:01:53.879 JSF is actually based on the 39 00:01:53.879 --> 00:01:56.222 Model-View-Controller design pattern. 40 00:01:56.222 --> 00:01:58.784 A lot of the big web app frameworks, out there today, 41 00:01:58.784 --> 00:02:01.730 make use of this Model-View-Controller design pattern. 42 00:02:01.730 --> 00:02:05.897 For example, Spring MVC, ASP.NET has an MVC framework, 43 00:02:06.818 --> 00:02:09.551 so a lot of frameworks make use of this pattern. 44 00:02:09.551 --> 00:02:12.417 The really nice thing about it is that once you learn JSF, 45 00:02:12.417 --> 00:02:15.110 and you learn this Model-View-Controller design pattern, 46 00:02:15.110 --> 00:02:17.203 if you have to move over to another framework, 47 00:02:17.203 --> 00:02:20.088 like Spring MVC, then you can take these concepts 48 00:02:20.088 --> 00:02:22.904 and that'll help you transfer and get up to speed 49 00:02:22.904 --> 00:02:24.362 on that new framework. 50 00:02:24.362 --> 00:02:26.029 So it's very useful. 51 00:02:28.579 --> 00:02:31.568 Here's a nice diagram of the Model-View-Controller. 52 00:02:31.568 --> 00:02:33.525 With the Model-View-Controller you basically 53 00:02:33.525 --> 00:02:36.625 take some key functionality of the application 54 00:02:36.625 --> 00:02:39.317 and you break it up into smaller components. 55 00:02:39.317 --> 00:02:42.275 Here we have a web browser, that the user will use. 56 00:02:42.275 --> 00:02:45.169 They'll hit a link or submit some form data. 57 00:02:45.169 --> 00:02:46.968 It'll come into the controller. 58 00:02:46.968 --> 00:02:48.458 The purpose of the controller is that 59 00:02:48.458 --> 00:02:50.504 it'll figure out which piece of code 60 00:02:50.504 --> 00:02:53.742 needs to execute, based on the web request. 61 00:02:53.742 --> 00:02:57.175 It may need to route the code to submitting form data, 62 00:02:57.175 --> 00:03:01.170 or maybe querying a database, or maybe sending an email. 63 00:03:01.170 --> 00:03:03.068 So the controller's like the traffic cop. 64 00:03:03.068 --> 00:03:04.856 They'll determine what piece of code 65 00:03:04.856 --> 00:03:07.977 needs to execute for a given web request. 66 00:03:07.977 --> 00:03:11.512 Now, this controller may also access the model. 67 00:03:11.512 --> 00:03:13.837 The model basically provides access 68 00:03:13.837 --> 00:03:17.067 to any backend data that you may have. 69 00:03:17.067 --> 00:03:20.594 The model may make a call to a backend database, 70 00:03:20.594 --> 00:03:22.776 like MySQL Oracle. 71 00:03:22.776 --> 00:03:26.262 Or it may even make calls out to a web service, or whatever. 72 00:03:26.262 --> 00:03:29.013 The model basically handles retrieving 73 00:03:29.013 --> 00:03:32.845 or updating data for you, from your backend service. 74 00:03:32.845 --> 00:03:35.283 And once it has the data from the model, 75 00:03:35.283 --> 00:03:38.675 then the controller will pass this data over to the view. 76 00:03:38.675 --> 00:03:42.383 The view is basically a page for rendering HTML. 77 00:03:42.383 --> 00:03:45.198 This may be a page that'll render the results 78 00:03:45.198 --> 00:03:48.672 of a SQL query, or it could be rendering 79 00:03:48.672 --> 00:03:51.618 the results of a database insert. 80 00:03:51.618 --> 00:03:53.853 And that view page, effectively, at the end, 81 00:03:53.853 --> 00:03:57.246 comes back as HTML and goes back to the web browser. 82 00:03:57.246 --> 00:03:59.624 That's the idea of the Model-View-Controller. 83 00:03:59.624 --> 00:04:02.590 Again, controller routes the request. 84 00:04:02.590 --> 00:04:05.434 Model provides access to backend data. 85 00:04:05.434 --> 00:04:09.504 And the view renders a view, or HTML response. 86 00:04:09.504 --> 00:04:13.671 And that's the Model-View-Controller, in a nutshell. 87 00:04:16.496 --> 00:04:18.771 So what are the benefits of using JSF? 88 00:04:18.771 --> 00:04:20.469 I mean, why would you wanna use it? 89 00:04:20.469 --> 00:04:22.733 Well again, like I mentioned earlier, 90 00:04:22.733 --> 00:04:26.167 it's a standard way of building web app UIs in Java. 91 00:04:26.167 --> 00:04:27.987 So for building web applications with Java, 92 00:04:27.987 --> 00:04:31.844 it's part of the standard Java EE, Enterprise Edition. 93 00:04:31.844 --> 00:04:34.436 Also, the JavaServer Faces framework includes 94 00:04:34.436 --> 00:04:37.220 a large number of UI components. 95 00:04:37.220 --> 00:04:40.604 So basically they provide nice custom tags 96 00:04:40.604 --> 00:04:43.599 that allow you to generate tables, 97 00:04:43.599 --> 00:04:46.910 HTML list, or any type of HTML form. 98 00:04:46.910 --> 00:04:51.169 Pretty much all your UI widgets are available with JSF. 99 00:04:51.169 --> 00:04:53.124 And also a really nice thing too, 100 00:04:53.124 --> 00:04:54.343 and I'll talk about this in a second, 101 00:04:54.343 --> 00:04:55.437 is that it's extendable. 102 00:04:55.437 --> 00:04:58.770 So you can have third-part teams create UI components 103 00:04:58.770 --> 00:05:01.546 that you can add to your application. 104 00:05:01.546 --> 00:05:04.065 Also, another benefit of JSF is that it helps you 105 00:05:04.065 --> 00:05:06.988 to manage your application state for web requests. 106 00:05:06.988 --> 00:05:09.116 So when you submit form data across, 107 00:05:09.116 --> 00:05:12.009 it may be only for one web request, 108 00:05:12.009 --> 00:05:13.594 but you can also envision a scenario 109 00:05:13.594 --> 00:05:15.759 where you wanna have your application 110 00:05:15.759 --> 00:05:18.489 keep track of the form data. 111 00:05:18.489 --> 00:05:22.696 So, if you're building a shopping cart application, 112 00:05:22.696 --> 00:05:24.972 you may wanna keep track of the items 113 00:05:24.972 --> 00:05:27.605 that the user added to their shopping cart. 114 00:05:27.605 --> 00:05:31.140 Or say for example, you're building an online exam 115 00:05:31.140 --> 00:05:33.503 and you wanna keep track of the answers 116 00:05:33.503 --> 00:05:35.617 that the user gave for each question. 117 00:05:35.617 --> 00:05:38.962 Say for example, your online exam is ten questions 118 00:05:38.962 --> 00:05:41.827 and at the end you'd like to give them a pass/fail score. 119 00:05:41.827 --> 00:05:44.944 Well again, you need to manage that application state. 120 00:05:44.944 --> 00:05:47.301 You can make use of that using JSF. 121 00:05:47.301 --> 00:05:48.694 And then finally, the most common thing 122 00:05:48.694 --> 00:05:51.689 that you'll use with JSF is processing form data. 123 00:05:51.689 --> 00:05:53.324 So the user will insert some data, submit it. 124 00:05:53.324 --> 00:05:57.227 Here you can use JSF to perform some validation. 125 00:05:57.227 --> 00:05:59.454 They have some built in validation rules. 126 00:05:59.454 --> 00:06:00.795 And also you can convert the data 127 00:06:00.795 --> 00:06:04.125 to different formats, based on your requirements. 128 00:06:04.125 --> 00:06:07.234 This is just a very high level list 129 00:06:07.234 --> 00:06:08.942 of JSF benefits, but a lot of good things. 130 00:06:08.942 --> 00:06:12.359 And again, it's a very popular framework. 131 00:06:13.818 --> 00:06:16.341 And also, like I mentioned a little earlier, 132 00:06:16.341 --> 00:06:18.942 you can make use of the core UI components, 133 00:06:18.942 --> 00:06:21.572 provided by JSF, but then there's also 134 00:06:21.572 --> 00:06:23.728 a large group of developers who've created 135 00:06:23.728 --> 00:06:26.315 additional UI components. 136 00:06:26.315 --> 00:06:29.194 You can actually take these third-party components, 137 00:06:29.194 --> 00:06:31.600 that are created by these open source developers, 138 00:06:31.600 --> 00:06:34.883 and you can include them into your application. 139 00:06:34.883 --> 00:06:36.192 This is a very nice bonus. 140 00:06:36.192 --> 00:06:38.487 So you get the basic UI components 141 00:06:38.487 --> 00:06:40.714 plus you can add in other groups. 142 00:06:40.714 --> 00:06:42.502 On the screen here I've listed 143 00:06:42.502 --> 00:06:46.919 three of the most popular third party UI components. 144 00:06:46.919 --> 00:06:48.738 They have their own separate website. 145 00:06:48.738 --> 00:06:49.906 They have their own separate file, 146 00:06:49.906 --> 00:06:52.315 you download it and include it into your project, 147 00:06:52.315 --> 00:06:53.401 but it's very nice. 148 00:06:53.401 --> 00:06:57.568 Here, openfaces.org, primefaces.org, and RichFaces. 149 00:06:59.243 --> 00:07:01.040 And these are all great sites. 150 00:07:01.040 --> 00:07:03.204 They have documentation available. 151 00:07:03.204 --> 00:07:06.121 And they also have demos available. 152 00:07:06.971 --> 00:07:10.325 All right, so the next slide here is on JSF resources. 153 00:07:10.325 --> 00:07:14.612 The official website for JSF is located here on this link. 154 00:07:14.612 --> 00:07:16.926 This is a site that's hosted by Oracle. 155 00:07:16.926 --> 00:07:21.154 It contains tutorials, documentation, articles and so on. 156 00:07:21.154 --> 00:07:23.238 This is always a good place to start 157 00:07:23.238 --> 00:07:25.360 when you're doing work with JSF, just so 158 00:07:25.360 --> 00:07:27.160 you can see the official documentation, 159 00:07:27.160 --> 00:07:30.160 list of methods, so on and so forth. 160 00:07:32.430 --> 00:07:34.584 Also a nice thing about JSF, 161 00:07:34.584 --> 00:07:36.749 since it's a popular technology, 162 00:07:36.749 --> 00:07:39.492 is that there's a lot of information online about it. 163 00:07:39.492 --> 00:07:41.858 So you can find a lot of free tutorials online, 164 00:07:41.858 --> 00:07:44.145 simply just by doing a Google search. 165 00:07:44.145 --> 00:07:48.216 You can also go to Amazon and search for books on JSF. 166 00:07:48.216 --> 00:07:49.834 And there's plenty of books out here, 167 00:07:49.834 --> 00:07:52.362 so here's a little screenshot of me going to 168 00:07:52.362 --> 00:07:55.796 the Amazon site and typing in JavaServer Faces 169 00:07:55.796 --> 00:07:57.705 and it came up with x number of books. 170 00:07:57.705 --> 00:07:59.586 So there's a lot of good books out there. 171 00:07:59.586 --> 00:08:01.334 One thing I wanna caution you is that, 172 00:08:01.334 --> 00:08:05.040 make sure you find a recent book that's up to date. 173 00:08:05.040 --> 00:08:06.311 At the time of this video, 174 00:08:06.311 --> 00:08:10.058 the current version of JSF is JSF 2.2. 175 00:08:10.058 --> 00:08:12.903 So make sure you find a book that's based on 2.2. 176 00:08:12.903 --> 00:08:16.653 And in the screenshot here, these folks are up to date. 177 00:08:16.653 --> 00:08:19.730 Or something close, like maybe 2.1 or 2.0. 178 00:08:19.730 --> 00:08:23.114 But you wanna stay away from the really old books, 179 00:08:23.114 --> 00:08:24.397 like JSF 1, because there's been 180 00:08:24.397 --> 00:08:25.939 a lot of changes between there. 181 00:08:25.939 --> 00:08:28.797 So again, try and stay with books, 182 00:08:28.797 --> 00:08:31.130 here, with JS 2.2 or higher. 183 00:08:32.828 --> 00:08:35.260 All right, well that pretty much wraps up the video. 184 00:08:35.260 --> 00:08:36.607 What we did was we got an overview 185 00:08:36.607 --> 00:08:39.169 of the JavaServer Faces framework. 186 00:08:39.169 --> 00:08:40.346 We also discussed the idea 187 00:08:40.346 --> 00:08:43.192 of the Model-View-Controller design pattern. 188 00:08:43.192 --> 00:08:45.755 We looked at some of the benefits of JSF. 189 00:08:45.755 --> 00:08:47.166 And also we had a quick demo 190 00:08:47.166 --> 00:08:50.008 of the third-party JSF UI components. 191 00:08:50.008 --> 00:08:52.622 And finally we wrapped up with JSF resources, 192 00:08:52.622 --> 00:08:53.760 as far as Oracle's website 193 00:08:53.760 --> 00:08:56.677 and also books available on Amazon.