CodeZine(コードジン)

特集ページ一覧

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

第2回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
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
    }
}


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 吉田裕美(ヨシダユウミ)

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

バックナンバー

連載:Ruby on Rails + Curl
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5