Flash Builder 4によるデータ中心型開発
Adobe Flash Builder 4は、Flex開発の初心者にもベテランにも、新しい機会を提供します。その1つは、データ中心型のリッチなインターネットアプリケーションの開発です。Flashプラットフォームを構成するプロフェッショナルなツール、オープンソースフレームワーク、ユビキタスなクライアントの組み合わせにより、極めて表現力の高いコンテンツやアプリケーションを提供できます。
ただし、ほとんどのアプリケーションは、プラットフォーム外部に存在するサービスにも依存しています。例えば、企業データベースに記録された情報に対して、レポートやデータビジュアリゼーションの機能を提供するアプリケーションが考えられます。あるいは、既存の注文管理システムやサードパーティ製の支払いサービスに、リッチな電子商取引アプリケーションを統合する必要があるかもしれません。電子メールの送信やデータベースの照会といった簡単なものから、クラウドホステッドサービスやサードパーティAPIとの統合まで、あらゆるアプリケーション機能でサーバーやサービスとの接続が必要となります。
以前のリリースでは、開発者はさまざまな技法を学んで、サーバーやサービスとの接続を自分でコーディングする必要がありました。例えば、SOAP Webサービスに接続するには、ColdFusionコンポーネントやPHPクラスに接続する場合とは異なるMXMLタグが必要でした。また、コードイベントリスナーやフォールトハンドラーなどのコーディングが一般的に必要とされますが、このような概念は従来のWeb開発の世界から来た開発者にはなじみがなく、混乱の元でした。
Flash Builder 4で、アドビはこのような状況を根本的に変え、データ中心型アプリケーションを構築するためのまったく新しい手法を導入しました。初めてFlex開発を行う人でも、データやサービスにすばやく接続し、データをリッチなUIコンポーネントにバインドできます。また、経験豊かなデベロッパーは、高度なデータ指向アプリケーションを構築するための強力な新しい方法を利用できます。
Flash Builder 4によるデータ中心型の開発には、以下の3つの主なステージがあります。
- データ／サービスモデルの定義
- Flexコンポーネントへのサービス操作のバインド
- ページングやデータ管理などの高度なデータ機能の実装
この記事では、単純なデータ管理アプリケーションを構築するための主要な手順を紹介します。データベース内にテーブルがあり、ユーザーがデータの表示と、レコードの追加、更新、削除を実行できるFlexアプリケーションを作成することが目的です。
必要条件
この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。
Flash Builder 4
Flash Builder 4のインストール方法等は、下記の記事で紹介しています。
この記事に必要な予備知識
Flex Builderの使用経験があれば役立ちますが、必須ではありません。ColdFusion、Java、PHPなどのサーバーサイドテクノロジーを理解していることが必要です。
ステップ1：サービスの作成
Adobe Flash Playerで動作するアプリケーションは、データベースと直接にはやり取りできないので、Flexから要求を受け取ってデータベースに渡すサービスが必要です。このサービスはまた、データベースからのデータをFlexが理解できる形式でFlexに返す機能も果たす必要があります。
このリモートサービスを実装する際には、異なるテクノロジーをいくつでも組み合わせて使用できます。Flash Builder 4は、ColdFusion、PHP、Javaで作成したサービスのサポート機能を内蔵しているのに加え、他のテクノロジーをサポートするためのフレームワークも備えています。他の種類のサービスは、SOAP Webサービス、HTTPサービス、またはXMLファイルとして使用できます。
選択肢として最適なのはColdFusionです。あらゆるバックエンドデータベースと通信でき、シンタックスが簡単なので少数のタグを使うだけでデータアクセスサービスを作成できるからです。また、ColdFusionは、AMFというハイパフォーマンスのプロトコルを使用して、標準でFlexアプリケーションとのデータ交換を実行できます。AMFサポートはPHPとJavaに対しても用意されているので、自分にとって最も使いやすく生産性の高いサーバーテクノロジーを使用できます。
ColdFusionでは、Flexアプリケーションが実行する必要があるそれぞれのデータ操作に対して、ColdFusionコンポーネント（CFC）を作成します。これは、テーブルからの全レコードの取得、テーブルへの新規レコードの追加、レコードの削除などです。CFCの関数は、弱い型付けのデータと強い型付けのデータの両方を返すことができます（例えば、よりオブジェクト指向的な手法で開発する場合は、getAllRecords関数はColdFusionクエリーオブジェクトまたはオブジェクトの配列を返すことができます）。Flexはどちらにも対応できます。また、コンポーネントはColdFusion Builderで生成することも、Flash Builder 4にあるサンプル生成オプションを使用して生成することもできます（図1）。
cffunctionタグのaccessプロパティがremoteに設定されていることを確認し、コンポーネントをテストします。これで、Flexアプリケーションがサービスを使用できるように設定する準備が整いました。
ステップ2：Flash Builderでのモデルの構築
Flash Builder 4では、「データ／サービス」パネルが新たに加わり、アプリケーションで使用するすべてのサーバーとサービスの管理と操作は、このパネルから集中的に行います。サービスパネルには、すべてのサービスで使用可能なすべての種類のデータと操作が、ツリービュー形式で表示されます。
表示されているデータとサービスは、さまざまなソースから来ている可能性があります。例えば、あるものはColdFusionコンポーネントやPHPクラスであり、あるものはクラウドにホストされたサードパーティ製のRESTfulサービスであるかもしれません。しかし、それらがサーバー側でどのように実装されているかは、まったく意識する必要がありません。それらの結果をUIコンポーネントにバインドし、操作を呼び出すコードを作成するための、共通の方法が用意されているからです。
使用するサービスを設定するために、Flash Builder 4はサービスをイントロスペクトし、ツリービューを自動的に作成します。Flash Builder 4で、データ／ColdFusion（またはサービスに使用したその他のテクノロジー）に接続を選択します。ColdFusionの場合は、サービスに使用する名前（例：EmployeeSvc）を入力し、ファイルシステム上のCFCを参照するだけで済みます。
この手順は、サービスに使用しているテクノロジーに応じて多少異なります（例えば、Webサービスの場合はWSDLを指定します）。しかし、結果は常に同じです。Flash Builder 4は、サービスをイントロスペクトして、返される操作とデータ型を調べ、データ／サービスパネルにサービスのツリービューを作成します。
必要な場合は、他のサービスを追加してツリービューを作成することも、表示されているサービスをアプリケーションで直ちに使用することもできます。ただし、サービスの操作が弱い型付けを使用している場合は、もう1段階の手順が必要です。弱い型付けの操作は、データを返しますが、データが何を表すかという情報を返しません。
例えば、CFC関数がColdFusionのクエリーオブジェクトを返す場合、Flash Builder 4はレコードの集合を受け取りますが、その要素が製品なのか従業員なのか注文なのかは分かりません。単なるデータの集合です。この操作の結果をデータ型として参照するために、Flash Builder 4では、操作が返すデータの型を手動で設定できます。サーバー側で強い型付けを使用する場合や、Flash Builder 4のサンプル生成オプションを使用した場合、この手順は不要です。
弱い型付けのサービス操作から返される型を設定するには、データ／サービスパネルで右クリックして、「戻り値の型を設定（Configure Return Type）」を選択します。これにより、サーバーからの弱い型付けのデータをFlexアプリケーションの強い型付けに対応付けるためのウィザードが起動します。ここでは、実際のデータサンプルを使用して、どのように型付けするかを指定できるので、操作が返すカスタムデータ型の名前を指定します。例えば、返されるレコードにEmployeeやSalesOrderといった名前を付けます。それから、データ型のフィールドとその形式を指定します。例えば、名前は文字列、従業員IDは数値のように指定します（図2）。
ステップ3：UIコントロールへのサービスの接続
サービスに含まれるすべての操作を定義し、返されるデータの型を定義したら、今度は操作の結果をアプリケーションのどこかに表示する必要があります。Flexフレームワークには、データグリッド、リストボックス、フォームフィールドなど、データにバインドできるさまざまなコンポーネントが用意されています。これらのコンポーネントには、データを表示し、ユーザーとサービスの間のやり取りを可能にする機能があります。
デザインビューを使えば、UIのレイアウトと、操作へのコンポーネントのバインドを、簡単に実行できます。エディターをソースビューからデザインビューに切り替えます。デザインビューでは、コンポーネントパネルからアプリケーションのキャンバスにコンポーネントをドラッグ＆ドロップし、その位置を精密に設定できます。
データグリッド（コンポーネントパネルのデータコントロールグループの下）を選択し、ページまでドラッグします。このグリッドはまだデータにバインドされていないので、アプリケーションを実行すると、単に3つの列がある空のグリッドが表示されます。サービス操作から返されたデータをこのグリッドに表示するには、データ／サービスパネルから操作をドラッグして、グリッド上にドロップします。このときデータプロバイダーを選択できます（図3）。
選択するとグリッドが変化して、操作から返される列が表示されます。この時点で、プロジェクトを保存して実行してみてください。ColdFusionサービスによって内容を設定したDataGridを表示する、使用可能なアプリケーションが動作します。表示する列の変更が必要な場合は、列の設定オプションを使用して変更できます。コードを書く必要も、イベントリスナーを実装する必要も、サービスがColdFusionなのかJavaなのかSOAPなのかを知る必要もありませんでした。
他にも、データ型とサービスを使用して、アプリケーションUIを簡単に作成するさまざまな方法があります。例えば、データ型からフォームを生成してマスター詳細フォームを作成したり、サービス操作をボタンコンポーネントにドラッグ＆ドロップして、ユーザーがボタンをクリックしたときにその操作が自動的に起動されるようにしたり（保存操作の実行など）、チャートコンポーネントに操作をドラッグ＆ドロップしたり、サービス操作をコンポーネントにバインドせず単に呼び出すようなコードを生成したりできます。
サーバー側コードの変更が頻繁に発生し、単に操作をテストする必要がある場合は、「Test Operation（操作をテスト）」オプションが便利です。サービスファイルに変更を加えたり操作を追加したりすると、自動的にサービスが最新の状態に更新され、データ型に加えられた変更内容が反映および結合されます。
データ／サービス機能は、デザインビューで開発を始めるときに便利なだけではありません。このサービスモデルを使用すると、すべての操作やデータ型についてコードヒント機能が有効になります。また、生成されるクラスを拡張することにより、サービス操作呼び出しコードの生成や値オブジェクトの動作をカスタマイズすることもできます。
高度なデータ機能
Flash Builder 4のデータ中心型機能を利用することで、データを使用するアプリケーションを作成する際の生産性を大幅に改善できます。Flex Builder 3でも同様のアプリケーションを作成することは可能でしたが、もっと手間がかかりました。一方、新しい高度なデータ機能を使えば、単に生産性を改善できるだけでなく、従来は極めて困難または不可能だった機能を実現できるようになります。
例えば、クライアントサイドのデータ管理機能を使えば、クライアント上での一般的なデータサービス操作（レコードの選択、作成、更新、削除）を、サーバー上での対応するデータ操作にマッピングできます。これにより、いくつかの操作をバッチ実行したり、ユーザーが変更を取り消せるアンドゥ機能を実装したりすることが可能になります。
もう1つの便利な機能として、自動ページングのサポートがあります。表示するレコードがたくさんある場合、アプリケーションがレコードをすべて一度に取得して読み込むと、パフォーマンスが低下するおそれがあります。ページングとは、レコードを少数のグループに分けて、一度に必要な分だけを取得する機能です。サービス側に必要なのは、1回のバッチ取得の開始行とレコード数を引数として取る機能だけです。クライアント側のロジックは、すべてFlash Builder 4に実装されています。
次のステップ
Flexの開発経験が豊富なユーザーでも、初めてこのテクノロジーに触れるユーザーでも、Flash Builder 4を使えば、サーバーサイドの既存のデータとサービスロジックを十分に活用したリッチなアプリケーションを簡単に作成できます。ソフトウェアをダウンロードすれば、新しいデータ体験を今すぐユーザーに提供できます。
