実行時におけるコンポーネントの外観の変更 -- Flex 2.01

次のようなコンポーネントプロパティ、スタイル、または ActionScript メソッドを使用して、実行時にコンポーネントの外観、サイズ、または位置を変更できます。

コンポーネントの x および y プロパティは、コンポーネントが絶対配置を使用するコンテナに含まれている場合にのみ設定できます。絶対配置を使用するコンテナとは、Canvas コンテナと、layout プロパティが absolute に設定されている Application コンテナまたは Panel コンテナを指します。それ以外のコンテナでは、レイアウト規則を使用して自動レイアウトが実行され、子の x および y プロパティが設定されます。

たとえば次の例のように、Button コントロールの click イベントに応答し、x および y プロパティを使用して Button コントロールの位置を下方向および右方向にそれぞれ 10 ピクセルずつ移動することができます。

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

このアプリケーションの初期イメージと、ユーザーがボタンを 1 回および 2 回クリックしたときの結果は次のようになります。

このアプリケーションでは、他のコンポーネントを考慮することなく Button コントロールを移動できます。しかし、アプリケーションに含まれている複数のコンポーネントのうちの 1 つのコンポーネントを移動したり、コンテナに含まれている複数の子のうちの 1 つの子を移動すると、コンポーネントが重なり合ったり、アプリケーションのレイアウトが影響を受けたりする可能性があります。したがって、コンテナのレイアウトを実行時に変更する場合は注意が必要です。

コンポーネントの width および height プロパティは、コンテナの種類に関係なく設定できます。次の例では、ユーザーが Button コントロールをクリックするたびに、Button コントロールの width と height の値を 15 ピクセルずつ増やしています。

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

ユーザーがボタンをクリックすると、次のような結果になります。

Button コントロールを格納しているコンテナが絶対配置を使用していない場合は、Button コントロールの新しいサイズに基づいて、コンテナの子の位置が変更されます。Canvas コンテナと、layout="absolute" が設定された Panel および Application コンテナでは自動レイアウトは行われないので、1 つの子のサイズを変更しても、他の子の位置やサイズは変更されません。