今回取り上げるコンポーネント
- HDividedBox, VDividedBox
- Canvas
今回は本連載第21回のサンプル・サイトで使用したVDividedBoxとそれと同系列のHDividedBox，そしてCanvasについて解説します。
HDividedBox/VDividedBoxはどちらも「mx.containers.DividedBox」を継承しています。特に独自の機能を有しているわけではなく，DividedBoxにおける用途を特化したクラスになります（＊1，＊2，＊3）。まず，HDividedBoxについて解説し，次にVDividedBoxを解説します。ただし，後者については違う部分のみです。最後にCanvasについて解説します。
HDividedBox
では，まずHDividedBoxのサンプルを見てみましょう（図1）。
図1：HDividedBox サンプル（クリックすると別ウィンドウで表示します。ソースをこちらでダウンロードできます）
上から順に
1-1．ノーマル
1-2．複数の区切り
1-3．リアルタイムに変更を反映
1-4．区切りにマウスオーバーした時のマウスカーソル
1-5．区切りのスキン
1-6．リアルタイムに変更を反映2
1-7．多重構造
となります。
1-1．は単純に子コンポーネントとしてCanvasを二つ配置しただけの状態です。HTMLでいう「frameset」に似ていますが子コンポーネントの幅指定は子コンポーネントで設定します。また，コンテナ系クラスである子コンポーネントの大きさに自動的に合わせるということがHDividedBoxではできませんので，必ずHDividedBox自身の幅/高さを指定する必要があります。
1-2．は区切りが二つ表示されていますが，HDividedBox自体では特に設定する必要はありません。HDividedBoxが所有する子コンポーネントの数に合わせて自動的に区切りが発生します。
1-3．では区切りのドラッグ中に各子コンポーネントの幅が自動調整されます。これは「liveDragging」属性をtrueにすることで実現できます。初期値はfalseです。
1-4．ではマウスオーバー時のアイコンを変更しています。実際，既定のカーソルは小さく見づらいので大き目のカーソルに変更するほうが良いでしょう。「アイコン」といっても実際はPNGイメージを「horizontalDividerCursor」Styleに設定しています。
カーソルの位置がイメージの左上になっているのにお気づきになったでしょうか？ 小さいイメージであればあまり目立たないのですが，大きなイメージを使用すると良くわかると思います。画像を使用すると必然的に実際のカーソル位置が左上になってしまいます。
では，なぜ既定のカーソルは画像の中心になっているのでしょうか。Flashのオブジェクトには必ずそれ自体の座標系が存在し，原点が存在します。既定のカーソルは画像の中心が原点になるように調整されているクラスなのでカーソルが中心にあるように見えるのです（図2）。
図2：Flashオブジェクトの中心と画像の中心
残念ながら「Embed」ではこれを指定するすべがなく，Embedされた画像はコンパイル時にクラス化され左上が原点になってしまいます。カーソルが画像の中心に表示されるようにするにはFlexでそういうクラスを自作するか，Flash（8やCS3など）でそういうシンボルを作成する必要があります。Flexでも作れなくは無いですが，意外に面倒くさいコーディングが必要なので，Flashで作成するのが簡単だと思います。
1-5．では区切りのスキンを変更しています。これは「dividerSkin」Styleにスキン用のクラスを指定するか，サンプルのように画像を指定することで実現できます。ただし，注意点が二つあります。
一つ目については，図3を注意深くご覧ください。
図3：元の画像とスキン化された画像
スキン化された画像は元の画像を右に90度回転し，さらに左右反転されているように見えますね。これはなぜかはわかりません。
二つ目は，HDividedBoxの高さとスキン用画像の幅です。サンプルでは両方とも200ピクセルになっています。仮にHDividedBoxの高さのほうが小さいとしましょう，するとスキンがHDividedBoxからはみ出して表示されます。全く調整されないので注意してください。そもそも，区切りの"つまみ"のスキンなので仕方ないと言えば仕方ありません。
1-6．HDividedBoxの設定自体は「1-3」と全く同じです。ただ，子コンポーネントにレイアウト系のStyleを適用しています。区切りを動かしてみてください。ドラッグ中にCanvasのサイズが変更されるので,そのCanvasの子コンポーネントであるTextInputの配置もリアルタイムに変更されます（常に左右中央を維持，かつ，スクロールバーも自動的に表示されます）。
何が言いたいのかと言いますと，"パフォーマンス"です。レイアウトを自動調整するコンテナを使用している場合に「liveDragging」属性をtrueにしていると，各子コンポーネントにおいて配置やスクロールバーのための計算コードがドラッグを動かすたびに発生するということです。場合によっては動きが"カクカク"となってしまうことがあるので注意してください。
1-7．は当たり前なのですが，HDividedBox/VDividedBoxの多重構造はもちろんできるというサンプルです。
