Flex ドキュメンテーション

Macromedia Flex アプリケーション開発の要点

ここでは、アプリケーション開発を迅速かつ適切に開始するために役立つ情報を提供します。含まれているセクションは以下のとおりです。

• Flex ファーストステップガイド
• プログラミングに関してよくある問題の回避

Flex ファーストステップガイド

ここでは、アプリケーション開発をすぐにはじめられるように、以下の機能や概念について説明します。

• サンプルアプリケーションを使用して Flex を理解する
• コンテナおよびコントロールを使用して、アプリケーションを効率的にレイアウトする
• 簡単なコード変更を行ってパフォーマンスを向上させる
• コンポーネントを動的に繰り返すための最善の方法を決定する
• データ管理機能を使用してアプリケーションデータを簡単に管理する
• スタイル、フォント、テーマ、およびスキンを使用して、アプリケーションの外観を制御する
• コンポーネントの生成について理解し、制御する
• History Manager (ヒストリマネージャー) を使用して、ブラウザの [戻る] および [進む] コマンドを使用する
• ドラッグ & ドロップ操作でアプリケーションデータを移動する
• 非ビジュアルコンポーネントを使用して機能をカプセル化する
• ActionScript のデバッグ機能を使用してアプリケーションをデバッグする

サンプルアプリケーションを使用して Flex を理解する

Macromedia Flex サンプルアプリケーションには、基本的な要素で構成されたシンプルなアプリケーション、特定の機能に焦点を絞ったより複雑なアプリケーション、アプリケーション設計のベストプラクティス例となるアプリケーションが含まれています。Flex Explorer アプリケーションには Flex の主要な機能がほとんど含まれているので、これだけさまざまな機能が迅速に学習できます。

サンプルアプリケーションは "samples.war" ファイルに含まれいます。このファイルをアプリケーションサーバーにデプロイしてください。

コンテナおよびコントロールを使用して、アプリケーションを効率的にレイアウトする

コンテナは、レイアウトを制御できるユーザーインターフェイスコンポーネントです。コンテナを使用すると、子のサイズと位置、複数の子コンテナ間の切り替えが制御できます。コントロールとは、Button、TextArea、ComboBox コントロールなどのユーザーインターフェイスコンポーネントです。通常は MXML タグを使用してアプリケーションにコンテナおよびコントロールを追加しますが、ActionScript を使用して実行時に追加することもできます。

詳細については、『Flex アプリケーション開発ガイド』の「Flex コンポーネントの使用」の章を参照してください。

簡単なコード変更を行ってパフォーマンスを向上させる

少し手を加えるだけでアプリケーションのパフォーマンスを向上させることができます。以下はその例です。

• コンテナが何重にもネストされていると、アプリケーションの起動に時間がかかります。
• Macromedia Flash Debug Player を使用すると、アプリケーションの動作が遅くなります。trace() ステートメントを使用すると、Flash Debug Player が trace の結果をファイルに書き込むため、パフォーマンスが大幅に低下します。Flash Player および Flash Debug Player の両方でアプリケーションをテストしてください。
• コンテナの creationPolicy プロパティを使用して、実行時にコンポーネントを生成するタイミングを決定できます。たとえば、起動時、コンテナの切り替え時、またはユーザーの操作に基づいて、コンポーネントを生成するかどうか設定できます。
• 起動時に段階的にレイアウトを行うように設定することもできます。
• コンポーネントの位置、幅、および高さを明示的に指定すると、アプリケーションの起動時間を短縮できます。
• Grid コンテナの使用は、コントロールを縦横両方に並べなければならない場合だけに制限します。使用を控えることでパフォーマンスが向上する場合があります。

パフォーマンスの詳細については、『Flex ファーストステップガイド』の「Flex アプリケーションの設計」の章を参照してください。Macromedia は随時、Macromedia Web サイトでパフォーマンスに関する情報を提供します。

コンポーネントを動的に繰り返すための最善の方法を決定する

コンポーネントを動的に繰り返すには、Repeater オブジェクトか、HorizontalList、TileList、または List コントロールのいずれかを選択できます。Flex 1.0 用に Repeater で作成したレイアウトを、HorizontalList または TileList とセルレンダラーの組み合わせに変更するとパフォーマンスを向上する場合もあります。

Repeater オブジェクトは、通常 Form コンテナで使用される RadioButton コントロールなどの単純なユーザーインターフェイスコンポーネントを少ない回数繰り返すのに便利です。HorizontalList、TileList、または List コントロールは、より多くのオブジェクトを表示する場合に使用できます。

HorizontalList コントロールは、HBox コンテナのようにデータを横に並べて表示します。HorizontalList コントロールは、アイテムを常に左から右へ表示します。TileList コントロールは、Tile コンテナのようにデータをタイル状に並べて表示します。TileList コントロールには、次のアイテムを下または右のどちらに置くかを決定する direction プロパティがあります。List コントロールは、データを垂直 1 列に並べます。Repeater オブジェクトが、繰り返されているすべてのオブジェクトをインスタンス化するのに対して、HorizontalList、TileList、および List コントロールは、リストに表示されているオブジェクトのみをインスタンス化します。

詳細については、『Flex アプリケーション開発ガイド』の「コントロールおよびコンテナの動的な繰り返し」および「データプロバイダコントロールの使用」の章を参照してください。

データ管理機能を使用してデータを簡単に管理する

Flex には、MXML タグを使用して次の操作を実行できるデータ管理機能があります。

• Web サービス、HTTP POST および GET コマンド、または Java オブジェクトを使用して、サーバーサイドのデータソースにデータを送信します。
  
• サーバーサイドのデータソースからデータを受信します。
  
• アプリケーションのクライアントサイドのオブジェクト間でデータを受け渡します。
  
• クライアントサイドのオブジェクトにデータを格納します。
  
• ユーザーインターフェイスに表示する前に、データをフォーマットします。
  
• データを使用する前に検証します。

詳細については、『Flex アプリケーション開発ガイド』の「Flex でのデータ管理」の章を参照してください。

スタイル、フォント、テーマ、およびスキンを使用して、アプリケーションの外観を制御する

スタイル、フォント、テーマ、およびスキン (コンポーネントのグラフィカルエレメント) は、アプリケーションの全体的な外観と操作性を決定するのに役立ちます。スタイルを使用すると、特定のコンポーネントの外観を変更したり、全コンポーネントに同じ外観を適用したりできます。

詳細については、『Flex アプリケーション開発ガイド』の「スタイルとフォントの使用」および「テーマとスキンの使用」の章を参照してください。

コンポーネントの生成について理解し、制御する

デフォルトでは、コンテナは最初に表示されるコントロールのみをまず生成します。その後、ユーザーが別のコンテナに切り替えた時にそのコンテナ内のコントロールや子孫が生成されます。インスタンス化を保留することにより、Flex アプリケーションを呼び出したときにコントロールや他のコンポーネントが作成されるタイミングを決定できます。デバッグおよび開発を行う際には、Flex がどのようにコンポーネントを生成するのかを理解しておくことが重要です。

詳細については、『Flex アプリケーション開発ガイド』の「起動時のパフォーマンスの向上」の章を参照してください。

History Manager (ヒストリマネージャー) を使用して、ブラウザの [戻る] および [進む] コマンドを使用する

History Manager (ヒストリマネージャー) を使用すると、ユーザーは Web ブラウザの [戻る] および [進む] のナビゲーション機能を使用して、Flex アプリケーション内を移動できます。ブラウザで誤って移動した際に、アプリケーション内で直前にいた場所に戻ることもできます。

詳細については、『Flex アプリケーション開発ガイド』の「History Manager の使用」の章を参照してください。

ドラッグ & ドロップ操作でアプリケーションデータを移動する

Drag and Drop Manager (ドラッグ & ドロップマネージャー) を使用すると、Flex アプリケーション内のある場所から別の場所にデータを移動することができます。この機能は、データがリスト内のアイテム、イメージ、Flex コンポーネントであるビジュアルアプリケーションで特に有効です。

詳細については、『Flex アプリケーション開発ガイド』の「Drag and Drop Manager の使用」の章を参照してください。

非ビジュアルコンポーネントを使用して非ビジュアル機能をカプセル化する

非ビジュアルコンポーネントは、Flex ユーザーインターフェイスコンポーネントアーキテクチャのオーバーヘッドを必要としない機能を提供します。非ビジュアルコンポーネントは、モデルビューコントローラ (MVC) アーキテクチャのモデル機能、データのフォーマット、データ検証、エフェクトなど、幅広い機能で便利に使用できます。

詳細については、『Flex アプリケーション開発ガイド』の「ActionScript コンポーネントの作成」の章を参照してください。

ActionScript のデバッグ機能を使用してアプリケーションをデバッグする

アプリケーションのデバッグを支援するために、Flex では、デバッグおよび警告メッセージ、エラー報告メカニズム、およびコマンドライン ActionScript デバッガをサポートしています。

詳細については、『Flex アプリケーション開発ガイド』の「Flex アプリケーションのデバッグ」の章を参照してください。

プログラミングに関してよくある問題の回避

プログラミングの際に発生しうる問題を回避するためのガイドラインを以下のトピックで説明します。

• Script タグでの CDATA の使用
• ActionScript スクリプトファイルおよびクラスの使用
• MXML での大文字の使用
• スタイルの使用
• CSS スタイル宣言での引用符の使用
• コンテナのネストの最小化
• データサービスの設定
• アプリケーションの分離
• コマンドラインコンパイラの使用
• XML 名前空間の使用
• ActionScript Profiler (ActionScript プロファイラ) の使用
• コマンドラインデバッガの使用
• ActionScript のスコープの設定

Script タグでの CDATA の使用

<mx:Script> タグ内では常に CDATA セクションを使用することをお勧めします。CDATA セクションを省略すると、MXML コンパイラが <mx:Script> タグ内の XML 文字 (< や > のような山カッコなど) を解析しようとしたときにエラーが発生する可能性があります。次に、CDATA セクションを含む <mx:Script> タグの例を示します。

<mx:Script>
    <![CDATA[>
      function sortList(list_obj) {
         if (list_obj.length < 10) {
           list_obj.insertionSort();
         }
         else
         {
           list_obj.quickSort();
         }
       }
     ]]>
</mx:Script>

ActionScript スクリプトファイルおよびクラスの使用

ActionScript のスクリプトファイルとクラスファイルは同じようには使用できません。スクリプトファイルは <mx:Script> タグの source プロパティで指定し、アプリケーションまたは MXML コンポーネントに単純なコードを追加するもので、クラス定義は含みません。外部ファイルには、<mx:Script> タグ内にインラインで入力するものと同じスクリプトを含めることができます。違いはスクリプトが別のファイルに書かれているという点だけです。

<mx:Script> タグの source プロパティで ActionScript クラスを含むファイルを参照することはできません。ActionScript クラスをカスタム MXML タグとして使用するか、そのクラス型の変数を作成して、次のように関数内で初期化することができます。

  ...
  var myA:A;
  function myInitialize() {
  myA = new A();
  }
  ...

詳細については、『Flex ファーストステップガイド』の「ActionScript の使用」の章を参照してください。

MXML での大文字の使用

MXML タグは ActionScript クラス名に対応しており、ActionScript クラスと同じ命名規則を使用します。クラス名は大文字で始まり、さらに別の単語の始まりも大文字が使われています。たとえば、<mx:ComboBox> タグは、mx.controls.ComboBox クラスのインスタンスを作成します。<mx:Application> タグの直接の子供であるタグはすべてこの命名規則に従います。

たとえば、あるタグが特定の ActionScript クラスに対応する場合、そのプロパティはそのクラスのプロパティおよびイベントに対応します。プロパティ名は小文字で始まりますが、別の単語の始まりには大文字が使われます。たとえば、<mx:ComboBox rowCount="7"> タグ内の rowCount プロパティは、mx.controls.ComboBox クラスの rowCount プロパティに対応します。タグ属性または子タグを使用してプロパティの値を設定できます。スカラー値および単純なバインディング式は属性として割り当て、複雑な型は子タグとして割り当てることをお勧めします。

詳細については、『Flex ファーストステップガイド』の「MXML の使用」の章を参照してください。

スタイルの使用

Flex コンポーネントの外観は、スタイルプロパティを使用して変更します。スタイルプロパティを操作するにはいくつかの方法があります。細かな制御を可能にするものや、プログラマティックに使用できる方法、また柔軟性がそれほど高くない代わりに計算処理が少なく済む方法もあります。必要となる制御のレベルによって、スタイルを適用する方法を決定します。

テーマは、Flex アプリケーション全体の外観を定義するもので、コンポーネントの外観を制御するスタイルおよびスキンの集合です。スキンは、コンポーネントのグラフィカルエレメントです。Flex アプリケーションでどのようなスタイルを設定できるかは、テーマによって決まります。たとえば、buttonColor スタイルがテーマで定義されていない場合、buttonColor スタイルプロパティをアプリケーションで設定することはできません。

Flex に付属するデフォルトのテーマ (Halo テーマ) では、スタイルプロパティのサブセットをサポートしています。Halo テーマがサポートするスタイルの詳細については、『Flex アプリケーション開発ガイド』の「テーマとスキンの使用」の章を参照してください。

CSS (Cascading Style Sheet) に基づいたスタイルシートを使用して、すべてのアプリケーションで使用するスタイルをグローバルに定義できます。これは、Flex Web アプリケーションの "WEB-INF/flex" ディレクトリ内の "flex-config.xml" ファイルで設定します。

<mx:Style> タグ、または <mx:Style> タグの source プロパティで CSS スタイルシートをインラインで指定することで、MXML ファイルおよびその子供にスタイルを適用します。

実行時にスタイルプロパティを操作するには、getStyle() および setStyle() ActionScript メソッドを使用します。すべての Flex ユーザーインターフェイスコンポーネントはこれらのメソッドを実装しています。また、mx.styles.StyleManager クラスを使用して、プログラマティックにスタイルを宣言し、適用することもできます。このクラスにも getStyle() および setStyle() メソッドが含まれます。パフォーマンスの低下を避けるため、setStyle() メソッドは多用しないでください。

StyleManager クラスにより、ActionScript を使ってグローバルスタイルシート、クラスセレクタ、タイプセレクタにアクセスできます。また、継承されるスタイル、あるいは継承されないスタイルをグローバルに適用することもできます。StyleManager クラスを使用して、新しい CSS スタイル宣言を定義し、それを Flex アプリケーションのコントロールに適用することができます。

MXML タグのプロパティにスタイルを設定することもできます。これらのスタイル定義は、他のスタイル定義よりも優先されます。

詳細については、『Flex アプリケーション開発ガイド』の「スタイルとフォントの使用」の章を参照してください。

CSS スタイル宣言での引用符の使用

CSS スタイル宣言で引用符が必要なのは、スタイル名がアンダースコア文字 ("_") で始まる場合のみです。それ以外では引用符を使用しないでください。たとえば、background-color:red は正常に動作しますが、background-color:"red" は正常に動作しません。必要のない引用符の使用に対してコンパイラエラーは表示されませんが、アプリケーションは予期したとおりに機能しません。

詳細については、『Flex アプリケーション開発ガイド』の「スタイルとフォントの使用」の章を参照してください。

コンテナのネストの最小化

レイアウトを何重にもネストすることはできるだけ避けることをお勧めします。コンテナを 3 レベル以上ネストしている場合は、おそらく、同じレイアウトをより少ないレベルのネストで作成することが可能です。Grid、GridRow、および GridItem コンポーネントを使用すると、最小限のネスト数で複雑なレイアウトを作成できます。ネストを深くすると、パフォーマンスの問題が生じる場合があります。

詳細については、『Flex ファーストステップガイド』の「Flex アプリケーションの設計」の章を参照してください。

データサービスの設定

データサービスには、リモートオブジェクトサービス、SOAP 準拠の Web サービス、および HTTP サービスが含まれます。Flex Web アプリケーションの "WEB-INF/flex" ディレクトリ内の "flex-config.xml" ファイルで、データサービスアクセス、セキュリティ、デバッグ、その他のデータサービス機能を設定します。デフォルトでは、データサービスへのアクセスはセキュリティで保護されているため、"flex-config.xml" ファイルのデータサービスセキュリティホワイトリストに明示的に設定する必要があります。詳細については、『Flex アプリケーション開発ガイド』の第 3 部「データアクセスと相互接続性」を参照してください。

Flex Web アプリケーションの "WEB-INF" ディレクトリ内の "server-config.wsdd" ファイルで、ローカルの Apache Axis Web サービス定義を作成できます。"samples.war" ファイルには、"server-config.wsdd" ファイルの例が含まれています。Axis Web サービスの設定の詳細については、Apache Axis Web サイト* の Axis に関するドキュメンテーションを参照してください。アプリケーションサーバーで使用可能な標準 Web サービスを使用して、Web サービス定義を作成することもできます。詳細については、アプリケーションサーバーのマニュアルを参照してください。

アプリケーションの分離

アプリケーション内で、ユーザーインターフェイスとデータオブジェクトを分離する方法はいくつかあります。また、MXML コードと ActionScript コードを分離する方法もいくつかあります。詳細については、『Flex ファーストステップガイド』の「Flex アプリケーションの設計」の章を参照してください。

コマンドラインコンパイラの使用

mxmlc (コマンドラインコンパイラ) でカスタム ActionScript クラスやコンポーネントをコンパイルする場合、カスタム ActionScript クラスを配置する場所、カスタムクラスパスを設定する方法、クラスを適切にパッケージする方法を事前に確認してください。カスタム ActionScript コードまたは MXML コンポーネントを使用していない場合は、"<Flex インストールディレクトリ>/bin" ディレクトリに移動した後、次のコマンドを使って mxmlc を実行できます。

mxmlc myApp.mxml

mxmlc の設定の詳細については、『Flex アプリケーション開発ガイド』の「Flex の管理」の章を参照してください。

ActionScript クラスの使用に関する一般的な情報については、『Flex アプリケーション開発ガイド』の「Flex での ActionScript の操作」、「ActionScript コンポーネントの作成」、および「Flash MX 2004 を使用した高度なコンポーネントの作成」を参照してください。

XML 名前空間の使用

カスタム ActionScript コンポーネントまたは MXML コンポーネントを使用する場合は、コンポーネントを含むローカルパスまたはサブディレクトリの名前空間を指定します。

アプリケーションディレクトリのサブディレクトリまたは "user_classes" ディレクトリ内のコンポーネントについては、ドット (.) 表記を使ってサブディレクトリを指定し、最後にアスタリスク (*) を付けた名前空間を使用します。たとえば、次のタグでは、テキスト xmlns:custom="customComponents.objects.*" は、customComponents.objects.* 名前空間を指定しています。

<custom:MyFirstComponent xmlns:custom="customComponents.objects.*"/>

xmlns: の直後の custom は、この名前空間のコンポーネントで使用するタグ接頭辞を示します。接頭辞を使用してもしなくても名前空間を宣言できますが、接頭辞を使用しない名前空間は MXML ファイル内で１つしか宣言できません。すべての名前空間の宣言で、アスタリスク (*) を最後に付ける必要があります。

アプリケーションと同じディレクトリ内のコンポーネントについては、次の例のように "*" として宣言される名前空間を使用します。

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

次の例のように、接頭辞なしでローカル名前空間を宣言することもできます。

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

詳細については、『Flex ファーストステップガイド』の「複数の MXML ファイルを使用したアプリケーションの構築」および「ActionScript コンポーネントの作成」の章を参照してください。

ActionScript Profiler (ActionScript プロファイラ) の使用

ActionScript Profiler (ActionScript プロファイラ) を有効にしている場合、作業終了後は Profiler を無効にしてください。生成される DAT ファイルによって大量のディスク容量が使用されるためです。

詳細については、『Flex アプリケーション開発ガイド』の「ActionScript のプロファイリング」の章を参照してください。

コマンドラインデバッガの使用

Flex ActionScript コマンドラインデバッガ (fdb) を使用する場合は、Flex インストーラに含まれている Flash Debug Player を使用していることを確認してください。また、Flash 2004 リモートデバッガを同時に有効にしないでください。カスタム SWC ファイルをデバッグする場合は、Flash MX 2004 の [パブリッシュ設定] ダイアログボックスで [デバッグを許可] オプションを有効にします。

詳細については、『Flex アプリケーション開発ガイド』の「Flex アプリケーションのデバッグ」の章を参照してください。

ActionScript のスコープの設定

ActionScript では、関数を渡し、異なるスコープからその関数を呼び出すことができるため、this キーワードはその都度異なるオブジェクトを示します。通常、オブジェクトのメソッドは、呼び出し元オブジェクトのコンテキストではなく、そのオブジェクトのコンテキスト内で実行されます。

コールバック関数を使用する場合、mx.utils.Delegate クラスを使用してコールバックを渡す必要があるため、特にスコープが重要になります。List およびその派生クラスの labelFunction プロパティは、典型的なコールバックの例です。

次のコード例では、Delegate クラスを使用してコールバック関数を labelFunction プロパティに指定しています。リスト内の各アイテムは、lastName プロパティを持つオブジェクトです。lastName プロパティは、対応するファーストネームが格納されている配列へのインデックスとして使用されます。myLabelFunc() 関数はファーストネームとラストネームを連結し、リストに表示されるストリングを返します。myLabelFunc() 関数は、それぞれのリストアイテムにつき 1 回ずつ呼び出されます。

  <mx:Application initialize="setLabel()">
  ...
   <mx:Script>
    <![CDATA[
      import mx.utils.Delegate;
      //この変数に、ラストネームによってアクセスされるファーストネーム
      が格納されているものとします :
      var firstNameMap :Object;
      function myLabelFunc(item):String {
      return item.lastName + ", " + firstNameMap[item.lastName];
      }
      function setLabel{
       myList.labelFunction = Delegate.create(this, myLabelFunc);
      }
    ]]>
   </mx:Script>
   ...
   <mx:List id="myList">
     <mx:dataProvider>
      <mx:Array>
        <mx:Object lastName="Jones"/>
        <mx:Object lastName="Williams"/>
        <mx:Object lastName="Simpson"/>
      </mx:Array>
     </mx:dataProvider>
   </mx:List>
   ...
</mx:Application>

スコープの詳細については、『Flex アプリケーション開発ガイド』の「Flex での ActionScript の操作」の章を参照してください。