libro
www.tuyano.com
初心者のためのPlay Framework入門

フォームヘルパーを活用しよう![Scala編] (4/5)

作成:2013-02-03 20:56
更新:2013-02-03 20:56

■ラジオボタン、チェックボックス、リストの表示

では、その他のコントロール類も使ってみましょう。入力のコントロールとして重要なものといえば「チェックボックス」「ラジオボタン」「リスト」といったものでしょう。これらの基本的な使い方を説明しましょう。まずはビューテンプレートでの書き方から。

●チェックボックス
@helper.checkbox( フォームの指定 )
チェックボックスは「checkbox」メソッドで生成します。これは、inputTextと同様に、フォーム用のFormクラスのプロパティを引数に指定しておくだけです。ただし、これだとチェックボックスだけしか表示されません。このため、通常は「'_text -> 表示テキスト」といった値を引数に追記しておきます。

●ラジオボタン
@helper.inputRadioGroup( フォームの指定 , 
    options = Seq( 表示項目の指定  ))
ラジオボタンは、1つ1つ作るのでなく、グループ単位で生成するのが基本です。これを行うのが「inputRadioGroup」です。これは引数に「options」という値を用意することで、表示する項目を指定することができます。

このoptionsは、「Seq」というものを使います。これは多数の要素を管理するコレクションの一種です。このSeqは、以下のような形で記述していきます。
Seq( 値->ラベル, 値->ラベル, ……)
値というのはその項目を選んだ時に値として送られるものです。ラベルは、その項目に表示されるテキストです。つまり、指定のラベルを選ぶと、その値が送られる、というわけです。

●リスト
@helper.select( フォームの指定 , options = Helper.options( 表示項目の指定 ))
<select>によるリストは、optionsというもので表示する項目を指定します。これは、Helper.optionsというメソッドを利用して設定するのが一般的です。このメソッドは以下のような形で実行します。
Helper.options((値, ラベル), (値, ラベル), ……)
表示する項目の値と表示テキスト(ラベル)をセットにして記述していきます。これで、それらの項目を<option>タグとして生成することができます。

この他、表示サイズ(表示される行数)は、デフォルトでは1行になっており、プルダウンリストのように機能するようになっています。一覧リストのように表示させたい場合は、「'size -> "行数"」というようにしてsize属性を設定します。

――では、実際の利用例を以下に挙げておきましょう。ここではチェックボックス、ラジオボタン、リストといったコントロールを持つフォームを用意しています。これらを設定して送信すれば、選択した値が表示されます。

※プログラムリストが表示されない場合

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

●プログラム・リスト●

●index.scala.htmlのソースコード
@(title: String, message: String, myForm: Form[Application.MyFormData])

@main(title) {
    <h1>@title</h1>
    <p>@message</p>
    @helper.form(action = routes.Application.sendform) {
        @helper.checkbox(
            myForm("check"),
            '_text -> "adult",
            '_help -> ""
        )
        @helper.inputRadioGroup(
            myForm("gender"),
            options = helper.options(("M","Male"),("F","Female")),
            '_help -> ""
        )
        @helper.select(
            myForm("country"),
            options = helper.options(("JP","Japan"),("US","U.S.A"),("UK","UK"),("etc","Other")),
            '_default -> "-- Choose --",
            'size -> "5",
            '_help -> ""
        )
        
        <input type="submit">
    }
}


●Application.scalaのソースコード
package controllers

import play.api._
import play.api.mvc._
import play.api.data.Form
import play.api.data.Forms._

object Application extends Controller {
    
    case class MyFormData(
        check:Boolean, gender:String, country:String)
    
    val form1 = Form(
        mapping(
            "check" -> boolean,
            "gender" -> text,
            "country" -> text
        )(MyFormData.apply)(MyFormData.unapply)
    )
    
    def index = Action {
        val title = "サンプルページ"
        val msg = "サンプルのページです。"
        Ok(views.html.index(title, msg, form1))
    }
    
    def sendform = Action { implicit request =>
        var myForm = form1.bindFromRequest
        val data: MyFormData = myForm.get
        val title = "サンプルページ"
        val msg = "data: " + data
        Ok(views.html.index(title, msg, myForm))
    }
}

※関連コンテンツ

「初心者のためのPlay Framework入門」に戻る