An Introduction to JavaServer Faces (JSF) 1




What do we have in this session 1?

  1. An Introduction

  2. Contents

  3. Adding JSF 2.0 Support to a Web Application


  1. Creating a Managed Bean

  2. Using the Managed Bean Wizard

  3. Creating a Constructor

  4. Adding Properties

  5. Wiring Managed Beans to Pages

  6. The index.xhtml File

  7. Optional Steps: Using NetBeans IDE’s Java Debugger

  8. The response.xhtml File

  9. Applying a Facelets Template

  10. Creating the Facelets Template File

  11. Creating Template Client Files

  12. The greeting.xhtml File

  13. The response.xhtml File


The original tutorial can be found at and this is a refined version with details step-by-step screenshots and any incorrect information found was rectified. To complete this tutorial, you need the following software and resources.


Software or Resource

Version Required

NetBeans IDE, Java bundle

6.8 or 6.9


Windows XP Pro SP2

Java Development Kit (JDK)


GlassFish server

v3 or Open Source Edition 3.0.1

Internet Browser -

jsfDemo web application project



To compare your project with a working solution, download the completed sample project.


An Introduction


JavaServer Faces (JSF) is a user interface (UI) framework for Java web applications. It is designed to significantly ease the burden of writing and maintaining applications that run on a Java application server and render their UIs back to a target client. JSF provides ease-of-use in the following ways:


  1. Makes it easy to construct a UI from a set of reusable UI components.
  2. Simplifies migration of application data to and from the UI.
  3. Helps manage UI state across server requests.
  4. Provides a simple model for wiring client-generated events to server-side application code.
  5. Allows custom UI components to be easily built and re-used.

This tutorial demonstrates how you can apply JSF 2.0 support to a web application using the NetBeans IDE. You begin by adding JSF 2.0 framework support to a basic web application, and proceed by:


  1. creating a JSF managed bean to handle request data,
  2. wiring the managed bean to the application's web pages, and
  3. converting the web pages into Facelets template files.




  1. Adding JSF 2.0 Support to a Web Application
  2. Creating a Managed Bean

a.    Using the Managed Bean Wizard

b.    Creating a Constructor

c.    Adding Properties

  1. Wiring the Managed Bean to Pages

a.    index.xhtml

b.    response.xhtml

  1. Applying a Facelets Template

a.    Creating the Facelets Template File

b.    Creating Template Client Files


Adding JSF 2.0 Support to a Web Application


Begin by opening the jsfDemo web application project (please download and unzip the file) in the IDE. Once you have the project opened in the IDE, you can add framework support to it using the project's Properties window.


1.    Click the Open Project ( NetBeans Open Project button) button in the IDE's main toolbar, or press Ctrl-Shift-O (-Shift-O on Mac).


Opening the existing Java JSF project in NetBeans


2.    In the Open Project dialog, navigate to the location on your computer where you stored the unzipped tutorial project. Select it, and then click Open Project to open it in the IDE.










Selecting the existing JSF demo project as a template


3.    Run the project to see what it looks like in a browser. Either right-click the jsfDemo project node in the Projects window and choose Run, or click the Run Project ( NetBeans Run Project button) button in the main toolbar. The project is packaged and deployed to the GlassFish server, and your browser opens to display the welcome page (index.xhtml).


Running the JSF sample project in NetBeans


The JSF sample project run in NetBeans


Click the submit button. The response page (response.xhtml) displays as follows.



Currently the welcome and response pages are static and, together with the stylesheet.css file and duke.png image, are the only application files accessible from a browser.


The response.xhtml file seen in NetBeans IDE Project page





In the Projects window (Ctrl-1; -1 on Mac), right-click your project node and choose Properties. The Project Properties window displays.


Invoking the NetBeans JSF project property page


Select the Frameworks category, and then click the Add button. In the dialog that displays, select JavaServer Faces then click OK.


Adding new Java Framework to the existing JSF project








Selecting the JavaServer Faces framework for the existing JSF project


JavaServer Faces framework was successfully added to the existing JSF project


After selecting JavaServer Faces, various configuration options become available. Under the Libraries tab, you can specify how the project accesses JSF 2.0 libraries. The default option is to use the libraries included with the server (the GlassFish server). However, the IDE also bundles the JSF 2.0 libraries. NetBeans 8.9.1 selected the JSF 2.0 by default and the options were grayed.


The JSF libraries settings and options


Click the Configuration tab. You can specify how the Faces servlet is registered in the project's deployment descriptor. You can also indicate whether you want Facelets or JSP pages to be the used with the project.


The JSF configuration settings or options page


Click OK to finalize changes and exit the Project Properties window.


After adding JSF support to your project, the project's web.xml deployment descriptor is modified to look as follows. To open web.xml in the editor, double click the file in the left pane and edit as shown below. (Changes are in bold.)


<web-app version="3.0" xmlns="" xmlns:xsi="" xsi:schemaLocation="">






        <servlet-name>Faces Servlet</servlet-name>





        <servlet-name>Faces Servlet</servlet-name>













The following is the screenshot for web.xml content.


The web.xml file content


Important: If your <welcome-file> entry does not contain 'faces/', you should add it manually. This ensures that your project's welcome page (index.xhtml) passes through the Faces servlet before being displayed in a browser. This is necessary in order to render the Facelets tag library components properly. See Issue 182277 for more information.

The Faces servlet is registered with the project, and the index.xhtml welcome page is now passed through the Faces servlet when it is requested. Also, note that an entry for the PROJECT_STAGE context parameter has been added. Setting this parameter to 'Development' provides you with useful information when debugging your application.

You can locate the JSF libraries by expanding the project's Libraries node in the Projects window. If you are using the GlassFish server's default libraries, these are the jsf-api.jar and jsf-impl.jar files listed under the GlassFish Server node.

The IDE's JSF 2.0 support primarily includes numerous JSF-specific wizards, and special functionality provided by the Facelets editor. You explore these functional capabilities in the following steps.





< Java and Friends | JavaServer Faces (JSF) 2 >





JavaServer Faces 1 | JavaServer Faces 2 | JavaServer Faces 3 | JavaServer Faces 4 | JavaServer Faces 5 | JavaServer Faces 6 | JavaServer Faces 7 | JavaServer Faces 8 | JavaServer Faces 9 | Java and Friends