Flex4之使用ActionScript构建组件.doc

因为是专门针对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. 内联方式 2. 级联方式 3. 外联方式/ 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.asXml代码 1. packagecomponents 2. 3. importmx.containers.Panel; 4. 5. publicclassPaddedPanelextendsPanel 6. 7. 8. publicfunctionPaddedPanel() 9. 10. /Calltheconstructorofthesuperclass. 11. super(); 12. 13. /Givethepanelauniform10-pixel 14. /paddingonallfoursides. 15. setStyle(paddingLeft,10); 16. setStyle(paddingRight,10); 17. setStyle(paddingTop,10); 18. setStyle(paddingBottom,10); 19. 20. 21. 22. package componentsimport mx.containers.Panel;public class PaddedPanel extends Panelpublic function PaddedPanel()/ Call the constructor of the superclass.super();/ Give the panel a uniform 10-pixel/ padding on all four sides.setStyle(paddingLeft, 10);setStyle(paddingRight, 10);setStyle(paddingTop, 10);setStyle(paddingBottom, 10);NumericDisplay.asXml代码 1. packagecomponents 2. 3. importflash.events.Event; 4. importflash.events.MouseEvent; 5. 6. importmx.containers.Tile; 7. importmx.containers.VBox; 8. importmx.controls.Button; 9. importmx.controls.TextInput; 10. importmx.events.FlexEvent; 11. publicclassNumericDisplayextendsVBox 12. 13. privatevardisplay:TextInput; 14. privatevarbuttonsTile:Tile; 15. /Exposethe_numButtonspropertytothe 16. /visualdesignviewinFlexBuilder3. 17. Inspectable(defaultValue=10) 18. privatevar_numButtons:uint=10; 19. 20. /原来主应用程序中的引用本类的组件属性是取决于改自定义组件类是否定了了set方法而已,当然属性名称与set方法名称一致 21. privatevar_max:int=90; 22. 23. publicfunctionsetmax(v:int):void 24. 25. 26. 27. 28. publicfunctiongetmax():int 29. 30. return_max; 31. 32. 33. 34. 35. publicfunctionNumericDisplay() 36. 37. addEventListener(FlexEvent.INITIALIZE,initializeHandler); 38. 39. 40. /numButtonsisapublicpropertythatdeterminesthe 41. /numberofbuttonsthatisdisplayed 42. Bindable(event=numButtonsChange) 43. publicfunctiongetnumButtons():uint 44. 45. return_numButtons; 46. /当numButtons被赋值时，发出numButtonsChanage事件，通知所有被绑定的getter方法执行一遍 47. publicfunctionsetnumButtons(value:uint):void 48. 49. _numButtons=value; 50. dispatchEvent(newEvent(numButtonsChange); 51. 52. 53. /Getscalledwhenthecomponenthasbeeninitialized 54. privatefunctioninitializeHandler(event:FlexEvent):void 55. 56. /Displaythecomponent 57. paint(); 58. 59. /Addthelabeloftheclickedbuttontothedisplay 60. privatefunctionbuttonClickHandler(event:MouseEvent):void 61. 62. display.text+=(event.targetasButton).label; 63. 64. 65. /Displaythecomponent 66. privatefunctionpaint():void 67. 68. /Createthenumberdisplay 69. display=newTextInput(); 70. display.width=185; 71. addChild(display); 72. /CreateaTilecontainerto 73. /holdthebuttons. 74. buttonsTile=newTile(); 75. addChild(buttonsTile); 76. 77. /Createthebuttonsandaddthemto 78. /theTilecontainer. 79. for(vari:uint=0;i_numButtons;i+) 80. 81. varcurrentButton:Button=newButton(); 82. currentButton.label=i.toString(); 83. currentButton.addEventListener(MouseEvent.CLICK,buttonClickHandler); 84. buttonsTile.addChild(currentButton); 85. 86. 87. 88. package componentsimport flash.events.Event;import flash.events.MouseEvent;import mx.containers.Tile;import mx.containers.VBox;import mx.controls.Button;import mx.controls.TextInput;import mx.events.FlexEvent;public class NumericDisplay extends VBoxprivate var display:TextInput;private var buttonsTile:Tile;/ Expose the _numButtons property to the/ visual design view in Flex Builder 3.Inspectable(defaultValue=10)private var _numButtons:uint = 10;/原来主应用程序中的引用本类的组件属性是取决于改自定义组件类是否定了了set方法而已,当然属性名称与set方法名称一致private var _max:int=90;public function set max(v:int):voidpublic function get max():int return _max;public function NumericDisplay()addEventListener(FlexEvent.INITIALIZE, initializeHandler);/ numButtons is a public property that determines the/ number of buttons that is displayedBindable(event=numButtonsChange)public function get numButtons():uintreturn _numButtons;/当numButtons被赋值时，发出numButtonsChanage事件，通知所有被绑定的getter方法执行一遍public function set numButtons(value:uint):void_numButtons = value;dispatchEvent(new Event(numButtonsChange);/ Gets called when the component has been initializedprivate function initializeHandler(event:FlexEvent):void/ Display the componentpaint();/ Add the label of the clicked button to the displayprivate function buttonClickHandler(event:MouseEvent):voiddisplay.text += (event.target as Button).label;/ Display the componentprivate function paint():void/ Create the number displaydisplay = new TextInput();display.width=185;addChild(display);/ Create a Tile container to/ hold the buttons.buttonsTile = new Tile();addChild (buttonsTile);/ Create the buttons and add them to/ the Tile container.for (var i:uint = 0; i _numButtons; i+)var currentButton:Button = new Button();currentButton.label = i.toString();currentButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);buttonsTile.addChild (currentButton);CountryComboBox.asXml代码 1. packagecomponents 2. 3. importmx.controls.ComboBox; 4. importflash.events.Event; 5. 6. publicclassCountryComboBoxextendsComboBox 7. 8. 9. privatevarcountryArrayShort:Array=US,UK; 10. privatevarcountryArrayLong:Array=UnitedStates,UnitedKingdom; 11. 12. /Determinesdisplaystate.Theinspectablemetadatatag 13. 14. /isusedbyFlexBuilder3. 15. Inspectable(defaultValue=true) 16. privatevar_useShortNames:Boolean=true; 17. 18. /Implicitsetter 19. 20. publicfunctionsetuseShortNames(state:Boolean):void 21. 22. 23. /CallmethodtosetthedataProviderbasedonthenamelength. 24. _useShortNames=state; 25. 26. if(state) 27. 28. this.dataProvider=countryArrayShort; 29. 30. 31. else 32. 33. this.dataProvider=countryArrayLong; 34. 35. 36. /Dispatchaneventwhenthevaluechanges 37. /(usedindatabinding). 38. 39. dispatchEvent(newEvent(changeUseShortNames); 40. 41. 42. /Allowothercomponentstobindtothisproperty 43. Bindable(event=changeUseShortNames) 44. 45. publicfunctiongetuseShortNames():Boolean 46. 47. return_useShortNames; 48. 49. 50. 51. package componentsimport mx.controls.ComboBox;import flash.events.Event;public class CountryComboBox extends ComboBoxprivate var countryArrayShort:Array = US, UK;private var countryArrayLong:Array = United States, United Kingdom;/ Determines display state. The inspectable metadata tag/ is used by Flex Builder 3.Inspectable(defaultValue=true)private var _useShortNames:Boolean = true;/ Implicit setterpublic function set useShortNames(state:Boolean):void/ Call method to set the dataProvider based on the name length._useShortNames = state;if (state)this.dataProvider = countryArrayShort;elsethis.dataProvider = countryArrayLong;/ Dispatch an event when the value changes/ (used in data binding).dispatchEvent(new Event(changeUseShortNames);/ Allow other components to bind to this propertyBindable(event=changeUseShortNames)public function get useShortNames():Booleanreturn _useShortNames; 主应用程序mxmlXml代码 1. 7. 8. 9. 10. 11. 20. 21. 22. 23. 24. 27. 32. 33. 37. 38. 39. 40. 41. 45. 46. 47. 48. 49. 50. 51. 当使用ActionScript组件的普遍目的是创建可配置和可重用的组件。例如，创建一个ActionScript组件，它带有属性，分发时间，定义了新的样式，具有自定义的皮肤，或其他的个性化的设置。 当创建一个自定的ActionScript组件时，一个设计上要考虑的事情是可重用性。也就是说，你希望创建一个紧紧的绑定带你的应用程序的组件，还是能够在多个应用中可重用的组件？编写与特定应用程序紧耦合的组件，经常是组件依赖于应用程序的结构，变量名或其他细节。如果你改变了应用程序，你可能需要修改紧耦合的组件来反映这种