Play framework

フォームの使用 †

単純なフォーム入力処理、組み込みのバリデーション機能の使用まで。

↑

目次 †

↑

サンプル1 †

名前を入力して「こんにちは、○○さん！」と返すページを作成する。

↑

ソース †

  • まず、app/views/Application/index.html を下記のように変更。 
    #{extends 'main.html' /}
#{set title:'Home' /}

<h1>名前を入れてね</h1>
<form action="@{Application.sayHello()}" method="GET">
    <input type="text" name="myName" />
    <input type="submit" />
</form>
    「@{Application.sayHello()}」は、フォームの内容を受け取るメソッド名。メソッド名を記述するだけで、自動的にURLに変換してくれる。
  • 次に、Application.sayHello()に相当するメソッドを作成する。Application.javaファイルに下記のメソッドを追加。 
        public static void sayHello(String myName)
    {
        render(myName);
    }
  • Application.sayHello()のrender()を処理するために、app/views/Application/sayHello.htmlを用意する。 
    #{extends 'main.html' /}
#{set title:'Home' /}

<h1>こんにちは、${myName}さん！</h1>

<a href="@{Application.index()}">戻る</a>
    「${myName}」には、render()メソッドを読んだときの引数が埋め込まれる。
↑

実行結果 †

  • 実行イメージ
    1.png→2.png
  • 生成されたhtml1（index.html) 
    <!DOCTYPE html>

<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8">
        <link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
                <link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
        <script src="/public/javascripts/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
            </head>
    <body>
        
<h1>名前を入れてね</h1>
<form action="/application/sayhello" method="GET">
	<input type="text" name="myName" />
	<input type="submit" />
</form>

    </body>
</html>
  • 生成されたhtml2（sayHello.html) 
    <!DOCTYPE html>

<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8">
        <link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
                <link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
        <script src="/public/javascripts/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
            </head>
    <body>
        


<h1>こんにちは、kominaさん！</h1>

<a href="/">戻る</a>
    </body>
</html>
    共に、main.htmlの#{doLayout /}部分に埋め込まれていることが分かる。
↑

解説・まとめ †

  • ここではGETメソッドを使用しているが、もちろんPOSTメソッドを用いることも可能。その際は、routeファイルでGETとしている記述をPOSTに変更すること。
  • Application.sayHello()でrender()メソッドを呼ぶ際の変数名は重要。sayHello.htmlでの変数参照のときに名前で結び付けられるため。
    • たとえば、render("test");といった定数文字列を直接指定することはできない。
    • render()は可変引数をとるようになっているが、変数名で区別されるので順番は問わない。
    • 当然ながら、大文字小文字も区別される。
  • フォームの処理先URLが「"/application/sayhello"」と展開されている。これは、route設定ファイルの下記の記述を反映してのもの。 
    # Catch all
*       /{controller}/{action}                  {controller}.{action}
    sayHello専用に次の記述を加えると… 
    # sayHello
GET     /hello                                  Application.sayHello
    フォームの処理先URLは「」のように変わることが確認できる。 
    <h1>名前を入れてね</h1>
<form action="/application/sayhello" method="GET">
	<input type="text" name="myName" />
	<input type="submit" />
</form>
  • ${}タグで、変数myNameを参照する際、変数が空だった場合に表示する代替文字列を指定することができる。たとえば「名無し」に置き換える場合は、下記のようになる。 
    <h1>こんにちは、${myName ?: '名無し'}さん！</h1>
↑

サンプル1.1 †

バリデーション機能を利用して必須入力を実現する。

↑

ソース変更 †

  • フォーム処理側の対応としては、引数に「@Required」アノテーションを適用する。エラー時のメッセージもここに記述する。 
    import play.data.validation.Required;

    public static void sayHello(@Required String myName)
    {
        if (validation.hasErrors())
        {
            flash.error("お名前を教えてください");
            index();
        }

        render(myName);
    }
    validation.hasErrors()でエラー発生を検出。flash.error()でエラーメッセージを設定。index()でindexページへ遷移、となる。
  • 遷移先のテンプレートにはエラーメッセージを出力する記述を追加する。 
    #{if flash.error}
    <p style="color:#c00">
        ${flash.error}
    </p>
#{/if}
    flash.errorに値が入っているときに、#{if flash.error}〜#{/if}に囲まれた部分が有効になる。${flash.error}部にエラーメッセージが埋め込まれる。
↑

実行結果 †

  • 実行イメージ
    3.png→4.png
添付ファイル: file4.png 342件 [詳細] file3.png 440件 [詳細] file1.png 466件 [詳細] file2.png 411件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-12-13 (火) 16:46:41 (4510d)