SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flex基礎講座

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本稿では、Macromedia Flexの概要を紹介します。また、MXMLを利用する簡易商品カタログ兼ショッピングカートの作成を通じて、Macromedia Flexアプリケーションの基礎的な構成要素も紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 このチュートリアルでは、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はアルファベットの大文字と小文字を区別します。
  • 各ステートメントはセミコロン(;)で終了する必要があります。

本チュートリアルの内容

  1. Flexの概要の紹介
  2. Applicationタグの使い方
  3. Panelコンテナの使い方
  4. Labelコントロールの使い方
  5. Textコントロールの使い方
  6. Buttonコントロールの使い方
  7. ComboBoxコントロールの使い方
  8. オブジェクトの配列の作り方
  9. データをコントロールにバインドする方法
  10. ユーザーイベントを処理する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
  • :アプリケーションインターフェイスを記述するためのXML言語
  • ActionScript
  • :MXMLと併用しつつ、ユーザーイベント/システムイベントの処理や、高度なデータモデルの構築-に使用するECMAスクリプトに準拠した言語
  • クラスライブラリ
  • ランタイムサービス群
  • MXMLファイルからSWFファイルを生成するコンパイラ

MXML

 Flexのプレゼンテーション層はXML 1.0言語の「MXML」で記述します。MXMLファイルはすべてXMLの宣言から始まります。

<?xml version="1.0"?>

 他のXML言語同様、MXMLには「要素」(タグとして記述)と「属性」があり、これらに使用するアルファベットは大文字と小文字を区別して記述します。各要素名は大文字のアルファベットで始まり、大文字と小文字が混在しています。また、各要素にはすべて終了タグが必要です。

<ComboBox></ComboBox>

 なお、要素にコンテンツがない場合は、スラッシュ(/)を利用して要素を閉じることもできます。

<ComboBox/>

 属性名は、小文字のアルファベットで始まり、大文字と小文字が混在しています。属性に対する値はすべて引用符で閉じる必要があります。

<ComboBox id="myCombo"/>

 コンパイラは、すべての属性(clickinitializeといったイベントを除く)の属性値を単なる文字列として処理します。したがって、データをバインドする場合など、コンパイラが表現式を評価する必要がある場合は、値のすべて、または一部を中括弧({ })で囲みます。

<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のクラスライブラリに対する標準的な方法です。MXMLファイルごとにこの宣言を含めるようにしてください。

 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ファイルは、ソースファイルが変更されるまで自動的にキャッシュされています。

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flex基礎講座連載記事一覧

もっと読む

この記事の著者

Robert Crooks(Robert Crooks)

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

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

マクロメディア株式会社(マクロメディアカブシキガイシャ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/106 2009/10/20 16:56

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング