An Introduction to JSF 2.0 Development Tutorial: Getting started

An Introduction to JSF 2.0 Development Tutorial: Getting started

An Introduction to JSF 2.0 Development Tutorial: Getting started

date:Feb 04, 2011

Getting Started with JavaServer Faces 2.0 Development

In this tutorial, Cameron McKenzie, author of JSF Made Easy, shows you how to configure a development environment that uses Tomcat 7, the Mojarra JSF libraries from Oracle, and a basic JDK installation to develop, test and deploy a JSF application.

The Original Tutorial...

This video is based on the following tutorial that was published in parallel at TheServerSide: Getting Started with JSF Tutorial

Sample Code and Questions...

The sample code for the tutorial, along with any questions on how to get the example working, can be found here: Getting Started with JSF 2.0

Read the full transcript from this video below:  
An Introduction to JSF 2.0 Development Tutorial: Getting started

Hi, I'm Cameron McKenzie. I'm the author of "JSF Made Easy", and I'm also
an editor over at TheServerSide.com. And one of the things I wanted to
talk to you about right now was doing some JSF development.

Now, I actually installed the JDK 1.6 and Tomcat 7 onto my Windows XP
machine. I've thrown them right into underscore directories, right off the
C drive there. What I'd like to do right now is put together a little JSF
application. Now, if you're going to actually put together a JSF
application, you'd be insane to do it this way. You'd probably want to get
an IDE like NetBeans, or some Eclipse or something like that. But I'm
actually just going to go old school.

Create a folder right off my C drive, called underscoreJSF--sorry,
underscoreeasyJSF. And, I'm going to do all the basic stuff to create a
Java, web, WAR file folder structure. And so, that's going to be the root
of my application, easyJSF, right there. If you want to create a Java-based
web application, you need a couple of important folders. One is the WEBINF
folder, all capital letters, and under WEBINF you usually have another
folder called Classes, where all your compiled classes go. You usually have
another folder in there called Lib, in which you put all your various
libraries in.

If we're actually going to be creating a JSF application, we're going to
need a couple of different libraries. Now, I've downloaded the JSF
implementation from Sun Microsystems. The JSF 2.0 is O'Hara; I think that's
named after a school of fish, or something like that. Inside that lib
directory in that download, you'll see two files. You'll see the JSF-
api.jar and the JSF-impl.jar. That's essentially the byte code
implementation of JSF 2.0. And I'm going to throw those right into the lib
directory of my web application.

Some people take these jar files, and they throw them into the class path
of their application server. I don't like that; I think that's bad. I think
that's a bad design. I like to put them in the individual web application;
that way if the application ever needs to upgrade, we can upgrade the
individual one and not have to upgrade everything on the server. But, I
don't want to get into that whole discussion right now. That's just my
personal preference.

Here's a nice little folder structure for Java EE web application. I need
these two files right here; that's the JSF implementation. However, if you
actually want to do some JSF development, I believe that the data table
tags use some JSTL tag libraries in them. So, while right now we could
probably put together a simple application just having these two jar files
in here, once things get more complicated you need the JSTL.jar file, and
you also need the standard .jar file which comes with the JSTL
implementation.

Now, how do you get those jar files? Well, one way to get them is to
actually download them, either from Sun, or you can download them from the
JSTL Apache project. One of the nice things is that if you install Tomcat,
you'll see that in the examples, the lib directory actually has the JSTL,
and--you can't see it here, because it's invisible right now--the standard
.jar file.

I'm just going to cheat and copy from that particular folder, and put those
two files into my lib directory. So, that's Tomcat Webapps examples WEBINF
lib; let's see if I can remember that. Tomcat, Webapps, examples, WEBINF,
lib. There's the two jar files that come with that. And I'm just going to
toss those right into the lib directory there. And that sets things up so
that I've got basically all the jar files that I need in order to run a JSF
application.

So, what else do I need to create and run a little JSF application? Well,
I've made some notes here. I need the folder structure of a Java-EE web
application, I need some jar files, I probably need a web.xml file as well.
Every good web application, every good WAR file, has a web.xml file, a
deployment descriptor. I've actually got one written out here. It's going
to be the most basic WAR file that you could actually use for a JSF
application. All I've got is the standard preamble stuff here. I've got a
nice little display name: JSF Made Easy. I've also got a servlet. So
there's one key servlet that makes the whole JSF thing work, and that's the
faces servlet. You can see, javax.faces.webapp.facesservlet.

In a JSF application, every single request that comes in goes to this
particular servlet, and then this servlet figures out what various JSF
components to dispatch to. So, a web.xml file has to have an entry, a
servlet entry for the faces servlet, and of course you'll also need a
mapping as well. And, here I'm going to do the mapping of star.faces,
splat.faces. That means that any request that comes in that ends in .faces,
not .JSP not JSF, .faces, will get sent to this faces servlet, which is
essentially the entry point for the JSF framework. That means if I have
JSPs, it won't go through JSF. If I have html files, it won't go through
JSF. But anything that ends in .faces, will. And you can change that to
.JSF, .faces, .face, whatever really turns your crank.

So, I'm just going to copy that. A little cheating here--I think you can
get that on my website, or certainly in my book, where you can copy it out.
All of those deployment descriptors have to go in the WEBINF folder. So,
there's my web.xml file, open it with NotePad, paste all of that delicious
information in there, save, and then we'll close it up.

What else do I actually need in my application? Well, one thing that I
don't need right now, actually, is a faces.config.xml file. And so, you
don't actually need that with JSF 2.0, because you can do a lot of stuff
just with annotations. However, from time to time there is actually
something that needs to go in the faces config file, but we try to get away
from xml as much as possible. But from time to time, you do actually need
that faces config.xml file, just for some global settings that you want to
keep out of your view pages.

So, one of the things that I'm going to use, I'm actually going to add the
faces config.xml file in here, though right now I don't need it. And I've
got nothing in here, so really I've just got the preamble, I've got the
open faces tag, the close faces tag; but you know what, it's not too
painful, just throw it in there. Life is good. We're getting the basic
structure that we need inside of the WEBINF folder of our application:
We've got our deployment descriptor. We've got our faces config.xml file.

What else do we need, if we actually want to have a sweet little
application? Some sort of file to run. I'm going to create a
helloworld.xhtml file. This is a little facelet sort of extension that we
like to use now. With previous versions of JSF, you may have seen .jsp
pages; now you'll see .xhtml pages. You can change back to .jsp if you
like, but this is the new standard of doing things with JSF 2.0. So, I'm
going to place that right in the root of my application, right in that
easyJSF folder. I'm going to create a new little document called
helloworld.xhtml. Of course, I want to change that extension. And what I'm
going to put in here, while I've got a little canned xhtml file.

Here's what my file is going to look like. It's going to look exactly like
that. Add just your little preamble here. Before, we probably saw a taglet
directives, with JSF 1.2. Now, what you do is you just throw in your name
spaces. And, there are really three tag libraries that I'm interested in
using in my JSF applications. Maybe even a fourth one called the component
tag library. But JSF 2.0 comes with the html tag library, the core tag
library, the facelets tag library (where you usually see the prefix UI). As
I say, there's also a components tag library as well, but it's a little bit
more advanced, and I'm not going to jump into that right now.

In fact, in this particular page, the only tag library that I'm going to
use is the html tag library. I've got a little header tag, I've got a body
tag. I even want to print out "hello world," so I use a little output text
tag, right here, that will just print "hello world" into the web page. I'm
going to copy that. Now, go into that xhtml page; open it with NotePad. I'm
hard core; I love the NotePad. Just save that in there. Everything looks
good. I'm going to take another look at that one more time. Yeah, I think
everything looks good; I was just worried that there was going to be some
sort of crazy character set that NotePad's going to use when I save a
particular resource. But otherwise, everything looks good.

I've got a little web application, Java EE compliant. There's my root
folder, easyJSF. Inside that folder I've got my web resource, my view page,
my helloworld.xhtml page. I've also got my WEBINF folder, with the faces
config, the web.xml file. My lib directory. No classes yet, but we'll get
there soon enough. Also, sometimes you'll see a meta-inf folder in here as
well. Really, there's not too much that I can throw in there right now,
although it's a standard WAR file. When you jar things up, it will actually
automatically get at it. But, that looks like a pretty good Java EE web
application.

Now, what do I need to do to deploy it? Well, I need to get all this
content here thrown into a WAR file, a web application archive, and then
that WAR file needs to be put into this webapps directory. I've actually
got a sweet little command that will do that. In order to create a web
application archive, all it is is really just a zip file. So, all you need
to do is take all the content of your easy JSF folder, and throw it into a
WAR file. We can call that WAR file, easyJSF.

Here's the command that I'm going to run from the easyJSF folder. Let me
actually move there for a second. That puts me into the easyJSF folder.
Then, I'm going to issue this particular command from that folder: and
this particular command... Let's just take a look at it here. All it says
is go to the jar utility that's inside the Bin directory of my Java
installation, and then take all the various files and folders and stuff
that's in there, and create a zip file, a jar file--actually that's not
going to be a jar file, it's actually going to have a .war extension, it's
going to be called easyJSF.war--and throw that in the Tomcat 7 webapps
folder.

Here you see the doublesplats. Splat.splat. This basically says take
everything in this current folder, and throw it in that WAR file. The
current folder, of course, is easyJSF. You have to do it from that folder,
otherwise you'll be warring up a bunch of stuff that you don't need. I'll
issue the command. And, what the heck happened there? I know what happened
there. I'm not using a folder called Tomcat 7. I'm just using a folder
called Tomcat.

I think I've done a couple of versions of my book, and I've changed it from
7 to 6, and then, of course, I have to change all the images and update it.
Just putting Tomcat in there is good enough, although it is actually Tomcat
7 that we are using. But once that works, you can see that we've actually
warred everything up. I should have a little file inside this webapps
directory now called easyJSF.war. It's pretty tiny, not too big. That's my
application deployed. Now, it's just a matter of running my application,
and seeing if everything works.

The command to get Tomcat going is simply a matter of going into the bin
directory of Tomcat, and issuing a command startup. It really doesn't get
any easier than that. I end up getting a little command window here, that
tells me that easyJSF context is being initialized. Once it's initialized,
everything is running. Of course, what do I want to do now? I want to
actually run my application. That should just be a matter of going to local
host 8080, which should bring up the Tomcat server. That looks like it's
working well.

When you actually deploy a web application, the context root is just the
name of the WAR file without .war. So, I should be able to come here and do
a slash easyJSF. And, of course, the resource is named index.xhtml, but in
the URL, of course, you put index.faces [because .xhtml is not mapped to
the servlet]. And actually, it's not even indexed. [inaudible 14:48]
.faces. Boy, I almost messed that up in a million different ways. But, of
course, in order to get to the resource named helloworld.xhtml, which has
been placed into this WAR file, which subsequently actually gets deployed
to this easyJSF folder, under webapps--you can actually see it all expanded
in there. Boy, it seems like a lot of work to war things up in a zip file
just so Tomcat can expand them.

The file is actually called helloworld.xhtml, but when I come to my
browser, I actually access it through helloworld.faces. And when it runs, I
get a little "Hello World" that comes up, which is all that we would
expect. And I can even view the page source, and you can see that, although
I've actually got all these JSF tags inside of my xhtml file, the content
that gets delivered to the client is really nothing more than just pure
html.

And that's it. That's actually all you have to do in order to get a little
JSF application running. Just create the folder structure, make sure you've
got the correct libraries you can connect to, add your resource into the
root, war it up with the appropriate commands, start your server, and then
Bob's your uncle.

Anyways, that's it for now. Things are going to get a little bit more
complicated in the future, so stay tuned. For the time being, happy JSF
programming.

More on Java server faces

  • JSF best practices for optimizing mobile application performance

    Tip - More and more applications are being built using the JSF frameworks, but traditional development approaches can create bottlenecks. Here we explore some tips and best practices for optimizing the performance of JSF based mobile applications.

    ( Nov 04, 2014 )

  • Advanced JSF Tutorial: The single page interface (SPI) with Facelets, Ajax and HTML5

    Tutorial - Some say it's impossible, but if you really understand the technology, you will realize that creating a single page interface (SPI) with JSF, Facelets, Ajax and HTML really isn't all that hard. In fact, JavaServer Faces makes it pretty easy!

    ( Sep 07, 2014 )

  • JSF Tutorial: Completing the Ajax based Facelets application

    Tutorial - If you're using JSF, you're probably using Facelets, and if you're creating modern web based applications, you'll likely want to use Ajax based request-response cycles. Here we conclude our tutorial on JavaServer Faces, Facelets and Ajax based programming.

    ( Aug 31, 2014 )

  • Integrating Ajax into your Facelets pages: Death to JSF's request-response cycle

    Tutorial - If you're doing Facelets development, this might be the most important tutorial you will ever read. It will explain to you how to throw out that annoying request-response cycle, and explain how to integrate Ajax based JSF components with a dynamically re-rendering Facelets page snippet.

    ( Jul 20, 2014 )

  • Template based web design with JSF Facelets: ui:insert versus ui:include

    Tutorial - When creating a web page template with JSF, a developer needs to know the difference between ui:insert and ui:include. They're actually quite different, but the similar sounding names can create confusion. Here's a great example of when to use ui:insert and how to properly use ui:include.

    ( Jul 20, 2014 )