Seaside Tutorial

Outline

● Focus on components● Rendering basics● Rendering anchors with callbacks (next,

previous)● Call: of a built-in component (call the

STSDateSelectorDialog)

Component Rendering

● Seaside components:– Subclass WAComponent– Implement #renderContentOn:– Argument is “renderer” (WAHtmlRenderer

instance)

ExamplerenderContentOn: html

html paragraph: 'This is a paragraph'.html unorderedList:

[html listItem: 'Item 1'.html listItem: 'Item 2'.html listItem: 'Item 3'].

Calendar

● Browse WAHtmlRenderer and especially superclass

● Complete STSCalendar● Demo

Anchors and callbacks

● Method #anchorWithAction:text: takes block and invokes it in response to following anchor

● Render loop (so far):– Handle callbacks– Render component

renderContentOn: htmlhtml

anchorWithAction: [self doSomething] text: 'Do something'

Anchors and callbacks

● Add “next” and “previous” buttons to calendar

Tasks and sequencing

● WAComponent>>#call:– Displays argument

● WAComponent>>#answer:– Returns from call:– Argument is return value of call:

Tasks

● Components whose primary responsibility are sequencing

● Subclass WATask and override #go● Complete ReservationTask:

– Create and call: a STSDateSelectorDialog– demo

Calendar should answer

● Modify STSCalendar so that it answers when user clicks date.

● Change ReservationTask so that it uses your calendar

Embedding components

● One component can nest other components:– Create child components in #initialize– Answer child components array in

#children– Send “html render: child” in

renderContentOn:

Catching answer

● In some cases parent component needs to “catch” answer of subcomponent.

● Use #onAnswer:

initializesuper initialize.startDateSelector := STSCalendar new.endDateSelector := STSCalendar new.

startDateSelector onAnswer: [:v | self updateArrival: v].endDateSelector onAnswer: [:v | self updateDeparture: v].

children^ Array with: startDateSelector with: endDateSelector

renderContentOn: html“.... omitted code for form and button ....”html table:

[html tableHeadings: #('Arrival Date' 'Departure Date').html

tableRowWith: [html render: startDateSelector]with: [html render: endDateSelector]].

Task: Guessing game step 1

● Your image STSGuessingGame● Subclass WATask● Use #inform: and #request: to display

messages and get input● Demo

Task: Guessing game step 2

● Add counter for “number of tries”● Try both method-local variable and i-var● Compare behavior of above when using

“back” button

Task: Guessing game step 2

● Seaside's use of continuations captures values of method-local variables (back button “backs them up”) but not i-vars

● Add #initialize

initializesuper initialize.self session registerObjectForBacktracking: self.

Snapshotting

● Objects registered for backtracking are sent #snapshot– Default impl is shallowCopy

● Restoring snapshot done with #restoreFromSnapshot: