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放在＆＃39; views＆＃39;目录下的同一文件夹中）

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。这包括任何div，以使其适合您的网页结构，并生成与该字段相关联的帮助/错误文本。

输入助手

我的猜测是你真正想要自定义的是输入助手。如果@inputDate没有按照您的需要进行操作，那么您可以创建自己的。在GitHub上查看Play的内置输入帮助程序，例如：

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

Field Constructors

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

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

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

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

使用它：

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

希望这有帮助。

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

2 个答案: