JSF Tutorial #11: JavaServer Faces Tutorial (JSF 2.2) – Create JSF HTML Forms

In this video, I will show you how to create JSF HTML forms.

Please SUBSCRIBE to my YouTube channel.



Download JSF Source Code

# Video
1 Introduction
2 JavaServer Faces Overview
3 Setting up your Development Environment - Overview
4 Installing Tomcat - MS Windows
5 Installing Tomcat - Mac OS X
6 Installing Eclipse - MS Windows
7 Installing Eclipse - Mac OS X
8 Connecting Eclipse to Tomcat
9 JSF Behind the Scenes
10 JSF HelloWorld
11 Creating JSF HTML Forms
12 JSF Forms and Managed Beans
13 Drop-Down Lists - Part 1
14 Drop-Down Lists - Part 2
15 Radio Buttons
16 Check Boxes
17 Prepopulating Forms
18 Recommended JSF Books and Resources

Do You Need More Details?

  • Do you need to connect to a database?
  • Display SQL results in a HTML table?
  • Perform SQL insert, updates and deletes?
I have a premium course that shows you how to complete all of these tasks.
  • Database Integration with JDBC
  • Displaying Data in Lists and Tables
  • Validating HTML Forms
  • Implementing Business Logic with Managed Beans
  • Deploying applications with WAR Files
Read more about the premium course at http://www.luv2code.com/jsf-for-beginners

Follow luv2code with the links below:

– Website: http://www.luv2code.com
– YouTube: http://goo.gl/EV6Kwv
– Twitter: http://goo.gl/ALMzLG
– Facebook: http://goo.gl/8pDRdA

JSF Tutorial Transcript:

Hey, welcome back. In this video, I’m going to show you how to create JSF HTML forms. 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 the JSF page structure, how to create forms with JSF, and then some final technical details on JSF form UI components. All right, we’ve a lot of good things in store. Let’s go ahead and get started.

All right, 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, right. There’s a form, enter your email address and your password, or if you travel, you’ve gone to a number of different airline websites or travel websites and you’ve entered the city that you’re flying from or 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.

All right, so as I mentioned, JSF has components that will generate the HTML for you. If you’re building a HTML form, you can make use of some of the JSF UI components. Here, if I’m building a form, I’ll say 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, so you can add may be an input text, which is our normal text field or you can add in a text area which is a multi-line text field. You can also make use of check boxes, radio buttons, and drop down list. Don’t worry, I’ll actually cover each one of these UI components in a 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 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 kind of get out of the box when you do a basic installation of JSF. Now, you could also configure this to make use of different file extensions, but right now I’ll just go and keep it simple. Now, I’ll just make use of the default, the .xhtml. Now, your JSF page, the structure of the page is really just an normal HTML page with some special JSF tags mixed in.

Here on the slide, we have HTML, then we have regular HTML, then JSF tags, and then some more HTML. You can make use of any additional technologies that you like. If you want to add in some cascading style sheet support, style your elements using CSS, you’re free do that. If you wanted to may be add some support for JavaScript using like 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 use these sprinkle and other CSS or JavaScript functionality if you’d like.

All right, so I’ll just go and move into Eclipse. What I want to do is, create a form from scratch. I’m going to use the exact same project that I used in the “Hello World” video earlier, and I’m just going to add a new file called simple.xhtml. I’ll drop on this html again in end and then on line 4, I’m going to give a reference here to JSF UI components. I used the xml name space:h and I gave this reference. I’ll talk more about this reference here a little bit 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. 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 just set up an actual form. Note here, how Eclipse will handle code 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, so our basic container.

Now, remember we need to add in form elements within a given form, so what I 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, so 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 “firstName,” and here I say value “#{firstame}.” 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.

We have our first name set up, let’s do a similar thing here for last name. Again, I’m making use of the h:inputText, that JSF component, given actual ID of “LastName” and then value I referenced the “#{LastName}” mainly for the binding. All right, then 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:commandButton and you give the value, and value=Submit, and that’s what you’ll actually see on the actual submit button. That’s basically our JSF form by making use of those JSF UI component tags.

Now, what I’d like to do is actually run the application. I’ll just right click on simple xhtml and I’ll say Run As, Run on Server. It’s going to start up my local Tomcat server and process the page, and so here’s my form, so very good. Note here, simple x “hello/faces/simple xhtml.” I’m just going to copy this URL. I’m going to drop it into a real web browser, so we can take a look at it. This is our form and a browser, and it looks great, so our first name and last name and the 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.

All right, now one thing to note here is that when I mentioned the XML name space and how we had 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, so new in JSF 2.2 is the actual name space that you need to use for your applications. Now, the important thing to note here is that this is simply a unique name space that’s processed by the server. There’s no requirement to have a real connections with the internet.

For example, your JSF app is not going to go connect to these URLs. This is simply just a unique identifier that’s used by the actual server when they process your page. Anyway, here’s the list of the URIs, the name spaces here for the core components, HTML components, facelets, and composites. Don’t worry, we’ll cover all this information later in the course, but at least wanted to give you a list of those since they’re new in JSF 2.2.

All right, 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 main spaces and the JSF UI components.

All right, well, this wraps up the idea. In this video, I showed you how to create JSF HTML forms, and this is mainly just a high level overview. In some of the following videos, I’m going to drill down and show you how to 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.

Did you like my blog post?

Signup now and receive an email when I publish new luv2code content.

I will never give away, trade or sell your email address. You can unsubscribe at any time.


Leave a Reply