Rails 2.0とFlex 3 beta3でRESTfulなBookmarkアプリを作ろう 2

FlexにはEclipseベースのFlex Builderという有償（30,000円～）の開発環境が用意されてますが、今回は無償で使えるFlex SDKだけでやりましょう。これを使えばコマンドラインでコンパイルできます。

ちなみに今回は使いまんせがFlex Builder 3 beta3のダウンロードはここからできます。

準備 （Flex 3 beta3 の SDK）

Adobe LabsのFlex 3 SDKダウンロードページからDownload Flex 3 SDK 3 beta 3 for all platformsをダウンロード＆解凍して適当なディレクトリに配置します。

僕の場合は、D:\flex\の中に入れました。

さて、コマンドラインで使えるように、パスを通しましょう。

Windows XPの僕のマシンの場合、環境変数PATHにD:\flex\flex3sdk_b3_121207\bin\をセットしました。

準備 （Flash Player）

Flash Playerのバージョンを確認。バージョン確認ページ。

9.0.28未満の場合は、新しいバージョンのFlash Playerをインストール必要があります。 開発時はDebug版のFlash Playerの方が便利なので、バージョンの問題がない場合も含めて最新（現在は9.0.115）のDebug版Flash Playerをインストールしておくといいでしょう。

さっきダウンロードしたSDKの中にそのインストーラが入ってます。 僕の場合、D:\flex\flex3sdk_b3_121207\runtimes\player\以下にあります。

Flexを知らない人のために

FlexにはボタンやチェックボックスなどのUIコンポーネントや、通信のためのコンポーネントなどアプリケーションのインタフェースを作る上で便利なものがいっぱい用意されてます。

どんなものがあるかはFlex 3 Compon Entexplorerを見るのがいいでしょう。UIコンポーネントはCSSによるスタイル変更も可能で、それはFlex Style Explorerで動的に確認できます。

ちなみにこのStyle Explorerはソース付きで、画面上で右クリックしてメニューの「View Source」でソースの閲覧＆ダウンロードができます。

Flexの実装

Flexのソースファイルを置くところはどこでもいいのですが、僕の場合は、D:\rails\rails2restful\にflex_srcというフォルダを作りました。

その中にRails2RESTful.mxmlというテキストファイルを作り、以下のコードを入力します。文字コードはUTF-8。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
		initialize="listBookmarks()">
	<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.events.CloseEvent;
		import mx.rpc.AsyncResponder;
		import mx.rpc.AsyncToken;
		private function listBookmarks():void
		{
			listBookmarksHS.url = "/bookmarks.xml";
			listBookmarksHS.method = "GET";
			var call:AsyncToken = listBookmarksHS.send();
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "listBookmarks 成功");
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "listBookmarks エラー");
				},
				call
			));
		}
		private function createBookmark():void
		{
			var request:XML = 
				<bookmark>
					<name>{ nameTextInput.text }</name>
					<url>{ urlTextInput.text }</url>
				</bookmark>;
			createBookmarkHS.contentType = "application/xml";
			createBookmarkHS.url = "/bookmarks.xml";
			createBookmarkHS.method = "POST";
			var call:AsyncToken = createBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "createBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "createBookmark エラー");
				},
				call
			));
		}
		private function updateBookmark():void
		{
			var request:Object = {};
			request["_method"] = "PUT";
			request["bookmark[name]"] = nameTextInput.text;
			request["bookmark[url]"] = urlTextInput.text;
			updateBookmarkHS.url = "/bookmarks/" + dataGrid.selectedItem.id + ".xml";
			updateBookmarkHS.method = URLRequestMethod.POST;
			var call:AsyncToken = updateBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "updateBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "updateBookmark エラー");
				},
				call
			));
		}
		private function destroyBookmark():void
		{
			var request:Object = {};
			request["_method"] = "DELETE";
			destroyBookmarkHS.url = "/bookmarks/" + dataGrid.selectedItem.id + ".xml";
			destroyBookmarkHS.method = URLRequestMethod.POST;
			var call:AsyncToken = destroyBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "destroyBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "destroyBookmark エラー");
				},
				call
			));
		}
	]]>
	</mx:Script>
	
	<mx:HTTPService id="listBookmarksHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="createBookmarkHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="updateBookmarkHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="destroyBookmarkHS" useProxy="false" showBusyCursor="true" />
	
	<mx:Button label="最新" top="8" right="8" click="listBookmarks()" />
	<mx:DataGrid id="dataGrid" left="8" top="40" right="8" bottom="120"
		dataProvider="{ listBookmarksHS.lastResult.bookmarks.bookmark }"/>
	<mx:Form left="8" right="8" bottom="8">
		<mx:FormItem label="名前">
			<mx:TextInput id="nameTextInput" text="{ dataGrid.selectedItem.name }" />
		</mx:FormItem>
		<mx:FormItem label="URL">
			<mx:TextInput id="urlTextInput" text="{ dataGrid.selectedItem.url }" />
		</mx:FormItem>
		<mx:FormItem direction="horizontal">
			<mx:Button label="新規追加" click="createBookmark()" />
			<mx:Button label="更新" click="updateBookmark()" />
			<mx:Button label="削除" click="destroyBookmark()" />
		</mx:FormItem>
	</mx:Form>
</mx:Application>

コマンドラインでコンパイル

D:\rails\rails2restful>mxmlc flex_src\Rails2RESTful.mxml
Loading configuration file D:\flex\flex3sdk_b3_121207\frameworks\flex-config.xml

This beta will expire on Sat Mar 15 00:00:00 JST 2008.
D:\rails\rails2restful\flex_src\Rails2RESTful.swf (321711 bytes)

ブラウザで確認するための準備

できたSWFファイルをRailsのpublicフォルダにコピー。 僕の場合は、D:\rails\rails2restful\public\以下にコピー。

同フォルダにSWFを表示するためのhtmlファイル、flex.htmlを作ります。以下はソース。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { margin: 0px; overflow:hidden }
</style>
</head>
<body scroll="no">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="Rails2RESTful" width="100%" height="100%"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
        <param name="movie" value="Rails2RESTful.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#869ca7" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed src="Rails2RESTful.swf" quality="high" bgcolor="#869ca7"
            width="100%" height="100%" name="Rails2RESTful" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer">
        </embed>
    </object>
</body>
</html>

ブラウザで確認

http://localhost:3000/flex.htmlを開く。

データ取得ＯＫ。 データの新規追加、更新、削除も動作確認。

ほぼ問題なし、だけど、データの新規追加のときだけ、エラーが発生する。 これについては、次回で。

つづく。