Post on 12-Sep-2014
description
transcript
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/listeners – Extend Base
– listeners
– Initializer/destructor
– Extensions/plugins
– http://docs.kissyui.com/docs/html/tutorials/kissy/component/rich-base/index.html
RichBase components
• Examples – dd
• Draggable/DraggableDelegate
• Droppable/DroppableDelegate
• dd/plugin/constrain
• dd/plugin/proxy
• dd/plugin/scroll
– resizable • Resizable
• resizable/plugin/proxy
• UI
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
render
• Render a ui control (div element)
– Extend RichBase
– Template render
• contentTpl/childrenElSelectors
– Decorate render
• HTML_PARSER
Container/ContainerRender
• List of control (manage children)
– Render children
– Add/remove child
– Events
• beforeAddChild/beforeRemoveChild
• afterAddChild/afterRemoveChild
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
– scroll-view/date-picker TODO
– Bui
• http://bui.alibaba-inc.com/start/index.php