PHP+FlexでCRUD【その１】

具体的な方法は以下の通り。

PHP側の処理

PHP側では、データベースからの検索結果をXMLとして返す処理を行います。

実は、これは「自動生成で楽するPHPのDB処理」の記事で既に作成済み（というか、今回の記事で使うために用意していたのですが...）なのでそのままそれを使ってしまいます。

詳細は当該記事を見てみてください。

これで、PHPから結果としてXMLを出力することができるようになりました。

DataGridの配置

次に、Flex側でDataGridコンポーネントを配置します。デザイナから配置してもよいのですが、DataGridColumnの編集はソースで行う必要があると思います。

PHPから出力されるXMLの形式に合わせて、以下のようなコードにしておきます。

<mx:DataGrid id="listGrid" x="0" y="0" width="100%" height="100%">
    <mx:columns>
        <mx:DataGridColumn headerText="ID" dataField="id" visible="false" />
        <mx:DataGridColumn headerText="日付" dataField="date"/>
        <mx:DataGridColumn headerText="タイトル" dataField="title"/>
        <mx:DataGridColumn headerText="詳細" dataField="desc"/>
    </mx:columns>
</mx:DataGrid>

これで、DataGridの配置は完了しました。

HTTPService

次に、FlexからPHPへアクセスするために、HTTPServiceを利用します。これにはいくつかの手順が必要となります。

まず、以下のコードでMXMLへコンポーネントを配置します。

<mx:HTTPService id="list_service" url="./list.php" useProxy="false" resultFormat="e4x" />

上記は、swfと同じ階層のディレクトリにphpが配置されることを前提としているので、環境が異なる場合は書き換える必要があります。

ここで、resultFormat="e4x" とありますが、このe4xというのは ECMAScript for XML のことで、ActionScript内のコードに直接XMLが書けたりXMLのツリーをオブジェクトとして扱えたりといった機能を持つ仕様です。これを指定するとそれに準拠した形式を使うということになります。

次に、DataGridにHTTPServiceで読み込んだXMLを関連付けるため、dataProvider属性を設定します。

<mx:DataGrid id="listGrid" x="0" y="0" width="100%" height="100%" dataProvider="{list_service.lastResult.topic}">

e4xの形式の場合、HTTPServiceのlastResultでXMLのルートエレメントに相当するオブジェクトとなるので、その子供のtopicを指定しています。

最後に、起動時にHTTPServiceのリクエストを送信させるためにInitViewHelperクラスを修正します。

private function creationCompleteHandler(event:FlexEvent):void
{
    view.list_service.send();
}

これで、開いたときにFlexからPHPへアクセスしてXMLを取得し、その結果をDataGridに表示することができるようになるはずです。

最後に

今回のFlex ProjectをEclipseからエクスポートしたものをアップしておきます。
php_crud_1.zip

XMLからの値の処理は比較的簡単にできることがわかりました。
次回は、入力フォームをつけてみたいと思います。