Seaside Web 2.0

1,752 views
1,661 views

Published on

Seaside Web 2.0. Lukas Renggli. ESUG 2006, Prague

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

  • Be the first to like this

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

No notes for slide

Seaside Web 2.0

  1. 1. Lukas Renggli Seaside Lukas Renggli renggli@iam.unibe.ch Web 2.0 1 Seaside hot
  2. 2. Lukas Renggli Seaside Why should I upgrade? 2
  3. 3. Lukas Renggli Seaside Collaboration 3
  4. 4. Lukas Renggli Seaside Design 4
  5. 5. Lukas Renggli Seaside Liveliness 5
  6. 6. Lukas Renggli Seaside Sharing 6
  7. 7. Lukas Renggli Seaside Usability 7
  8. 8. Lukas Renggli Seaside How can I upgrade? Can I do it with Seaside? 8
  9. 9. Lukas Renggli Seaside XHTML Semantically valid markup 9
  10. 10. Lukas Renggli Seaside XHTML Semantically valid markup 9 ✓
  11. 11. Lukas Renggli Seaside CSS Cascading Style-Sheets 10
  12. 12. Lukas Renggli Seaside CSS Cascading Style-Sheets 10 ✓
  13. 13. Lukas Renggli Seaside RSS Really Simple Syndication 11
  14. 14. Lukas Renggli Seaside RSS Really Simple Syndication 11 ✓
  15. 15. Lukas Renggli Seaside AJAX Asynchronous JavaScript and XML 12
  16. 16. Lukas Renggli Seaside COMET HTTP Streaming, Server Push 13
  17. 17. Lukas Renggli Seaside14 Seaside Web 2.0
  18. 18. Lukas Renggli Seaside Challenge 15
  19. 19. Lukas Renggli Seaside Concentrate onto the Web application 16 yes
  20. 20. Lukas Renggli Seaside Browser Bugs 17 no
  21. 21. Lukas Renggli Seaside Browser Differences 18 no
  22. 22. Lukas Renggli Seaside Browser Incompatibilities 19 no
  23. 23. Lukas Renggli Seaside20
  24. 24. Lukas Renggli Seaside21
  25. 25. Lukas Renggli Seaside22
  26. 26. Lukas Renggli Seaside23 Tight Integration
  27. 27. Lukas Renggli Seaside Feature Complete 24
  28. 28. Lukas Renggli Seaside Up-To-Date 25
  29. 29. Lukas Renggli Seaside Say it in Smalltalk 26
  30. 30. Lukas Renggli Seaside27 Avi Bryant www.smallthought.com Lukas Renggli www.lukas-renggli.ch
  31. 31. Lukas Renggli Seaside Say it in Smalltalk 28
  32. 32. Lukas Renggli Seaside No JavaScript Programming 29
  33. 33. Lukas Renggli Seaside Still, you need to be aware that your code will result in JavaScript 30
  34. 34. Lukas Renggli Seaside Think of it as Magic 31 html effect id: ‘hint’; shake new Effect.Shake(‘hint’)
  35. 35. Lukas Renggli Seaside Adding JavaScript Events 32 html div onClick: (html effect toggle); with: [ ... ]
  36. 36. Lukas Renggli Seaside AJAX – Step by Step 33 html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]*
  37. 37. Lukas Renggli Seaside AJAX – Step by Step 33 html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]* Choose a strategy
  38. 38. Lukas Renggli Seaside AJAX – Step by Step 33 html (updater|periodical|request|evaluator) [ OPTIONS; ]* [ HANDLER; ]* [ TRIGGER; ]* [ CALLBACK; ]* Choose a strategy Define options
  39. 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. 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. 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. 42. Lukas Renggli Seaside • Request • Updater – Insertion – Periodical • Evaluator AJAX Strategies 34
  43. 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. 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. 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. 46. Lukas Renggli Seaside Sortable List 38
  47. 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. 48. Lukas Renggli Seaside Drag & Drop 39
  49. 49. Lukas Renggli Seaside Drag & Drop 39 html div class: ‘shape’; passenger: aCircle; script: html draggable
  50. 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. 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. 52. Lukas Renggli Seaside What about debugging? 41
  53. 53. Lukas Renggli Seaside42
  54. 54. Lukas Renggli Seaside43
  55. 55. Lukas Renggli Seaside44
  56. 56. Lukas Renggli Seaside scriptaculous.seasidehosting.st 45
  57. 57. Lukas Renggli Seaside “It‘s more like Web 3.0” 46

×