Ajax components: can we use callbacks ?

27 views
Skip to first unread message

pczacxio

unread,
Aug 24, 2010, 5:55:21 AM8/24/10
to Nagare users
Hello,

I played a bit with Nagare and made a POC of a plug-ins oriented
application.
I would like to use some Ajax enabled widgets like YUI ones in a
component way.

I already wrote a component using a Restful URL to update the content
of a Datatable.
BUT my concern is that I had to create a "URL tunnel" through every
upper component up to this one.
Therefore, as I understand it, I must create this tunnel in each of my
containers-components to be able to use a component defining and using
a Restful URL _or_ define every Restful URL in a root component, as in
the IDE project.
The second option is probably the easiest to achieve with the plugin
architecture.

Anyway, I'm wondering if I can use the callback system of Nagare to
achieve almost the same result.
The ajax.Update does just that but is restricted to a specific type of
use.

Do you have any advice or could you give me some enlighted point of
view on this ?

pczacxio

unread,
Aug 24, 2010, 9:01:04 AM8/24/10
to Nagare users
In fact it is simpler that I though at first.

In my use case I defined two methods in my component:

1. setCurrentNodeID(nodeId)
2. getCurrentNodeChildren(renderer, *args)

The first one obviously select a node by its ID, storing it into the
component
The second one simply returns the data expected by the client-side
widget. Since its a regular "render" method as for any component.
I just made it return a string which contains CSV like data.

When rendering the component itself, I wrote of course some Javascript
declaring a YAHOO.util.XHRDataSource.
I used to pass it a Restful URL but then I find a way to give it a
callback to "getCurrentNodeChildren" above:

callbackURL = h.add_sessionid_in_url(params=(h.register_callback(6,
lambda uid=self.getCurrentNode().id: self.setCurrentNodeID(uid),
False, self.getCurrentNodeChildren),))

Just feeding this URL to the XHRDataSource and the Datatable is
populated.

I won't copy here the whole source of my component, it contains a
Treeview and a Datatable so I register one callback for each node in
the tree.

My new questions are:
A. Is this "the right way" to use callbacks ?
B. I used priority 6 but I don't know if it has any meaning in this
context
C. Is there any side effect that I must be aware of ?

pczacxio

unread,
Aug 24, 2010, 10:59:01 AM8/24/10
to Nagare users
Pushing it further, it is probably even better to create a priority 1
callback and call it with a parameter.
In this case the URL of the callback can be build as the following:

callbackURL = h.add_sessionid_in_url(params=(h.register_callback(1,
self.setCurrentNodeID, False, self.getCurrentNodeChildren),))

When using this URL on the client side Javascript, just concatenate
'=somevalue' at the end, since the value passed to the callback is the
value associated to the callback ID generated by register_callback.
This is a very basic way of doing but it seems to work fine.

The state is also correctly updated on the server side, so navigating
on other pages and then coming back to the Datatable's page shows the
last browsed data.

apoirier

unread,
Aug 25, 2010, 6:59:20 AM8/25/10
to Nagare users
Hi,

Your analysis is totally correct.

The natural and easy way with Nagare is to continue to use callbacks
with Ajax, instead of restful URL. In this aspect, the Nagare IDE is
not a good example because the server can automatically be restarted
when a source is changed and the callbacks discarded. That why restful
URL must be used in this specific case.

The first step is to see if the high-level `ajax.Update()` objects can
do the trick. YUI can do "progressive enhancement" meaning the
datasource can be a part of the HTML DOM. For example, a YUI datagrid
can be populated by a HTML table. And this HTML table can be modified
by a `ajax.Update()` action.

Then, as you have found yourself, if the `ajax.Update()` objects don't
fit the need, you can use the low-level API of Nagare:
`h.register_callback()` to create a callback and
`h.add_sessionid_in_url()` to generate the associated URL.

As a side note, I'm not totally satisfied with the exposition of these
API. There are too low-level. I'm thinking to add an easier API,
hiding for example the direct use of callbacks types, which are only
described in the source code at
http://www.nagare.org/trac/browser/tags/nagare/core/0.3.0/nagare/callbacks.py#L162
(and yes, type "1" is for callbacks with a parameter else use type
"2")
Reply all
Reply to author
Forward
0 new messages