BreadcrumbsHome / JSF Tutorial #10: JavaServer Faces Tutorial (JSF 2.2) – JSF Hello World Example
JSF Tutorial #10: JavaServer Faces Tutorial (JSF 2.2) – JSF Hello World Example
Last Updated on Monday, 18 May 2015 Written by Chad Darby Monday, 1 June 2015
In this video, I will create a JSF Hello World example
Please SUBSCRIBE to my YouTube channel.
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?
- Database Integration with JDBC
- Displaying Data in Lists and Tables
- Validating HTML Forms
- Implementing Business Logic with Managed Beans
- Deploying applications with WAR Files
Follow luv2code with the links below:
JSF Tutorial Transcript:
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.