WEBVTT

1
00:00:01.335 --> 00:00:03.628
<v Instructor>Hey in this video we're going to learn</v>

2
00:00:03.628 --> 00:00:06.545
how to display data with JSF lists.

3
00:00:09.995 --> 00:00:12.741
We'll cover the following topics:

4
00:00:12.741 --> 00:00:15.852
We'll learn how to create JSF UI lists.

5
00:00:15.852 --> 00:00:18.640
We'll also define Managed Beans.

6
00:00:18.640 --> 00:00:21.598
And then we'll wrap it all together with

7
00:00:21.598 --> 00:00:24.462
the full JSF page example.

8
00:00:24.462 --> 00:00:26.145
Alright, so a lot of good stuff here.

9
00:00:26.145 --> 00:00:28.728
Let's go ahead and get started.

10
00:00:30.898 --> 00:00:34.341
The main objective for this video is to build JSF lists

11
00:00:34.341 --> 00:00:36.799
or display data using JSF lists.

12
00:00:36.799 --> 00:00:38.845
So on this example here with the screenshot

13
00:00:38.845 --> 00:00:41.552
we're going to display a list of students

14
00:00:41.552 --> 00:00:44.379
and we're going to display them using a bullet list.

15
00:00:44.379 --> 00:00:45.852
So I'll show you how to make use of

16
00:00:45.852 --> 00:00:48.352
the JSF components to do this.

17
00:00:52.038 --> 00:00:54.619
So what we'll do is we'll make use of JSF tags

18
00:00:54.619 --> 00:00:56.584
to loop over our data.

19
00:00:56.584 --> 00:01:00.562
So these JSF tags, they can loop over various types of data

20
00:01:00.562 --> 00:01:05.279
like arrays, lists, or any type of collection in

21
00:01:05.279 --> 00:01:07.167
the java.util package.

22
00:01:07.167 --> 00:01:10.528
And I'll show you how to write code for returning the list

23
00:01:10.528 --> 00:01:14.278
and also iterating and looping over the list.

24
00:01:15.900 --> 00:01:18.567
Now as I've mentioned before, if you've followed along

25
00:01:18.567 --> 00:01:22.130
my videos so far you know how I love to do lists.

26
00:01:22.130 --> 00:01:24.790
I like to keep things simple and straightforward.

27
00:01:24.790 --> 00:01:26.795
So here we're going to have our to do list,

28
00:01:26.795 --> 00:01:30.522
the first thing we need to do is create a managed bean

29
00:01:30.522 --> 00:01:32.077
and then the second thing we need to do

30
00:01:32.077 --> 00:01:35.023
is create a JSF page for looping over the data

31
00:01:35.023 --> 00:01:37.356
and displaying it in a list.

32
00:01:40.726 --> 00:01:43.131
So let's start off with our step one right here,

33
00:01:43.131 --> 00:01:44.565
creating a managed bean.

34
00:01:44.565 --> 00:01:46.450
So what we're going to do is create this managed bean

35
00:01:46.450 --> 00:01:49.561
that's going to provide data for our application.

36
00:01:49.561 --> 00:01:51.652
So here in the source code,

37
00:01:51.652 --> 00:01:53.816
line nines through eleven we have this class

38
00:01:53.816 --> 00:01:57.045
called studentDataUtil, it's our managed bean.

39
00:01:57.045 --> 00:02:00.486
On line ten note this bean is applicationScoped

40
00:02:00.486 --> 00:02:02.414
so it's going to be shared

41
00:02:02.414 --> 00:02:04.258
across all users of our application.

42
00:02:04.258 --> 00:02:05.818
And this is a very common used case

43
00:02:05.818 --> 00:02:08.476
for making applicationScoped beans.

44
00:02:08.476 --> 00:02:10.070
Now moving down to line thirteen,

45
00:02:10.070 --> 00:02:11.835
we set up our variable for students

46
00:02:11.835 --> 00:02:14.245
simply going to be a list of student objects.

47
00:02:14.245 --> 00:02:17.933
Lines fifteen through seventeen is our constructor,

48
00:02:17.933 --> 00:02:19.533
our no arg constructor.

49
00:02:19.533 --> 00:02:22.893
And here we simply call them at the loadSampleData.

50
00:02:22.893 --> 00:02:24.654
So this loadSampleData method's defined

51
00:02:24.654 --> 00:02:27.729
in lines nineteen through twenty five.

52
00:02:27.729 --> 00:02:31.130
So here we're going to simply pre populate the list

53
00:02:31.130 --> 00:02:32.237
with some students.

54
00:02:32.237 --> 00:02:33.631
So create some students like

55
00:02:33.631 --> 00:02:36.916
Mary Public, John Doe, Ajay Rao.

56
00:02:36.916 --> 00:02:40.187
We're just going to hard code or pre populate the data.

57
00:02:40.187 --> 00:02:41.623
Don't worry about the details right now,

58
00:02:41.623 --> 00:02:43.629
as far as, database interaction.

59
00:02:43.629 --> 00:02:45.957
We'll cover database in a later section.

60
00:02:45.957 --> 00:02:47.012
Right now we'll just focus on

61
00:02:47.012 --> 00:02:49.593
pre populating it with some data.

62
00:02:49.593 --> 00:02:51.882
Now in lines twenty seven through twenty nine

63
00:02:51.882 --> 00:02:53.289
we define the getter method.

64
00:02:53.289 --> 00:02:54.478
So this is the getter method that will

65
00:02:54.478 --> 00:02:57.100
actually be used by the JSF page.

66
00:02:57.100 --> 00:03:00.135
They call getStudents and will return that list of

67
00:03:00.135 --> 00:03:03.742
student objects that we just pre populated in this bean.

68
00:03:03.742 --> 00:03:05.828
That's basically all the code here for our bean.

69
00:03:05.828 --> 00:03:08.324
It's our StudentDataUtil that will give us access

70
00:03:08.324 --> 00:03:10.991
to data for our JSF application.

71
00:03:16.108 --> 00:03:19.343
Okay, so now we need to look at our JSF page for looping.

72
00:03:19.343 --> 00:03:20.530
That's step two.

73
00:03:20.530 --> 00:03:22.577
So we're going to create a JSF page that's going

74
00:03:22.577 --> 00:03:23.969
to loop over our data

75
00:03:23.969 --> 00:03:27.213
and it's going to generate a HTML unordered list

76
00:03:27.213 --> 00:03:29.915
using the HTML tag, ul.

77
00:03:29.915 --> 00:03:31.062
So let's look at the code here for

78
00:03:31.062 --> 00:03:34.260
this file: studentlistdemo.xhtml.

79
00:03:34.260 --> 00:03:36.966
I'd like to focus in on this section here for the ul.

80
00:03:36.966 --> 00:03:38.402
So this is our unordered list.

81
00:03:38.402 --> 00:03:40.204
This is going to give us a bullet list.

82
00:03:40.204 --> 00:03:42.291
So inside of the ul tags

83
00:03:42.291 --> 00:03:45.118
we're going to make use of a JSF component here

84
00:03:45.118 --> 00:03:46.556
ui:repeat.

85
00:03:46.556 --> 00:03:50.316
This will basically do a loop over a collection of data.

86
00:03:50.316 --> 00:03:53.590
So think of it as for loop or a wow loop

87
00:03:53.590 --> 00:03:57.729
and so we say ui repeat we give var temp student.

88
00:03:57.729 --> 00:04:00.680
That's the temporary variable we'll have for each iteration

89
00:04:00.680 --> 00:04:01.867
through the loop.

90
00:04:01.867 --> 00:04:06.213
And then value equals studentDataUtil.students.

91
00:04:06.213 --> 00:04:09.574
That's our reference to our managed bean.

92
00:04:09.574 --> 00:04:13.170
And .students, it's going to call getstudents.

93
00:04:13.170 --> 00:04:15.712
So that's going to give us that collection of student

94
00:04:15.712 --> 00:04:17.594
objects we can iterate over.

95
00:04:17.594 --> 00:04:20.835
Then inside of the loop we have the li

96
00:04:20.835 --> 00:04:23.375
and we have tempStudent.firstName

97
00:04:23.375 --> 00:04:25.878
tempStudent.lastName.

98
00:04:25.878 --> 00:04:28.083
Now we'll just continue looping over and over

99
00:04:28.083 --> 00:04:30.253
and at the end we'll have a bullet list

100
00:04:30.253 --> 00:04:33.409
like in the bottom right corner for our students

101
00:04:33.409 --> 00:04:36.409
Mary Public, John Doe, and Ajay Rao.

102
00:04:37.914 --> 00:04:39.386
So there's a good code snippet

103
00:04:39.386 --> 00:04:42.053
for looping over our collection.

104
00:04:44.425 --> 00:04:46.723
So let's go ahead and move into eclipse.

105
00:04:46.723 --> 00:04:48.895
I'm going to make use of this project

106
00:04:48.895 --> 00:04:50.451
list and tables demo.

107
00:04:50.451 --> 00:04:52.580
This project is available in the source code

108
00:04:52.580 --> 00:04:56.080
that you downloaded earlier in the course.

109
00:04:58.650 --> 00:05:00.206
I'm going to start off with step one

110
00:05:00.206 --> 00:05:01.927
looking at our managed bean.

111
00:05:01.927 --> 00:05:04.101
So I'm moving to our java source directory

112
00:05:04.101 --> 00:05:05.287
and our package.

113
00:05:05.287 --> 00:05:09.260
And I'll take a look at this StudentDataUtil.java.

114
00:05:09.260 --> 00:05:11.930
So again this is this managed bean that's going

115
00:05:11.930 --> 00:05:16.097
to provide data for us to use in our JSF application.

116
00:05:17.748 --> 00:05:20.415
Alright expanding a window here.

117
00:05:22.804 --> 00:05:26.573
So this our ManagedBean StudentDataUtil.

118
00:05:26.573 --> 00:05:27.924
And remember on line ten

119
00:05:27.924 --> 00:05:30.462
we sat this up as being ApplicationScoped.

120
00:05:30.462 --> 00:05:33.329
So it's going to be shared by all users of the application.

121
00:05:33.329 --> 00:05:35.419
And again a very good used case,

122
00:05:35.419 --> 00:05:37.752
or a very common used case for making use of

123
00:05:37.752 --> 00:05:40.995
DataUtils and ApplicationScopes.

124
00:05:40.995 --> 00:05:44.828
On line thirteen we set up a list of students.

125
00:05:46.038 --> 00:05:48.696
Lines fifteen through seventeen's our constructor.

126
00:05:48.696 --> 00:05:51.446
We simply call it loadSampleData.

127
00:05:56.562 --> 00:05:58.239
And then lines nineteen through twenty five

128
00:05:58.239 --> 00:06:00.327
we simply loadSampleData.

129
00:06:00.327 --> 00:06:02.376
So we construct ArrayList and then we just

130
00:06:02.376 --> 00:06:04.798
pre populate it with three students.

131
00:06:04.798 --> 00:06:07.465
Mary Public, John Doe, Ajay Rao.

132
00:06:11.852 --> 00:06:14.063
And then on the bottom here we have our getStudents.

133
00:06:14.063 --> 00:06:16.972
It's a public met that returns a list of student objects.

134
00:06:16.972 --> 00:06:20.325
The JSF page who I should call this method to retrieve

135
00:06:20.325 --> 00:06:23.992
the data and use it inside of that JSF page.

136
00:06:26.096 --> 00:06:30.263
This all looks really good here for our managed bean.

137
00:06:34.329 --> 00:06:36.174
And also just for completeness here,

138
00:06:36.174 --> 00:06:38.699
we're returning a list of student objects.

139
00:06:38.699 --> 00:06:40.376
You may wonder, well what is a student object.

140
00:06:40.376 --> 00:06:42.058
Well it's simply a managed bean.

141
00:06:42.058 --> 00:06:43.656
It has three fields.

142
00:06:43.656 --> 00:06:45.131
First name, last name, and email.

143
00:06:45.131 --> 00:06:47.548
We've seen this on a lot of previous videos,

144
00:06:47.548 --> 00:06:50.211
but I'll just show it to you again as a quick refresher.

145
00:06:50.211 --> 00:06:54.228
It has a constructor and it has the normal getter sentiment.

146
00:06:54.228 --> 00:06:57.013
So it's really just very simple bean that simply holds

147
00:06:57.013 --> 00:07:01.180
the first name, last name, and email address of the student.

148
00:07:07.968 --> 00:07:09.768
Alright, so let's go ahead and look at a JSF page.

149
00:07:09.768 --> 00:07:13.375
So the JSF page is in the web content folder.

150
00:07:13.375 --> 00:07:17.125
And the file is called studentlistdemo.xhtml.

151
00:07:21.286 --> 00:07:23.214
So I'll go ahead and open up this file.

152
00:07:23.214 --> 00:07:25.799
I'll expand it so we can take a look at everything.

153
00:07:25.799 --> 00:07:28.670
Scroll down, this is kind of a standard JSF page.

154
00:07:28.670 --> 00:07:30.967
I won't harp on any of this stuff at the beginning,

155
00:07:30.967 --> 00:07:33.795
but what I will do is I'll highlight this section here,

156
00:07:33.795 --> 00:07:35.893
line fifteen through twenty one.

157
00:07:35.893 --> 00:07:38.355
This is our ul, our unordered list.

158
00:07:38.355 --> 00:07:39.255
Okay.

159
00:07:39.255 --> 00:07:41.427
And inside of this list we care going to make use

160
00:07:41.427 --> 00:07:42.780
of this ui repeat.

161
00:07:42.780 --> 00:07:45.237
So this ui repeat is basically going to be our loop.

162
00:07:45.237 --> 00:07:50.230
Like a for loop or a wow loop looping over our data.

163
00:07:50.230 --> 00:07:52.397
And while we're looping over the data we have

164
00:07:52.397 --> 00:07:56.064
tempStudent.firstName, tempStudent.lastName.

165
00:07:57.441 --> 00:07:59.118
So that's basically our ui repeat.

166
00:07:59.118 --> 00:08:00.310
So we loop over the data.

167
00:08:00.310 --> 00:08:02.482
We have a var tempStudent.

168
00:08:02.482 --> 00:08:03.632
That's our temporary variable.

169
00:08:03.632 --> 00:08:06.982
Then the value studentDataUtil.students

170
00:08:06.982 --> 00:08:11.560
that calls the get students method on our managed bean.

171
00:08:11.560 --> 00:08:12.830
So this looks really good so far.

172
00:08:12.830 --> 00:08:13.663
Good job.

173
00:08:16.560 --> 00:08:19.389
Now let's go ahead and run the application.

174
00:08:19.389 --> 00:08:21.478
I'll move here and I'll access this file

175
00:08:21.478 --> 00:08:24.136
studentlistdemo.xhtml.

176
00:08:24.136 --> 00:08:26.967
I'll just do a right click and I'll choose run as

177
00:08:26.967 --> 00:08:28.384
and run on sever.

178
00:08:31.266 --> 00:08:33.155
The system is going to prompt me which server to use.

179
00:08:33.155 --> 00:08:34.655
I'll choose Tomcat

180
00:08:35.902 --> 00:08:38.854
and I'll say always use this server when running.

181
00:08:38.854 --> 00:08:40.575
Hit finish.

182
00:08:40.575 --> 00:08:44.742
And I'm going to go ahead and start up my application.

183
00:08:45.864 --> 00:08:48.162
And then we make it to the page here studentListDemo.

184
00:08:48.162 --> 00:08:49.186
So this works our really good.

185
00:08:49.186 --> 00:08:50.866
So this is our JSF page.

186
00:08:50.866 --> 00:08:53.405
In the background it's making use of our managed bean.

187
00:08:53.405 --> 00:08:56.229
It's getting a list of students from that managed bean.

188
00:08:56.229 --> 00:08:58.441
And then it's using that ui repeat command

189
00:08:58.441 --> 00:09:00.818
to simply loop over that data and give us

190
00:09:00.818 --> 00:09:02.212
a bullet list.

191
00:09:02.212 --> 00:09:03.440
So this looks really good.

192
00:09:03.440 --> 00:09:04.273
Good job.

193
00:09:08.149 --> 00:09:11.014
Alrighty, so we can go ahead and wrap up this video.

194
00:09:11.014 --> 00:09:13.587
So in this video we created JSF ui lists.

195
00:09:13.587 --> 00:09:15.920
We also defined our managed beans.

196
00:09:15.920 --> 00:09:19.567
And we also put it all together by creating a JSF page

197
00:09:19.567 --> 00:09:22.473
for displaying the output as a list.

198
00:09:22.473 --> 00:09:23.825
So this is all good stuff.

199
00:09:23.825 --> 00:09:24.742
Great job.