Narrator: Hey, welcome back.
In this video I'm gonna show you
how to create JSF HTML forms.
So we'll start this section off
just by having a review of regular HTML forms.
We'll discuss the idea of JSF UI components,
we'll take a look at JSF page structure,
how to create forms with JSF,
and then some final technical details
on JSF form UI components.
Alright, we have a lot of good things in store.
Let's go ahead and get started.
Alright so just a quick review of HTML Forms.
Basically HTML forms are used to get input from the user.
And we've all used HTML forms before, right?
If you've logged into your favorite social media application
like Facebook or Twitter, there's always a sign in page,
a form, enter your email address or password.
Or if you travel, you've gone to a number
of different airline websites or travel websites
and you've entered the city where you're flying from,
where you're flying to, and the dates.
So, this is very basic.
HTML forms have been around for a long time.
And we can also make use of this technology
with JSF UI components.
Alright, so as I mentioned, JSF has components
that will generate the HTML for you.
So, if you're building an HTML form,
you can make use of some of the JSF UI components.
Here, if I'm building a form I'll so h:form,
that's the main form container.
Once you have a form container set up,
then you can add multiple entries in that form.
You can add, maybe, an input text
which is a normal text field,
or you can add a text area,
which is a muli-line text field.
You can also make use of check boxes,
radio buttons, and drop down lists.
Don't worry, I'll actually cover
each one of these UI components in the following video.
I'll show you all the gory details
and we'll do a deep dive on each one
just so you can see how it works.
But at least here I wanted to give you an overview
of at least some of the components
that are available.
When you create a JSF page, the most common configuration
is to make use of the .xhtml file extension.
That's what you get out of the box
when you do a basic installation of JSF.
Now, you can also configure this
to make use of different file extensions,
but right now I'll just go ahead and keep it simple,
I'll make use of the default .xhtml.
Now, your JSF page, the structure of the page
is really just a normal HTML page
with some special JSF tags mixed in.
Here on the slide, you have HTML,
then we have regular HTML,
then JSF tags, then some more html.
You can make use of any additional technologies
that you'd like.
If you wanted to add in some cascading style sheet support
to style your elements using CSS,
you're free to do that.
If you wanted to maybe add some support for JavaScript
using Jquery or some other fancy JavaScript framework
you're also free to do that.
When you make use of a JSF page,
you're not limited to using only JSF tags,
you can easily sprinkle in other CSS
or JavaScript functionality if you'd like.
Alright, let's go ahead and move into Eclipse.
What I'm going to do is create a form from scratch.
So I'm gonna use the exact same project
that I used in the helloworld video earlier.
I'm just gonna add a new file called simple.xhtml.
Now I'll drop in this HTML begin and end,
and then on line four, I'm gonna give a reference here
to the JSF UI components.
I use the XML namespace components:h
and I give this reference.
I'll talk more about this reference later.
Here we're simply referencing a unique URI
for the application.
Now, here I have a head section, here I can put in my title,
but note here, the head section has h:head.
Again, we're using a JSF component here.
And then I'll drop in the actual body section.
So again I'll make use of the h:body.
I'm making use of the JSF UI components.
Some of the components are visible,
some of them are invisible.
But again, JSF will handle rendering
the appropriate HTML for you.
Now, let's go ahead and move down
and set up an actual form.
Note here how eclipse will handle
co-completion for you when you say h:form
they'll give you a list of different options.
This is our basic form we have right now.
It's our basic container.
Remember we need to add in form elements
within a given form.
What I'd like to do is create a very simple form
that has a student's first name and last name
and a submit button.
I'll start off with first name,
and then I'll make use of this h:inputText.
Again, I'm making use of a JSF UI component
for handling this input.
This will give me a text field
where the user can type in some information.
I set up the ID for this field
to be First Name, and here I say, value="#{firstName}.
That simply sets a request attribute
that we can use later on in the application.
But don't worry about that portion of it for now.
So we have our first name setup.
Let's do a similar thing here for a last name.
Again, I'm making use of the h:inputText,
that JSF component, I give an actual ide of "lastName",
and then the value I reference the #{LastName},
mainly for the binding.
Moving forward I go ahead and put
in a reference here for the "Submit" button.
In the JSF world, they call it a "Command Button".
So, h:command button and then you give the value.
And value="Submit" and that's what you'll
actually see on the Submit button.
And that's basically our JSF form
by making use of those JSF UI component tags.
Now what I'd like to do is, I'd like to run the application.
I'll just right click on simple.xhtml,
and I'll say "Run As", "Run on Server".
It's gonna start up my local time CAD server
and process the page, and here's my form.
Very good.
Note here, simple.xhtml.
Hello/faces/simple.xhtml.
I'm just gonna copy this URL,
and I'm gonna drop it into a real web browser
so we can take a look at it.
This is our form in a browser and it looks great.
Our first name and last name and a submit button.
Right now it doesn't do much because
we haven't put any real functionality behind it.
But the key for this video is simply
laying out the form and making use of
the appropriate components.
This looks really good.
Good job!
Alright, now one thing to not here is that
when I mentioned the XML namespace and how to reference it,
something has changed, so this is new in JSF 2.2.
If you look at some of the older JSF tutorials
out there on the net or the books,
they'll have some outdated information.
New in JSF 2.2 is the actual namespace
that you need to use for your applications.
The important thing to note here is
this is simply a unique namespace
that's processed by the server.
There's no requirement to have
a real connection to the internet.
For example, your JSF app's not gonna go
connect to these URLs.
This is simply just a unique identifier
that's used by the actual server
when they process your page.
Here's a list of the UI's,
the namespaces here for your core components,
HTML components, facelets, and composites.
Don't worry, we'll cover all this information
later in the course.
But I at least wanted to give you
a list of those since they're new in JSF 2.2.
Let's go ahead and summarize this video.
What we did is that we started out by
reviewing HTML forms,
then we discussed the JSF UI components,
we also looked at the JSF page structure,
and then we started from scratch
with creating a form with JSF.
And finally we discussed the idea of namespaces
in the JSF UI components.
Well this wraps up the video.
In this video I showed you how to create JSF HTML forms.
And this was mainly just a high level overview.
In some of the following videos I'm gonna drill down
and show you how to and make use of data binding.
We'll also walk through some of the various
JSF UI components and see how they work.
Don't worry, we have a lot of good things in store.
I'll see you then.