Seaside Web 2.0. Lukas Renggli. ESUG 2006, Prague

1. Lukas Renggli Seaside
Lukas Renggli
renggli@iam.unibe.ch
Web 2.0
1
Seaside
hot

2. Lukas Renggli Seaside
Why should I upgrade?
2

3. Lukas Renggli Seaside
Collaboration
3

4. Lukas Renggli Seaside
Design
4

5. Lukas Renggli Seaside
Liveliness
5

6. Lukas Renggli Seaside
Sharing
6

7. Lukas Renggli Seaside
Usability
7

8. Lukas Renggli Seaside
How can I upgrade?
Can I do it with Seaside?
8

9. Lukas Renggli Seaside
XHTML
Semantically valid markup
9

10. Lukas Renggli Seaside
XHTML
Semantically valid markup
9
✓

11. Lukas Renggli Seaside
CSS
Cascading Style-Sheets
10

12. Lukas Renggli Seaside
CSS
Cascading Style-Sheets
10
✓

13. Lukas Renggli Seaside
RSS
Really Simple Syndication
11

14. Lukas Renggli Seaside
RSS
Really Simple Syndication
11
✓

15. Lukas Renggli Seaside
AJAX
Asynchronous JavaScript and XML
12

16. Lukas Renggli Seaside
COMET
HTTP Streaming, Server Push
13

17. Lukas Renggli Seaside
14
Seaside
Web 2.0

18. Lukas Renggli Seaside
Challenge
15

19. Lukas Renggli Seaside
Concentrate onto
the Web application
16
yes

20. Lukas Renggli Seaside
Browser
Bugs
17
no

21. Lukas Renggli Seaside
Browser
Differences
18
no

22. Lukas Renggli Seaside
Browser
Incompatibilities
19
no

23. Lukas Renggli Seaside
20

24. Lukas Renggli Seaside
21

25. Lukas Renggli Seaside
22

26. Lukas Renggli Seaside
23
Tight Integration

27. Lukas Renggli Seaside
Feature Complete
24

28. Lukas Renggli Seaside
Up-To-Date
25

29. Lukas Renggli Seaside
Say it in Smalltalk
26

30. Lukas Renggli Seaside
27
Avi Bryant
www.smallthought.com
Lukas Renggli
www.lukas-renggli.ch

31. Lukas Renggli Seaside
Say it in Smalltalk
28

32. Lukas Renggli Seaside
No JavaScript
Programming
29

33. Lukas Renggli Seaside
Still, you need to be aware that
your code will result in JavaScript
30

34. Lukas Renggli Seaside
Think of it as Magic
31
html effect
id: ‘hint’;
shake
new Effect.Shake(‘hint’)

35. Lukas Renggli Seaside
Adding JavaScript Events
32
html div
onClick: (html effect toggle);
with: [ ... ]

36. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*

37. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*
Choose a strategy

38. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*
Choose a strategy
Define options

39. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*
Choose a strategy
Define options
Assign http
event handlers

40. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*
Choose a strategy
Define options
Assign http
event handlers
Set triggers to
serialize client state

41. Lukas Renggli Seaside
AJAX – Step by Step
33
html (updater|periodical|request|evaluator)
[ OPTIONS; ]*
[ HANDLER; ]*
[ TRIGGER; ]*
[ CALLBACK; ]*
Choose a strategy
Define options
Assign http
event handlers
Set triggers to
serialize client state
Define primary (and
secondary) callbacks

42. Lukas Renggli Seaside
• Request
• Updater
– Insertion
– Periodical
• Evaluator
AJAX Strategies
34

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

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

45. Lukas Renggli Seaside
Triggers
• triggerForm: aDomId
Trigger the form aDomId and all containing
form-fields and associated callbacks.
•triggerFormElement: aDomId
Trigger the callback of the form element
named aDomId. Does not work for checkbox
and multi-select list.
37

46. Lukas Renggli Seaside
Sortable List
38

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

48. Lukas Renggli Seaside
Drag & Drop
39

49. Lukas Renggli Seaside
Drag & Drop
39
html div
class: ‘shape’;
passenger: aCircle;
script: html draggable

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

51. Lukas Renggli Seaside
In Place Editing
40
html paragraph
script: (html inPlaceEditor
triggerInPlaceEditor: [ :v | text := v ];
callback: [ :r | r render: text ]);
with: text

52. Lukas Renggli Seaside
What about debugging?
41

53. Lukas Renggli Seaside
42

54. Lukas Renggli Seaside
43

55. Lukas Renggli Seaside
44

56. Lukas Renggli Seaside
scriptaculous.seasidehosting.st
45

57. Lukas Renggli Seaside
“It‘s more like
Web 3.0”
46