Sun Confidential: Internal Only
Agenda
Dynamic Faces > Overview> Lifecycle> Ecosystem> Usage Patterns> Tool Support
JSF / Ajax – Future Direction> JSF 2.0 Ajax Support
Summary
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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.
Sun Confidential: Internal Only
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.
Sun Confidential: Internal Only
Dynamic Faces Ecosystem
JavaScript Library
Client Server
[JSF Extensions]
Partial Lifecycle
Partial ViewRoot
HTTP Headers
XML Response
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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)
Sun Confidential: Internal Only
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)
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
<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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
Defined in built-in JavaScript library Causes an Ajax transaction to the Faces serverMany options for customizing the transaction
Using DynaFaces.fireAjaxTransaction
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
<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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
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;"
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
<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
Sun Confidential: Internal Only
Dynamic Faces - Usage Patterns
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
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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