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