创建复合 ActionScript 组件

例子
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.Event;
    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 3.

        [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);
        }

    }
}
 

应用程序 MXML 文件

<?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>