5. Seaside
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      Introduction: Web Applications

      Example: Adding two numbers




      Lukas Renggli and Marcu...
ST — Seaside




      What is going on?


        <form action=“second.html”>
           <input type=“text” name=“value1”...
ST — Seaside




      Control Flow:
           HTTP request-response

                                           GET first...
ST — Seaside




      Something is wrong…



      >        Control-flow quite arcane
               — Remember GOTO?
    ...
ST — Seaside




      What we want


      >        Why not this?


          go
                |number1 number2 |

    ...
ST — Seaside




      Seaside: Features




      >        Sessions as continuous piece of code
      >        XHTML/CSS ...
ST — Seaside




      XHTML Building


        html div id:          ‘title’; with: ‘Title’
        html div id:         ...
ST — Seaside




      CSS


      >        CSS Zengarden: http://csszengarden.com




      Lukas Renggli and Marcus Denk...
ST — Seaside




      Callback Event Model


        Example3>>renderContentOn: html
                      html form: [
 ...
ST — Seaside




      Composition + Reuse




      Example:
        Multicounter



      More later!




      Lukas Re...
ST — Seaside




      Example: SqueakSource




      Lukas Renggli and Marcus Denker   5.14
ST — Seaside




      Example: DabbleDB




      Dabbledb.com




      Lukas Renggli and Marcus Denker   5.15
ST — Seaside




      Example: CMSBox




      cmsbox.ch




      Lukas Renggli and Marcus Denker   5.16
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      Installing Seaside



      >        Easy: Get from
               — http://www.iam.unibe.ch/~scg/T...
ST — Seaside




      Seaside


               http://localhost:8080/seaside




      Lukas Renggli and Marcus Denker   ...
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      2. Control Flow




      >        Defining control flow

      >        Convenience methods

      >...
ST — Seaside




      Defining Flow




      >        Create a subclass of WATask
               — Implement the method #...
ST — Seaside




      Convenience Methods




      > #inform: aString
      > #confirm: aString
      > #request: aString...
ST — Seaside




      Call and Answer




      >        #call: aComponent
               — Transfer control to aComponen...
ST — Seaside




      Call and Answer


                     Client                      Server
                         ...
ST — Seaside




      Transactions




      > Sometimes it is required to prevent the user from going
        back withi...
ST — Seaside




      Example for #isolate:




        self isolate: [
           self doShopping.
           self colle...
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      3. Components




      >        Rendering
               — XHTML
               — CSS
      >     ...
ST — Seaside




      Components




      > Components are the Views (and Controllers) of Seaside
        applications.
...
ST — Seaside




      Building Components




      > Components are created by subclassing WAComponent
      > Add insta...
ST — Seaside




      Rendering



      > XHTML is built programmatically.
      > This process is called rendering.


 ...
ST — Seaside




      Text Rendering




      >        Render a string:
                      html text: ‘My Text’

    ...
ST — Seaside




      Canvas and Brushes




      >        html parameter is instance of WARenderingCanvas
             ...
ST — Seaside




      Basic Brushes




      >        Render a new line <br />:
                      html break.

     ...
ST — Seaside




      Using Brushes


      1. Ask the canvas for a div brush

                html div.

      2. Configu...
ST — Seaside




      Painting with Brushes


                       Seaside                  XHTML

         html div   ...
ST — Seaside




      Nesting Brushes




      >        Render a text in bold:
                 html strong with: ‘My Te...
ST — Seaside




      Nesting Brushes



      > To nest brushes use the message #with:.
      > Always send #with: as th...
ST — Seaside




      Nesting Brushes


      >        Render nested divs:
                 html div id: ‘frame’; with: [...
ST — Seaside




      Rendering Pitfalls I




      > Donʼt change the state of the application while
        rendering,...
ST — Seaside




      Rendering Pitfalls II




      >        Rendering is a read-ony phase.
               — Donʼt send...
ST — Seaside




      Anchor Callback



      >        Ask the rendering canvas for an anchor and configure it
          ...
ST — Seaside




      Anchor Example



               WACounter>>renderContentOn: html
                  html heading
  ...
ST — Seaside




      Forms



      >        Render a form around your form elements:
                                  ...
ST — Seaside




      More Brushes with Callbacks..




      >        Text Input / Text Area
      >        Submit Butto...
ST — Seaside




      Register new Component / Task



      >        Create method #canBeRoot returning true on class
  ...
ST — Seaside




      Roadmap




      >        Introduction
               — Web applications / Overview
              ...
ST — Seaside




      4. Compositon




      >        Backtracking

      >        Subcomponents

      >        Widgets...
ST — Seaside




      Backtracking State




      > Seaside does not backtrack state by default.
      > Often it is not...
ST — Seaside




      Shopping Cart Problem




      >        Online Bookstore (without backtracking)
               — W...
ST — Seaside




      Register Object




      > Implement method #states that returns an Array that
        contains yo...
ST — Seaside




      Subcomponents




      > It is common for a component to display instances of
        other compon...
ST — Seaside




      Initialize Children




      > Subcomponents are usually stored within instance
        variables ...
ST — Seaside




      Enable Children




      > Parent Components must implement a #children
        method returning a...
ST — Seaside




      Render Children




      > Children are rendered by sending the message
        #render: to the re...
ST — Seaside




      Widgets




      > Components can be reused in different contexts within
        different applica...
ST — Seaside




      Widgets: Examples




      >        Batched List

      >        Tab Panel

      >        Calenda...
ST — Seaside




      Custom Widgets




      > Create a new component.
      > Add methods to specify domain-model,
   ...
ST — Seaside




      There is more..




      >        Development Tools
               — Demo in the Exercise Session ...
ST — Seaside




      Literature


      >        HPI Seaside Tutorial:
               — http://www.swa.hpi.uni-potsdam.d...
ST — Seaside




      License

      >        http://creativecommons.org/licenses/by-sa/3.0/



                         ...
Upcoming SlideShare
Loading in …5
×

Lecture: Seaside

3,396 views

Published on

Lecture: "Seaside", University of Berne, 24.10.2007

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,396
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lecture: Seaside

  1. 1. 5. Seaside
  2. 2. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Original lecture notes by Lukas Renggli Lukas Renggli and Marcus Denker 5.2
  3. 3. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Lukas Renggli and Marcus Denker 5.3
  4. 4. ST — Seaside Introduction: Web Applications Example: Adding two numbers Lukas Renggli and Marcus Denker 5.4
  5. 5. ST — Seaside What is going on? <form action=“second.html”> <input type=“text” name=“value1”> First.hml <input type=“submit” name=“OK”> </form> <form action=“result.html”> second.hml <input type=“hidden” name=“value1” value=“<% value1 %>”> </form> <p> result.hml <% value1 + value2 %> </p> Lukas Renggli and Marcus Denker 5.5
  6. 6. ST — Seaside Control Flow: HTTP request-response GET first.html first.html <a href=”second.html?number1=...” User: Web browser GET second.html?number1=... second.html <a href=”result.html?number1=...&number2=...” Lukas Renggli and Marcus Denker 5.6
  7. 7. ST — Seaside Something is wrong… > Control-flow quite arcane — Remember GOTO? — We do not care about HTTP! > How to debug that? > And what about — Back button? — Copy of URL (second browser)? Lukas Renggli and Marcus Denker 5.7
  8. 8. ST — Seaside What we want > Why not this? go |number1 number2 | number1 := self request: ‘First Number’. number2 := self request: ‘Second Number’. self inform: ‘The result is ‘, (number1 + number2) asString Lukas Renggli and Marcus Denker 5.8
  9. 9. ST — Seaside Seaside: Features > Sessions as continuous piece of code > XHTML/CSS building > Callback based event model > Composition and reuse > Debugging and Development tools Lukas Renggli and Marcus Denker 5.9
  10. 10. ST — Seaside XHTML Building html div id: ‘title’; with: ‘Title’ html div id: ‘list’; with: [ html span class: ‘item’; with: ‘Item 1’. html span class: ‘item’; with: ‘Item 2’. ] <div id=“title”>Title</div> <div if=“list”> <span class=“item”>Item 1</span> <span class=“item”>Item 2</span> </div> Lukas Renggli and Marcus Denker 5.10
  11. 11. ST — Seaside CSS > CSS Zengarden: http://csszengarden.com Lukas Renggli and Marcus Denker 5.11
  12. 12. ST — Seaside Callback Event Model Example3>>renderContentOn: html html form: [ html submitButton callback: [ self inform: ‘Hello’ ]; text: ‘Say Hello’ ] .... <form action="/seaside/example2" method="post"> <input type="hidden" name="_s" value="JBbTXBnPaTLOjcjI" class="hidden"/> <input type="hidden" name="_k" value="FFQrpnBg" class="hidden" /> <input type="submit" name="1" value="Say Hello" class="submit" /> </form> .... Lukas Renggli and Marcus Denker 5.12
  13. 13. ST — Seaside Composition + Reuse Example: Multicounter More later! Lukas Renggli and Marcus Denker 5.13
  14. 14. ST — Seaside Example: SqueakSource Lukas Renggli and Marcus Denker 5.14
  15. 15. ST — Seaside Example: DabbleDB Dabbledb.com Lukas Renggli and Marcus Denker 5.15
  16. 16. ST — Seaside Example: CMSBox cmsbox.ch Lukas Renggli and Marcus Denker 5.16
  17. 17. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Lukas Renggli and Marcus Denker 5.17
  18. 18. ST — Seaside Installing Seaside > Easy: Get from — http://www.iam.unibe.ch/~scg/Teaching/Smalltalk/Exercises/05Seaside/ — For the config tool: user: admin, passwd: seaside > Or install by hand — Install Seaside 2.8a via SqueakMap — Update using Monticello — WAKom startOn: 8080 — Point browser to http://localhost:8080/seaside Lukas Renggli and Marcus Denker 5.18
  19. 19. ST — Seaside Seaside http://localhost:8080/seaside Lukas Renggli and Marcus Denker 5.19
  20. 20. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Lukas Renggli and Marcus Denker 5.20
  21. 21. ST — Seaside 2. Control Flow > Defining control flow > Convenience methods > Call / Answer > Transactions Lukas Renggli and Marcus Denker 5.21
  22. 22. ST — Seaside Defining Flow > Create a subclass of WATask — Implement the method #go — Split the method #go into smaller parts to ensure readability > Tasks are a special kind of component — No visual representation — Define a logical flow (#go) — Call other components for output Lukas Renggli and Marcus Denker 5.22
  23. 23. ST — Seaside Convenience Methods > #inform: aString > #confirm: aString > #request: aString > #request:label:default: Lukas Renggli and Marcus Denker 5.23
  24. 24. ST — Seaside Call and Answer > #call: aComponent — Transfer control to aComponent > #answer: anObject — anObject will be returned from #call: — Receiving component will be removed Lukas Renggli and Marcus Denker 5.24
  25. 25. ST — Seaside Call and Answer Client Server A>>go x := self call: B A x asString. B>>go … B self answer: 77. A>>go A x := self call: B. x astring. -> 77 Lukas Renggli and Marcus Denker 5.25
  26. 26. ST — Seaside Transactions > Sometimes it is required to prevent the user from going back within a flow > Calling #isolate: treats the flow defined in the block as a transaction > Users are able to move back and forth within the transaction, but once completed, they cannot go back anymore Lukas Renggli and Marcus Denker 5.26
  27. 27. ST — Seaside Example for #isolate: self isolate: [ self doShopping. self collectPaymentInfo]. Self showConfirmation. Lukas Renggli and Marcus Denker 5.27
  28. 28. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Lukas Renggli and Marcus Denker 5.28
  29. 29. ST — Seaside 3. Components > Rendering — XHTML — CSS > Callbacks — Anchor — Form > Customization Lukas Renggli and Marcus Denker 5.29
  30. 30. ST — Seaside Components > Components are the Views (and Controllers) of Seaside applications. > Components keep their state (model and state of user- interface) in instance-variables. > Components define the visual appearance and handle user interactions Lukas Renggli and Marcus Denker 5.30
  31. 31. ST — Seaside Building Components > Components are created by subclassing WAComponent > Add instance-variables to hold your model and user- interface state > Put view related methods in a category called rendering > Put controller related methods into method categories named accessing, actions, private Lukas Renggli and Marcus Denker 5.31
  32. 32. ST — Seaside Rendering > XHTML is built programmatically. > This process is called rendering. > Create a method called #renderContentOn: SomeComponent>>renderContentOn: html html text: ‘Hello World’ Lukas Renggli and Marcus Denker 5.32
  33. 33. ST — Seaside Text Rendering > Render a string: html text: ‘My Text’ > Render an un-escaped string: html html: ‘<foo>Zork</foo>’ > Render any object (using double dispatch): html render: 1 Lukas Renggli and Marcus Denker 5.33
  34. 34. ST — Seaside Canvas and Brushes > html parameter is instance of WARenderingCanvas — Basic html output — Render logic > Canvas provides brushes — For rendering html tags Lukas Renggli and Marcus Denker 5.34
  35. 35. ST — Seaside Basic Brushes > Render a new line <br />: html break. > Render a horizontal Rule <hr />: html horizontalRule. > Render a non-breaking space &nbsp;: html space. Lukas Renggli and Marcus Denker 5.35
  36. 36. ST — Seaside Using Brushes 1. Ask the canvas for a div brush html div. 2. Configure the brush, e.g. set attributes html div class: ‘beautiful’. 3. Render the contents of the tag-brush: html div class: ‘beautiful’; with: ‘Hello World’. Lukas Renggli and Marcus Denker 5.36
  37. 37. ST — Seaside Painting with Brushes Seaside XHTML html div <div></div> html div <div class=“beautiful”> class: ‘beautiful’ </div> html div <div class=“beautiful”> class: ‘beautiful’; Hello World with: ‘Hello World’. </div> Lukas Renggli and Marcus Denker 5.37
  38. 38. ST — Seaside Nesting Brushes > Render a text in bold: html strong with: ‘My Text’. > Render a text in italic html emphasis with: ‘My Text’. > Render a text in bold and italic: html strong with: [ html emphasis with: ‘My Text’]. Lukas Renggli and Marcus Denker 5.38
  39. 39. ST — Seaside Nesting Brushes > To nest brushes use the message #with:. > Always send #with: as the last message in the configuration cascade. > The argument of #with: is rendered using double- dispatch, therefore any object can be passed as an argument. > To nest tags, pass a block that renders the elements to nest. Lukas Renggli and Marcus Denker 5.39
  40. 40. ST — Seaside Nesting Brushes > Render nested divs: html div id: ‘frame’; with: [ html div id: ‘contents’; with: … html div id: ‘sidebar’; with: … ]. > Render a list: html orderedList with: [ html listItem with: … html listItem with: … ]. Lukas Renggli and Marcus Denker 5.40
  41. 41. ST — Seaside Rendering Pitfalls I > Donʼt change the state of the application while rendering, unless you have a really good reason to do so. > Rendering is a read-only phase. > Donʼt put all your rendering code into a single method. Split it into small parts and chose a method name following the pattern #render*On: Lukas Renggli and Marcus Denker 5.41
  42. 42. ST — Seaside Rendering Pitfalls II > Rendering is a read-ony phase. — Donʼt send #renderContentOn: from your own code, use #render: instead. — Donʼt send #call: and #answer: while rendering > Always use #with: as the last message in the configuration cascase of your brush Lukas Renggli and Marcus Denker 5.42
  43. 43. ST — Seaside Anchor Callback > Ask the rendering canvas for an anchor and configure it with a callback-block: html anchor callback: [self someAction] with: ‘Some Action’]. > The callback-block is cached and will be executed later. Lukas Renggli and Marcus Denker 5.43
  44. 44. ST — Seaside Anchor Example WACounter>>renderContentOn: html html heading level: 1; with: self count. html anchor callback: [self increase]; with: ‘++’. html space. html anchor callback: [self decrease]; with: ‘--’. Lukas Renggli and Marcus Denker 5.44
  45. 45. ST — Seaside Forms > Render a form around your form elements: html form: [ … ] > Put the Form elements inside the form: html form: [ html textInput value: text; callback: [:value | text := value]. html submitButton ]. Lukas Renggli and Marcus Denker 5.45
  46. 46. ST — Seaside More Brushes with Callbacks.. > Text Input / Text Area > Submit Button > Check-Box > Radio Group > Select List > File-Upload Have a look at the tests! Lukas Renggli and Marcus Denker 5.46
  47. 47. ST — Seaside Register new Component / Task > Create method #canBeRoot returning true on class side > Register using Seaside configuration interface. > Or call #registerAsApplication: in the class-side #initialize Lukas Renggli and Marcus Denker 5.47
  48. 48. ST — Seaside Roadmap > Introduction — Web applications / Overview — Installation > Control Flow > Components > Composition Lukas Renggli and Marcus Denker 5.48
  49. 49. ST — Seaside 4. Compositon > Backtracking > Subcomponents > Widgets Lukas Renggli and Marcus Denker 5.49
  50. 50. ST — Seaside Backtracking State > Seaside does not backtrack state by default. > Often it is not obvious whether an object should be backtracked or not. Mostly this has to be decided by the developer on a per-object basis. > Any object can be declared to be backtracked. Lukas Renggli and Marcus Denker 5.50
  51. 51. ST — Seaside Shopping Cart Problem > Online Bookstore (without backtracking) — When using the back-button, usually the items should not be removed from the cart; just resume browsing from the old location. > Flight Reservation System (with backtracking) — When using the back-button, usually you want to check other flights, this means the selected flight should be removed. Lukas Renggli and Marcus Denker 5.51
  52. 52. ST — Seaside Register Object > Implement method #states that returns an Array that contains your object. > This will backtrack the instance-variables of the objects, not the objects themselves SomeComponent>>#states ^ Array with: model. Lukas Renggli and Marcus Denker 5.52
  53. 53. ST — Seaside Subcomponents > It is common for a component to display instances of other components. > Components can be nested into each other using the composite pattern. > A subcomponent is displayed using the method #render: on the canvas. Lukas Renggli and Marcus Denker 5.53
  54. 54. ST — Seaside Initialize Children > Subcomponents are usually stored within instance variables of the parent component. > Subcomponents are commonly created lazily or as part of the components #initialize method. SomeComponent>>initialize super initialize. counter := WACounter new. Lukas Renggli and Marcus Denker 5.54
  55. 55. ST — Seaside Enable Children > Parent Components must implement a #children method returning a collection of subcomponents that they might display. > If you fail to specify #children correctly, Seaside will raise an exception. SomeComponent>>children ^ Array with: counter Lukas Renggli and Marcus Denker 5.55
  56. 56. ST — Seaside Render Children > Children are rendered by sending the message #render: to the rendering canvas. > Never directly send #renderContentOn: to the subcomponent. SomeComponent>>renderContentOn: html html heading level: 1; with: ‘My Counter’. html render: counter. Lukas Renggli and Marcus Denker 5.56
  57. 57. ST — Seaside Widgets > Components can be reused in different contexts within different applications. > Seaside is shipped with a small collection of widgets ready to use. > Load and use widgets that have been developed by the Seaside community. > Write your own widgets that exactly fit your needs Lukas Renggli and Marcus Denker 5.57
  58. 58. ST — Seaside Widgets: Examples > Batched List > Tab Panel > Calendar Have a look at the classes in Seaside-Components-Widgets Lukas Renggli and Marcus Denker 5.58
  59. 59. ST — Seaside Custom Widgets > Create a new component. > Add methods to specify domain-model, subcomponents, properties… > Assign CSS names/classes to make it skinnable with css style-sheet. — Implement method #style to return CSS for component > Write tests and small example applications. Lukas Renggli and Marcus Denker 5.59
  60. 60. ST — Seaside There is more.. > Development Tools — Demo in the Exercise Session (Halo, Configuration…) — Debugging: Next Lecture > AJAX and script.aculo.us > Persistency (Databases) Lukas Renggli and Marcus Denker 5.60
  61. 61. ST — Seaside Literature > HPI Seaside Tutorial: — http://www.swa.hpi.uni-potsdam.de/seaside/tutorial > Ducasse, Lienhard, Renggli: Seaside: A Flexible Environment for Building Dynamic Web Applications (IEEE Software, vol. 24 no.5) > Ducasse, Lienhard, Renggli: Seaside, a Multiple Control Flow Web Application Framework (Proceedings ISC04) > …. More at Seaside.st Lukas Renggli and Marcus Denker 5.61
  62. 62. ST — Seaside License > http://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported You are free: to Share — to copy, distribute and transmit the work to Remix — to adapt the work Under the following conditions: Attribution. You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page. Any of the above conditions can be waived if you get permission from the copyright holder. Nothing in this license impairs or restricts the author's moral rights. Lukas Renggli and Marcus Denker 5.62

×