自定义组件--在ActionScript创建组件

创建简单的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>