Changing the appearance of a component at run time -- Flex 2.01

You can modify the look, size, or position of a component at run time by using several component properties, styles, or ActionScript methods, including the following:

You can set the x and y properties of a component only when the component is in a container that uses absolute positioning; that is, in a Canvas container, or in an Application or Panel container that has the layout property set to absolute. All other containers perform automatic layout to set the x and y properties of their children using layout rules.

For example, you could use the x and y properties to reposition a Button control 15 pixels to the right and 15 pixels down in response to a Button control click, as the following example shows:

<?xml version="1.0"?>
<!-- components\ButtonMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="150"
    height="120" 
    layout="absolute">

    <mx:Script>
        <![CDATA[
            public function moveButton():void {
                myButton.x += 15;
                myButton.y += 15;
            }
        ]]>
    </mx:Script>

    <mx:Button id="myButton" 
        x="15" 
        y="15" 
        label="Move"
        click="moveButton();"/>
</mx:Application>

The following example shows the initial image and the results after the user clicks the button each of two times:

In this application, you can move the Button control without concern for other components. However, moving a component in an application that contains multiple components, or modifying one child of a container that contains multiple children, can cause one component to overlap another, or in some other way affect the layout of the application. Therefore, you should be careful when you perform run-time modifications to container layout.

You can set the width and height properties for a component in any type of container. The following example increases the width and height of a Button control by 15 pixels each time the user selects it:

<?xml version="1.0"?>
<!-- components\ButtonSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="150"
    height="150">

    <mx:Script>
        <![CDATA[
            public function resizeButton():void {
                myButton.height = myButton.height + 15; 
                myButton.width = myButton.width + 15;           
            }
        ]]>
    </mx:Script>

    <mx:VBox 
        borderStyle="solid" 
        height="80" 
        width="100" >

        <mx:Button id="myButton" 
            label="Resize" 
            click="resizeButton();"/>    
    </mx:VBox>
</mx:Application>

This example results in the following progression when the user clicks the button:

If the container that holds the Button does not use absolute positioning, it repositions its children based on the new size of the Button control. The Canvas container and Panel and Application containers with layout="absolute" perform no automatic layout, so changing the size of one of their children does not change the position or size of any of the other children.