JavaScript in Plone:What’s available; how to use it              Steve McMahon (SteveM)                        steve@dcn.o...
CM S!         g M y           JavaScript in Plone: What’s available; how to use itB li n         Steve McMahon (SteveM)   ...
You Are:
You Are:              rs  &        ra toI nt eg        rs        em  e     Th
You Want:
You Want:   Widgets
You Want:Validation      Widgets
You Want:Popups         Validation      Widgets
You Want: Popups             Validation      Widgets Tabs ‘nAccordions
You Want: Popups             Validation               Widgets Tabs ‘nAccordions                DragNDrop
But first …
But first …Nuts & Bolts
JS & CSS InjectionBrowser Resources        ❦Resource Registries
Two Ways Add-OnPackaging
Two Ways Add-OnPackaging            Themes
Two Ways Add-On              BrowserPackaging                      Layers            Themes
Browser Layers                                             Browser<?xml version="1.0"?><layers>  <layer                   ...
zopeskel.browserlayer   [buildout]   parts =      zopeskel   [zopeskel]   recipe = zc.recipe.egg   eggs =      ZopeSkel   ...
zopeskel.browserlayer          [buildout]          parts =             zopeskel          [zopeskel]          recipe = zc.r...
zopeskel.browserlayer          [buildout]          parts =             zopeskel          [zopeskel]          recipe = zc.r...
HTML5 WidgetsWidgets
HTML5 Widgets            (Without HTML5)Widgets
HTML5 Widgets             (Without HTML5)               jQuery Tools           plone.app.jquerytoolsWidgets
HTML5 Widgets             (Without HTML5)               jQuery Tools           plone.app.jquerytools                datein...
HTML5 Widgets             (Without HTML5)               jQuery Tools           plone.app.jquerytools                datein...
Activating Optionals             profiles/default/jsregistry.xml             <javascript                id="++resource++plo...
Munging Old Stuff                  ValidationValidation
Munging Old Stuff                        Validation              jQuery(function ($) {                    // doc read code...
Munging Old Stuff                           Validation             jQuery(function ($) {               $(form.fgBaseEditFo...
Munging Old Stuff                           Validation             jQuery(function ($) {               $(form.fgBaseEditFo...
Munging Old Stuff                           Validation             jQuery(function ($) {               $(form.fgBaseEditFo...
Munging Old Stuff                  ValidationValidation
Munging Old Stuff                           Validation             jQuery(function ($) {               $(form.fgBaseEditFo...
Munging Old Stuff                  ValidationValidation
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)         <div class="photoAlbumEntry">           <a href="http://anon:8080/p1/gallery/chapel/view" title=...
Popups (Overlays)         <div class="photoAlbumEntry">           <a href="http://anon:8080/p1/gallery/chapel/view" title=...
Popups (Overlays)         <div class="photoAlbumEntry">           <a href="http://anon:8080/p1/gallery/chapel/view" title=...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)         jQuery(function ($) {               $(.photoAlbumEntry a).prepOverlay({                   subtyp...
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)Popups
Popups (Overlays)          Subtypes:            Images            AJAX            iframe          Extensive Form Support!P...
Tabs ’N Accordions                 Tabs and Accordions:              Pretty much the same thing! Tabs ‘nAccordions
Tabs ’N Accordions                 Tabs and Accordions:              Pretty much the same thing!                    jQuery...
Tabs ’N Accordions                 Tabs and Accordions:              Pretty much the same thing!                    jQuery...
Tabs ’N Accordions             $(‘container).tabs(             ‘pane selector’, {                 tabs : ‘tab selector’,  ...
Tabs ’N Accordions             $(‘container’).tabs(             ‘pane selector’, {                 tabs : ‘tab selector’, ...
Tabs ’N Accordions             $(‘container).tabs(             ‘pane selector’, {                 tabs : ‘tab selector’,  ...
Tabs ’N Accordions             $(‘container).tabs(             ‘pane selector’, {                 tabs : ‘tab selector’,  ...
Tabs ’N Accordions             $(‘container).tabs(             ‘pane selector’, {                 tabs : ‘tab selector’,  ...
Tabs ’N Accordions Tabs ‘nAccordions
Tabs ’N Accordions Tabs ‘nAccordions
Tabs ’N Accordions                    Fixing a Typical Gotcha              $(#portal-column-two dl.portlet)               ...
Tabs ’N Accordions                       Activating the Accordion             $(#portal-column-two)                 .tabs(...
Drag ’N DropDragNDrop
Drag ’N DropDragNDrop
Drag ’N Drop            jQuery UI            • draggable            • droppable            • sortableDragNDrop
Drag ’N Drop                 jQuery UI                 • draggable                 • droppable                 • sortableD...
Creditsbling_guy: by-nc-sa/2.0 http://www.flickr.com/photos/prawnpie/bling_camera: by-nc-sa/2.0 http://www.flickr.com/photos...
Prochain SlideShare
Chargement dans…5
×

Javascript in Plone

2 691 vues

Publié le

Javascript in Plone: What's available, how to use it. (Bling My Plone!)

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Javascript in Plone

  1. 1. JavaScript in Plone:What’s available; how to use it Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011
  2. 2. CM S! g M y JavaScript in Plone: What’s available; how to use itB li n Steve McMahon (SteveM) steve@dcn.org Plone Conference 2011
  3. 3. You Are:
  4. 4. You Are: rs & ra toI nt eg rs em e Th
  5. 5. You Want:
  6. 6. You Want: Widgets
  7. 7. You Want:Validation Widgets
  8. 8. You Want:Popups Validation Widgets
  9. 9. You Want: Popups Validation Widgets Tabs ‘nAccordions
  10. 10. You Want: Popups Validation Widgets Tabs ‘nAccordions DragNDrop
  11. 11. But first …
  12. 12. But first …Nuts & Bolts
  13. 13. JS & CSS InjectionBrowser Resources ❦Resource Registries
  14. 14. Two Ways Add-OnPackaging
  15. 15. Two Ways Add-OnPackaging Themes
  16. 16. Two Ways Add-On BrowserPackaging Layers Themes
  17. 17. Browser Layers Browser<?xml version="1.0"?><layers> <layer Layers name="example.customization.layer" interface="…browser.interfaces.IExampleCustomization" /></layers>
  18. 18. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …
  19. 19. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …../bin/zopeskel browserlayer
  20. 20. zopeskel.browserlayer [buildout] parts = zopeskel [zopeskel] recipe = zc.recipe.egg eggs = ZopeSkel zopeskel.browserlayer …../bin/zopeskel browserlayer
  21. 21. HTML5 WidgetsWidgets
  22. 22. HTML5 Widgets (Without HTML5)Widgets
  23. 23. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytoolsWidgets
  24. 24. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinputWidgets
  25. 25. HTML5 Widgets (Without HTML5) jQuery Tools plone.app.jquerytools dateinput validationWidgets
  26. 26. Activating Optionals profiles/default/jsregistry.xml <javascript id="++resource++plone.app.jquerytools.validator.js" enabled="True" /> <javascript id="++resource++plone.app.jquerytools.dateinput.js" enabled="True" /> profiles/default/cssregistry.xml <stylesheet id="++resource++plone.app.jquerytools.dateinput.css" enabled="1" />Validation
  27. 27. Munging Old Stuff ValidationValidation
  28. 28. Munging Old Stuff Validation jQuery(function ($) { // doc read code here; // using $ alias for jQuery });Validation
  29. 29. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  30. 30. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  31. 31. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); });Validation
  32. 32. Munging Old Stuff ValidationValidation
  33. 33. Munging Old Stuff Validation jQuery(function ($) { $(form.fgBaseEditForm span.required) .parents(div.field) .children(:input) .attr(required,required); $(form.fgBaseEditForm) .validator(); });Validation
  34. 34. Munging Old Stuff ValidationValidation
  35. 35. Popups (Overlays)Popups
  36. 36. Popups (Overlays)Popups
  37. 37. Popups (Overlays)Popups
  38. 38. Popups (Overlays)Popups
  39. 39. Popups (Overlays)Popups
  40. 40. Popups (Overlays)Popups
  41. 41. Popups (Overlays)Popups
  42. 42. Popups (Overlays)Popups
  43. 43. Popups (Overlays) <div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a> </div>Popups
  44. 44. Popups (Overlays) <div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a> </div>Popups
  45. 45. Popups (Overlays) <div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a> </div>Popups
  46. 46. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  47. 47. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  48. 48. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  49. 49. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  50. 50. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  51. 51. Popups (Overlays) jQuery(function ($) { $(.photoAlbumEntry a).prepOverlay({ subtype: image, urlmatch: /view$, urlreplace: /image_large }); });Popups
  52. 52. Popups (Overlays)Popups
  53. 53. Popups (Overlays)Popups
  54. 54. Popups (Overlays)Popups
  55. 55. Popups (Overlays) Subtypes: Images AJAX iframe Extensive Form Support!Popups
  56. 56. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! Tabs ‘nAccordions
  57. 57. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. Tabs ‘nAccordions
  58. 58. Tabs ’N Accordions Tabs and Accordions: Pretty much the same thing! jQuery Tools .tab() handles both. http://flowplayer.org/tools/ Tabs ‘nAccordions
  59. 59. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  60. 60. Tabs ’N Accordions $(‘container’).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  61. 61. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  62. 62. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  63. 63. Tabs ’N Accordions $(‘container).tabs( ‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’ }); Tabs ‘nAccordions
  64. 64. Tabs ’N Accordions Tabs ‘nAccordions
  65. 65. Tabs ’N Accordions Tabs ‘nAccordions
  66. 66. Tabs ’N Accordions Fixing a Typical Gotcha $(#portal-column-two dl.portlet) .each(function() { $(this) .children(dd) .wrapAll( <dd class="portletContent"><dl /></dd> ); }); Tabs ‘nAccordions
  67. 67. Tabs ’N Accordions Activating the Accordion $(#portal-column-two) .tabs( #portal-column-two dd.portletContent, { tabs: dl.portlet dt.portletHeader a, effect: slide } ); Tabs ‘nAccordions
  68. 68. Drag ’N DropDragNDrop
  69. 69. Drag ’N DropDragNDrop
  70. 70. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop
  71. 71. Drag ’N Drop jQuery UI • draggable • droppable • sortableDragNDrop collective.js.jqueryui
  72. 72. Creditsbling_guy: by-nc-sa/2.0 http://www.flickr.com/photos/prawnpie/bling_camera: by-nc-sa/2.0 http://www.flickr.com/photos/eleven/bling_calculator: by-nc-sa/2.0 http://www.flickr.com/photos/mundoo/bling_tshirt: by-nc-sa/2.0 http://www.flickr.com/photos/thewavingcat/bling_dog: by-nc-sa/2.0 http://www.flickr.com/photos/splat/bling_sunglasses: by-nc/2.0 http://www.flickr.com/photos/red-bubble/bling_beer: by-nc-sa/2.0 http://www.flickr.com/photos/johnandchristina/bling_dummy: by-nc-sa/2.0 http://www.flickr.com/photos/mark_w/bling_cycle: by/2.0 http://www.flickr.com/photos/ketaiblogger/bling_vespa: by-nc-sa/2.0 http://www.flickr.com/photos/lorena-david/bling_mouse: by-nc-sa/2.0 kelly onassisbling_desktop: by-nc-sa/2.0 http://www.flickr.com/photos/marblegravy/bling_cat: by-nc-sa/2.0 http://www.flickr.com/photos/nicora/bling_engine: by-nc-sa/2.0 http://www.flickr.com/photos/rpt/

×