JSF Lifecycle Diagram - ICEsoft Technologiesres.icesoft.org/self-serve-training/Intro-to-IF-1.8-Chapter-2... · JSF Lifecycle Diagram (HTTP ... be registered as a PhaseListener when

JSF Lifecycle Diagram

APPLY_REQUEST_VALUES

ProcessEvents

ProcessDecodes

RESTORE_VIEW

BuildComp Tree

ParsePDL

ApplySaved State(Post Only)

HTTP POST / Partial Submit

PROCESS_VALIDATIONS

ProcessEvents

ProcessValidators

FacesRequest

HTTPGET

If immediate=“true” then Actions, Action Listeners, and Value Change Listeners fire here

<f:view><h:form><h:outputLabel /><h:inputText />

Facelet View Markup UIViewRoot

HtmlForm

HtmlOutputLabel

Component Tree

Value Change Listeners Fire

Here

ICESOFT TECHNOLOGIES INC. www.icefaces.org

Conversion/Validation Failure

UPDATE_MODEL_VALUES

ProcessUpdates

ProcessEvents

INVOKE_APPLICATION

ProcessApplication

ProcessEvents

RENDER_RESPONSE

ProcessRenderers

SaveComp State

Conversion/Validation Success

FacesResponse

Actions & Action Listeners fire

here

<h:inputText /><h:commandButton />

</h:form></f:view> HtmlCommandButton

HtmlInputText

JSF Lifecycle

• The framework defines a lifecycle that executes in distinct phases:– Restore View

– Apply Request Values

– Process Validations

– Update Model Values


– Update Model Values

– Invoke Application

– Render Response

JSF Lifecycle Phase: Restore View

RESTORE_VIEW

BuildComp Tree

ParsePDL




HtmlForm

HtmlOutputLabel

Component Tree


• The Restore View phase restores an existing view from the previous request, or creates a new view for an initial request

• The resulting view is put into the current FacesContext



HtmlInputText

JSF Lifecycle Diagram (HTTP GET)

RESTORE_VIEW

BuildComp Tree

ParsePDL

(GET Only)

FacesRequest

HTTPGET



HtmlForm

HtmlOutputLabel

Component Tree


RENDER_RESPONSE

ProcessRenderers

SaveComp State

FacesResponse



HtmlInputText

JSF Lifecycle Phase: Render Response

• The Render Response phase is responsible for– Invoking component renderers for the appropriate client device

– Sending a fully encoded response back to the client

– The response is typically HTML markup that is written to the HttpServletResponse OutputStream

Rendered HTML for Web Browser


RENDER_RESPONSE

ProcessRenderers

SaveComp State

<html id="document:html"><body id="document:body"><form id="form1">

<label for="firstName" /><input id="firstName" /><input type="submit" />

</form></body>

Rendered HTML for Web Browser

JSF Lifecycle Diagram (HTTP POST – Valid Values)


ProcessEvents

ProcessDecodes

RESTORE_VIEW

BuildComp Tree

ApplySaved State(POST Only)


PROCESS_VALIDATIONS

ProcessEvents

ProcessValidators

FacesRequest

UIViewRoot

HtmlForm

HtmlOutputLabel

Component Tree


UPDATE_MODEL_VALUES

ProcessUpdates

ProcessEvents

INVOKE_APPLICATION

ProcessApplication

ProcessEvents

RENDER_RESPONSE

ProcessRenderers

SaveComp State


FacesResponse

HtmlCommandButton

HtmlInputText

JSF Lifecycle Phase: Apply Request Values

• The Apply Request Values phase is where submitted request parameters are mapped to their corresponding UIInput components


ProcessEvents

ProcessDecodes

UIViewRoot

HtmlForm

HtmlOutputLabel

Component Tree

RequestParameterValues


HtmlCommandButton

HtmlInputText

// Process decodes does something// kind of like this for each// EditableValueHolder:String firstName =

request.getParameter(“firstName”);UIInput.setSubmittedValue(firstName);

JSF Lifecycle Phase: Process Validations

• The Process Validations phase is where submitted values are processed by JSF converters and validators

PROCESS_VALIDATIONS

ProcessEvents

ProcessValidators

UIViewRoot

HtmlForm

HtmlOutputLabel

Component Tree


HtmlCommandButton

HtmlInputText

• If any component fails validation, then– The component’s valid property is set to false

– A FacesMessage is added to the FacesContext

// If validation passes:UIInput.setValid(true);

// Otherwise:UIInput.setValid(false);

JSF Lifecycle Phase: Update Model Values

• If conversion & validation passes, then the Update Model Values phase is reached

• If EL value bindings were specified on UIInput components, then those component values are set in the model

• For example, the following EL value binding:


<h:inputText value=“#{MyBean.firstName}”/>

… will cause the MyBean.setFirstName()method to be called and will pass it the result of HtmlInputText.getValue()

UPDATE_MODEL_VALUES

ProcessUpdates

ProcessEvents


JSF Lifecycle Diagram (HTTP POST – Invalid Values)


ProcessEvents

ProcessDecodes

RESTORE_VIEW

BuildComp Tree

ApplySaved State(POST Only)


PROCESS_VALIDATIONS

ProcessEvents

ProcessValidators

FacesRequest

UIViewRoot

HtmlForm

HtmlOutputLabel

Component Tree


UPDATE_MODEL_VALUES

ProcessUpdates

ProcessEvents

INVOKE_APPLICATION

ProcessApplication

ProcessEvents

RENDER_RESPONSE

ProcessRenderers

SaveComp State

FacesResponse

HtmlCommandButton

HtmlInputText

Conversion/Validation Failure

JSF Lifecycle Phase: Invoke Application

• The Invoke Application phase is responsible for reacting to the submitted values by invoking methods in managed-beans that perform some kind of action

• ActionListener methods are called first, then Actions

• Markup Examples:


<h:commandButtonactionListener=

“#{MyBean.checkAll}” />

<h:commandButton action=“#{MyBean.submit}” />

INVOKE_APPLICATION

ProcessApplication

ProcessEvents

JSF Lifecycle Diagram: Events


ProcessEvents

ProcessDecodes

RESTORE_VIEW

BuildComp Tree

ParsePDL



PROCESS_VALIDATIONS

ProcessEvents

ProcessValidators

FacesRequest

If immediate=“true” then Actions, Action Listeners, and Value Change Listeners fire here

Value Change Listeners Fire

Here


UPDATE_MODEL_VALUES

ProcessUpdates

ProcessEvents

INVOKE_APPLICATION

ProcessApplication

ProcessEvents

RENDER_RESPONSE

ProcessRenderers

SaveComp State


FacesResponse

Actions & Action Listeners fire

here

In JSF 1.x, there are no events that fire here

Phase Listeners

• PhaseListeners can be extremely helpful for application customization, optimization, and debugging

• Must implement the following interface:– javax.faces.application.PhaseListener

• Use javax.faces.event.PhaseId to specify which phase to listen for


• Register implementing class in the faces-config.xml

<lifecycle><phase-listener>training.jobApplication.lifecycle.LoggingPhaseListener

</phase-listener></lifecycle>

Exercise: Overview

• The goal of this exercise is to add a PhaseListener to the jobApplication project

• The PhaseListener will simply log the Phase ID to the Tomcat console log, before and after phases execute


Step 1: Create LoggingPhaseListener.java

LoggingPhaseListener


Step 2: Paste Java Code

• For the sake of convenience, open the LoggingPhaseListener.java file in the Eclipse Java Editor and paste the following code as the body of the LoggingPhaseListener class:

private static final long serialVersionUID = 5805974145765679633L;

private static final Log log = LogFactory.getLog(LoggingPhaseListener.class);

public void afterPhase(PhaseEvent phaseEvent) {


if (log.isInfoEnabled()) {log.info("AFTER PHASE: " + phaseEvent.getPhaseId().toString());

}}public void beforePhase(PhaseEvent phaseEvent) {if (log.isInfoEnabled()) {

log.info("BEFORE PHASE: " + phaseEvent.getPhaseId().toString());}

}public PhaseId getPhaseId() {return PhaseId.ANY_PHASE;

}

Step 3: Paste XML

• Paste the following XML fragment into the faces-config.xml file:<lifecycle>

<phase-listener>

training.jobapplication.lifecycle.LoggingPhaseListener

</phase-listener>


</lifecycle>

• This fragment will cause the LoggingPhaseListener class to be registered as a PhaseListener when the JSF framework initializes

Step 4: Configure Log4J

• Create a file named log4j.properties in the src folder

• Paste the following into the file:log4j.rootLogger=ERROR, A1

log4j.appender.A1=org.apache.log4j.ConsoleAppender

log4j.appender.A1.layout=org.apache.log4j.PatternLayout

log4j.appender.A1.layout.ConversionPattern=%d{ABSOLUTE} %-5p


log4j.appender.A1.layout.ConversionPattern=%d{ABSOLUTE} %-5p [%c{1}:%L] %m%n

log4j.logger.training.jobapplication.lifecycle.LoggingPhaseListener=DEBUG

Step 5: Copy Log4J JAR

• Find the web/WEB-INF/lib/log4j.jar file in the solution

• Copy the log4j.jar file to the WEB-INF/lib folder of your project


Step 6: Run Application

• Re-publish/Re-deploy the jobApplication project to Tomcat

• Start Firefox and visit the following URL:– http://localhost:8080/jobApplication/applicantForm.iface


Step 6: Examine Tomcat Console Log

• Examine the Tomcat console log for PhaseListener output

• Note that only RESTORE_VIEW and RENDER_RESPONSE took place


• Type a value for the First Name field and click submit

• Examine Tomcat console log again for more phase output

JSF Form Validation

• JSF provides two ways of performing form validation:

– Individual field validation

– Interdependent field validation

• Individual field validation is accomplished in several ways:

– Adding a required attribute to a tag

– Adding a validator attribute to a tag

– Adding a validator component as a child of a tag


– Adding a validator component as a child of a tag

– The h:message component is used to show validation errors in context, next to the offending field

• Interdependent field validation is performed during actions

– The h:messages component is used to show interdependent field validation error messages

Exercise: Overview

• The goal of this exercise is to add form validation to the jobApplication project


Step 1: Add required attribute

• In order to make the First Name field be a required field for validation purposes, the required attribute needs to be set

• In the applicantForm.xhtml file, replace this:<h:inputText id="firstName" value="#{applicant.firstName}" />

• With this:<h:inputText id="firstName" required="true" value="#{applicant.firstName}" />

• When the user clicks the Submit Application button, the Process


• When the user clicks the Submit Application button, the Process Validations phase will fail and the corresponding h:message component will show the error message

– Note that the value of the for attribute of the h:message component must be the same as the id attribute of the h:inputText component,i.e.: <h:message for="firstName" />

Step 2: Add Last Name Field

• Paste the following into applicantForm.xhtml below the First Name table row:

<tr>

<td><h:outputLabel for="lastName" value="Last Name:" /></td>

<td><h:inputText id="lastName" required="true" value="#{applicant.lastName}" /></td>

<td><h:message for="lastName" /></td>

</tr>


• Add a getter/setter to the Applicant.java class for the lastName property

Step 3: Add Travel Percentage Field

• Paste the following into applicantForm.xhtml below the Last Name table row:

<tr><td><h:outputLabel for="travelPercentage" value="Travel

Percentage:" /></td><td><h:inputText id="travelPercentage" required="true"

value="#{applicant.travelPercentage}"><f:validateLongRange minimum=“0" maximum="100" />

</h:inputText></td>


<td><h:message for="travelPercentage" /></td></tr>

• Note that the f:validateLongRange component is used to constrain the value between 0 and 100

• Add a getter/setter to the Application.java class for the travelPercentage property as a String (not an Integer)

Step 4: Add Log Output

• Add the following code to the top of the ApplicantForm.submit() method:

System.out.println("submit() firstName=" + this.applicant.getFirstName());

System.out.println("submit() lastName=" + this.applicant.getLastName());

System.out.println("submit() travelPercentage=" + this.applicant.getTravelPercentage());


this.applicant.getTravelPercentage());

Step 5: Interdependent Validation

• Add the following code inside the firstName=“John” condition of the ApplicantForm.submit() method:

if (this.applicant.getLastName().equals("Doe")) {

String msg = "John Doe already works for us";

FacesMessage facesMessage = new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg);

FacesContext facesContext = FacesContext.getCurrentInstance();


String clientId = null; // this is a global message

facesContext.addMessage(clientId, facesMessage);

return "retry";

}

• This will cause an interdependent field validation error when the user enters “John” as the First Name and “Doe” as the Last Name

Step 6: Add Global Messages Component

• Paste the following into applicantForm.xhtml after the h:form component:

<h:messages globalOnly="true" />



• Run the appication in the web browser

• Enter the following and click Submit Application:– First Name: John

– Last Name: (leave it blank)– Travel Percentage: 101

• You should see an in-line error messages to the right of the Last Name and Travel Percentage files


– Last Name: Doe

– Travel Percentage: 50abcd


– Travel Percentage: 50abcd

• You should see an in-line error message next to the Travel Percentage field


– Last Name: Doe

– Travel Percentage: 50

• Validation should fail with the global error message “John Doe already works for us”

• Enter a different last name

• Validation should pass

JSF Converters

• Converters exist to coerce input to model bean properties of a type other than String, and to format output of model bean properties

• Resources:– J2EE 1.4 Tutorial: Using the Standard Converters

– ICEfaces Tutorial: Using JSF converters with ICEfaces components


– ICEfaces Tutorial: Using JSF converters with ICEfaces components

– John Deringer’s Article on JSF Validators/Converters

Implicit Conversion

• JSF can implicitly convert a component’s value to a model bean property that is of a type other than String

• In the previous exercise, you may have noticed that the travelPercentage JavaBean property was a String– Note that in the next exercise, we will change the travelPercentage

to an Integer type


to an Integer type

Explicit Conversion

• If you want your markup to be more precise with respect to conversion, you can specify a explicit conversion of a component’s value

• There are two ways to specify a converter:– Using the converter attribute, for example:

<h:inputText value="#{modelBean.age}"


<h:inputText value="#{modelBean.age}" converter="javax.faces.Integer" />

– Using the f:converter component, for example:

<h:inputText value="#{modelBean.age}">

<f:converter converterId="javax.faces.Integer" />

</h:inputText>

Standard Converters

• The JSF framework comes with several standard converters

• The f:converterNumber component will convert a component’s value to a concrete subclass of java.lang.Number and has several attributes that control formatting, for example:<f:convertNumber type="currency" />


• The f:convertDateTime component exists to convert a component’s value to java.util.Date, for example:<f:convertDateTime pattern= "MM/dd/yyyy" />

• See java.text.SimpleDateFormat for a listing of date format patterns

Custom Converters

• In addition to the standard converters, JSF allows you to define your own converters, for example:<my:ssnConverter />

• Custom converters must be registered in faces-config.xml in a <converter> element, and must have a corresponding Java class that implements javax.faces.convert.Converter


Java class that implements javax.faces.convert.Converter

Exercise: Overview

• The goal of this exercise is to:– Change the data type of travelPercentage from String to Integer in

order to let implicit conversion take place

– Add a Date of Birth field and use a JSF converter to convert the input to java.util.Date


Step 1: Setup Implicit Integer-Based Conversion

• In the Applicant.java file, change the datatype of the travelPercentage field from String to Integer– The getter/setter methods have to be changed as well


Step 2: Add Date of Birth Property

• In the Applicant.java file, paste the following:

private Date dateOfBirth;

public Date getDateOfBirth() {

return dateOfBirth;

}


public void setDateOfBirth(Date dateOfBirth) {

this.dateOfBirth = dateOfBirth;

}

Step 3: Add Date of Birth Markup

• In the applicantForm.xhtml file, add the following table row below the Travel Percentage row:

<tr>

<td><h:outputLabel for="dateOfBirth" value="Date of Birth:" /></td>

<td><h:inputText id="dateOfBirth" required="true" value="#{applicant.dateOfBirth}">

<f:convertDateTime pattern="MM/dd/yyyy" />


<f:convertDateTime pattern="MM/dd/yyyy" />

</h:inputText></td>

<td><h:message for="dateOfBirth" /></td>

</tr>


• Re-publish/deploy the jobApplication project

• Run the application in the web browser


– Last Name: Doe




– Date of Birth: 1/1/1970

• Notice that the Date of Birth has a leading zero, since the datePattern was specified as MM/dd/yyyy

Documents

JSF Lifecycle Diagram - ICEsoft Technologiesres.icesoft.org/self-serve-training/Intro-to-IF-1.8-Chapter-2... · JSF Lifecycle Diagram (HTTP ... be registered as a PhaseListener when