データの変更
データ一覧（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}
}
