Downloaded 49 times
More Related Content
![Governance, Deployment & Methodologies for Agentic Automation [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day2-251112135038-a386476d-thumbnail.jpg?width=640&height=640&fit=bounds)
Editor's Notes
- #14 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.
- #15 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.
- #18 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.
- #19 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.
- #20 Plone, however, provides Resource Registries for keeping track of things like CSS, JavaScript, and KSS.
- #21 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.
- #22 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.
- #23 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.
- #24 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.
- #25 And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- #26 And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- #27 And now, in Plone 3.3, we can use portal_javascript to include JavaScript being hosted on external servers.
- #28 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.
- #29 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.
- #33 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.
- #34 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.
- #35 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.
- #36 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.
- #37 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.
- #38 So, what are Javascript libraries?
- #40 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.
- #41 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.
- #42 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.
- #43 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.
- #44 So let’s start with Plone’s built-in library, KSS.
- #46 This is what a typical KSS rule might look like. Note that it looks very much like something we’d see in a stylesheet.
- #51 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.
- #52 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.
- #53 And that’d look something like this.
- #54 So in that example, we used the “alert” client action. There are others we can use too.
- #55 So in that example, we used the “alert” client action. There are others we can use too.
- #56 So in that example, we used the “alert” client action. There are others we can use too.
- #57 So in that example, we used the “alert” client action. There are others we can use too.
- #58 So in that example, we used the “alert” client action. There are others we can use too.
- #59 So in that example, we used the “alert” client action. There are others we can use too.
- #60 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.
- #61 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.
- #62 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.
- #63 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.
- #64 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.
- #65 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.
- #66 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.
- #67 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.
- #68 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.
- #69 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.
- #70 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.
- #71 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.
- #72 So how do we register a kss file? We’re going to use one of the resource registries we talked about earlier -- portal_kss.
- #73 Typically, that’s done from GenericSetup, using an kssregistry.xml file. This looks almost exactly like the JavaScript registration we looked at earlier.
- #74 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.
- #75 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.
- #76 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.
- #77 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.
- #78 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.
- #79 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.
- #80 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.
- #81 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.
- #83 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.
- #85 As of Plone 4, we’ll probably no longer be shipping with KSS.
- #87 Why?
- #88 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.
- #89 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.
- #90 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.
- #91 And you can read PLIP #8809 for more information about that decision.
- #92 So right now, you’re thinking, “This asshole just wasted half an hour of my life.”
- #97 By including it in my buildout.
- #99 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...
- #100 So that brings us to jQuery, the JavaScript library with which we’ll be replacing KSS functionality in Plone core.
- #101 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.
- #102 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.
- #103 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.
- #104 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.
- #105 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.
- #106 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.
- #107 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.
- #108 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.
- #109 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.
- #110 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.
- #111 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.
- #112 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).
- #113 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).
- #114 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).
- #115 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).
- #116 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.
- #117 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.
- #118 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.
- #119 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.
- #120 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.
- #121 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.
- #122 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.
- #123 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.
- #124 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.
- #125 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.
- #126 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.
- #127 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.
- #128 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.
- #129 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.
- #130 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.
- #131 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.
- #132 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.
- #133 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....
- #134 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!”
- #135 Example... create a script that adds a pdf icon to all links on the page pointing to pdfs.
- #136 And we can do our AJAX calls too. This was our KSS AJAX script.
- #137 And we can do our AJAX calls too. This was our KSS AJAX script.
- #138 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.
- #139 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.
- #140 There are over a thousand jQuery plugins available to handle things like animation, layout, forms, and AJAX.
- #141 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.
- #142 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.
- #143 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.
- #144 So let’s look at some existing behaviors that Plone provides through jQuery...
- #149 And there are quite a few Plone products currently making use of jQuery.
- #150 collective.flowplayer will turn links to flash videos or mp3s into inline players.
- #151 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.
- #153 jQuery has some excellent documentation available. I highly recommend checking it out.
- #154 I’m a fan of the “Learning jQuery” book from Packt.
- #155 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.
- #157 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.
- #158 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.
- #161 Any questions?