Dynamic JavaServer Faces - TechTargetajaxexperience.techtarget.com/.../Kitain_Roger_DynamicFaces.pdf · Dynamic JavaServer Faces Roger Kitain Enterprise Java Platforms. Sun Confidential:

Sun Confidential: Internal Only

Dynamic JavaServer Faces

Roger KitainEnterprise Java Platforms


Sun's Faces and Ajax Solution

Brings the power of Ajax to existing and future Faces developed applicationsBased on “Avatar” idea from Jacob Hookum (Facelets creator), shown at JavaOne 2006Big increase in Ajax capability

Project Dynamic Faces


Dynamic Faces - Overview

Useful for updating a JSF View in the browser without requiring a full page refreshIntended for situations where you want do 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 LifecycleInitial request to JSF Server goes through normal lifecycle.Ajax 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


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



<script type='text/javascript'>

document.forms[0].submit = function() {};

var a = $('form:scroller').getElementsByTagName('a');

$A(a).each(function(e) {

new DynaFaces.installDeferredAjaxTransaction(e, 'mousedown',

{ postReplace: 'postReplace',

render: 'form:table,form:scroller });

});

</script>

For each anchor element in the scroller, call new DynaFaces.installDeferredAjaxTransaction passing the anchor element.

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


Faces – 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


Summary

Faces provides the foundation for web applicationsDynamic Faces:> Can add Ajax to your site without writing JavaScript> Can still write JavaScript for more powerful solutions

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

richness of your application via AjaxOther Faces / Ajax solutions available


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

Documents

Dynamic JavaServer Faces - TechTargetajaxexperience.techtarget.com/.../Kitain_Roger_DynamicFaces.pdf · Dynamic JavaServer Faces Roger Kitain Enterprise Java Platforms. Sun Confidential: