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

第2回

データの変更

　データ一覧（RecordGrid）上で選択したレコードの内容を変更するプログラムを書いていきましょう。これからはCurlのプログラミングになります。

　Curl言語の文法やAPI仕様は開発者ガイドやCurl IDEのヘルプが役にたちます。また画面の設計はCurl IDE使うと、Visual Basicのように簡単に作る事ができます。

変更画面

　今回は、1ページ目の画像のように、一覧の下にボタンを置き、変更ボタンが押された場合、データ一覧の選択されたレコードをボタンの下の編集フォームに表示します。

　このフォームにあるDoneボタンを押すとフォームのデータがサーバに送られデータが変更されます。データをサーバに送った後でデータ一覧は再読込しています。

　画面のレイアウトは以下のように、データ一覧、ボタン、編集フォームが並びます。ただし、編集フォームは最初は表示されないように visible? = false に設定しています。

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

{value
    {spaced-vbox
        data_list,
        command_buttons,
        data_form
    }
}

変更ボタン

　変更（edit）ボタンが押されると、データ一覧が選択されているかチェックし、選択されていない場合はメッセージを表示します。

　選択されている場合は複数選択された場合にそなえ、最初に選択されたデータの内容をset-update-form関数に渡して編集フォームを表示します。set-update-form関数については後述します。

{let command_buttons = 
    {spaced-hbox
        {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}
                    }
                }
            }
        }
    }
}

編集フォーム

　編集フォームはサーバ側にデータを渡す必要があるので、 HttpFormを使って作っています。HttpForm上にあるTextField等の値はサーバ側に送る事ができます。HTMLのformと似ていますね。

　HttpForm上には選手名、チーム名などの入力フィールドが並び、1番下に完了（Done）ボタンがあります。完了ボタンが押された場合、submit-openメソッドでTextField等の入力値をサーバ側にPOSTし、結果を受け取ってresponse変数に代入します。

　submit-openの処理をwith-open-streamsマクロでかこむことで通信エラーなどがあってもサーバとの通信を確実に閉じるようにしています。

{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}
                }
            }
        }
    }
}

　変更ボタンから呼び出されるset-update-form関数ですが、引数で与えられたレコード値を編集フォームの値に代入し、編集フォームの表示を有効にしています。

　またデータの更新用にメソッドを put に URL を http://localhost:3000/players/957451028.json のように変更するデータを表すURLを設定しています。

{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}
}