创建简单的ActionScript组件
Example
components/CountryComboBox.as
package components { import mx.controls.ComboBox; public class CountryComboBox extends ComboBox { public function CountryComboBox() { dataProvider = [ "United States", "United Kingdom" ]; } } }
Main application MXML file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" width="220" height="115" > <custom:CountryComboBox /> </mx:Application>
自定义组件的属性和方法
Example
components/CountryComboBox.as
package components { import mx.controls.ComboBox; public class CountryComboBox extends ComboBox { public function CountryComboBox () { dataProvider = [ "United States", "United Kingdom" ]; } } }Main application MXML file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" width="270" height="170" > <mx:Script> <![CDATA[ import flash.events.Event; private function handleCloseEvent(eventObj:Event):void { status.text = "You selected: \r" + countries.selectedItem as String; } ]]> </mx:Script> <mx:Panel title="Custom component inheritance" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <custom:CountryComboBox id="countries" rowCount="5" close="handleCloseEvent(event);" /> <mx:Text id="status" text="Please select a country from the list above." width="136"/> </mx:Panel> </mx:Application>应用样式到组件Example
components/PaddedPanel.as
package components { import mx.containers.Panel; public class PaddedPanel extends Panel { public 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); } } }Main application MXML file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" width="300" height="130" > <custom:PaddedPanel title="Custom component styles"> <mx:Text text="This is a padded panel component."/> </custom:PaddedPanel> </mx:Application>
创建高级ActionScript组件Example
components/CountryComboBox.as
package components { import mx.controls.ComboBox; import flash.events.Event; public class CountryComboBox extends ComboBox { private 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 2 [Inspectable(defaultValue=true)] private var _useShortNames:Boolean = true; // Implicit setter public function set useShortNames(state:Boolean):void { // Call method to set the dataProvider based on the name length. _useShortNames = state; if (state) { this.dataProvider = countryArrayShort; } else { this.dataProvider = countryArrayLong; } // Dispatch an event when the value changes // (used in data binding). dispatchEvent(new Event("changeUseShortNames")); } // Allow other components to bind to this property [Bindable(event="changeUseShortNames")] public function get useShortNames():Boolean { return _useShortNames; } } }Main application MXML file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" viewSourceURL="src/MxmlComponentAdvanced/index.html" width="260" height="200" > <mx:Panel title="Advanced custom components" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <!-- Set a custom property on a custom component --> <custom:CountryComboBox id="countries" useShortNames="false" /> <!-- Use data binding to display the latest state of the property. --> <mx:Label text="useShortNames = {countries.useShortNames}"/> <mx:ControlBar horizontalAlign="right"> <mx:Button label="Toggle Display" click="countries.useShortNames = !countries.useShortNames;" /> </mx:ControlBar> </mx:Panel> </mx:Application>创建复合型ActionScript组件Example
components/NumericDisplay.as
package components { import mx.containers.VBox; import mx.containers.Tile; import mx.controls.TextInput; import mx.controls.Button; import mx.events.FlexEvent; import flash.events.MouseEvent; public class NumericDisplay extends VBox { private var display:TextInput; private var buttonsTile:Tile; // Expose the _numButtons property to the // visual design view in Flex Builder 2. [Inspectable(defaultValue=10)] private var _numButtons:uint = 10; public function NumericDisplay() { addEventListener(FlexEvent.INITIALIZE, initializeHandler); } // numButtons is a public property that determines the // number of buttons that is displayed [Bindable(event="numButtonsChange")] public function get numButtons():uint { return _numButtons; } public function set numButtons(value:uint):void { _numButtons = value; dispatchEvent(new Event("numButtonsChange")); } // Gets called when the component has been initialized private function initializeHandler(event:FlexEvent):void { // Display the component paint(); } // Add the label of the clicked button to the display private function buttonClickHandler(event:MouseEvent):void { display.text += (event.target as Button).label; } // Display the component private function paint():void { // Create the number display display = 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); } } } }components/PaddedPanel.as
package components { import mx.containers.Panel; public class PaddedPanel extends Panel { public 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); } } }Main application MXML file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" viewSourceURL="src/ASComponentComposite/index.html" width="300" height="225" > <custom:PaddedPanel title="Composite component" > <custom:NumericDisplay numButtons="10"/> </custom:PaddedPanel> </mx:Application>
