WEBVTT

1
00:00:01.391 --> 00:00:02.820
<v Instructor>Hey, welcome back.</v>

2
00:00:02.820 --> 00:00:04.823
In this video, I'm gonna show you

3
00:00:04.823 --> 00:00:07.323
how to pre-populate JSF forms.

4
00:00:12.037 --> 00:00:15.373
So we'll start off with the demo of pre-populating,

5
00:00:15.373 --> 00:00:18.822
then we'll take a look at how to load form data.

6
00:00:18.822 --> 00:00:20.421
And then finally, we'll wrap it up

7
00:00:20.421 --> 00:00:23.253
with the full JSF page example.

8
00:00:23.253 --> 00:00:25.075
Alright, some great stuff here,

9
00:00:25.075 --> 00:00:27.325
let's go ahead and dive in.

10
00:00:29.136 --> 00:00:30.148
Alright, so here's our demo.

11
00:00:30.148 --> 00:00:33.066
So, basically when the form is first loaded,

12
00:00:33.066 --> 00:00:36.628
it'll already have data pre-populated in it.

13
00:00:36.628 --> 00:00:37.461
So you can think of it

14
00:00:37.461 --> 00:00:39.235
as like maybe editing a student or something.

15
00:00:39.235 --> 00:00:42.534
So, we'll have the student's first name, last name,

16
00:00:42.534 --> 00:00:45.195
and also their selected programming language.

17
00:00:45.195 --> 00:00:47.162
This information will all be pre-populated

18
00:00:47.162 --> 00:00:50.079
by the JSF system and managed bean.

19
00:00:51.917 --> 00:00:53.922
Alright, so let's go ahead and look at the coding for this

20
00:00:53.922 --> 00:00:55.672
and see how it works.

21
00:00:58.198 --> 00:01:00.005
Now, when a form is first loaded,

22
00:01:00.005 --> 00:01:03.972
JSF will call the getter method for each property.

23
00:01:03.972 --> 00:01:05.956
Now this is some information that I eluded to

24
00:01:05.956 --> 00:01:07.776
earlier in the video series,

25
00:01:07.776 --> 00:01:09.803
but now we'll actually cover it in detail.

26
00:01:09.803 --> 00:01:12.043
And this is how JSF can actually pre-load

27
00:01:12.043 --> 00:01:15.293
or pre-populate some of your form data.

28
00:01:18.806 --> 00:01:22.846
Okay, so let's go ahead and start with a code example.

29
00:01:22.846 --> 00:01:25.578
So here we have our JSF form,

30
00:01:25.578 --> 00:01:27.936
and then we have the first name label

31
00:01:27.936 --> 00:01:29.449
and we make use of the input text

32
00:01:29.449 --> 00:01:31.921
where they can enter the user's first name.

33
00:01:31.921 --> 00:01:34.456
And then also we have the value referencing

34
00:01:34.456 --> 00:01:38.539
a managed bean, so we have studentFive.firstName.

35
00:01:40.776 --> 00:01:42.530
Now what really happens in the background

36
00:01:42.530 --> 00:01:45.293
is that when this page or form is actually loaded,

37
00:01:45.293 --> 00:01:46.939
the first thing that JSF will do

38
00:01:46.939 --> 00:01:50.951
is it'll call studentFive.getfirstname.

39
00:01:50.951 --> 00:01:52.572
So it'll check that managed bean

40
00:01:52.572 --> 00:01:54.423
and access that property.

41
00:01:54.423 --> 00:01:56.392
If the property is not null,

42
00:01:56.392 --> 00:01:58.336
then the value will be pre-populated here

43
00:01:58.336 --> 00:02:00.318
in this form field.

44
00:02:00.318 --> 00:02:02.085
So, when the page is loaded,

45
00:02:02.085 --> 00:02:05.335
JSF will call studentFuve.getfirstname.

46
00:02:06.218 --> 00:02:07.866
Now the normal process still works,

47
00:02:07.866 --> 00:02:12.033
meaning when we submit, it'll call studentFive.setfirstname.

48
00:02:14.271 --> 00:02:15.983
Just like in all of our previous videos,

49
00:02:15.983 --> 00:02:18.132
we'll pull it all together with an example.

50
00:02:18.132 --> 00:02:19.170
So on the top left we'll have

51
00:02:19.170 --> 00:02:22.416
our student five form at xhtml.

52
00:02:22.416 --> 00:02:24.110
In the center we'll have a managed bean,

53
00:02:24.110 --> 00:02:25.847
we'll call it Student Five,

54
00:02:25.847 --> 00:02:28.180
to make it unique from the other beans,

55
00:02:28.180 --> 00:02:31.003
and then at the bottom we'll have our response page,

56
00:02:31.003 --> 00:02:33.336
student_five_response.xhtml.

57
00:02:34.861 --> 00:02:37.410
Alright, so here's the information for our to do list.

58
00:02:37.410 --> 00:02:38.243
The first thing we need to do

59
00:02:38.243 --> 00:02:41.227
is add a new managed bean class called student five.

60
00:02:41.227 --> 00:02:42.702
We'll have three fields:

61
00:02:42.702 --> 00:02:46.945
First name, last name and favorite language.

62
00:02:46.945 --> 00:02:50.116
And then we'll modify the code to pre-populate the data

63
00:02:50.116 --> 00:02:52.735
in the bean, and I'll show you the actual coding techniques

64
00:02:52.735 --> 00:02:54.402
to make that happen.

65
00:02:56.155 --> 00:02:57.312
Alright, so good stuff here,

66
00:02:57.312 --> 00:02:59.979
let's go ahead and start coding.

67
00:03:03.056 --> 00:03:04.751
Let's move into Eclipse.

68
00:03:04.751 --> 00:03:05.916
What we're gonna do is make use

69
00:03:05.916 --> 00:03:08.542
of that existing project so far, Hello World,

70
00:03:08.542 --> 00:03:12.709
and that was created in some of our previous videos.

71
00:03:13.738 --> 00:03:15.973
What I'd like to do is take a look at the form pages

72
00:03:15.973 --> 00:03:17.082
that we'll use here.

73
00:03:17.082 --> 00:03:21.249
So here we'll start with the student_five_form.xhtml.

74
00:03:23.010 --> 00:03:24.353
So this form is very similar,

75
00:03:24.353 --> 00:03:29.138
we've seen a lot of this stuff before for student five.

76
00:03:29.138 --> 00:03:31.795
In our forms section on line 15,

77
00:03:31.795 --> 00:03:35.471
we have our first name and our last name,

78
00:03:35.471 --> 00:03:38.098
and the programming languages.

79
00:03:38.098 --> 00:03:41.214
So that's the basics there of the form.

80
00:03:41.214 --> 00:03:43.683
So now scrolling back up to first name,

81
00:03:43.683 --> 00:03:45.877
this is where we set up the first name label,

82
00:03:45.877 --> 00:03:48.243
and we set up studentFive.firstname.

83
00:03:48.243 --> 00:03:49.862
And again, when the form is loaded

84
00:03:49.862 --> 00:03:52.933
they'll call studentFive.getfirstname.

85
00:03:52.933 --> 00:03:54.731
A similar thing here for last name.

86
00:03:54.731 --> 00:03:55.564
When the form is loaded,

87
00:03:55.564 --> 00:03:57.703
they'll call studentFive.getlastname.

88
00:03:57.703 --> 00:03:58.975
So those are the getters.

89
00:03:58.975 --> 00:04:01.784
Now the normal work happens as far as submitting and saving,

90
00:04:01.784 --> 00:04:06.518
but this is for getting or pre-populating the form data.

91
00:04:06.518 --> 00:04:07.500
Well the next thing we need to do

92
00:04:07.500 --> 00:04:08.807
is actually create a new class

93
00:04:08.807 --> 00:04:11.309
for that managed bean, student five.

94
00:04:11.309 --> 00:04:13.412
So I'll go into my Java source directory

95
00:04:13.412 --> 00:04:14.829
under my package.

96
00:04:15.870 --> 00:04:18.209
I'll simple do a right click,

97
00:04:18.209 --> 00:04:20.626
and I'll say New, Java Class.

98
00:04:25.658 --> 00:04:27.410
And this will bring up a dialogue.

99
00:04:27.410 --> 00:04:30.888
The name of the class is Student Five.

100
00:04:30.888 --> 00:04:32.845
And I'll keep all the other defaults.

101
00:04:32.845 --> 00:04:34.183
And once you're happy with that,

102
00:04:34.183 --> 00:04:37.850
you can move down and hit the Finish button.

103
00:04:40.232 --> 00:04:42.683
Great, so this creates a basic shell of a class.

104
00:04:42.683 --> 00:04:44.761
We're gonna make use of it as a managed bean,

105
00:04:44.761 --> 00:04:46.339
and we've done all this before, right?

106
00:04:46.339 --> 00:04:48.943
We go through and simply do an import

107
00:04:48.943 --> 00:04:51.313
on javax.faces.bean,

108
00:04:51.313 --> 00:04:53.182
and then we'll drop in our fields here

109
00:04:53.182 --> 00:04:56.550
for first name, last name and favorite language.

110
00:04:56.550 --> 00:04:59.300
We've done all this stuff before.

111
00:05:03.223 --> 00:05:04.200
And what I'd like to do is go through

112
00:05:04.200 --> 00:05:08.367
and actually create a no argument constructor here.

113
00:05:10.155 --> 00:05:11.372
So, the no argument constructor,

114
00:05:11.372 --> 00:05:14.298
the same name as the class, student five,

115
00:05:14.298 --> 00:05:16.552
and it does nothing for right now.

116
00:05:16.552 --> 00:05:19.342
Then, we'll also make use of the getters and setters here.

117
00:05:19.342 --> 00:05:21.275
So we use that same Eclipse technique.

118
00:05:21.275 --> 00:05:23.203
I'll simply do a right click.

119
00:05:23.203 --> 00:05:24.706
I'll go to source.

120
00:05:24.706 --> 00:05:28.456
And I'll choose Generate Getters and Setters.

121
00:05:32.283 --> 00:05:34.137
This will bring up our dialogue,

122
00:05:34.137 --> 00:05:36.699
and we simply go through and choose the items we want here.

123
00:05:36.699 --> 00:05:39.240
So we'll choose all of them, favorite language,

124
00:05:39.240 --> 00:05:41.587
first name and last name.

125
00:05:41.587 --> 00:05:44.170
We'll keep all of the defaults.

126
00:05:46.142 --> 00:05:48.288
And then we'll simply hit OK.

127
00:05:48.288 --> 00:05:50.127
Alright, great, so Eclipse did all the work,

128
00:05:50.127 --> 00:05:52.190
it generated all those getters and setters for me

129
00:05:52.190 --> 00:05:56.107
for frit name, last name and favorite language.

130
00:05:59.345 --> 00:06:01.354
So now what I need to do is modify the constructor

131
00:06:01.354 --> 00:06:03.954
to pre-populate the data in the bean.

132
00:06:03.954 --> 00:06:06.254
So inside of our constructor, I'll set up code

133
00:06:06.254 --> 00:06:09.004
for pre-populating the bean data.

134
00:06:09.966 --> 00:06:12.039
So here I'll set first name equals Mary,

135
00:06:12.039 --> 00:06:13.358
last name is public,

136
00:06:13.358 --> 00:06:16.157
and the favorite language of Ruby.

137
00:06:16.157 --> 00:06:17.063
And that's really all we have to do.

138
00:06:17.063 --> 00:06:19.196
So the first time they load this bean,

139
00:06:19.196 --> 00:06:20.546
then they'll actually call the getter methods,

140
00:06:20.546 --> 00:06:22.121
and it'll actually read this information.

141
00:06:22.121 --> 00:06:24.691
So that's one way of pre-populating.

142
00:06:24.691 --> 00:06:26.176
Another way is that we could also

143
00:06:26.176 --> 00:06:28.425
read this information from a database.

144
00:06:28.425 --> 00:06:30.415
And I'll cover all those gory details

145
00:06:30.415 --> 00:06:32.340
as far as database integration

146
00:06:32.340 --> 00:06:34.272
in the premium version of the course.

147
00:06:34.272 --> 00:06:36.306
So don't worry, you'll get all the details of it

148
00:06:36.306 --> 00:06:37.973
later in the course.

149
00:06:43.968 --> 00:06:45.395
Excellent, so now that we have the code in place,

150
00:06:45.395 --> 00:06:47.485
we can go ahead and run the application,

151
00:06:47.485 --> 00:06:49.463
and we can see that the first time we load the form,

152
00:06:49.463 --> 00:06:51.382
the data is already pre-populated.

153
00:06:51.382 --> 00:06:54.153
So again, remember when it makes use of that input text

154
00:06:54.153 --> 00:06:57.195
and the value, It'll actually call the getter methods.

155
00:06:57.195 --> 00:06:59.513
And so in the constructor, we've already pre-populated

156
00:06:59.513 --> 00:07:01.957
that information, and that's how we get the values here

157
00:07:01.957 --> 00:07:04.076
for first name, last name,

158
00:07:04.076 --> 00:07:06.975
and the favorite programming language.

159
00:07:06.975 --> 00:07:08.857
So this is very good.

160
00:07:08.857 --> 00:07:09.690
Good job.

161
00:07:16.909 --> 00:07:18.838
So we made some really good progress in this video.

162
00:07:18.838 --> 00:07:21.773
So, we went through the pre-populate demo.

163
00:07:21.773 --> 00:07:23.430
We also went through the actual process

164
00:07:23.430 --> 00:07:25.455
of loading the form data,

165
00:07:25.455 --> 00:07:27.038
and we pull it all together

166
00:07:27.038 --> 00:07:29.603
with the full JSF page example.

167
00:07:29.603 --> 00:07:30.436
Great job.

168
00:07:34.617 --> 00:07:36.278
This wraps up the video.

169
00:07:36.278 --> 00:07:40.445
In this video we learned how to pre-populate JSF forms.