dynamic javaserver faces - the ajax...

Sun Confidential: Internal Only

Dynamic JavaServer Faces

Roger KitainEnterprise Java Platforms


Agenda

Dynamic Faces > Overview> Lifecycle> Ecosystem> Usage Patterns> Tool Support

JSF / Ajax – Future Direction> JSF 2.0 Ajax Support

Summary


Sun's Faces and Ajax Solution

Brings the power of Ajax to existing and future Faces developed applicationsBig increase in Ajax capability“Look Ma – No JavaScript” as an option

Project Dynamic Faces


Dynamic Faces - Overview

Update a JSF View in the browser without requiring a full page refreshDo more on one page, without having the user go to a new page.Expose the JSF lifecycle to partial view updates, initiated and handled via AJAX.Support for firing Faces Events from the browser directly.


The Importance of the LifecycleAjax requests go through normal lifecycle, but only desired subviews get processed.Server can dynamically add and remove subviews during the lifecycle, allowing for a true “dirty region”Client can suggest distinct sets of subviews for “execute” and “render”.Server sends back XML describing subviews to be refreshed.


The Importance of the Lifecycle


Dynamic Faces and the JSF LifecycleExecute Portion

Render Portion


Dynamic Faces Ecosystem

JavaScript Library

Client Server

[JSF Extensions]

Partial Lifecycle

Partial ViewRoot

HTTP Headers

XML Response


Dynamic Faces EcosystemOn postback client sends HTTP headers> Example:

– com.sun.faces.avatar.Partial: true– com.sun.faces.avatar.Execute: zone1– com.sun.faces.avatar.Render: zone0,zone1

> Headers signal Ajax request to server


Dynamic Faces EcosystemPartial Lifecycle> Extends javax.faces.Lifecycle> Ensures nothing is written to the response before the view

(components) are rendered> Installed via servlet init param (web.xml) ‏

Partial View Root> Indirectly extends javax.faces.UIViewRoot> Controls what components are processed in the “execute”

and “render” portions of the request processing lifecycle> Rendered output is wrapped in xml for client (javascript) ‏


Dynamic Faces EcosystemSome “extensions” were added in JSF 1.2 to help:> javax.faces.component.ContextCallback (interface) ‏

– Implementing classes perform processing on a specified component

> UIComponent.invokeOnComponent– Traverses the view and executes “ContextCallback”

method for the specified component id> javax.faces.ViewState

– Useful for signalling postback (JSF) from client (javascript) ‏


Views and Partial Views


Dynamic Faces – Usage PatternsPage Author> Use Ajax enabled components> Use AjaxZone tag to Ajaxify page regions> Use provided JavaScript library to Ajaxify page

elements and components

Increasing Com

plexity

• Component Author> Use provided JavaScript library in custom components> Write JavaScript that talks directly to HTTP protocol

and XML application defined by Dynamic Faces


Dynamic Faces - Usage Patterns

Easiest way to Ajaxify an existing applicationDemarcate one or more Ajax zones in a pageZones refresh via Ajax without full page refreshAction in Zone 1 causes reaction in Zone 2

Using AjaxZones



execute> All components in specified “zone” will get processed in “execute”

portion of lifecycle processing. render> All components in specified “zone” will get processed in “render”

portion of lfecycle processing.action > MethodExpression to invoke when request processing lifecycle

reaches Invoke Application phaseOther attributes – see jsf-extensions.dev.java.net docs

Using AjaxZones – Optional Attributes



<jsfExt:ajaxZone id="zone0" render="zone0,zone1">...<h:commandButton actionListener=”#{game.start}” .../>...<h:outputText value=”#{game.score}”../>

</jsfExt:ajaxZone><jsfExt:ajaxZone id="zone1" render="zone0,zone1" execute="zone1">

...<h:commandButton actionListener=”#{game.select}”.../>...

</jsfExt:ajaxZone>

Using AjaxZones – Example



Defined in built-in JavaScript library Causes an Ajax transaction to the Faces serverMany options for customizing the transaction

Using DynaFaces.fireAjaxTransaction



<h:commandButton value="Add Item" action="#{orderEntry.addProduct}" onclick="new DynaFaces.fireAjaxTransaction(this);"/>

Useful when you want the Ajax transaction to happen as soon as the script is executed.Default action just does a refresh of the whole view via AJAX, using JavaScript DOM methods to update the elements.Can add options to choose exactly which subtrees get sent, processed, and re-rendered.

Using DynaFaces.fireAjaxTransaction



Generally used in a tag attribute<ANY_HTML_OR_JSF_ELEMENT

on|EVENT|="DynaFaces.fireAjaxTransaction(this,{|OPTIONS|});" />

ANY_HTML_OR_JSF_ELEMENT is any HTML element orFaces tagon|EVENT| is any JavaScript event type{|OPTIONS|} optional,- JavaScript associative array of options for this transaction

DynaFaces.fireAjaxTransaction – General Form



execute> Comma separated list of client ids to be traversed on the

“execute” portion of the Faces Request Processing Lifecycle (everything but render).

> If not specified, the value of the render option is used. > The value “none” indicates that the view must not be

traversed during the execute portion of the lifecycle.

DynaFaces.fireAjaxTransaction – Options



render> Comma separated list of client ids to be traversed on the

“render” portion of the Faces Request Processing Lifecycle.

> If not specified, the entire view is rendered.> The value “none” indicates that the view must not be

traversed during the render portion of the lifecycle.Other attributes – see jsf-extensons.dev.java.net docs

DynaFaces.fireAjaxTransaction – Options


Dynamic Faces - Usage PatternsDynaFaces.fireAjaxTransaction – Example

<h:commandButton id="id0"value="Fire It"onclick="DynaFaces.fireAjaxTransaction(this,{execute:'id0',render:'id1,id2,id3'}); return false;"



Extends DynaFaces.fireAjaxTransaction Provides deferred kickoff of Ajax transaction when arbitrary JavaScript event occursUsed by AjaxZonesCan be installed on any DOM elementOptions are the same as for DynaFaces.fireAjaxTransaction

Using DynaFaces.installDeferredAjaxTransaction



Allow queuing of arbitrary javax.faces.event.FacesEvent subclasses from JavaScript directy into Faces lifecycleJavaScript classes for standard ValueChangeEvent and ActionEvent classesUse JavaScript “subclassing” for custom events

Dispatching Faces Events via Ajax


Dynamic Faces – Tool Support

Netbeans 5.5.1 has JSF/Ajax support> Visual Web Pack> Woodstock Component Set

Netbeans 6 will continue to have built-in supportDrag and drop JSF/Ajax components for rapid web application development


JSF – Ajax Future DirectionOther Faces / Ajax frameworks availableStandardize Faces / Ajax framework for next major revision of specification (2.0)‏

Faces 2.0

Dynamic FacesIceFaces

Ajax4JSF

AjaxAnywhere

Backbase


JSF – Ajax Future Direction

JSF 2.0 (In Progress) ‏JSF / Ajax Standardization> Begin by standardizing on activities common to most JSF

/ Ajax frameworks– Such as collecting / encoding client side view state

> Message format standardization– Specify what gets sent to the server– Helpful to enforce JSF / Ajax component compatability

> Sending Ajax events / processing Ajax responses> Small JavaScript API in specification> Server side standardization


SummaryDynamic Faces:> Can add Ajax to your site without writing JavaScript> Can still write JavaScript for more powerful solutions

with JSF and Ajax> Leverages the strengths of JSF while extending the

richness of your application via AjaxTools available that support JSF / AjaxOther JSF / Ajax solutions availableJSF 2.0 will standardize JSF / Ajax features to help enforce framework and component compatability


Resourceshttps://jsf-extensions.dev.java.net/https://javaserverfaces.dev.java.net/ https://glassfish.dev.java.net/http://www.jsfcentral.com/http://java.sun.com/javaee/javaserverfaces

dynamic javaserver faces - the ajax...

Documents