Seaside Tutorial: JQuery in Seaside by J. Fitzell and L. Renggli. ESUG09, Brest, France

1. for
Lukas Renggli
ESUG 2009, Brest

2. ‣ John Resig, jquery.com
‣ Lightweight, fast and concise
- Document traversing
- Event Handling
- AJAX Interaction
- Animating

3. ‣ High-level, themeable widgets on top of
JQuery.
- Draggable - Datepicker
- Droppable - Dialog
- Sortable - Progressbar
- Selectable - Slider
- Resizable - Tabs
- Accordion

4. T1ooousands
of Plugins

5. For Experts

6. Forget about
$(document).ready(...)

7. Don’t care about
“unobtrusive”

8. For Experts

9. Say it in
Smalltalk

10. Feature
Complete

11. Up-to-date

12. only
5 slides
s l i de 5
only s
Everything
you need to know

13. Query + Action

14. OM
nd D s
Fi
e le m e nt
Query + Action

15. OM
nd D s
Fi
e le m e nt
Query + Action
Pe r fo r m
a n a ct i o
n

16. Create a Query
html jQuery: ‘.special’

17. Create a Query
html jQuery: ‘.special’
Q uer y La ng uage
is C S S

18. Create a Query
html jQuery: ‘.special’
S m a l lt a k p ro Q uer y La ng uage
x y o bje ct
JQ u e r yI n st a is C S S
nce

19. Perform an Action
(html jQuery: ‘div.special’) remove

20. Perform an Action
(html jQuery: ‘div.special’) remove
. . . a nd 1 80 ot h e r
(we l l do c u m e nte d)
a ctio n s

21. Attaching to Element
html anchor
onClick: (html jQuery: ‘div’)
remove;
with: ‘Remove’

22. Attaching to Element
html anchor
onClick: (html jQuery:this)
jQuery ‘div’)
remove;
with: ‘Remove’
Sh o r tc u t, se e
JQuer yC l a s s

23. At Load-Time
html document addLoadScript:
(html jQuery: ‘div’) remove

24. Query Examples

25. $(“div.hint”)
html jQuery expression: ‘div.hint’
html jQuery: ‘div.hint’

26. $(“#foo”)
html jQuery id: ‘foo’
html jQuery: #foo

27. $(“*”)
html jQuery expression: ‘*’
html jQuery all

28. $(this)
html jQuery this
html jQuery new

29. Refine Queries

30. Siblings
aQuery siblings
aQuery siblings: ‘div’

31. Next Siblings
aQuery next
aQuery next: ‘div’
aQuery nextAll
aQuery nextAll: ‘div’

32. Previous Siblings
aQuery previous
aQuery previous: ‘div’
aQuery prevAll
aQuery prevAll: ‘div’

33. Children
aQuery children
aQuery children: ‘div’
aQuery contents
aQuery find: ‘div’

34. Parent
aQuery parent
aQuery parent: ‘div’
aQuery parents
aQuery parents: ‘div’
aQuery closest
aQuery closest: ‘div’

35. Perform Actions

36. Classes
aQuery addClass: ‘foo’
aQuery removeClass: ‘foo’
aQuery toggleClass: ‘foo’
aQuery hasClass: ‘foo’

37. Attributes
aQuery attributes: aDictionary
aQuery attributeAt: ‘href’
aQuery attributeAt: ‘href’ put: ‘#’
aQuery removeAttribute: ‘href’

38. Styles
aQuery css: aDictionary
aQuery cssAt: ‘color’
aQuery cssAt: ‘color’ put: ‘#ff0’

39. Contents
aQuery html: [ :r | r div ]
aQuery value: ‘some value’
aQuery text: ‘some text’

40. Insert Contents
aQuery before: [ :r | r div ]
aQuery prepend: [ :r | r div ]
aQuery append: [ :r | r div ]
aQuery after: [ :r | r div ]

41. Replace Contents
aQuery replaceWith: [ :r | r div ]
aQuery wrap: [ :r | r div ]
aQuery wrapAll: [ :r | r div ]
aQuery wrapInner: [ :r | r div ]

42. Animations
aQuery show
aQuery show: 1 second
aQuery hide
aQuery hide: 1 second

43. Events
aQuery onClick: ‘alert(“Hello”)’
aQuery on: ‘click’ do: ‘alert(“Hello”)’
aQuery on: ‘click’ once: ‘alert(“Hello”)’
aQuery trigger: ‘click’

44. AJAX

45. AJAX
aQuery load html: [ :r | r div: Time now ]

46. No Query
html jQuery ajax

47. Generators
anAjax html: [ :r | r div ]
anAjax script: [ :s | s alert: ‘Hello’ ]

48. Triggering Callbacks
anAjax serialize: aQuery
anAjax trigger: [ :p | ... ] passengers: aQuery
anAjax callback: [ :v | ... ] value: anObject

49. More Information

50. JQuery Docs
docs.jquery.com

51. Functional Tests
/seaside/tests/jquery
/seaside/tests/jquery-ui

52. File Libraries
JQDevelopmentLibrary JQuery – Full
JQDeploymentLibrary JQuery – Compressed
JQGoogleLibrary JQuery – Google
JQUiDevelopmentLibrary JQuery UI – Full
JQUiDeploymentLibrary JQuery UI – Compressed
JQUiGoogleLibrary JQuery UI – Google

53. How To

54. Click and Show
html anchor
onClick: (html jQuery: 'div.help') toggle;
with: 'About jQuery'.
html div
class: 'help';
style: 'display: none';
with: 'jQuery is a fast and ...'

55. Replace a Component
html div
id: (id := html nextId);
with: child.
html anchor
onClick: ((html jQuery id: id) load
html: [ :r |
child := OtherComponent new;
r render: child ]);
with: ‘Change Component’

56. Update Multiple Elements
html div id: #date.
html div id: #time.
html anchor
onClick: (html jQuery ajax script: [ :s |
s << (s jQuery: #date)
html: [ :r | r render: Date today ].
s << (s jQuery: #time)
html: [ :r | r render: Time now ] ]);
with: ‘Update’

57. Display a Lightbox
| id |
html div
id: (id := html nextId);
script: (html jQuery new dialog
title: 'Lightbox Dialog';
overlay: (Dictionary new
at: 'background-color' put: '#000';
at: 'opacity' put: 0.75;
yourself);
modal: true);
with: [ self renderDialogOn: html ]
html anchor
onClick: (html jQuery id: id) dialog open;
with: 'Open Lightbox'