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"
html self model title.
"class method "
"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:
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:
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
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"
self call: (ToDoItemEditor new model: anItem)
"using an answer"
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
esug, smalltalk, seaside