SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Ruby on Rails + Curl(AD)

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

第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

データの変更

 データ一覧(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}
}

次のページ
データの新規作成

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Ruby on Rails + Curl連載記事一覧

もっと読む

この記事の著者

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

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4112 2009/06/30 15:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング