dynamic javaserver faces -...
TRANSCRIPT
Sun Confidential: Internal Only
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
Sun Confidential: Internal Only
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.
Sun Confidential: Internal Only
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.
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
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
Sun Confidential: Internal Only
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