はじめに
このチュートリアルでは、Macromedia Flexの概要の紹介と、MXMLを利用する簡易商品カタログ兼ショッピングカートの作成を通じて、Macromedia Flexアプリケーションの基礎的な構成要素を紹介していきます。ここでは、まず、アプリケーションを作成し、このアプリケーションにレイアウトコンテナや各種コントロールを追加、その後にコントロールにバインドするシンプルなデータモデルを作成します。最後にActionScriptのイベントハンドラ関数を作成します。
なお、このチュートリアルはMacromediaカスタマートレーニング グループに所属する、Robert Crooksが執筆した4部構成のチュートリアルのパート1です。
XML言語を初めて扱う場合は、次の基本ルールに注意してください。
- 他のXML言語同様、MXMLのタグや属性名に使用するアルファベットは大文字と小文字が区別されます。
- 属性に対する値は、すべて一重括弧（
'）もしくは二重括弧（"）で囲む必要があります。 - タグにはすべて終了タグが必要です。なお、タグやコンテンツがネストされないタグに関しては、次に示すように終了タグを省略してスラッシュ（
/）だけでタグの終了を明示できます。
<mx:Label text="Hello"></mx:Label>
<mx:Label text="Hello"/>
ActionScriptを初めて扱う場合、ActionScriptの構文がJavaScriptやJavaといった見慣れた言語の構文に似ていることにお気づきになると思います。次の基本ルールに注意するようにしてください。
- ActionScriptはアルファベットの大文字と小文字を区別します。
- 各ステートメントはセミコロン（
;）で終了する必要があります。
本チュートリアルの内容
- Flexの概要の紹介
Applicationタグの使い方Panelコンテナの使い方Labelコントロールの使い方Textコントロールの使い方Buttonコントロールの使い方ComboBoxコントロールの使い方- オブジェクトの配列の作り方
- データをコントロールにバインドする方法
- ユーザーイベントを処理する
ActionScriptハンドラの作り方
この記事に必要なもの
このチュートリアルは、つぎに挙げるソフトウェアやファイルをインストールする必要があります。
Macromedia Flex
Flexのトライアル版に関する詳細については、Flex FAQを参照してください。また、トライアル版の入手方法については、こちらを参照してください。
テキストエディタ
Flex Builder、もしくはDreamweaver MX 2004、あるいはXMLとActionScriptのコードが記述できるコードエディタ（Notepadのような簡単なテキストエディタでも可）が必要です。なおFlex BuilderはFlexサーバーとともにダウンロードできます。また、Dreamweaver MX 2004のトライアル版の入手方法については、こちらを参照してください。
このチュートリアルのためのソリューションファイル
first_flex_app.zipには、このチュートリアルで紹介するfirstapp.mxmlの完成版のソースコードが収録されています。
この記事のために必要な予備知識
- この記事の「Flexの概要」を読み終えていること。
- Flexアプリケーションのブラウズ方法を把握していること。
Macromedia Flexの概要
Macromedia Flexはインターネットアプリケーションのリッチプレゼンテーション層を開発するためのサーバーコンポーネントです。Flexで作成したインターフェイスは、クライアントシステム上のMacromedia Flash Playerによって表示されます。Flexの主なコンポーネントは次の通りです。
- MXML
- ActionScript
- クラスライブラリ
- ランタイムサービス群
- MXMLファイルからSWFファイルを生成するコンパイラ
MXML
Flexのプレゼンテーション層はXML 1.0言語の「MXML」で記述します。MXMLファイルはすべてXMLの宣言から始まります。
<?xml version="1.0"?>
他のXML言語同様、MXMLには「要素」（タグとして記述）と「属性」があり、これらに使用するアルファベットは大文字と小文字を区別して記述します。各要素名は大文字のアルファベットで始まり、大文字と小文字が混在しています。また、各要素にはすべて終了タグが必要です。
<ComboBox></ComboBox>
なお、要素にコンテンツがない場合は、スラッシュ（/）を利用して要素を閉じることもできます。
<ComboBox/>
属性名は、小文字のアルファベットで始まり、大文字と小文字が混在しています。属性に対する値はすべて引用符で閉じる必要があります。
<ComboBox id="myCombo"/>
コンパイラは、すべての属性（clickやinitializeといったイベントを除く）の属性値を単なる文字列として処理します。したがって、データをバインドする場合など、コンパイラが表現式を評価する必要がある場合は、値のすべて、または一部を中括弧（{ }）で囲みます。
<ComboBox dataProvider="{myArray}"/>
なお、ほとんどの属性は、属性名をサブタグ、属性値をサブタグのコンテンツとして記述することも可能です。
<ComboBox dataProvider="{myArray}"/>
または
<ComboBox> <dataProvider>{myArray}</dataProvider> </ComboBox>
アプリケーション全体を記述するMXMLファイルには、すべての要素を囲むApplication要素が必要です。
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> [その他の要素 ...] </mx:Application>
Application要素の中にXMLの名前空間を宣言するxmlns属性が記述されていることに注目してください。名前空間を利用すれば、単一のドキュメント内で複数のXML言語を利用できるようになり、言語によって異なる機能性を持つ同一の要素名が混乱なく使用できます。上記のコードのmx:は、特定の名前空間を宣言するための接頭辞です。
MXMLのタグには接頭辞を含めるようにしてください。接頭辞の宣言内容は、タグ内でネストされているすべての要素に適用されます。MacromediaではMXMLクラスライブラリに対して接頭辞のmxを付ける手法を推奨しており、このチュートリアルシリーズではこの慣例に従ってコードを記述しています。
MXMLに関するより詳しい情報については、Flex言語リファレンスを参照してください。
ActionScript
ActionScriptはJavaScriptや他のECMAスクリプト言語に似た、オブジェクト指向のスクリプト言語です。JavaScriptやJava/C#のようなオブジェクト指向プログラミング言語での開発経験がある場合は、ActionScriptの構文が素早く把握できます。なおActionScriptのコードはMXMLの中に直接埋め込めるだけでなく、単独のファイルから読み込むことも可能です。
ActionScriptの完全なリファレンスは、ActionScript言語リファレンスにてご覧いただけます。
MXMLクラスライブラリ
Flexには、コントロールやコンテナといった視覚的なコンポーネントから、リモートサービスオブジェクトやデータモデルといったビジュアルを持たないコンポーネントまでを含む、完全なクラスライブラリが収録されています。このチュートリアルでは、これらのコンポーネントの多くを採りあげています。
ランタイムサービス
Flexは、履歴の管理やリモートサービスオブジェクトへのアクセスなどのために、数々のランタイムサービスを内蔵しています。これらのサービスはクラスライブラリを介してシームレスに呼び出されます。
コンパイラ
ブラウザがMXMLファイルをリクエストすると、Flexコンパイラは自動的にSWFを生成します。一度生成されたSWFファイルは、ソースファイルが変更されるまで自動的にキャッシュされています。
