现在的位置: 首页 > 综合 > 正文

flex 自定义组件的编写

2013年10月18日 ⁄ 综合 ⁄ 共 5749字 ⁄ 字号 小 中 大 ⁄ 评论关闭

flex  自定义组件的编写

    博客分类：

  • flex
flex自定义组件as
使用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 组合的自定义组件

Java代码
复制代码
收藏代码
  1. package cn.tsoft 
  2. { 
  3.     import flash.events.Event; 
  4.     import flash.text.TextLineMetrics; 
  5.      
  6.     import mx.controls.Button; 
  7.     import mx.controls.TextArea; 
  8.     import mx.core.UIComponent; 
  9.      
  10.      
  11.      
  12.     /**
  13.      * 当子组件textArea中文件变化时，ModelText派发一个change事件
  14.      * 当ModelText的text属性被设置时，派发一个textChange事件
  15.      * 当改变Modeltext的textplacement属性后，会派发一个placementChanged事件
  16.      * **/ 
  17.     [Event(name="change",type="flash.events.Event")] 
  18.     [Event(name="textChanged",type="flash.events.Event")] 
  19.     [Event(name="placementChanged",type="flash.events.Event")] 
  20.      
  21.     public class ModelText
    extends UIComponent 
  22.     { 
  23.         public function ModelText() 
  24.         { 
  25.             super(); 
  26.         } 
  27.          
  28.         private var text_mc:TextArea; 
  29.         private var mode_mc:Button; 
  30.          
  31.          
  32.         private var bTextChanged:Boolean =false; 
  33.          
  34.         private var _text:String="ModelText"; 
  35.          
  36.          
  37.         public function set text(t:String):void{ 
  38.             this._text =t; 
  39.             bTextChanged = true; 
  40.             invalidateProperties(); 
  41.             dispatchEvent(new Event("textChanged")); 
  42.         } 
  43.          
  44.          
  45.         [Bindable(event="textChanged")] 
  46.         public function get text():String{ 
  47.             return text_mc.text; 
  48.         } 
  49.          
  50.          
  51.         override protected function createChildren():void{ 
  52.             super.createChildren(); 
  53.             if(!text_mc){ 
  54.                 text_mc =new TextArea(); 
  55.                 text_mc.explicitWidth =80; 
  56.                 text_mc.editable =false; 
  57.                 text_mc.addEventListener("change",handleChangeEvent); 
  58.                 addChild(text_mc); 
  59.             } 
  60.              
  61.             if(!mode_mc){ 
  62.                 mode_mc = new Button(); 
  63.                 mode_mc.label ="mylabeljieji"; 
  64.                 mode_mc.addEventListener("click",handleClickEvent); 
  65.                 addChild(mode_mc); 
  66.             } 
  67.         } 
  68.          
  69.          
  70.         //处理有子组件派发的时间 
  71.         private function handleChangeEvent(eventObj:Event):void{ 
  72.             dispatchEvent(new Event("change")); 
  73.         } 
  74.          
  75.         private function handleClickEvent(eventObj:Event):void{ 
  76.             text_mc.editable = !text_mc.editable; 
  77.         } 
  78.          
  79.          
  80.         override protected function commitProperties():void{ 
  81.             super.commitProperties(); 
  82.             if(bTextChanged){ 
  83.                 bTextChanged =false; 
  84.                 text_mc.text = _text; 
  85.                 invalidateDisplayList(); 
  86.             } 
  87.         } 
  88.          
  89.         /**
  90.          * 组建的默认宽度是文本宽度加上按钮的宽度
  91.          * 组件的默认高度由按钮的高度决定
  92.          */  
  93.         override protected function measure():void{ 
  94.             super.measure(); 
  95.             var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth(); 
  96.             var buttonHeight:Number =mode_mc.getExplicitOrMeasuredHeight(); 
  97.              
  98.             //组件默认的最小宽度和默认宽度为textArea控件的measureedWidth宽度与buttonWidth之和 
  99.             measuredWidth = measuredMinWidth =text_mc.measuredWidth+buttonWidth; 
  100.         //组件的默认高度 和最小高度问textArea 和Button 中measuredHeight中的最大值加上10个像素的边框 
  101.             measuredHeight = measuredMinHeight = Math.max(text_mc.measuredHeight,buttonHeight)+10; 
  102.         } 
  103.          
  104.          
  105.         private var _textPlacement:String="left"; 
  106.          
  107.         public function set textPlacement(p:String):void{ 
  108.             this._textPlacement = p; 
  109.             invalidateDisplayList(); 
  110.             dispatchEvent(new Event("placementChanged")); 
  111.         } 
  112.          
  113.         [Bindable(event="placementChanged")] 
  114.         public function get textPlacement():String{ 
  115.             return _textPlacement; 
  116.         } 
  117.          
  118.          
  119.         /**
  120.          * Button控件的尺寸是Button上的label文本尺寸加上10像素的边框区域
  121.          * textarea控件的尺寸是组件的剩余区域，TextArea的位置取决于textPlacement属性的设置
  122.          * **/ 
  123.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ 
  124.             super.updateDisplayList(unscaledWidth,unscaledHeight); 
  125.             //为左右边框各减去1像素 ， 为左右边白各减3像素 
  126.             var usableWidth:Number=unscaledWidth -8; 
  127.             //为上下边框各减去1像素 ， 为上下边白各减3像素 
  128.             var usableHeight:Number = unscaledHeight -8; 
  129.              
  130.             //根据按钮上的文本计算按钮的尺寸 
  131.             var lineMetrics:TextLineMetrics = measureText(mode_mc.label); 
  132.             //按钮文本尺寸加上10像素作为按钮的尺寸 
  133.             var buttonHeight:Number = lineMetrics.height+10; 
  134.             var buttonWidth:Number = lineMetrics.width+10; 
  135.             mode_mc.setActualSize(buttonWidth,buttonHeight); 
  136.              
  137.             //计算文本的尺寸，允许按钮和TextArea文本之间有5个像素的间隙 
  138.             var textWidth:Number = usableWidth-buttonWidth-5; 
  139.             var textHeight:Number = usableHeight; 
  140.             text_mc.setActualSize(textWidth,textHeight); 
  141.              
  142.             //根据textPlacement的属性确定控件的位置 
  143.             if(textPlacement ==
    "left"){ 
  144.                 text_mc.move(4,4); 
  145.                 mode_mc.move(4+textWidth+5,4); 
  146.             }else{ 
  147.                 mode_mc.move(4,4); 
  148.                 text_mc.move(4+buttonWidth+5,4); 
  149.             } 
  150.              
  151.             graphics.lineStyle(1,0xffff00,1.0); 
  152.             graphics.drawRect(0,0,unscaledWidth,unscaledHeight); 
  153.         } 
  154.          
  155.          
  156.  
  157.     } 
  158. }

 

转自：http://wangxingrang.iteye.com/blog/1489400

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞