-: All right, so now I have this new project created.
The first thing I wanna do is create that HTML form
that we saw in the earlier slide.
So I'll simply move to the web content folder,
right click, and I'll say new HTML file.
And this is the actual file called
hello-world.xhtml.
It's gonna have an actual input form
for our little hello-world example.
So I go ahead and click next.
I can choose an actual template
I want to use for this file.
There's a lot of templates out here.
It's not really important right now
but I'll just go ahead and choose a new facelet template.
But don't worry about it too much
because I'm actually gonna delete everything that's there,
but I'll go ahead and hit finish right here.
So there gonna give me a lot of template stuff,
but I really don't need it for this demo.
So I'm just gonna simply select all of this text
and simply delete it right now.
All right, so I've wiped that out,
I'm gonna drop in some code that I have had previously,
but don't worry, I'll actually walk through all the steps
of the code that I'm gonna drop in here.
All right, so let's go ahead and walk through it.
So on lines two through five, we actually give a reference
for the JSF custom tags.
I'll talk more about this in some later videos,
but JSF has a collection of tags that will generate
HTML content for us automatically.
So we'll make use of these in the page here.
So first off I'll set up our HTML head section,
again I'm using one of the HTML custom tags from JSF,
h:head.
So that gives us the normal heading and the title.
Then I move on down to the actual body of the HTML page.
And again, note I'm using the h:body,
that's the JSF custom tag that we're using here.
So now let's go ahead and set up the HTML form.
So the little graphic I have on the screen
as far as what's your name, with a submit button,
it's rendered by this piece of code on lines 12 through 15.
All right so let me just clean up the text
here for a bit just so we can walk through it
and talk about it so let me just get some extra
white space, and slide it up the screen a bit.
All right, so I have this h:inputtext,
so again, h: means that it's a JSF custom tag.
This will give us an input text field.
The actual ID or name for the field is called name,
the actual value it's gonna bind this value to a
request perimeter called the username,
and then we have a colon placeholder saying actual prompt,
what's your name.
And then on line 16 we have a command button,
so this is effectively our submit button,
and the action is myresponse.
So it'll actually submit it to this page called
myresponse.xhtml.
Again, with JFS all the pages are written
using .xhtml extension.
And that's how this form is set up,
and this is how we'll actually submit data across to
the actual response page.
All right,
so now let's go ahead and create that response page.
Let me move over here in my window.
Under web content I'll say new HTML file.
The actual page name or file name is myresponse.xhtml.
Put the x on there.
I'll hit next, I'll choose one of the templates again,
I'll hit finish, but again don't worry about the template,
we're gonna actually delete all of this text,
so I'll just go through it and hit cut
and then I'll drop in some code that I had previously.
But again I'll walk through each line of it here.
So here we start off with just a reference
for the JSF custom tags.
I'm really only using just one of the tags here,
the h tag for HTML,
our basic header, and then we'll set up our body.
And then for the body we're gonna say hello
and we're gonna give the actual username.
So you say #{theUserName}.
So that's the actual user that was submitted
on the HTML form, and here we're actually
displaying that form data.
All right, so that's enough with the coding,
let's go ahead and run the application.
So I'll select my file hello world at xhtml,
and I'll choose run as and I'll select run
on server.
So this will actually run the application
and we'll see a view of it right here in our browser
that's inside of eclipse.
A couple of things to note here is that
we have this hello world at xhtml,
and it's faces/helloworld at xhtml.
So this is all being passed through the JSF
faces servelet.
I'll go ahead and type in the name of John Doe,
I'll hit submit, and then I get the response.
Hello, John Doe.
Just like the code was developed in the previous section.
All right, so this looks good,
so let's go ahead and try this on a real browser.
So I'll just go ahead and copy this URL,
and then I'll bring up my Firefox browser,
and check it out.
So in Firefox I'll just drop in or paste that URL,
and this gives me the actual form we saw earlier,
I'll go ahead and type in my name,
Mary Public, and then I'll hit submit.
And it says hello, Mary Public.
So this is pretty good, this is all working
as desired.
So good job with our hello world.
All right so that wraps up the video,
in this video we created a hello world
program with JSF.
We created an input form, and we created
a response page and we linked everything together.
Good job.