introduction to kss
DESCRIPTION
What is it about? Why KSS? KSS: Quick Overview, Short KSS Reference, Advantages, DrawbacksTRANSCRIPT
- 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