joonis Logo

Kinetic Style Sheets

KSS-RPC (Kinetic Style Sheets RPC) 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.

The idea of KSS-RPC is based on the original KSS project (PyPI) which is pretty much dead. So KSS-RPC is a complete rewrite of this library, currently in beta state. It is also somewhat comparable to Xajax, phery.js and Jaxon for PHP or Sajax, Sijax and Dajax for Python. But KSS differs in the way that it is basically independent from the server-side programming language and all the client-side event bindings are done through centralized stylesheets.

Features

  • Supported protocols: JSON-RPC, XML-RPC and URL-encoded requests
  • Supports all modern browsers inclusive IE9+ (IE8 with polyfills)
  • Independent from any third-party JavaScript library
  • Optional supported selector engines: Sizzle (jQuery) and Slick (MooTools)
  • Supported animation libraries: Velocity, GreenSock, jQuery and MooTools

Example

Put the following files into your www folder: kss.min.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" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link type="text/kss" rel="kinetic-stylesheet" href="ajax.kss" />
    <script type="text/javascript" src="kss.min.js"></script>
    <title>KSS example</title>
</head>
<body>
    <p id="result">KSS example</p>
    <form id="myform" data-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:

@config {
    protocol: url-encoded;
    date-encoding: iso8601;
    timeout: 5000;
    endpoint: service.php;
}

#process:click,
#myform:submit {
    evt-preventdefault: true;

    kss-action-server: helloworld;
    text: formVar("text");
    counter: dataAttr("counter", true);
}

Finally we need a script that responds with some KSS commands. We named it service.php:

<?php

require 'kss.php';

if ($_POST['kss_action'] == 'helloworld') {

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

    $kss = new KSSResponse();

    $kss->replaceInnerHTML('#result', array(
        'html'=>$message,
    ));

    $kss->setDataAttr('#myform', array(
        'name'=>'counter',
        'value'=>$counter,
    ));

    $kss->focus('#text');

    $kss->send();
}

?>

And this is what you get ...

Download

To simplify things there are two small server-side libraries available:

ToDo

  • Testcase
  • Code documentation
  • Drag-n-Drop plugin

Can I
  help you?


Just drop me a line at
giraffe@joonis.de