To try to get a better handle on Seaside, the Smalltalk based web application framework – I decided to start reimplementing some of the simple example and demonstration web applications I’ve seen around for other frameworks. The idea being that not only will it give me more exposure to Seaside, but it will also show me how to translate the ideas.

The obvious first example is Hello World – I won’t bother showing how it’s done in another framework for that one, because it’s too simple, but I will show you what’s required in Seaside.

WAComponent subclass: #HelloWorld
	instanceVariableNames: ''
	classVariableNames: ''
	poolDictionaries: ''
	category: 'Stuarts-Examples'

HelloWorld>>renderContentOn: html
    html heading: 'Hello World!'

As you can see, there’s not much required there – the first part is a standard Smalltalk class declaration – I’m creating a new class called HelloWorld which is a subclass of WAComponent.
renderContentOn: is the method that does the work.

Now for something slightly more functional, I’ll take the little example Howard Lewis Ship used in his recent Tapestry 5 screencast.
This basically lists numbers 1 to 10 with links on them, and shows you which one you clicked.

First, the Tapestry source:

package org.example.helloworld.pages;

import org.tapestry.annotations.ComponentClass;
import org.tapestry.annotations.OnEvent;
import org.tapestry.annotations.Persist;

@ComponentClass
public class Start {
	private int _index;

	@Persist
	private int _selected;

	public int getIndex() {
		return _index;
	}

	public void setIndex(int index) {
		_index = index;
	}

	@OnEvent(component="choose")
	public void choose(int index) {
		_selected = index;
	}

	public int getSelected() {
        return _selected;
	}
}

Hello World


Please choose a number between 1 and 10:




	${index} --





You chose: ${selected}

Not much there, just the fairly basic HTML template to create the page, and the component behind it providing the data.

Now for the Seaside version:

WAComponent subclass: #NumberChooser
	instanceVariableNames: 'selected'
	classVariableNames: ''
	poolDictionaries: ''
	category: 'Stuarts-Examples'

NumberChooser>>rendererClass
	^WARenderCanvas

NumberChooser>>choose: aNumber
	selected := aNumber

NumberChooser>>renderContentOn: html
	html
		heading: 'Hello World!';
		paragraph: 'Please choose a number between 1 and 10:';
		paragraph: [
			1 to: 10 do: [:val|
				html anchor callback: [ self choose: val ]; text: val.
				html text: ' -- '
			]
		].

	selected ifNotNil: [
		html paragraph: [
			html text: 'You choose: '; strong: selected
		]
	]

That’s a little smaller, mostly due to Smalltalk / Java differences, but it’s interesting to see how similar Tapestry and Seaside are in concept at least for this simple example (admittedly that’s Tapestry 5 which won’t be out for a long time yet, but Tapestry 4 is the same concept with a bit more typing)

Anyway, off to find some more examples to try!