Javascript in Plone

2,358 views
2,154 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
2,358
On SlideShare
0
From Embeds
0
Number of Embeds
127
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/

×