Scriptacu-list Tutorial(Part 1)

Learning Seaside is fun and there are a number of good tutorials out there (but beware that some don’t use the latest Seaside 2.7 release) and a number of good blogs (I especially recommend Ramon Leon’s Blog). But it can still be a bit tricky to find examples of exactly what you want. What I’d like to do over the next couple of posts is provide a worked example of a commonly used presentation technique with an extra Scriptaculous twist.

The Big Picture

One of the first things I look to do in a web framework is to create a page showing a list of items with each item having a hyperlink to a maintenance page for the item. It’s a pattern I use again and again in web applications but nothing does it as well as Seaside.

So I’ll whet your appetite today by showing you the screens we will build over the next few days.

The application is a simple Contact List. So first we have a page for editing contact details…

Contact Details Page

We then want a list of all our contacts looking something like…

Contact List Page

Finally we will add a nice scriptaculous effect to show and hide contact details in-line…
Getting Started

So for a simple start today we’ll create our domain model in Squeak. We will create two classes MyAddressBook and MyContact…

  1. Create a new category for your classes, say, MyContacts
  2. In your category create a new class MyAddressBook (for now you can simply subclass Object) with an instance variable contacts
  3. Create a getter for contacts that lazy initializes to an empty OrderedCollection…

    ^contacts ifNil: [contacts := OrderedCollection new]

  4. We will also create an instance method to add a contact to the address book (We won’t bother with deleting contacts – you never know when they will come in useful ;-))

    addContact: aContact
    self contacts add: aContact

  5. Now create another new class MyContact with instance variables firstName, surname, dateOfBirth, telephoneNumber and emailAddress
  6. Create a setter and getter method for each variable. E.g.

    firstName: aString
    firstName:= aString


  7. For simplicity we will lazy initialize dateOfBirth to be today’s date.

    ^dateOfBirth ifNil: [dateOfBirth:= Date today]

That will probably do for starters – no Seaside yet just everyday Smalltalk . We will pick up here later.

Explore posts in the same categories: Scriptaculous, Seaside, Smalltalk

4 Comments on “Scriptacu-list Tutorial(Part 1)”

  1. Ramon Leon Says:

    There’s a bug in your code. Adding a contact to your list will get an exception because you’re calling

    contacts add: aContact

    instead of

    self contacts add: aContact

    bypassing your lazy initialization of the contacts instance variable.

  2. Thanks Ramon

    I’ve corrected that now

  3. […] nommé Objective Life, consacré principalement à Seaside, le framework web vedette de Squeak. Sa première contribution importante est un tutoriel en deux parties sur l’utilisation de Scriptaculous avec […]

  4. Damien Cassou Says:

    Can’t wait for the next tutorial.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: