§カスタムフィールドコンストラクタ

フィールドのレンダリングは <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 チームによってメンテナンスされているものではありません。間違いを見つけた場合、このページのソースコードをここで確認することができます。ドキュメントガイドラインを読んで、お気軽にプルリクエストを送ってください。