dev@jsf-extensions.java.net

update: ajaxify scroller task

From: Ed Burns <ed.burns_at_sun.com>
Date: Mon, 5 Jun 2006 13:57:36 -0700

I wasn't able to spend much time working on avatar today, but my next
task on it is to switch over my ajaxZone tag to use Jacob's much more
compact prototype based code (aka Faces.Event()) instead of my more
procedural and dojo based code. Within that task, the first thing I
want to do is re-do how I ajaxify the old jsf 1.0 scroller component.

Here's Jacob's approach. After the scroller markup in the Facelets
page, he includes this static bit of JavaScript.

        <script type="text/javascript">
        document.forms[0].submit = function() {};
        var a = $('datascroller').getElementsByTagName('a');
        $A(a).each(function(e) { new Faces.Command(e, 'mousedown', { encode: 'catalog' }); });
        </script>

This compact bit of code first emasculates the form's submit() function,
since each link in the scroller does a form.submit(). Then, for each
anchor element inside the scroller, it installs a Faces.Command. This
is sort of like a dojo "around" event handler, and in this case it
replaces the 'mousedown' for each anchor with a Faces.Event() that will
submit the form over ajax and re-render just the "catalog" portion of
the page. The entire form is submitted on the AJAX request.

Jacob's scroller post data:

pj_id38_action=1
j_id38_curPage=3
javax.faces.ViewState=j_id18:j_id22
j_id4=j_id4
datagrid:20:uom=EA
datagrid:21:uom=EA
datagrid:22:uom=EA
datagrid:23:uom=EA
datagrid:24:uom=EA
datagrid:25:uom=EA
http://localhost:8080/j1/eg.orderentry.jsf=http://localhost:8080/j1/eg.orderentry.jsf

In my approach I have the ajaxZone tag which points to a "extractParams"
user defined method that extracts the name/value pairs from the original
script and pushes them to the associative array that the avatar
framework then passes along as the post data. Only the values extracted
by the extractParams method are added to the post data, along with the
necessary view state, processingContext, and form=form post.

Ed's scroller post data

form:scroller_action=-1
form:scroller_curPage=4
com.sun.faces.PCtxt=:form:subview1,:form:subview2
javax.faces.ViewState=j_id1:j_id2
form=form
form:subview2=form:subview2
dojo.transport=xmlhttp

Personally, I dislike sending the entire form but I think this decision
should be in the hands of the user. On the other hand, Jacob's four
lines of javascript is so much more seductive than my 66 lines (although
mine has lots of commonts). I'm inclined to keep the user level
function the same, but I'm going to rewrite the underlying code to use
Faces.Event instead of dojo.


Ed

-- 
| ed.burns_at_sun.com  | {home: 407 869 9587, office: 408 884 9519 OR x31640}
| homepage:         | http://purl.oclc.org/NET/edburns/
| aim: edburns0sunw | iim: ed.burns_at_sun.com