Flex4之使用ActionScript构建组件

    因为是专门针对ActionScript来写的篇章，所以，对于ActionScript大家有功夫最好去看看基础入门知识，其实很容易上手很多部分都与JAVA面向对象及以前的基础知识相似

首先来说下ActionScript常用的三种方式

Flex的核心是MXML和ActionScript 。

MXML 是用于为 Flex应用程序进行用户界面组件布局， 它属于表示层，最终要编辑成ActionScript 并生成ActionScript 类文件在Flash Player上运行。如果你是个Java开发者就很好理解这一点，MXML 就好比是JSP/Struts/JSF，它们最终都会编辑成Java 类文件并在具备JAVA虚拟机环境的浏览器上运行。

所以说，Flex 最核心的还是ActionScript 。在Flex中，ActionScript是 类库的方式出现的，该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类

  1. 内联方式

<mx:Button label="Say Hello" click="mx.controls.Alert.show('Hello,Flying')"/> 

   2. 级联方式

<mx:Button label="Say Hello" click="sayHello('Flying')"/> <mx:Script> <![CDATA[ import mx.controls.Alert; private function sayHello(param_name:String):void { Alert.show("Hello, "+param_name); } ]]> </mx:Script> 

   3. 外联方式

 <mx:Script source="myFunction.as"/>

<mx:Button label="Say Hello" click="sayHello('Flying');"/> 

 // myFunction.asimport mx.controls.Alert; private function sayHello(param_name:String):void { mx.controls.Alert.show("Hello, "+param_name); } 

上述方式为AS方法单独新建一个as文件，然后设置该方法为被调用文件的Script元素的source属性值，并可以在调用方法时传递参数，此文件可以在多个文件调用，从而实现了AS方法在多个文件中的重用。

其次呢就要说说今天重点的ActionScript构建组件了

 

可以使用ActionScript创建可重用的组件，并且在你的Flex程序中可以作为标签引用这个组件。在ActionScript中创建的组件能够包含图像元素，自定义业务逻辑，或者扩展已经存在的Flex组件。

在ActionScript中，Flex组件实现了类层次结构。每一个组件，都是Action类的实例。下图展示了这种层次结构的一部分。

所有Flex可视组件都是源自于UIComponent类。要创建自己的组件，你可以创建一个继承UIComponent的类，或者继承 UIComponent子类的类。

使用类作为自定义组件的超类，取决于你要实现的功能。例如，你或许需要一个自定义的按钮控件。你可以创建一个UIComponent类的子类，然后重写Flex Button 类的所有功能。更好更快创建自定义按钮组建的方法是创建一个Flex Button组件的子类，然后在自定义类中进行修改。

下面贴出代码【说明：一切都要从重用性来考虑，否则没有必要用构建组件】，仅供参考

  PaddedPanel.as

 

Xml代码 复制代码 收藏代码
  1. <SPAN style="FONT-SIZE: large">package components   
  2. {   
  3.     import mx.containers.Panel;   
  4.        
  5.     public class PaddedPanel extends Panel   
  6.     {   
  7.            
  8.         public function PaddedPanel()   
  9.         {   
  10.             // Call the constructor of the superclass.   
  11.             super();   
  12.                
  13.             // Give the panel a uniform 10-pixel   
  14.             // padding on all four sides.   
  15.             setStyle("paddingLeft", 10);   
  16.             setStyle("paddingRight", 10);   
  17.             setStyle("paddingTop", 10);   
  18.             setStyle("paddingBottom", 10);   
  19.         }   
  20.            
  21.     }   
  22. }</SPAN>  

 

 NumericDisplay.as

 

Xml代码 复制代码 收藏代码
  1. <SPAN style="FONT-SIZE: large">package components   
  2. {   
  3.     import flash.events.Event;   
  4.     import flash.events.MouseEvent;   
  5.        
  6.     import mx.containers.Tile;   
  7.     import mx.containers.VBox;   
  8.     import mx.controls.Button;   
  9.     import mx.controls.TextInput;   
  10.     import mx.events.FlexEvent;   
  11.     public class NumericDisplay extends VBox   
  12.     {   
  13.         private var display:TextInput;   
  14.         private var buttonsTile:Tile;   
  15.         // Expose the _numButtons property to the   
  16.         // visual design view in Flex Builder 3.   
  17.         [Inspectable(defaultValue=10)]   
  18.         private var _numButtons:uint = 10;   
  19.            
  20.         //原来主应用程序中的引用本类的组件属性是取决于改自定义组件类是否定了了set方法而已,当然属性名称与set方法名称一致   
  21.         private var _max:int=90;   
  22.            
  23.         public function set max(v:int):void{   
  24.            
  25.         }   
  26.            
  27.            
  28.         public function get max():int{   
  29.            
  30.          return _max;   
  31.         }   
  32.            
  33.            
  34.            
  35.         public function NumericDisplay()   
  36.         {   
  37.             addEventListener(FlexEvent.INITIALIZE, initializeHandler);   
  38.         }   
  39.            
  40.         // numButtons is a public property that determines the   
  41.         // number of buttons that is displayed   
  42.         [Bindable(event="numButtonsChange")]   
  43.         public function get numButtons():uint   
  44.         {   
  45.             return _numButtons;   
  46.         }// //当numButtons被赋值时，发出numButtonsChanage事件，通知所有被绑定的getter方法执行一遍   
  47.         public function set numButtons(value:uint):void   
  48.         {   
  49.             _numButtons = value;   
  50.             dispatchEvent(new Event("numButtonsChange"));   
  51.         }   
  52.            
  53.         // Gets called when the component has been initialized   
  54.         private function initializeHandler(event:FlexEvent):void   
  55.         {   
  56.             // Display the component   
  57.             paint();   
  58.         }   
  59.         // Add the label of the clicked button to the display   
  60.         private function buttonClickHandler(event:MouseEvent):void   
  61.         {   
  62.             display.text += (event.target as Button).label;   
  63.         }   
  64.            
  65.         // Display the component   
  66.         private function paint():void   
  67.         {   
  68.             // Create the number display   
  69.             display = new TextInput();   
  70.             display.width=185;   
  71.             addChild(display);   
  72.             // Create a Tile container to   
  73.             // hold the buttons.   
  74.             buttonsTile = new Tile();   
  75.             addChild (buttonsTile);   
  76.                
  77.             // Create the buttons and add them to   
  78.             // the Tile container.   
  79.             for (var i:uint = 0; i < _numButtons; i++)   
  80.             {   
  81.                 var currentButton:Button = new Button();   
  82.                 currentButton.label = i.toString();   
  83.                 currentButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);   
  84.                 buttonsTile.addChild (currentButton);   
  85.             }   
  86.         }   
  87.     }   
  88. }</SPAN>  

 

 CountryComboBox.as

 

Xml代码 复制代码 收藏代码
  1. <SPAN style="FONT-SIZE: large">package components   
  2. {   
  3.     import mx.controls.ComboBox;   
  4.     import flash.events.Event;   
  5.        
  6.     public class CountryComboBox extends ComboBox   
  7.     {   
  8.            
  9.         private var countryArrayShort:Array = ["US", "UK"];   
  10.         private var countryArrayLong:Array = ["United States", "United Kingdom"];   
  11.            
  12.         // Determines display state. The inspectable metadata tag   
  13.            
  14.         // is used by Flex Builder 3.   
  15.         [Inspectable(defaultValue=true)]   
  16.         private var _useShortNames:Boolean = true;   
  17.            
  18.         // Implicit setter   
  19.            
  20.         public function set useShortNames(state:Boolean):void   
  21.         {   
  22.                
  23.             // Call method to set the dataProvider based on the name length.   
  24.             _useShortNames = state;   
  25.                
  26.             if (state)   
  27.             {   
  28.                 this.dataProvider = countryArrayShort;   
  29.             }   
  30.                    
  31.             else   
  32.             {   
  33.                 this.dataProvider = countryArrayLong;   
  34.             }   
  35.                
  36.             // Dispatch an event when the value changes   
  37.             // (used in data binding).   
  38.                
  39.             dispatchEvent(new Event("changeUseShortNames"));   
  40.         }   
  41.            
  42.         // Allow other components to bind to this property   
  43.         [Bindable(event="changeUseShortNames")]   
  44.            
  45.         public function get useShortNames():Boolean   
  46.         {   
  47.             return _useShortNames;   
  48.         }                  
  49.     }   
  50.        
  51. }</SPAN>  

 

 主应用程序mxml

  <?xml version="1.0" encoding="utf-8"?>

Xml代码 复制代码 收藏代码
  1. <SPAN style="FONT-SIZE: large"><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
  2.                xmlns:s="library://ns.adobe.com/flex/spark"    
  3.                xmlns:mx="library://ns.adobe.com/flex/mx"    
  4.                minWidth="955"  
  5.                minHeight="600"  
  6.                xmlns:components="components.*">  
  7.     <s:layout>  
  8.         <s:BasicLayout/>  
  9.     </s:layout>  
  10.     <fx:Script>  
  11.         <![CDATA[  
  12.             import flash.events.Event;  
  13.               
  14.             private function handleCloseEvent(eventObj:Event):void  
  15.             {  
  16.                   
  17.                 status.text = "You selected: \r" + countries.selectedItem as String;  
  18.             }    
  19.         ]]>  
  20.     </fx:Script>  
  21.     <fx:Declarations>  
  22.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  23.     </fx:Declarations>  
  24.     <components:PaddedPanel  
  25.         title="Custom component inheritance"  
  26.         >  
  27.         <components:CountryComboBox  
  28.             id="countries"  
  29.             useShortNames="false"  
  30.                
  31.             />  
  32.            
  33.         <!--   
  34.         Use data binding to display the latest state   
  35.         of the property.   
  36.         -->  
  37.         <mx:Label text="useShortNames = {countries.useShortNames}"/>      
  38.            
  39.         <mx:ControlBar horizontalAlign="right">  
  40.                
  41.             <mx:Button  
  42.                 label="Toggle Display"  
  43.                 click="countries.useShortNames = !countries.useShortNames;"  
  44.                 />  
  45.         <mx:Text id="status" text="Please select a country from the list above." width="136"/>     
  46.         <components:NumericDisplay numButtons="10"     />       
  47.     </mx:ControlBar>  
  48.     </components:PaddedPanel>  
  49.        
  50. </s:Application>  
  51. </SPAN>  

 当使用ActionScript组件的普遍目的是创建可配置和可重用的组件。例如，创建一个ActionScript组件，它带有属性，分发时间，定义了新的样式，具有自定义的皮肤，或其他的个性化的设置。


当创建一个自定的ActionScript组件时，一个设计上要考虑的事情是可重用性。也就是说，你希望创建一个紧紧的绑定带你的应用程序的组件，还是能够在多个应用中可重用的组件？


编写与特定应用程序紧耦合的组件，经常是组件依赖于应用程序的结构，变量名或其他细节。如果你改变了应用程序，你可能需要修改紧耦合的组件来反映这种变化。一个紧耦合的组件，在没有重写的情况下很难应用到其他应用程序中。


设计一个松耦合的组件用于重用。松耦合的组件需要有清晰可辨的接口来指定如何向组件传递信息，如何将将结果传回应用程序。


典型的松耦合组件是使用属性来向组件传递信息。这些属性通过默认存取器（setter和getter方法）来定义，指定参数的类型。在下边的例子中，CountryComboBox自定义组件定义了公共的userShortNames属性，此属性通过使用get userShortNames()和set useShortNames()存取器方法暴露_ userShortNames私有属性。


私有属性_userShortNames的Inspectable 元数据标签定义了一个特性，这个特性出现在Adobe? Flex? Builder?中的属性提示和标签内省器中。也可以使用这个元数据标签限制允许的属性值。


注意：所有公共属性出现在MXML的代码提示和属性检查器中。如果你有关于属性的额外的信息，这些信息能够帮助代码提示或属性检查器（像枚举型的值，或这个字符串实际是文件路径），那么也把额外的信息添加到[Inspectable]元数据中。


MXML代码提示和属性检查器来于相同的数据，所以，如果在一个中显示出来那么在另一个中也应该一直显示出来。


在另一方面，ActionScript代码提示，不需要元数据也可以正常工作，所以你在ActionScript中依据所在的上下文一直都可以看待适当的代码提示。Flex Builder使用public/protected/private/static等等修饰符加当前所在范围计算出ActionScript代码提示。


定义组件向主应用程序返回信息的最佳实践是设计组件分发事件，事件中包含要返回的数据。那样，主函数能够定义时间监听器来处理时间，并且采取适当的行动。也可以使用数据绑定在事件中。在下边的例子中，使用Bindable元数据标签是userShortName编程一个被绑定的属性。隐含的 userShortName属性的setter发送改变事件，这个过程使用了的Flex 框架的内部的机制，来使数据绑定正常工作。

posted on 2012-02-25 08:50  唐朝  阅读(1966)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 唐朝
Powered by .NET 8.0 on Kubernetes