フォームヘルパーを活用しよう![Scala編] (4/5)
作成:2013-02-03 20:56
更新:2013-02-03 20:56
更新:2013-02-03 20:56
■ラジオボタン、チェックボックス、リストの表示
では、その他のコントロール類も使ってみましょう。入力のコントロールとして重要なものといえば「チェックボックス」「ラジオボタン」「リスト」といったものでしょう。これらの基本的な使い方を説明しましょう。まずはビューテンプレートでの書き方から。
●チェックボックス
●ラジオボタン
このoptionsは、「Seq」というものを使います。これは多数の要素を管理するコレクションの一種です。このSeqは、以下のような形で記述していきます。
●リスト
この他、表示サイズ(表示される行数)は、デフォルトでは1行になっており、プルダウンリストのように機能するようになっています。一覧リストのように表示させたい場合は、「'size -> "行数"」というようにしてsize属性を設定します。
――では、実際の利用例を以下に挙げておきましょう。ここではチェックボックス、ラジオボタン、リストといったコントロールを持つフォームを用意しています。これらを設定して送信すれば、選択した値が表示されます。
●チェックボックス
@helper.checkbox( フォームの指定 )チェックボックスは「checkbox」メソッドで生成します。これは、inputTextと同様に、フォーム用のFormクラスのプロパティを引数に指定しておくだけです。ただし、これだとチェックボックスだけしか表示されません。このため、通常は「'_text -> 表示テキスト」といった値を引数に追記しておきます。
●ラジオボタン
@helper.inputRadioGroup( フォームの指定 ,ラジオボタンは、1つ1つ作るのでなく、グループ単位で生成するのが基本です。これを行うのが「inputRadioGroup」です。これは引数に「options」という値を用意することで、表示する項目を指定することができます。
options = Seq( 表示項目の指定 ))
このoptionsは、「Seq」というものを使います。これは多数の要素を管理するコレクションの一種です。このSeqは、以下のような形で記述していきます。
Seq( 値->ラベル, 値->ラベル, ……)値というのはその項目を選んだ時に値として送られるものです。ラベルは、その項目に表示されるテキストです。つまり、指定のラベルを選ぶと、その値が送られる、というわけです。
●リスト
@helper.select( フォームの指定 , options = Helper.options( 表示項目の指定 ))<select>によるリストは、optionsというもので表示する項目を指定します。これは、Helper.optionsというメソッドを利用して設定するのが一般的です。このメソッドは以下のような形で実行します。
Helper.options((値, ラベル), (値, ラベル), ……)表示する項目の値と表示テキスト(ラベル)をセットにして記述していきます。これで、それらの項目を<option>タグとして生成することができます。
この他、表示サイズ(表示される行数)は、デフォルトでは1行になっており、プルダウンリストのように機能するようになっています。一覧リストのように表示させたい場合は、「'size -> "行数"」というようにしてsize属性を設定します。
――では、実際の利用例を以下に挙げておきましょう。ここではチェックボックス、ラジオボタン、リストといったコントロールを持つフォームを用意しています。これらを設定して送信すれば、選択した値が表示されます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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)) } }
※関連コンテンツ