Wednesday, December 18, 2013


 In this first introductory lesson to JSF, we will discuss how to build a simple JSF application using NetBeans. In addition, we will explain, in simple words, how this technology works and how you can implement it to your projects. We will use the online documentation from Oracle ( as our major guide for the development of your lessons.
One of the greatest advantages of JavaServer Faces (JSF) technology is that is offers a clean separation between behavior and presentation for web applications. JavaServer Faces (JSF) is a component-based framework. By using components, you can think about your user interface at a higher level. A plethora of API’s exist for representing components and managing their state, handling events, server-side validation, page navigation, etc. 
With minimal effort we can create a web page, drop components on a page to server-side data, bind components on a page to server-side data, wire component-generated events to server-side application code, save and restore application state beyond the life of server requests, and reuse and extend components through customization.

A typical JavaServer Faces application includes the following parts:
  • A set of web pages in which components are laid out.
  • A set of tags to add components to the web page.
  • A set of managed beans, which are lightweight container-managed objects (POJOs). In a JavaServer Faces application, managed beans server as backing beans, which define properties and functions for UI components on a page.
  • A web deployment descriptor (web.xml).
  • Optionally, one or more application configuration resource files, such as faces-config.xml file, which can be used to define page navigation rules and configure beans and other custom objects, such as custom components.
  • Optionally, a set of custom objects, which can include custom components, validators, converters, or listeners, created by the application developer.
  • Optionally, a set of custom tags for representing custom objects on the page.
The following picture (taken from the Oracle Java EE 7 online tutorial) shows the interaction between client and server in a typical JavaServer Faces application. In response to a client request, a web page is rendered by the web container that implements JavaServer Faces technology.


JavaServer Faces technology provides an easy and user-friendly process for creating web applications. Developing a simple JavaServer Faces application typically requires:
  • Creating web pages using component tags
  • Developing managed beans
  • Mapping the FacesServlet instance
We will built a simple JSF application that includes a managed bean and two Facelets web pages. When accessed by a client, the first web page asks the user for his or her name, and the second page responds by providing a greeting.

We will be using NetBeans as our IDE which includes the GlassFish 4.0 application server and an open source database named Derby.

We go to File -> New Project -> Java Web -> Web Application. Click Next.


We name our project Hello1. Accept the default Project Location and click Next.


On Server and Settings window accept the default settings and click Next.

On the Frameworks window click on JavaServer Faces and click Finish.


After the completion of the new web application wizard, create a package inside source packages. We name the new package com.bean. Inside the com.bean package create a new Managed Bean. To do that, right click on the com.bean package -> new -> other -> JavaServer Faces ->JSF Managed Bean.


Name the name “Hello” to the Class Name, accept the default “hello” on the Name field, and change the Scope to “request”. We will discuss the importance of the scope options and how they affect the operation of an application in a future lesson. Click Finish.

  The Hello class, called managed bean class, manages the user data. A bean is a Java class that exposes properties, by following a simple convention for the setter and getter methods. Note the @Named annotation that specifies the name by which an object of this class is referenced in the JSF pages. If you use the default name of the bean class, you can specify @Model as the annotation instead of having to specify both @Named and @RequestScoped. The @Model annotation is called a stereotype, a term for an annotation that encapsulates other annotations. The @ManagedBean annotation is intended for use with legacy application servers and standalone servlet runners. 


Now, we need to create our JSF pages. In order to do that, we need to add JSF tags to an XHTML page. An XHTML page is simply an HTML page that is also proper XML and has an .xhtml extension. 
Older versions of JSF were based on JavaServer Pages (JSP), which caused some unpleasant technical problems. Then Facelets came along providing better error messages, a mechanism for factoring out common page parts, and an easier mechanism for writing your own components. So, the result now is when you author a Facelet page, you actually add JSF tags to an XHTML page. We will discuss more about Facelets in future lessons.

Let’s take a look at the index.xhtml and add some code to it.


JavaServer Faces technology supports various tag libraries to add components to a web page. To support the JavaServer Faces tag library mechanism, Facelets uses XML namespace declarations. So, we import the HTML JavaServer Faces tag library which provides custom tags for UI components like text boxes, output labels, and forms. The prefix “h” is suggested but is not required. So by adding the we can use the JavaServer Faces HTML tags such as h:head and h:body.

We add the following code:


The tag represents an HtmlForm component, which is a container for other components and is used for posting information back to the server. You can have more than one HtmlForm on the same page, but all input controls must be nested within a tag.

The tag is used to create an HtmlInputText component that accepts input. Note that the value property is “#{} which is a JSF Expression Language (EL) expression referencing the name property of a backing bean called Hello.

Faces will automatically search the different scopes of the web application for the specified backing bean. In this case, it will find a bean stored under the name Hello in the request scope.

Input controls have a required property, which determines whether or not the field must have a value. In this case, required is set to true, so the component will only accept non-empty input. In the user enters an empty value, the page will be redisplayed with an error message.

The specifies an HtmlCommandButton component which sends action events to the application when it is clicked by a user. The value of the action property references a specialized event listener that handles navigation. In our case, by clicking on this button loads the greeting.xhtml page.
The greeting.xhtml page looks like this:

The tag simply displays read-only data to the screen. The value attribute specifies the text you want to display.
The output of our simple application looks like this:


Michail Kassapoglou