WEBVTT

1
00:00:02.356 --> 00:00:04.163
<v Narrator>Hey, welcome back.</v>

2
00:00:04.163 --> 00:00:05.696
In this video I'm gonna show you

3
00:00:05.696 --> 00:00:08.113
how to create JSF HTML forms.

4
00:00:11.185 --> 00:00:12.717
So we'll start this section off

5
00:00:12.717 --> 00:00:16.925
just by having a review of regular HTML forms.

6
00:00:16.925 --> 00:00:19.853
We'll discuss the idea of JSF UI components,

7
00:00:19.853 --> 00:00:22.645
we'll take a look at JSF page structure,

8
00:00:22.645 --> 00:00:24.834
how to create forms with JSF,

9
00:00:24.834 --> 00:00:27.188
and then some final technical details

10
00:00:27.188 --> 00:00:29.355
on JSF form UI components.

11
00:00:30.705 --> 00:00:32.818
Alright, we have a lot of good things in store.

12
00:00:32.818 --> 00:00:35.401
Let's go ahead and get started.

13
00:00:37.738 --> 00:00:40.636
Alright so just a quick review of HTML Forms.

14
00:00:40.636 --> 00:00:44.228
Basically HTML forms are used to get input from the user.

15
00:00:44.228 --> 00:00:47.186
And we've all used HTML forms before, right?

16
00:00:47.186 --> 00:00:49.903
If you've logged into your favorite social media application

17
00:00:49.903 --> 00:00:52.861
like Facebook or Twitter, there's always a sign in page,

18
00:00:52.861 --> 00:00:56.121
a form, enter your email address or password.

19
00:00:56.121 --> 00:00:58.370
Or if you travel, you've gone to a number

20
00:00:58.370 --> 00:01:01.027
of different airline websites or travel websites

21
00:01:01.027 --> 00:01:03.547
and you've entered the city where you're flying from,

22
00:01:03.547 --> 00:01:06.249
where you're flying to, and the dates.

23
00:01:06.249 --> 00:01:07.698
So, this is very basic.

24
00:01:07.698 --> 00:01:10.445
HTML forms have been around for a long time.

25
00:01:10.445 --> 00:01:12.512
And we can also make use of this technology

26
00:01:12.512 --> 00:01:14.429
with JSF UI components.

27
00:01:18.444 --> 00:01:21.372
Alright, so as I mentioned, JSF has components

28
00:01:21.372 --> 00:01:23.832
that will generate the HTML for you.

29
00:01:23.832 --> 00:01:25.734
So, if you're building an HTML form,

30
00:01:25.734 --> 00:01:28.586
you can make use of some of the JSF UI components.

31
00:01:28.586 --> 00:01:31.816
Here, if I'm building a form I'll so h:form,

32
00:01:31.816 --> 00:01:34.684
that's the main form container.

33
00:01:34.684 --> 00:01:37.084
Once you have a form container set up,

34
00:01:37.084 --> 00:01:40.419
then you can add multiple entries in that form.

35
00:01:40.419 --> 00:01:42.955
You can add, maybe, an input text

36
00:01:42.955 --> 00:01:44.857
which is a normal text field,

37
00:01:44.857 --> 00:01:46.924
or you can add a text area,

38
00:01:46.924 --> 00:01:49.158
which is a muli-line text field.

39
00:01:49.158 --> 00:01:51.603
You can also make use of check boxes,

40
00:01:51.603 --> 00:01:54.743
radio buttons, and drop down lists.

41
00:01:54.743 --> 00:01:56.327
Don't worry, I'll actually cover

42
00:01:56.327 --> 00:01:59.723
each one of these UI components in the following video.

43
00:01:59.723 --> 00:02:01.716
I'll show you all the gory details

44
00:02:01.716 --> 00:02:03.330
and we'll do a deep dive on each one

45
00:02:03.330 --> 00:02:05.308
just so you can see how it works.

46
00:02:05.308 --> 00:02:07.255
But at least here I wanted to give you an overview

47
00:02:07.255 --> 00:02:08.915
of at least some of the components

48
00:02:08.915 --> 00:02:10.498
that are available.

49
00:02:12.930 --> 00:02:15.795
When you create a JSF page, the most common configuration

50
00:02:15.795 --> 00:02:19.462
is to make use of the .xhtml file extension.

51
00:02:20.872 --> 00:02:22.441
That's what you get out of the box

52
00:02:22.441 --> 00:02:25.067
when you do a basic installation of JSF.

53
00:02:25.067 --> 00:02:26.879
Now, you can also configure this

54
00:02:26.879 --> 00:02:29.626
to make use of different file extensions,

55
00:02:29.626 --> 00:02:32.101
but right now I'll just go ahead and keep it simple,

56
00:02:32.101 --> 00:02:35.482
I'll make use of the default .xhtml.

57
00:02:35.482 --> 00:02:38.500
Now, your JSF page, the structure of the page

58
00:02:38.500 --> 00:02:41.368
is really just a normal HTML page

59
00:02:41.368 --> 00:02:45.051
with some special JSF tags mixed in.

60
00:02:45.051 --> 00:02:47.631
Here on the slide, you have HTML,

61
00:02:47.631 --> 00:02:49.548
then we have regular HTML,

62
00:02:49.548 --> 00:02:52.401
then JSF tags, then some more html.

63
00:02:52.401 --> 00:02:55.435
You can make use of any additional technologies

64
00:02:55.435 --> 00:02:56.582
that you'd like.

65
00:02:56.582 --> 00:02:59.646
If you wanted to add in some cascading style sheet support

66
00:02:59.646 --> 00:03:02.045
to style your elements using CSS,

67
00:03:02.045 --> 00:03:04.022
you're free to do that.

68
00:03:04.022 --> 00:03:07.132
If you wanted to maybe add some support for JavaScript

69
00:03:07.132 --> 00:03:12.097
using Jquery or some other fancy JavaScript framework

70
00:03:12.097 --> 00:03:13.878
you're also free to do that.

71
00:03:13.878 --> 00:03:16.248
When you make use of a JSF page,

72
00:03:16.248 --> 00:03:18.753
you're not limited to using only JSF tags,

73
00:03:18.753 --> 00:03:21.229
you can easily sprinkle in other CSS

74
00:03:21.229 --> 00:03:24.729
or JavaScript functionality if you'd like.

75
00:03:27.492 --> 00:03:29.349 line:15% 
Alright, let's go ahead and move into Eclipse.

76
00:03:29.349 --> 00:03:31.794 line:15% 
What I'm going to do is create a form from scratch.

77
00:03:31.794 --> 00:03:33.892 line:15% 
So I'm gonna use the exact same project

78
00:03:33.892 --> 00:03:37.574 line:15% 
that I used in the helloworld video earlier.

79
00:03:37.574 --> 00:03:40.895 line:15% 
I'm just gonna add a new file called simple.xhtml.

80
00:03:40.895 --> 00:03:43.974
Now I'll drop in this HTML begin and end,

81
00:03:43.974 --> 00:03:47.038
and then on line four, I'm gonna give a reference here

82
00:03:47.038 --> 00:03:49.121
to the JSF UI components.

83
00:03:50.600 --> 00:03:52.702
I use the XML namespace components:h

84
00:03:52.702 --> 00:03:54.422
and I give this reference.

85
00:03:54.422 --> 00:03:58.490
I'll talk more about this reference later.

86
00:03:58.490 --> 00:04:02.152
Here we're simply referencing a unique URI

87
00:04:02.152 --> 00:04:04.289
for the application.

88
00:04:04.289 --> 00:04:08.757
Now, here I have a head section, here I can put in my title,

89
00:04:08.757 --> 00:04:11.941
but note here, the head section has h:head.

90
00:04:11.941 --> 00:04:15.274
Again, we're using a JSF component here.

91
00:04:18.362 --> 00:04:21.510
And then I'll drop in the actual body section.

92
00:04:21.510 --> 00:04:24.333
So again I'll make use of the h:body.

93
00:04:24.333 --> 00:04:26.491
I'm making use of the JSF UI components.

94
00:04:26.491 --> 00:04:28.030
Some of the components are visible,

95
00:04:28.030 --> 00:04:29.464
some of them are invisible.

96
00:04:29.464 --> 00:04:31.411
But again, JSF will handle rendering

97
00:04:31.411 --> 00:04:33.828
the appropriate HTML for you.

98
00:04:36.105 --> 00:04:38.218
Now, let's go ahead and move down

99
00:04:38.218 --> 00:04:40.829
and set up an actual form.

100
00:04:40.829 --> 00:04:42.761
Note here how eclipse will handle

101
00:04:42.761 --> 00:04:46.731
co-completion for you when you say h:form

102
00:04:46.731 --> 00:04:48.587
they'll give you a list of different options.

103
00:04:48.587 --> 00:04:50.504
This is our basic form we have right now.

104
00:04:50.504 --> 00:04:51.953
It's our basic container.

105
00:04:51.953 --> 00:04:54.730
Remember we need to add in form elements

106
00:04:54.730 --> 00:04:56.397
within a given form.

107
00:04:57.266 --> 00:04:59.499
What I'd like to do is create a very simple form

108
00:04:59.499 --> 00:05:02.699
that has a student's first name and last name

109
00:05:02.699 --> 00:05:04.722
and a submit button.

110
00:05:04.722 --> 00:05:06.714
I'll start off with first name,

111
00:05:06.714 --> 00:05:09.521
and then I'll make use of this h:inputText.

112
00:05:09.521 --> 00:05:13.415
Again, I'm making use of a JSF UI component

113
00:05:13.415 --> 00:05:15.453
for handling this input.

114
00:05:15.453 --> 00:05:17.143
This will give me a text field

115
00:05:17.143 --> 00:05:19.422
where the user can type in some information.

116
00:05:19.422 --> 00:05:20.962
I set up the ID for this field

117
00:05:20.962 --> 00:05:25.129
to be First Name, and here I say, value="#{firstName}.

118
00:05:26.440 --> 00:05:28.916
That simply sets a request attribute

119
00:05:28.916 --> 00:05:32.266
that we can use later on in the application.

120
00:05:32.266 --> 00:05:35.662
But don't worry about that portion of it for now.

121
00:05:35.662 --> 00:05:37.277
So we have our first name setup.

122
00:05:37.277 --> 00:05:39.466
Let's do a similar thing here for a last name.

123
00:05:39.466 --> 00:05:41.820
Again, I'm making use of the h:inputText,

124
00:05:41.820 --> 00:05:45.593
that JSF component, I give an actual ide of "lastName",

125
00:05:45.593 --> 00:05:49.510
and then the value I reference the #{LastName},

126
00:05:50.800 --> 00:05:52.717
mainly for the binding.

127
00:05:56.519 --> 00:05:58.148
Moving forward I go ahead and put

128
00:05:58.148 --> 00:06:00.729
in a reference here for the "Submit" button.

129
00:06:00.729 --> 00:06:03.823
In the JSF world, they call it a "Command Button".

130
00:06:03.823 --> 00:06:06.963
So, h:command button and then you give the value.

131
00:06:06.963 --> 00:06:08.864
And value="Submit" and that's what you'll

132
00:06:08.864 --> 00:06:12.306
actually see on the Submit button.

133
00:06:12.306 --> 00:06:14.660
And that's basically our JSF form

134
00:06:14.660 --> 00:06:18.410
by making use of those JSF UI component tags.

135
00:06:21.089 --> 00:06:24.923
Now what I'd like to do is, I'd like to run the application.

136
00:06:24.923 --> 00:06:27.821
I'll just right click on simple.xhtml,

137
00:06:27.821 --> 00:06:31.263
and I'll say "Run As", "Run on Server".

138
00:06:31.263 --> 00:06:34.296
It's gonna start up my local time CAD server

139
00:06:34.296 --> 00:06:37.134
and process the page, and here's my form.

140
00:06:37.134 --> 00:06:37.967
Very good.

141
00:06:37.967 --> 00:06:39.967
Note here, simple.xhtml.

142
00:06:41.830 --> 00:06:44.650
Hello/faces/simple.xhtml.

143
00:06:44.650 --> 00:06:46.220
I'm just gonna copy this URL,

144
00:06:46.220 --> 00:06:49.072
and I'm gonna drop it into a real web browser

145
00:06:49.072 --> 00:06:51.215
so we can take a look at it.

146
00:06:51.215 --> 00:06:54.823
This is our form in a browser and it looks great.

147
00:06:54.823 --> 00:06:57.207
Our first name and last name and a submit button.

148
00:06:57.207 --> 00:06:59.003
Right now it doesn't do much because

149
00:06:59.003 --> 00:07:01.433
we haven't put any real functionality behind it.

150
00:07:01.433 --> 00:07:03.169
But the key for this video is simply

151
00:07:03.169 --> 00:07:05.357
laying out the form and making use of

152
00:07:05.357 --> 00:07:06.882
the appropriate components.

153
00:07:06.882 --> 00:07:08.044
This looks really good.

154
00:07:08.044 --> 00:07:08.877
Good job!

155
00:07:12.027 --> 00:07:14.489
Alright, now one thing to not here is that

156
00:07:14.489 --> 00:07:19.243
when I mentioned the XML namespace and how to reference it,

157
00:07:19.243 --> 00:07:23.786
something has changed, so this is new in JSF 2.2.

158
00:07:23.786 --> 00:07:27.007
If you look at some of the older JSF tutorials

159
00:07:27.007 --> 00:07:28.420
out there on the net or the books,

160
00:07:28.420 --> 00:07:30.850
they'll have some outdated information.

161
00:07:30.850 --> 00:07:33.370
New in JSF 2.2 is the actual namespace

162
00:07:33.370 --> 00:07:36.147
that you need to use for your applications.

163
00:07:36.147 --> 00:07:37.883
The important thing to note here is

164
00:07:37.883 --> 00:07:39.573
this is simply a unique namespace

165
00:07:39.573 --> 00:07:41.475
that's processed by the server.

166
00:07:41.475 --> 00:07:42.999
There's no requirement to have

167
00:07:42.999 --> 00:07:44.403
a real connection to the internet.

168
00:07:44.403 --> 00:07:46.893
For example, your JSF app's not gonna go

169
00:07:46.893 --> 00:07:48.176
connect to these URLs.

170
00:07:48.176 --> 00:07:50.712
This is simply just a unique identifier

171
00:07:50.712 --> 00:07:52.493
that's used by the actual server

172
00:07:52.493 --> 00:07:54.636
when they process your page.

173
00:07:54.636 --> 00:07:57.428
Here's a list of the UI's,

174
00:07:57.428 --> 00:08:00.688
the namespaces here for your core components,

175
00:08:00.688 --> 00:08:04.235
HTML components, facelets, and composites.

176
00:08:04.235 --> 00:08:06.152
Don't worry, we'll cover all this information

177
00:08:06.152 --> 00:08:07.375
later in the course.

178
00:08:07.375 --> 00:08:08.446
But I at least wanted to give you

179
00:08:08.446 --> 00:08:12.196
a list of those since they're new in JSF 2.2.

180
00:08:14.438 --> 00:08:17.049
Let's go ahead and summarize this video.

181
00:08:17.049 --> 00:08:18.740
What we did is that we started out by

182
00:08:18.740 --> 00:08:20.506
reviewing HTML forms,

183
00:08:20.506 --> 00:08:23.524
then we discussed the JSF UI components,

184
00:08:23.524 --> 00:08:26.316
we also looked at the JSF page structure,

185
00:08:26.316 --> 00:08:27.841
and then we started from scratch

186
00:08:27.841 --> 00:08:30.482
with creating a form with JSF.

187
00:08:30.482 --> 00:08:33.546
And finally we discussed the idea of namespaces

188
00:08:33.546 --> 00:08:35.629
in the JSF UI components.

189
00:08:38.745 --> 00:08:41.651
Well this wraps up the video.

190
00:08:41.651 --> 00:08:46.013
In this video I showed you how to create JSF HTML forms.

191
00:08:46.013 --> 00:08:48.790
And this was mainly just a high level overview.

192
00:08:48.790 --> 00:08:51.054
In some of the following videos I'm gonna drill down

193
00:08:51.054 --> 00:08:53.559
and show you how to and make use of data binding.

194
00:08:53.559 --> 00:08:55.129
We'll also walk through some of the various

195
00:08:55.129 --> 00:08:58.359
JSF UI components and see how they work.

196
00:08:58.359 --> 00:09:00.925
Don't worry, we have a lot of good things in store.

197
00:09:00.925 --> 00:09:02.425
I'll see you then.