JSF 2.0 Tutorials

JavaServer Faces 2.0 with Facelets and Ajax

Interested in training from the author of these tutorials? See the upcoming JSF 2.0 training courses in San Francisco and Maryland, or contact hall@coreservlets.com for info on customized JSF 1.x or JSF 2.0 courses at your location.


This tutorial covers JSF 2.0 using the Mojarra JSF 2.0 implementation, but the the JSF 1.x tutorial covers JSF 1 with Apache MyFaces. Click on a topic below to get the detailed tutorial or download the source code. The examples here were developed and deployed on Tomcat, but they will run on any Java server that supports servlets 2.5 or later.

This tutorial is derived from Marty Hall's world-renowned live JSF training courses. Courses on JSF 1.x or 2.0 are usually taught on-site at customer locations, but servlet, JSP, Ajax, GWT, Struts, JSF 1.x, and JSF 2.0 training courses at public venues are periodically scheduled for people with too few developers for an onsite course. For descriptions of the various other courses that are available, please see the Java EE and Ajax training course page. To inquire about a customized training course at your location, please contact Marty at hall@coreservlets.com. Courses on servlets, JSP, Ajax, GWT, Struts, Hibernate, Java 5, and Java 6 also available.

If you find these free tutorials helpful, we would appreciate it if you would link to us. Send corrections or feedback on any tutorial to hall@coreservlets.com.

Getting Started with JSF 2.0

This section describes the software and setup needed to run JSF 2.0 with Eclipse and either Tomcat 6 or Glassfish 3. It also gives a brief example with annotated code.

  • This tutorial section in PDF.
  • Source code of examples in this section.
    • jsf-basics.zip Sample JSF 2 application that you can import into Eclipse and deploy to Tomcat 6, Glassfish, or any other server that supports servlets 2.5 or later. If you deploy to Tomcat 6, use the project exactly as is. If you deploy to Glassfish 3 or another Java EE 6 server, you can save space and delete the two unneeded JAR files from WEB-INF/lib. Details on importing into Eclipse and deploying to Tomcat or Glassfish are given in the tutorial section above. The actual code is explained in detail in later tutorial sections.
    • Individual files for you to import into your own Dynamic Web Project, so that you can confirm that you know where each type of file belongs. Locations of each file and the code itself is explained in the tutorial section above.
    • jsf-test.zip This is what your app should look like after you import the individual pieces above.
  • Topics covered:
    • Overview of JSF 2.0
    • Needed software
      • Installing Java SE 6
      • Installing Eclipse 3.5
      • Installing a server for JSF 2.0
        • Tomcat 6 (also needs jsf-api.jar and jsf-impl.jar) or
        • Glassfish 3
    • Testing projects
      • Importing and testing an existing JSF 2.0 project
      • Making your own JSF 2.0 project
      • Adding code to your JSF 2.0 project
    • Summary of code in jsf-test project

New Features in JSF 2.0

Here is a brief summary of the most important JSF 2.0 features. Details and annotated source code are in the next section (JSF 2.0 Whirlwind Tour).

  • You have more debugging help during project development. To get started with JSF 2.0, at the very least you need a web.xml with a url-pattern for *.jsf or something similar, and a faces-config.xml with valid start and end tags, just as in JSF 1.x. However, in JSF 2.0, you can optionally add a PROJECT_STAGE setting of Development to web.xml. By doing this, many errors that would silently fail in JSF 1.x now result in explicit error messages.
  • Facelets, not JSP, is the standard technology for all your JSF pages. Name the pages blah.xhtml, but use the URL blah.jsf (assuming a url-pattern of *.jsf in web.xml). Use xhtml format for the pages themselves. Don't use @taglib, but instead use xmlns:h="http://java.sun.com/jsf/html". Then, use h:head, h:body, and h:form (but not f:view) in the page. You can find a representative sample here.
  • You can use default bean names. Instead of declaring beans with managed-bean in faces-config.xml, you can put @ManagedBean above the class definition. Then, take the bean classname, change the first letter to lower case, and use that as the managed bean name. For example, if the class is package1.package2.MyBean, you would use #{myBean.whatever} in your code. You can also do @ManagedBean(name="someName"). Beans are request scoped by default, but there are annotations like @SessionScoped to change the default. This sample bean and the sample .xhtml page from above illustrate this.
  • You can use default mappings of outcomes to results pages. In the absence of explicit navigation rules, the return values of the action controller method correspond to the file names that should be used. Suppose that your form (file form.xhtml, URL form.jsf) says <h:commandButton ... action="#{someBean.someMethod}"/>. When the button is pressed, the bean named someBean is instantiated (assuming request scope), setter methods corresponding to the h:inputBlah elements are run, validation occurs, and then someMethod is executed. This is the same as in JSF 1.x, except that the managed bean name (someBean) can be derived from the bean class name (SomeBean). But now, if someMethod returns "foo" and "bar", and there are no explicit navigation rules in faces-config.xml for those outcomes, then JSF will assume that they correspond to foo.xhtml and bar.xhtml (from the same folder as form.xhtml), respectively. For example, in the this sample bean, the outcomes correspond to accepted.xhtml and rejected.xhtml.
  • You can usually use #{myBean.myProperty} instead of <h:outputText value="#{myBean.myProperty}"/>. If you don't need any fancy options, the first form is much more concise. Both forms escape HTML characters, and thus can be used for properties containing user input. You only need h:outputText when you need escape="false" or want to compute the render property or need to assign an id or want use another less-common feature of h:outputText.
  • You can easily Ajaxify your application. Add xmlns:f="http://java.sun.com/jsf/core" to the page header. Inside the start and end tags for h:commandButton, put <f:ajax execute="@form" render="formId:resultId"/>. Then, also have <h:outputText value="#{myBean.myProperty}" id="resultId"/>. This means that when the button is pressed, all the form elements are sent to the server and executed normally. Then the action controller method is executed normally. Then, the value of getMyProperty is computed and sent back to the server. JavaScript receives the value and inserts it into the current page in the place where the h:outputText element initially was. The next section has a detailed example.

JSF 2.0: A Whirlwind Tour

This section gives details and sample code for the new features described briefly in the previous section.

  • This tutorial section in PDF.
  • Source code of examples in this section, bundled as an Eclipse project. If you deploy to Tomcat 6 or another servlet/JSP engine supporting servlets 2.5 or later, use the project exactly as is. If you deploy to Glassfish 3 or another Java EE 6 server, you can save space and delete the two unneeded JAR files from WEB-INF/lib.
  • Topics covered:
    • Setup review
    • New facelets page format
    • New annotations for managed beans
    • New default mappings of return values to results pages
    • Old-style explicit mappings of return values to results pages
    • New, more concise way to output bean values
    • New support for Ajax and incremental page updates

Using the New JSF 2.0 Annotations

  • This tutorial section in PDF.
  • Source code of examples in this section, bundled as an Eclipse project. If you deploy to Tomcat 6 or another servlet/JSP engine supporting servlets 2.5 or later, use the project exactly as is. If you deploy to Glassfish 3 or another Java EE 6 server, you can save space and delete the two unneeded JAR files from WEB-INF/lib.
  • Topics covered:
    • @ManagedBean and default bean names
    • Default mappings for action controller return values
    • Custom bean names
    • Using bean properties to handle request parameters
    • Annotations for bean scopes
      • @SessionScoped, @ApplicationScoped
      • Other scopes
    • @ManagedProperty and dependency injection

Ajax Support in JSF 2.0

  • This tutorial section in PDF.
  • Source code of examples in this section, bundled as an Eclipse project. If you deploy to Tomcat 6 or another servlet/JSP engine supporting servlets 2.5 or later, use the project exactly as is. If you deploy to Glassfish 3 or another Java EE 6 server, you can save space and delete the two unneeded JAR files from WEB-INF/lib.
  • Topics covered:
    • Motivation
      • Ajax in general
      • Ajax integrated with JSF 2.0
    • Using f:ajax
      • Overview
      • render: specifying elements to update on client
      • execute: specifying elements to process on server
      • event: specifying user events to respond to
      • onevent: specifying JavaScript side effects
      • Limitations on the use of h:outputText with Ajax

Page Templating with Facelets

  • This tutorial section in PDF.
  • Source code of examples in this section, bundled as an Eclipse project. If you deploy to Tomcat 6 or another servlet/JSP engine supporting servlets 2.5 or later, use the project exactly as is. If you deploy to Glassfish 3 or another Java EE 6 server, you can save space and delete the two unneeded JAR files from WEB-INF/lib.
  • Topics covered:
    • Motivation
    • Basic mechanism
      • Template file
      • Client file
    • Templating with includes
    • Handling relative URLs
      • And relocatable resources

Other JSF 2.0 Features

Coming October 2009. At some point I plan to cover validation, page templating, composite components, bookmarking results pages, event handling, looping tags, and more. Email me at hall@coreservlets.com if you have strong opinions about which features should be covered next.

Source Code

Source code for all examples in this tutorial can be downloaded from the JSF 2 sample code repository. Each section also has links to the code used in that section.

PowerPoint Files for University Faculty

The PDF files in this tutorial contain the complete text of the original PowerPoint files, so if your goal is learning JSF, just stick with this tutorial. However, as a service to instructors teaching full-semester courses at accredited universities, coreservlets.com will release the original PowerPoint files for free. Please see the instructor materials page for details.

More Information

Java

Servlets & JSP

JSF
Ajax, GWT, & JavaScript

Spring, Hibernate, & JPA

Struts