Sharable

システム&ウェブのシェアラブル

Lv.16 フォームヘルパー勢ぞろい![play framework2.0] [java]

2012年4月14日
※ローカルだとplay-2.0\framework\src\play\src\main\scala\views\helperに入ってるinputText.scala.htmlなどを呼び出している。
helperフォルダの中身

@helper.inputText」こいつはすごい!便利!

Htmlふつうに書いててよくイージーミスする箇所が適切に補助されるイメージ。

ヘルパーたちはscalaで定義されているので、scala音痴な自分にはあまり中身のことは
わからないけど、なんとなくフィーリングで読んでも分かる簡潔さでした。

目次

formタグを使おう!

これでconf/routesの規定どおりのパラメーターを持つフォームを作ってくれる。

// controller
return ok(index.render(new Form<User>(User.class)));
// template
@helper.form(action = routes.Application.submit()) {}
// 出力されるHTML
<form action="/submit" method="GET"></form>
// conf/routeの定義
GET /submit controllers.Application.submit()

idやらの属性も自由に指定できる。記述方法が独特?なんだろうこれ。

@helper.form(action = routes.Application.submit(), 
 'id -> "myForm"){}
//出力されるHTML
<form action="/submit" method="GET" id="myForm"></form>

アポストロフィーが1つ必要になるっぽい。idの前に1つついてる。「’id」みたいに。
個人的にはアポストロフィーは閉じたくなるけど、閉じるとコンパイルエラーが起きる。

inputの記載方法!

//これはテンプレート引数
@(myForm: Form[User])

@helper.form(action = routes.Application.submit()) {
 @helper.inputText(myForm("username"))
 @helper.inputPassword(myForm("password"))
}
//出力されるHTML
<form action="/submit" method="GET">
<dl class=" " id="usernamea_field">
 <dt><label for="usernamea">usernamea</label></dt>
 <dd>
  <input type="text" id="usernamea" name="usernamea" 
   value="">
 </dd>
</dl>
<dl class=" " id="password_field">
 <dt><label for="password">password</label></dt>
 <dd>
  <input type="password" id="password" name="password"
   value="">
 </dd>
 <dd class="info">Required</dd>
</dl>
</form>

inputが普通に出力されるのではなくて、dlタグの子要素として出力される点に注目。
これが何気に便利。dlタグの使い方がこれで正しいのかは分からないけど、一連の定義だと
思えば意味的にもdlタグは正しいのかも。

ラベルも出力してくれている。このラベルとかはもっと柔軟に変えることができるのですが、
それは次回。とりあえず基本的な記述方法を染みこませる方が先決かと。

ちなみにここでもさっきのformタグと同じように好きな属性を追加することができる。例の
独特な記述方法でもって。

※「->」はjavaではなくてscalaの表記。phpなどでも使われる。意味合いとしては連想配列のKey→Valueみたいなマッピング関係を表している。id -> usernameを敢えてjava的に書くと、map.put(“id”,”username”)と同じような関連付けを行っている。
@helper.inputText(myForm("username"), 'id -> "username", 
 'size -> 30)
//出力されるHTML
<input type=text id=username size=30 />

inputText.scala.htmlの一部抜粋すると、以下のように定義されていることがわかる。

@input(field, args:_*) { (id, name, value, htmlArgs) =>
 <input type="text" id="@id" name="@name" value="@value"
  @toHtmlArgs(htmlArgs)>
}

inputTextの第一引数「myForm」が上記のfieldに当たる。他はargs、だと思う。
inputText以外にもいろいろ定義されているので、全部書いておきます。

ヘルパータグ 定義ファイルの一部抜粋
inputDate.scala.html
@input(field, args:_*) { (id, name, value, htmlArgs) =>
 <input type="date" id="@id" name="@name" value="@value" 
  @toHtmlArgs(htmlArgs)>
}
inputFile.scala.html
 @input(field, args:_*) { (id, name, value, htmlArgs) =>
  <input type="file" id="@id" name="@name" @toHtmlArgs(htmlArgs)>
 }
inputPassword.scala.html
 @input(field, args:_*) { (id, name, value, htmlArgs) =>
  <input type="password" id="@id" name="@name" value="@value" 
   @toHtmlArgs(htmlArgs)>
 }
inputRadioGroup.scala.html
 
@input(field, args:_*) { (id, name, value, htmlArgs) =>
 <span class="buttonset" id="@id">
  @options.map { v =>
   <input type="radio" id="@(id)_@v._1" name="@name" 
   value="@v._1" @(if(value == Some(v._1)) "checked" else "") 
   @toHtmlArgs(htmlArgs)>
   <label for="@(id)_@v._1">@v._2</label>
  }
 </span>
}
inputText.scala.html
 @input(field, args:_*) { (id, name, value, htmlArgs) =>
  <input type="text" id="@id" name="@name" value="@value" 
   @toHtmlArgs(htmlArgs)>
 }

アセスメント

  • formタグの使い方が分かる
  • input type=textの出力方法が分かる

公式ドキュメントはForm template helpersでした。
次回もこれの続き。もうちょっと複雑になる。

このエントリーをはてなブックマークに追加