Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Plone Interactivity
Semelhante a Plone Interactivity (20)
Último
Último (20)
Plone Interactivity
- 1. Adding Interactivity to your Plone Site
- 2. Me
- 4. Me • Eric Steele • Programmer @ WebLion
- 5. Me • Eric Steele • Programmer @ WebLion • Plone Products
- 6. Me • Eric Steele • Programmer @ WebLion • Plone Products • Faculty/Staff Directory
- 7. Me • Eric Steele • Programmer @ WebLion • Plone Products • Faculty/Staff Directory • GloWorm
- 8. Me • Eric Steele • Programmer @ WebLion • Plone Products • Faculty/Staff Directory • GloWorm • Plone 4 release manager
- 9. Adding Interactivity to your Plone Site
- 10. or...
- 12. I Suck at JavaScript... and So Can You
- 13. I Suck at JavaScript... and So Can You ~
- 14. I Suck at JavaScript... and So Can You ~ A half-assed guide to interactive JavaScript
- 15. The Stuff
- 16. The Stuff • The Boring Stuff • Resources
- 17. The Stuff • The Boring Stuff • The Fun Stuff • Resources • KSS • jQuery
- 18. Resources
- 19. Resources • JavaScript • CSS • KSS
- 20. Including JavaScripts <tal:block metal:fill-slot="javascript_head_slot"> <script type="text/javascript" src="myscript.js" /> </tal:block>
- 21. Including JavaScripts <tal:block metal:fill-slot="javascript_head_slot"> <script type="text/javascript" src="myscript.js" /> </tal:block> • Only need script on one page/template
- 22. Including JavaScripts <tal:block metal:fill-slot="javascript_head_slot"> <script type="text/javascript" src="myscript.js" /> </tal:block> • Only need script on one page/template • Performance isn’t an issue
- 25. Resource Registries • Control inclusion, order
- 26. Resource Registries • Control inclusion, order • Automatic merging, compression
- 27. Resource Registries • Control inclusion, order • Automatic merging, compression • Improved cacheability
- 28. Generic Setup jsregistry.xml <?xml version="1.0"?> <object name="portal_javascripts"> <javascript cacheable="True" compression="safe" cookable="True" enabled="True" expression="" id="myscripts.js" inline="False" insert-after="dropdown.js"/> </object>
- 29. External Scripts
- 30. External Scripts <javascript ... id="http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js" ... />
- 31. External Scripts <javascript ... id="http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js" ... /> • New in Plone 3.3
- 32. External Scripts <javascript ... id="http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js" ... /> • New in Plone 3.3 • Include JavaScript from external sources
- 34. Google AJAX Libraries http://code.google.com/apis/ajaxlibs/
- 35. Google AJAX Libraries http://code.google.com/apis/ajaxlibs/ • jQuery • Dojo • jQuery UI • SWFObjectNew • Prototype • Yahoo! User Interface Library (YUI) • script.aculo.us • MooTools
- 37. Browser Resources • Component Architecture (Zope 3) way of defining resources
- 39. Browser Resources <browser:resource name="myscript.js" image="myscript.js" />
- 40. Browser Resources <browser:resource name="myscript.js" image="myscript.js" /> http://myplonesite/++resource++myscript.js
- 41. Browser Resources <?xml version="1.0"?> jsregistry.xml <object name="portal_javascripts"> <javascript cacheable="True" compression="safe" cookable="True" enabled="True" expression="" id="++resource++myscript.js" inline="False" insert-after="dropdown.js"/> </object>
- 43. Browser Resources <browser:resource name="myscript.js" image="myscript.js" for="..interfaces.IMyCustomType” />
- 44. Browser Resources <browser:resource name="myscript.js" image="myscript.js" for="..interfaces.IMyCustomType” /> <browser:resource name="myscript.js" image="myscript.js" layer="..interfaces.IMySkinLayer” />
- 46. Browser Resources <browser:resourceDirectory name="myResources" directory="stuff" />
- 47. Browser Resources <browser:resourceDirectory name="myResources" directory="stuff" /> http://myplonesite/++resource++myResources/ checkout.png
- 49. A JavaScript library is a library of pre-written JavaScript controls which allow for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. http://en.wikipedia.org/wiki/JavaScript_library
- 50. Why?
- 51. Why? • Save time
- 52. Why? • Save time • Reuse existing code
- 53. Why? • Save time • Reuse existing code • You don’t need to be an expert
- 54. Why? • Save time • Reuse existing code • You don’t need to be an expert • Browser “quirks”
- 55. Two Types • Easy • “Right”
- 56. KSS
- 57. KSS • “Kinetic Style Sheets” • JavaScript/AJAX framework • Declare behaviors using CSS format • Built into Plone 3.0+ • Also works with Grok, Pylons, Django
- 58. KSS Rules #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
- 59. KSS Rules CSS Selector #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
- 60. KSS Rules Action Type #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
- 61. KSS Rules Action #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
- 62. KSS Rules Action Parameter #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; } name value
- 64. KSS Rules #mykssbutton:click { evt-click-preventdefault: True; action-client: alert; alert-message: ‘Hello World!’; } <a href=”front-page” id=”mykssbutton”>Click me! </a>
- 65. `
- 66. Client Actions
- 68. Client Actions • alert • addClass / removeClass / toggleClass
- 69. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute
- 70. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle
- 71. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle • replaceInnerHTML
- 72. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle • replaceInnerHTML • log
- 75. Parameter Providers • nodeAttr • nodeContent
- 76. Parameter Providers • nodeAttr • nodeContent • currentFormVar
- 77. Parameter Providers • nodeAttr • nodeContent • currentFormVar • formVar
- 79. Tying Them Together <form id="myForm"> <input name="color" /> <input type="submit" class="submit" /> </form> <div tal:define="color request/form/color|string:nothing;"> You chose <span id="selectedColor" tal:content="color"> </span>. </div>
- 80. Tying Them Together <form id="myForm"> <input name="color" /> <input type="submit" class="submit" /> </form> <div tal:define="color request/form/color|string:nothing;"> You chose <span id="selectedColor" tal:content="color"> </span>. </div> #myForm .submit:click { evt-click-preventdefault: True; action-client: replaceInnerHTML; replaceInnerHTML-kssSelector: '#selectedColor'; replaceInnerHTML-html: currentFormVar(color); }
- 81. Tying Them Together <form id="myForm"> <input name="color" /> <input type="submit" class="submit" /> </form> <div tal:define="color request/form/color|string:nothing;"> You chose <span id="selectedColor" tal:content="color"> </span>. </div> #myForm .submit:click { evt-click-preventdefault: True; action-client: replaceInnerHTML; replaceInnerHTML-kssSelector: '#selectedColor'; replaceInnerHTML-html: currentFormVar(color); }
- 82. Fallback
- 83. Server Actions
- 84. Server Actions #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); }
- 85. Server Actions #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); } transformColor.py from kss.core.ttwapi import (startKSSCommands, getKSSCommandSet, renderKSSCommands) startKSSCommands(context, context.REQUEST) uColor = color.upper() core = getKSSCommandSet('core') core.replaceInnerHTML('#selectedColor', uColor) return renderKSSCommands()
- 86. Server Actions #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); } transformColor.py from kss.core.ttwapi import (startKSSCommands, getKSSCommandSet, renderKSSCommands) startKSSCommands(context, context.REQUEST) uColor = color.upper() core = getKSSCommandSet('core') core.replaceInnerHTML('#selectedColor', uColor) return renderKSSCommands()
- 87. Command Sets • Core • Zope • getCssSelector • refreshProvider • addClass • refreshViewlet • removeClass • Plone • issuePortalMessage • refreshPortlet
- 88. Registering KSS • portal_kss registry
- 89. kssregistry.xml <?xml version="1.0"?> <object name="portal_kss" meta_type="KSS Registry"> <kineticstylesheet cacheable="True" compression="safe" cookable="True" enabled="1" expression="" id="mykssrules.kss"/> </object>
- 90. Debugging KSS
- 92. Debugging KSS • Firebug • Firebug
- 93. Debugging KSS • Firebug • Firebug • Firebug
- 94. Debugging KSS • Firebug • Firebug • Firebug • Or Firebug Lite (getfirebug.com/lite.html)
- 95. Debugging KSS • KSS fails silently • Turn on debugging in portal_javascript • Messages will appear in Firebug console
- 96. Debugging KSS
- 97. Debugging KSS • Firekiss http://kssproject.org/download/firekiss.xpi/
- 98. KSS Plugins • kss.plugin.cacheabilty • kss.plugin.jsmath • kss.plugin.cns • kss.plugin.timer • kss.plugin.fadeeffect • kss.plugin.yuidnd • kss.plugin.history
- 99. Documentation • http://kssproject.org/ • http://plone.org/events/regional/plone- symposium-2008/skinning-with-plone-3
- 100. KSS Recap • Simple, CSS-style syntax • JavaScript, without the JavaScript
- 101. But here’s the thing...
- 102. It’s not really the best solution
- 103. Huh?
- 104. WTF?
- 106. • It’s huge
- 107. • It’s huge • Lack of adoption
- 108. • It’s huge • Lack of adoption • Sparse documentation
- 109. • It’s huge • Lack of adoption • Sparse documentation • Will be dropped as a core component (at some point)
- 110. jQuery
- 111. jQuery
- 112. jQuery • DOM-focused
- 113. jQuery • DOM-focused • Simple syntax
- 114. jQuery • DOM-focused • Simple syntax • Extensible
- 115. jQuery • DOM-focused • Simple syntax • Extensible • 19K
- 116. jQuery • DOM-focused • Simple syntax • Extensible • 19K • Well-documented
- 117. Factory
- 118. Factory • jQuery() • $() • jq()
- 119. Selectors
- 120. Selectors • CSS
- 121. Selectors • CSS • Tag name: jq(‘p’)
- 122. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’)
- 123. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’) • Class: jq(‘.someClass’)
- 124. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’) • Class: jq(‘.someClass’) • XPath: jq(‘a[title]’)
- 125. Pseudo-Selectors
- 126. Pseudo-Selectors • :first and :last
- 127. Pseudo-Selectors • :first and :last • :not jq(‘#portal-column-content p:not(.discreet)’)
- 128. Pseudo-Selectors • :first and :last • :not jq(‘#portal-column-content p:not(.discreet)’) • :first-child, :nth-child, and :last-child jq(‘ul li:nth-child(2)’)
- 129. Pseudo-Selectors • :first and :last • :not jq(‘#portal-column-content p:not(.discreet)’) • :first-child, :nth-child, and :last-child jq(‘ul li:nth-child(2)’) • :even and :odd jq(‘#myTable tr:odd’)
- 130. Sets
- 132. Sets • “Implicit iteration” • jq(‘#myDiv’).hide()
- 133. Sets • “Implicit iteration” • jq(‘#myDiv’).hide() • jq(‘.someDivs’).hide()
- 134. Chaining
- 135. Chaining • Operations always return a result
- 136. Chaining • Operations always return a result • So instead of... obj.doSomething() obj.doSomethingElse(‘blah’)
- 137. Chaining • Operations always return a result • So instead of... obj.doSomething() obj.doSomethingElse(‘blah’) • We can write... jq(‘#myElement’).parent().addClass(‘blah’)
- 138. Chaining
- 139. Chaining • One one line... jq(‘#faq’).find(‘dd’).hide().end().find(‘dt’).click(function(){...});
- 140. Chaining • One one line... jq(‘#faq’).find(‘dd’).hide().end().find(‘dt’).click(function(){...}); • Or several... jq('#faq') // Find the element with id ‘faq’ .find('dd') // Get all dd elements within .hide() // Hide those elements .end() // Jump back to the ‘faq’ element .find('dt') // Find all dt elements within .click(function() {...}); // And assign an click event.
- 141. Events
- 142. Events function foo(){ alert(‘foo’); } window.onload = foo;
- 143. Events function foo(){ alert(‘foo’); } window.onload = foo; function bar(){ alert(‘bar’); } window.onload = bar;
- 144. Events function foo(){ alert(‘foo’); } window.onload = foo; function bar(){ alert(‘bar’); } window.onload = bar;
- 145. Events
- 146. Events jq(document).ready(function) { alert(‘bar’); });
- 147. Events jq(document).ready(function) { alert(‘foo’); }); jq(document).ready(function) { alert(‘bar’); });
- 148. Events jq(document).ready(function) { alert(‘foo’); jq(document).ready(function) { }); alert(‘baz’); jq(document).ready(function) { }); alert(‘bar’); });
- 149. Events jq(document).ready(function) { alert(‘foo’); jq(document).ready(function) { }); alert(‘baz’); jq(document).ready(function) { }); alert(‘bar’); jq(document).ready(function) { }); alert(‘blort’); });
- 150. Events jq(document).ready(function) { alert(‘foo’); jq(document).ready(function) { }); alert(‘baz’); jq(document).ready(function) { jq(document).ready(function) { }); alert(‘bar’); alert(‘smoo’); jq(document).ready(function) { }); }); alert(‘blort’); });
- 151. Events jq(document).ready(function) { alert(‘foo’); jq(document).ready(function) { }); alert(‘baz’); jq(document).ready(function) { jq(document).ready(function) { }); alert(‘bar’); alert(‘smoo’); jq(document).ready(function) { jq(document).ready(function) { }); }); alert(‘floob’); alert(‘blort’); }); });
- 152. Events #mykssbutton:click { evt-click-preventdefault: True; action-client: alert; alert-message: ‘Hello World!’; } <a href=”front-page” id=”mykssbutton”>Click me! </a>
- 153. Events jq(document).ready(function) { jq(‘#mykssbutton’).click(function(){ alert(‘Hello World!); }); }); <a href=”front-page” id=”mykssbutton”>Click me! </a>
- 154. Another Example jq(document).ready(function() { jq(‘a[@href$=”.pdf”]’).addclass(‘pdflink’); }); a.pdflink { background:url(‘pdficon.gif’) no-repeat; padding-left:25px; }
- 155. AJAX Calls
- 156. AJAX Calls #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); }
- 157. AJAX Calls #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); } from kss.core.ttwapi import (startKSSCommands, getKSSCommandSet, renderKSSCommands) startKSSCommands(context, context.REQUEST) uColor = color.upper() core = getKSSCommandSet('core') core.replaceInnerHTML('#selectedColor', uColor) return renderKSSCommands()
- 158. AJAX Calls jq_transformColor return color.upper() jq(document).ready(function(){ jq('#myForm').submit(function(){ var color = jq('input[name=color]').val(); jq('#selectedColor').load('jq_transformColor?color=' + color); return false; }); });
- 159. jQuery in Plone • Built into Plone 3.1+ • ‘jq’ instead of ‘$’ • Now use ‘jq’ method instead of ‘cssQuery’ or ‘registerPloneFunction’
- 160. Integrating jQuery Plugins http://plugins.jquery.com/
- 161. Integrating jQuery Plugins
- 162. Integrating jQuery Plugins • If the plugin uses ‘$’:
- 163. Integrating jQuery Plugins • If the plugin uses ‘$’: • Place it between jquery.js and jquery- integration.js <javascript ... insert-before="jquery-integration.js"/>
- 164. Integrating jQuery Plugins • If the plugin uses ‘$’: • Place it between jquery.js and jquery- integration.js <javascript ... insert-before="jquery-integration.js"/> • or wrap it { (function($) [your code here] })(jQuery);
- 165. Existing Behaviors
- 166. Collapsible Sections <dl class=”collapsible”> <dt class=”collapsibleHeader”> A Title </dt> <dd class=”collapsibleContent”> Your hidable content. </dd> </dl>
- 167. Collapsible Sections <dl class=”collapsible”> <dt class=”collapsibleHeader”> A Title </dt> <dd class=”collapsibleContent”> Your hidable content. </dd> </dl>
- 168. Dropdowns <dl class=”actionMenu” id=”aUniqueId”> <dt class=”actionMenuHeader”> <a href=”some_destination”>A Title</ a> </dt> <dd class=”actionMenuContent”> Your content </dd> </dl>
- 169. Dropdowns <dl class=”actionMenu” id=”aUniqueId”> <dt class=”actionMenuHeader”> <a href=”some_destination”>A Title</ a> </dt> <dd class=”actionMenuContent”> Your content </dd> </dl>
- 170. Sortable Tables <table class=”listing” id=”someId”> <thead> <tr> <th>Table header</th> </tr> </thead> <tbody> <tr> <td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </tbody> </table>
- 171. Sortable Tables <table class=”listing” id=”someId”> <thead> <tr> <th>Table header</th> </tr> </thead> <tbody> <tr> <td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </tbody> </table>
- 172. Sortable Tables <th class=”nosort”> Unsortable Column </th>
- 173. Sortable Tables <th class=”nosort”> Unsortable Column </th>
- 175. collective.flowplayer Turns code like: <a class="autoFlowPlayer" href="path/to/video-file.flv"> <img src="path/to/splashscreen.jpg" /> </a> into:
- 176. Deco
- 177. Deco
- 178. Others • Carousel • Plone Slimbox • FancyZoomView • FadingNavigation • plone.app.jqtools
- 179. plone.app.jqtools
- 180. plone.app.jqtools • Included in Plone 4
- 181. plone.app.jqtools • Included in Plone 4 • Yay SteveM!
- 182. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 183. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 184. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 185. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 186. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 187. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 188. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 189. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 190. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 191. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 192. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 193. plone.app.jquerytools • Tabs • Tooltips • Overlay • Exposé • Scrollable • Flashembed
- 196. Other Libraries • Yahoo User Interface (YUI) • extjs • MochiKit • MooTools • Dojo
- 197. Conclusions
- 199. • JavaScript novice? – Use KSS
- 200. • JavaScript novice? – Use KSS • Otherwise, use JQuery
- 201. Special thanks to... • David Glick http://wglick.org/jstalk.html • Joel Burton http://bit.ly/z1nLH
- 202. Questions?
Notas do Editor
- So what kind of stuff are we going to talk about? We&#x2019;ll get the boring stuff out of the way first and then we&#x2019;ll move on to more interesting things like KSS and jQuery. There&#x2019;s a lot to cover, we&#x2019;ll hold questions until the end. And any of these slides that I don&#x2019;t get to, I&#x2019;ll just cut out of Plone 4.
- So what kind of stuff are we going to talk about? We&#x2019;ll get the boring stuff out of the way first and then we&#x2019;ll move on to more interesting things like KSS and jQuery. There&#x2019;s a lot to cover, we&#x2019;ll hold questions until the end. And any of these slides that I don&#x2019;t get to, I&#x2019;ll just cut out of Plone 4.
- Plone considers
- You might use a block of code like this to include a script in your Plone template if you only need it on one page or one template or performance isn&#x2019;t really something you&#x2019;re concerned about.
- You might use a block of code like this to include a script in your Plone template if you only need it on one page or one template or performance isn&#x2019;t really something you&#x2019;re concerned about.
- Plone, however, provides Resource Registries for keeping track of things like CSS, JavaScript, and KSS.
- So what makes resource registries useful? Control which scripts are included on a page and in what order they&#x2019;ll render. It gives you automatic merging and compression of your scripts. And makes JavaScript more cacheable.
- So what makes resource registries useful? Control which scripts are included on a page and in what order they&#x2019;ll render. It gives you automatic merging and compression of your scripts. And makes JavaScript more cacheable.
- So what makes resource registries useful? Control which scripts are included on a page and in what order they&#x2019;ll render. It gives you automatic merging and compression of your scripts. And makes JavaScript more cacheable.
- And its easy for third-party products to add scripts to portal_javascript using Generic Setup. We can control all of the settings from here and even specify where it should wind up in the ordering.
- And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- And that&#x2019;s handy because of sites like Google&#x2019;s AJAX libraries API. Google hosts the libraries, you pull them into your site as needed. They&#x2019;ve got a number of the more-popular JavaScript libraries.
- And that&#x2019;s handy because of sites like Google&#x2019;s AJAX libraries API. Google hosts the libraries, you pull them into your site as needed. They&#x2019;ve got a number of the more-popular JavaScript libraries.
- These can be registered with the resource registries in the same manner as before. This time we&#x2019;ll use that ++resource++ path to point to the file we&#x2019;re after.
- We can also register these to be available only for specific content types or browser layers so that they&#x2019;ll only appear in certain portions of a site.
- We can also register these to be available only for specific content types or browser layers so that they&#x2019;ll only appear in certain portions of a site.
- There&#x2019;s also a resourceDirectory ZCML directive that will allow you to register an entire folder of files, rather than registering each one individually. The url would look like this.
- There&#x2019;s also a resourceDirectory ZCML directive that will allow you to register an entire folder of files, rather than registering each one individually. The url would look like this.
- So, what are Javascript libraries?
- So why might we use one? It&#x2019;s faster. You&#x2019;ve got better things to do with your time. Chances are someone&#x2019;s already done what you want to do, and done it better. It removes the need to know everything there is to know about writing JavaScript. And you can largely ignore browser compatibility issues.
- So why might we use one? It&#x2019;s faster. You&#x2019;ve got better things to do with your time. Chances are someone&#x2019;s already done what you want to do, and done it better. It removes the need to know everything there is to know about writing JavaScript. And you can largely ignore browser compatibility issues.
- So why might we use one? It&#x2019;s faster. You&#x2019;ve got better things to do with your time. Chances are someone&#x2019;s already done what you want to do, and done it better. It removes the need to know everything there is to know about writing JavaScript. And you can largely ignore browser compatibility issues.
- So why might we use one? It&#x2019;s faster. You&#x2019;ve got better things to do with your time. Chances are someone&#x2019;s already done what you want to do, and done it better. It removes the need to know everything there is to know about writing JavaScript. And you can largely ignore browser compatibility issues.
- So let&#x2019;s start with Plone&#x2019;s built-in library, KSS.
- This is what a typical KSS rule might look like. Note that it looks very much like something we&#x2019;d see in a stylesheet.
- One of the things you&#x2019;ll use most when writing KSS rules will be this bit. Essentially, we&#x2019;re telling KSS that we want to ignore the default click event of whatever element the rule applies to.
- This means that if our rule applies to this link, we&#x2019;ll ignore the default action &#x2013;&#xA0;actually going to the front-page &#x2013;&#xA0;and instead apply our own actions, which in this case would be popping up a &#x201C;Hello World!&#x201D; alert message.
- And that&#x2019;d look something like this.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- So in that example, we used the &#x201C;alert&#x201D; client action. There are others we can use too.
- Parameter providers let us pull data out of the current page so that we can use it in an action. NodeAttr lets you pull out the value of an HTML attribute of the selected element. NodeContent will return the text content of the selected element. currentFormVar and formVar pull values out of form fields.
- Parameter providers let us pull data out of the current page so that we can use it in an action. NodeAttr lets you pull out the value of an HTML attribute of the selected element. NodeContent will return the text content of the selected element. currentFormVar and formVar pull values out of form fields.
- Parameter providers let us pull data out of the current page so that we can use it in an action. NodeAttr lets you pull out the value of an HTML attribute of the selected element. NodeContent will return the text content of the selected element. currentFormVar and formVar pull values out of form fields.
- Parameter providers let us pull data out of the current page so that we can use it in an action. NodeAttr lets you pull out the value of an HTML attribute of the selected element. NodeContent will return the text content of the selected element. currentFormVar and formVar pull values out of form fields.
- So let&#x2019;s tie all of these concepts together. I&#x2019;ve created a simple html page with a form that accepts a color name and has a submit button. There&#x2019;s also a div that will tell the user what they&#x2019;ve just typed in. Complex stuff, I know. The KSS is rule says that when the user clicks on the submit button in our form, it&#x2019;ll ignore the default action (which would be to submit the form) and instead replace the content of the page element with the id #selectedColor with the value of the color field. Let&#x2019;s see this in action.
- So let&#x2019;s tie all of these concepts together. I&#x2019;ve created a simple html page with a form that accepts a color name and has a submit button. There&#x2019;s also a div that will tell the user what they&#x2019;ve just typed in. Complex stuff, I know. The KSS is rule says that when the user clicks on the submit button in our form, it&#x2019;ll ignore the default action (which would be to submit the form) and instead replace the content of the page element with the id #selectedColor with the value of the color field. Let&#x2019;s see this in action.
- So let&#x2019;s tie all of these concepts together. I&#x2019;ve created a simple html page with a form that accepts a color name and has a submit button. There&#x2019;s also a div that will tell the user what they&#x2019;ve just typed in. Complex stuff, I know. The KSS is rule says that when the user clicks on the submit button in our form, it&#x2019;ll ignore the default action (which would be to submit the form) and instead replace the content of the page element with the id #selectedColor with the value of the color field. Let&#x2019;s see this in action.
- So what happens if JavaScript is disabled for whatever reason? KSS makes sure that if that&#x2019;s the case, then the click event override we&#x2019;ve created doesn&#x2019;t get registered and the page will fall back to its default functionality. So disabling javascript on this page, reloading and trying again, we get the same result. KSS makes this very easy, with only a minimal amount of planning on my part.
- Alright, now let&#x2019;s get into some actual AJAX. Doing things on the client side is fine, but what if we want to do something a bit more involved with the data. So in this example, I&#x2019;m going to switch to using action-server. We&#x2019;ll call a python script I&#x2019;ve created. This could also be a browser view if we were creating this as a filesystem product. The script is expecting a parameter named &#x201C;color&#x201D;, so we&#x2019;ll need to pass that along as well. Looking at the script itself, there&#x2019;s a lot of boilerplate that you don&#x2019;t really need to be concerned about. Just trust that it&#x2019;s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we&#x2019;ll do a simple bit of Python and change the color name the script has received into uppercase. Next we&#x2019;ll grab the core kss commandset. Core essentially holds all of those action-client methods we could call directly from KSS, and provides them to Python. So in this case, we&#x2019;re going to replace the inner HTML of the element with the selectedColor id with the capitalized color name. Looking at this in action, we see that providing &#x2018;blue&#x2019; displays it in the page in uppercase, all without reloading the page.
- Alright, now let&#x2019;s get into some actual AJAX. Doing things on the client side is fine, but what if we want to do something a bit more involved with the data. So in this example, I&#x2019;m going to switch to using action-server. We&#x2019;ll call a python script I&#x2019;ve created. This could also be a browser view if we were creating this as a filesystem product. The script is expecting a parameter named &#x201C;color&#x201D;, so we&#x2019;ll need to pass that along as well. Looking at the script itself, there&#x2019;s a lot of boilerplate that you don&#x2019;t really need to be concerned about. Just trust that it&#x2019;s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we&#x2019;ll do a simple bit of Python and change the color name the script has received into uppercase. Next we&#x2019;ll grab the core kss commandset. Core essentially holds all of those action-client methods we could call directly from KSS, and provides them to Python. So in this case, we&#x2019;re going to replace the inner HTML of the element with the selectedColor id with the capitalized color name. Looking at this in action, we see that providing &#x2018;blue&#x2019; displays it in the page in uppercase, all without reloading the page.
- Alright, now let&#x2019;s get into some actual AJAX. Doing things on the client side is fine, but what if we want to do something a bit more involved with the data. So in this example, I&#x2019;m going to switch to using action-server. We&#x2019;ll call a python script I&#x2019;ve created. This could also be a browser view if we were creating this as a filesystem product. The script is expecting a parameter named &#x201C;color&#x201D;, so we&#x2019;ll need to pass that along as well. Looking at the script itself, there&#x2019;s a lot of boilerplate that you don&#x2019;t really need to be concerned about. Just trust that it&#x2019;s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we&#x2019;ll do a simple bit of Python and change the color name the script has received into uppercase. Next we&#x2019;ll grab the core kss commandset. Core essentially holds all of those action-client methods we could call directly from KSS, and provides them to Python. So in this case, we&#x2019;re going to replace the inner HTML of the element with the selectedColor id with the capitalized color name. Looking at this in action, we see that providing &#x2018;blue&#x2019; displays it in the page in uppercase, all without reloading the page.
- We saw that &#x201C;getCommandSet&#x201D; line... there are 3 different command sets that come with KSS out of the box. I mentioned &#x2018;core&#x2019;, that essentially provides all of the action-client calls available in our KSS rules. The second is the Zope command set, which allows us to redraw providers -- things like viewlet managers and portlet managers -- or to redraw individual viewlets. Third is the Plone command set, which lets us do things like display portal messages or refresh portlets. All of these let us interact with the browser window from Python. So KSS has allowed JavaScript to talk to Python and Python to talk to JavaScript.
- So how do we register a kss file? We&#x2019;re going to use one of the resource registries we talked about earlier -- portal_kss.
- Typically, that&#x2019;s done from GenericSetup, using an kssregistry.xml file. This looks almost exactly like the JavaScript registration we looked at earlier.
- So how do you go about debugging KSS? Firebug. Firebug. Firebug. Or, if you&#x2019;re debugging in something that&#x2019;s not Firefox, try Firebug Lite.
- So how do you go about debugging KSS? Firebug. Firebug. Firebug. Or, if you&#x2019;re debugging in something that&#x2019;s not Firefox, try Firebug Lite.
- So how do you go about debugging KSS? Firebug. Firebug. Firebug. Or, if you&#x2019;re debugging in something that&#x2019;s not Firefox, try Firebug Lite.
- So how do you go about debugging KSS? Firebug. Firebug. Firebug. Or, if you&#x2019;re debugging in something that&#x2019;s not Firefox, try Firebug Lite.
- A side-effect of KSS&#x2019;s no-javascript failover is that if there&#x2019;s an error, your page&#x2019;s KSS will fail to load. Which means that it will typically fail silently. So, essentially, all of the KSS functionality on that page will fail to work if there is a syntax error. I spent a day chasing down what turned out to be a missing semicolon in my ruleset. But, if you turn on javascript debugging in portal_javascript, KSS debugging information will appear in Firebug&#x2019;s console window. And there&#x2019;s a lot of it.
- And this is what that debugging output will look like. Firebug will show all of the rules being processed, any XMLRPC calls being passed around, and detailed error messages that may crop up.
- There&#x2019;s also &#x201C;Firekiss&#x201D;, a Firebug extension from the KSS folks. It&#x2019;ll show your KSS rules and allow you to change debug mode and log level from within Firebug.
- There are a number of KSS addons available. kss.plugin.cacheability which enables KSS requests to be cached. kss.plugin.cns provides a number of new client actions. kss.plugin.fadeeffect adds image fading and substitution. kss.plugin.history allows you to modify the browser location in an effort to add backward and forward navigation to a javascript application. kss.plugin.jsmath uses the jsmath library to display complex mathematical functions. kss.plugin.timer displays a timer. kss.plugin.yuidnd integrates the Yahoo User Interface drag-and-drop library.
- Quick recap: What is KSS? It uses a simple, css-style syntax. Basically, it&#x2019;s Javascript, without the JavaScript, which for someone like me who hates writing Javascript, is really awesome.
- It&#x2019;s not really the best solution.
- So now you&#x2019;re thinking
- Why?
- So here&#x2019;s why... It&#x2019;s huge. The relevant scripts check in at over 100 k. It&#x2019;s been slow to catch on, both within and outside of the Plone project. And the documentation is somewhat lacking. I really like KSS and relied on it heavily to build GloWorm. I think I made it about 90% of the way through to the final release before I actually had to write a line of JavaScript code myself, KSS handled the large majority of what I wanted to do. KSS was revolutionary when it was introduced, but since then there have been some fantastic developments in other areas. Because of that and the fact that the current direction that Plone core development is taking is to make Plone itself ship as a much leaner product, KSS will probably be dropped as a core component in the near future. Most likely in Plone 5.
- So here&#x2019;s why... It&#x2019;s huge. The relevant scripts check in at over 100 k. It&#x2019;s been slow to catch on, both within and outside of the Plone project. And the documentation is somewhat lacking. I really like KSS and relied on it heavily to build GloWorm. I think I made it about 90% of the way through to the final release before I actually had to write a line of JavaScript code myself, KSS handled the large majority of what I wanted to do. KSS was revolutionary when it was introduced, but since then there have been some fantastic developments in other areas. Because of that and the fact that the current direction that Plone core development is taking is to make Plone itself ship as a much leaner product, KSS will probably be dropped as a core component in the near future. Most likely in Plone 5.
- So here&#x2019;s why... It&#x2019;s huge. The relevant scripts check in at over 100 k. It&#x2019;s been slow to catch on, both within and outside of the Plone project. And the documentation is somewhat lacking. I really like KSS and relied on it heavily to build GloWorm. I think I made it about 90% of the way through to the final release before I actually had to write a line of JavaScript code myself, KSS handled the large majority of what I wanted to do. KSS was revolutionary when it was introduced, but since then there have been some fantastic developments in other areas. Because of that and the fact that the current direction that Plone core development is taking is to make Plone itself ship as a much leaner product, KSS will probably be dropped as a core component in the near future. Most likely in Plone 5.
- So here&#x2019;s why... It&#x2019;s huge. The relevant scripts check in at over 100 k. It&#x2019;s been slow to catch on, both within and outside of the Plone project. And the documentation is somewhat lacking. I really like KSS and relied on it heavily to build GloWorm. I think I made it about 90% of the way through to the final release before I actually had to write a line of JavaScript code myself, KSS handled the large majority of what I wanted to do. KSS was revolutionary when it was introduced, but since then there have been some fantastic developments in other areas. Because of that and the fact that the current direction that Plone core development is taking is to make Plone itself ship as a much leaner product, KSS will probably be dropped as a core component in the near future. Most likely in Plone 5.
- So that brings us to jQuery, the JavaScript library with which we&#x2019;re slowly replacing KSS functionality in Plone core.
- So why use jQuery It&#x2019;s a DOM-focused library, and by that, I mean that it&#x2019;s less of a &#x201C;make JavaScript a real language&#x201D; library, and more of a &#x201C;get stuff done&#x201D; library. It&#x2019;s got a very simple syntax. It&#x2019;s easy to add on to the core functionality and there are lots of plugins available that do so. It&#x2019;s quite small. And there&#x2019;s a large amount of good documentation.
- So why use jQuery It&#x2019;s a DOM-focused library, and by that, I mean that it&#x2019;s less of a &#x201C;make JavaScript a real language&#x201D; library, and more of a &#x201C;get stuff done&#x201D; library. It&#x2019;s got a very simple syntax. It&#x2019;s easy to add on to the core functionality and there are lots of plugins available that do so. It&#x2019;s quite small. And there&#x2019;s a large amount of good documentation.
- So why use jQuery It&#x2019;s a DOM-focused library, and by that, I mean that it&#x2019;s less of a &#x201C;make JavaScript a real language&#x201D; library, and more of a &#x201C;get stuff done&#x201D; library. It&#x2019;s got a very simple syntax. It&#x2019;s easy to add on to the core functionality and there are lots of plugins available that do so. It&#x2019;s quite small. And there&#x2019;s a large amount of good documentation.
- So why use jQuery It&#x2019;s a DOM-focused library, and by that, I mean that it&#x2019;s less of a &#x201C;make JavaScript a real language&#x201D; library, and more of a &#x201C;get stuff done&#x201D; library. It&#x2019;s got a very simple syntax. It&#x2019;s easy to add on to the core functionality and there are lots of plugins available that do so. It&#x2019;s quite small. And there&#x2019;s a large amount of good documentation.
- So why use jQuery It&#x2019;s a DOM-focused library, and by that, I mean that it&#x2019;s less of a &#x201C;make JavaScript a real language&#x201D; library, and more of a &#x201C;get stuff done&#x201D; library. It&#x2019;s got a very simple syntax. It&#x2019;s easy to add on to the core functionality and there are lots of plugins available that do so. It&#x2019;s quite small. And there&#x2019;s a large amount of good documentation.
- The basis of all jQuery calls is known as the jQuery factory function. Typically shortened as a dollar sign. In Plone, it&#x2019;s aliased as &#x201C;jq&#x201D;. We&#x2019;ll get into that a bit more later, but for now all of my examples will use the &#x201C;jq&#x201D; alias since that&#x2019;s what you can expect to use when writing scripts for Plone.
- We can pass all sorts of selectors to the factory function. Most of the time, we&#x2019;ll use a CSS selector, like a tag, id, or class. But can also use XPath statements to select particular elements of the HTML document we&#x2019;re interacting with.
- We can pass all sorts of selectors to the factory function. Most of the time, we&#x2019;ll use a CSS selector, like a tag, id, or class. But can also use XPath statements to select particular elements of the HTML document we&#x2019;re interacting with.
- We can pass all sorts of selectors to the factory function. Most of the time, we&#x2019;ll use a CSS selector, like a tag, id, or class. But can also use XPath statements to select particular elements of the HTML document we&#x2019;re interacting with.
- We can pass all sorts of selectors to the factory function. Most of the time, we&#x2019;ll use a CSS selector, like a tag, id, or class. But can also use XPath statements to select particular elements of the HTML document we&#x2019;re interacting with.
- We can pass all sorts of selectors to the factory function. Most of the time, we&#x2019;ll use a CSS selector, like a tag, id, or class. But can also use XPath statements to select particular elements of the HTML document we&#x2019;re interacting with.
- jQuery is fully CSS3 compliant, so we get all sorts of new CSS pseudo-selectors. We can select the first or last instance of a selector. We can get content that does not meet certain criteria. We can get the first, last, or nnth element of a group. And also defines some of its own (:even/:odd).
- jQuery is fully CSS3 compliant, so we get all sorts of new CSS pseudo-selectors. We can select the first or last instance of a selector. We can get content that does not meet certain criteria. We can get the first, last, or nnth element of a group. And also defines some of its own (:even/:odd).
- jQuery is fully CSS3 compliant, so we get all sorts of new CSS pseudo-selectors. We can select the first or last instance of a selector. We can get content that does not meet certain criteria. We can get the first, last, or nnth element of a group. And also defines some of its own (:even/:odd).
- jQuery is fully CSS3 compliant, so we get all sorts of new CSS pseudo-selectors. We can select the first or last instance of a selector. We can get content that does not meet certain criteria. We can get the first, last, or nnth element of a group. And also defines some of its own (:even/:odd).
- Whether our selector finds one, many, or no page elements, jQuery&#x2019;s &#x201C;Implicit Iteration&#x201D; means that methods assume that the selector&#x2019;s result is a set of elements and will run accordingly. That lets us call methods without worrying about the number of results.
- Whether our selector finds one, many, or no page elements, jQuery&#x2019;s &#x201C;Implicit Iteration&#x201D; means that methods assume that the selector&#x2019;s result is a set of elements and will run accordingly. That lets us call methods without worrying about the number of results.
- Whether our selector finds one, many, or no page elements, jQuery&#x2019;s &#x201C;Implicit Iteration&#x201D; means that methods assume that the selector&#x2019;s result is a set of elements and will run accordingly. That lets us call methods without worrying about the number of results.
- Operations on an element will always return a result. That result could be the same element, another element, or a set of elements. So instead of calling methods on an object over and over. We can chain commands, performing operations on the previous command&#x2019;s result.
- Operations on an element will always return a result. That result could be the same element, another element, or a set of elements. So instead of calling methods on an object over and over. We can chain commands, performing operations on the previous command&#x2019;s result.
- Operations on an element will always return a result. That result could be the same element, another element, or a set of elements. So instead of calling methods on an object over and over. We can chain commands, performing operations on the previous command&#x2019;s result.
- We can chain as much as we like, doing it all on one line, or several. Splitting it across several lines allows us to provide much more in the way of comments.
- We can chain as much as we like, doing it all on one line, or several. Splitting it across several lines allows us to provide much more in the way of comments.
- Typically, in JavaScript land, we might define a function that would run once the page has finished loading. The problem is that if we do it this way, each new function we add would overwrite the others and prevent them from running.
- Typically, in JavaScript land, we might define a function that would run once the page has finished loading. The problem is that if we do it this way, each new function we add would overwrite the others and prevent them from running.
- Typically, in JavaScript land, we might define a function that would run once the page has finished loading. The problem is that if we do it this way, each new function we add would overwrite the others and prevent them from running.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- Using jQuery, we could rewrite the this function like this, by assigning a new function to jQuery&#x2019;s document ready event. And since jQuery implements an event queue, we can do this as many times as we&#x2019;d like without worrying that registering one will override another.
- If you remember back to that first KSS action we wrote, we created an action that overrode a link with the id &#x201C;mykssbutton&#x201D; and instead popped up a &#x201C;hello world&#x201D; alert box. Let&#x2019;s rewrite that in jQuery....
- So it&#x2019;ll look like this... We&#x2019;ll use the document ready event to signal that a new function should be assigned to click event of the element with an id of #mykssbutton. That new function will present an alert window stating &#x201C;Hello World!&#x201D;
- Example... create a script that adds a pdf icon to all links on the page pointing to pdfs.
- And we can do our AJAX calls too. This was our KSS AJAX script.
- And we can do our AJAX calls too. This was our KSS AJAX script.
- And this is how it&#x2019;d look in jQuery. Our python script is going to be a lot simpler, now it just returns the data we&#x2019;re after instead of handling the changing of the page content. Then, we&#x2019;ll tell the selectedColor element to load the response from our jq_transformColor script. Our jQuery will override the submit method of the form. We&#x2019;ll grab the value of the color field. The last line is a bit of voodoo... In order to prevent the form from actually submitting, we return a false value. If we returned true, it&#x2019;d go ahead and complete the action.
- jQuery core is now included with Plone as of version 3.1. Plone uses jq instead of the dollar sign shortcut to avoid potential conflicts with other javascript libraries. And if you&#x2019;ve been using &#x2018;cssQuery&#x2019; or &#x2018;registerPloneFunction&#x2019;, you should now be using &#x2018;jq&#x2019; instead.
- There are over a thousand jQuery plugins available to handle things like animation, layout, forms, and AJAX.
- So how might you integrate one of these into Plone? If the plugin uses the &#x2018;$&#x2019; factory alias, you&#x2019;ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that&#x2019;d look something like this -- specifying that the script should be inserted before jquery-integration.js in the ordering. Or you can wrap it in a function like this.
- So how might you integrate one of these into Plone? If the plugin uses the &#x2018;$&#x2019; factory alias, you&#x2019;ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that&#x2019;d look something like this -- specifying that the script should be inserted before jquery-integration.js in the ordering. Or you can wrap it in a function like this.
- So how might you integrate one of these into Plone? If the plugin uses the &#x2018;$&#x2019; factory alias, you&#x2019;ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that&#x2019;d look something like this -- specifying that the script should be inserted before jquery-integration.js in the ordering. Or you can wrap it in a function like this.
- So let&#x2019;s look at some existing behaviors that Plone provides through jQuery...
- And there are quite a few Plone products currently making use of jQuery.
- collective.flowplayer will turn links to flash videos or mp3s into inline players.
- Deco, which will be the content layout and editing tool in Plone 5 makes extensive use of jQuery to handle layout and interaction.
- jQuery has some excellent documentation available. I highly recommend checking it out.
- I&#x2019;m a fan of the &#x201C;Learning jQuery&#x201D; book from Packt.
- And I just want to mention a few other libraries that you can use with Plone. They&#x2019;re each focused on different tasks or approaches to writing interactive applications.
- If you&#x2019;re not comfortable with JavaScript or are pressed for time, KSS is the way to go. It&#x2019;s easy. Otherwise, your best bet is to use JQuery.
- If you&#x2019;re not comfortable with JavaScript or are pressed for time, KSS is the way to go. It&#x2019;s easy. Otherwise, your best bet is to use JQuery.
- Any questions?