joonis Logo

Kinetic Style Sheets

KSS (Kinetic Style Sheets) is a framework that allows Ajax development without writing more Javascript. It uses stylesheets with CSS-compliant syntax to declare behaviours in the client and a set of well-defined DOM-like commands that are sent back from the server to manipulate the HTML page. A decided advantage of KSS is the fact that all the client-side logic can be shifted to the server-side.

Since the original KSS project (PyPI) is pretty much dead, you can find here a revised version of the client-side library and currently two compact server-side implementations (Python and PHP).

Example

Put the following files into your www folder: kukit.js, sizzle.js and kss.php with the content from the server-side PHP library.

Then create the file index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link type="text/kss" rel="kinetic-stylesheet" href="ajax.kss" />
    <script type="text/javascript" src="sizzle.js"></script>
    <script type="text/javascript" src="kukit.js"></script>
    <title>KSS example</title>
</head>
<body>
    <p id="result">KSS example</p>
    <form id="myform" data-kss-counter="0">
        <input type="text" name="text" id="text" value="World" />
        <input type="button" id="process" value="Go" />
    </form>
</body>
</html>

Now add a file named ajax.kss with the following content:

#process:click, #myform:submit {
    action-server: helloworld;
    helloworld-kssUrl: "helloworld.php";
    helloworld-text: currentFormVar("text");
    helloworld-counter: kssAttr("counter", true);
    evt-submit-preventdefault: true;
}

Finally we need a script which responds with some KSS commands. We named it helloworld.php.

<?php

require 'kss.php';

$counter = $_POST['counter'] + 1;
$message = 'Hello '.$_POST['text'].'! ('.$counter.')';

$resp = new KSSResponse('xml');
// Should you prefer JSON:
//$resp = new KSSResponse('json');

$cmd = $resp->add_command('replaceInnerHTML', '#result');
$cmd->set_param('html', $message);

$cmd = $resp->add_command('setKssAttribute', '#myform');
$cmd->set_param('name', 'counter');
$cmd->set_param('value', $counter);

$cmd = $resp->add_command('focus', '#text');

$resp->send();

?>

And this is what you get ...

Download

The client-side Javascript library kukit.js requires a selector engine like Sizzle or Slick.

The server-side libraries must be copied manually:

Can I
  help you?


Just drop me a line at
giraffe@joonis.de