如何使用 Java Play 和 bootstrap 内联表单元素？答案

【问题标题】：How do I inline form elements with Java Play and bootstrap?如何使用 Java Play 和 bootstrap 内联表单元素？
【发布时间】：2016-02-26 07:50:31
【问题描述】：

我是 Java Play 框架的新手，我很难按照我想要的方式获取模板。例如，我希望案例类型和日期字段在此处位于同一行。每当我使用内联时，字段会重叠，并且水平表单无法完成工作。有任何想法吗？代码示例和图像使用水平字段构造函数。

@(caseForm: play.data.Form[Case])

@import tags._
@import views.html.common._

@import models._

@implicitFieldConstructor = @{
    b3.horizontal.fieldConstructor("col-md-2", "col-md-10")
}
@inlineFC = @{
    b3.inline.fieldConstructor
}
@caseTypeFC = @{
    b3.horizontal.fieldConstructor("col-md-2", "col-md-4")
}
@dateFC = @{
    b3.horizontal.fieldConstructor("col-md-7", "col-md-4")
}

@main("New Case Info") {
    <div class="page-header">
        <h2>Case Information</h2>
    </div>
    <fieldset>
    @b3.form(action = routes.CaseController.save()) {
        <div class="form-group">
            @b3.select(caseForm("id"),
            options = Seq("G" -> "Government Reclamations", "P" -> "POA", "R" -> "Reversals/Deletions", "U" -> "Unresolved/Dishonored Returns"),
            '_label -> "Case Type",
            '_default -> "-- Select an Option --")(caseTypeFC, implicitly[Messages])
            @datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")(dateFC)
        </div>

        <div class="form-group">
            <div class="col-md-offset-2">
                <input type="submit" class="btn btn-success" value="Save"/>
                <button type="button" class="btn btn-warning" onclick="window.location='@routes.CaseController.list()';" value="cancel">
                Cancel</button>
            </div>
        </div>
    }

    </fieldset>

}

【问题讨论】：

标签： java forms twitter-bootstrap playframework scala-template

【解决方案1】：

我通过使用 play-bootstrap 的垂直隐式构造函数解决了这个问题。然后我可以像这样指定每个字段的列宽：

@main("New Case Info") {
<fieldset>
    @b3.form(action = routes.CaseController.save()) {
    <div class="row">
        <div class="col-md-4">
            @b3.select(caseForm("caseType"),
                options = options(Case.typeOptions),
                '_id -> "type_selection",
                '_label -> "Case Type",
                '_default -> "-- Select a Type --")
        </div>
        <div class="col-md-3">
            @datePicker(caseForm("date"), '_label -> "Date", 'placeholder -> "mm/dd/yyyy")
        </div>
    </div>
 </fieldset>

}

请注意，b3 构造函数会自动将表单组类添加到输入字段，因此我不需要它。可以在此处找到 play-bootstrap 的详细信息：http://adrianhurt.github.io/play-bootstrap/

【讨论】：