コードの記述、そして完成!

さて、あとはコードを完成させるだけだ。先ほどCatalystで行った変更(複数の写真画像を一つのコンポーネントとしてまとめる)の結果をコードで確認してみよう。

<DesignLayer d:userLabel="background">
    <BitmapGraphic width="352" height="416" source="@Embed('sample1_assets/max.assets/images/background.png')" d:userLabel="background" resizeMode="scale" top="171.5" left="242.5"/>
    <!-- 表示する写真を一つにまとめたカスタムコンポーネント。IDは「photos」とした -->
    <components:CustomComponent1 id="photos"left="268" top="246"/>
    <BitmapGraphic width="300" height="201" source="@Embed('sample1_assets/max.assets/images/inner_line.png')" d:userLabel="inner_line" resizeMode="scale" top="246.5" left="268.5"/>
    <TextGraphic fontFamily="Kozuka Gothic Pro" fontSize="20" color="0xffffff" whiteSpaceCollapse="preserve" d:userLabel="Adobe MAX 2008 Photo Gallery" top="204.5" left="271.5">
        <content><p><span>Adobe MAX 2008 Photo Gallery</span></p></content>     </TextGraphic>
</DesignLayer>

コメントを付与された部分が、ボタンで切り替える対象となる画像をまとめたコンポーネントだ。どうやら「CustomComponent1」というコンポーネントがポイントだ。このタグには、「photos」というIDを付けておくものとする。

CustomComponent1.mxmlファイルを確認してみると、Groupタグを用いて複数のBitmapGraphic要素が一つにまとめられているのがわかる。

<Group xmlns="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" resizeMode="scale">
    <BitmapGraphic width="300" height="201" source="@Embed('sample1_assets/max.assets/images/photo3.png')" d:userLabel="photo3" resizeMode="scale" top="0" left="0"/>
    <BitmapGraphic width="300" height="201" source="@Embed('sample1_assets/max.assets/images/photo2.png')" d:userLabel="photo2" resizeMode="scale" top="0" left="0"/>
    <BitmapGraphic width="300" height="201" source="@Embed('sample1_assets/max.assets/images/photo1.png')" d:userLabel="photo1" resizeMode="scale" top="0" left="0"/>
</Group>

NEXTボタンやPREVIOUSボタンを押されたら、これらのBitmapGraphicの重なり順を変えてやれば良い。以下のコードを見れば、処理は一目瞭然だろう。

import mx.events.FlexEvent;

protected function previousButton_clickHandler(event:MouseEvent):void
{
    // PREVIOUSボタンを押されたら、重なり順が一番下にある写真を一番上に
    photos.setItemIndex(photos.getItemAt(photos.numItems - 1), 0);
}

protected function nextButton_clickHandler(event:MouseEvent):void
{
    // NEXTボタンを押されたら、重なり順が一番上にある写真を一番下に
    // (2番目の写真が可視になる)
    photos.setItemIndex(photos.getItemAt(0), photos.numItems - 1);
}

まとめ

以上で、開発者が行う作業も完了し、アプリケーションは晴れて完成した。今回の内容でポイントとなった部分を、もう一度簡単におさらいすると、以下のようになる。

  • Catalystで作成したプロジェクト(FXPファイル)は、Gumboでインポートすることが可能。これにより、デザイナの成果物をそのまま開発フェーズのインプットとすることができる

  • デザイナが意識する必要はあまりないが、Catalystを用いて編集しているのは、実はMXMLファイルである。つまり、デザイナはFlexの知識を必要とすることなくRIAのデザインを行えるし、開発者はFlexの知識さえあれば、デザインを損なうことなくアプリケーションに振舞いを追加していくことができる

  • デザインに対する変更を行って、再度Gumboに取り込むことも可能。その際、変更が衝突したファイルに関してはマージを行うための仕組みが用意されている

  • プレビュー版を触った限りでは、開発者もCatalystを用いて修正を行った方が良い場面があるように感じた

今回をもって本シリーズは最終回となる。細かい部分にはあまり言及せず、Catalystによって実現されるワークフローに焦点を当てて解説したが、いかがだったであろうか。

本特集の内容は、Adobe MAX 2008参加者にのみ配布されたプレビュー版を元に執筆したため、読者の皆さんが実際に試すことができるようになるのはもう少し先になるだろう(Catalystは、2009年中にパブリックβ版がリリースされる予定)。それでも、Flash Catalystという新しいコンセプトの製品が持つ可能性を、少しでもお伝えしたくて筆を取らせていただいた。読者諸兄のFlash Catalystについての理解が少しでも深まれば、とても嬉しく思う。