Seaside: An Innovative Web Application Framework

Damien Cassou, St├ęphane Ducasse and Luc Fabresse http://stephane.ducasse.free.fr

Seaside

Books and Tutorials

Seaside Little History

Seaside in a Nutshell

Seaside in Production Since 2002

Cable eXpertise

Quuve - debrispublishing.com

Seaside Components

WAAdmin register: WACounter asApplicationAt: 'counter'.

The Counter Web Application

WACounter

WAComponent subclass: #WACounter
   instanceVariableNames: 'count'
   classVariableNames: ''
   package: 'Seaside-Examples-Misc'.

WACounter >> initialize
   super initialize.
   count := 0

WACounter >> increase
   count := count + 1

WACounter >> decrease
   count := count - 1

From Components to Valid HTML

HTML Rendering

WACounter >> renderContentOn: html
   html heading: count.
   html anchor
      callback: [ self increase ];
      with: '++'.
   html space.
   html anchor
      callback: [ self decrease ];
      with: '--'

Live Debugging

WACounter>>decrease
   self haltIf: (count-1 < 0).
   count := count - 1

Walking the Application Stack

Back Button

Pressing the back button of the browser desynchronizes server and client

Example:

How to make it work properly?

A Counter Dealing with Back Button

Just declare the component state to be preserved

WACounter >> states
        ^ Array with: self

Plain Code in Callbacks

WACounter >> renderContentOn: html
   html heading: count.
   html anchor
      callback: [ 
         count odd 
            ifTrue: [ self increase ]
            ifFalse: [ 
               self inform: 'Even number!'. 
               count := count + 2] 
      ];
      with: '++'.
   html space.
   html anchor
   	callback: [ self decrease ];
   	with: '--'

Callback Execution

Pressing ++

shows

A Greeter Application

Callbacks with the User Value

A Greeter component

Greeter >> renderContentOn: html
    html form: [
         html text: 'Username:'.
         html textInput
            callback: [ :value | username := value ].
         html submitButton
            callback: [ self inform: 'Hi ', username ];
            text: 'Say Hello'. ].

Did you see?!

Conclusion

/