コントローラーとビュー[Java編] (3/4)

続いて、フォームの送信を行いましょう。Play Frameworkでは、フォームはフォームヘルパーを利用して作成するのが一般的ですので、このやり方で作ることにしましょう。

「ヘルパー」は、ビューテンプレートでの入力を支援するためのものです。フォームヘルパーは文字通りフォームの作成を支援します。フォームヘルパーを呼び出すことで、必要なタグを自動生成し出力させることができます。

このフォームヘルパーを利用する場合、そのフォームに入力される値をオブジェクトとして管理するように設計するのがPlayでは一般的です。あらかじめ、フォームの内容に一致するような形で値を保管するプロパティを持ったクラスを定義しておき、このインスタンスとフォームを関連付けて値を管理するのです。

これは、実際に試しながら説明しないとわかりにくいので、さっそく簡単なものを作ってみましょう。例として、入力フィールドが１つあるだけの単純なフォームを作成してみます。下のリスト欄にindex.scala.htmlのサンプルを挙げておきました。

ここでは、冒頭の変数宣言にform1: Form[forms.MyForm]というものが追加されています。これがフォームのオブジェクトを保管するものです。このFormというクラスについては後述しますので、とりあえず「フォーム情報を管理するFormというもののインスタンスが渡されるんだ」と考えてください。

実際にフォームを作成しているのが、フォームヘルパーを利用している部分です。ここでは、まず以下のような文が書かれていますね。

@helper.form(action = routes.Application.sendform, 
    args = 'id -> "form1") {……略……}

この@helper.formというのが、フォームヘルパーのメソッドを呼び出している部分です。ヘルパーは、すべてhelperというオブジェクトにまとめられています。formは、<form>タグを生成するものです。引数には、送信先のactionと、その他の属性情報をまとめたargsが用意されています。actionは、送信先のアクションメソッドを指定することで、それを呼び出すアドレスが自動的に設定されるようになっています。

フォームの中に用意するコントロール類は、このformの{}内に記述していきます。ここでは入力フィールドを作成する以下の文が書かれています。

@helper.inputText(
    field = form1("input"),
    args = '_label -> "input",
    'placeholder -> "hello..."
)

@helper.inputTextというのが<input type="text">タグを生成するためのものです。ここではfield、argsといった引数が用意されています。

fieldは、コントローラーから渡されるFormインスタンス内のフィールドを指定します。つまり、これでこの<input type~="text">タグの値と、Formの「input」というフィールドとが関連付けられることになります。

argsには、その他の属性を指定します。が、ここの書き方がちょっと注意が必要です。'_labelというのは、フィールドに設定されるラベル（フィールドの説明として表示されるテキスト）を指定するものです。また'placeholderは、何も入力していないときにうっすらとフィールド内に表示されているテキストのことです。

これでフォームヘルパーを使ったフォームが準備できました。後は、Javaのプログラム側の処理を用意します。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※index.scala.htmlソースコード

@(title: String, message: String, form1: Form[forms.MyForm])

@main(title) {
    <h1>@title</h1>
    <p>@message</p>
    @helper.form(action = routes.Application.sendform, 
            args = 'id -> "form1") {
        
        @helper.inputText(
            field = form1("input"),
            args = '_label -> "input",
            'placeholder -> "hello..."
        )
        <input type="submit">
    }
}