[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