playframework-2.0 - Play 2.0 小部件

Question

我正在学习 Play 2.0 with Scala 的教程，并且正在研究表单模板和字段构造器。

有没有一种添加日历字段的好方法，就像使用 Primefaces (JSF) 一样:

<p:calendar value="#{home.to}" pattern="dd.MM.yyyy" />

我可以想象一个像这样的助手:

@helper.calendar(form("to"))

如果不存在，是否正在筹备中？

Answer 1

Play 中没有日期/时间选择器标签，原因很简单:由于 Play 是一个框架而不是 CMS，因此没有默认的前端库，包含的 Bootstrap 标签事实上被放置在 Play 中... 不小心 :)。

上次我需要这样的字段时，我使用了两个 Bootstrap 插件的组合:

• http://www.eyecon.ro/bootstrap-datepicker
• http://www.github.com/jdewit/bootstrap-timepicker

因为我喜欢它们分开......当然你可以搜索另一个组合日期和时间选择器的解决方案，即:http://dl.dropbox.com/u/143355/datepicker/datepicker.html ，这完全取决于您的需求和使用的 FE 解决方案(如果您不使用 Bootstrap，您可以使用 jQuery UI 示例作为示例)。

编辑: helpers 只不过是准备好使用 Play 内置的迷你模板，用 Scala 语法为动态部分编写，唯一的工作就是生成一个 HTML 片段。正如我所说，Play 没有你展示的那么大的库，但是你也可以用动态参数编写这样的东西(即到 tags 包中)然后使用它完全相同的方式他们是 helper 。

实际上，我正在以这种方式使用这些提到的 Bootstrap 插件:

app/views/tags/datePickerJs.scala.html

<!-- first line has to be empty, as that's place for defining views arguments - remove this comment...-->
<script type="text/javascript">
    function setToday(datePickerSetId) {
        var currentServerDate = "@DatepickerUtils.getCurrentDate()";
        var currentServerTime = "@DatepickerUtils.getCurrentTime()";
        $("#" + datePickerSetId + "Date").val(currentServerDate);
        $("#" + datePickerSetId + "Time").val(currentServerTime);
        $("#" + datePickerSetId + "DateContainer").data('date', currentServerDate);
        $("#" + datePickerSetId + "DateContainer").datepicker('update');
    }
</script>

app/views/tags/dateTimePicker.scala.html

@(label: String, prefix: String, dateString: String=null)

<label for="@{prefix}Date">@label </label>

<btn id="@{prefix}" class="datePickerSetNow btn pull-left" onclick="setToday('@{prefix}'); return false;">teraz</btn>
<div class="input-append date pull-left datePickerDateContainer" id="@{prefix}DateContainer" data-date='@DatepickerUtils.splitDateTime(dateString, 0, true)' da$
<input class="span2" size="16" type="text" value='@DatepickerUtils.splitDateTime(dateString, 0)' name="@{prefix}Date" id="@{prefix}Date">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>

<div class="input-append bootstrap-timepicker-component datePickerTimeContainer">
    <input type="text" class="@{prefix}Time input-small" name="@{prefix}Time" id="@{prefix}Time">
    <span class="add-on"><i class="icon-time"></i></span>
</div>

<script type="text/javascript">
    $('#@{prefix}DateContainer').datepicker({weekStart:1, language:'pl'});
    $('#@{prefix}Time').timepicker({
        minuteStep:5, template:'dropdown', showMeridian:false, defaultTime:'@DatepickerUtils.splitDateTime(dateString, 1)'
    });</script>

因此在任何 View 中，您稍后都可以将它用于:

@tags.dateTimePicker(
   "Event's start",
   "eventStartDate",
   myForm("eventStart").value
)

@tags.dateTimePicker(
   "Event's end",
   "eventEndDate",
   myForm("eventEnd").value
)

<!-- once per view at the end -->
@tags.datePickerJs()

当然，Bootsrtap 示例是为我的领域准备的，并且需要 Java 类中的其他方法，因此如果不进行修改，它将无法工作。一般来说，我想向您展示标签的想法。

当然我同意你的看法，如果有类似的 API 可用于轻松安装 Play 框架，那将是完美的，但我不确定 Play 的开发人员是否正在计划......你应该问他们。这很可能是针对某些 JS 库的独立模块的任务，因为正如我之前写的那样，没有您必须使用的默认前端库。