Ruby on Rails + Curl（AD）

Ruby on Rails + Curl
リッチクライアントCRUDアプリを作成する

第2回

2009/06/30 15:00

データの新規作成

　データの新規作成は、空の編集フォームを表示し、完了ボタンを押した際にはサーバへデータをポストしています。

{CommandButton 
    label = "new",
    {on Action do
        {set-create-form}
    }
},

　新規作成フォーム設定関数set-create-formは、入力欄の値を空や0に設定し、メソッドをpostに、URLを http://localhost:3000/players.jsonのように設定しています。

{define-proc public {set-create-form 
                    }:void
    {set form_text_method.value = "post"}
    {set form_text_name.value = ""}
    {set form_text_team.value = ""}
    {set form_text_no.value =  "1"}
    {set form_text_goal.value = "0"}
    {set form_text_assist.value = "0"}
    {set data_http_form.form-action = {url server_url & "players.json"}}
    {set data_form.visible? = true}
}

データの削除

　データの削除は、データの選択を確認しHttpFormを通じデータ削除を呼び出します。

{CommandButton 
    label = "delete",
    {on Action do
        {if data_list.selection.record-count == 0 then
            {popup-message "No player selected"}
        else
            {if {popup-question "Are you sure?"} == Dialog.yes then
                {for i:int in data_list.selection.records do
                    {set-destory-form data_list.records[i]}
                    {break}
                }
            }
        }
    }
}

　データ削除関数set-destory-formは、メソッドをdeleteに、URLには http://localhost:3000/players/957451028.jsonのように削除するデータのURLを設定し、submit-openメソッドで削除命令をサーバに送っています。

{define-proc public {set-destory-form 
                        rec: Record
                    }:void
    {set form_text_method.value = "delete"}
    {set data_http_form.form-action = {url server_url & "players/" & rec["id"] & ".json"}}

    {try
        {with-open-streams response:#TextInputStream =
            {data_http_form.submit-open
                character-encoding={get-character-encoding-by-name "utf8"}}
         do
        }
     catch e:Exception do
        {popup-message "Error :" & e.message}
    }
    {get-plyaers-list}
}

まとめ

　今回は、Scaffoldの機能を持つリッチクライアントをCurlで作成してみました。サーバ側はほんの少しの改造を行ったのみで、Ruby on Railsがいかにリッチクライアント向きかが感じて頂けたかと思います。

　Curlのコード全体は以下のようになります。

{curl 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{import * from CURL.IO.JSON}

{let players: RecordSet =
    {RecordSet
        {RecordFields
            {RecordField "id", caption = "id", domain = int} ,
            {RecordField "name", caption = "name", domain = String} ,
            {RecordField "team", caption = "team", domain = String} ,
            {RecordField "no", caption = "no", domain = int}  ,
            {RecordField "goal", caption = "goal", domain = int} ,
            {RecordField "assist", caption = "assist", domain = int}
        }
    }
}
{let server_url = "http://localhost:3000/"}

{define-proc public {add-rec
                        id: int,
                        name: String,
                        team: String,
                        no: int,
                        goal: int,
                        assist: int
                    }: void
    let new-rec: Record = {players.new-record}
    {new-rec.set "id", id}
    {new-rec.set "name", name}
    {new-rec.set "team", team}
    {new-rec.set "no", no}
    {new-rec.set "goal", goal}
    {new-rec.set "assist", assist}
    {players.append new-rec}
}

{define-proc public {get-plyaers-list}:void
    {let playersJsonValue: JsonValue =
        {JsonValue-parse
            {url server_url & "players.json"}
        }
    }
    {players.delete-all}
    {for player: JsonObject in playersJsonValue do
        let found?: bool = false
        let id: int = 0
        let name: String = {String}
        let team: String = {String}
        let no: int = 0
        let goal: int = 0
        let assist: int = 0
        set (id, found?) = {player.get-if-exists "id"}
        set (name, found?) = {player.get-if-exists "name"}
        set (team, found?) = {player.get-if-exists "team"}
        set (no, found?) = {player.get-if-exists "no"}
        set (goal, found?) = {player.get-if-exists "goal"}
        set (assist, found?) = {player.get-if-exists "assist"}
        {if found? then
            {add-rec id, name, team, no, goal, assist}
        }
    }
}

{define-proc public {set-update-form 
                        rec: Record
                    }:void
    {set form_text_method.value = "put"}
    {set form_text_name.value = rec["name"]}
    {set form_text_team.value = rec["team"]}
    {set form_text_no.value =  "" & rec["no"]}
    {set form_text_goal.value = "" & rec["goal"]}
    {set form_text_assist.value = "" & rec["assist"]}
    {set data_http_form.form-action = {url server_url & "players/" & rec["id"] & ".json"}}
    {set data_form.visible? = true}
}
{define-proc public {set-create-form 
                    }:void
    {set form_text_method.value = "post"}
    {set form_text_name.value = ""}
    {set form_text_team.value = ""}
    {set form_text_no.value =  "1"}
    {set form_text_goal.value = "0"}
    {set form_text_assist.value = "0"}
    {set data_http_form.form-action = {url server_url & "players.json"}}
    {set data_form.visible? = true}
}
{define-proc public {set-destory-form 
                        rec: Record
                    }:void
    {set form_text_method.value = "delete"}
    {set data_http_form.form-action = {url server_url & "players/" & rec["id"] & ".json"}}

    {try
        {with-open-streams response:#TextInputStream =
            {data_http_form.submit-open
                character-encoding={get-character-encoding-by-name "utf8"}}
         do
        }
     catch e:Exception do
        {popup-message "Error :" & e.message}
    }
    {get-plyaers-list}
}


{let data_list: RecordGrid =
    {RecordGrid
        width = 16cm,
        height = 6cm,
        record-source = players,
        {RecordGridColumn "id", width = 0},
        {RecordGridColumn "name", width = 5cm},
        {RecordGridColumn "team", width = 2cm},
        {RecordGridColumn "no", width = 2cm},
        {RecordGridColumn "goal", width = 3cm, halign = "right"},
        {RecordGridColumn "assist", width = 3cm, halign = "right"}
    }
}

{let form_text_method:TextField = {TextField name = "_method", height = 0cm, width = 0cm}}
{let form_text_name:TextField = {TextField name = "player[name]", width = 5cm}}
{let form_text_team:TextField = {TextField name = "player[team]", width = 5cm}}
{let form_text_no:TextField = {TextField name = "player[no]", width = 5cm}}
{let form_text_goal:TextField = {TextField name = "player[goal]", width = 5cm}}
{let form_text_assist:TextField = {TextField name = "player[assist]", width = 5cm}}

{let data_http_form:HttpForm =
    {HttpForm
        {url server_url},
        method = HttpRequestMethod.post,
        encoding = HttpFormData.urlencoded-mime-type,
        default-character-encoding = "utf8",
        
        {spaced-vbox
            margin = 5pt,
            form_text_method,
            {HBox {TextFlowBox "Name", width = 1.5cm}, form_text_name},
            {HBox {TextFlowBox "Team", width = 1.5cm}, form_text_team},
            {HBox {TextFlowBox "No", width = 1.5cm}, form_text_no},
            {HBox {TextFlowBox "Goal", width = 1.5cm}, form_text_goal},
            {HBox {TextFlowBox "Asssit", width = 1.5cm}, form_text_assist},
            {CommandButton
                label = "Done",
                {on Action do
                    {try
                        {with-open-streams response:#TextInputStream =
                            {data_http_form.submit-open
                                character-encoding={get-character-encoding-by-name "utf8"}}
                         do
                            {if-non-null response then
                                {set data_form.visible? = false}
                            }
                        }
                    catch e:Exception do
                        {popup-message "Error :" & e.message}
                    }
                    {get-plyaers-list}
                }
            }
        }
    }
}

{let data_form = 
    {spaced-vbox 
        visible? = false,
        data_http_form
    }
}

{let command_buttons = 
    {spaced-hbox
        {CommandButton 
            label = "new",
            {on Action do
                {set-create-form}
            }
        },
        {CommandButton 
            label = "edit",
            {on Action do
                {if data_list.selection.record-count == 0 then
                    {popup-message "No player selected"}
                 else
                    {for i:int in data_list.selection.records do
                        {set-update-form data_list.records[i]}
                        {break}
                    }
                }
            }
        },
        {CommandButton 
            label = "delete",
            {on Action do
                {if data_list.selection.record-count == 0 then
                    {popup-message "No player selected"}
                 else
                    {if {popup-question "Are you sure?"} == Dialog.yes then
                        {for i:int in data_list.selection.records do
                             {set-destory-form data_list.records[i]}
                             {break}
                        }
                    }
                }
            }
        }
    }
}

{get-plyaers-list}
{value
    {spaced-vbox
        data_list,
        command_buttons,
        data_form
    }
}

この記事は参考になりましたか？

印刷用を表示

Ruby on Rails + Curl連載記事一覧: Curl＋JRuby＋Google App EngineでTwitter風アプリを作る　～...

Curl＋JRuby＋Google App EngineでTwitter風アプリを作る　～...

Ruby on Rails + Curl　Curl用Scaffoldを自作する

もっと読む

この記事の著者: 吉田裕美（ヨシダユウミ）

有限会社 EY-Office 取締役CADのベンチャー企業でCADのコア部分や図面管理システムなどの開発に従事した後、独立しJava,Ruby,PerlでWebアプリを中心に開発してきた。現在は殆どの開発はRuby on Rails。ここ数年はソフトウェアエンジニアの教育に興味をもち、従来の知識偏重な教育ではなく現実の問題を解決できるエンジニアを育てる教育に注力している。またLisp等に関心...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事