Flex 4 マスターシリーズ #06 データ中心型開発（DCD） Part1
必要条件
ユーザーレベル
すべて
必要な製品
- Flash Builder 4 (Download trial)
サンプルファイル
- SQL (270 KB)
- addressListApp-debug.zip (1730 KB)
- addressListApp.fxp (18 KB)
Flex 4 マスターシリーズ 連載記事一覧
- #01 MXML 2009
- #02 Flash Builder 4 新機能
- #03 Flex 4 ステート
- #04 Flex 4 CSS
- #05 Spark コンポーネント
- #06 データ中心型開発（DCD） Part1
- #07 Spark Skining part 1
- #08 Spark Skining part 2
- #09 Flex 4 エフェクト
- #10 Flex 4 Spark Layouts
- #11 FlexUnit 4
- #12 データ中心型開発（DCD）Part2
はじめに
このチュートリアルでは、Flash Builder 4の3つのテーマのうちのひとつである、データ中心型開発について紹介します。
Flash Builder 4ではデータやサービス接続機能が強化され、既存のロジックやサービスと接続するアプリケーションの作成がより簡単になっています。
サーバテクノロジーにPHPを採用したサンプルアプリケーション作成を通して紹介いたします。
使用するツールのダウンロードとインストール
VertiroServのインストール:
今回のチュートリアルではFlex4から接続するサーバテクノロジーとしてPHPを使用します。
PHP5をサポートするWebサーバとして、Apache2 + PHP + MySQLをひとつにパッケージ化しているVertigoServをインストールして使用します。
まず最初にVertigoServを以下のサイトからダウンロードします。
http://vertrigo.sourceforge.net/
トップページからダウンロードしたインストーラを実行するとセットアップウィザードが立ち上がります。
「次へ」をクリックして進みます。ライセンス条件を確認して、「同意する」をクリックします。
インストールするコンポーネントを選択して「次へ」をクリックします。
ショートカットを作成するスタートメニューフォルダを選択して「次へ」ボタンをクリックします。
スタートメニューフォルダを選択して「インストール」ボタンをクリックするとインストールが開始されます。
インストール終了後、スタートメニューよりVertrigoServを起動します。
「Hide this window and start server」ボタンをクリックすると、Apache + PHP + MySQLのサーバ環境が起動します。
ブラウザで以下のURLにアクセスすると、インストールされたパッケージを確認することができます。
http://localhost/
データベースとテーブルの作成
VertrigoServでインストールしたMySQLを用いてデータベースを作成します。
最初にインストールしたMySQLのディレクトリに移動します。
C:¥>cd "C:¥Program Files¥VertrigoServ¥Mysql¥bin"
Mysqlコマンドでログインします。
C:¥Program Files¥VertrigoServ¥Mysql¥bin>mysql -u root -p
Enter password: ********(初期パスワードはvertrigo)
Flexという名前のデータベースを作成します。
mysql> create database flex;
作成したデータベースを確認します。
mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| flex |
| mysql |
| phpmyadmin |
+--------------------+
作成したデータベースで使用するユーザを作成して権限も与えます。
ここではflextutorialというユーザを作成しています。<パスワード>は各自の環境に合わせて設定してください。
mysql > grant ALL PRIVILEGES on flex.* TO flextutorial@localhost IDENTIFIED BY '<パスワード>' WITH GRANT OPTION;
一度MySQLを終了します。
mysql > exit;
サンプルのSQLファイルをmysql >C:¥Program Files¥VertrigoServ¥Mysql¥bin以下にコピーしておきます。
dir/w
C:¥Program Files¥VertrigoServ¥Mysql¥bin のディレクトリ
[.] [..] demo.sql mysql.exe
mysqladmin.exe mysqldump.exe v_mysqld.exe
作成したflextutorialユーザでテーブルを作成してデータをセットします。
mysql >mysql -u flextutorial -p flex <demo.sql
Enter password:
作成したテーブルを確認します。
mysql> show tables;
+----------------+
| Tables_in_flex |
+----------------+
| address |
+----------------+
1 row in set (0.00 sec)
作成したaddressテーブルの詳細を確認します。
mysql> desc address;
+-----------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-----------+--------------+------+-----+---------+----------------+
| ID | int(11) | NO | PRI | NULL | auto_increment |
| name | varchar(255) | YES | | NULL | |
| email | varchar(255) | YES | | NULL | |
| zipcode | varchar(10) | YES | | NULL | |
| state | varchar(50) | YES | | NULL | |
| address | varchar(255) | YES | | NULL | |
| tel | varchar(100) | YES | | NULL | |
| age | varchar(50) | YES | | NULL | |
| versionNo | int(11) | YES | | NULL | |
+-----------+--------------+------+-----+---------+----------------+
登録したデータの数を確認します。
mysql> select count(*) from address;
+----------+
| count(*) |
+----------+
| 6000 |
+----------+
1 row in set (0.00 sec)
mysqlコマンドを終了します。
mysql>exit;
これでサーバ側で必要なPHP環境とデータベースの構築が完了いたしました。
次はFlash Builder 4を使ってサンプルアプリケーションの構築をします。
サンプルアプリケーションの作成
Step1. Flex プロジェクトの作成
Flash Builder 4を起動してメニューよりファイル->新規->Flexプロジェクトを選択します。
新規Flexプロジェクト生成のダイアログが立ち上がるので以下のように設定します。
プロジェクト名： addressListApp
アプリケーションの種類 デスクトップ(Adobe AIRで実行) ※Webを選択しても問題ありません。
Flex SDKのバージョン： デフォルトのSDKを使用する。
アプリケーションサーバの種類： PHP
「次へ」をクリックするとPHPサーバ設定の画面が表示されます。
以下のように設定します。
設定の入力後、「設定を検証」ボタンをクリックしてパスが有効であるか確認します。
Webルート：C:¥Program Files¥VertrigoServ¥www¥
ルートURL: http://localhost/
「次へ」をクリックするとライブラリパスの設定画面が表示されるので、終了ボタンをクリックしてプロジェクトを生成します。
Step2.データとサービスに接続
生成したプロジェクトを選択して、メニューよりデータ->データとサービスに接続..を選択します。データとサービスを設定するダイアログ画面が表示されます。
サービスタイプを選択で、PHPを選択して「次へ」をクリックします。
PHPサービスを設定する画面が表示されます。
ここではPHPのクラスをデータベースより生成するため、「ここをクリックしてサンプルを生成してください」のリンクをクリックします。
FlexアプリケーションからPHPのコードにアクセスするためのZend AMFをインストールする確認ダイアログが表示されますので、OKをクリックしてインストールします。
インストールが成功すると、Zend AMFのバージョンチェックをして、最新のZend AMFを入手して手動更新する方法が表示されます。ここではOKボタンをクリックして次に進みます。
サンプルPHPサービスを生成する画面が表示されます。
ここではMySQLデータベースに作成したAddressテーブルからサンプルのPHPサービスを生成する為に以下のように設定します。
データベースから生成を選択
ユーザ名：flextutorial
パスワード：<ユーザ作成時に設定したpassword>
ホスト名: localhost
サーバポート：3306
データベース：flex
データベースに接続ボタンをクリックするとMySQLに作成されたテーブル一覧がプルダウンで表示されます。
addressテーブルを選択してOKボタンをクリックすると、セキュリティ情報が表示されるので、確認のうえOKボタンをクリックするとサンプルのサービスが生成されます。
サンプルサービス生成後PHPサービス設定画面に戻り、生成したサービス(AddressService)の情報が反映されていますので「次へ」ボタンをクリックします。
指定されたPHPサービスの操作一覧が表示されるので、確認して終了ボタンをクリックすると、データとサービスビューに設定したAddressServiceと操作の一覧が表示されるようになります。
これで、サービスの設定とPHPのServiceが作成できました。
Step3.操作のテスト
生成したPHPサービスが正しく動作するかをFlash Builder 4からテストします。
サービスの操作一覧からcount()メソッドを選択->右クリック->操作をテスト..をクリックします。
操作をテストする画面が表示されるのでテストボタンをクリックすると、
応答名:int
応答値：6000
と返ってきて正しくデータベースにアクセスして結果を取得することを確認できます。
Step4.戻りの型を設定
生成したPHPサービスのメソッドについて戻りの型を指定することができます。
サービスの操作一覧からgetAddress_pagedメソッドを選択->右クリック->戻りの型を設定をクリックします。
戻りの型を設定するダイアログが表示されるので、「サンプルデータから戻り値の型を自動検出」を選択して「次へ」ボタンをクリックします。
操作の呼び出しに必要なパラメータ値を選択します。
startIndex int 0
numItems int 20
「次へ」をクリックすると操作が呼び出されてプロパティの型を選択できるようになるので、新規に作成するか、既存のデータ型を使用するかを選択して終了ボタンをクリックします。
Step5.ページングを有効にする
登録されているAddress一覧を表示する際に、ページ処理が有効になるようにデータとサービスビューでページングを有効にします。
生成されたサービスにはページ処理が可能な操作( getAddress_paged() )も自動生成されているので、有効になるように設定をします。
AddressServiceのサービス一覧からgetAddress_paged()を選択して右クリック->ページングを有効にするを選択します。
ページ処理設定のウィザードが開き識別プロパティを選択する画面が表示されます。
ここでは、あらかじめ “ID”が選択された状態になっているのでそのまま「次へ」をクリックします。
一回で取得するデータ数と、データ件数をカウントする操作を選択します。
ページサイズ：20
カウント操作：count()
上記の設定で一回のサーバ問い合わせで20件ずつデータを取得するようになります。
終了ボタンをクリックしてページング設定を終了します。
Step6.DataGridとデータをバインドする
サービスとページングの設定が完了したので、メインのMXMLを編集します。addressListApp.mxmlを開いてデザインモードに切り替えます。コンポーネントビューよりDataGridをドラッグ＆ドロップして配置します。
作成したデータグリッドとサービスの操作を連携させて表示できるようにします。
データとサービスビューからgetAddress_paged()メソッドを選択してデータグリッドにドラッグ＆ドロップするとデータにバインドする画面が表示されますので以下のように設定します。
呼び出す操作
新規サービスの呼び出し
サービス：AddressService
操作： getAddress_paged()
データプロバイダー：Address
OKボタンをクリックするとデータグリッドの列がAddresssクラスのプロパティに更新されます。
Step7.データグリッドの列の構成を設定する。
データグリッドで表示される項目が今の状態のままだと項目が多く、並びも分かりづらいので項目を調整します。
データグリッドを選択した状態でプロパティパネルの列の構成をクリックします。
列の構成パネルで一覧表示に不要な項目を選択して削除し、項目を上へ、下へボタンを使って移動し調整します。OKボタンをクリックするとデータグリッドの項目に反映されます。
反映を確認したら編集中のMXMLを保存します。
Step8.アプリケーションを実行する。
ここまで作成したアプリケーションを実行して動作を確認します。
メニューバーにある実行ボタンをクリックしてaddressListAppを選択するとAIRアプリケーションとして実行されます。
アプリケーションを実行すると、画面初期化時にデータを取得して一覧に表示されます。(図 30)スクロールバーを動かすとページング処理が行われデータを取得している事を確認できます。
Step9.ネットワークモニターでページング処理が動作しているか確認する。
アプリケーションを実行するだけだと実際にどのようにデータ取得をしているかを確認することができないので、Flash Builder 4からの新機能であるネットワークモニターを使ってサービス呼び出しを確認します。
ネットワークモニタービューを開いて、右上にある「モニターを有効にする」というボタンをクリックします。
メニューツールバーにある、アプリケーションのデバッグボタンをクリックしてデバッグモードでアプリケーションを立ち上げます。
アプリケーションから呼ばれるサービスメソッドが一覧に表示されます。一覧を選択すると右側のビューに、ZendAMFが行っているAMF通信の要求と応答の情報を確認することができます。
アプリケーションでスクロールバーを動かすと、ページングの処理を行うたびにネットワークモニター左側のリクエスト一覧にリストアップされ通信している様子を確認できます。
次のステップ
今回は、Flash Builder 4でPHPと連携するアプリケーションを生成してページ処理を行う方法について説明しました。
Flash Builder 4では今回のチュートリアルで扱ったPHP以外にもさまざまなサーバテクノロジーと連携することができるようになっています。
また、これまでAdobe LiveCycle Data Servicesでしかできなかったクライアントで行うデータ管理もPHP/HTTP/ColdFusion/BlazeDSなどのサーバテクノロジーを使って行えるので、より高性能なアプリケーションを簡単に作成できるようになっています。
