This document provides an overview of what JavaScript capabilities are available in Plone and how to use them. It discusses nuts and bolts topics like injecting JavaScript and CSS, as well as how to create common interactive elements like validation, popups, tabs, and drag and drop functionality using tools like jQuery. The document is intended as an introduction for Plone developers on getting started with JavaScript in Plone.

1. JavaScript in Plone:
What’s available; how to use it
Steve McMahon (SteveM)
steve@dcn.org
Plone Conference 2011

2. CM S!
g M y
JavaScript in Plone:
What’s available; how to use it
B li n Steve McMahon (SteveM)
steve@dcn.org
Plone Conference 2011

3. You Are:

4. You Are:
rs &
ra to
I nt eg rs
em e
Th

5. You Want:

6. You Want:
Widgets

7. You Want:
Validation Widgets

8. You Want:
Popups
Validation Widgets

9. You Want:
Popups
Validation Widgets
Tabs ‘n
Accordions

10. You Want:
Popups
Validation Widgets
Tabs ‘n
Accordions DragNDrop

11. But first …

12. But first …
Nuts & Bolts

13. JS & CSS Injection
Browser Resources
❦
Resource Registries

14. Two Ways
Add-On
Packaging

15. Two Ways
Add-On
Packaging
Themes

16. Two Ways
Add-On Browser
Packaging
Layers
Themes

17. Browser Layers
Browser
<?xml version="1.0"?>
<layers>
<layer
Layers
name="example.customization.layer"
interface="…browser.interfaces.IExampleCustomization" />
</layers>

18. zopeskel.browserlayer
[buildout]
parts =
zopeskel
[zopeskel]
recipe = zc.recipe.egg
eggs =
ZopeSkel
zopeskel.browserlayer
…

19. zopeskel.browserlayer
[buildout]
parts =
zopeskel
[zopeskel]
recipe = zc.recipe.egg
eggs =
ZopeSkel
zopeskel.browserlayer
…
../bin/zopeskel browserlayer

20. zopeskel.browserlayer
[buildout]
parts =
zopeskel
[zopeskel]
recipe = zc.recipe.egg
eggs =
ZopeSkel
zopeskel.browserlayer
…
../bin/zopeskel browserlayer

21. HTML5 Widgets
Widgets

22. HTML5 Widgets
(Without HTML5)
Widgets

23. HTML5 Widgets
(Without HTML5)
jQuery Tools
plone.app.jquerytools
Widgets

24. HTML5 Widgets
(Without HTML5)
jQuery Tools
plone.app.jquerytools
dateinput
Widgets

25. HTML5 Widgets
(Without HTML5)
jQuery Tools
plone.app.jquerytools
dateinput
validation
Widgets

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. Munging Old Stuff
Validation
Validation

28. Munging Old Stuff
Validation
jQuery(function ($) {
// doc read code here;
// using $ alias for jQuery
});
Validation

29. Munging Old Stuff
Validation
jQuery(function ($) {
$('form.fgBaseEditForm span.required')
.parents('div.field')
.children(':input')
.attr('required','required');
});
Validation

30. Munging Old Stuff
Validation
jQuery(function ($) {
$('form.fgBaseEditForm span.required')
.parents('div.field')
.children(':input')
.attr('required','required');
});
Validation

31. Munging Old Stuff
Validation
jQuery(function ($) {
$('form.fgBaseEditForm span.required')
.parents('div.field')
.children(':input')
.attr('required','required');
});
Validation

32. Munging Old Stuff
Validation
Validation

33. Munging Old Stuff
Validation
jQuery(function ($) {
$('form.fgBaseEditForm span.required')
.parents('div.field')
.children(':input')
.attr('required','required');
$('form.fgBaseEditForm')
.validator();
});
Validation

34. Munging Old Stuff
Validation
Validation

35. Popups (Overlays)
Popups

36. Popups (Overlays)
Popups

37. Popups (Overlays)
Popups

38. Popups (Overlays)
Popups

39. Popups (Overlays)
Popups

40. Popups (Overlays)
Popups

41. Popups (Overlays)
Popups

42. Popups (Overlays)
Popups

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. 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. 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. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

47. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

48. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

49. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

50. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

51. Popups (Overlays)
jQuery(function ($) {
$('.photoAlbumEntry a').prepOverlay({
subtype: 'image',
urlmatch: '/view$',
urlreplace: '/image_large'
});
});
Popups

52. Popups (Overlays)
Popups

53. Popups (Overlays)
Popups

54. Popups (Overlays)
Popups

55. Popups (Overlays)
Subtypes:
Images
AJAX
iframe
Extensive Form Support!
Popups

56. Tabs ’N Accordions
Tabs and Accordions:
Pretty much the same thing!
Tabs ‘n
Accordions

57. Tabs ’N Accordions
Tabs and Accordions:
Pretty much the same thing!
jQuery Tools .tab()
handles both.
Tabs ‘n
Accordions

58. Tabs ’N Accordions
Tabs and Accordions:
Pretty much the same thing!
jQuery Tools .tab()
handles both.
http://flowplayer.org/tools/
Tabs ‘n
Accordions

59. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions

60. Tabs ’N Accordions
$(‘container’).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions

61. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions

62. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions

63. Tabs ’N Accordions
$(‘container).tabs(
‘pane selector’, {
tabs : ‘tab selector’,
effect: ‘slide’
});
Tabs ‘n
Accordions

64. Tabs ’N Accordions
Tabs ‘n
Accordions

65. Tabs ’N Accordions
Tabs ‘n
Accordions

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 ‘n
Accordions

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 ‘n
Accordions

68. Drag ’N Drop
DragNDrop

69. Drag ’N Drop
DragNDrop

70. Drag ’N Drop
jQuery UI
• draggable
• droppable
• sortable
DragNDrop

71. Drag ’N Drop
jQuery UI
• draggable
• droppable
• sortable
DragNDrop
collective.js.jqueryui

72. Credits
bling_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 onassis
bling_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/