Flex基礎講座（パート4）:データモデルの利用

はじめに

　このチュートリアルでは、ユーザーがMacromedia Flexアプリケーションに入力したデータを取得、および保存するためのデータモデルを作成します。また、ここではアプリケーション内のデータを操作する方法にも触れ、フォームから受け取ったデータから新しいオブジェクトを作成する方法や、データグリッド間におけるドラッグ&ドロップの実装方法についても解説します。

　なお、このチュートリアルはMacromediaカスタマートレーニンググループに所属する、Robert Crooksが執筆した4部構成のチュートリアルのパート4です。

• Flex基礎講座（パート1）:はじめてのFlexアプリケーション開発
• Flex基礎講座（パート2）:Flex電卓アプリケーションの作成
• Flex基礎講座（パート3）:コンテナの利用

　4部構成の最後のチュートリアルは、ここまでに解説していないFlexクラスライブラリのその他の要素や、ドラッグ&ドロップ可能なインターフェイスの実装といったテクニックなどの紹介を目的としています。また、このチュートリアルでは、Flexを利用して、アプリケーションの「ビュー」、「データモデル」、「コントローラー」をより明確に分離させる手法についても触れていきます。

　「ビュー」、「データモデル」、「コントローラー」を明確に分離すれば、例えば、コントローラーのメソッドはビューの詳細を知る必要がありません。また、新しい従業員を追加するためのメソッドは、データをモデルから取得するだけで良く、データがどのようにしてモデルに入れられたかを知る必要がありません。さらに、ドラッグ&ドロップ操作を処理するメソッドは、Flexが生成するイベントオブジェクトのメソッドならびにプロパティとFlex内蔵のDragManagerクラスをもとに機能するので、メソッド自体がデータオブジェクトがどこからドラッグされ、どこにドロップされたかを知る必要はありません。アイテムをドラッグできるようにするには、単にターゲットとなるデータグリッドに「dragEnabled="true"」属性を追加するだけで済み、コントローラーのメソッドを編集する必要はありません。

本チュートリアルの内容

1. Applicationタグの使い方
2. Panelコンテナの使い方
3. HBoxの使い方
4. VBoxの使い方
5. Formコンテナの使い方
6. TextInputコントロールの使い方
7. Buttonコントロールの使い方
8. DataGridコントロールの使い方
9. データのインポートやユーザーが入力した情報の収集のためのModelクラスの使い方
10. DataGrid内のアイテムをドラッグ&ドロップできるようにする方法
11. ドラッグ&ドロップ操作のためのActionScriptイベントハンドラの作り方

この記事に必要なもの

　このチュートリアルをフォローするには、つぎに挙げるソフトウェアやファイルをインストールする必要があります。

Macromedia Flex

　Flexのトライアル版に関する詳細については、Flex FAQを参照してください。また、トライアル版の入手方法については、こちらを参照してください。

テキストエディタ

　Flex Builder、もしくはDreamweaver MX 2004、あるいはXMLとActionScriptのコードが記述できるコードエディタ（Notepadのような簡単なテキストエディタでも可）が必要です。なおFlex BuilderはFlexサーバーとともにダウンロードできます。また、Dreamweaver MX 2004のトライアル版の入手方法については、こちらを参照してください。

このチュートリアルのためのソリューションファイル

　data_model.zip(ZIPファイル）には、このチュートリアルで作成するdata.mxml、Employee.as、DataController.as、employees.xml、locations.xmlの完成版のソースコードが収録されています。これらのファイルは、「flex_tutorials」ディレクトリに保存しておきます。

この記事のために必要な予備知識

• 「Flexの概要の紹介」を読み終えていること
• Flexアプリケーションのブラウズ方法を把握していること
• つぎに挙げるチュートリアルを済ませていること
  • Flex基礎講座（パート1）:はじめてのFlexアプリケーション開発
  • Flex基礎講座（パート2）:Flex電卓アプリケーションの作成
  • Flex基礎講座（パート3）:コンテナの利用
あるいはFlexアプリケーションの仕組みに関する基礎知識があること
• このチュートリアルのパート1からパート3までを済ませていない場合は、チュートリアル用のコードファイルを保存するために、Flexのコンテキストルート内に「flex_tutorials」ディレクトリを作成しておきます。

アプリケーションの作成

　ここで作成するアプリケーションのビューには、3つのパネルがあり、1つ目のパネルには、従業員の名前と勤務地を表示するDataGridコンポーネントと、新たな従業員を追加するための簡単なフォームを配置します。残りの2つのパネルには、エンジニアリンググループとサポートグループのためのデータグリッドをそれぞれ配置します。また、このアプリケーションには、ドラッグ&ドロップ機能を実装し、従業員情報を全従業員用のデータグリッドから、エンジニアリンググループ用やサポートグループ用のデータグリッドにドラッグ操作で追加できるようにします。

　ここでは、従業員名と勤務地の既存情報をXMLファイルからインポートするために複数のデータモデルを利用し、全従業員リストに新規従業員追加フォームから収集したデータを追加するために、もう1つのデータモデルを利用します。

　また、ActionScriptファイルを2つ作成し、アプリケーション内のイベントを処理するためのメソッドをDataControllerクラスに記述します。このコントローラーは、別途のEmployeeクラスを利用して、新規従業員用のデータオブジェクトを生成します。

図1.完成した状態のアプリケーション

Applicationオブジェクトの作成

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

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

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

1. 新規ファイルを作成し、このファイルを「flex_tutorials」ディレクトリの中に「data.mxml」として保存します。
 
2. ファイルの最初に、つぎのXML宣言を追加します。

<?xml version="1.0"?>

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

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

アプリケーションのレイアウトの作成

　アプリケーションのレイアウトは、「Flex基礎講座（パート3）:コンテナの利用」にて解説した、「コンテナ」を利用して作成します。ここでは、数あるコンテナの中でHBox、VBox、Panel、Formを利用して、フォームの備わったメインパネルと、メインパネルの横の2つのサブパネルから構成されるレイアウトを作成します。

4. Applicationブロックの中に、プロパティ設定のないHBoxコンテナを追加します。

<mx:HBox></mx:HBox>

 
 
5. HBoxコンテナの中にPanelコンテナを追加し、各プロパティを次のように設定します。

<mx:Panel id="empPanel" title="Employee Data"
    height="{engPanel.height+supPanel.height}">
</mx:Panel>

6. Panelコンテナの中に、プロパティ設定のないFormコンテナを追加します。

<mx:Form>
</mx:Form>

 
7. Panelコンテナ内のFormコンテナの後に、プロパティ設定のないControlBarコンテナを追加します。

<mx:ControlBar>
</mx:ControlBar>

 
8. Panelコンテナの後に、プロパティ設定のないVBoxコンテナを追加します。

<mx:VBox>
</mx:VBox>

 
9. VBoxコンテナの中に新たなPanelコンテナを追加し、各プロパティを次のように設定します。

<mx:Panel id="engPanel" title="Engineering Group"
    width="{empPanel.width}">
</mx:Panel>

 
10. VBoxコンテナ内に作成したEngineeringGroup用のパネルの後に新たなPanelコンテナを追加し、各プロパティを次のように設定します。

<mx:Panel id="supPanel" title="Support Group"
    width="{empPanel.width}">
</mx:Panel>

Formコントロールの追加

　Formコンテナとそれに関連するコンテナについては、「Flex基礎講座（パート3）:コンテナの利用」にて解説しましたが、ここでは新規従業員のデータを入力するために複数のコントロールを追加します。まず、TextInputフィールドを2つ追加し、そしてComboBoxを追加します。なお、ComboBoxのdataProviderは、インポートしたXMLファイルから生成する配列の「locModel.location」(この配列は後ほど作成します）にバインドします。

　フォームがレイアウトできたら、最後にフォームのデータを送信するように見せかけるためのボタンを追加します（このボタンの本当の機能は後ほど明らかになります)。

11. Formコンテナの中にFormHeadingを追加し、labelを「Add New」に設定します。

<mx:FormHeading label="Add New"/>

 
12. FormHeadingの後にFormItemを追加し、labelを「First Name」に設定します。

<mx:FormItem label="First Name">
</mx:FormItem>

 
13. FormItemコンテナの中にTextInputを追加し、idを「fNameInput」に設定します。

<mx:TextInput id="fNameInput"/>

 
14. FormItemをもう1つ追加し、labelを「Last Name」に設定します。

<mx:FormItem label="Last Name">
</mx:FormItem>

 
15. FormItemコンテナの中にTextInputを追加し、idを「lNameInput」に設定します。

<mx:TextInput id="lNameInput"/>

 
16. FormItemをもう1つ追加し、labelを「Location」に設定します。

<mx:FormItem label="Location">
</mx:FormItem>

 
17. FormItemコンテナの中にComboBoxを追加し、idを「locCombo」、dataProviderプロパティを「locModel.location」へのバインドに、それぞれ設定します。

<mx:ComboBox id="locCombo" dataProvider="{locModel.location}"/>

 
18. Formブロックの後にあるControlBarコンテナの中にボタンを追加し、idプロパティとclickプロパティを次のように設定します。

<mx:Button label="Add Employee" 
    click="dataController. addNewEmp(newEmpModel,empGrid.dataProvider)"/>

DataGridコントロールの追加

　次に、これまでのチュートリアルの中で使用したことのないクラス、DataGridコントロールのインスタンスを追加します。DataGridコントロールは、各列がソートできるうえに、セルを編集することも可能な、データを視覚化するためのパワフルなツールです。DataGridコントロールは、そのdataProviderとしてオブジェクトの配列を受け付けます。グリッドの列は、DataGridの中にネストした<columns>ブロックの中に、一連のDataGridColumnコンテナを記述して定義します。なお、columnNameプロパティの値には、dataProviderのオブジェクトのいずれかのプロパティを設定します。DataGridコントロールは、次の構文で記述します。

<mx:DataGrid>
    <mx:dataProvider>
        {何らかのオブジェクトの配列}
    </mx:dataProvider>
    <mx:columns>
        <mx:Array>
            <mx:DataGridColumn columnName="propertyName1" 
                headerText="some text" />
            <mx:DataGridColumn columnName="propertyName2" 
                headerText="some text" />
        </mx:Array>
    </mx:columns>
</mx:DataGrid>

　DataGridのアイテムをドラッグできるようにするには、「dragEnabled="true"」を設定します。なお、ユーザーがドラッグしたデータオブジェクトをグリッド内へドロップできるようにするには、数種類のドラッグ関連イベントをハンドラに対して設定できますが、最も重要なのは次に挙げるものです。

• dragEnter：アイテムがグリッド上にドラッグされたことを告知
• dragDrop：アイテムがグリッド上にドロップされたことを告知

　次に示すステップでは、ユーザーが全従業員用のグリッドからアイテムをドラッグし、エンジニアリンググループまたはサポートグループ用のグリッドにそのアイテムをドロップするための機能を追加します。なお、これらのイベントに対するハンドラは、後ほど、コントローラーのメソッドとして記述します。

19. Panelコンテナ内のFormコンテナの前にDataGridコンテナを追加し、「id="empGrid"」と「dragEnabled="true"」を設定します。

<mx:DataGrid id="empGrid" dragEnabled="true">
</mx:DataGrid>

 
20. DataGridコンテナの中にdataProviderブロックを追加し、「empModel.employee」へのバインディングを記述します。

<mx:dataProvider>
    {empModel.employee}
</mx:dataProvider>

21. DataGridブロック内のdataProviderブロックの後にcolumnsブロックを追加し、この中にArrayブロックを追加します。

<mx:columns>
    <mx:Array>
    </mx:Array>
</mx:columns>

 
22. Arrayブロックの中にDataGridColumnを追加し、columnNameを「fName」、headerTextを「First Name」にそれぞれ設定します。

<mx:DataGridColumn columnName="fName"
  headerText="First Name" />

 
23. DataGridColumnコンテナをさらに2つ追加し、それぞれに次のプロパティを設定します。
    • columnName="lName"（lNameの1文字目は「L」の小文字）
    • headerText="Last Name"
    • columnName="location"
    • headerText="Location"

<mx:DataGridColumn columnName="lName" headerText="Last Name" />
<mx:DataGridColumn columnName="location"
  headerText="Location" />

 
24. DataGridのすべてのコード部分をクリップボードにコピーし、「id="engPanel"」を設定したPanelコンテナの中にペーストします。
 
25. 新しく作成したDataGridコンテナ内のdataProviderブロックと、idプロパティ、ならびにdragEnabledプロパティを削除して、新たにdragEnterプロパティとdragDropプロパティを次のように記述します。
    • dragEnter="dataController.doDragEnter(event)"
    • dragDrop="dataController.doDragDrop(event)"

<mx:DataGrid dragEnter="dataController.doDragEnter(event)"
  dragDrop="dataController.doDragDrop(event)">
  <mx:columns>
    <mx:Array>
      <mx:DataGridColumn columnName="fName"
        headerText="First Name" />
      <mx:DataGridColumn columnName="lName"
        headerText="Last Name" />
      <mx:DataGridColumn columnName="location"
        headerText="Location" />
    </mx:Array>
  </mx:columns>
</mx:DataGrid>

 
26. エンジニアリンググループ用のPanelコンテナ内のDataGridコードをクリップボードにコピーし、コピーした内容を「id="susPanel"」が設定されたPanelコンテナの中にペーストします。この際、ペーストしたコードを編集する必要はありません。