Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

6,713 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

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'

×