flex components slides

Flex Component Development: 

Flex Component Development

Basic Lifecycle: 

Basic Lifecycle Constructor parent.addChild() createChildren() Invalidation and Validation commitProperties() measure() updateDisplayList() parent.removeChild() Garbage Collection

Constructor: 

Constructor Add event listeners. Override properties. Nothing else.

createChildren(): 

createChildren() Called only once. Instantiate children that never change. May override children from superclasses.

createChildren() Example: 

createChildren() Example override protected function createChildren():void { if(!this.subComponent) { this.subComponent = new MyCustomComponent(); this.addChild(this.subComponent); } super.createChildren(); if(!this.textField) { this.textField = new TextField(); this.addChild(this.textField); } }

Invalidation and Validation: 

Invalidation and Validation Properties invalidateProperties() commitProperties() Dimensions invalidateSize() measure() Display invalidateDisplayList() updateDisplayList()

Invalidation Example: 

Invalidation Example private var _someParam:Number = 0; private var _someParamChanged:Boolean = false; public function get someParam():Number { return this._someParam; } public function set someParam(value:Number):void { this._someParam = value; this._someParamChanged = true; this.invalidateProperties(); }

Validation Example: 

Validation Example override protected function commitProperties():void { super.commitProperties(); if(this._someParamChanged) { // do something this._someParamChanged = false; } }

Component Measurement: 

Component Measurement measure() measuredWidth setActualSize() getExplicitOrMeasuredWidth() updateDisplayList() unscaledWidth

Metadata: 

Metadata Events [Event(name=“itemRollOver”, type=“com.yahoo.astra.fl.events.TabBarEvent”)] Styles [Style(name=“contentPadding”, type=“Number”)] Please note: Both types are required for use in MXML.

Default Styles (Required CSS File): 

Default Styles (Required CSS File) customlist.css: MyCustomList { paddingLeft: 10 paddingRight: 10; paddingTop: 5; paddingBottom: 5; } MyCustomListItemRenderer { backgroundColor: #ffffff; }

Default Styles (Static Initializer): 

Default Styles (Static Initializer) private static function initializeStyles():void { var selector:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“MyCustomList"); if(!selector) { selector = new CSSStyleDeclaration(); } selector.defaultFactory = function():void { this.paddingLeft = 10; } StyleManager.setStyleDeclaration("TreeMap", selector, false); } initializeStyles(); //call immediately

Yahoo! Flash Platform: 

Yahoo! Flash Platform Yahoo! Flash Developer Network: http://developer.yahoo.com/flash/ Mailing List: http://tech.groups.yahoo.com/groups/ydn-flash/ Blog: http://www.yswfblog.com/