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/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

related

• Others

– http://www.slideshare.net/yiminghe/