Free tutorials for Java, Eclipse and Web programming



Follow me on twitter

JSF (JavaServer Faces) Tutorial

Lars Vogel

Version 1.2

15.03.2010

Revision History
Revision 0.126.02.2008Lars Vogel
Started article
Revision 0.215.10.2008Lars Vogel
Continued
Revision 0.312.11.2008Lars Vogel
Clean-up work
Revision 0.3.121.11.2008Lars Vogel
Typo correction
Revision 0.422.11.2008Lars Vogel
Extended the ToDo example
Revision 0.525.05.2009Lars Vogel
Small adjustments
Revision 0.615.09.2009Lars Vogel
Typo corrected
Revision 0.707.10.2009Lars Vogel
improved JSF overview
Revision 0.817.11.2009Lars Vogel
Fixed missing download link for JSF
Revision 0.919.11.2009Lars Vogel
Update to Eclipse 3.5
Revision 1.027.01.2010Lars Vogel
Clean-up, added JSTL library
Revision 1.104.02.2010Lars Vogel
typos corrected
Revision 1.215.03.2010Lars Vogel
minor re-work

JavaServer Faces with Eclipse

This article describes how to develop JavaServer Faces web applications with Eclipse WTP JSF tooling. It demonstrates managed beans, validators, external resource bundles and the JSF navigation concept.

This tutorial was developed with Java 1.6, JavaServerFaces 1.2, the Apache MyFaces JSF implementation, Tomcat 6.0 and Eclipse 3.5.


Table of Contents

1. JavaServer Faces - JSF
1.1. What is JSF
1.2. A JSF application
1.3. Value and Method Binding
1.4. Prerequisites to use JSF
1.5. JSF Main features
1.6. JSP and JSF
2. JSF configuration files
2.1. Overview
2.2. web.xml
2.3. faces-config.xml
3. Installation
3.1. Eclipse
3.2. JSF library
3.3. JSLT library
4. Your first JSF project
4.1. Create JSF Project
4.2. Review the generated project
4.3. Domain Model
4.4. Define managed bean
4.5. Create JSP
4.6. Run your webapplication
4.7. Layout via css
5. Your second JSF application
5.1. Create JSF Project
5.2. Domain model
5.3. Register your managed beans
5.4. Validators
5.5. Resource bundle for messages
5.6. JavaServer Page with JSF components
5.7. Navigation Rule
5.8. Run your webapplication
6. JSF application with a controller
6.1. Create JSF Project
6.2. Domain model
6.3. Controller
6.4. Register your managed beans- Dependency injection
6.5. Resource bundle for messages
6.6. JavaServer Page with JSF components
6.7. Run your webapplication
7. A Todo JSF application
7.1. Create JSF Project
7.2. Domain model
7.3. Controller
7.4. Register your managed beans
7.5. Create css
7.6. JavaServer Page with JSF components
7.7. Run your webapplication
8. Thank you
9. Questions and Discussion
10. Links and Literature
10.1. Tutorials and Websites
10.2. JSF component libraries

1. JavaServer Faces - JSF

1.1.  What is JSF

JavaServer Faces (JSF) is a UI component based Java Web application framework. JSF is serverbased, e.g. the JSF UI components and their state are represented on the server with a defined life-cycle of the UI components. JSF is part of the Java EE standard.

A JSF application run in a standard web container, for example Tomcat or Jetty .

This articles provides an introduction to JSF using only standard JSF features. For the usage of special Apache Trinidad features please see Apache Myfaces Trinidad with Eclipse - Tutorial .

1.2.  A JSF application

A JSF application consists of web pages with JSF UI components. A JSF application requires also some configuration files ("faces-config.xml" and "web.xml").

The faces-config.xml defines:

  • Managed Bean - the data elements of the JSF application (managed beans and backing beans) Represents a Java class which will be created dynamically during runtime of the JSF application. It can be defined for which scope the bean is valid (Session, Request, Application or none).

  • the navigation between web pages

  • data validators - Used to check the validity of UI input

  • data converters -Used to translate between UI and model

Managed beans are simple Java objects (POJO's) which are declared in "faces-config.xml" and can be used in an JSF application. For example you can define a Java object "Person". Once you define the object in faces-config.xml you can use the attributes of Person in your JSF UI components, e.g. by binding the value "firstName" of this object to an JSF input field.

JSF uses the Unified Expression Language (EL) to bind UI components to object attributes or methods.

1.3. Value and Method Binding

In JSF you can access the values of a managed bean via value binding. For value binding the universal Expression Language (EL) is used (to access bean and / or methods). In JSF you do not need to specify the get() or set() method but just the variable name.

Method binding can be used to bind a JSF component, e.g. a button to an method of a Java class.

Tip

Expression Language statements either start with "${" or with "#{" and end with "}". JSP EL expressions are using the ${...} syntax. These EL expressions are immediately evaluated. JSF EL expressions are of the type #{...}. These are only evaluated when needed (and otherwise stored as strings).

1.4.  Prerequisites to use JSF

To use JSF you need:

  • JSF Implementation (in the form of the JSF jars)

  • The JSTL tags library

  • A Java runtime environment

  • A web-container to use JSF in (for example Tomcat)

1.5.  JSF Main features

JSP has the following main features:

  • JSP is based on the Model-View-Controller concept

  • JSP has a stateful UI component model, e.g. each component is aware of its data

  • JSF separates the functionality of a component from the display of the component. The renderer is responsible of displaying the component for a certain client. This renderer can get exchanged. The standard renderer for JSF components is the HTML renderer.

  • JSP support listeners on UI components

  • JSP support data validation, data binding and data conversion between the UI and the model

1.6. JSP and JSF

In this tutorial the JSF application will be build based on JavaServer Pages (JSP's). JSTL tags are used to include JSF UI components into the JSP. This is standard in JSF 1.2. The JSF 2.0 version is using Facelets.