'GWT on Rails'のサンプル(参照だけ)

追記
'1. JSON Request/RESTを処理するサーバを作る'について別の方法を書いた
http://edotprintstacktrace.blogspot.com/2008/03/json-requestrest.html

---

GWTで開発したいがサーバサイドとのやり取りをRPCにすることはちょと無理．という状況に一つの解決案がありました．それが

GWT on Rails
http://code.google.com/p/gwt-on-rails/

です．

これは

１．Railsで作ったモデルをJavaクラスにしてくれます．
　（これはGWTでコンパイルしてクライアントで使えるようになる．)
２．このJavaクラスの値が必要な場合JSON Request/RESTを発行し，サーバに問い合わせてクライアント側で利用できるように親クラスができあがります．
　（こいつもGWTでコンパイルしてクライアントで使えるようになる．）

という事ができます．

ということでこいつをやってみました（サンプル的に参照(show)のみ）．

---

ところでまず"JSON Request/RESTを処理できるサーバ"が必要になります．
こいつは実はRails2系だと以下のようにするだけで動くようです．
（Leopardに2系を入れる話はこれ）
1. JSON Request/RESTを処理するサーバを作る
1.0 下準備
(Projectというモデルを作りid=1を登録しておくところまで）

script/generate model Project

db/migrate/001_create_projects.rb

class CreateProjects < ActiveRecord::Migration
  def self.up
    create_table :projects do |t|
      t.primary_key :id
      t.string :name, :null => false
      t.timestamps
    end
  end

  def self.down
    drop_table :projects
  end
end

script/generate migration InsertProjects

db/migrate/002_insert_projects.rb

class InsertProjects < ActiveRecord::Migration
  def self.up
    Project.create(:id=>1, :name=>"FooBar")
  end

  def self.down
  end
end

rake db:migrate

1.1 コントローラの実装(showだけ)

script/generate controller Projects

app/controllers/projects_controller.rb

class ProjectsController < ApplicationController
  def show
    @project = Project.find(params[:id])
    respond_to do |format|
      format.xml  { render :xml=>@project }
      format.json { render :json=>@project }
    end
  end
end

（コントローラ，ビューをしっかり書けば1.2系でも動くハズ)

1.2 REST処理用のルートの指定

config/routes.rb

ActionController::Routing::Routes.draw do |map|
  map.resources :projects
…

２行目に追加（評価順序の都合で上の方に追加）

rake routes

projects	GET	/projects	{:action=>"index", :controller=>"projects"}
formatted_projects	GET	/projects.:format	{:action=>"index", :controller=>"projects"}
	POST	/projects	{:action=>"create", :controller=>"projects"}
	POST	/projects.:format	{:action=>"create", :controller=>"projects"}
new_project	GET	/projects/new	{:action=>"new", :controller=>"projects"}
formatted_new_project	GET	/projects/new.:format	{:action=>"new", :controller=>"projects"}
edit_project	GET	/projects/:id/edit	{:action=>"edit", :controller=>"projects"}
formatted_edit_project	GET	/projects/:id/edit.:format	{:action=>"edit", :controller=>"projects"}
project	GET	/projects/:id	{:action=>"show", :controller=>"projects"}
formatted_project	GET	/projects/:id.:format	{:action=>"show", :controller=>"projects"}
	PUT	/projects/:id	{:action=>"update", :controller=>"projects"}
	PUT	/projects/:id.:format	{:action=>"update", :controller=>"projects"}
	DELETE	/projects/:id	{:action=>"destroy", :controller=>"projects"}
	DELETE	/projects/:id.:format	{:action=>"destroy", :controller=>"projects"}
		/:controller/:action/:id
		/:controller/:action/:id.:format

ここまででJSON Request/RESTを処理するサーバ完成．
1.x 確認
起動

script/server

wget --header='Accept: application/xml' http://localhost:3000/projects/1
curl -H 'Accept: application/xml' http://localhost:3000/projects/1

<?xml version="1.0" encoding="UTF-8"?>
<project>
<created-at type="datetime">2008-03-08T00:00:00+09:00</created-at>
<id type="integer">1</id>
<name>FooBar</name>
<updated-at type="datetime">2008-03-08T00:00:00+09:00</updated-at>
</project>

wget --header='Accept: application/json' http://localhost:3000/projects/1
curl -H 'Accept: application/json' http://localhost:3000/projects/1

{"name": "FooBar", "updated_at": "2008/03/08 00:00:00 +0900", "id": 1, "created_at": "2008/03/08 00:00:00 +0900"}

できた♪

2. GWTのコードを生成する．
2.0 下準備 肝心要のPlug-in♪

script/plugin install http://gwt-on-rails.googlecode.com/svn/trunk/gwt_on_rails

2.1 Resource部分
モデルのProjectをまずは反映します．
アプリケーション名をここではdashboardとしています．

script/generate gwt_resource Project dashboard

2.2 Client部分
もう一度migrate．

rake db:migrate

script/generate gwt_client dashboard ${GWT_HOME}

ここで${GWT_HOME}はgwtの展開ディレクトリまでのパスです．
(macだと'gwt-mac-1.4.61'フォルダとか / GWTはここからダウンロードする．)

app/gwt/dashboard/src/dashboard/client/Dashboard.java
(id=1のProjectを取得してnameの値をAlertダイアログで表示というのをGWTのサンプルに追加)

…
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
ResourceCollection projects = new RailsJsonResourceCollection(
"http://localhost:3000/projects/", new ResourceFactory() {
public Resource create() {
return (Resource) GWT
.create(Project.class);
}
});
projects.find(0,
new ResourceResponseHandler() {
public void onSuccess(Resource resource) {
Window.alert("Project name is " + ((Project) resource).getName());
}

public void onError(Request request, Throwable exception) {
Window.alert("Something went wrong.");
}
});

if (label.getText().equals(""))
label.setText("Hello World!");
…

"http://localhost:3000/projects/"はJSON Requestを投げるURL

2.3 GWTコンパイル

rake dashboard:compile

完成♪

3. 試す
3.1

scripte/server

3.2
ブラウザでhttp://localhost:3000/dashboard/を開く
重要!! Dashboard.java編集時に用いたJSON Requestを投げるサーバと文字列的に同じでないとセキュリティーエラーとなりRequestを投げないので注意！(これでハマった．Ajax屋さんは常識なんでしょうねw．)

3.3
clickボタンをクリック．Alert Dialogが表示される． ここにid=1の要素のname属性が表示される(FooBar).


って感じ．