WEBVTT

1
00:00:01.330 --> 00:00:02.990
<v Instructor>Hey, welcome back.</v>

2
00:00:02.990 --> 00:00:04.655
In this video I'm gonna show you

3
00:00:04.655 --> 00:00:07.905
how to use JSF forms and radio buttons.

4
00:00:10.611 --> 00:00:13.568
In this video we'll cover the following topics.

5
00:00:13.568 --> 00:00:16.811
We'll first start off with the radio button demo

6
00:00:16.811 --> 00:00:18.943
and then we'll look at some JSF terminology

7
00:00:18.943 --> 00:00:22.198
for select one radio and then we'll walk

8
00:00:22.198 --> 00:00:24.865
through a full JSF page example.

9
00:00:26.112 --> 00:00:28.340
Alright, so we have a lot of good things in store,

10
00:00:28.340 --> 00:00:30.923
let's go ahead and get started.

11
00:00:33.091 --> 00:00:36.386
Alright, so here's a radio button demo right now.

12
00:00:36.386 --> 00:00:38.448
Building on our previous examples that we've worked on

13
00:00:38.448 --> 00:00:40.612
before already, so we'll have a first name

14
00:00:40.612 --> 00:00:42.836
and a last name for our student.

15
00:00:42.836 --> 00:00:45.416
And then we have this new radio button section

16
00:00:45.416 --> 00:00:47.678
so they can choose their favorite programming language

17
00:00:47.678 --> 00:00:49.680
and they can choose one of the radio buttons

18
00:00:49.680 --> 00:00:51.972
based on their given programming language.

19
00:00:51.972 --> 00:00:54.260
So here the user selected the language of PHP.

20
00:00:54.260 --> 00:00:57.681
And then we go ahead and hit the submit button

21
00:00:57.681 --> 00:00:59.394
and then we'll see up here on the screen

22
00:00:59.394 --> 00:01:00.851
on the confirmation page that

23
00:01:00.851 --> 00:01:04.394
their favorite programming language is PHP.

24
00:01:04.394 --> 00:01:08.477
So that's the idea of how the radio button works.

25
00:01:09.348 --> 00:01:11.880
Now in the JSF world a radio button

26
00:01:11.880 --> 00:01:15.277
is represented by the tag select one radio.

27
00:01:15.277 --> 00:01:18.054
Now this tag actually makes sense, it follows okay,

28
00:01:18.054 --> 00:01:20.176
so they have the word radio in the tag

29
00:01:20.176 --> 00:01:22.007
so you know that it's some type of radio option.

30
00:01:22.007 --> 00:01:24.830
So you can do select one radio.

31
00:01:24.830 --> 00:01:26.337
And what we'll do on the next slide

32
00:01:26.337 --> 00:01:27.989
is we'll actually see some examples

33
00:01:27.989 --> 00:01:30.575
of how to write code for it.

34
00:01:30.575 --> 00:01:32.608
Alright, so here's a select one radio.

35
00:01:32.608 --> 00:01:35.070
So just give a label here for favorite

36
00:01:35.070 --> 00:01:38.403
programming languages and then I'll make use

37
00:01:38.403 --> 00:01:40.736
of the select one radio tag.

38
00:01:44.118 --> 00:01:46.368
So here's select one radio.

39
00:01:48.856 --> 00:01:50.694
And then I have value equals and this is where

40
00:01:50.694 --> 00:01:53.035
I set up a link to my managed bean.

41
00:01:53.035 --> 00:01:55.448
So student three dot favorite language.

42
00:01:55.448 --> 00:01:58.775
We'll see that in the following slides.

43
00:01:58.775 --> 00:02:00.336
And then from there we just drop out

44
00:02:00.336 --> 00:02:02.090
the different radio options here.

45
00:02:02.090 --> 00:02:04.007
So Java, C#, PHP, Ruby.

46
00:02:05.642 --> 00:02:08.399
And again, item label is what the user will see

47
00:02:08.399 --> 00:02:11.104
and item value's an actual code you can use.

48
00:02:11.104 --> 00:02:13.261
Here I'm using them the same,

49
00:02:13.261 --> 00:02:15.303
but you can easily change that for your own

50
00:02:15.303 --> 00:02:17.053
personal application.

51
00:02:19.340 --> 00:02:20.970
Now let's go ahead and pull it all together

52
00:02:20.970 --> 00:02:22.974
with a JSF page example.

53
00:02:22.974 --> 00:02:25.393
So on the top left we'll have our student form.

54
00:02:25.393 --> 00:02:27.680
So this will be student three form dot XHTML.

55
00:02:27.680 --> 00:02:30.517
We'll have the first name, last name

56
00:02:30.517 --> 00:02:32.478
and then we'll also have the radio buttons

57
00:02:32.478 --> 00:02:34.266
for the favorite programming language

58
00:02:34.266 --> 00:02:35.595
that the user can select.

59
00:02:35.595 --> 00:02:37.389
Then in the center we're gonna have

60
00:02:37.389 --> 00:02:39.687
this new managed bean called student three.

61
00:02:39.687 --> 00:02:41.814
This managed bean will actually

62
00:02:41.814 --> 00:02:44.152
hold the form data that's submitted.

63
00:02:44.152 --> 00:02:46.026
And then down in the bottom right we'll have

64
00:02:46.026 --> 00:02:48.447
our confirmation page or our response page.

65
00:02:48.447 --> 00:02:50.250
So here we'll simply list out the actual

66
00:02:50.250 --> 00:02:52.958
programming language that the student selected.

67
00:02:52.958 --> 00:02:55.250
So in this example here the student's favorite

68
00:02:55.250 --> 00:02:57.583
programming language is PHP.

69
00:03:01.361 --> 00:03:03.611
So let's go ahead and look at our to do list for this.

70
00:03:03.611 --> 00:03:05.482
The first thing we need to do is add a managed bean

71
00:03:05.482 --> 00:03:07.815
for the class student three.

72
00:03:08.865 --> 00:03:10.832
And this managed bean is gonna have three fields.

73
00:03:10.832 --> 00:03:13.410
Our first name, last name and favorite language

74
00:03:13.410 --> 00:03:14.996
which is new.

75
00:03:14.996 --> 00:03:16.663
Then we'll update the form to make use

76
00:03:16.663 --> 00:03:19.330
of the select one radio button.

77
00:03:19.330 --> 00:03:21.372
And then we'll update the confirmation page

78
00:03:21.372 --> 00:03:24.571
to display the favorite language for the student.

79
00:03:24.571 --> 00:03:26.575
Alright, so we have a lot of good things in store.

80
00:03:26.575 --> 00:03:29.984
Let's go ahead and start coding.

81
00:03:29.984 --> 00:03:31.936
Alright, so let's go ahead and move into Eclipse.

82
00:03:31.936 --> 00:03:34.223
Again, we're gonna continue to use our existing

83
00:03:34.223 --> 00:03:36.814
project hello, the hello world project

84
00:03:36.814 --> 00:03:38.565
from our previous video.

85
00:03:38.565 --> 00:03:40.359
And what I like to do as the first thing out

86
00:03:40.359 --> 00:03:42.575
is to move into my Java resources directory

87
00:03:42.575 --> 00:03:44.616
for the source code and I'm gonna look

88
00:03:44.616 --> 00:03:47.530
at this file called student three dot Java.

89
00:03:47.530 --> 00:03:49.411
Now since we've already been working through

90
00:03:49.411 --> 00:03:51.537
this a lot so far in the video series

91
00:03:51.537 --> 00:03:53.571
I'm not gonna create the code from scratch.

92
00:03:53.571 --> 00:03:55.234
We'll just kinda walk through it.

93
00:03:55.234 --> 00:03:57.646
We've seen a lot of this stuff before.

94
00:03:57.646 --> 00:03:59.187
So I have this class student three,

95
00:03:59.187 --> 00:04:01.430
it's a managed bean.

96
00:04:01.430 --> 00:04:05.597
And this is what we're gonna use in our JSF pages.

97
00:04:06.668 --> 00:04:08.242
I'll define the three fields here.

98
00:04:08.242 --> 00:04:12.076
First name, last name and favorite language.

99
00:04:12.076 --> 00:04:13.328
And favorite language is actually

100
00:04:13.328 --> 00:04:14.911
the new item that we're adding to hold

101
00:04:14.911 --> 00:04:17.493
the actual favorite language of the student

102
00:04:17.493 --> 00:04:19.703
from the radio buttons.

103
00:04:19.703 --> 00:04:21.739
And then we'll set up our no argument constructor.

104
00:04:21.739 --> 00:04:25.906
So remember the constructor has the same name as the class.

105
00:04:26.765 --> 00:04:28.763
And then we just have the normal getter, setter

106
00:04:28.763 --> 00:04:29.759
methods here.

107
00:04:29.759 --> 00:04:32.308
So I have the get, set for first name.

108
00:04:32.308 --> 00:04:34.938
The get, set for last name.

109
00:04:34.938 --> 00:04:36.894
And finally, for this new part of the example

110
00:04:36.894 --> 00:04:39.477
get, set for favorite language.

111
00:04:40.642 --> 00:04:42.181
So that's pretty much it for our bean.

112
00:04:42.181 --> 00:04:44.261
So we have our managed bean, we have our constructor

113
00:04:44.261 --> 00:04:48.564
and we have our getter, setter methods for our fields.

114
00:04:48.564 --> 00:04:51.399
So this looks really good.

115
00:04:51.399 --> 00:04:55.072
Alright, so now let's go ahead and take a look at our form.

116
00:04:55.072 --> 00:04:57.903
So I'll move into my web content directory

117
00:04:57.903 --> 00:05:01.736
and I'll look at student three form dot XHTML.

118
00:05:05.099 --> 00:05:08.306
And this form is very similar to our previous examples.

119
00:05:08.306 --> 00:05:12.937
So I'll scroll down past the first name, last name item.

120
00:05:12.937 --> 00:05:15.637
I'll focus in on line 23 here where we will actually

121
00:05:15.637 --> 00:05:18.384
have our favorite programming languages.

122
00:05:18.384 --> 00:05:22.384
So we're gonna make use of the select one radio.

123
00:05:23.430 --> 00:05:26.395
And for the value we'll bind it to our managed bean

124
00:05:26.395 --> 00:05:27.948
from the previous example here.

125
00:05:27.948 --> 00:05:30.655
So student three dot favorite language.

126
00:05:30.655 --> 00:05:32.408
So when we submit the data it'll call

127
00:05:32.408 --> 00:05:36.533
student three dot set favorite language.

128
00:05:36.533 --> 00:05:38.782
Then we just go through and add all the different

129
00:05:38.782 --> 00:05:40.370
options here for the radios.

130
00:05:40.370 --> 00:05:44.537
So we have Java, C#, PHP, Ruby, so on and so forth.

131
00:05:47.276 --> 00:05:51.152
Now we'll move on down to our submit button.

132
00:05:51.152 --> 00:05:55.061
So it's for submit and the action is student three response.

133
00:05:55.061 --> 00:05:57.323
And again, remember it's gonna actually look

134
00:05:57.323 --> 00:06:00.915
for a page called student three response dot XHTML.

135
00:06:00.915 --> 00:06:03.134
JSF will automatically add the extension

136
00:06:03.134 --> 00:06:05.384
dot XHTML on there for you.

137
00:06:07.961 --> 00:06:11.544
Now let's take a look at our response page.

138
00:06:12.529 --> 00:06:15.862
So here I'll just kinda move down a bit.

139
00:06:18.279 --> 00:06:20.961
And line 16 and 17, the student's favorite

140
00:06:20.961 --> 00:06:22.711
programming language.

141
00:06:24.463 --> 00:06:27.435
And I make use of that managed bean.

142
00:06:27.435 --> 00:06:30.015
I'll say student three dot favorite language.

143
00:06:30.015 --> 00:06:32.730
So remember, JSF will call the getter method here.

144
00:06:32.730 --> 00:06:36.184
So JSF will call student three dot get favorite language

145
00:06:36.184 --> 00:06:40.351
and it will display the results here on the screen.

146
00:06:44.778 --> 00:06:46.986
Now here I just ran the application.

147
00:06:46.986 --> 00:06:48.699
Here's our form up top, so we'll start

148
00:06:48.699 --> 00:06:52.452
with the first name and the last name.

149
00:06:52.452 --> 00:06:54.459
And then we'll choose the favorite programming language.

150
00:06:54.459 --> 00:06:56.715
So here you can choose different items.

151
00:06:56.715 --> 00:07:00.882
Here we'll choose PHP and then the user will hit submit.

152
00:07:02.712 --> 00:07:04.625
And then we get the results here on the page.

153
00:07:04.625 --> 00:07:07.630
The student's favorite programming language is PHP.

154
00:07:07.630 --> 00:07:10.880
So this works out as desired, good job.

155
00:07:14.354 --> 00:07:16.685
Okay, so let's go ahead and summarize this video.

156
00:07:16.685 --> 00:07:18.942
We started off with a radio button demo

157
00:07:18.942 --> 00:07:21.611
then we also looked at the select one radio tag

158
00:07:21.611 --> 00:07:25.778
and then we wrapped it all up with a full JSF page example.

159
00:07:29.189 --> 00:07:30.859
Well this wraps up the video.

160
00:07:30.859 --> 00:07:32.646
In this video I showed you how to use

161
00:07:32.646 --> 00:07:35.063
JSF forms and radio buttons.