English Deutsch

KSS - 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. 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 plain JSON- or 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

Integration

<script type="text/javascript" src="/path/to/kss.min.js"></script>

Activating the MutationObserver:

<script type="text/javascript" src="/path/to/kss.min.js"></script>
<script type="text/javascript">
    kss.useObserver = true;
</script>

Using the MutationObserver has the advantage that KSS is notified about all DOM manipulations even if modified by third-party scripts. MutationObservers are available from IE11. There exists a polyfill for IE9-10.

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 charset="utf-8">
    <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;
}

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

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

body:error {
    kss-action-client: alert;
    message: errorAttr("message");
}

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

<?php

require 'kss.php';

$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
  • Make the Drag-n-Drop plugin supporting files
Share it Facebook Twitter Email AddThis