Flex defines two types of containers:

Layout containers

Control the sizing and positioning of the children defined within them. Children can be controls or other containers. For more information on Spark layout containers, see Spark containers. For more information on MX layout containers, see MX layout containers.

Navigator containers

Control user movement, or navigation, among multiple child containers. Navigators only take MX containers or the Spark NavigatorContent container as children. The individual child containers, not the navigator container itself, control the layout and positioning of their children. For more information, see MX navigator containers.

Flex defines two sets of containers: MX and Spark. The Spark containers are defined in the spark.components package. The MX containers are defined in the mx.core and mx.containers packages.

While you can use MX containers to perform most of the same layout that you can perform using the Spark containers, it's best to use the Spark containers when possible.

The following table describes the MX containers defined in the mx.core and mx.components packages:

The following example creates an application that uses a Spark Group container with three child controls, where the Group container lays out its children vertically:

<?xml version="1.0"?> 
<!-- containers\intro\Panel3Children.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:Group> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <s:TextInput id="myinput" text="enter zip code"/> 
        <s:Button id="mybutton" label="GetWeather"/> 
        <s:TextArea id="mytext" height="20"/> 
    </s:Group> 
</s:Application>

The Group container uses basic layout by default. Use the layout property of a Spark container to configure its layout. In the previous example, you set the layout of the Group container to vertical.

<?xml version="1.0"?> 
<!-- containers\intro\Panel3Children.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:VGroup> 
        <s:TextInput id="myinput" text="enter zip code"/> 
        <s:Button id="mybutton" label="GetWeather"/> 
        <s:TextArea id="mytext" height="20"/> 
    </s:VGroup> 
</s:Application>

To actually retrieve weather information, you must set up a web service, pass it the entered ZIP code from a click event, and use the returned information to populate the TextArea control.

<?xml version="1.0"?> 
<!-- containers\intro\Panel3ChildrenEvent.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[ 
            import mx.controls.Alert; 
            
            private function handleCreationComplete():void { 
                Alert.show("MyHGroup created."); 
            } 
        ]]> 
    </fx:Script> 
 
    <s:HGroup id="MyHGroup" 
        creationComplete="handleCreationComplete();"> 
        <s:TextInput id="myinput" text="enter zip code"/> 
        <s:Button id="mybutton" label="GetWeather"/> 
        <s:TextArea id="mytext" height="20"/> 
    </s:HGroup> 
</s:Application>

To better understand the order in which Flex dispatches events, consider the following application outline.

 OuterSkinnableContainer 
 	InnerSkinnableContainer1 
 		InnerLabel1 
 	InnerSkinnableContainer2 
 		InnerLabel2

The preinitialize, initialize, contentCreationComplete, and creationComplete events for the containers and controls are dispatched in the following order. The indentation corresponds to the indentation in the previous outline:

 OuterSkinnableContainer preinitialize 
 	InnerSkinnableContainer1 preinitialize 
 		InnerLabel1 preinitialize 
 		InnerLabel1 initialize 
	InnerSkinnableContainer1 contentCreationComplete 
 	InnerSkinnableContainer1 initialize 
 	InnerSkinnableContainer2 preinitialize 
 		InnerLabel2 preinitialize 
 		InnerLabel2 initialize 
	InnerSkinnableContainer2 contentCreationComplete 
  	InnerSkinnableContainer2 initialize 
OuterSkinnableContainer contentCreationComplete 
 OuterSkinnableContainer initialize 
 		InnerLabel2 creationComplete 
 		InnerLabel1 creationComplete 
 	InnerSkinnableContainer2 creationComplete 
 	InnerSkinnableContainer1 creationComplete 
 OuterSkinnableContainer creationComplete

Notice that for the terminal controls, such as the Label controls, the controls are preinitialized and then immediately initialized. For containers, preinitialization starts with the outermost container and works inward on the first branch, and then initialization works outward on the same branch. This process continues until all initialization is completed.

Then, the creationComplete event is dispatched first by the leaf components, and then by their parents, and so on, until the application dispatches the creationComplete event. The order of the creationComplete event is the most deeply nested components dispatch the event first, then the next most deeply nested, up to the application container. For components at the same nesting level, the order of the creationComplete events is undefined.

The initialize event is useful with a container that is an immediate child of a navigator container with the ContainerCreationPolicy.AUTO creation policy. For example, by default, when an MX ViewStack is initialized, the first visible child container dispatches an initialize event. Then, as the user moves to each additional child of the container, the event gets dispatched for that child container.

The following example defines an event listener for the creationComplete event, which is dispatched when the user first navigates to Pane 2 of an MX Accordion navigator container:

<?xml version="1.0"?> 
<!-- containers\intro\AccordionInitEvent.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Script> 
        <![CDATA[ 
            import mx.controls.Alert; 
 
            public function pane2_initialize():void { 
                Alert.show("Pane 2 has been created."); 
            } 
        ]]> 
    </fx:Script> 
 
    <mx:Accordion width="200" height="100" creationPolicy="auto"> 
        <mx:VBox id="pane1" label="Pane 1"> 
            <mx:Label text="This is pane 1."/> 
        </mx:VBox> 
        <mx:VBox id="pane2" 
            label="Pane 2" 
            creationComplete="pane2_initialize();"> 
            <mx:Label text="This is pane 2."/> 
        </mx:VBox> 
    </mx:Accordion> 
</s:Application>

All containers support the enabled property. By default, this property is set to true to enable user interaction with the container and with the container's children. If you set enabled to false, Flex dims the color of the container and of all its children, and blocks user input to the container and to all its children.

You use the defaultButton property of a container to define a default Button control within a container. Pressing the Enter key while focus is on any control activates the Button control as if it was explicitly selected.

For example, a login form displays TextInput controls for a user name and password and a submit Button control. Typically, the user types a user name, tabs to the password field, types the password, and presses the Enter key to submit the login information without explicitly selecting the Button control. To define this type of interaction, set the defaultButton property of the Form control to the id of the submit Button control, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\intro\ContainerDefaultB.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[ 
            public function submitLogin():void { 
                text1.text="You just tried to log in."; 
            } 
        ]]> 
    </fx:Script> 
 
    <s:Panel title="Default Button Example"> 
        <s:Form defaultButton="{mySubmitBtn}"> 
            <s:FormItem label="Username:"> 
                <s:TextInput id="username" width="100"/> 
            </s:FormItem> 
            <s:FormItem label="Password:"> 
                <s:TextInput id="password" width="100" 
                    displayAsPassword="true"/> 
            </s:FormItem> 
            <s:FormItem> 
                <s:Button id="mySubmitBtn" label="Login" 
                    click="submitLogin();"/> 
            </s:FormItem> 
        </s:Form> 
    </s:Panel> 
    <s:Label id="text1" width="150"/> 
</s:Application>

For example, the default layout of the Group container is BasicLayout, which means you must set the position of each container child. For the SkinnableContainer container, the default layout is BasicLayout. You can use any of the layout classes with the Spark containers.

For more information, see Using Spark Containers.

The Spark Group, DataGroup, and BorderContainer containers do not support skinning. All other Spark containers support skinning so that you can control the visual aspects of the container.

For more information, see Creating Spark Skins.

<?xml version="1.0" encoding="utf-8"?> 
<!-- containers\spark\SparkNoViewportNoSB.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
  
    <s:Group width="100" height="100">  
        <s:Image width="300" height="400" 
            source="@Embed(source='/assets/logo.jpg')"/> 
    </s:Group>         
</s:Application> 

The size of the Image control is larger than that of its parent Group container. By default, the child extends past the boundaries of the parent container.

Rather than allow the child to extend past the boundaries of the parent container, you can clip the child to the container boundaries. With clipping enabled, you can control the part of the underlying image to show in the container. To clip the children to the container boundaries, use a viewport and scroll bars.

All MX containers have a predefined layout. Some containers, such as Application and Panel do let you switch among several possible layouts, but most containers do not. For example, the VBox container always lays out its children in a vertical column, and the Tile container always lays out its children multiple rows and columns.

MX containers support skinning so that you can control the visual aspects of the container. For more information on skinning MX containers, see Creating Skins.

MX containers support automatic scroll bars, which let you display an object that is larger than the available screen space or display more objects than fit in the current size of the container, as the following image shows:

A.

Image at full size

B.

Image in an HBox container

Automatic scroll bars appear by default when the container children are larger than the container, and the clipContent property of the container is true. The default value of clipContent is true.

In the following example, you use an HBox container to let users scroll an image, rather than rendering the complete image at its full size. In this example, you explicitly set the size of the HBox container to 75 by 75 pixels, a size smaller than the imported image. If you omit the sizing restrictions on the HBox container, it attempts to use its default size, which is a size large enough to hold the image:

<?xml version="1.0"?> 
<!-- containers\intro\HBoxScroll.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <mx:HBox width="75" height="75"> 
        <mx:Image source="@Embed(source='assets/logo.jpg')"/> 
    </mx:HBox> 
</s:Application>

By default, Flex draws scroll bars only when the contents of a container are larger than that container. To force the container to draw scroll bars, you can set the horizontalScrollPolicy and verticalScrollPolicy properties to on.

Flash Player maintains a tree of visible (or potentially visible) objects that make up your application. The root of the tree is the Spark Application or MX Application object, and child containers and components are branches and leaf nodes of the tree. That tree is known as the display list. When you add child components to a container or remove child components from a container, you are adding and removing them from the display list. You can also change their relative positions by changing their positions in the display list.

Although the display list is a tree rooted at the top of the application, when you manipulate a container's children by 's methods and properties, you only access the container's direct children. Treat the container's children as items in a list, where the first child has an index of 0.

To create a component instance at run time, you define it, set any properties, and then add it as a child of a parent container by calling the addElement() or addChild() method on the parent container.

The addElement() method has the following signature:

addElement(element:IVisualElement):IVisualElement

The element argument specifies the component to add to the container.

The addChild() method has the following signature:

 addChild(child:DisplayObject):DisplayObject

The child argument specifies the component to add to the container.

For example, the following application creates a Group container with an Button control called myButton:

<?xml version="1.0"?> 
<!-- containers\intro\ContainerAddChild.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Script> 
        <![CDATA[ 
            import spark.components.Button; 
 
            public function addButton():void { 
                var myButton:Button = new Button(); 
                myButton.label = "New Button"; 
                myGroup.addElement(myButton); 
            } 
        ]]> 
    </fx:Script> 
    <s:Group id="myGroup" initialize="addButton();"/> 
</s:Application>

This example creates the control when the application is loaded rather than in response to any user action. However, you could add a new button when the user presses an existing button, as the following example shows:

<?xml version="1.0"?> 
<!-- containers\intro\ContainerAddChild2.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Script> 
        <![CDATA[ 
            import spark.components.Button; 
 
            public function addButton():void { 
                var myButton:Button = new Button(); 
                myButton.label = "New Button"; 
                myGroup.addElement(myButton); 
            } 
        ]]> 
    </fx:Script> 
 
    <s:HGroup id="myGroup"> 
        <s:Button label="Add Button" click="addButton();"/> 
    </s:HGroup> 
</s:Application>

You use the removeElement() or removeChild() method to remove a control from a container. If the child is no longer referenced anywhere else in your application after the call, it gets destroyed by a garbage collection process. The following example removes a button from the application when the user presses it:

<?xml version="1.0"?> 
<!-- containers\intro\ContainerRemoveChild.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    <fx:Script> 
        <![CDATA[ 
            public function removeButton():void { 
                myGroup.removeElement(myButton); 
            } 
            
            private function resetApp():void { 
                if (myGroup.numElements == 0) { 
                    myGroup.addElement(myButton); 
                } 
            } 
        ]]> 
    </fx:Script> 
 
    <s:Group id="myGroup"> 
        <s:Button id="myButton" 
            label="Remove Me" 
            click="removeButton();"/> 
    </s:Group> 
    <s:Button label="Reset" click="resetApp();"/> 
</s:Application>

For additional methods that you can use with container children, see the ActionScript 3.0 Reference for Apache Flex.

<?xml version="1.0"?> 
<!-- containers\intro\ContainerComponentsExample.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
      <![CDATA[ 
 
        // Import the CheckBox class. 
        import spark.components.CheckBox; 
 
        // Define a variable to hold the new CheckBox control. 
        private var myCheckBox:CheckBox; 
        
        // Define a variable to track if the CheckBox control 
        // is in the display list. 
        private var checkBoxDisplayed:Boolean = false; 
        
        public function addCB():void { 
            // Make sure the check box isn't being displayed. 
            if(checkBoxDisplayed==false){ 
                // Create the check box if it does not exist. 
                if (!myCheckBox) { 
                    myCheckBox = new CheckBox(); 
                } 
 
                // Add the check box. 
                myCheckBox.label = "New CheckBox"; 
                myGroup.addElement(myCheckBox); 
                checkBoxDisplayed=true; 
            } 
        } 
    
        public function delCB():void { 
            // Make sure a CheckBox control exists. 
            if(checkBoxDisplayed){ 
                myGroup.removeElement(myCheckBox); 
                checkBoxDisplayed=false; 
            } 
        }        
      ]]> 
    </fx:Script> 
 
    <s:VGroup id="myGroup"> 
        <s:Button label="Add CheckBox" 
            click="addCB();"/>          
        <s:Button label="Remove CheckBox" 
            click="delCB();"/> 
    </s:VGroup> 
</s:Application>

<?xml version="1.0"?> 
<!-- containers\intro\ContainerComponentsExample2.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Script> 
        <![CDATA[ 
 
            /* Import HBox class. */ 
            import mx.containers.HBox; 
    
            /* Array of created containers. */ 
            private var myHBoxes:Array = []; 
 
            public function addHBox():void { 
                /* Create new HBox container. */ 
                var newHBox:HBox = new HBox(); 
                newHBox.label="Label: " + String(myHBoxes.length); 
 
                /* Add it to the Accordion container, and to the 
                   Array of HBox containers. */ 
                myHBoxes.push(myAcc.addChild(newHBox)); 
            } 
 
            public function delHBox():void { 
                /* If there is at least one HBox container in the Array, 
                   remove it. */ 
                if (myHBoxes.length>= 1) { 
                    myAcc.removeChild(myHBoxes.pop()); 
                } 
            } 
      ]]> 
    </fx:Script> 
 
    <s:VGroup> 
        <mx:Accordion id="myAcc" height="150" width="150"> 
            <mx:HBox/> 
        </mx:Accordion> 
        
        <s:Button label="Add HBox" click="addHBox();"/> 
        <s:Button label="Remove HBox" click="delHBox();"/>       
    </s:VGroup> 
</s:Application>

You can control the order of children by adding them in a specific order. You can also control them as follows:

• By using the addElementAt() or addChildAt() method to specify where among the component's children to add a child

  Note: As with the addChild() method, although the child argument of the addChildAt() method is specified as type DisplayObject, the argument must implement the IUIComponent interface to be added as a child of a container. All Flex components implement this interface.

• By using the setElementAt() or setChildIndex() method to specify the location of a specific child among a component's children in the display list

The following example modifies the previous example. It uses the addElementAt() method to add the CheckBox control as the first child (index 0) of the VGroup. It also has a Reorder children button that uses the setChildIndex() method to move a CheckBox control down the display list until it is the last child in the VGroup container.

<?xml version="1.0"?> 
<!-- containers\intro\ContainerComponentsReorder.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
     
    <fx:Script> 
      <![CDATA[ 
 
        // Import the CheckBox and Alert classes. 
        import spark.components.CheckBox; 
        import mx.controls.Alert; 
 
        // Define a variable to hold the new CheckBox control. 
        private var myCheckBox:CheckBox; 
        
        // Define a variable to track if the CheckBox control 
        // is in the display list. 
        private var checkBoxDisplayed:Boolean = false; 
        
        public function addCB():void {  
            // Make sure the check box isn't being displayed. 
            if(checkBoxDisplayed==false){ 
                // Create the check box if it does not exist. 
                if (!myCheckBox) { 
                    myCheckBox = new CheckBox(); 
                } 
                // Add the check box as the first child of the container. 
                myCheckBox.label = "New CheckBox"; 
                myGroup.addElementAt(myCheckBox, 0); 
                checkBoxDisplayed=true; 
            } 
        } 
    
        public function delCB():void { 
            // Make sure a CheckBox control exists. 
            if(checkBoxDisplayed){ 
                myGroup.removeElement(myCheckBox); 
                checkBoxDisplayed=false; 
            } 
        } 
        
        public function reorder():void { 
        // Make sure a CheckBox control exists. 
            if(checkBoxDisplayed==true) 
            { 
                // Don't try to move the check box past the end 
                // of the children. Because indexes are 0 based, 
                // the last child index is one less 
                // than the number of children. 
                if (myGroup.getElementIndex(myCheckBox) < myGroup.numElements-1) 
                { 
                    // Increment the checkBoxIndex variable and use it to 
                    // set the index of the check box among the VBox children. 
                    myGroup.setElementIndex(myCheckBox, 
                        myGroup.getElementIndex(myCheckBox) + 1); 
                } 
            } 
            else { 
                Alert.show("Add the check box before you can move it"); 
            } 
        } 
      ]]> 
    </fx:Script> 
 
    <s:VGroup id="myGroup"> 
        <s:Button label="Add CheckBox" click="addCB();"/> 
        <s:Button label="Remove CheckBox" click="delCB();"/> 
        <s:Button label="Reorder children" click="reorder();"/> 
    </s:VGroup> 
</s:Application>

The following table describes the coordinate systems:

The following image shows these coordinate systems and how they relate to each other.

A.

Content bounds

B.

Component bounds

C.

Stage bounds

In some cases, you have to convert positions between coordinate systems. Examples where you convert between coordinates include the following:

• The MouseEvent class has properties that provide the mouse position in the global coordinate system and the local coordinates of the event target. You use the content coordinates to specify the locations in any container that uses absolute positioning, such as an MX Canvas container or a Spark container that uses the BasicLayout class. To determine the location of the mouse event within the Canvas container contents, not just the visible region, determine the position in the content coordinate system.

• Custom drag-and-drop handlers might have to convert between the local coordinate system and the content coordinate system when determining an object-specific drag action; for example, if you have a control with scroll bars and you want to know the drag (mouse) location over the component contents. The example in Example: Using the mouse position in a Canvas container shows this use.

• Custom layout containers, where you include both visual elements, such as scroll bars or dividers, and content elements. For example, if you have a custom container that draws lines between its children, you have to know where each child is in the container's content coordinates to draw the lines.

Often, you use mouse coordinates in event handlers; when you do, you should keep in mind the following considerations:

• When you handle mouse events, it is best to use the coordinates from the MouseEvent object whenever possible, because they represent the mouse coordinates at the time the event was generated. Although you can use the container's contentMouseX and contentMouseY properties to get the mouse pointer locations in the content coordinate system, you should, instead, get the local coordinate values from the event object and convert them to the content coordinate system.

• When you use local coordinates that are reported in an event object, such as the MouseEvent localX and localY properties, remember that the event properties report the local coordinates of the mouse relative to the event target. The target component can be a subcomponent of the component in which you determine the position, such as a UITextField inside a Button component, not the component itself. In such cases, convert the local coordinates into the global coordinate system first, and then convert the global coordinates into the content coordinates container.

contentMouseX

contentMouseY

contentToGlobal (point:Point):Point

contentToLocal (point:Point):Point

globalToContent (point:Point):Point

globalToLocal (point:Point):Point

localToContent (point:Point):Point

localToGlobal (point:Point):Point

The following example shows the use of the localToGlobal() and globalToContent() methods to determine the location of a mouse pointer within a Canvas container that contains multiple child Canvas containers.

This example is artificial, in that production code would use the MouseEvent class stageX and stageY properties, which represent the mouse position in the global coordinate system. The example uses the localX and localY properties, instead, to show how you can convert between local and content coordinates, including how first converting to using the global coordinates ensures the correct coordinate frame of reference.

<?xml version="1.0"?> 
<!-- containers\intro\MousePosition.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[ 
          import mx.controls.Alert; 
 
          // Handle the mouseDown event generated 
          // by clicking in the application. 
          private function handleMouseDown(event:MouseEvent):void { 
                 
            // Convert the mouse position to global coordinates. 
            // The localX and localY properties of the mouse event contain 
            // the coordinates at which the event occurred relative to the 
            // event target, typically one of the 
            // colored internal Canvas containers. 
            // A production version of this example could use the stageX 
            // and stageY properties, which use the global coordinates, 
            // and avoid this step. 
            // This example uses the localX and localY properties only to 
            // illustrate conversion between different frames of reference. 
            var pt:Point = new Point(event.localX, event.localY); 
            pt = event.target.localToGlobal(pt); 
                
            // Convert the global coordinates to the content coordinates 
            // inside the outer c1 Canvas container. 
            pt = c1.globalToContent(pt); 
               
            // Figure out which quadrant was clicked. 
            var whichColor:String = "border area"; 
              
            if (pt.x < 150) { 
                if (pt.y < 150) 
                    whichColor = "red"; 
                else 
                    whichColor = "blue"; 
            } 
            else { 
                if (pt.y < 150) 
                    whichColor = "green"; 
                else 
                    whichColor = "magenta"; 
            } 
                
            Alert.show("You clicked on the " + whichColor); 
          } 
        ]]> 
    </fx:Script> 
 
    <!-- Canvas container with four child Canvas containers --> 
    <mx:Canvas id="c1" 
        borderStyle="none" 
        width="300" height="300" 
        mouseDown="handleMouseDown(event);"> 
        
        <mx:Canvas 
            width="150" height="150" 
            x="0" y="0" 
            backgroundColor="red"> 
            <mx:Button label="I'm in Red"/> 
        </mx:Canvas> 
        <mx:Canvas 
            width="150" height="150" 
            x="150" y="0" 
            backgroundColor="green"> 
            <mx:Button label="I'm in Green"/> 
        </mx:Canvas> 
        <mx:Canvas 
            width="150" height="150" 
            x="0" y="150" 
            backgroundColor="blue"> 
            <mx:Button label="I'm in Blue"/> 
        </mx:Canvas> 
        <mx:Canvas 
            width="150" height="150" 
            x="150" y="150" 
            backgroundColor="magenta"> 
            <mx:Button label="I'm in Magenta"/> 
        </mx:Canvas> 
    </mx:Canvas> 
</s:Application>