KSS, Ajax with style Vitaliy Podoba, Developer © Quintagroup, 2008

KSS, Ajax with style

Vitaliy Podoba, Developer

© Quintagroup, 2008

Table of contents What is it about? Why KSS? KSS. Quick Overview Short KSS Reference Advantages Drawbacks

What is it about?

Why KSS?

KSS. Quick Overview

Short KSS Reference

Advantages

Drawbacks

What is it about? KSS is an Ajax framework that allows UI development without writing any Javascript AJAX? http://www.adaptivepath.com/ideas/essays/archives/000385.php First Ajaxes: Google Suggest Yahoo News KSS – Kinetic Style Sheets

KSS is an Ajax framework that allows UI development without writing any Javascript

AJAX? http://www.adaptivepath.com/ideas/essays/archives/000385.php

First Ajaxes: Google Suggest Yahoo News

KSS – Kinetic Style Sheets

The traditional model vs Ajax model

Why KSS? Preserve from writing Javascript Overcome browser incompatibilities Avoid code duplication Thin browser client No Javascript on the page Provide server side for Zope and Plone

Preserve from writing Javascript

Overcome browser incompatibilities

Avoid code duplication

Thin browser client

No Javascript on the page

Provide server side for Zope and Plone

No Javascript on the page <a href=&quot;#&quot; onclick=&quot;javascript:clicked();&quot;> Link</a>

<a href=&quot;#&quot;

onclick=&quot;javascript:clicked();&quot;>

Link</a>

Quick Overview Power of Javascript, syntax of CSS KSS Environment KSS Architecture Kinetic Style Sheets Syntax Server Side Tying it all together

Power of Javascript, syntax of CSS

KSS Environment

KSS Architecture

Kinetic Style Sheets Syntax

Server Side

Tying it all together

KSS Environment Browser compatibility Firefox Internet Explorer Opera Konqueror Safari Mozilla Supported server platforms Zope 2.10, 2.11 Zope 3 Grok Plone 3.0 Pylons Django

Browser compatibility Firefox Internet Explorer Opera Konqueror Safari Mozilla

Supported server platforms Zope 2.10, 2.11 Zope 3 Grok Plone 3.0 Pylons Django

Architecture

KSS Syntax #kss-spinner:spinneron { action-client: setStyle; setStyle-name: display; setStyle-value: block; } #kss-spinner:spinneroff { action-client: setStyle; setStyle-name: display; setStyle-value: none; }

#kss-spinner:spinneron {

action-client: setStyle;

setStyle-name: display;

setStyle-value: block;

}

#kss-spinner:spinneroff {

action-client: setStyle;

setStyle-name: display;

setStyle-value: none;

}

KSS Syntax a:click { action-client: alert; alert-message: &quot;Clicked&quot;; }

a:click {

action-client: alert;

alert-message: &quot;Clicked&quot;;

}

KSS Syntax a:click { css selector : event action-client: alert; client action 'alert' alert-message: &quot;Clicked&quot;; parameter for 'alert' }

a:click { css selector : event

action-client: alert; client action 'alert'

alert-message: &quot;Clicked&quot;; parameter for 'alert'

}

KSS Syntax a:click { evt-click-preventdefault: true; parameter for event action-client: alert; alert-message: &quot;Clicked&quot;; }

a:click {

evt-click-preventdefault: true; parameter for event

action-client: alert;

alert-message: &quot;Clicked&quot;;

}

KSS Syntax a:click { evt-click-preventdefault: true; action-client: alert; alert-message: &quot;Clicked&quot;; action-server: add; call server action add-url: nodeAttr('href'); parameter for 'add' }

a:click {

evt-click-preventdefault: true;

action-client: alert;

alert-message: &quot;Clicked&quot;;

action-server: add; call server action

add-url: nodeAttr('href'); parameter for 'add'

}

Server Side kss.core plone.app.kss

kss.core

plone.app.kss

Server Side : Template <a href=&quot;some/url&quot; class=&quot;replaceHTML&quot;>Update content</a> <div id=&quot;kss-container&quot;> I need to be updated! </div>

<a href=&quot;some/url&quot; class=&quot;replaceHTML&quot;>Update content</a>

<div id=&quot;kss-container&quot;>

I need to be updated!

</div>

Server Side: KSS a.replaceHTML:click { evt-click-preventdefault: True; action-server: response ; }

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server: response ;

}

Server Side : Script # response.py script # import Through-The-Web(TTW) API from kss.core.ttwapi import startKSSCommands, getKSSCommandSet, renderKSSCommands # start a view for commands startKSSCommands(context, context.REQUEST) # add a command core = getKSSCommandSet('core') core.replaceInnerHTML('#kss-container', '<h1>We did it!</h1>') # render the commands return renderKSSCommands()

# response.py script

# import Through-The-Web(TTW) API

from kss.core.ttwapi import startKSSCommands, getKSSCommandSet, renderKSSCommands

# start a view for commands

startKSSCommands(context, context.REQUEST)

# add a command

core = getKSSCommandSet('core')

core.replaceInnerHTML('#kss-container', '<h1>We did it!</h1>')

# render the commands

return renderKSSCommands()

Server Side : Response <?xml version=&quot;1.0&quot; ?> <kukit xmlns=&quot;http://www.kukit.org/commands/1.1&quot; xmlns:tal=&quot;http://xml.zope.org/namespaces/tal&quot; xmlns:metal=&quot;http://xml.zope.org/namespaces/metal&quot;> <commands> <command selector=&quot;#kss-container&quot; name=&quot;replaceInnerHTML&quot; selectorType=&quot;&quot;> <param name=&quot;html&quot;><h1>We did it!</h1></param> </command> </commands> </kukit>

<?xml version=&quot;1.0&quot; ?>

<kukit xmlns=&quot;http://www.kukit.org/commands/1.1&quot; xmlns:tal=&quot;http://xml.zope.org/namespaces/tal&quot; xmlns:metal=&quot;http://xml.zope.org/namespaces/metal&quot;>

<commands>

<command selector=&quot;#kss-container&quot; name=&quot;replaceInnerHTML&quot; selectorType=&quot;&quot;>

<param name=&quot;html&quot;><h1>We did it!</h1></param>

</command>

</commands>

</kukit>

Server Side: Browser View from kss.core import KSSView, kssaction class DemoView(KSSView): @kssaction def response(self): core = self.getCommandSet('core') core.replaceInnerHTML('#kss-container', '<h1>We did it!</h1>') demoview.py

from kss.core import KSSView, kssaction

class DemoView(KSSView): @kssaction def response(self): core = self.getCommandSet('core') core.replaceInnerHTML('#kss-container',

'<h1>We did it!</h1>')

demoview.py

Server Side: Browser View <browser:page for=&quot;plone.app.kss.interfaces.IPortalObject&quot; class=&quot;.demoview.DemoView&quot; attribute=&quot;response&quot; name=&quot;response&quot; permission=&quot;zope2.View&quot; />

<browser:page for=&quot;plone.app.kss.interfaces.IPortalObject&quot; class=&quot;.demoview.DemoView&quot; attribute=&quot;response&quot; name=&quot;response&quot; permission=&quot;zope2.View&quot; />

Server Side: KSS Action a.replaceHTML:click { evt-click-preventdefault: True; action-server: response ; }

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server: response ;

}

Server Side: KSS Action a.replaceHTML:click { evt-click-preventdefault: True; action-server: response ; action-error: alert; alert-message: &quot;Error on server&quot;; }

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server: response ;

action-error: alert;

alert-message: &quot;Error on server&quot;;

}

Tying it all together Write kss source file Register kss source file with portal_kss Write server side Extend kss with your own plugins: client actions command actions parameter providers event types selector types

Write kss source file

Register kss source file with portal_kss

Write server side

Extend kss with your own plugins: client actions command actions parameter providers event types selector types

Short KSS Reference Events Actions Parameter Providers Command Sets

Events

Actions

Parameter Providers

Command Sets

Basic Events click dblclick load focus blur

click

dblclick

load

focus

blur

Mouse Events mousedown mouseup mouseover mouseout

mousedown

mouseup

mouseover

mouseout

Form Events change select submit

change

select

submit

Automatic Events timeout evt-timeout-delay evt-timeout-repeat

timeout evt-timeout-delay evt-timeout-repeat

Changing HTML Actions replaceInnerHTML insertHTMLAfter deleteNode

replaceInnerHTML

insertHTMLAfter

deleteNode

Changing Attributes Actions setAttribute setKssAttribute

setAttribute

setKssAttribute

Form Actions focus

focus

Debugging Actions error log alert

error

log

alert

Parameter Providers formVar(formname, varname) currentFormVar(varname) nodeAttr(attrname) nodeContent()

formVar(formname, varname)

currentFormVar(varname)

nodeAttr(attrname)

nodeContent()

Command Sets core zope plone plone-legacy effects dad...

core

zope

plone

plone-legacy

effects

dad...

Advantages See 'Why KSS?' section Work can be easily divided between different specialists

See 'Why KSS?' section

Work can be easily divided between different specialists

Drawbacks Writing javascript plugins Too many rules can freeze page loading

Writing javascript plugins

Too many rules can freeze page loading

Links KSS Site http://kssproject.org AJAX http://www.adaptivepath.com/publications/essays/archives/000385.php kss.core repository http://codespeak.net/svn/kukit/kss.core/trunk plone.app.kss repository https://svn.plone.org/svn/plone/plone.app.kss/trunk

KSS Site http://kssproject.org

AJAX http://www.adaptivepath.com/publications/essays/archives/000385.php

kss.core repository http://codespeak.net/svn/kukit/kss.core/trunk

plone.app.kss repository https://svn.plone.org/svn/plone/plone.app.kss/trunk