Throughout this article, we will follow the “learning by example” technique, and we will develop a completely functional JSF application that will represent a JSF registration form as you can see in the following screenshot. These kinds of forms can be seen on many sites, so it will be very useful to know how to develop them with JSF Tools.

The example consists of a simple JSP page, named register.jsp, containing a JSF form with four fields (these fields will be mapped into a managed bean), as follows:

• personName – this is a text field for the user’s name
• personAge – this is a text field for the user’s age
• personPhone – this is a text field for the user’s phone number
• personBirthDate – this is a text field for the user’s birth date

The information provided by the user will be properly converted and validated using JSF capabilities. Afterwards, the information will be displayed on a second JSP page, named success.jsp.

Overview of JSF

Java Server Faces (JSF) is a popular framework used to develop User Interfaces (UI) for server-based applications (it is also known as JSR 127 and is a part of J2EE 1.5). It contains a set of UI components totally managed through JSF support, like handling events, validation, navigation rules, internationalization, accessibility, customizability, and so on. In addition, it contains a tag library for expressing UI components within a JSP page. Among JSF features, we mention the ones that JSF provides:

• A set of base UI components
• Extension of the base UI components to create additional UI component libraries
• Custom UI components
• Reusable UI components
• Read/write application date to and from UI components
• Managing UI state across server requests
• Wiring client-generated events to server-side application code
• Multiple rendering capabilities that enable JSF UI components to render themselves differently depending on the client type
• JSF is tool friendly
• JSF is implementation agnostic
• Abstract away from HTTP, HTML, and JSP

Speaking of JSF life cycle, you should know that every JSF request that renders a JSP involves a JSF component tree, also called a view. Each request is made up of phases. By standard, we have the following phases (shown in the following figure):

• The restore view is built
• Request values are applied
• Validations are processed
• Model values are updated
• The applications is invoked
• A response is rendered
• During the above phases, the events are notified to event listeners

We end this overview with a few bullets regarding JSF UI components:

• A UI component can be anything from a simple to a complex user interface (for example, from a simple text field to an entire page)
• A UI component can be associated to model data objects through value binding
• A UI component can use helper objects, like converters and validators
• A UI component can be rendered in different ways, based on invocation
• A UI component can be invoked directly or from JSP pages using JSF tag libraries

Creating a JSF project stub

In this section you will see how to create a JSF project stub with JSF Tools. This is a straightforward task that is based on the following steps:

1. From the File menu, select New | Project option. In the New Project window, expand the JBoss Tools Web node and select the JSF Project option (as shown in the following screenshot). After that, click the Next button.

   

2. In the next window, it is mandatory to specify a name for the new project (Project Name field), a location (Location field—only if you don’t use the default path), a JSF implementation (JSF Environment field), and a template (Template field). As you can see, JSF Tools offers a set of predefined templates as follows:
   • JSFBlankWithLibs—this is a blank JSF project with complete JSF support.
   • JSFKickStartWithLibs—this is a demo JSF project with complete JSF support.
   • JSFKickStartWithoutLibs—this is a demo JSF project without JSF support. In this case, the JSF libraries are missing for avoiding the potential conflicts with the servers that already offer JSF support.
   • JSFBlankWithoutLibs—this is a blank JSF project without JSF support. In this case, the JSF libraries are missing for avoiding the potential conflicts with the servers that already offer JSF support (for example, JBoss AS includes JSF support).

   The next screenshot is an example of how to configure our JSF project at this step. At the end, just click the Next button:

   

   This step allows you to set the servlet version (Servlet Version field), the runtime (Runtime field) used for building and compiling the application, and the server where the application will be deployed (Target Server field). Note that this server is in direct relationship with the selected runtime. The following screenshot shows an example of how to complete this step (click on the Finish button):

   

After a few seconds, the new JSF project stub is created and ready to take shape! You can see the new project in the Package Explorer view.