Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
KISSY Component System
yiminghe@gmail.com
2013-07
overview
Infrastructure
oop
• Class
– KISSY.extend
• superclass
Base
• Attribute management/change event
– ATTRS
• getter
• setter
• valueFn
• Value
– get/set
– before/afterXChange
Base
• ATTRS
– getter
• {
xy: {
getter: function() {
return [ this.get(‘x’), this.get(‘y’) ]
}
}
}
Base
• ATTRS
– setter
• {
number: {
setter: function(n){
return parseInt(n);
}
}
}
Base
• ATTRS
– value
• {
number: {
value: 2
}
}
Base
• ATTRS
– valueFn
• {
number: {
valueFn: function(){
return this.get(n)*2;
}
}
}
RichBase
• Extension/plugin/onSet/liste
ners
– Extend Base
– listeners
– Initializer/destructor
– Extensions/plugins
– htt...
RichBase components
• Examples
– dd
• Draggable/DraggableDelegate
• Droppable/DroppableDelegate
• dd/plugin/constrain
• dd...
• UI
Control
• A ui control
– Extend RichBase
– Control
• Life cycle
– createDom
– renderUI
– bindUI
– syncUI
• Handle dom even...
render
• Render a ui control (div element)
– Extend RichBase
– Template render
• contentTpl/childrenElSelectors
– Decorate...
Container/ContainerRender
• List of control (manage children)
– Render children
– Add/remove child
– Events
• beforeAddChi...
Custom Control
MyControl
Custom Control
• http://docs.kissyui.com/kissy/src/component/
demo/my-control.html
Control.js
• Bind Dom event
• Setup attribute
• Attribute logic
• Setup xrender/xclass
Render.js
• Setup childrenSelectors
• Setup content template
• Setup HTML_PARSER
• Sync ui and attribute
List.js
• xclass
• focus management
UI components
• Example:
– Button/combobox/editor/filter-
menu/menu/menubutton/separator/split-
button/tabs/tree/toolbar
–...
related
• Others
– http://www.slideshare.net/yiminghe/
Kissy component system
Upcoming SlideShare
Loading in …5
×

Kissy component system

758 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Kissy component system

  1. 1. KISSY Component System yiminghe@gmail.com 2013-07
  2. 2. overview Infrastructure
  3. 3. oop • Class – KISSY.extend • superclass
  4. 4. Base • Attribute management/change event – ATTRS • getter • setter • valueFn • Value – get/set – before/afterXChange
  5. 5. Base • ATTRS – getter • { xy: { getter: function() { return [ this.get(‘x’), this.get(‘y’) ] } } }
  6. 6. Base • ATTRS – setter • { number: { setter: function(n){ return parseInt(n); } } }
  7. 7. Base • ATTRS – value • { number: { value: 2 } }
  8. 8. Base • ATTRS – valueFn • { number: { valueFn: function(){ return this.get(n)*2; } } }
  9. 9. RichBase • Extension/plugin/onSet/liste ners – Extend Base – listeners – Initializer/destructor – Extensions/plugins – http://docs.kissyui.com/docs/ html/tutorials/kissy/compone nt/rich-base/index.html
  10. 10. RichBase components • Examples – dd • Draggable/DraggableDelegate • Droppable/DroppableDelegate • dd/plugin/constrain • dd/plugin/proxy • dd/plugin/scroll – resizable • Resizable • resizable/plugin/proxy
  11. 11. • UI
  12. 12. Control • A ui control – Extend RichBase – Control • Life cycle – createDom – renderUI – bindUI – syncUI • Handle dom event • Attribute setup/logic • xclass/xrender • events – afterRenderUI/show/hide
  13. 13. render • Render a ui control (div element) – Extend RichBase – Template render • contentTpl/childrenElSelectors – Decorate render • HTML_PARSER
  14. 14. Container/ContainerRender • List of control (manage children) – Render children – Add/remove child – Events • beforeAddChild/beforeRemoveChild • afterAddChild/afterRemoveChild
  15. 15. Custom Control MyControl
  16. 16. Custom Control • http://docs.kissyui.com/kissy/src/component/ demo/my-control.html
  17. 17. Control.js • Bind Dom event • Setup attribute • Attribute logic • Setup xrender/xclass
  18. 18. Render.js • Setup childrenSelectors • Setup content template • Setup HTML_PARSER • Sync ui and attribute
  19. 19. List.js • xclass • focus management
  20. 20. UI components • Example: – Button/combobox/editor/filter- menu/menu/menubutton/separator/split- button/tabs/tree/toolbar – scroll-view/date-picker TODO – Bui • http://bui.alibaba-inc.com/start/index.php
  21. 21. related • Others – http://www.slideshare.net/yiminghe/

×