0
<ul><li>KSS, Ajax with style </li></ul><ul><ul><li>Vitaliy Podoba, Developer </li></ul></ul><ul><ul><li>©  Quintagroup, 20...
Table of contents <ul><li>What is it about? </li></ul><ul><li>Why KSS? </li></ul><ul><li>KSS. Quick Overview </li></ul><ul...
What is it about? <ul><li>KSS is an Ajax framework that allows  UI development without writing any Javascript </li></ul><u...
The traditional model vs Ajax model
Why KSS? <ul><li>Preserve from writing Javascript </li></ul><ul><li>Overcome browser incompatibilities </li></ul><ul><li>A...
No Javascript on the page <ul><li><a href=&quot;#&quot; </li></ul><ul><li>onclick=&quot;javascript:clicked();&quot;> </li>...
Quick Overview <ul><li>Power of Javascript, syntax of CSS </li></ul><ul><li>KSS Environment </li></ul><ul><li>KSS Architec...
KSS Environment <ul><li>Browser compatibility   Firefox   Internet Explorer   Opera   Konqueror   Safari   Mozilla </li></...
Architecture
KSS Syntax <ul><li>#kss-spinner:spinneron { </li></ul><ul><li>action-client: setStyle; </li></ul><ul><li>setStyle-name: di...
KSS Syntax <ul><li>a:click { </li></ul><ul><li>action-client: alert; </li></ul><ul><li>alert-message: &quot;Clicked&quot;;...
KSS Syntax <ul><li>a:click {  css selector : event </li></ul><ul><li>action-client: alert;  client action 'alert' </li></u...
KSS Syntax <ul><li>a:click { </li></ul><ul><li>evt-click-preventdefault: true;  parameter for event </li></ul><ul><li>acti...
KSS Syntax <ul><li>a:click { </li></ul><ul><li>evt-click-preventdefault: true; </li></ul><ul><li>action-client: alert; </l...
Server Side <ul><li>kss.core </li></ul><ul><li>plone.app.kss </li></ul>
Server Side : Template <ul><li><a href=&quot;some/url&quot; class=&quot;replaceHTML&quot;>Update content</a> </li></ul><ul...
Server Side: KSS <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>action-...
Server Side : Script <ul><li># response.py script </li></ul><ul><li># import Through-The-Web(TTW) API </li></ul><ul><li>fr...
Server Side : Response <ul><li><?xml version=&quot;1.0&quot; ?> </li></ul><ul><li><kukit xmlns=&quot;http://www.kukit.org/...
Server Side: Browser View <ul><li>from kss.core import KSSView, kssaction </li></ul><ul><li>class DemoView(KSSView): @kssa...
Server Side: Browser View <ul><li><browser:page  for=&quot;plone.app.kss.interfaces.IPortalObject&quot;  class=&quot;.demo...
Server Side: KSS Action <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>...
Server Side: KSS Action <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>...
Tying it all together <ul><li>Write kss source file </li></ul><ul><li>Register kss source file with portal_kss </li></ul><...
Short KSS Reference <ul><li>Events </li></ul><ul><li>Actions </li></ul><ul><li>Parameter Providers </li></ul><ul><li>Comma...
Basic Events <ul><li>click </li></ul><ul><li>dblclick </li></ul><ul><li>load </li></ul><ul><li>focus </li></ul><ul><li>blu...
Mouse Events <ul><li>mousedown </li></ul><ul><li>mouseup </li></ul><ul><li>mouseover </li></ul><ul><li>mouseout </li></ul>
Form Events <ul><li>change </li></ul><ul><li>select </li></ul><ul><li>submit </li></ul>
Automatic Events <ul><li>timeout   evt-timeout-delay   evt-timeout-repeat </li></ul>
Changing HTML Actions <ul><li>replaceInnerHTML </li></ul><ul><li>insertHTMLAfter </li></ul><ul><li>deleteNode </li></ul>
Changing Attributes Actions <ul><li>setAttribute </li></ul><ul><li>setKssAttribute </li></ul>
Form Actions <ul><li>focus </li></ul>
Debugging Actions <ul><li>error </li></ul><ul><li>log </li></ul><ul><li>alert </li></ul>
Parameter Providers <ul><li>formVar(formname, varname) </li></ul><ul><li>currentFormVar(varname) </li></ul><ul><li>nodeAtt...
Command Sets <ul><li>core </li></ul><ul><li>zope </li></ul><ul><li>plone </li></ul><ul><li>plone-legacy </li></ul><ul><li>...
Advantages <ul><li>See 'Why KSS?' section </li></ul><ul><li>Work can be easily divided between    different specialists </...
Drawbacks <ul><li>Writing javascript plugins </li></ul><ul><li>Too many rules can freeze page loading </li></ul>
Links <ul><li>KSS Site   http://kssproject.org </li></ul><ul><li>AJAX   http://www.adaptivepath.com/publications/essays/ar...
Upcoming SlideShare
Loading in...5
×

Introduction to KSS

2,881

Published on

What is it about? Why KSS? KSS: Quick Overview, Short KSS Reference, Advantages, Drawbacks

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,881
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to KSS"

  1. 1. <ul><li>KSS, Ajax with style </li></ul><ul><ul><li>Vitaliy Podoba, Developer </li></ul></ul><ul><ul><li>© Quintagroup, 2008 </li></ul></ul>
  2. 2. Table of contents <ul><li>What is it about? </li></ul><ul><li>Why KSS? </li></ul><ul><li>KSS. Quick Overview </li></ul><ul><li>Short KSS Reference </li></ul><ul><li>Advantages </li></ul><ul><li>Drawbacks </li></ul>
  3. 3. What is it about? <ul><li>KSS is an Ajax framework that allows UI development without writing any Javascript </li></ul><ul><li>AJAX? http://www.adaptivepath.com/ideas/essays/archives/000385.php </li></ul><ul><li>First Ajaxes: Google Suggest Yahoo News </li></ul><ul><li>KSS – Kinetic Style Sheets </li></ul>
  4. 4. The traditional model vs Ajax model
  5. 5. Why KSS? <ul><li>Preserve from writing Javascript </li></ul><ul><li>Overcome browser incompatibilities </li></ul><ul><li>Avoid code duplication </li></ul><ul><li>Thin browser client </li></ul><ul><li>No Javascript on the page </li></ul><ul><li>Provide server side for Zope and Plone </li></ul>
  6. 6. No Javascript on the page <ul><li><a href=&quot;#&quot; </li></ul><ul><li>onclick=&quot;javascript:clicked();&quot;> </li></ul><ul><li>Link</a> </li></ul>
  7. 7. Quick Overview <ul><li>Power of Javascript, syntax of CSS </li></ul><ul><li>KSS Environment </li></ul><ul><li>KSS Architecture </li></ul><ul><li>Kinetic Style Sheets Syntax </li></ul><ul><li>Server Side </li></ul><ul><li>Tying it all together </li></ul>
  8. 8. KSS Environment <ul><li>Browser compatibility Firefox Internet Explorer Opera Konqueror Safari Mozilla </li></ul><ul><li>Supported server platforms Zope 2.10, 2.11 Zope 3 Grok Plone 3.0 Pylons Django </li></ul>
  9. 9. Architecture
  10. 10. KSS Syntax <ul><li>#kss-spinner:spinneron { </li></ul><ul><li>action-client: setStyle; </li></ul><ul><li>setStyle-name: display; </li></ul><ul><li>setStyle-value: block; </li></ul><ul><li>} </li></ul><ul><li>#kss-spinner:spinneroff { </li></ul><ul><li>action-client: setStyle; </li></ul><ul><li>setStyle-name: display; </li></ul><ul><li>setStyle-value: none; </li></ul><ul><li>} </li></ul>
  11. 11. KSS Syntax <ul><li>a:click { </li></ul><ul><li>action-client: alert; </li></ul><ul><li>alert-message: &quot;Clicked&quot;; </li></ul><ul><li>} </li></ul>
  12. 12. KSS Syntax <ul><li>a:click { css selector : event </li></ul><ul><li>action-client: alert; client action 'alert' </li></ul><ul><li>alert-message: &quot;Clicked&quot;; parameter for 'alert' </li></ul><ul><li>} </li></ul>
  13. 13. KSS Syntax <ul><li>a:click { </li></ul><ul><li>evt-click-preventdefault: true; parameter for event </li></ul><ul><li>action-client: alert; </li></ul><ul><li>alert-message: &quot;Clicked&quot;; </li></ul><ul><li>} </li></ul>
  14. 14. KSS Syntax <ul><li>a:click { </li></ul><ul><li>evt-click-preventdefault: true; </li></ul><ul><li>action-client: alert; </li></ul><ul><li>alert-message: &quot;Clicked&quot;; </li></ul><ul><li>action-server: add; call server action </li></ul><ul><li>add-url: nodeAttr('href'); parameter for 'add' </li></ul><ul><li>} </li></ul>
  15. 15. Server Side <ul><li>kss.core </li></ul><ul><li>plone.app.kss </li></ul>
  16. 16. Server Side : Template <ul><li><a href=&quot;some/url&quot; class=&quot;replaceHTML&quot;>Update content</a> </li></ul><ul><li><div id=&quot;kss-container&quot;> </li></ul><ul><li>I need to be updated! </li></ul><ul><li></div> </li></ul>
  17. 17. Server Side: KSS <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>action-server: response ; </li></ul><ul><li>} </li></ul>
  18. 18. Server Side : Script <ul><li># response.py script </li></ul><ul><li># import Through-The-Web(TTW) API </li></ul><ul><li>from kss.core.ttwapi import startKSSCommands, getKSSCommandSet, renderKSSCommands </li></ul><ul><li># start a view for commands </li></ul><ul><li>startKSSCommands(context, context.REQUEST) </li></ul><ul><li># add a command </li></ul><ul><li>core = getKSSCommandSet('core') </li></ul><ul><li>core.replaceInnerHTML('#kss-container', '<h1>We did it!</h1>') </li></ul><ul><li># render the commands </li></ul><ul><li>return renderKSSCommands() </li></ul>
  19. 19. Server Side : Response <ul><li><?xml version=&quot;1.0&quot; ?> </li></ul><ul><li><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;> </li></ul><ul><li><commands> </li></ul><ul><li><command selector=&quot;#kss-container&quot; name=&quot;replaceInnerHTML&quot; selectorType=&quot;&quot;> </li></ul><ul><li><param name=&quot;html&quot;><h1>We did it!</h1></param> </li></ul><ul><li></command> </li></ul><ul><li></commands> </li></ul><ul><li></kukit> </li></ul>
  20. 20. Server Side: Browser View <ul><li>from kss.core import KSSView, kssaction </li></ul><ul><li>class DemoView(KSSView): @kssaction def response(self): core = self.getCommandSet('core') core.replaceInnerHTML('#kss-container', </li></ul><ul><li>'<h1>We did it!</h1>') </li></ul><ul><li>demoview.py </li></ul>
  21. 21. Server Side: Browser View <ul><li><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; /> </li></ul>
  22. 22. Server Side: KSS Action <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>action-server: response ; </li></ul><ul><li>} </li></ul>
  23. 23. Server Side: KSS Action <ul><li>a.replaceHTML:click { </li></ul><ul><li>evt-click-preventdefault: True; </li></ul><ul><li>action-server: response ; </li></ul><ul><li>action-error: alert; </li></ul><ul><li>alert-message: &quot;Error on server&quot;; </li></ul><ul><li>} </li></ul>
  24. 24. Tying it all together <ul><li>Write kss source file </li></ul><ul><li>Register kss source file with portal_kss </li></ul><ul><li>Write server side </li></ul><ul><li>Extend kss with your own plugins: client actions command actions parameter providers event types selector types </li></ul>
  25. 25. Short KSS Reference <ul><li>Events </li></ul><ul><li>Actions </li></ul><ul><li>Parameter Providers </li></ul><ul><li>Command Sets </li></ul>
  26. 26. Basic Events <ul><li>click </li></ul><ul><li>dblclick </li></ul><ul><li>load </li></ul><ul><li>focus </li></ul><ul><li>blur </li></ul>
  27. 27. Mouse Events <ul><li>mousedown </li></ul><ul><li>mouseup </li></ul><ul><li>mouseover </li></ul><ul><li>mouseout </li></ul>
  28. 28. Form Events <ul><li>change </li></ul><ul><li>select </li></ul><ul><li>submit </li></ul>
  29. 29. Automatic Events <ul><li>timeout evt-timeout-delay evt-timeout-repeat </li></ul>
  30. 30. Changing HTML Actions <ul><li>replaceInnerHTML </li></ul><ul><li>insertHTMLAfter </li></ul><ul><li>deleteNode </li></ul>
  31. 31. Changing Attributes Actions <ul><li>setAttribute </li></ul><ul><li>setKssAttribute </li></ul>
  32. 32. Form Actions <ul><li>focus </li></ul>
  33. 33. Debugging Actions <ul><li>error </li></ul><ul><li>log </li></ul><ul><li>alert </li></ul>
  34. 34. Parameter Providers <ul><li>formVar(formname, varname) </li></ul><ul><li>currentFormVar(varname) </li></ul><ul><li>nodeAttr(attrname) </li></ul><ul><li>nodeContent() </li></ul>
  35. 35. Command Sets <ul><li>core </li></ul><ul><li>zope </li></ul><ul><li>plone </li></ul><ul><li>plone-legacy </li></ul><ul><li>effects </li></ul><ul><li>dad... </li></ul>
  36. 36. Advantages <ul><li>See 'Why KSS?' section </li></ul><ul><li>Work can be easily divided between different specialists </li></ul>
  37. 37. Drawbacks <ul><li>Writing javascript plugins </li></ul><ul><li>Too many rules can freeze page loading </li></ul>
  38. 38. Links <ul><li>KSS Site http://kssproject.org </li></ul><ul><li>AJAX http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul><ul><li>kss.core repository http://codespeak.net/svn/kukit/kss.core/trunk </li></ul><ul><li>plone.app.kss repository https://svn.plone.org/svn/plone/plone.app.kss/trunk </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×