用ActionScript创建可视化的Flex组件-51CTO.COM

本文和大家重点讨论一下用ActionScript创建可视化的Flex组件的方法，通过使用ActionScript中的new操作符你可以程序化的创建可视化的Flex组件，用同样的方式你也可以创建任何ActionScript类的实例。

用ActionScript创建可视化的Flex组件

通过使用ActionScript中的new操作符你可以程序化的创建可视化的Flex组件，用同样的方式你也可以创建任何ActionScript类的实例。创建后的组件的属性都有默认的值，但是组件此时并没有父类和子类(包含各式各样的DisplayObject)，而且此时组件并不在FlashPlayer或AdobeAIR的显示列表中，因此无法在界面看到该组件。当创建组件完成后，你可以使用标准的赋值语句来重新设置组件的属性的值。

如果你要把新创建的Flex组件添加到容器中去，必须使用容器的addChild()和addChildAt()方法，通过这种方法可以使得组件变成Flex程序的显示层级的一部分。当组件***次被添加到容器的时候，组件的子实例就被创建了。在组件的生命周期子实例创建的时候比较晚，因此你可以在子实例创建完成后设置它的属性。

当创建可视化组建的时候，你必须导入合适的包。在大多数情况下，这些包基本都在mx.controls包中，具体的你可以查阅AdobeFlexLanguageReference

下面的例子中，创建了一个Button控件并田间到HBox中去：

<?xmlversionxmlversion="1.0"?> 
 
<!--usingas/ASVisualComponent.mxml--> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<mx:Script><![CDATA[  
 
importmx.controls.Button;  
 
publicvarbutton2:Button;  
 
publicfunctioncreateObject():void{  
 
button2=newButton();  
 
button2.label="ClickMe";  
 
hb1.addChild(button2);  
 
}  
 
]]></mx:Script> 
 
<mx:HBoxidmx:HBoxid="hb1"> 
 
<mx:Buttonlabelmx:Buttonlabel="CreateObject"click="createObject()"/> 
 
</mx:HBox> 
 
</mx:Application>

Flex容器中新创建的元素将会排在容器的***。如果你并不像让新创建的元素排在容器的***，可是使用addChildAt()方法来改变元素的顺序。你也可以在调用addChild()方法后使用setChildIndex()方法来实现，不过这样做的话效率会降低。

你应该为每个动态创建的Flex组件定义实例变量并且将新创建的组件的实例存储在变量里，就像当你为组件的实例标签设置了id属性的时候MXML编译器所做的那样。然后你就可以访问你刚才动态创建的组件。

◆如果要在程序中移除一个组件，你需要使用removeChild()或removeChildAt()方法。你也可以使用removeAllChildren()方法来移除容器的所有组件。调用这些方法并不是真正的删除这些对象。如果你在程序没有这些对象的任何引用，那么FlashPlayer的垃圾回收机制就会在将来的某个时间点进行回收。如果在程序中存储了该对象的引用，那么系统将会不从内存中移除该对象。

在有些情况下，你是通过使用MXML标签来定义组件的。你可以设置容器的creationPolicy属性为none来延迟容器中组件的实例化。为了创建那些用标签定义了但没有实例化的组件，你可以使用createComponentFromDescriptor()和createComponentsFromDescriptors()方法。使用这些方法可以让你程序化的创建组件而不是声明化的。

可以支持addChild()方法的组件是UIComponent。换句话说，如果你创建了一个并不是mx.core.UIComponent的子类的对象，在你将该对象添加到容器之前你必须用UIComponent封装该对象。下面的例子中，创建了并不是UIComponent子类的Sprite对象，在将该对象添加到Panel容器之前将对象添加为UIComponent的子对象：

<?xmlversionxmlversion="1.0"?> 
 
<!--usingas/AddingChildrenAsUIComponents.mxml--> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<mx:Script><![CDATA[  
 
importflash.display.Sprite;  
 
importmx.core.UIComponent;  
 
privatevarxLoc:int=20;  
 
privatevaryLoc:int=20;  
 
privatevarcircleColor:Number=0xFFCC00;  
 
privatefunctionaddChildToPanel():void{  
 
varcircle:Sprite=newSprite();  
 
circle.graphics.beginFill(circleColor);  
 
circle.graphics.drawCircle(xLoc,yLoc,15);  
 
 
varc:UIComponent=newUIComponent();  
 
c.addChild(circle);  
 
panel1.addChild(c);  
 
xLoc=xLoc+5;  
 
yLoc=yLoc+1;  
 
circleColor=circleColor+20;  
 
}  
 
]]></mx:Script> 
 
<mx:Panelidmx:Panelid="panel1"height="250"width="300"verticalScrollPolicy="off"/> 
 
<mx:Buttonidmx:Buttonid="myButton"label="ClickMe"click="addChildToPanel();"/> 
 
</mx:Application>

【编辑推荐】