Ajax: Using the Scriptaculous Updater in Seaside
My favorite new tool is Scriptaculous, or more accurately, the Seaside integration of it. It’s completely changed how I do web development and made my life a lot easier.
Since I’ve been using it, I’ve begun to think of web apps differently. I’ve begun to think of them simply as applications, forgetting about the whole page refresh thing. Seaside made me forget about state, and its callbacks allowed me to tie user actions directly to commands. Something like…
renderContentOn: html
html anchor on: #search of: self.
html div: self searchResults.
But I still knew when that was clicked, I’d go into the whole page request response re-render thing. But now, with AJAX so readily available via Scriptaculous, I also consider what needs to change on the page in response to an action. I only re-render that single piece, thus avoiding the page posting back and making the app look much snappier, and more impressive to the end user. So the code becomes…
renderContentOn: html
html anchor
onClick:(html updater
id: #results;
on: #renderResultsOn: of: self);
on: #search of: self.
html div id: #results; with: [self renderResultsOn: html].
renderResultsOn: html
html text: self searchResults.
Using Scriptaculous almost forces one to factor your code well because you find yourself wanting to render each part of a page, individually, AJAX style, quite often. Another benefit of this style, is page size goes way down, since I don’t render a bunch of hidden stuff and show and hide it with Javascript like I used to, rather, I simply render pieces only when necessary. I’m curious how this style of programming will affect server load and user experiences, I guess I’ll find out soon enough.
at: "Ajax: How to Build Cascading Dialogs in Seaside with Scriptaculous";
at: "Small Scriptaculous API Change for Seaside 2.8";
at: "About";
Scriptalicious == scriptaculous ?
Yup, fixed now, I hadn’t realized I was mis-spelling that.
#on:of: is just a shortcut for that verbose version, all I can say is make sure you’re running the latest Scriptaculous and Seaside. I run only about 5 or so changes behind the bleeding edge versions. Seaside 2.7 and latest Scriptaculous.
Do you have any examples of seaside applications you’ve written?
Publicly, not yet, other than what I post on this site. I’ve been working on something at the office, several things actually, but we haven’t released them yet, though we hope to soon.
Wow! I cannot tell you how incredibly helpful this series of posts has been for me.
Any chance you are digging into Magritte and will be shedding some light on the Seaside - Magritte - Scriptaculous trio? (I believe the last 2 don’t quite play together yet).
Thanks a ton.
Thanks, glad you liked it. Yes, I’ll be doing something soon with Magritte, in fact I posted a screencast this morning using it. Also, it’s not that they don’t play well together, they certainly can, since Magritte is totally pluggable. It’s just that currently, there aren’t any ajaxy components, but you can write and use your own.
Yes, I saw the screencast. I liked how you automated the generation of Magritte descriptions. Will Tsunami++ at some point fit in?
Look forward to more!
Tsunami, ha, didn’t know anyone knew really noticed that. Yea, it’ll fit in now actually, Tsunami just does accessors with objects and #doesNotUnderstand instead of requiring code. I’ll do something showing that soon.
Could you share a couple of tips?
- Could you share your code for generating the Magritte descriptions?
- How do you put it on a menu &/or keyboard shortcut
Thanks!
Sure, I just updated my squeak image, it now includes my custom browser with those modifications. Search for class named SentorsaCustomBrowser. I also updated all the packages to latest versions, added a few, removed a few. I’ll be keeping this image up to date as my tastes change.
Thanks Ramon. For all your helpfulness.
I noticed that the browsers in your image are very about allowing the mouse to re-size their internal panels, compared to the standard Browser (on Win). Have you had the same?
I think that’s just the resize on all sides preference, it’s not anything special I did.