それでは、商品の選択画面と商品注文フォームを見ていきます。今回は、商品注文フォームが中心で、商品の選択画面(Webカタログ)は、簡単なものを作ります。ユーザー(お客)がこのアプリケーションを使う利用手順を考えてみます。

ユーザーは、まず、商品の一覧(カタログ)から、購入する商品を選択します。そして、購入する商品が決まったら、[注文する]というボタンを押します。すると、注文フォームが現れて、そこに名前や住所などを入力します。ユーザーの情報入力が終了すると、サーバに注文情報が送られて、メールで注文がショップオーナーに届くという具合です(メール送信にPHPを利用)。

そのため、大きく分けて、「商品一覧のページ」と「ユーザー(お客)情報の入力ページ」の2つが必要になります。商品一覧では、商品の画像と、値段やメモなどを表示します。そして、注文が決定した後に、ユーザー情報の入力ページを表示します。

商品の一覧のページ

ユーザー情報の入力ページ

複数ページを持つアプリケーションの作成を考えてみます。商品ページとお客情報入力ページのように画面上に複数のページが必要な場合、Flex 2 Builderには、ページを切り替えるためのコンポーネントが、いくつか用意されています。今回、その中から、ViewStackコンポーネントを利用します。ViewStackを使うと、任意のタイミングで表示するページを入れ替えることができます。

Flex Builder 2の画面設計は、以下のような、XMLベースの言語である「MXML」で行います。<mx:Application>タグの内側に、ViewStackを配置し、その中にCanvasを複数配置することで、複数のページを作成できます(*Flex Builder 2のデザインビューを利用することで、コントロールを配置可能)。

コントロールとはボタンやリストボックス、テキストボックスなどユーザーからの操作を前提としたコンポーネントです。

ViewStackコンポーネント 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:ViewStack id="main_view" width="100%" height="100%">
        <mx:Canvas id="list_page" width="100%" height="100%">
            <!-- ここに商品の一覧 -->
        </mx:Canvas>
        <mx:Canvas id="form_page" width="100%" height="100%">
            <!-- ここにフォームの一覧 -->
        </mx:Canvas>
    </mx:ViewStack>
</mx:Application>

各コントロールには、id属性を付けておきます。すると、スクリプトの中で、idを直接指定して制御できます。例えば、表示するページを切り替えてみます。ViewStackコントロールに「main_view」という名前、また各ページに「list_page」「form_page」という名前を付けます。そして、スクリプトからページを切り替えるようなプログラムは、以下のように記述します。

main_view.selectedChild = form_page;

ViewStackコンポーネントではなく、TabNavigatorコンポーネントを利用する場合は次のようにページの上部にタブが表示され、タブをクリックすることでページを切り替えられるようになります。

TabNavigatorを使うとタブでページの切り替えができます

ViewStackでは、ページを切り替えられるのですが、タブなどのUIは提供されません。そこで、TabNavigatorを使うと、先の画面のように、タブが表示され、ユーザーが自身でページを切り替えられます。以下のコードをソースで実行すると図のような画面になります。

TabNavigatorコンポーネント

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:TabNavigator id="main_view" width="100%" height="100%">
        <mx:Canvas id="list_page" width="100%" height="100%">
            <!-- ここに商品の一覧 -->
        </mx:Canvas>
        <mx:Canvas id="form_page" width="100%" height="100%">
            <!-- ここにフォームの一覧 -->
        </mx:Canvas>
     </mx:TabNavigator>
 </mx:Application>