Personal tools
 
Document Actions

How KSS works

A brief introduction to KSS. How KSS works

msaelices

KSS in Django using a kss.django application
Page 2 of 6.

In server side, KSS load all the plugins your application has configured (i.e. Scriptaculous). In Python code, you load plugins like this:

from kss.base import load_plugins

load_plugins(['kss-core', 'django', 'scriptaculous-effects'])

This activates the selected plugins. Activation does the following:

  1. Load all command sets (later explain what command set means for KSS).
  2. Makes the javascripts files needed for the plugin in HTML page available to the system.

In client side, there is a kss.js Javascript file that is a concatination of the available plugins. This Javascript loads a KSS file, put in a line on HTML source like:

<link rel="kinetic-stylesheet" href="/site_media/kss/wiki.kss" type="text/kss" />

After this it binds all the events to the matching nodes. It also sets up the server actions in a declarative way, see the example below:

.page-link a:click{
evt-click-preventdefault: True;
action-server: ajax/view;
ajax/view-title: nodeContent();
}

The lines above mean that if the user clicks on a link element like <span class="page-link"><a href="wiki/view?title=WikiWord?">WikiWord?</a></span>, KSS will execute the previous fragment (like CSS selector does) and will:

  1. Override href argument, and send an AJAX request to URL defined in action-server KSS attribute. In this case the link goes to ajax/view, but without refreshing the page.
  2. Pass a HTTP parameter (POST by default) named title (as defined in ajax/view-title) with the value taken from the content of the node (WikiWord? in this case). In this case it is like ajax/view?title=WikiWord? request, but in a POST method.
  3. The server action takes the AJAX request and returns KSS commands to the browser. Commands are XML fragments that do things like (I explain better later):
    • replace breadcrumbs with Home / News / Foo News item
    • do a scriptaculous effect in top of screen
    • replace main content with the new content i am seeing

The first step is very important for accesibility. If you have javascript disabled and the users clicks he would go to wiki/view?title=WikiWord?, and it works perfectly both with or without javascript.

The last thing to explain is how to send KSS commands from server side. Normal code at server side (i.e. a django view) could be something like this:

from kss.base import KSSCommands
from kss.base.selectors import css

def a_django_view(request):
commands = KSSCommands()
commands.core.replaceInnerHTML(css('div.content'), '<h1>Hello world</h1>')
commands.scriptaculous.effect(css('div.message'), 'blinddown')
commands.scriptaculous.effect(css('div.message'), 'blindup', delay=2)
return HttpResponse(commands.render(), mimetype='text/xml')

This returns a XML code that is caught in client side by KSS javascript, and then he execute this commands in the browser.

More on KSS website.

 
by Manuel Saelices last modified 2007-10-15 18:05