代码改变世界

Flex中的组件

2008-10-13 13:18  宝宝合凤凰  阅读(281)  评论(0)    收藏  举报
关键字: 组件

Flex提供了一种基于组件的开发模式，我们说的组件其实上是mxml中的一些标签，actionscript的对象，这些组件可以从文件中分离出来成为一个外部文件，可以被开发者来重用。

 

下面我们先利用mxml标签来创建一个组件，组件的文件名为PanelComponent.mxml。

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="250"  
  3.         height="250" title="MXML Component">  
  4.         <mx:Label text="This is a MXML Component" />  
  5. </mx:Panel>  

 

这个组件的作用很明显，就是显示一个Panel，Panel有一个子节点Label用来显示一些内容。现在我们就来看看组件是如何被引入调用的。

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.                           xmlns:comp="*">  
  4.         <comp:PanelComponent />  
  5. </mx:Application>  

 

引入组件的方式是为<mx:Application />标签增加一个命名空间的属性，然后写上组件的相对路径名，这里如果有子文件夹的话，用'.'代替'\'或者是'/'进行分隔。调用它的方式很简单，新的命名空间+上该组件的文件名就好了。

 

现在我们该用ActionScript来创建组件了，组件的文件名为PanelComponent2.as

 

Xml代码 复制代码
  1. package   
  2. {   
  3.     import mx.containers.Panel;   
  4.     import mx.controls.Label;   
  5.   
  6.     public class PanelComponent2 extends Panel   
  7.     {   
  8.         public function PanelComponent2()   
  9.         {   
  10.             //设置组件属性   
  11.             this.title = "ActionScript Component";   
  12.             this.width = 250;   
  13.             this.height = 250;   
  14.                
  15.             var label:Label = new Label();   
  16.                
  17.             label.text = "This is a Panel Component";   
  18.                
  19.             //为组件添加子节点Label来显示一些内容   
  20.             this.addChild(label);   
  21.         }      
  22.            
  23.     }   
  24. }  

 

引入和调用他的过程。

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.                           xmlns:comp="*">  
  4.         <comp:PanelComponent2 />  
  5. </mx:Application>  

 

当经过编译以后运行会发现两组代码表现出来的东西是一样的。

 

 

mxml标签其实就代表了相对应的actionscript对象，有时候我们可以扩展一些组件来实现一些应用，制作一些自己的组件也可能会为开发带来便捷。

 

我们在使用mxml标签的时候会有很多的标签属性可以让我们来设置，这样让我们对标签的控制更加的细致了。我们在制作自定义组件的时候也是可以实现这些功能。

 

现在我们要为ComboBoxComponent组件添加setMyDP的属性。

 

Xml代码 复制代码
  1. package   
  2. {   
  3.     import mx.collections.ArrayCollection;   
  4.     import mx.controls.ComboBox;   
  5.   
  6.     public class ComboBoxComponent extends ComboBox   
  7.     {   
  8.         private var _myDP:ArrayCollection;   
  9.            
  10.                //属性setMyDP相对应的set方法   
  11.         public function set setMyDP(dataP:ArrayCollection):void {   
  12.            
  13.             _myDP = dataP;   
  14.             _myDP.addItemAt("Select a value...", 0);   
  15.             this.dataProvider = _myDP;   
  16.         }   
  17.            
  18.                //属性setMyDP相对应的get方法   
  19.         public function get setMyDP():ArrayCollection {   
  20.            
  21.             return _myDP;   
  22.         }   
  23.            
  24.                //构造方法   
  25.         public function ComboBoxComponent()   
  26.         {   
  27.             super();   
  28.         }   
  29.     }   
  30. }  

 

以上的代码表示为一个继承了ComboBox下拉菜单的组件提供了setMyDP属性，这个属性的作用主要是为组件提供数据源。用法和普通标签的属性设置一下，但是要注意的变量的类型是要匹配的。

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  
  3.                 xmlns:comp="*">  
  4.                    
  5.     <mx:Script>  
  6.         <![CDATA[  
  7.             import mx.collections.ArrayCollection;  
  8.                           
  9.             [Bindable]  
  10.             private var myAC:ArrayCollection = new ArrayCollection(  
  11.                             ["First Value", "Second Value", "Third Value"]);  
  12.         ]]>  
  13.     </mx:Script>  
  14.                    
  15.     <comp:ComboBoxComponent id="myCB" setMyDP="{myAC}" />  
  16. </mx:Application>