This document discusses Kinetic Style Sheets (KSS), an Ajax framework that uses kinetic stylesheets for event binding and DOM manipulation on the client-side while keeping business logic on the server-side. It outlines the goals of ensuring accessibility and using minimal JavaScript. It describes the design of using kinetic stylesheets, a generic client-side engine for handling events and HTML snippets, and a simple server-side API. It also covers development and testing patterns for KSS.

1. KSS : Kinetic Style Sheets
Ajax with Plone 3
KSS development patterns
Godefroid Chapelle - BubbleNet
Naples, October 2007

2. Overview
Goals
●
Design
●
Development patterns
●
Tests patterns
●

3. Goals
Business logic should be computed on the
●
server.
Good integration with current development
●
process.
Ensure we keep accessibility.
●
As few JS as possible.
●
Business logic should be computed on the
●
server.

4. Design
Kinetic stylesheets
●
event binding
Generic client-side engine
●
same as HTML or CSS
HTML snippets manipulation
Simple server-side API
●
DOM on the server
commands
Plugins
●
avoid dependency on JS librarys

5. Development patterns
HTML only first
●
for accessibility / cross browser
Client-side
●
Server-side
●

6. FireKiss
Demo
●
http://kssproject.org/downloads/firekiss.xpi
●

7. Development patterns
HTML only first
●
accessibility
Client-side
●
bind events
–
CSS 3 selectors
get data from HTML
–
value providers

8. Development patterns
Server-side
KSS views
–
Z3 browser views
inherit from kss.core.KSSView
Command sets
–
queried by name (core, zope, plone)
KSS events
–
Z3 subscribers
components

9. Tests patterns
Do not use Selenium
●
unless you create JS plugin
Check commands in KSS response
●
kss.core.tests.base.KSSViewTestCaseMixin
Check HTML elements
●
in manipulated page
selected for events
–
selected for targets
–

10. Thanks
More info
●
http://kssproject.org
Join the sprint with Balazs and Jeroen
●