1.

• KSS, Ajax with style

• Vitaliy Podoba, Developer

• Quintagroup, 2008

2. Table of contents

What is it about?

Why KSS?

KSS. Quick Overview

Short KSS Reference

Advantages

Drawbacks

3. What is it about?

KSS is an Ajax framework that allowsUI 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

4. The traditional model vs Ajax model 5. 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

6. No Javascript on the page

onclick="javascript:clicked();">

Link

7. Quick Overview

Power of Javascript, syntax of CSS

KSS Environment

KSS Architecture

Kinetic Style Sheets Syntax

Server Side

Tying it all together

8. 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

9. Architecture 10. 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;

}

11. KSS Syntax

a:click {

action-client: alert;

alert-message: "Clicked";

}

12. KSS Syntax

a:click {css selector : event

action-client: alert;client action 'alert'

alert-message: "Clicked";parameter for 'alert'

}

13. KSS Syntax

a:click {

evt-click-preventdefault: true;parameter for event

action-client: alert;

alert-message: "Clicked";

}

14. KSS Syntax

a:click {

evt-click-preventdefault: true;

action-client: alert;

alert-message: "Clicked";

action-server: add;call server action

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

}

15. Server Side

kss.core

plone.app.kss

16. Server Side : Template

Update content

• I need to be updated!

17. Server Side: KSS

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server:response ;

}

18. 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', 'We did it!')

# render the commands

return renderKSSCommands()

19. Server Side : Response

We did it!

20. 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',

'We did it!')

demoview.py

21. Server Side: Browser View

22. Server Side: KSS Action

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server:response ;

}

23. Server Side: KSS Action

a.replaceHTML:click {

evt-click-preventdefault: True;

action-server:response ;

action-error: alert;

alert-message: "Error on server";

}

24. 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

25. Short KSS Reference

Events

Actions

Parameter Providers

Command Sets

26. Basic Events

click

dblclick

load

focus

blur

27. Mouse Events

mousedown

mouseup

mouseover

mouseout

28. Form Events

change

select

submit

29. Automatic Events

timeout evt-timeout-delay evt-timeout-repeat

30. Changing HTML Actions

replaceInnerHTML

insertHTMLAfter

deleteNode

31. Changing Attributes Actions

setAttribute

setKssAttribute

32. Form Actions

focus

33. Debugging Actions

error

log

alert

34. Parameter Providers

formVar(formname, varname)

currentFormVar(varname)

nodeAttr(attrname)

nodeContent()

35. Command Sets

core

zope

plone

plone-legacy

effects

dad...

36. Advantages

See 'Why KSS?' section

Work can be easily divided betweendifferent specialists

37. Drawbacks

Writing javascript plugins

Too many rules can freeze page loading

38. 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