Flex + Ruby on Rails + MySQL 連携メモ

Tags: , , ,

データベースの情報をRailsでXMLファイルに整形しFlexに読み込ませる。Model-View-Controller(MVC)パターンで言うとMCをRailsに、VをFlexに担当させる。今までデータベースへのアクセスはPHPスクリプトを書いて行っていたが、Railsを用いるとその面倒くさいテンプレート書きが必要なくなるので非常に快適。用いたのはFlexSDK 3.0, Ruby 1.8.6, Rails 1.2.6, MySQL 5.0.5。Railsは最新の2.xを用いても特に問題ないと思う。以下の例ではデータベースに格納されたの本の詳細(title, price, description)をRailsで管理、FlexのGridDataに読み込ませている。

Rails側

Railsで適当なプロジェクト(ここではflex_connect)を作成。コマンドラインより

rails flex_connect

データベースを作成。MySQLコマンドラインより

mysql> create database flex_connect_development;

Railsプロジェクト内config/database.ymlを設定(今回はdevelopmentのみ使用)。

development:
  adapter: mysql
  database: flex_connect_development
  username: root
  password: [YOURPASSWORD]
  socket: /tmp/mysql.sock

次にモデルを作成(ここではBook)。Railsプロジェクト内に移動してコマンドラインより

ruby script/generate model Book

Railsプロジェクト内、db/migrate/xxx_create_books.rb(xxxの部分はrailsのバージョンによって異なる)を以下のように修正。

class CreateBooks < ActiveRecord::Migration
  def self.up
    create_table :books do |t|
      t.column :title, :string
      t.column :price, :float
      t.column :description, :text
    end
  end

  def self.down
    drop_table :books
  end
end

コマンドラインより

rake migrate

これによりDB: flex_connect_developmentにテーブルbooks(title, price, description)が作成される(MySQLを直接触らなくてよい！)。テーブル内に適当にテストデータを入力しておく(title=”Flex3″, price=”54.99″, description=”Adobe developer library”, etc.)。Railsから入力してやるのが簡単だがここでは割愛。

次にコントローラーを作成。コマンドラインより

ruby script/generate controller Book

Railsプロジェクト内、app/controllers/book_controller.rbに以下のメソッドを定義。

class BookController < ApplicationController
  def make_xml
    @books = Book.find(:all)
    render :xml => @books.to_xml
  end
end

これで”http://localhost:3000/book/make_xml”にアクセスするとデータベース情報がXML形式で出力される。例えばこんな感じ。

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <description>Ruby on Rails made easy.</description>
    <id type="integer">3</id>
    <price type="float">34.99</price>
    <title>Rails Solutions</title>
  </book>
  <book>
    <description>The Adobe developer library guide for rich interner application developers</description>
    <id type="integer">4</id>
    <price type="float">44.99</price>
    <title>Flex 3 Cookbook</title>
  </book>
  <book>
    <description>Friends of ED Adobe lerning library.</description>
    <id type="integer">5</id>
    <price type="float">54.99</price>
    <title>The Essential Guide To Flex 3</title>
  </book>
</books>

Flex側

“http://localhost:3000/book/make_xml”の内容をDataGridに表示させるソースは以下の通り。上記RailsのXMLファイルを出力するURLをロードしてDataGridに格納している。詳細は割愛。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="absolute" creationComplete="init(event)">

    <mx:DataGrid dataProvider="{_bookList}">
        <mx:columns>
            <mx:DataGridColumn dataField="title" />
            <mx:DataGridColumn dataField="price" />
            <mx:DataGridColumn dataField="description" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.http.HTTPService;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            import flash.net.URLRequestMethod;

            [Bindable]
            private var _bookList:ArrayCollection

            private function init(e:Event):void{
                var req:HTTPService = new HTTPService();
                req.url = "http://localhost:3000/book/make_xml";
                req.method = URLRequestMethod.POST;
                req.send();
                req.addEventListener(ResultEvent.RESULT,onResult);
                req.addEventListener(FaultEvent.FAULT,onFault);
            }

            private function onResult(e:ResultEvent):void{
                _bookList = e.result.books.book;
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }

            private function onFault(e:FaultEvent):void{
                Alert.show("Could not connect the database.","ERROR");
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }
        ]]>
    </mx:Script>
</mx:Application>

まとめ

今回はRails側にMVCパターンのMCを担当させた。同様にしてRails側のコントローラーに適切なメソッド(データの追加・削除 etc.)を追加することで専用のURLを簡単に作成できるので、Flex側は必要なURLにアクセスするだけでよくなった。

Related posts:

7 月 30, 2008

Trackback URL

Comments

One Response to “Flex + Ruby on Rails + MySQL 連携メモ”

  1. Apache + Rails + Flex: FlashVarsを使う場合 on 8 月 5th, 2008 11:39 PM

    […] スコアデータ5種類用意。特定のbook idのスコアデータをFlexで読み込みやすいようにxmlデータで出力させる。Flex側で極力整形を避けたかったので、Rails側で以下のようなxmlデータを作るURL(例えば、:controller => ‘book’, :action => ‘create_xml’, :id => @book.id)を作成しておく。具体例はFlex + Ruby on Rails + MySQL 連携メモを参照のこと。 […]

Leave a Reply