Introduction to KSS
Upcoming SlideShare
Loading in...5
×
 

Introduction to KSS

on

  • 4,630 views

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

Statistics

Views

Total Views
4,630
Views on SlideShare
4,604
Embed Views
26

Actions

Likes
1
Downloads
33
Comments
0

4 Embeds 26

http://plug.org.ua 11
http://www.plug.org.ua 11
http://www.slideshare.net 3
http://talk.quintagroup.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to KSS Introduction to KSS Presentation Transcript

      • 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?
      • 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
    • No Javascript on the page
      • <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
    • 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
    • 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 Syntax
      • 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'
      • }
    • KSS Syntax
      • 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'
      • }
    • Server Side
      • 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>
    • Server Side: KSS
      • 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()
    • 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>
    • 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
    • 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; />
    • Server Side: KSS Action
      • 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;;
      • }
    • 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
    • Short KSS Reference
      • Events
      • Actions
      • Parameter Providers
      • Command Sets
    • Basic Events
      • click
      • dblclick
      • load
      • focus
      • blur
    • Mouse Events
      • mousedown
      • mouseup
      • mouseover
      • mouseout
    • Form Events
      • change
      • select
      • submit
    • Automatic Events
      • timeout evt-timeout-delay evt-timeout-repeat
    • Changing HTML Actions
      • replaceInnerHTML
      • insertHTMLAfter
      • deleteNode
    • Changing Attributes Actions
      • setAttribute
      • setKssAttribute
    • Form Actions
      • focus
    • Debugging Actions
      • error
      • log
      • alert
    • Parameter Providers
      • formVar(formname, varname)
      • currentFormVar(varname)
      • nodeAttr(attrname)
      • nodeContent()
    • Command Sets
      • core
      • zope
      • plone
      • plone-legacy
      • effects
      • dad...
    • Advantages
      • See 'Why KSS?' section
      • Work can be easily divided between different specialists
    • Drawbacks
      • 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