Seaside hot

Document Sample
Seaside hot Powered By Docstoc
					                       h ot
                Seaside                                            Why should I upgrade?
                  Web 2.0
                      Lukas Renggli

Lukas Renggli              1             Seaside   Lukas Renggli             2             Seaside

                Collaboration                                             Design

Lukas Renggli              3             Seaside   Lukas Renggli             4             Seaside

                  Liveliness                                              Sharing

Lukas Renggli              5             Seaside   Lukas Renggli             6             Seaside
                    Usability                                              How can I upgrade?
                                                                               Can I do it with Seaside?

Lukas Renggli               7                    Seaside   Lukas Renggli                   8                   Seaside

                                             !                                                             !
                    XHTML                                                              CSS
                Semantically valid markup                                        Cascading Style-Sheets

Lukas Renggli               9                    Seaside   Lukas Renggli                  10                   Seaside

                 Really Simple Syndication

                                                                            Asynchronous JavaScript and XML

Lukas Renggli              11                    Seaside   Lukas Renggli                  12                   Seaside
                    COMET                                                     Seaside
                HTTP Streaming, Server Push                                   Web 2.0

Lukas Renggli              13                  Seaside   Lukas Renggli            14              Seaside

                                                                                           ye s
                                                                          Concentrate onto
                                                                         the Web application

Lukas Renggli              15                  Seaside   Lukas Renggli            16              Seaside

                                          no                                               no
                    Browser                                                   Browser
                      Bugs                                                   Differences

Lukas Renggli              17                  Seaside   Lukas Renggli            18              Seaside

Lukas Renggli           19           Seaside   Lukas Renggli          20          Seaside

Lukas Renggli           21           Seaside   Lukas Renggli          22          Seaside

                Tight Integration                              Feature Complete

Lukas Renggli           23           Seaside   Lukas Renggli          24          Seaside
                     Up-To-Date                                       Say it in Smalltalk

Lukas Renggli             25            Seaside   Lukas Renggli                    26                   Seaside

                     Avi Bryant
                                                                      Say it in Smalltalk
                   Lukas Renggli
Lukas Renggli             27            Seaside   Lukas Renggli                    28                   Seaside

                    No JavaScript                                  Still, you need to be aware that
                    Programming                                   your code will result in JavaScript

Lukas Renggli             29            Seaside   Lukas Renggli                    30                   Seaside
                     Think of it as Magic                                                        Adding JavaScript Events
                                html effect
                                  id: ‘hint’;
                                  shake                                                           html div
                                                                                                    onClick: (html effect toggle);
                                                                                                    with: [ ... ]

                       new Effect.Shake(‘hint’)

Lukas Renggli                          31                              Seaside   Lukas Renggli                           32                      Seaside

                    AJAX – Step by Step                                                                   AJAX Strategies
                             Choose a strategy

         html (updater|periodical|request|evaluator)                                             •    Request
           [ OPTIONS; ]*
           [ HANDLER; ]*               Define options                                             •    Updater
           [ TRIGGER; ]*                                                                             – Insertion
           [ CALLBACK; ]*                     Assign http                                            – Periodical
                                                      event handlers                             •    Evaluator
       Define primary (and                Set triggers to
       secondary) callbacks           serialize client state

Lukas Renggli                          33                              Seaside   Lukas Renggli                           34                      Seaside

                          AJAX Request                                                                     AJAX Updater

                •   Perform a request and evaluate the callback
                                                                                                 •   Replace the contents of the DOM element
                    ajaxCallback on the server.
                                                                                                     named domId with XHTML rendered by
                •   Note: A bug in your code doesn’t show up in
                    the Web browser, but directly as a debugger
                    within your development image.                                                   html updater
                                                                                                       id: domId;
                    html request                                                                       callback: [ :r | self renderAjaxOn: r ]
                      callback: [ self ajaxCallback ]

Lukas Renggli                          35                              Seaside   Lukas Renggli                           36                      Seaside
                                Triggers                                                                 In Place Editing

                •   triggerForm: aDomId
                    Trigger the form aDomId and all containing
                    form-fields and associated callbacks.
                • triggerFormElement: aDomId
                    Trigger the callback of the form element                                  html paragraph
                    named aDomId. Does not work for checkbox                                    script: (html inPlaceEditor
                    and multi-select list.                                                         triggerInPlaceEditor: [ :v | text := v ];
                                                                                              ! ! callback: [ :r | r render: text ]);
                                                                                              ! ! with: text
Lukas Renggli                            37                               Seaside   Lukas Renggli                       38                     Seaside

                            Sortable List                                                                  Drag & Drop
                                                                                                                 html div
                               html unorderedList                                                                  class: ‘shape’;
                                 id: ‘list’;                                                                       passenger: aCircle;
                                 script: (html sortable                                                            script: html draggable
                                    onUpdate: (html request                            html div
                                        triggerSortable: ‘list’                          id: ‘dropbox’;
                                        callback: [ :v | list := v ]));                  script: (html droppable
                                 with: [                                                   accept: ‘shape’;
                                    list do: [ :each |                                     onDrop: (html updater
                                         html listItem                                         id: ‘dropbox’;
                                             passenger: each;                                  triggerPassenger: [ :v | box add: v ];
                                             with: each label ] ]                              callback: [ :r | self renderBox: r ]));
                                                                                         with: [ html renderBox: r ]
Lukas Renggli                            39                               Seaside   Lukas Renggli                       40                     Seaside

                What about debugging?

Lukas Renggli                            41                               Seaside   Lukas Renggli                       42                     Seaside
Lukas Renggli          43                 Seaside   Lukas Renggli          44         Seaside

                                                                    “It‘s more like
                                                                       Web 3.0”

Lukas Renggli          45                 Seaside   Lukas Renggli          46         Seaside

Shared By: