flex 自定义组件的编写
使用flex也很久了，也改过别人写的flex自定义组件，但是就是没有系统的研究下flex组件的编写步骤，和要注意的东西，在这里我参照一本书中的例子，好好的理解下，也为了巩固下自己对flex的理解！
1，重写一个组件系统依次调用Constructor（构造方法）-->createChildren()-->commitProperties()==>measure()==>updateDisplayList() ;
a,Constructor构造方法，初始化属性，默认值 在这个方法中使用最好。
b,createChildren() 创建子对象，在组件中添加子对象。是使用addChild方法添加子对象
c,commitProperties 用在处理属性值和更新。（多个属性值更新后统一处理入口和单值多次修改后处理入口）
d , measure()设置组件的默认大小（以便Flex布局管理器能正确知道该组件的大小，给其分配适当空间）
e,updateDisplayList()用来重绘组件，子对象布局逻辑等
2,添加自定义组件实际上就是将一个基本的组件的组合起来，这样的情况下就必须要重写createChildren() 和 updateDisplayList()方法
当自定义组件要对属性的变化作出反应的时候必须要重写commitProperties()方法（触发调用这个方法的是invalidateProperties）
当自定义的组件和基类组件大小不一致的情况下就要调用measure 保证正确的大小显示。（调用invalidateSize方法）
当组件需要调整子对象全局显示逻辑，重写updateDisplayList,调用invalidateDisplayList
commitProperties measure 和 updateDisplayList 都有自己的用处
在下面写个例子 一个button 和 TextArea 组合的自定义组件
package cn.tsoft{import flash.events.Event;import flash.text.TextLineMetrics;import mx.controls.Button;import mx.controls.TextArea;import mx.core.UIComponent;/** * 当子组件textArea中文件变化时，ModelText派发一个change事件 * 当ModelText的text属性被设置时，派发一个textChange事件 * 当改变Modeltext的textplacement属性后，会派发一个placementChanged事件 * **/[Event(name="change",type="flash.events.Event")][Event(name="textChanged",type="flash.events.Event")][Event(name="placementChanged",type="flash.events.Event")]public class ModelText extends UIComponent{public function ModelText(){super();}private var text_mc:TextArea;private var mode_mc:Button;private var bTextChanged:Boolean =false;private var _text:String="ModelText";public function set text(t:String):void{this._text =t;bTextChanged = true;invalidateProperties();dispatchEvent(new Event("textChanged"));}[Bindable(event="textChanged")]public function get text():String{return text_mc.text;}override protected function createChildren():void{super.createChildren();if(!text_mc){text_mc =new TextArea();text_mc.explicitWidth =80;text_mc.editable =false;text_mc.addEventListener("change",handleChangeEvent);addChild(text_mc);}if(!mode_mc){mode_mc = new Button();mode_mc.label ="mylabeljieji";mode_mc.addEventListener("click",handleClickEvent);addChild(mode_mc);}}//处理有子组件派发的时间private function handleChangeEvent(eventObj:Event):void{dispatchEvent(new Event("change"));}private function handleClickEvent(eventObj:Event):void{text_mc.editable = !text_mc.editable;}override protected function commitProperties():void{super.commitProperties();if(bTextChanged){bTextChanged =false;text_mc.text = _text;invalidateDisplayList();}}/** * 组建的默认宽度是文本宽度加上按钮的宽度 * 组件的默认高度由按钮的高度决定 */ override protected function measure():void{super.measure();var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth();var buttonHeight:Number =mode_mc.getExplicitOrMeasuredHeight();//组件默认的最小宽度和默认宽度为textArea控件的measureedWidth宽度与buttonWidth之和measuredWidth = measuredMinWidth =text_mc.measuredWidth+buttonWidth;//组件的默认高度 和最小高度问textArea 和Button 中measuredHeight中的最大值加上10个像素的边框 measuredHeight = measuredMinHeight = Math.max(text_mc.measuredHeight,buttonHeight)+10;}private var _textPlacement:String="left";public function set textPlacement(p:String):void{this._textPlacement = p;invalidateDisplayList();dispatchEvent(new Event("placementChanged"));}[Bindable(event="placementChanged")]public function get textPlacement():String{return _textPlacement;}/** * Button控件的尺寸是Button上的label文本尺寸加上10像素的边框区域 * textarea控件的尺寸是组件的剩余区域，TextArea的位置取决于textPlacement属性的设置 * **/override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{super.updateDisplayList(unscaledWidth,unscaledHeight);//为左右边框各减去1像素 ， 为左右边白各减3像素var usableWidth:Number=unscaledWidth -8;//为上下边框各减去1像素 ， 为上下边白各减3像素var usableHeight:Number = unscaledHeight -8;//根据按钮上的文本计算按钮的尺寸var lineMetrics:TextLineMetrics = measureText(mode_mc.label);//按钮文本尺寸加上10像素作为按钮的尺寸var buttonHeight:Number = lineMetrics.height+10;var buttonWidth:Number = lineMetrics.width+10;mode_mc.setActualSize(buttonWidth,buttonHeight);//计算文本的尺寸，允许按钮和TextArea文本之间有5个像素的间隙var textWidth:Number = usableWidth-buttonWidth-5;var textHeight:Number = usableHeight;text_mc.setActualSize(textWidth,textHeight);//根据textPlacement的属性确定控件的位置if(textPlacement == "left"){text_mc.move(4,4);mode_mc.move(4+textWidth+5,4);}else{mode_mc.move(4,4);text_mc.move(4+buttonWidth+5,4);}graphics.lineStyle(1,0xffff00,1.0);graphics.drawRect(0,0,unscaledWidth,unscaledHeight);}}}