0
for




 Lukas Renggli
ESUG 2009, Brest
‣   John Resig, jquery.com
‣   Lightweight, fast and concise
    - Document traversing
    - Event Handling
    - AJAX Int...
‣   High-level, themeable widgets on top of
    JQuery.

    - Draggable               - Datepicker
    - Droppable       ...
T1ooousands
 of Plugins
For   Experts
Forget about
$(document).ready(...)
Don’t care about
    “unobtrusive”
For   Experts
Say it in
Smalltalk
Feature
Complete
Up-to-date
only
     5 slides
                s l i de   5
       only              s

   Everything
you need to know
Query + Action
OM
   nd D s
Fi
 e le m e nt


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


      Query + Action
                  Pe r fo r m
                 a n a ct i o
          ...
Create a Query
html jQuery: ‘.special’
Create a Query
html jQuery: ‘.special’


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


S m a l lt a k p ro                Q uer y La ng uage
                 ...
Perform an Action
(html jQuery: ‘div.special’) remove
Perform an Action
(html jQuery: ‘div.special’) remove

           . . . a nd 1 80 ot h e r
          (we l l do   c u m e ...
Attaching to Element
	   html anchor

   
 onClick: (html jQuery: ‘div’)

   
 
 remove;

   
 with: ‘Remove’
Attaching to Element
	   html anchor

   
 onClick: (html jQuery:this)
                     jQuery ‘div’)

   
 
 remove;
...
At Load-Time
html document addLoadScript:

 (html jQuery: ‘div’) remove
Query Examples
$(“div.hint”)


html jQuery expression: ‘div.hint’

     html jQuery: ‘div.hint’
$(“#foo”)


html jQuery id: ‘foo’

 html jQuery: #foo
$(“*”)


html jQuery expression: ‘*’

      html jQuery all
$(this)


html jQuery this

html jQuery new
Refine Queries
Siblings
  aQuery siblings
aQuery siblings: ‘div’
Next Siblings
    aQuery next
  aQuery next: ‘div’
   aQuery nextAll
 aQuery nextAll: ‘div’
Previous Siblings
     aQuery previous
  aQuery previous: ‘div’
      aQuery prevAll
   aQuery prevAll: ‘div’
Children
  aQuery children
aQuery children: ‘div’

  aQuery contents
  aQuery find: ‘div’
Parent
  aQuery parent
aQuery parent: ‘div’

  aQuery parents
aQuery parents: ‘div’

  aQuery closest
aQuery closest: ‘div’
Perform Actions
Classes
  aQuery addClass: ‘foo’
aQuery removeClass: ‘foo’
 aQuery toggleClass: ‘foo’
  aQuery hasClass: ‘foo’
Attributes
 aQuery attributes: aDictionary
   aQuery attributeAt: ‘href’
aQuery attributeAt: ‘href’ put: ‘#’
 aQuery remov...
Styles
   aQuery css: aDictionary
    aQuery cssAt: ‘color’
aQuery cssAt: ‘color’ put: ‘#ff0’
Contents
 aQuery html: [ :r | r div ]
aQuery value: ‘some value’
 aQuery text: ‘some text’
Insert Contents
 aQuery before: [ :r | r div ]
aQuery prepend: [ :r | r div ]
aQuery append: [ :r | r div ]
  aQuery after...
Replace Contents
aQuery replaceWith: [ :r | r div ]
   aQuery wrap: [ :r | r div ]
  aQuery wrapAll: [ :r | r div ]
 aQuer...
Animations
    aQuery show
aQuery show: 1 second

    aQuery hide
aQuery hide: 1 second
Events
   aQuery onClick: ‘alert(“Hello”)’
 aQuery on: ‘click’ do: ‘alert(“Hello”)’
aQuery on: ‘click’ once: ‘alert(“Hello...
AJAX
AJAX
aQuery load html: [ :r | r div: Time now ]
No Query
html jQuery ajax
Generators
    anAjax html: [ :r | r div ]
anAjax script: [ :s | s alert: ‘Hello’ ]
Triggering Callbacks
         anAjax serialize: aQuery
anAjax trigger: [ :p | ... ] passengers: aQuery
 anAjax callback: [...
More Information
JQuery Docs
 docs.jquery.com
Functional Tests
 /seaside/tests/jquery
/seaside/tests/jquery-ui
File Libraries


JQDevelopmentLibrary     JQuery – Full

JQDeploymentLibrary      JQuery – Compressed

JQGoogleLibrary    ...
How To
Click and Show


html anchor
	 onClick: (html jQuery: 'div.help') toggle;
	 with: 'About jQuery'.

html div
	 class: 'help...
Replace a Component


html div
	 id: (id := html nextId);
	 with: child.

html anchor
	 onClick: ((html jQuery id: id) loa...
Update Multiple Elements


html div id: #date.
html div id: #time.

html anchor
	 onClick: (html jQuery ajax script: [ :s ...
Display a Lightbox

| id |
html div
	 id: (id := html nextId);
	 script: (html jQuery new dialog
	 	 title: 'Lightbox Dial...
Upcoming SlideShare
Loading in...5
×

JQuery in Seaside

5,479

Published on

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

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

No Downloads
Views
Total Views
5,479
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "JQuery in Seaside"

  1. 1. for Lukas Renggli ESUG 2009, Brest
  2. 2. ‣ John Resig, jquery.com ‣ Lightweight, fast and concise - Document traversing - Event Handling - AJAX Interaction - Animating
  3. 3. ‣ High-level, themeable widgets on top of JQuery. - Draggable - Datepicker - Droppable - Dialog - Sortable - Progressbar - Selectable - Slider - Resizable - Tabs - Accordion
  4. 4. T1ooousands of Plugins
  5. 5. For Experts
  6. 6. Forget about $(document).ready(...)
  7. 7. Don’t care about “unobtrusive”
  8. 8. For Experts
  9. 9. Say it in Smalltalk
  10. 10. Feature Complete
  11. 11. Up-to-date
  12. 12. only 5 slides s l i de 5 only s Everything you need to know
  13. 13. Query + Action
  14. 14. OM nd D s Fi e le m e nt Query + Action
  15. 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. 16. Create a Query html jQuery: ‘.special’
  17. 17. Create a Query html jQuery: ‘.special’ Q uer y La ng uage is C S S
  18. 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. 19. Perform an Action (html jQuery: ‘div.special’) remove
  20. 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. 21. Attaching to Element html anchor onClick: (html jQuery: ‘div’) remove; with: ‘Remove’
  22. 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. 23. At Load-Time html document addLoadScript: (html jQuery: ‘div’) remove
  24. 24. Query Examples
  25. 25. $(“div.hint”) html jQuery expression: ‘div.hint’ html jQuery: ‘div.hint’
  26. 26. $(“#foo”) html jQuery id: ‘foo’ html jQuery: #foo
  27. 27. $(“*”) html jQuery expression: ‘*’ html jQuery all
  28. 28. $(this) html jQuery this html jQuery new
  29. 29. Refine Queries
  30. 30. Siblings aQuery siblings aQuery siblings: ‘div’
  31. 31. Next Siblings aQuery next aQuery next: ‘div’ aQuery nextAll aQuery nextAll: ‘div’
  32. 32. Previous Siblings aQuery previous aQuery previous: ‘div’ aQuery prevAll aQuery prevAll: ‘div’
  33. 33. Children aQuery children aQuery children: ‘div’ aQuery contents aQuery find: ‘div’
  34. 34. Parent aQuery parent aQuery parent: ‘div’ aQuery parents aQuery parents: ‘div’ aQuery closest aQuery closest: ‘div’
  35. 35. Perform Actions
  36. 36. Classes aQuery addClass: ‘foo’ aQuery removeClass: ‘foo’ aQuery toggleClass: ‘foo’ aQuery hasClass: ‘foo’
  37. 37. Attributes aQuery attributes: aDictionary aQuery attributeAt: ‘href’ aQuery attributeAt: ‘href’ put: ‘#’ aQuery removeAttribute: ‘href’
  38. 38. Styles aQuery css: aDictionary aQuery cssAt: ‘color’ aQuery cssAt: ‘color’ put: ‘#ff0’
  39. 39. Contents aQuery html: [ :r | r div ] aQuery value: ‘some value’ aQuery text: ‘some text’
  40. 40. Insert Contents aQuery before: [ :r | r div ] aQuery prepend: [ :r | r div ] aQuery append: [ :r | r div ] aQuery after: [ :r | r div ]
  41. 41. Replace Contents aQuery replaceWith: [ :r | r div ] aQuery wrap: [ :r | r div ] aQuery wrapAll: [ :r | r div ] aQuery wrapInner: [ :r | r div ]
  42. 42. Animations aQuery show aQuery show: 1 second aQuery hide aQuery hide: 1 second
  43. 43. Events aQuery onClick: ‘alert(“Hello”)’ aQuery on: ‘click’ do: ‘alert(“Hello”)’ aQuery on: ‘click’ once: ‘alert(“Hello”)’ aQuery trigger: ‘click’
  44. 44. AJAX
  45. 45. AJAX aQuery load html: [ :r | r div: Time now ]
  46. 46. No Query html jQuery ajax
  47. 47. Generators anAjax html: [ :r | r div ] anAjax script: [ :s | s alert: ‘Hello’ ]
  48. 48. Triggering Callbacks anAjax serialize: aQuery anAjax trigger: [ :p | ... ] passengers: aQuery anAjax callback: [ :v | ... ] value: anObject
  49. 49. More Information
  50. 50. JQuery Docs docs.jquery.com
  51. 51. Functional Tests /seaside/tests/jquery /seaside/tests/jquery-ui
  52. 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. 53. How To
  54. 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. 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. 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. 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'
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×