More Related Content Similar to Jeroen Vloothuis Bend Kss To Your Will (20) More from Vincenzo Barone (20) Jeroen Vloothuis Bend Kss To Your Will2. What KSS is about?
Making Ajax apps without writing Javascript 4. Reasons for extending
KSS might not be feature complete
●
You have existing Javascript code
●
Your project needs something special
● 5. Extending means
Creating a plugin
●
Client side (Javascript)
–
Actions
●
Value providers
●
Events
●
Server side (Python)
–
Command sets
● 6. KSS terminologie
event
action
#selector:click {
action-client: do-stuff;
do-stuff: read-var(...);
}
value provider 7. Command sets
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)
commandset 8. Get your gear
Requirements
●
Plone 3
–
Paster (PasteScript)
–
kss.templates
– 10. 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 11. Look at all the goodies
KSSDemoPlugin/ kssplugindemo/
● ●
README.txt README.txt
– ●
__init__.py
setup.py
●
–
commands.py
●
kssplugindemo/
–
configure.zcml
●
interfaces.py
●
javascript/plugin.js
●
etc.
● 14. Action (configure.zcml)
<!-- snip -->
<kss:action
name=quot;demoplugin-canvasRectquot;
jsfile=quot;javascript/plugin.jsquot;
command_factory=quot;selectorquot;
params_mandatory=quot;x y width heightquot;
params_optional=quot;fillStylequot;
/> 15. 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(quot;2dquot;);
ctx.fillStyle = oper.parms.fillStyle;
ctx.fillRect(x, y, oper.parms.width, oper.parms.height);
});
kukit.commandsGlobalRegistry.registerFromAction(
'demoplugin-canvasRect', kukit.cr.makeSelectorCommand); 16. 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: quot;rgb(0, 255, 0)quot;;
} 19. 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); 20. 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();
} 23. Event – part 1 (plone-demo-plugin.kss)
var MovementEventBinder = function() {
this.x = 0;
this.y = 0;
}; 24. 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); 25. 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: quot;rgb(255, 0, 255)quot;;
} 27. Commandset (configure.zcml)
<!-- snip -->
<kss:commandset
name=quot;demopluginquot;
for=quot;kss.core.interfaces.IKSSViewquot;
class=quot;.commands.KSSDemoPluginCommandsquot;
provides=quot;.interfaces.IKSSDemoPluginCommandsquot;
/> 28. 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) 30. 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) 31. Wrap up
Creating plugins not that hard
●
More docs on: http://kssproject.org
●
Remember:
●
KSS is about not having to write Javascript!
–