Introduction to KSS

  • 2,802 views
Uploaded 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

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,802
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
33
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.
    • 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 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
  • 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
    • <a href=&quot;#&quot;
    • onclick=&quot;javascript:clicked();&quot;>
    • Link</a>
  • 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: &quot;Clicked&quot;;
    • }
  • 12. KSS Syntax
    • a:click { css selector : event
    • action-client: alert; client action 'alert'
    • alert-message: &quot;Clicked&quot;; parameter for 'alert'
    • }
  • 13. KSS Syntax
    • a:click {
    • evt-click-preventdefault: true; parameter for event
    • action-client: alert;
    • alert-message: &quot;Clicked&quot;;
    • }
  • 14. 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'
    • }
  • 15. Server Side
    • kss.core
    • plone.app.kss
  • 16. 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>
  • 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', '<h1>We did it!</h1>')
    • # render the commands
    • return renderKSSCommands()
  • 19. 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>
  • 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',
    • '<h1>We did it!</h1>')
    • demoview.py
  • 21. 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; />
  • 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: &quot;Error on server&quot;;
    • }
  • 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 between different 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