A look at using KSS and jQuery in your Plone site.
A look at using KSS and jQuery in your Plone site.
Uploaded via SlideShare as Apple Keynote
© All Rights Reserved
fcodvpt
2 years ago
dinugherman
3 years ago
delphic
3 years ago
Massimo Azzolini, CTO at RedTurtle Technology
3 years ago
Jazkarta, Inc. at Jazkarta, Inc.
3 years ago
Plone Interactivity
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.
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 only need it on one page or one template
or performance isn’t really something you’re concerned about.
you only need it on one page or one template
or performance isn’t really something you’re concerned about.
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.
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.
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.
We can control all of the settings from here and even specify where it should wind up in the ordering.
Google hosts the libraries, you pull them into your site as needed. They’ve got a number of the more-popular JavaScript libraries.
Google hosts the libraries, you pull them into your site as needed. They’ve got a number of the more-popular JavaScript libraries.
The url would look like this.
The url would look like this.
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.
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.
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.
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.
Essentially, we’re telling KSS that we want to ignore the default click event of whatever element the rule applies to.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
We’re going to use one of the resource registries we talked about earlier -- portal_kss.
This looks almost exactly like the JavaScript registration we looked at earlier.
Firebug. Firebug. Firebug.
Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.
Firebug. Firebug. Firebug.
Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.
Firebug. Firebug. Firebug.
Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.
Firebug. Firebug. Firebug.
Or, if you’re debugging in something that’s not Firefox, try Firebug Lite.
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.
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.
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.
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.
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.
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.
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...
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.
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.
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.
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.
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.
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.
But can also use XPath statements to select particular elements of the HTML document we’re interacting with.
But can also use XPath statements to select particular elements of the HTML document we’re interacting with.
But can also use XPath statements to select particular elements of the HTML document we’re interacting with.
But can also use XPath statements to select particular elements of the HTML document we’re interacting with.
But can also use XPath statements to select particular elements of the HTML document we’re interacting with.
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).
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).
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).
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).
So instead of calling methods on an object over and over.
We can chain commands, performing operations on the previous command’s result.
So instead of calling methods on an object over and over.
We can chain commands, performing operations on the previous command’s result.
So instead of calling methods on an object over and over.
We can chain commands, performing operations on the previous command’s result.
or several. Splitting it across several lines allows us to provide much more in the way of comments.
or several. Splitting it across several lines allows us to provide much more in the way of comments.
The problem is that if we do it this way, each new function we add
would overwrite the others and prevent them from running.
The problem is that if we do it this way, each new function we add
would overwrite the others and prevent them from running.
The problem is that if we do it this way, each new function we add
would overwrite the others and prevent them from running.
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.
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.
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.
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.
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.
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.
Let’s rewrite that in jQuery....
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!”
This was our KSS AJAX script.
This was our KSS AJAX script.
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.
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.
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.
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.
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.
Otherwise, your best bet is to use JQuery.
Otherwise, your best bet is to use JQuery.