kissy component system
Post on 12-Sep-2014
605 views
DESCRIPTION
TRANSCRIPT
![Page 2: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/2.jpg)
overview Infrastructure
![Page 3: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/3.jpg)
oop
• Class
– KISSY.extend
• superclass
![Page 4: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/4.jpg)
Base
• Attribute management/change event
– ATTRS
• getter
• setter
• valueFn
• Value
– get/set
– before/afterXChange
![Page 5: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/5.jpg)
Base
• ATTRS – getter
• {
xy: {
getter: function() {
return [ this.get(‘x’), this.get(‘y’) ]
}
}
}
![Page 6: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/6.jpg)
Base
• ATTRS
– setter
• {
number: {
setter: function(n){
return parseInt(n);
}
}
}
![Page 7: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/7.jpg)
Base
• ATTRS
– value
• {
number: {
value: 2
}
}
![Page 8: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/8.jpg)
Base
• ATTRS
– valueFn
• {
number: {
valueFn: function(){
return this.get(n)*2;
}
}
}
![Page 9: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/9.jpg)
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
![Page 10: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/10.jpg)
RichBase components
• Examples – dd
• Draggable/DraggableDelegate
• Droppable/DroppableDelegate
• dd/plugin/constrain
• dd/plugin/proxy
• dd/plugin/scroll
– resizable • Resizable
• resizable/plugin/proxy
![Page 11: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/11.jpg)
• UI
![Page 12: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/12.jpg)
![Page 13: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/13.jpg)
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
![Page 14: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/14.jpg)
render
• Render a ui control (div element)
– Extend RichBase
– Template render
• contentTpl/childrenElSelectors
– Decorate render
• HTML_PARSER
![Page 15: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/15.jpg)
Container/ContainerRender
• List of control (manage children)
– Render children
– Add/remove child
– Events
• beforeAddChild/beforeRemoveChild
• afterAddChild/afterRemoveChild
![Page 16: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/16.jpg)
Custom Control MyControl
![Page 17: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/17.jpg)
Custom Control
• http://docs.kissyui.com/kissy/src/component/demo/my-control.html
![Page 18: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/18.jpg)
Control.js
• Bind Dom event
• Setup attribute
• Attribute logic
• Setup xrender/xclass
![Page 19: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/19.jpg)
Render.js • Setup childrenSelectors
• Setup content template
• Setup HTML_PARSER
• Sync ui and attribute
![Page 20: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/20.jpg)
List.js
• xclass
• focus management
![Page 21: Kissy component system](https://reader034.vdocuments.us/reader034/viewer/2022050903/541306298d7f72084e8b4783/html5/thumbnails/21.jpg)
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