[Grok-dev] AJAX example for Uli using Mochikit and HTML-injection

[Uli Fouquet]

Hi Sebastian,

Am Samstag, den 26.05.2007, 09:05 +0200 schrieb Sebastian Ware:
> This is what it looks like in action:
> 
>    http://www.urbantalk.se/DEVELOPER/tvsk
> 
> Click on the days or change pictures with the buttons marked "<" and  
> ">".

Thanks a lot for the work! I spent some hours in examining the examples
and found it quite useful.  

> What I did was to create widgets that produce HTML that I can inject  
> either using the PageTemplate or the Mochikit HTML-injection method.  
> By adding some extra attributes when rendering the widget I get  
> parameters that I can easily find and use in my AJAX calls.

Your usage of 'widgets' seemed to be a bit zope2-style. In fact they are
usual "Script (Python)", right? I guess, in zope3 and especially grok
things should be done slightly different. Anyway, your examples kept me
going and I build an example using MochiKit (see below).

> If javascript is turned off, the links work as normal. If javascript  
> is turned on, and the Mochikit library can be loaded, the 'onclick'  
> events are intercepted and trigger the AJAX stuff.

Yes, this is really important. And you are right: it works :-)

> All design is done in the widget renderer using python (I didn't want  
> to learn javascript... :p). And the HTML-injection is flicker free on  
> my old Powerbook so it looks very much like the real thing. :)

Fine :-) Indeed using MochiKit we _have_ to write ECMA-script to
initialize the MochiKit-machinery. But its only a few lines to call
special MochiKit functions which can easily be separated from other
code.

Thanks to Sebastians example I was able to make a little code-sketch
implementing Groks Friend Finder.

For the next week or so you can find it here in action:

	http://gf1.gnufix.de:8080/test

The source is available here:

	https://gf1.gnufix.de/~uli/grok/gff/

Some might find it looking a bit like the current grok-application's
index view ;-)

The only AJAX-functionality currently implemented is to update the
favourite-mammoth-fields when clicking on a name. Data is sent
asynchronously to a JSON-method in order to update the views fields.
Well, you will find it all in the source.

>From my point of view it was quite easy and fast (about two hours,
including learning MochiKits most importants API calls) to do everything
with MochiKit. 

The example has got only some JavaScript-includes in the header of the
page template to add AJAX-functionality. Delete them (or disable
JavaScript in Browser) and everything should still work. This should
make it easy to change the backing JavaScript-framework when desireable.

The displayed functionality could be archieved even easier only using
JSON-methods and some TAL-statements, but including MochiKit we are able
to add blend-effects and similar AJAX-stuff without touching the python
code or the page templates. In the example I simply didn't use this
extra-functionality.

Concerning KSS I was unfortunately not able to create something similar
with 'pure zope3' in the same short time. Nearly all code samples I
found on the net rely very much on plone being available, although
everywhere is stated, that KSS should work with plain zope3. If someone
got some examples without plone, I would be very grateful for a hint.

Once again many thanks to Sebastian for the example.

Regards

-- 
Uli