§カスタムフィールドコンストラクタ
フィールドのレンダリングは <input> タグだけから構成されるものではなく、<label> や、おそらくフィールドを修飾する CSS フレームワーク が使用するその他のタグも必要になります。
すべての入力ヘルパーは、この役割を担う暗黙の FieldConstructor を使用します。デフォルトのフィールドコンストラクタ (スコープ内で利用可能な他のフィールドコンストラクタがない場合に使用) は、次のような HTML を生成します。
<dl class="error" id="username_field">
<dt><label for="username">Username:</label></dt>
<dd><input type="text" name="username" id="username" value=""></dd>
<dd class="error">This field is required!</dd>
<dd class="error">Another error</dd>
<dd class="info">Required</dd>
<dd class="info">Another constraint</dd>
</dl>
このデフォルトのフィールドコンストラクタは、入力ヘルパーの引数に渡すことができる追加オプションをサポートしています。
'_label -> "カスタムのラベル"
'_id -> "最上位のdl要素のid"
'_help -> "カスタムのヘルプ"
'_showConstraints -> false
'_error -> "強制エラー"
'_showErrors -> false
§独自のフィールドコンストラクタの記述
多くの場合、独自のフィールドコンストラクタを記述する必要があります。 まず次のようなテンプレートを作成します。
@(elements: helper.FieldElements)
<div class="@if(elements.hasErrors) {error}">
<label for="@elements.id">@elements.label</label>
<div class="input">
@elements.input
<span class="errors">@elements.errors.mkString(", ")</span>
<span class="help">@elements.infos.mkString(", ")</span>
</div>
</div>メモ: これはほんの一例です。必要に応じて複雑にすることができます。
@elements.fieldを使って元のフィールドにアクセスすることもできます。
このテンプレート関数を使用して FieldConstructor を作成します。
object MyHelpers {
import views.html.helper.FieldConstructor
implicit val myFields = FieldConstructor(html.myFieldConstructorTemplate.f)
}そして、これをフォームヘルパーで使えるようにするために、テンプレート内にインポートします。
@import MyHelpers._@helper.inputText(myForm("username"))すると、フォームヘルパーはこのフィールドコンストラクタを使って入力テキストをレンダリングします。
FieldConstructor 用に暗黙の値をインラインで設定することもできます。
@implicitField = @{ helper.FieldConstructor(myFieldConstructorTemplate.f) }@helper.inputText(myForm("username"))Next: Json を使う
このドキュメントの翻訳は Play チームによってメンテナンスされているものではありません。 間違いを見つけた場合、このページのソースコードを ここ で確認することができます。 ドキュメントガイドライン を読んで、お気軽にプルリクエストを送ってください。