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

  • 垂直ボックス【VBox】
  • 水平ボックス【HBox】

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

 今回から「コンテナ」に分類されるコンポーネントを紹介します。まだ,紹介していないコントロール系のコンポーネントもありますが,それらについてはまたおいおい紹介したいと思います。

 「コンテナ」というのは読んで字の如く「入れ物」で,今まで紹介したコントロールや,これから紹介する別のコンテナを入れることのできるクラスです。さて今回は,「レイアウトコンテナ」と呼ばれるコンポーネントの中でも,簡単でよく使う【mx.containers.VBox】コンポーネントと【mx.containers.HBox】コンポーネントを紹介します。これらはともに【mx.containers.Box】クラスを継承しており,さらにこのBoxクラスは【mx.core.Container】クラスを継承しています。この【Container】クラスこそが「コンテナ」の祖になります。

1.垂直/水平ボックス【VBox, HBox】

 今までのサンプルでも何度か使用したVBox(*1)とHBox(*2)をまとめて紹介します。VBoxの「V」は垂直(Vertical)を意味し,HBoxの「H」は水平(Horizontal)を意味します。つまり,VBoxは子オブジェクトを自動的に縦に並べ,HBoxは横に並べてくれるコンポーネントです。これは一度でもFlashをかじったことのある開発者なら「便利!」と感嘆したくなるのではないでしょうか。かくいう著者もとても便利だと思いました。

 では,実際にサンプルを見てみましょう(図1)。

図1:【VBox, HBox】サンプル(クリックすると別ウィンドウで表示します。ソースはこちら)

 上から順に

1-1.VBox / HBox ノーマル
1-2.VBox / HBox 枠付き
1-3.VBox / HBox 整列間隔
1-4.VBox / HBox 余白
1-5.VBox / HBox 整列位置
1-6.VBox / HBox + Spacer
1-7.VBox / HBox の挙動
1-8.VBox / HBox スクロールバー
1-9.VBox / HBox 背景
1-10.VBox / HBox 丸いコーナー
1-11.VBox / HBox ドロップシャドー
1-12.VBox / HBox イメージ背景
1-13.VBox / HBox 領域ごと無効化
1-14.VBox / HBox 領域ごと非表示1
1-15.VBox / HBox 領域ごと非表示2

となります。

 1-1.は,各々ボタンを三つ追加しただけの状態です。コードを見てみましょう(図2)。

図2:VBox / HBox のノーマルなMXMLコード

 このようにMXMLの子ノードとして別のビジュアル・コンポーネントを記述することで,子オブジェクトを簡単に追加できます。しかし,今までのコンポーネントでも子ノードを記述することがありました。あれはどういうことでしょうか。

 例えばDataGridです(図3)。

図3:DataGridのノーマルなMXMLコード

 コードをよーく見ると子ノードの「columns」の最初の文字が小文字であることがわかると思います。これはコンポーネントではなく属性であることを意味しています。また,「columns」は配列型なのでその子ノードの「DataGridColumn」は配列の各要素ということになります。

 このようにMXMLでは本質的なことを意識せずに感覚的にコーディングができるという利点があります。しかしながら,感覚的に理解しているだけでは,行き詰ってしまうことがよくあります。しっかりとMXMLの基本を押さえ,ActionScript 3も理解したほうが良いと著者は思います。

 1-2.では枠(境界線)を付けてみました。VBox / HBoxで枠を付けることはあまりないと思うのですが,以後のサンプルでは枠が表示されているほうが設定されているスタイルの効果が良くわかると思うからです。

 枠を表示するには属性ではなく「borderStyle」スタイルの値を「none」以外の値にします。サンプルでは「solid」という普通の線を設定しています。このほかに「inset」(立体的に窪んでいるような視覚効果),「outset」(立体的に隆起しているような視覚効果)があります。HTMLのCSSと同じです。また,枠の色は「borderColor」スタイルで指定できます。

 1-3.は整列間隔を変更しています。縦の整列間隔を指定するのが「verticalGap」スタイル(初期値は6),横の整列間隔を指定するのが「horizontalGap」スタイル(初期値は8)になります。

 1-4.はVBox / HBox と子オブジェクトの間に余白を設定しています。上部の余白は「paddingTop」,左側の余白が「paddingLeft」,右側の余白が「paddingRight」,下部の余白が「paddingBottom」で指定できます。

 1-5.はVBox / HBox の「width」属性,「height」属性を指定することで大きさを固定にしています。通常は「autoLayout」属性が「true」になっているので子オブジェクトの状態に応じて自動的に大きさが決定されます。このサンプルでは子オブジェクト全体よりも大きくしています。

 そして,子オブジェクト全体の縦位置を「verticalAlign」スタイルで,横位置を「horizontalAlign」スタイルで指定しています。「verticalAlign」スタイルで指定できるのは「top」(上),「middle」(中央),「bottom」(下)。「horizontalAlign」スタイルで指定できるのは「left」(左),「center」(中央),「right」(右)です。

 1-6.では「Spacer」コンポーネントを子オブジェクトに割り込ましています(*3)。「Spacer」というのはそのままの意味で「空白」です。VBoxやHBoxで等間隔にしか余白を設定できません。しかし,実際には部分的に間隔を変えたい時があると思います。そんな時にこの「Spacer」を使用します。ただし,「Spacer」の前後にも「verticalGap」,又は「horizontalGap」が存在するので間隔を調整するときはそのことも考慮する必要があります。

 1-7.では,動的に子オブジェクトを追加/削除したときの挙動を知ることができます。「ボタンを追加」「ボタンを削除」を適当にクリックしてみてください。子オブジェクト全体の状態に応じて自動的にVBox / HBox の大きさが変化すると思います。Flashでは自分で計算する必要があったのですが,Flexでは自動的にしてくれます。

 子オブジェクトの追加/削除を行うActionScript 3のコードを見てみましょう(図4)。

図4:子オブジェクトの追加/削除のActionScript 3コード

 子オブジェクトの追加には「addChild」メソッド,削除には「removeChildAt」メソッドを使用しています。「addChild」メソッドでは子オブジェクトのインスタンスを引数に渡しています。

 「removeChildAt」メソッドでは,削除したい子オブジェクトの位置インデックスを引数に渡します。位置インデックスというのはVBoxの場合は一番上の子オブジェクトのインデックスが「0」で下に行くにしたがってカウントアップされていきます。HBoxの場合は一番左が「0」で右に行くにつれてカウントアップしていきます。サンプルではVBox / HBox の「numChildren」という子オブジェクトの数を保持している属性を使用して,最後部の子オブジェクトを削除するようにしています。

 「addChild」メソッドのほかに「addChildAt」というメソッドが有り,子オブジェクトのインスタンスと追加する位置インデックスを引数に渡すことができます。また,「removeChildAt」メソッドのほかに「removeChild」というメソッドがあり,位置インデックスではなく子オブジェクトのインスタンスを引数に渡すことで,その子オブジェクトを削除することが可能です。

 ここで「削除」という表現を使用しましたが,これはコンテナから削除するだけでメモリーから完全に削除するわけではありません。実際にはある条件を満たすことで起動するガーベジ・コレクション(*4)によってメモリーから削除されます。

 1-8.は子オブジェクト全体よりもVBox / HBox を小さくしています。その結果,自動的にスクロールバーが表示されています。縦スクロールバーが表示されるとその幅のぶんだけVBoxの表示領域が狭くなり,そのうえ横スクロールバーも表示されないので子オブジェクトの横全体表示ができなくなります。ですから,子オブジェクトの横全体を表示したい場合は明示的に幅も指定する必要があります。これはHBoxでも同様です。

 縦スクロールバーを表示したくない場合は「verticalScrollPolicy」属性に「off」を指定します。逆に常に表示したい場合は「on」にします。初期値は「auto」です。横スクロールバーの場合は「horizontalScrollPolicy」属性で指定します。

 1-9.では背景を設定しています。「backgroundAlpha」スタイルで背景を不透明にしています。指定できる値はゼロから1.0で,1.0が不透明です。また,「backgroundColor」スタイルで背景色を指定できます。

 1-10.では枠の角を丸くしています。「cornerRadius」スタイルで丸みの角度を指定できます。指定できる値はゼロから20で,ゼロが丸み無し,つまり直角の角になります。「borderStyle」スタイルが「solid」の時のみ使用できます。

 1-11.はドロップシャドー,要するに影のような視覚効果を追加しています。「dropShadowEnabled」スタイルを「true」にすることで,まず影を有効にします。「dropShadowColor」スタイルで影の色を指定します。「shadowDirection」で影の方向を指定します。指定できる方向は「left」(左),「center」(中央),「right」(右)です。「shadowDistance」スタイルで影の長さを指定します。この値がプラスの場合は下方+「shadowDirection」スタイルの方向に影が表示され,マイナスの場合は上方+「shadowDirection」の方向に影が表示されます。

 1-12.は背景にJPG画像ファイルを指定しています。「backgroundImage」スタイルに「@Embed(source='/assets/back01.png')」とコーディングすることでSWFに画像を埋め込み,かつ,埋め込んだ画像を背景に設定しいます。

 1-13.はVBox / HBox の「enabled」属性を「false」にすることで,ボックス領域ごと無効化するサンプルです。ボックス領域が無効状態になるとその子オブジェクトをクリックできなくなります。これは同じ情報の領域を一度に無効化したいときに便利です。「disabledColor」スタイルで無効化した状態で表示されるマスク領域の色を指定でき,「disabledOverlayAlpha」スタイルでその透明度を指定できます。

 1-14.はVBox / HBox の「visible」属性の挙動のサンプルです。「visible」を「false」にすると非表示になるのですが,コンポーネントが見えなくなるだけで,その領域は確保されたままです。ちょっと,期待する挙動ではないのではないでしょうか。

 1-15.では「1-14」でできなかった,HTMLのCSSでいう「display = none」を,発想を変えて実装しています。「visible」を「false」にして消えないのであれば「height」や「width」を「0」にすればいいのでは,と思われるかもしれませんが,「verticalGap」や「horizontalGap」は消すことができません。微妙に間隔が違う状態になってしまいます。そこで,「削除」してしまおう,というのがこのサンプルの発想です。

 ただ,削除しっぱなしではもともとそこにあったものが本当になくなってしまうので,削除した子オブジェクトをプライベート変数に格納しておき,表示を実行するときにそれを「addChild」してボックス内の状態を維持したまま復元しています。ただし,addChildするときは「どこに」というのを指定する必要があります。そのまま「addChild」すると最後部に追加されてしまいます。そこで,このサンプルでは「addChildAt」を使用しています。

●勉強会等の告知

Flexアカデミー説明会 + 第20回Flex2勉強会@大阪

 特定非営利活動法人ILA(インターネット・ラーニングアカデミー)の活動の一つとして「Flexアカデミー分科会」が創設されました。「Flexアカデミー」というのはAdobe Flash技術の統合開発環境であるAdobe Flex を活用できる人材育成カリキュラムです。その説明会をまずは関西地区で,2007年7月28日(土)の10時から開催いたします。場所は大阪工業大学(大宮キャンパス)です。その後,Flex2勉強会@大阪を同大学で実施いたします。Flex2勉強会@大阪では著者も発表者として参加します。

 Flexアカデミー説明会は「Flexを授業に導入することに興味をお持ちの学校関係者の方々(大学,専門学校等)」,Flex2勉強会@大阪は「Flexに興味を持っているひとなら誰でも(上記の学校関係者を含む)」を対象にしています。詳細はこちらをご覧ください。

第21回Flex勉強会@東京

 今回,大日本印刷様のご厚意により昨年オープンしたばかりのDNP五反田ビル内にあるショールームの大きな会場をお借りすることができました。開催日時は8月4日(土)の13時から17時。今回の主題は今までと少し違い「デベロッパーとデザイナーの協業を考える」とし,パネル・ディスカッションもあります。

 また,会場内にはICタグとFlash技術の連携する次世代の美術館「ルーヴル - DNP ミュージアムラボ」プロジェクトが開催されています。勉強会当日は美術館見学ツアーを別途行います。詳細はこちら