如何在 Play Framework 中创建多个自定义字段？

Question

我正在尝试构建多个自定义字段。

使用this article 作为参考。

创建MyHelpers之后。

object MyHelpers {

  //This '.f' is kinda mysterious/magic...
  implicit val myFields = FieldConstructor(myFieldConstructorTemplate.f)    

}

我在 .scala.html 上导入

@import MyHelpers._

然后神奇地当我这样做时

@inputText(myForm("username"))

它将在MyHelpers上使用我的构造函数

但是，我将如何创建多个构造函数，以便创建不同的输入类型，例如：

@inputText(myForm("username"))
@inputDate(myForm("birth"))

我将如何实现它？

首先，我是 Scala 的新手（很长一段时间以来，我一直在阅读书籍和文章以及大量有关 Scala 的内容，但几乎没有编写过代码）。 我很抱歉这样的问题，但是 Scala 让学习 Play 变得很困难，看起来你需要先掌握 Scala，这样你才能吸收 Play，甚至了解它是如何构建的。在这些情况下，文档并没有太大帮助。

Answer 1

另一种方法是在一个 scala 对象（不同的文件）中创建多个字段，然后在您的视图中导入这个对象。其余的将很容易理解。

首先：为您要构建的字段创建一个视图。我们称之为 textinputgroup.scala.html

它将包含此代码

@(elements: helper.FieldElements, text: String)
<div class="form-group input-group if(@elements.hasErrors) {error}">
   <span class="input-group-addon">@text</span>
   @elements.input
   <span class="errors">@elements.errors.mkString(", ")</span>
</div>

然后：创建您的对象助手。我们称它为 bootstrap.scala 并在其中放入您要创建的字段。 （可以将bootstrap.scala和textinput.scala.html放在'views'目录下的同一个文件夹中）

package views
import views.html.helper._

object bootstrap {
  implicit val addressinputgroup = new FieldConstructor {
    def apply(elements: FieldElements) = textinputgroup(elements, "@")
  }
  implicit val passwordinputgroup = new FieldConstructor {
    def apply(elements: FieldElements) = textinputgroup(elements, "*")
  }
}

最后：在您的视图中导入并使用此对象。

@(signin: Form[forms.Signin]) /* Insert here your real form definition */
@import helper._
@import views.bootstrap._

/* Inside the body */
@helper.form(action = routes.Auth.submit()) {
  @inputText(signin("email"), 'class -> "form-control", 'placeholder -> "Email")(addressinputgroup, implicitly[Lang])
  @inputPassword(signin("password"), 'class -> "form-control", 'placeholder -> "Password")(passwordinputgroup, implicitly[Lang])
  <button class="btn btn-default" type="submit">Sign Up &raquo;</button>
}

我在 this repository 中做了更多示例，以使用 Bootstrap (multipleFieldConstructor) 和 Semantic-UI (semanticuiformhelper) 框架创建多个字段。看看他们。

Answer 2

答案取决于您所说的“不同输入类型”是什么意思。如果您希望您的 username 字段像一个常规文本框，而您的 birth 像一个日期选择器，那么您实际上不需要弄乱字段构造函数，您可能只需要一个自定义的“输入助手” ”。

输入助手是定义 HTML 输入元素本身的 scala 模板。在日期选择器的情况下，您将拥有输入文本字段，它还可能包含用于弹出日历或其他内容的小日历图形。

字段构造函数是围绕助手生成的 HTML 输入元素的所有 HTML。这包括任何divs，以使其适合您的页面结构，并生成与该字段关联的帮助/错误文本。

输入助手

我的猜测是，您真正想要自定义的是输入助手。如果@inputDate 没有满足您的需求，那么您可以创建自己的。在 GitHub 上查看 Play 的内置输入帮助器以获取示例：

https://github.com/playframework/Play20/tree/2.0.x/framework/src/play/src/main/scala/views/helper

字段构造函数

如果您想要多个字段构造函数，那么这也是可能的。实际上，您可以根据需要定义任意数量并在每个字段的基础上选择它们。在您链接的同一文档页面上，它显示了直接在您的视图上定义字段构造函数的另一种方法。

@implicitField = @{ FieldConstructor(myFieldConstructorTemplate.f) }

这将是您的默认字段构造函数（因为它以@implicit 开头？我不完全理解这部分）。要定义第二个，只需复制该行，但将变量称为不同的名称。这是我在项目中使用的东西：

@selectFieldConstructor = @{ FieldConstructor(entryFormFieldConstructor.f) }

并使用它：

@select(
  myForm("gender"),
  ...
)(handler = selectFieldConstructor, implicitly[Lang])

希望这会有所帮助。