Search

Plone Interactivity

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1













    So what kind of stuff are we going to talk about?

    We’ll get the boring stuff out of the way first

    and then we’ll move on to more interesting things like KSS and jQuery.

    There’s a lot to cover, we’ll hold questions until the end. And any of these slides that I don’t get to, I’ll just cut out of Plone 4.


    So what kind of stuff are we going to talk about?

    We’ll get the boring stuff out of the way first

    and then we’ll move on to more interesting things like KSS and jQuery.

    There’s a lot to cover, we’ll hold questions until the end. And any of these slides that I don’t get to, I’ll just cut out of Plone 4.




    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’t really something you’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’t really something you’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’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’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’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’s handy because of sites like Google’s AJAX libraries API.

    Google hosts the libraries, you pull them into your site as needed. They’ve got a number of the more-popular JavaScript libraries.

    And that’s handy because of sites like Google’s AJAX libraries API.

    Google hosts the libraries, you pull them into your site as needed. They’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’ll use that ++resource++ path to point to the file we’re after.

    We can also register these to be available only for specific content types or browser layers so that they’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’ll only appear in certain portions of a site.

    There’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’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’s faster. You’ve got better things to do with your time.

    Chances are someone’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’s faster. You’ve got better things to do with your time.

    Chances are someone’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’s faster. You’ve got better things to do with your time.

    Chances are someone’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’s faster. You’ve got better things to do with your time.

    Chances are someone’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’s start with Plone’s built-in library, KSS.


    This is what a typical KSS rule might look like. Note that it looks very much like something we’d see in a stylesheet.





    One of the things you’ll use most when writing KSS rules will be this bit.

    Essentially, we’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’ll ignore the default action –actually going to the front-page –and instead apply our own actions, which in this case would be popping up a “Hello World!” alert message.

    And that’d look something like this.

    So in that example, we used the “alert” client action. There are others we can use too.

    So in that example, we used the “alert” client action. There are others we can use too.

    So in that example, we used the “alert” client action. There are others we can use too.

    So in that example, we used the “alert” client action. There are others we can use too.

    So in that example, we used the “alert” client action. There are others we can use too.

    So in that example, we used the “alert” 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’s tie all of these concepts together.

    I’ve created a simple html page with a form that accepts a color name and has a submit button. There’s also a div that will tell the user what they’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’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’s see this in action.

    So let’s tie all of these concepts together.

    I’ve created a simple html page with a form that accepts a color name and has a submit button. There’s also a div that will tell the user what they’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’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’s see this in action.

    So let’s tie all of these concepts together.

    I’ve created a simple html page with a form that accepts a color name and has a submit button. There’s also a div that will tell the user what they’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’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’s see this in action.

    So what happens if JavaScript is disabled for whatever reason?

    KSS makes sure that if that’s the case, then the click event override we’ve created doesn’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’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’m going to switch to using action-server. We’ll call a python script I’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 “color”, so we’ll need to pass that along as well.

    Looking at the script itself, there’s a lot of boilerplate that you don’t really need to be concerned about. Just trust that it’s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we’ll do a simple bit of Python and change the color name the script has received into uppercase. Next we’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’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 ‘blue’ displays it in the page in uppercase, all without reloading the page.

    Alright, now let’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’m going to switch to using action-server. We’ll call a python script I’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 “color”, so we’ll need to pass that along as well.

    Looking at the script itself, there’s a lot of boilerplate that you don’t really need to be concerned about. Just trust that it’s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we’ll do a simple bit of Python and change the color name the script has received into uppercase. Next we’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’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 ‘blue’ displays it in the page in uppercase, all without reloading the page.

    Alright, now let’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’m going to switch to using action-server. We’ll call a python script I’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 “color”, so we’ll need to pass that along as well.

    Looking at the script itself, there’s a lot of boilerplate that you don’t really need to be concerned about. Just trust that it’s there for a reason and move on with your life. The important bits are the remaining three lines. First of all, we’ll do a simple bit of Python and change the color name the script has received into uppercase. Next we’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’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 ‘blue’ displays it in the page in uppercase, all without reloading the page.

    We saw that “getCommandSet” line... there are 3 different command sets that come with KSS out of the box. I mentioned ‘core’, 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’re going to use one of the resource registries we talked about earlier -- portal_kss.

    Typically, that’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’re debugging in something that’s not Firefox, try Firebug Lite.

    So how do you go about debugging KSS?

    Firebug. Firebug. Firebug.

    Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.

    So how do you go about debugging KSS?

    Firebug. Firebug. Firebug.

    Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.

    So how do you go about debugging KSS?

    Firebug. Firebug. Firebug.

    Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.

    A side-effect of KSS’s no-javascript failover is that if there’s an error, your page’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’s console window. And there’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’s also “Firekiss”, a Firebug extension from the KSS folks. It’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’s Javascript, without the JavaScript, which for someone like me who hates writing Javascript, is really awesome.


    As of Plone 4, we’ll probably no longer be shipping with KSS.


    Why?

    So here’s why...
    It’s huge. The relevant scripts check in at over 100 k.
    It’s been slow to catch on, both within and outside of the Plone project.
    And the documentation is somewhat lacking.

    So here’s why...
    It’s huge. The relevant scripts check in at over 100 k.
    It’s been slow to catch on, both within and outside of the Plone project.
    And the documentation is somewhat lacking.

    So here’s why...
    It’s huge. The relevant scripts check in at over 100 k.
    It’s been slow to catch on, both within and outside of the Plone project.
    And the documentation is somewhat lacking.

    And you can read PLIP #8809 for more information about that decision.

    So right now, you’re thinking, “This asshole just wasted half an hour of my life.”






    By including it in my buildout.


    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.

    The current direction that Plone core development is taking is to make Plone itself ship as a much leaner product. So just because we’re not planning to ship with KSS, that doesn’t mean that you can’t and shouldn’t still use it...

    So that brings us to jQuery, the JavaScript library with which we’ll be replacing KSS functionality in Plone core.

    So why use jQuery

    It’s a DOM-focused library, and by that, I mean that it’s less of a “make JavaScript a real language” library, and more of a “get stuff done” library.

    It’s got a very simple syntax.

    It’s easy to add on to the core functionality and there are lots of plugins available that do so.

    It’s quite small.

    And there’s a large amount of good documentation.

    So why use jQuery

    It’s a DOM-focused library, and by that, I mean that it’s less of a “make JavaScript a real language” library, and more of a “get stuff done” library.

    It’s got a very simple syntax.

    It’s easy to add on to the core functionality and there are lots of plugins available that do so.

    It’s quite small.

    And there’s a large amount of good documentation.

    So why use jQuery

    It’s a DOM-focused library, and by that, I mean that it’s less of a “make JavaScript a real language” library, and more of a “get stuff done” library.

    It’s got a very simple syntax.

    It’s easy to add on to the core functionality and there are lots of plugins available that do so.

    It’s quite small.

    And there’s a large amount of good documentation.

    So why use jQuery

    It’s a DOM-focused library, and by that, I mean that it’s less of a “make JavaScript a real language” library, and more of a “get stuff done” library.

    It’s got a very simple syntax.

    It’s easy to add on to the core functionality and there are lots of plugins available that do so.

    It’s quite small.

    And there’s a large amount of good documentation.

    So why use jQuery

    It’s a DOM-focused library, and by that, I mean that it’s less of a “make JavaScript a real language” library, and more of a “get stuff done” library.

    It’s got a very simple syntax.

    It’s easy to add on to the core functionality and there are lots of plugins available that do so.

    It’s quite small.

    And there’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’s aliased as “jq”. We’ll get into that a bit more later, but for now all of my examples will use the “jq” alias since that’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’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’re interacting with.

    We can pass all sorts of selectors to the factory function. Most of the time, we’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’re interacting with.

    We can pass all sorts of selectors to the factory function. Most of the time, we’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’re interacting with.

    We can pass all sorts of selectors to the factory function. Most of the time, we’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’re interacting with.

    We can pass all sorts of selectors to the factory function. Most of the time, we’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’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’s “Implicit Iteration” means that methods assume that the selector’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’s “Implicit Iteration” means that methods assume that the selector’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’s “Implicit Iteration” means that methods assume that the selector’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’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’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’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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’s document ready event.

    And since jQuery implements an event queue, we can do this

    as many

    times as

    we’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 “mykssbutton” and instead popped up a “hello world” alert box.

    Let’s rewrite that in jQuery....

    So it’ll look like this...

    We’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 “Hello World!”


    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’d look in jQuery.

    Our python script is going to be a lot simpler, now it just returns the data we’re after instead of handling the changing of the page content.

    Then, we’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’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’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’ve been using ‘cssQuery’ or ‘registerPloneFunction’, you should now be using ‘jq’ 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 ‘$’ factory alias, you’ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that’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 ‘$’ factory alias, you’ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that’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 ‘$’ factory alias, you’ll need to place it between jquery.js and jquery-integration.js in the portal_javascript registry. Using GenericSetup, that’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’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 at some point in Plone’s future makes extensive use of jQuery to handle layout and interaction.


    jQuery has some excellent documentation available. I highly recommend checking it out.

    I’m a fan of the “Learning jQuery” book from Packt.

    And I just want to mention a few other libraries that you can use with Plone. They’re each focused on different tasks or approaches to writing interactive applications.


    If you’re not comfortable with JavaScript or are pressed for time, KSS is the way to go.
    Otherwise, your best bet is to use JQuery.

    If you’re not comfortable with JavaScript or are pressed for time, KSS is the way to go.
    Otherwise, your best bet is to use JQuery.



    Any questions?

    4 Favorites

    Plone Interactivity - Presentation Transcript

    1. Adding Interactivity to your Plone Site http://bit.ly/plone-interactivity
    2. Me
    3. Me • Eric Steele
    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...
    11. I Suck at JavaScript... and So Can You
    12. I Suck at JavaScript... and So Can You ~
    13. I Suck at JavaScript... and So Can You ~ A half-assed guide to interactive JavaScript
    14. The Stuff
    15. The Stuff • The Boring Stuff • Resources
    16. The Stuff • The Boring Stuff • The Fun Stuff • Resources • KSS • jQuery
    17. Resources
    18. Resources • JavaScript • CSS • KSS
    19. Including JavaScripts <tal:block metal:fill-slot=\"javascript_head_slot\"> <script type=\"text/javascript\" src=\"myscript.js\" /> </tal:block>
    20. 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
    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 • Performance isn’t an issue
    22. Resource Registries
    23. Resource Registries
    24. Resource Registries • Control inclusion, order
    25. Resource Registries • Control inclusion, order • Automatic merging, compression
    26. Resource Registries • Control inclusion, order • Automatic merging, compression • Improved cacheability
    27. 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>
    28. External Scripts
    29. External Scripts <javascript ... id=\"http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js\" ... />
    30. External Scripts <javascript ... id=\"http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js\" ... /> • New in Plone 3.3
    31. 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
    32. Google AJAX Libraries
    33. Google AJAX Libraries http://code.google.com/apis/ajaxlibs/
    34. Google AJAX Libraries http://code.google.com/apis/ajaxlibs/ • jQuery • Dojo • jQuery UI • SWFObjectNew • Prototype • Yahoo! User Interface Library (YUI) • script.aculo.us • MooTools
    35. Browser Resources • Zope 3 concept •
    36. Browser Resources
    37. Browser Resources <browser:resource name=\"myscript.js\" image=\"myscript.js\" />
    38. Browser Resources <browser:resource name=\"myscript.js\" image=\"myscript.js\" /> http://myplonesite/++resource++myscript.js
    39. 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>
    40. Browser Resources
    41. Browser Resources <browser:resource name=\"myscript.js\" image=\"myscript.js\" for=\"..interfaces.IMyCustomType” />
    42. Browser Resources <browser:resource name=\"myscript.js\" image=\"myscript.js\" for=\"..interfaces.IMyCustomType” /> <browser:resource name=\"myscript.js\" image=\"myscript.js\" layer=\"..interfaces.IMySkinLayer” />
    43. Browser Resources
    44. Browser Resources <browser:resourceDirectory name=\"myResources\" directory=\"stuff\" />
    45. Browser Resources <browser:resourceDirectory name=\"myResources\" directory=\"stuff\" /> http://myplonesite/++resource++myResources/ checkout.png
    46. JavaScript Libraries
    47. 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
    48. Why?
    49. Why? • Save time
    50. Why? • Save time • Reuse existing code
    51. Why? • Save time • Reuse existing code • You don’t need to be an expert
    52. Why? • Save time • Reuse existing code • You don’t need to be an expert • Browser “quirks”
    53. KSS
    54. KSS • “Kinetic Style Sheets” • JavaScript/AJAX framework • Declare behaviors using CSS format • Built into Plone 3.0+ • Also works with Grok, Pylons, Django
    55. KSS Rules #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
    56. KSS Rules CSS Selector #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
    57. KSS Rules Action Type #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
    58. KSS Rules Action #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; }
    59. KSS Rules Action Parameter #mykssbutton:click { action-client: alert; alert-message: ‘Hello World!’; } name value
    60. KSS Rules evt-click-preventdefault: True;
    61. KSS Rules #mykssbutton:click { evt-click-preventdefault: True; action-client: alert; alert-message: ‘Hello World!’; } <a href=”front-page” id=”mykssbutton”>Click me! </a>
    62. `
    63. Client Actions
    64. Client Actions • alert
    65. Client Actions • alert • addClass / removeClass / toggleClass
    66. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute
    67. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle
    68. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle • replaceInnerHTML
    69. Client Actions • alert • addClass / removeClass / toggleClass • setAttribute • setStyle • replaceInnerHTML • log
    70. Parameter Providers
    71. Parameter Providers • nodeAttr
    72. Parameter Providers • nodeAttr • nodeContent
    73. Parameter Providers • nodeAttr • nodeContent • currentFormVar
    74. Parameter Providers • nodeAttr • nodeContent • currentFormVar • formVar
    75. Tying Them Together
    76. 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>
    77. 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); }
    78. 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); }
    79. Fallback
    80. Server Actions
    81. Server Actions #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); }
    82. 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()
    83. 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()
    84. Command Sets • Core • Zope • getCssSelector • refreshProvider • addClass • refreshViewlet • removeClass • Plone • issuePortalMessage • refreshPortlet
    85. Registering KSS • portal_kss registry
    86. 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>
    87. Debugging KSS
    88. Debugging KSS • Firebug
    89. Debugging KSS • Firebug • Firebug
    90. Debugging KSS • Firebug • Firebug • Firebug
    91. Debugging KSS • Firebug • Firebug • Firebug • Or Firebug Lite (getfirebug.com/lite.html)
    92. Debugging KSS • KSS fails silently • Turn on debugging in portal_javascript • Messages will appear in Firebug console
    93. Debugging KSS
    94. Debugging KSS • Firekiss http://kssproject.org/download/firekiss.xpi/
    95. KSS Plugins • kss.plugin.cacheabilty • kss.plugin.jsmath • kss.plugin.cns • kss.plugin.timer • kss.plugin.fadeeffect • kss.plugin.yuidnd • kss.plugin.history
    96. Documentation • http://kssproject.org/ • http://plone.org/events/regional/plone- symposium-2008/skinning-with-plone-3
    97. KSS Recap • Simple, CSS-style syntax • JavaScript, without the JavaScript
    98. But here’s the thing...
    99. Plone 4 won’t include KSS * * probably...
    100. Dude.
    101. WTF?
    102. • It’s huge
    103. • It’s huge • Lack of adoption
    104. • It’s huge • Lack of adoption • Sparse documentation
    105. See http://dev.plone.org/plone/ticket/8809 for more information.
    106. This asshole just wasted half an hour of my life...
    107. Repeat after me...
    108. “KSS is not going away.”
    109. “It’s just becoming an add-on Product.”
    110. “I can still use KSS as much as I’d like.”
    111. “By including it in my buildout.” Buildout
    112. “Or as a product dependency.” Product
    113. “Really.”
    114. jQuery
    115. jQuery
    116. jQuery • DOM-focused
    117. jQuery • DOM-focused • Simple syntax
    118. jQuery • DOM-focused • Simple syntax • Extensible
    119. jQuery • DOM-focused • Simple syntax • Extensible • 19K
    120. jQuery • DOM-focused • Simple syntax • Extensible • 19K • Well-documented
    121. Factory
    122. Factory • jQuery() • $() • jq()
    123. Selectors
    124. Selectors • CSS
    125. Selectors • CSS • Tag name: jq(‘p’)
    126. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’)
    127. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’) • Class: jq(‘.someClass’)
    128. Selectors • CSS • Tag name: jq(‘p’) • Id: jq(‘#itemId’) • Class: jq(‘.someClass’) • XPath: jq(‘a[title]’)
    129. Pseudo-Selectors
    130. Pseudo-Selectors • :first and :last
    131. Pseudo-Selectors • :first and :last • :not jq(‘#portal-column-content p:not(.discreet)’)
    132. 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)’)
    133. 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’)
    134. Sets
    135. Sets • “Implicit iteration”
    136. Sets • “Implicit iteration” • jq(‘#myDiv’).hide()
    137. Sets • “Implicit iteration” • jq(‘#myDiv’).hide() • jq(‘.someDivs’).hide()
    138. Chaining
    139. Chaining • Operations always return a result
    140. Chaining • Operations always return a result • So instead of... obj.doSomething() obj.doSomethingElse(‘blah’)
    141. Chaining • Operations always return a result • So instead of... obj.doSomething() obj.doSomethingElse(‘blah’) • We can write... jq(‘#myElement’).parent().addClass(‘blah’)
    142. Chaining
    143. Chaining • One one line... jq(‘#faq’).find(‘dd’).hide().end().find(‘dt’).click(function(){...});
    144. 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.
    145. Events
    146. Events function foo(){ alert(‘foo’); } window.onload = foo;
    147. Events function foo(){ alert(‘foo’); } window.onload = foo; function bar(){ alert(‘bar’); } window.onload = bar;
    148. Events function foo(){ alert(‘foo’); } window.onload = foo; function bar(){ alert(‘bar’); } window.onload = bar;
    149. Events
    150. Events jq(document).ready(function) { alert(‘bar’); });
    151. Events jq(document).ready(function) { alert(‘foo’); }); jq(document).ready(function) { alert(‘bar’); });
    152. Events jq(document).ready(function) { alert(‘foo’); jq(document).ready(function) { }); alert(‘baz’); jq(document).ready(function) { }); alert(‘bar’); });
    153. 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’); });
    154. 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’); });
    155. 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’); }); });
    156. Events #mykssbutton:click { evt-click-preventdefault: True; action-client: alert; alert-message: ‘Hello World!’; } <a href=”front-page” id=”mykssbutton”>Click me! </a>
    157. Events jq(document).ready(function) { jq(‘#mykssbutton’).click(function(){ alert(‘Hello World!); }); }); <a href=”front-page” id=”mykssbutton”>Click me! </a>
    158. Another Example jq(document).ready(function() { jq(‘a[@href$=”.pdf”]’).addclass(‘pdflink’); }); a.pdflink { background:url(‘pdficon.gif’) no-repeat; padding-left:25px; }
    159. AJAX Calls
    160. AJAX Calls #myForm .submit:click { evt-click-preventdefault: True; action-server: transformColor; transformColor-color: currentFormVar(color); }
    161. 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()
    162. 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; }); });
    163. jQuery in Plone • Built into Plone 3.1+ • ‘jq’ instead of ‘$’ • Now use ‘jq’ method instead of ‘cssQuery’ or ‘registerPloneFunction’
    164. Integrating jQuery Plugins http://plugins.jquery.com/
    165. Integrating jQuery Plugins
    166. Integrating jQuery Plugins • If the plugin uses ‘$’:
    167. Integrating jQuery Plugins • If the plugin uses ‘$’: • Place it between jquery.js and jquery- integration.js <javascript ... insert-before=\"jquery-integration.js\"/>
    168. 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);
    169. Existing Behaviors
    170. Collapsible Sections <dl class=”collapsible”> <dt class=”collapsibleHeader”> A Title </dt> <dd class=”collapsibleContent”> Your hidable content. </dd> </dl>
    171. Collapsible Sections <dl class=”collapsible”> <dt class=”collapsibleHeader”> A Title </dt> <dd class=”collapsibleContent”> Your hidable content. </dd> </dl>
    172. Dropdowns <dl class=”actionMenu” id=”aUniqueId”> <dt class=”actionMenuHeader”> <a href=”some_destination”>A Title</ a> </dt> <dd class=”actionMenuContent”> Your content </dd> </dl>
    173. Dropdowns <dl class=”actionMenu” id=”aUniqueId”> <dt class=”actionMenuHeader”> <a href=”some_destination”>A Title</ a> </dt> <dd class=”actionMenuContent”> Your content </dd> </dl>
    174. 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>
    175. 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>
    176. Sortable Tables <th class=”nosort”> Unsortable Column </th>
    177. Sortable Tables <th class=”nosort”> Unsortable Column </th>
    178. Products using jQuery
    179. collective.flowplayer Turns code like: <a class=\"autoFlowPlayer\" href=\"path/to/video-file.flv\"> <img src=\"path/to/splashscreen.jpg\" /> </a> into:
    180. Deco
    181. Deco
    182. Others • Carousel • Plone Slimbox • FancyZoomView • FadingNavigation
    183. jQuery Documentation http://docs.jquery.com/
    184. http://www.packtpub.com/jQuery/
    185. Other Libraries • Yahoo User Interface (YUI) • extjs • MochiKit • MooTools • Dojo
    186. Conclusions
    187. • JavaScript novice? – Use KSS
    188. • JavaScript novice? – Use KSS • Otherwise, use JQuery
    189. Special thanks to... • David Glick http://wglick.org/jstalk.html • Joel Burton http://bit.ly/z1nLH
    190. http://bit.ly/plone-interactivity
    191. Questions? http://bit.ly/plone-interactivity

    + Eric SteeleEric Steele, 6 months ago

    custom

    992 views, 4 favs, 0 embeds more stats

    A look at using KSS and jQuery in your Plone site.

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 992
      • 992 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 4
    • Downloads 25
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved