• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jeroen Vloothuis   Bend Kss To Your Will
 

Jeroen Vloothuis Bend Kss To Your Will

on

  • 3,644 views

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 ...

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.

Statistics

Views

Total Views
3,644
Views on SlideShare
3,643
Embed Views
1

Actions

Likes
1
Downloads
99
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jeroen Vloothuis   Bend Kss To Your Will Jeroen Vloothuis Bend Kss To Your Will Presentation Transcript

    • Bending KSS to your will
    • What KSS is about? Making Ajax apps without writing Javascript
    • Subject of this talk Extending KSS, both client and server side
    • Reasons for extending KSS might not be feature complete ● You have existing Javascript code ● Your project needs something special ●
    • Extending means Creating a plugin ● Client side (Javascript) – Actions ● Value providers ● Events ● Server side (Python) – Command sets ●
    • KSS terminologie event action #selector:click { action-client: do-stuff; do-stuff: read-var(...); } value provider
    • 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
    • Get your gear Requirements ● Plone 3 – Paster (PasteScript) – kss.templates –
    • kss.templates? kss_plugin ● kss_zope_plugin ●
    • 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
    • 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. ●
    • Starting with Javascript javascript/plugin.js ● 3 sections ● Action – Value provider – Event –
    • Action Demo ●
    • 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; />
    • 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);
    • 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;; }
    • Value provider Demo ●
    • Value provider (configure.zcml) <!-- snip --> <kss:paramprovider name=quot;demoplugin-randomquot; jsfile=quot;javascript/plugin.jsquot; />
    • 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);
    • 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(); }
    • Event Demo ●
    • Event (configure.zcml) <!-- snip --> <kss:eventtype name=quot;demoplugin-movementquot; jsfile=quot;javascript/plugin.jsquot; />
    • Event – part 1 (plone-demo-plugin.kss) var MovementEventBinder = function() { this.x = 0; this.y = 0; };
    • 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);
    • 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;; }
    • Commandset Demo ●
    • Commandset (configure.zcml) <!-- snip --> <kss:commandset name=quot;demopluginquot; for=quot;kss.core.interfaces.IKSSViewquot; class=quot;.commands.KSSDemoPluginCommandsquot; provides=quot;.interfaces.IKSSDemoPluginCommandsquot; />
    • 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)
    • Commandset (plone-demo-plugin.kss) #canvas-commandset:load { action-server: drawRectangle; drawRectangle-size: 200; }
    • 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)
    • Wrap up Creating plugins not that hard ● More docs on: http://kssproject.org ● Remember: ● KSS is about not having to write Javascript! –