How KSS works
msaelices
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:
- Load all command sets (later explain what command set means for KSS).
- 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:
- 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.
- 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.
- 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.