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...
Extending means
    Creating a plugin
●


        Client side (Javascript)
    –

             Actions
         ●


      ...
KSS terminologie

         event
                          action
#selector:click {
    action-client: do-stuff;
    do-st...
Command sets
  from kss.core import kssaction, KSSView

    class CanvasView(KSSView):

        @kssaction
        def dra...
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     ...
Look at all the goodies
    KSSDemoPlugin/           kssplugindemo/
●                        ●


        README.txt       ...
Starting with Javascript
    javascript/plugin.js
●


    3 sections
●


        Action
    –

        Value provider
    ...
Action
        Demo
    ●
Action (configure.zcml)
<!-- snip -->
<kss:action
    name=quot;demoplugin-canvasRectquot;
    jsfile=quot;javascript/plug...
Action (plugin.js)
kukit.actionsGlobalRegistry.register('demoplugin-canvasRect',
function (oper) {
;;; oper.componentName ...
Action (plone-demo-plugin.kss)
#canvas:load {
    action-client: demoplugin-canvasRect;
    demoplugin-canvasRect-x: 10;
 ...
Value provider
            Demo
        ●
Value provider (configure.zcml)
<!-- snip -->
<kss:paramprovider
       name=quot;demoplugin-randomquot;
       jsfile=quo...
Value provider (plugin.js)
var RandomProvider = function() {};
RandomProvider.prototype = {
;;; check: function(args) {
;;...
Value provider (plone-demo-plugin.kss)
#canvas:timeout {
    evt-timeout-delay: 1;
    evt-timeout-repeat: True;


    act...
Event
        Demo
    ●
Event (configure.zcml)
<!-- snip -->
<kss:eventtype
    name=quot;demoplugin-movementquot;
    jsfile=quot;javascript/plug...
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.componen...
Event (plone-demo-plugin.kss)
#canvas:demoplugin-movement {
    action-client: demoplugin-canvasRect;
    evt-demoplugin-m...
Commandset
          Demo
      ●
Commandset (configure.zcml)
<!-- snip -->
<kss:commandset
     name=quot;demopluginquot;
     for=quot;kss.core.interfaces...
Commandset (commands.py)
from kss.core.kssview import CommandSet

class KSSDemoPluginCommands(CommandSet):
    def canvasR...
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):
    @kssact...
Wrap up
    Creating plugins not that hard
●


    More docs on: http://kssproject.org
●


    Remember:
●


        KSS i...
Upcoming SlideShare
Loading in...5
×

Jeroen Vloothuis Bend Kss To Your Will

2,287

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,287
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
100
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jeroen Vloothuis Bend Kss To Your Will

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

    Clipping is a handy way to collect important slides you want to go back to later.

×