1. KISSY Component System
yiminghe@gmail.com
2013-07

2. overview
Infrastructure

3. oop
• Class
– KISSY.extend
• superclass

4. Base
• Attribute management/change event
– ATTRS
• getter
• setter
• valueFn
• Value
– get/set
– before/afterXChange

5. Base
• ATTRS
– getter
• {
xy: {
getter: function() {
return [ this.get(‘x’), this.get(‘y’) ]
}
}
}

6. Base
• ATTRS
– setter
• {
number: {
setter: function(n){
return parseInt(n);
}
}
}

7. Base
• ATTRS
– value
• {
number: {
value: 2
}
}

8. Base
• ATTRS
– valueFn
• {
number: {
valueFn: function(){
return this.get(n)*2;
}
}
}

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. RichBase components
• Examples
– dd
• Draggable/DraggableDelegate
• Droppable/DroppableDelegate
• dd/plugin/constrain
• dd/plugin/proxy
• dd/plugin/scroll
– resizable
• Resizable
• resizable/plugin/proxy

11. • UI

13. 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

14. render
• Render a ui control (div element)
– Extend RichBase
– Template render
• contentTpl/childrenElSelectors
– Decorate render
• HTML_PARSER

15. Container/ContainerRender
• List of control (manage children)
– Render children
– Add/remove child
– Events
• beforeAddChild/beforeRemoveChild
• afterAddChild/afterRemoveChild

16. Custom Control
MyControl

17. Custom Control
• http://docs.kissyui.com/kissy/src/component/
demo/my-control.html

18. Control.js
• Bind Dom event
• Setup attribute
• Attribute logic
• Setup xrender/xclass

19. Render.js
• Setup childrenSelectors
• Setup content template
• Setup HTML_PARSER
• Sync ui and attribute

20. List.js
• xclass
• focus management

21. 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

22. related
• Others
– http://www.slideshare.net/yiminghe/