It's after lunch, and Lukas Renggli is up to talk about Seaside. This is a simple 10 steps "getting started with Seaside" demo. So for this, there's no templating, no "clean" urls, and most state is shared. That's not the way Seaside has to be done, but it's a simple way to get started. I don't have the ESUG DVD handy, which is too bad - there's a pre-built Seaside image on that CD (along with the Squeak VM).

The demo is a simple "To Do" app - two classes - ToDoItem and ToDoList. The demo is going to take that to the web with Seaside.

Seaside apps are built out of components - Views and Controllers. Components keep their state in instance variables. Yes, this is an example of MVC at work.

Step 1: Create a ToDoListView class. Add the boilerplate to register the application, and you get a base application in your browser at the name you registered. To get some content, you override the method #renderContentOn: to get some application speciic content. Rendering is a read-only phase (meaning: don't change state in this method!).

"assumes a model has been defined"
renderContentOn: html
	html self model title.
 
 
"class method "
renderClass
	"answer the specific render class here" 

Note - this uses new APIs in Seaside. From here, you can start customizing the render method (and having the domain handle rendering for each component) as you wish - so you can get a list, etc. With a simple rendering, we get this:

The html object understands a bunch of things, so you can ask it to push out things like divs, css, etc via built in protocol. For instance:

html div
	class: 'title'
	with: self model title.

Built into Seaside are a bunch of convenience things in the browser that allow you to look at what's going on in the browser.

To get interactivity, you define callback methods. So:

html anchor 
	callback: [self inform: anItem due]
	with: anItem title.

That will create a link, with the title showing. When the link is clicked, the callback block will fire. So what about forms?

"there's no need to specify #text: for submit buttons if you want the default"
html form: [html textInput
				value: text
				callback: [:value | text := value].
				html submitButton text: 'Save'].

There are convenience methods for the various html form elements - checkboxes, etc. Now, component replacement: Call

"Assumes the creation of ToDoItemEditor, which will know how to render itself"
edit: anItem
	self call: (ToDoItemEditor new model: anItem)

"using an answer"
edit: anItem 
	result := self call: (ToDoItemEditor new model: anItem copy).
	result ifNil: [^self].
	self model items replaceAll: anItem with: result.

You can nest components as much as you want. What are the benefits of Seaside?

• Talked about Web apps
• No url fiddling
• No state serialization
• Implemented complex workflow
• separated design and logic

Technorati Tags: esug, smalltalk, seaside