Seaside Web 2.0
---------------

Seaside is a mature Web application framework. It has always been able to fly Web 2.0 style, a long time before this term was actually formed. This tutorial is for intermediate to advanced Seaside users that want to learn about the integration of Web 2.0 technologies in Seaside. Learn how to add auto-completion, drag and drop, visual effects, instant feedback, and server push technology, usually without writing a single line of Javascript code by hand.


3. Web 2.0 for Seaside

- start bottom-up
- show comet counter
- show the code of counter
- show comet chat


11. Think of it as Magic

- imagine you want to highlight all div's with the css-class hint
- abracadabra: other approaches try to transform smalltalk to javascript
- idea:
	- simple objects that are configurable
	- sort of low level: close to the JavaScript implementation
	- very powerful, you can do almost anything
	

12. Adding Javascript 2/3

- ToDoListView>>renderContentOn: html
	html div 
		class: 'title';
		onClick: html effect shake;
		with: self model title
- add the library


17. AJAX Request

- give the form an id 'checkboxes'
- remove the buttons

- onChange: (html request callback: [ Transcript show: 'click!' ]);
- new session doesn't remember the callbacks
	
- show slide 23
- onChange: (html request triggerForm: 'checkboxes');
	

18. AJAX Update

- extract the code of the items to #renderItemsOn:
- ToDoListView>>renderItemsOn: html
	self model items do: [ :each |
		self renderItem: each on: html ]

- give it an id
- ToDoListView>>renderContentOn: html
	html div 
		id: 'items';
		with: [ self renderItemsOn: html ]

- onChange: (html updater
	id: 'items';
	triggerForm: 'checkboxes';
	callback: [ :r | self renderItemsOn: r ]);
	
	
25. Sortable Lists

- script: (html sortable
	tag: 'div';
	onUpdate: (html request
		triggerSortable: 'items'
		callback: [ :col | self model items: col ]));
		
- renderItem: anItem on: html
	html div
		passenger: anItem;
		...
		

27. In Place Editor

- html span
	script: (html inPlaceEditor
		triggerInPlaceEditor: [ :v | anItem title: v ];
		callback: [ :r | r render: anItem title ]);
	with: anItem title