Introduction to Java Server Faces

Author  : Mohammed Sajadh N.A
Version : 1.0
Date     : 14 Feb 2013

Introduction

·         In Fact, JSF is nothing but an abstraction over the existing Web Framework. JSF is implemented as a Servlet which is called the Faces Servlet

·         Java Server Faces which provides a Component-Based Architecture for developing reusable User Interface Components hides most of the complex stuffs that are happening in the View portion of the MVC-2 Architecture.

[MVC-2 Architecture: A client who is normally a HTML Browser sends a request to the server. The Web Server receives the request, encapsulates the request and then populates this request object with the various parameter values from the client and will send it to the Servlet. The Servlet which acts as a Controller, analyses the request, then will interact with the Model (Java Beans) that executes the various application business logic and then chooses which View to be shown to the User.]

·         Feature:-

·          developing customized User Interface

·          Event handling Mechanism

·          Validating User Inputs that are sent by the clients

·          Easy Page Navigation Mechanism etc

·         Pros:-

·          degree of coupling between the UI Components that represent the various behaviour/properties and its Rendering is very low.

(So, HTML browsers are not the only target client applications. JSF Applications works even well with WML Browsers.)

Basic Elements of JSF
         

1. User Interface Components
2. Managed Beans
3. Validators
4. Convertors
5. Events and Listeners
6. Page Navigation
7. Renderers

All the above-mentioned components can be found in separated packages in the API.

Eg:- User Interface Components == javax.faces.component

   Validation == javax.faces.validator

 

1.       User Interface Components  [ javax.faces.component]

·         If Java Swings represent the UI components for a Desktop Java Application, then JSF UI Components are meant for the Web Applications.

·         The JSF User Interface Components are developed with Java Beans Specifications. It means that JSF Components have properties, methods and events as they are normally found for a traditional Java Bean

·         The most commonly used ones are Label, Text-Field, Form, Check-Box, Drop-Down Box etc. JSF also provides a framework for creating Customized UI Components.

2.      Managed Beans

·         Managed Beans are standard Java classes that follow the Java Beans Specification.Generally, Managed Beans are used to represent the user inputs

·         They may even act as Listeners and can handle the appropriate Actions

The following code snippet shows how to represent the Text-Field and the command button,

    <html:inputText

        id = "strToBeEncryptedTextField"

        value = "#{EncryptionBean.strToBeEncrypted}">

    </html:inputText>

    <html:commandButton

        id = "encryptButton"

        actionListener = "#{EncryptionBean.doEncryption}">

    </html:commandButton>

                          

The Text-Field has two attributes namely id and value. The id attribute uniquely identifies the Text-Field component from other Components in the View.

The value for the attribute value is #{EncryptionBean.strToBeEncrypted}. This expression is a JSF EL Expression. The EL expression can be interpreted as follows, Take the value of the string to be encrypted from the UI Component and map it to the property called strToBeEncrypted which is inside the class called EncryptionBean.

It means that the declaration of the Managed Java Bean class may look something like the following,

class EncryptionBean{

        private String strToBeEncrypted;

        public String getStrToBeEncrypted(){

            return strToBeencrypted;

        }

        public void setStrToBeEncrypted(String strToBeEncrypted){

            this.strToBeEncrypted = strToBeEncrypted;

        }

        // Other things goes here

    }

 ‘encryptButton’ is uniquely used to identify the command button object, the attribute actionListener is used to provide the listener method that will get invoked as a result of someone clicking the button.

So, actionListener = "#{EncryptionBean.doEncryption}" essentially says that there is a method called doEncryption() within the EncryptionBean class. Following code snippet may prove this,

class EncryptionBean{

        …

        public void doEncryption(javax.faces.event.ActionEvent event){

        }

        …

    }

3.      Validator [javax.faces.validator]

·         JSF already have the Common Validation API being implemented for almost all controls in the javax.faces.validator package

·         it also allows the developers to provide their own Custom Validation Classes through the help of Configuration Files.

EX:- <html:inputText identifier = "employeeAgeTextField">

            <f:validateLongRange minimum = "25" maximum = "35">

            </f:validateLongRange>

            </html:inputText>

4.      Convertors  [javax.faces.convert]

·         Every piece of request that is passed from the client to the server is interpreted as a String value only. But when it on saving into database we need to convert it to particular data type that on table structure.

·         In JSF , this becomes easy. By API javax.faces.convert.

<html:inputText identifier = "numberTextField">

        <f:convertNumber pattern = "###,###">

        </f:convertNumber>

</html:inputText>

In the above, we have a Number Converter which converts the number given by the user to the specified format. For example, if the original value entered by the user is 123456, then the after the conversion process the value becomes ’123,456′.

5.      Events and Listeners

·         JSF UI Event Mechanism is very similar to the one found in Swing UI Components

·         In JSF, all the UI Components can emit any number of events.

EX:-  <html:inputText

          identifier = "submitButton"

          value = "Click Me"

          actionListener = "#{SomeBean.submitButtonClicked}"

          </html:inputText>

In the above code, we can see that how a UI Component can be associated with an Event-Handler with the help of actionListener attribute. The code essentially says that whenever an ActionEvent is emitted by the button (which will happen usually when the user clicks the button or presses the Enter key over the button) call the Event Listener’s method submitButtonClicked inside the SomeBean class.

6.      Navigation

·         The Navigation Handler provides a simple yet a powerful framework for controlling the navigation.

EX:- For any single request page, there may be a number of response pages. Assuming that in a data-entry application, if the request page, say ‘enterdata.jsp’, is a view showing all the input controls to get data from the user, then the following responses may be available.

The user has entered all the data and the result is a ‘success’ so that a page called

• ‘success.jsp’ page is displayed
• The user has entered a mix of correct and incorrect data in which case, the result or theresponse is a ‘partialsuccess’ and some jsp page called ‘partialsuccess.jsp’ is displayed.
• The user hasn’t entered any correct values which means that result is a ‘failure’ whichresults in the display of a page called ‘failure.jsp’.

     <navigation-rule>

        <from-view-id>/dataentry/enterdata.jsp</from-view-id>

        <navigation-case>

            <from-outcome>success</from-outcome>

            <to-view-id>/dataentry/success.jsp</to-view-id>

        </navigation-case>

        <navigation-case>

            <from-outcome>partialsuccess</from-outcome>

            <to-view-id>/dataentry/partialsuccess.jsp</to-view-id>

        </navigation-case>

        <navigation-case>

            <from-outcome>failure</from-outcome>

            <to-view-id>/dataentry/failure.jsp</to-view-id>

        </navigation-case>

      </navigation-rule>