Your SlideShare is downloading. ×
0
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Introduction to KSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to KSS

2,871

Published on

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. The traditional model vs Ajax model
  • 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. 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. 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. 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. Architecture
  • 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. 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. 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. 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. 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. Server Side <ul><li>kss.core </li></ul><ul><li>plone.app.kss </li></ul>
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Mouse Events <ul><li>mousedown </li></ul><ul><li>mouseup </li></ul><ul><li>mouseover </li></ul><ul><li>mouseout </li></ul>
  • 28. Form Events <ul><li>change </li></ul><ul><li>select </li></ul><ul><li>submit </li></ul>
  • 29. Automatic Events <ul><li>timeout evt-timeout-delay evt-timeout-repeat </li></ul>
  • 30. Changing HTML Actions <ul><li>replaceInnerHTML </li></ul><ul><li>insertHTMLAfter </li></ul><ul><li>deleteNode </li></ul>
  • 31. Changing Attributes Actions <ul><li>setAttribute </li></ul><ul><li>setKssAttribute </li></ul>
  • 32. Form Actions <ul><li>focus </li></ul>
  • 33. Debugging Actions <ul><li>error </li></ul><ul><li>log </li></ul><ul><li>alert </li></ul>
  • 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. 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. Advantages <ul><li>See 'Why KSS?' section </li></ul><ul><li>Work can be easily divided between different specialists </li></ul>
  • 37. Drawbacks <ul><li>Writing javascript plugins </li></ul><ul><li>Too many rules can freeze page loading </li></ul>
  • 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>

×