Today is Thursday, 12th January 2017

Archive for June, 2015


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 SOURCE CODE

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:

00:00
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.

00:38
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.

01:18
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.

02:13
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.

02:44
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.

03:27
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.

04:04
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.

04:53
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.

05:36
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.

06:21
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.

07:12
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.

07:45
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.

08:14
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.

08:39
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.

Share


JSF Tutorial #10: JavaServer Faces Tutorial (JSF 2.2) – JSF Hello World Example

In this video, I will create a JSF Hello World example

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:

00:00
Hi. In this video I’m going to show you how to build a Hello World program with JSF. Before we start coding, let’s just perform a development environment checkpoint. At this point in the video series you should have installed Apache Tomcat, Eclipse the Java EE version, and you also should have connected Eclipse to Tomcat. If you haven’t done this yet, please go back to the previous videos and follow those steps. You’ll need to have all this in place before you can actually build the Hello World program.

00:36
We’re going to create a very simple Hello World program with JSF. What we’re going to do is start with an HTML form that’s going to prompt the user for their name, they’ll type in their name, they’ll hit submit, then we’ll have a second page called “My Response XHTML” and it’s simply going to say “Hello, whatever the user’s name is.” Again, a very simple application that’s going to make use of two files, an input form, and a simple response page, that’s it. I’m excited about this, let’s go ahead and get started.

01:08
Let’s go ahead and move into Eclipse. The first thing we want to do is create a new project. What I’ll do is I’ll select File, New, Dynamic Web Project. This will bring up a dialogue box, I can enter the project name, I’ll enter the name of “hello.” For the target run time, I’ll make sure that Apache Tomcat 8 is already selected, and then I’ll move down to the configuration section and over on the far right I’ll click the modify button. What I want to do is add support for JSF 2.2. Right here in the middle of the screen there’s a link for JSF version 2.2, make sure that box is checked, and then we’re okay. Then we can move down and click okay.

02:04
We’ll go ahead and click next. For this section here we’ll keep the default for the output directories, click next. Now for the context route, that’s the actual name that we’ll use on the URL for our application. We’ll go ahead and keep it as hello. I’ll check the box here for generate a web.xml the plummet descriptor. I’ll go ahead and click next. At this point I can give a reference for the user library that I’m going to use for JSF. I don’t have it on my system, I actually need to download it from Oracle’s website. Over on the far right there’s this little floppy disc here, it’s a download library. Go ahead and select that, then it’ll give you a list of libraries that you can download.

02:43
We’re going to download the library JSF 2.2 that’s provided by Oracle, and they’ll actually download it from the Oracle website to my local file system. I’ll go ahead and click next, and then I’ll accept the actual license agreement, and I’ll click finish, and then the actual download process will happen. Right now it’s downloading the file to my local file system. At this point I have JSF 2.2 downloaded from Oracle. Now, if you remember earlier I mentioned that if you’re using Tomcat you have to include the JSF 2.2 libraries in your application, and also if you’re using JBoss or Glassfish, you don’t have to include them. That’s the little check box. I discussed this in a previous video, and that’s where that happens right there.

03:26
Moving on down here, we can discuss the JSF configuration file and also the JSF Servlet. In the diagram I used in the previous video, I showed you a Facelet Servlet. Also here, we have a reference for a URL mapping. Anything that comes in a slash Facelet, where it should be routed through this JSF Facelet Servlet. I’m going to go ahead and click finish, and then we’ll have our basic project created for us. Now I have this new project created, the first thing I want to do is create that HTML form that we saw in the earlier slide.

04:06
I’ll simply move to the web content folder, right click, then I’ll say new, HTML file. This is the actual file called HelloWorld.xhtml. It’s going to have our actual input form for our little Hello World example. I’ll 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. Don’t worry about it too much because I’m actually going to delete everything that’s there. I’ll go ahead and hit finish right here. Then they’re going to give me a lot of template stuff, but I really don’t need it for this demo. I’m going to simply select all of this text and simply delete it right now.

05:01
I’ve wiped that out, I’m going to drop in some code that I had had previously, but don’t worry. I’ll actually walk through all the steps of the code that I’m going to drop in here. Let’s go ahead and walk through it. On lines 2 through 5, 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. First off, I’ll set up our HTML head section. Again, I’m using one of the HTML custom tags from JSF, H:Head. That gives us the normal heading and the title. Then I move on down to the actual body of the HTML page. Again, note I’m using the H:Body, that’s the JSF custom tag that we’re using here.

05:54
Now let’s go ahead and set up the HTML form. 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. Let me just clean up the text here for a bit, just so we can walk through it and talk about it. I’m going to just get some extra white space and slide it up on the screen a bit. I have this H:Input text 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 going to bind this value to a request parameter called the username, and then we have A: place holders they actually will prompt, what’s your name?

06:39
Then on line 16 we have a command button, so this is effectively our submit button and the action is my response. It will actually submit it to this page called myresponse.xhtml. Again, with JSF all the pages are written using .xhtml extension, and that’s how this form is set up and this is how we’ll actually send the data across to the actual response page. Now let’s go ahead and create that response page, so 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. Again, don’t worry about the template, we’re going to actually delete all of this text so I’ll just go through it and hit cut.

07:29
Then I’ll drop in some code that I had previously. Again, I’ll walk through each line of it here. Here we start off with just the 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. Then for the body we’re going to say “Hello,” and we’re going to give the actual username. We say pound, curly brace, the username. That’s the actual user that was submitted on the HTML form and here we’re actually displaying that form data.

08:09
That’s enough with the coding, let’s go ahead and run the application. I’ll select my file helloworld.xhtml, and I’ll choose run as, and then I’ll select run on server. 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 helloworld.xhtml, and it’s “faces/helloworld.xhtml” so this is all being passed through the JSF Facelet Servlet. 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.

08:53
This looks good, so let’s go ahead and try this in a real browser. I’ll just go ahead and copy this URL and then I’ll bring up my Firefox browser and check it out. In Firefox I’ll just drop in or paste that URL and it just 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. It says Hello, Mary Public, so this is pretty good. This is all working as desired, so good job with our hello world. 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.

Share