Lukas Renggli Seaside

Lukas Rengglirenggli@iam.unibe.ch

Web 2.0

1

Seasidehot

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