今回取り上げるコンポーネント

  • タイトルウィンドウ【TitleWindow】

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です（本稿執筆時点では【9,0,47,0】が最新）。こちらから最新のFlashPlayer9をインストールしてください。また，インストール後はブラウザの再起動が必要です。インストールされているFlash Playerのバージョンを確認するにはこちら。

　今回は前回の「Panel」コンポーネントを継承した「mx.containers.TitleWindow」を紹介します（＊1）。パネル・コンポーネントの右上に，「×」印の「クローズボタン（CloseButton）」が付加されたコンポーネントです。ただ，実はこの「CloseButton」の実体となるボタンは，Panelに定義されていて，かつ，常にインスタンス化されます。Panelを使用しているときは単に表示されていないだけの状態です。

　では，TitleWindowでは何をしているかというと，「showCloseButton」属性が定義されているだけです。この属性が「true」の時に継承元のPanelは「CloseButton」を表示するようになります（＊2）。今回はサンプルを三つ用意しました。

サンプル1

　前回のPanelのサンプル・コードで，「Panel」という文字をすべて「TitleWindow」に置き換え，「showCloseButton」属性を付加してコンパイルしてみました。実際にサンプルを見てみましょう（図1）。

図1：【TitleWindow】サンプル1（クリックすると別ウィンドウで表示します。ソースはこちら）

　右上に「×」印のボタンが付加されただけで，前回のサンプルと何も変わりません。「TitleWindow」と「Panel」と名前こそ違うけれども，ほぼ同じものだと考えて問題ありません。

サンプル2

　「CloseButton」の見た目の変更と「Close」イベントのサンプルです。では，サンプルを見てみましょう（図2）。

図2：【TitleWindow】サンプル2（クリックすると別ウィンドウで表示します。ソースはこちら）

　上側のサンプルは「CloseButton」の見た目を変更しています。「CloseButton」のサイズは縦横ともに16pxで，セットした画像などはそのサイズに自動調整されます。「closeButtonDisabledSkin」StyleにはTitleWindowの「enable」属性が「false」になったときに表示される画像を，「closeButtonOverSkin」StyleにはCloseButtonにマウスカーソルが重なったときに表示する画像を，「closeButtonDownSkin」StyleにはCloseButtonをクリックしたときに表示する画像を，「closeButtonUpSkin」Styleには前述のどの状態にも当てはまらない時に表示する画像をセットします。

　下側のサンプルは「close」イベントに独自の関数を割り当てています。もちろん，このイベントは「CloseButton」をクリックしたときに送出されるイベントです。サンプルでは「CloseButton」をクリックするとTitleWindowを非表示にしています。

　さて，なぜ「CloseButton」なのでしょうか？ それは次のサンプルで納得いただけると思います。

サンプル3

　ここから少しだけ実践的になります。PanelやTitleWindowの見た目から思いつくのがポップアップです。Flexではポップアップが非常に簡単にできます。ただ，そこにデータが絡みだすと少し考える必要があります。では，実際にサンプルを見てみましょう（図3）。

図3：【TitleWindow】サンプル3（クリックすると別ウィンドウで表示します。ソースはこちら）

上から順に

3-1．ポップアップを表示
3-2．ポップアップに任意の値を渡す
3-3．ポップアップ終了時に値を引き出す
3-4．「OK」が押されたときのみ値を引き出す
3-5．データバインディングで自動更新

となります。

　3-1．は，単純にポップアップを表示するだけのサンプルです。ただし，サンプルのメインとなるMXMLファイル以外に「MyPopup01.mxml」を利用しています。この「MyPopup01」カスタムコンポーネントがポップアップで表示される画面（ウィンドウ）になります。そしてもちろん「MyPopup01」はTitleWindowをベース・コンポーネント（＝継承）としています。

　ポップアップ表示するのに必要なコードはこの2行です（図4）。

図4：ポップアップを表示するコード

　「PopUpManager」というマネージャ系クラスの「createPopUp」関数を使用します（＊3）。この関数の第1引数にはポップアップの親オブジェクトを指定し，第2引数にはポップアップのベースとなるクラスを指定し，第3引数でモーダルかそうでないかを指定します（＊4）。また，戻り値としてポップアップとして指定したクラスのインスタンスが返ってきます（＊5）。そのインスタンスを「centerPopUp」関数の引数に渡すことでポップアップがブラウザの中央に表示されます。

　「MyPopup01」ではCloseButtonがクリックされた時に実行する独自の関数の中でPopUpManagerの「removePopUp」関数をコールしています。引数には自分自身をあらわす「this」を渡しています（図5）。

図5：ポップアップの削除