1. Seaside Tutorial

2. Outline ● Focus on components ● Rendering basics ● Rendering anchors with callbacks (next, previous) ● Call: of a built-in component (call the STSDateSelectorDialog)

3. Component Rendering ● Seaside components: – Subclass WAComponent – Implement #renderContentOn: – Argument is “renderer” (WAHtmlRenderer instance)

4. Example renderContentOn: html html paragraph: 'This is a paragraph'. html unorderedList: [html listItem: 'Item 1'. html listItem: 'Item 2'. html listItem: 'Item 3'].

5. Calendar ● Browse WAHtmlRenderer and especially superclass ● Complete STSCalendar ● Demo

6. 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: html html anchorWithAction: [self doSomething] text: 'Do something'

7. Anchors and callbacks ● Add “next” and “previous” buttons to calendar

8. Tasks and sequencing ● WAComponent>>#call: – Displays argument ● WAComponent>>#answer: – Returns from call: – Argument is return value of call:

9. Tasks ● Components whose primary responsibility are sequencing ● Subclass WATask and override #go ● Complete ReservationTask: – Create and call: a STSDateSelectorDialog – demo

10. Calendar should answer ● Modify STSCalendar so that it answers when user clicks date. ● Change ReservationTask so that it uses your calendar

11. 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:

12. Catching answer ● In some cases parent component needs to “catch” answer of subcomponent. ● Use #onAnswer:

13. initialize super initialize. startDateSelector := STSCalendar new. endDateSelector := STSCalendar new. startDateSelector onAnswer: [:v | self updateArrival: v]. endDateSelector onAnswer: [:v | self updateDeparture: v].

14. children ^ Array with: startDateSelector with: endDateSelector

15. 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]].

17. Task: Guessing game step 1 ● Your image STSGuessingGame ● Subclass WATask ● Use #inform: and #request: to display messages and get input ● Demo

18. 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

19. 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 initialize super initialize. self session registerObjectForBacktracking: self.

20. Snapshotting ● Objects registered for backtracking are sent #snapshot – Default impl is shallowCopy ● Restoring snapshot done with #restoreFromSnapshot: