seaside web 2.0
DESCRIPTION
Seaside Web 2.0. Lukas Renggli. ESUG 2006, PragueTRANSCRIPT
Lukas Renggli Seaside
Why should I upgrade?
2
Lukas Renggli Seaside
Collaboration
3
Lukas Renggli Seaside
Design
4
Lukas Renggli Seaside
Liveliness
5
Lukas Renggli Seaside
Sharing
6
Lukas Renggli Seaside
Usability
7
Lukas Renggli Seaside
How can I upgrade?Can I do it with Seaside?
8
Lukas Renggli Seaside
XHTMLSemantically valid markup
9
Lukas Renggli Seaside
XHTMLSemantically valid markup
9
✓
Lukas Renggli Seaside
CSSCascading Style-Sheets
10
Lukas Renggli Seaside
CSSCascading Style-Sheets
10
✓
Lukas Renggli Seaside
RSSReally Simple Syndication
11
Lukas Renggli Seaside
RSSReally Simple Syndication
11
✓
Lukas Renggli Seaside
AJAXAsynchronous JavaScript and XML
12
Lukas Renggli Seaside
COMETHTTP Streaming, Server Push
13
Lukas Renggli Seaside14
SeasideWeb 2.0
Lukas Renggli Seaside
Challenge
15
Lukas Renggli Seaside
Concentrate onto the Web application
16
yes
Lukas Renggli Seaside
BrowserBugs
17
no
Lukas Renggli Seaside
BrowserDifferences
18
no
Lukas Renggli Seaside
BrowserIncompatibilities
19
no
Lukas Renggli Seaside20
Lukas Renggli Seaside21
Lukas Renggli Seaside22
Lukas Renggli Seaside23
Tight Integration
Lukas Renggli Seaside
Feature Complete
24
Lukas Renggli Seaside
Up-To-Date
25
Lukas Renggli Seaside
Say it in Smalltalk
26
Lukas Renggli Seaside27
Avi Bryant www.smallthought.com
Lukas Renggliwww.lukas-renggli.ch
Lukas Renggli Seaside
Say it in Smalltalk
28
Lukas Renggli Seaside
No JavaScript Programming
29
Lukas Renggli Seaside
Still, you need to be aware thatyour code will result in JavaScript
30
Lukas Renggli Seaside
Think of it as Magic
31
html effect id: ‘hint’; shake
new Effect.Shake(‘hint’)
Lukas Renggli Seaside
Adding JavaScript Events
32
html div onClick: (html effect toggle); with: [ ... ]
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Choose a strategy
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Choose a strategy
Define options
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Choose a strategy
Define options
Assign httpevent handlers
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Choose a strategy
Define options
Assign httpevent handlers
Set triggers to serialize client state
Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
Choose a strategy
Define options
Assign httpevent handlers
Set triggers to serialize client state
Define primary (and secondary) callbacks
Lukas Renggli Seaside
• Request
• Updater– Insertion– Periodical
• Evaluator
AJAX Strategies
34
Lukas Renggli Seaside
AJAX Request
• Perform a request and evaluate the callback ajaxCallback on the server.
• Note: A bug in your code doesn’t show up in the Web browser, but directly as a debugger within your development image.
html request callback: [ self ajaxCallback ]
35
Lukas Renggli Seaside
AJAX Updater
• Replace the contents of the DOM element named domId with XHTML rendered by renderAjaxOn:.
html updater id: domId; callback: [ :r | self renderAjaxOn: r ]
36
Lukas Renggli Seaside
Triggers
• triggerForm: aDomIdTrigger the form aDomId and all containing form-fields and associated callbacks.
•triggerFormElement: aDomIdTrigger the callback of the form element named aDomId. Does not work for checkbox and multi-select list.
37
Lukas Renggli Seaside
Sortable List
38
Lukas Renggli Seaside
Sortable List
38
html unorderedList id: ‘list’; script: (html sortable onUpdate: (html request triggerSortable: ‘list’ callback: [ :v | list := v ])); with: [ list do: [ :each | html listItem passenger: each; with: each label ] ]
Lukas Renggli Seaside
Drag & Drop
39
Lukas Renggli Seaside
Drag & Drop
39
html div class: ‘shape’; passenger: aCircle; script: html draggable
Lukas Renggli Seaside
html div id: ‘dropbox’; script: (html droppable accept: ‘shape’; onDrop: (html updater id: ‘dropbox’; triggerPassenger: [ :v | box add: v ]; callback: [ :r | self renderBox: r ])); with: [ html renderBox: r ]
Drag & Drop
39
html div class: ‘shape’; passenger: aCircle; script: html draggable
Lukas Renggli Seaside
In Place Editing
40
html paragraph script: (html inPlaceEditor triggerInPlaceEditor: [ :v | text := v ]; callback: [ :r | r render: text ]); with: text
Lukas Renggli Seaside
What about debugging?
41
Lukas Renggli Seaside42
Lukas Renggli Seaside43
Lukas Renggli Seaside44
Lukas Renggli Seaside
scriptaculous.seasidehosting.st
45
Lukas Renggli Seaside
“It‘s more like Web 3.0”
46