jeroen vloothuis bend kss to your will
DESCRIPTION
KSS, the new Ajax framework for Plone 3 comes with great components by default. But what if you need to integrate it with legacy Javascript? Or maybe you want to integrate that nice library/widget you found on the web. During this talk I will show you where you can extend KSS and how to do it. You can watch me create both the server side and client side code needed to integrate an existing piece of Javascript. After this talk KSS should have no limits for you.TRANSCRIPT
![Page 1: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/1.jpg)
Bending KSS to your will
![Page 2: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/2.jpg)
What KSS is about?
Making Ajax apps without writing Javascript
![Page 3: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/3.jpg)
Subject of this talk
Extending KSS, both client and server side
![Page 4: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/4.jpg)
Reasons for extending
● KSS might not be feature complete● You have existing Javascript code● Your project needs something special
![Page 5: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/5.jpg)
Extending means
● Creating a plugin– Client side (Javascript)
● Actions● Value providers● Events
– Server side (Python)● Command sets
![Page 6: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/6.jpg)
KSS terminologie
#selector:click {
action-client: do-stuff;
do-stuff: read-var(...);
}
event
action
value provider
![Page 7: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/7.jpg)
Command setsfrom kss.core import kssaction, KSSView
class CanvasView(KSSView):
@kssaction def drawRectangle(self, size): ksscore = self.getCommandSet('core') selector = ksscore.getHtmlIdSelector( 'canvas-commandset')
self.getCommandSet('demoplugin').canvasRect( selector, 10, 10, size, size)
commandset
![Page 8: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/8.jpg)
Get your gear
● Requirements– Plone 3
– Paster (PasteScript)
– kss.templates
![Page 9: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/9.jpg)
kss.templates?
● kss_plugin● kss_zope_plugin
![Page 10: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/10.jpg)
Using kss.templates
$ ./bin/paster create -t kss_zope_plugin
Selected and implied templates:
kss.templates#kss_plugin KSS plugin template
kss.templates#kss_zope_plugin KSS Zope plugin template
Enter project name: KSSDemoPlugin
Variables:
egg: KSSDemoPlugin
package: kssdemoplugin
project: KSSDemoPlugin
Enter namespace (The namespace for your plugin (something like `my-namespace`)) ['']: demoplugin
Creating template kss_plugin
...
Running /usr/bin/python2.4 setup.py egg_info
![Page 11: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/11.jpg)
Look at all the goodies
● KSSDemoPlugin/– README.txt
– setup.py
– kssplugindemo/
● kssplugindemo/● README.txt● __init__.py● commands.py● configure.zcml● interfaces.py● javascript/plugin.js● etc.
![Page 12: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/12.jpg)
Starting with Javascript
● javascript/plugin.js● 3 sections
– Action
– Value provider
– Event
![Page 13: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/13.jpg)
Action
● Demo
![Page 14: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/14.jpg)
Action (configure.zcml)
<!-- snip -->
<kss:action
name="demoplugin-canvasRect"
jsfile="javascript/plugin.js"
command_factory="selector"
params_mandatory="x y width height"
params_optional="fillStyle"
/>
![Page 15: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/15.jpg)
Action (plugin.js)kukit.actionsGlobalRegistry.register('demoplugin-canvasRect', function (oper) {;;; oper.componentName = '[demoplugin-canvasRect] action'; oper.evaluateParameters(['x', 'y', 'width', 'height'], {'fillStyle': 'rgb(0, 255, 0)'}); oper.evalInt('x'); oper.evalInt('y'); oper.evalInt('width'); oper.evalInt('height');
var x = oper.parms.x; var y = oper.parms.y;
var ctx = oper.node.getContext("2d");
ctx.fillStyle = oper.parms.fillStyle; ctx.fillRect(x, y, oper.parms.width, oper.parms.height);});
kukit.commandsGlobalRegistry.registerFromAction( 'demoplugin-canvasRect', kukit.cr.makeSelectorCommand);
![Page 16: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/16.jpg)
Action (plone-demo-plugin.kss)
#canvas:load {
action-client: demoplugin-canvasRect;
demoplugin-canvasRect-x: 10;
demoplugin-canvasRect-y: 10;
demoplugin-canvasRect-width: 200;
demoplugin-canvasRect-height: 200;
demoplugin-canvasRect-fillStyle: "rgb(0, 255, 0)";
}
![Page 17: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/17.jpg)
Value provider
● Demo
![Page 18: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/18.jpg)
Value provider (configure.zcml)
<!-- snip -->
<kss:paramprovider
name="demoplugin-random"
jsfile="javascript/plugin.js"
/>
![Page 19: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/19.jpg)
Value provider (plugin.js)var RandomProvider = function() {};RandomProvider.prototype = {;;; check: function(args) {;;; if (args.length < 1) {;;; throw new Error( 'demoplugin-random needs at least 1 argument [max]');;;; };;; }, eval: function(args, node) { if(args.length == 2){ var min = args[0]; var max = args[1]; } else { var min = 0; var max = args[0]; } var range = max – min; var rand = (Math.random() * range) + min; return rand; }};kukit.pprovidersGlobalRegistry.register( 'demoplugin-random', RandomProvider);
![Page 20: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/20.jpg)
Value provider (plone-demo-plugin.kss)#canvas:timeout {
evt-timeout-delay: 1;
evt-timeout-repeat: True;
action-client: demoplugin-canvasRect;
demoplugin-canvasRect-x: demoplugin-random(300);
demoplugin-canvasRect-y: demoplugin-random(300);
demoplugin-canvasRect-width: demoplugin-random(10, 30);
demoplugin-canvasRect-height: demoplugin-random(10, 30);
demoplugin-canvasRect-fillStyle: demoplugin-randomColor();
}
![Page 21: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/21.jpg)
Event
● Demo
![Page 22: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/22.jpg)
Event (configure.zcml)
<!-- snip -->
<kss:eventtype
name="demoplugin-movement"
jsfile="javascript/plugin.js"
/>
![Page 23: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/23.jpg)
Event – part 1 (plone-demo-plugin.kss)
var MovementEventBinder = function() {
this.x = 0;
this.y = 0;
};
![Page 24: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/24.jpg)
Event – part 2 (plugin.js)MovementEventBinder.prototype.__bind__ = function(name, func_to_bind, oper) {;;; oper.componentName = '[demoplugin-movement] event binding'; var keyMovement = { 37: [-1, 0], // left 38: [0, -1], // up 39: [1, 0], // right 40: [0, 1] // down };
oper.completeParms([], {'x': '0', 'y': '0', 'speed': '1'}, 'movement event binding'); oper.evalInt('x'); oper.evalInt('y'); oper.evalInt('speed');
var self = this; var speed = oper.parms.speed;
var f = oper.makeExecuteActionsHook();
func = function(e) { var keyCode = e.keyCode.toString(); if(typeof(keyMovement[keyCode]) == 'undefined'){ return; } self.x += keyMovement[keyCode][0] * speed; self.y += keyMovement[keyCode][1] * speed;
f({defaultParameters: {'x': self.x, 'y': self.y}}); }; kukit.ut.registerEventListener(document, 'keydown', func);};
kukit.eventsGlobalRegistry.register('demoplugin', 'movement', MovementEventBinder, '__bind__', null);
![Page 25: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/25.jpg)
Event (plone-demo-plugin.kss)#canvas:demoplugin-movement {
action-client: demoplugin-canvasRect;
evt-demoplugin-movement-speed: 10;
demoplugin-canvasRect-x: pass(x);
demoplugin-canvasRect-y: pass(y);
demoplugin-canvasRect-width: 10;
demoplugin-canvasRect-height: 10;
demoplugin-canvasRect-fillStyle: "rgb(255, 0, 255)";
}
![Page 26: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/26.jpg)
Commandset
● Demo
![Page 27: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/27.jpg)
Commandset (configure.zcml)
<!-- snip -->
<kss:commandset
name="demoplugin"
for="kss.core.interfaces.IKSSView"
class=".commands.KSSDemoPluginCommands"
provides=".interfaces.IKSSDemoPluginCommands"
/>
![Page 28: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/28.jpg)
Commandset (commands.py)
from kss.core.kssview import CommandSet
class KSSDemoPluginCommands(CommandSet):
def canvasRect(self, selector, x, y, width, height, fillStyle=None): command = self.commands.addCommand( 'demoplugin-canvasRect', selector) command.addParam('x', str(int(x))) command.addParam('y', str(int(y))) command.addParam('width', str(int(width))) command.addParam('height', str(int(height)))
if fillStyle is not None: command.addParam('fillStyle', fillStyle)
![Page 29: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/29.jpg)
Commandset (plone-demo-plugin.kss)#canvas-commandset:load {
action-server: drawRectangle;
drawRectangle-size: 200;
}
![Page 30: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/30.jpg)
Using the commandset (plonedemo/canvas.py)
from kss.core import kssaction, KSSView
class CanvasView(KSSView): @kssaction def drawRectangle(self, size): ksscore = self.getCommandSet('core') selector = ksscore.getHtmlIdSelector( 'canvas-commandset')
self.getCommandSet('demoplugin').canvasRect( selector, 10, 10, size, size)
![Page 31: Jeroen Vloothuis Bend Kss To Your Will](https://reader033.vdocuments.us/reader033/viewer/2022052619/55561de5d8b42ae0238b525a/html5/thumbnails/31.jpg)
Wrap up
● Creating plugins not that hard● More docs on: http://kssproject.org● Remember:
– KSS is about not having to write Javascript!