[Seaside] Javascript stuff

Avi Bryant avi.bryant at gmail.com
Sun Sep 25 05:35:56 CEST 2005


I've been doing some work on Javascript support over the last few  
days.  It's still incomplete, but it's at a stage that other people  
might find interesting.

The first part is an extension to the Seaside package itself, found  
in the latest a2 dev versions on SqueakSource.  This is a new method  
on WASession, #addLoadScript:.  Any strings you pass to that method  
will be collected into an onLoad() function which is appended to the  
bottom of the next response, and used as the onLoad handler for the  
body tags.  In general, it's probably better to use this while  
rendering than to use an inline #script:, because it will execute at  
a more predictable time.  But the especially interesting part is that  
it can be sent from a callback, to add a script that will be included  
on the subsequent render.  I find that I frequently want this for  
things like setting the location.hash property (where the browser  
scrolling will jump to) following some action.

The second part is a separate library that models the Prototype  
library (http://prototype.conio.net/) and its Script.aculo.us set of  
effects (http://script.aculo.us/).  It's the Scriptaculous package  
inside the Seaside project on SqueakSource.  You can poke around the  
demos on the script.aculou.us site to get an idea of what it does.   
The approach I'm taking is to have one instance per Javascript  
function call, that knows how to #asString itself into the  
appropriate Javascript source, so it can be used as a parameter for  
#onClick: or #script:.  You can see some simple usage examples in the  
SUExample class.  Using, for example, the "highlight" effect looks  
like this:

"highlight this div when the user clicks on it, and fade out over 5  
seconds"
html div onClick: (html effect highlight duration: 5); with: 'Foo'

"highlight the element with id 'bar' when the user clicks on this div"
html div onClick: (html effect highlight id: 'bar') with: 'Foo'

"highlight this element immediately on page load"
html div script: (html effect highlight)

Note that WARenderCanvas has an #effect method here which makes it  
convenient to create SUEffect objects, but these are *not* tag  
objects like WARenderCanvas>>div or WARenderCanvas>>anchor etc.

I also added an #effect method on WASession which makes use of  
#addLoadScript:, allowing you to use effects from callbacks:

someCallback
    self doSomethingWorthyOfHighlighting.
    self session effect highlight id: 'someElementOnTheNextRender';  
duration: 10.

There's also some AJAX support that is similar to, but a completely  
different implementation from, the liveRequest stuff that now lives  
in SeasideAsync.  For example:

html div id: 'toBeReplaced'; with: 'Placeholder text'.
html anchor
           onClick: (html ajax id: 'toBeReplaced'; renderBlock: [:r |  
r text: 'Some new text']);
           text: 'Replace the placeholder text asynchronously'.

There's quite a bit more stuff in those libraries (autocompleting  
text inputs, drag and drop, more effects), but this should be enough  
for people to evaluate the general strategy and give me some feedback.

Cheers,
Avi


More information about the Seaside mailing list