WEBVTT 1 00:00:01.398 --> 00:00:02.652 In this video, 2 00:00:02.652 --> 00:00:05.025 I'm gonna show you how to use the JSF DataTable 3 00:00:05.025 --> 00:00:06.358 to display data. 4 00:00:09.524 --> 00:00:11.723 We'll cover the following topics: 5 00:00:11.723 --> 00:00:13.743 We'll create a JSF data table, 6 00:00:13.743 --> 00:00:17.115 we'll also define a managed bean, 7 00:00:17.115 --> 00:00:21.373 and we'll pull it all together with the JSF page example. 8 00:00:21.373 --> 00:00:23.040 Alright, so a lot of good information, 9 00:00:23.040 --> 00:00:25.623 let's go ahead and get started. 10 00:00:28.270 --> 00:00:30.394 So the main objective of this video 11 00:00:30.394 --> 00:00:32.487 is to create a data table. 12 00:00:32.487 --> 00:00:34.293 So we already have student information 13 00:00:34.293 --> 00:00:37.081 and we wanna display it in a tabular format 14 00:00:37.081 --> 00:00:39.093 with rows and columns. 15 00:00:39.093 --> 00:00:42.221 First name, last name, email address. 16 00:00:42.221 --> 00:00:43.615 That's the end goal. 17 00:00:43.615 --> 00:00:45.240 And I'll show you how to build this table 18 00:00:45.240 --> 00:00:48.073 using the JSF DataTable component. 19 00:00:51.905 --> 00:00:54.798 Alright, so the JSF DataTable, 20 00:00:54.798 --> 00:00:57.216 you can use it to loop over data 21 00:00:57.216 --> 00:00:59.167 so just like in the previous videos, 22 00:00:59.167 --> 00:01:00.499 we can use this component 23 00:01:00.499 --> 00:01:04.744 to loop over arrays, lists, or collections. 24 00:01:04.744 --> 00:01:06.185 So any type of collection 25 00:01:06.185 --> 00:01:08.852 that's in the java.util package. 26 00:01:12.038 --> 00:01:15.898 Okay, here's our to do list, our step-by-step process. 27 00:01:15.898 --> 00:01:19.332 The first step is we want to create a managed bean. 28 00:01:19.332 --> 00:01:21.160 And then for our second step, 29 00:01:21.160 --> 00:01:25.327 we want to create a JSF page for looping over the data. 30 00:01:28.080 --> 00:01:30.384 Okay, so let's go ahead and start with step one, 31 00:01:30.384 --> 00:01:31.940 creating the managed bean. 32 00:01:31.940 --> 00:01:33.606 So we're gonna have a managed bean that'll provide 33 00:01:33.606 --> 00:01:35.983 a getter method for our list of data. 34 00:01:35.983 --> 00:01:38.947 Now, this is the exact same managed bean 35 00:01:38.947 --> 00:01:42.444 that we used in the previous video, StudentDataUtil. 36 00:01:42.444 --> 00:01:44.279 It's an application-scoped bean, 37 00:01:44.279 --> 00:01:46.354 we simply load up sample data, 38 00:01:46.354 --> 00:01:48.589 and return that as a list of students. 39 00:01:48.589 --> 00:01:51.068 So I'm not gonna go through all of the code for this 40 00:01:51.068 --> 00:01:52.705 because you've seen it all before 41 00:01:52.705 --> 00:01:54.379 in the previous video. 42 00:01:54.379 --> 00:01:55.944 So just note, it's a managed bean, 43 00:01:55.944 --> 00:01:57.885 we load sample data, 44 00:01:57.885 --> 00:02:01.218 and we simply return a list of students. 45 00:02:03.706 --> 00:02:06.761 Now here's our step two, creating the JSF page. 46 00:02:06.761 --> 00:02:09.341 So we're going to create a JSF page 47 00:02:09.341 --> 00:02:11.060 that's gonna loop over the data 48 00:02:11.060 --> 00:02:13.893 and generate an HTML table. 49 00:02:13.893 --> 00:02:17.245 And we'll accomplish this by using the DataTable component 50 00:02:17.245 --> 00:02:19.622 in the JSF library. 51 00:02:19.622 --> 00:02:23.777 Alright, so on line 17, we have this h:dataTable, 52 00:02:23.777 --> 00:02:26.400 so again a component from the JSF library. 53 00:02:26.400 --> 00:02:30.472 We have value="#{studentDataUtil.students}". 54 00:02:30.472 --> 00:02:34.639 That simply calls our JSF managed bean to give us our data. 55 00:02:35.606 --> 00:02:38.601 And then we'll have var="tempStudent". 56 00:02:38.601 --> 00:02:40.853 that's simply our temporary variable that we'll use 57 00:02:40.853 --> 00:02:43.356 as we loop over that collection. 58 00:02:43.356 --> 00:02:45.051 We set border="1". 59 00:02:45.051 --> 00:02:48.415 That's simply the size of the border for the table. 60 00:02:48.415 --> 00:02:52.418 Then, in lines 20 through 25, or 26 actually, 61 00:02:52.418 --> 00:02:54.133 we set up a column. 62 00:02:54.133 --> 00:02:57.156 So the column name on line 22 is First Name, 63 00:02:57.156 --> 00:02:58.955 and then the actual value 64 00:02:58.955 --> 00:03:01.793 for the row is tempStudent.firstName. 65 00:03:01.793 --> 00:03:04.907 We do a similar thing on lines 28 through 34. 66 00:03:04.907 --> 00:03:08.478 We set up a column, Last Name, and then the actual value 67 00:03:08.478 --> 00:03:11.781 on line 33 is tempStudent.lastName. 68 00:03:11.781 --> 00:03:13.781 And that's basically it. 69 00:03:14.666 --> 00:03:15.885 And that's the basic approach, 70 00:03:15.885 --> 00:03:17.537 you simply define a column 71 00:03:17.537 --> 00:03:20.242 and you specify the value that'll appear in the column. 72 00:03:20.242 --> 00:03:21.745 So we just went through the process there 73 00:03:21.745 --> 00:03:24.143 for the first name and last name 74 00:03:24.143 --> 00:03:26.450 and you simply repeat this over and over again 75 00:03:26.450 --> 00:03:29.367 for all of your additional columns. 76 00:03:34.768 --> 00:03:38.935 Alright, so let's go ahead and look at a JSF table demo. 77 00:03:41.144 --> 00:03:43.523 Alright, so let's go ahead and move into the clips. 78 00:03:43.523 --> 00:03:46.042 I'm gonna make use of that same project as before, 79 00:03:46.042 --> 00:03:49.192 list-and-table-demo, this source code is available 80 00:03:49.192 --> 00:03:50.745 in the source code that you downloaded 81 00:03:50.745 --> 00:03:52.578 earlier in the course. 82 00:03:53.474 --> 00:03:56.141 I'll simply expand this project. 83 00:03:57.044 --> 00:03:59.111 I'll go ahead and look at our Java source code for us 84 00:03:59.111 --> 00:04:00.778 for our managed bean 85 00:04:02.298 --> 00:04:05.915 and I'll take a look at this StudentDataUtil.java 86 00:04:05.915 --> 00:04:09.959 and I'll go ahead and open up this file. 87 00:04:09.959 --> 00:04:10.792 And again, remember, 88 00:04:10.792 --> 00:04:14.324 this is the same code that we saw in the previous video. 89 00:04:14.324 --> 00:04:16.891 So it's simply a managed bean that's application-scoped. 90 00:04:16.891 --> 00:04:19.238 So I'm not gonna go through all the gory details here, 91 00:04:19.238 --> 00:04:20.529 'cause we've seen this before. 92 00:04:20.529 --> 00:04:22.207 I'm just gonna highlight it. 93 00:04:22.207 --> 00:04:23.820 So we load sample data, 94 00:04:23.820 --> 00:04:26.694 we simply prepopulate with some students, 95 00:04:26.694 --> 00:04:28.676 and then 27 through 29, 96 00:04:28.676 --> 00:04:30.517 we simply have a getter method. 97 00:04:30.517 --> 00:04:32.638 This is the method that the JSF page will use 98 00:04:32.638 --> 00:04:34.589 to retrieve the data. 99 00:04:34.589 --> 00:04:35.767 And that's basically it. 100 00:04:35.767 --> 00:04:39.934 So the same code that we saw from the previous video. 101 00:04:43.015 --> 00:04:45.001 Alright, so let's go ahead and move to step two. 102 00:04:45.001 --> 00:04:48.091 So step two is making use of our JSF page. 103 00:04:48.091 --> 00:04:50.366 So it's in our WebContent folder, 104 00:04:50.366 --> 00:04:53.866 and I'll look at student_table_demo.xhtml. 105 00:04:57.841 --> 00:04:59.030 So this is the JSF page, 106 00:04:59.030 --> 00:05:02.530 it's gonna generate the HTML table for us. 107 00:05:04.597 --> 00:05:08.264 So I'll scroll down to line 17, h:dataTable, 108 00:05:09.660 --> 00:05:12.612 so that's the JSF component. 109 00:05:12.612 --> 00:05:16.237 I specify value="#{studentDataUtil.students}". 110 00:05:16.237 --> 00:05:18.615 It'll call the getter method on that managed bean 111 00:05:18.615 --> 00:05:22.049 and then var="tempStudent", our temporary variable. 112 00:05:22.049 --> 00:05:25.169 Lines 20 through 26, we simply define the first column 113 00:05:25.169 --> 00:05:29.336 for first name, the value's gonna be tempStudent.firstName. 114 00:05:33.302 --> 00:05:35.505 And then we move down to the next column here, 115 00:05:35.505 --> 00:05:39.124 column Last Name, and the actual value for that column 116 00:05:39.124 --> 00:05:41.733 is tempStudent.lastName. 117 00:05:41.733 --> 00:05:44.122 So again, we simply define the columns, 118 00:05:44.122 --> 00:05:48.289 and we define the data that's gonna appear in those columns. 119 00:05:49.958 --> 00:05:51.953 And then I'll scroll down, it's just more of the same 120 00:05:51.953 --> 00:05:54.505 for all the additional columns here in our example. 121 00:05:54.505 --> 00:05:56.687 So we also have an email column 122 00:05:56.687 --> 00:05:59.705 and on line 41 we say tempStudent.email. 123 00:05:59.705 --> 00:06:01.703 So here we simply define the three columns 124 00:06:01.703 --> 00:06:04.844 that this HTML table will make use out of. 125 00:06:04.844 --> 00:06:06.011 And that's it. 126 00:06:11.063 --> 00:06:13.652 Alright, so let's go ahead and run the application. 127 00:06:13.652 --> 00:06:18.142 I'll select this file here, student_table_demo.xhtml. 128 00:06:18.142 --> 00:06:21.088 I'll right-click, I'll choose Run As, 129 00:06:21.088 --> 00:06:23.588 and I'll choose Run on Server. 130 00:06:27.042 --> 00:06:28.829 And this'll run my application 131 00:06:28.829 --> 00:06:30.170 and we'll see the output here 132 00:06:30.170 --> 00:06:31.564 for Student Table Demo. 133 00:06:31.564 --> 00:06:35.310 So note here, this JSF component generated a table for us 134 00:06:35.310 --> 00:06:37.334 and we specified each one of the columns, 135 00:06:37.334 --> 00:06:39.372 First Name, Last Name, Email. 136 00:06:39.372 --> 00:06:41.639 We also specified the data that would appear 137 00:06:41.639 --> 00:06:43.479 in the actual table. 138 00:06:43.479 --> 00:06:44.443 So that's it. 139 00:06:44.443 --> 00:06:47.003 That's how you use the JSF DataTable component. 140 00:06:47.003 --> 00:06:47.836 Great job! 141 00:06:52.785 --> 00:06:55.719 Okay, so we can go ahead and wrap up this video. 142 00:06:55.719 --> 00:06:58.889 In this video we learned how to create a JSF data table. 143 00:06:58.889 --> 00:07:00.941 We started off by defining our managed bean 144 00:07:00.941 --> 00:07:02.801 and then we put it all together 145 00:07:02.801 --> 00:07:05.384 by creating a JSF page example. 146 00:07:06.668 --> 00:07:07.501 Great job!