Flex基礎講座

Flex基礎講座（パート1）:はじめてのFlexアプリケーション開発

MXMLを利用した簡易商品カタログ兼ショッピングカートの作成

2005/07/28 12:00

ポスト

Flexアプリケーションの実行

　FlexアプリケーションはWebブラウザ上で実行できます。FlexアプリケーションのURLはFlexをどのようにインストールしたかによって異なりますが、FlexをMacromedia JRunサーバーと統合してインストールした場合のURLは次のようになります。

http://localhost:8700/flex/

　なお、このチュートリアルで作成するアプリケーションは、次のURLでアクセスできるようにします。

http://localhost:8700/flex/flex_tutorials/firstapp.mxml

　「8700」の部分はFlexが稼働するポートの番号を示しています。なおFlexをJRunのフルバージョンや、その他のJ2EEアプリケーションサーバー上にインストールした場合は、このポート番号を変更する必要があります。

アプリケーションの作成

　これから作成する簡易版のショッピングカートでは、コーヒーのブレンドの一覧をComboBox（HTMLのselectコントロールのようなもの）を利用して表示することにします。また、データバインディングを利用して、ユーザーがブレンドを選択すると選択したブレンドの詳細が表示されるようにします。さらに、クリック時のハンドラを設定したButtonを利用して、ショッピングカート機能のListコントロールに選択したブレンドが追加されるようにします。

図1.このチュートリアルで作成するFlexアプリケーション

　カートを構築することによって、つぎにあげる項目の使用法が習得できます。

Applicationクラス
Panelコンテナ
Script要素
Array要素
Object要素
Label要素
Text要素
Buttonコントロール
ComboBoxコントロール
Listコントロール
ActionScript関数

Applicationオブジェクトの作成

　Flexアプリケーションのコードは、XMLの宣言とApplicationブロックから始まります。Applicationタグの中には、つぎに示すMXクラスライブラリの名前空間宣言を記述します。

xmlns:mx="http://www.macromedia.com/2003/mxml"

　なお、接頭辞のmxはこのライブラリのすべてのタグに対して使用します。

新規ファイルを作成し、ファイルを「flex_tutorials」ディレクトリに「firstapp.mxml」として保存します。

ファイルの最初に、つぎのXML宣言を追加します。

<?xml version="1.0"?>

XML宣言のつぎに、MXML名前空間の指定の入ったApplicationタグを追加します。

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>

アプリケーションをレイアウトするためのPanelの追加

　Flexアプリケーションの中で表示するテキストやコントロール、画像、各種メディアなどといった視覚要素は、通常、これらの入れ物となる「コンテナ」の中に配置します。ここでは、Panelという種類のコンテナを使用することにします。Panelコンテナは、アプリケーションの視覚要素全体を囲む場面で利用します。また、ここではPanelコンテナのtitle属性も指定します。title属性に設定した値は、パネル上部に自動的に含まれるタイトルバーに表示されます。

Applicationブロックの中にPanelブロックを追加し、title属性の値を「My First Flex App」とします。

<mx:Panel title="My First Flex App">
</mx:Panel>

ビューの見出しとなるLabelの追加

　単行のテキストを表示する際には、Label要素を使用します。Label要素には数々のプロパティがありますが、ここではラベル内に表示するテキストを指定するためのtext属性を使用します。

Panelブロックの中にLabel要素を追加し、属性を次のように設定します。

<mx:Label text="Coffee Blends"/>

ファイルを保存し、アプリケーションをブラウズしてみます。

コーヒーブレンドの種類を定義するオブジェクト配列の追加

　このアプリケーションのデータモデルとして、オブジェクトの配列をArray要素とObject要素を利用してアプリケーション内に作成します。各オブジェクトにはlabelとdataの2つのプロパティがあり、これらはオブジェクトのサブタグとして定義します。ここで定義するデータ構造は、後ほど紹介するComboBoxやListなどのコントロールが利用するdataProviderに対応しています。

　コントロールは、このチュートリアルで利用するデータオブジェクトよりはるかに複雑なものを扱えますが、ここではデータモデルをつぎに示す構文を利用した簡単なものにします。

<mx:Array id="identifier">
  <mx:Object>
      <label>literal string</label>
      <data>another literal string</data>
  </mx:Object>
</mx:Array>

　id属性は、Flexクラスのほとんどにおいて使用でき、クラスのインスタンスに対して固有の識別子を設定する際に利用します。なお、このidの値は、データバインディングやActionScriptを利用してオブジェクトを参照しない限り、設定する必要がありません。

　配列のような不可視の要素は、アプリケーションの任意の位置に記述できますが、コードの初めの方（視覚的な要素の前）に配置することが望ましいでしょう。

Applicationブロックの中のPanelの前に、つぎのオブジェクト配列を追加します。

<mx:Array id="coffeeArray">
    <mx:Object>
        <label>Red Sea</label>
        <data>Smooth and fragrant</data>
    </mx:Object>
    <mx:Object>
        <label>Andes</label>
        <data>Rich and pungent</data>
    </mx:Object>
    <mx:Object>
    <label>Blue Mountain</label>
    <data>Delicate and refined</data>
    </mx:Object>
</mx:Array>

コーヒーブレンドの種類を表示するComboBoxの追加

　FlexのComboBoxはHTMLのselectコントロールに似ていますが、HTMLよりパワフルな機能を提供します。アイテムを表示するには、dataProviderプロパティに値やオブジェクトの配列を設定します。この際、dataProviderブロックの中で配列を作成することもできますが、データを別の場所で作成/インポートし、このデータをdataProviderプロパティにバインドする方が実用的といえます。

<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>

　上のコードの波括弧（{ }）は、括弧内のコンテンツが単なる文字列ではなく、評価を必要とする式や変数であることをコンパイラに指示します。

　なお、オブジェクトにlabelプロパティやdataプロパティが含まれている場合、これらは自動的に表示アイテムや関連付けられたデータとして利用されます。この際データ型は、単なるスカラー値だけでなく、オブジェクトのように複雑なタイプでも問題ありません。オブジェクトにlabelプロパティやdataプロパティが含まれていない場合は、オブジェクト全体がアイテムのdataプロパティとして利用され、ラベルの値はComboBoxのlabelFieldプロパティによりオブジェクトの任意のプロパティに設定することができます。

Label要素の後にComboBoxコントロールを追加して、idを「coffeeCombo」とし、dataProviderプロパティを利用してComboBoxを以前の手順で作成した「coffeeArray」にバインドします。

<mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>

アイテムの説明文を表示するTextコントロールの追加

　TextコントロールはLabelと似ていますが、Textコントロールは複数行にまたがるデータを表示することができます。ここでは、ユーザーがComboBoxで選択したアイテムの説明文が表示されるよう、Textコントロールを選択したアイテムに関連づけられたデータオブジェクトとバインドします。なお、データオブジェクトはComboBoxのselectedItemプロパティで参照します。

ComboBoxの後にTextコントロールを追加し、textプロパティを文字列の「Description:」に設定します。そして、ComboBoxで選択されたアイテムのdataプロパティへのバインドを追加します。

<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>

コーヒーブレンドをショッピングカートに入れるためのボタンの追加

　Buttonコントロールの使い方は簡単です。Buttonコントロールにはラベル文字列を表示するためのlabelプロパティや、ユーザーがボタンをクリックした際に実行されるイベントハンドラを設定するためのclickプロパティがあります。

　ここでは、ボタンを追加し、ボタンのクリックイベントがaddToCart()という名前の関数を呼び出すことによって、ComboBoxで選択したアイテムが簡易ショッピングカートに追加されるようにします。なお、関数とショッピングカートは後ほど作成します。

Textコントロールの後にButtonを追加し、ボタンのlabelを「Add to Cart」に、そしてclickイベントがaddToCart()関数を呼び出すように、それぞれ設定します。

<mx:Button label="Add to Cart" click="addToCart()"/>

ショッピングカートのためのListコントロールの追加

　ListコントロールはComboBoxとほぼ同じですが、Listコントロールの場合、複数のアイテムを同時に表示/選択することができます。次のコードのListコントロールにはdataProviderプロパティの指定がありません。これは、ユーザーがアイテムをListコントロールに追加するまで、このコントロールが空の状態だからです。

Buttonの後にListコントロールを追加し、idを「cart」に設定します。

<mx:List id="cart"/>

ボタンのClickイベントを処理するスクリプトの追加

　このチュートリアルの最後のステップは、ボタンのClickイベントを処理するActionScript関数の記述です。このチュートリアルでは、ActionScript関数をScriptブロックの中に記述します。

　Scriptブロックの中に配置するActionScriptコードは、<![CDATA[ ]]>で囲み、XMLパーサーがこの中のコンテンツを解析しないように明示しておきます。このテクニックはXMLを扱う際の標準的な手法ですが、ここでは、パーサーがスクリプト内に含まれている特殊文字（<記号など）をXMLのコードと混乱しないようにするために使用します。なお、このチュートリアルアプリケーションのコードに混乱の原因となり得る特殊文字は含まれていませんが、埋め込みスクリプトのコードは常にCDATAの中に記述する習慣をつけておくことが大切です。このコーディングテクニックは、パーサーがXML以外のコードを解析する手間を省く効果もあります。

　ここで使用するActionScriptはごく単純な物です。なお、ActionScriptの関数はつぎに示す構文で記述します。

function functionName(parameter1:dataType...):returnDataType
{
[ActionScript のステートメント]
}

　addToCart()関数の中には、labelとdataの2つの引数を受け付ける、ListクラスのaddItem()メソッドを使用します。ここで渡す2つの引数は、単に、ComboBoxで選択したアイテムのlabelプロパティとdataプロパティです。

Arrayブロックの後にCDATAの部分をネストしたScriptブロックを追加します。

<mx:Script>
        <![CDATA[]]>
</mx:Script>

CDATAの中に、戻り値のないaddToCart()という名のActionScript関数を追加します。

function addToCart():Void
{
}

functionブロックの中にaddItemメソッドを追加し、cart ListにComboBoxで選択されたアイテムのlabelプロパティとdataプロパティが追加されるようにします。

cart.addItem(coffeeCombo.selectedItem.label,
    coffeeCombo.selectedItem.data);

ファイルを保存して、Webブラウザでファイルの動作を確認します。（MXMLファイルのブラウズ方法が分からない場合は、こちらの解説を参照してください。）

完成した「firstapp.mxml」ファイルのコード

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
    <!-- データモデル -->
    <mx:Array id="coffeeArray">
        <mx:Object>
            <label>Red Sea</label>
            <data>Smooth and fragrant</data>
        </mx:Object>
        <mx:Object>
            <label>Andes</label>
            <data>Rich and pungent</data>
        </mx:Object>
        <mx:Object>
            <label>Blue Mountain</label>
            <data>Delicate and refined</data>
        </mx:Object>
    </mx:Array>
    <mx:Script>
        <![CDATA[
            function addToCart():Void
            {
                cart.addItem(coffeeCombo.selectedItem.label,
                    coffeeCombo.selectedItem.data);
            }
        ]]>
    </mx:Script>
    <!-- ビュー -->
    <mx:Panel title="My First Flex App">
        <mx:Label text="Coffee Blends"/>
        <mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
        <mx:Text             text="Description: {coffeeCombo.selectedItem.data}"/>
        <mx:Button label="Add to Cart" click="addToCart()"/>
        <mx:List id="cart"/>
    </mx:Panel>
</mx:Application>

つぎのステップ

　このチュートリアルの簡単なアプリケーションでは、コンテナやコントロール、データモデル、データバインディング、イベントハンドラといったFlexアプリケーションの主要パーツを紹介してきました。是非つぎのチュートリアルに進み、さらにFlexの習得を深めてください。

　このチュートリアルの内容にご関心をお持ちいただけた場合は、Flexにデフォルトで含まれているサンプルアプリケーションなども一度目を通すようにしてください。Flexの搭載機能をデモするサンプルが多数収録されています。このチュートリアルシリーズのパート2、「Flex電卓アプリケーションの作成」も続けてオンライン上でご覧いただけます。

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

Flex基礎講座連載記事一覧: Flex基礎講座（パート4）:データモデルの利用

Flex基礎講座（パート3）:コンテナの利用

Flex基礎講座（パート2）:Flex電卓アプリケーションの作成

もっと読む

この記事の著者: Robert Crooks（Robert Crooks）

Macromedia所属カリキュラム開発担当ディレクター。これまでに、『Fast Track to Macromedia Flex』を含む、インターネットアプリケーション開発関連の数々の教材を執筆。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; マクロメディア株式会社（マクロメディアカブシキガイシャ）

Macromediaは、先端的なソフトウェア会社であり、オープンで統合性のあるWeb開発プラットフォームを通じて、Webプロフェッショナルが魅力あるユーザー体験を提供するためのサービスを提供している。主な製品に「Flash MX 2004」「Dreamweaver MX 2004」「Director...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事