Apache Flexで領域をドラッグ＆ドロップで変更する

はじめに

Apache Flexのmx:VDividedBox、mx:HDividedBoxの使い方を簡単にまとめます。
領域をドラッグ＆ドロップで変更することで、領域の高さや幅を可変にすることができます。

垂直に分割（mx:VDividedBox）

2つの領域の間にドラッグ可能な区切り線が表示されます。

区切り線をドラッグして変更したい場所まで移動します。

区切り線をドロップすると領域の高さが変更されます。

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="400" height="300">

    <fx:Style>
        * { 
            font-family: "Meiryo";
        }
    </fx:Style>

    <mx:VDividedBox left="10" top="10" right="10" bottom="10">
        <s:Group width="100%" height="70%">
            <s:TextArea  left="0" top="0" right="0" bottom="0" />
        </s:Group>
        <s:Group width="100%" height="30%">
            <s:TextArea  left="0" top="0" right="0" bottom="0" />
        </s:Group>
    </mx:VDividedBox>
</s:WindowedApplication>

水平に分割（mx:HDividedBox）

水平に分割する場合も同様です。