Flex基礎講座

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

入力データを処理するデータモデルの作成とMVCの分離手法の解説

2005/08/02 12:00

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

Page 1
Page 2

はじめに

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

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

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

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

本チュートリアルの内容

Applicationタグの使い方
Panelコンテナの使い方
HBoxの使い方
VBoxの使い方
Formコンテナの使い方
TextInputコントロールの使い方
Buttonコントロールの使い方
DataGridコントロールの使い方
データのインポートやユーザーが入力した情報の収集のためのModelクラスの使い方
DataGrid内のアイテムをドラッグ&ドロップできるようにする方法
ドラッグ&ドロップ操作のための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からパート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はこのライブラリのすべてのタグに対して使用します。

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

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

<?xml version="1.0"?>

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

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

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

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

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

<mx:HBox></mx:HBox>

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

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

メモ

　メインのパネルの高さを、その横に配置する2つのパネル高さの合計にバインド（関連付け）することで、これらの高さをコードで絶対的に指定することなく、レイアウトのプロポーションを保つことができます。のちほど、右側の2つのパネル幅に関しても、同様の方法で値をバインドします。

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

<mx:Form>
</mx:Form>

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

<mx:ControlBar>
</mx:ControlBar>

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

<mx:VBox>
</mx:VBox>

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

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

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」(この配列は後ほど作成します）にバインドします。

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

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

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

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

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

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

<mx:TextInput id="fNameInput"/>

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

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

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

<mx:TextInput id="lNameInput"/>

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

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

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

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

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

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

メモ

　なお、dataControllerとそのメソッドは後ほど作成します。上記のメソッドの引数は、その段階で理解できるようになります。

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：アイテムがグリッド上にドロップされたことを告知

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

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

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

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

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

メモ

　dataProviderに供給するデータは後ほど作成します。

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

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

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

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

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" />

DataGridのすべてのコード部分をクリップボードにコピーし、「id="engPanel"」を設定したPanelコンテナの中にペーストします。

新しく作成した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>

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

メモ

　これで、3つのパネルの中に、それぞれのDataGridブロックが記述できたはずです。なお、2つ目と3つ目のDataGridブロックは全く同じコードです。正しいコードが記述できたかは、完成した「data.mxml」ファイルのコードと比較して確認してください。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

新規会員登録無料

Page 1
Page 2

次のページ
新規従業員用モデルの追加

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

印刷用を表示

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...

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

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