JSF Page Lifecycle Management

Filed Under: Java

When the user requests for a page, the lifecycle of JSF begins. JavaServer faces builds the current view from the previously saved state which is infact from the state of the submission of the previous page. The framework performs certain tasks like validating the inputs fields of the page, generating response and so on.

JSF Life cycle involves six phases namely

  1. Restore view phase
  2. Apply request values phase
  3. Process validations phase
  4. Update model values phase
  5. Invoke application phase
  6. Render response phase

Lets look in detail to each of these phases.

  1. Restore view phase: Whenever a request arrives, this is the first phase that gets initiated. When the request arrives – that is, when a button or a link is clicked, jsf builds the view, prepares the event handlers, validates the ui components and saves the view in a faces context. This faces context will have all the previous request’s information to process the current request. If the request is an initial one, the JSF creates an empty view and displays it to the user during a postback. If the postback view already exists, the information is popped out from the saved state.
  2. Apply request values: Once the components are restored from in the first phase, each component extracts its new value which might have been changed from the previous state through a decode method. The extracted value is then stored locally(native data type) along with the component. If the process of decoding fails, an error message is generated and stored in faces context for further action. If the components have their immediate JSF attributes set to true in the page then the events, validation and conversion related to the page will be processed. If any decode method calls the render response phase then the the control is redirected to render response phase itself.
    If the application needs to redirect to a different application it can call FacesContext.responseComplete. By the end of this phase the new values will be set and messages, events will be queued.
  3. Process validations phase: During this phase all the field related validations are processed and added to the component tree. Each and every rule is examined and compared with the values stored on the local component. If the values on the local component is invalid, error messages are registered in faces context and the same page is rendered again with the error message there by navigating to the render response phase.
  4. Update model values phase: Since the Data validations are done in the validation phase now the corresponding server object properties are set and stored in the local components. The bean properties are updated to the corresponding input component attributes.
  5. Invoke application phase: The events like submitting a form, click of a link are handled in this phase. If the processed views are reconstructed based on state information of previous request and if the event is fired it will be broadcasted to interested listeners. If redirection to different web application is invoked again the transition to response render phase takes place.
  6. Render response phase: The Java Server Faces first checks whether it is a jsp page and if yes, the control is transferred to JSP Container. If the request is an initial one, the page is added to the component tree first and stored. If it is not an initial request, the component will already be stored and hence it just gets rendered. In either case the components will render themselves as the JSP container traverses the tags in the page. If any errors are encountered during this process the relevant messages are displayed. After the view is rendered the content will be stored so that when the same request arrives, it can be accessed and also be available for restore view phase.

Lets consider an example to understand each phase.

A page is rendered where user can enter the car details like car id, name, color, model etc and then the entered details will be displayed in the browser.

The addDetailsPage.xhtml contains all the fields of the car into which the user can enter the details. The code for addDetailsPage is as follows.

addDetailsPage.xhtml


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="3">
                <h:outputLabel>Car Id:</h:outputLabel>
                <h:inputText id="cid" value="#{car.id}"></h:inputText>
            <br /> <br />
            <h:outputLabel>Car Name:</h:outputLabel>
            <h:inputText id="cname" value="#{car.cname}"></h:inputText>
            <br /> <br />
            <h:outputLabel for="color">Car color:</h:outputLabel>
            <h:inputText id="color" value="#{car.color}"></h:inputText>
            <br /> <br />
            <h:commandButton value="Reset"  action="#{car.clearAll}"></h:commandButton>
            </h:panelGrid>
        </h:form>
        </h:body>
</html>

Create a Managed Bean Car.java as shown below.


package com.journaldev.jsf.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Car {
    private String cname;
    private String Id;
    private String color;
    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }

    public String getCname() {
                return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }


    public String getId() {
        return Id;
    }

    public void setId(String Id) {
        this.Id = Id;
    }
    
    public void clearAll(){
      this.Id = "";
      this.cname = "";
      this.color="";
  }    
}

Assume that the user enters http://localhost:8080/HelloWorld/faces/addDetailsPage.xhtml in the browser. Below are the execution steps.

Step 1: Since it is a initial request there is nothing to restore hence an empty view is created which is posted back.

Step 2: The values entered by the user for car details are set here like car id=3, name=”Alto” and color=”blue”.

Step 3: Here the validations related to car id, name and color are checked. Since there are no validations set no processing is done here. Suppose, we make car id as mandatory and submit the page with the car id as null, the validator generates error messages and proceeds to the last step which is the render response.

Step 4: In the model phase the values from the page are extracted and inserted into the corresponding variables in the car bean. Clear all method is mapped and functionality of clear all is accomplished here if requested.

Step 5: Here the click of reset button is handled. The view to be rendered is constructed here. This is the result of triggering a functionality in step 4. For example, when we clear the fields, the bean method is executed and the new view is constructed with all the field values set to null.

Step 6: The view page addDetailsPage.xhtml with the final result and field values is rendered. In this example it is a page with all the fields set to blank values.

That’s all for the JSF Page Lifecycle Management, we will look into more of JSF features in coming posts.

Comments

  1. Rais says:

    Best and most simple example to explain life cycle of JSF

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages