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"))

存在しない場合、パイプラインにありますか?

score 4 · Accepted Answer

Play には日付/時刻ピッカータグがありません。理由は非常に単純です。Play は CMS ではなくフレームワークであるため、デフォルトのフロントエンドライブラリはなく、含まれている Bootstrap タグは事実上Play に配置されています...誤って:)。

前回、そのようなフィールドが必要になったとき、2 つの Bootstrap のプラグインを組み合わせて使用しました。

私はそれらを別々に気に入っているので...もちろん、日付と時刻のピッカーを組み合わせた別のソリューションを検索できます。 FE ソリューションを使用しました (Bootstrap を使用しない場合は、例としてjQuery UIサンプルを使用できます)。

編集: helpers動的パーツの Scala 構文で記述された、Play に組み込まれたミニテンプレートを使用する準備ができていることに他なりません。この作業は、HTML スニペットを生成することだけです。私が言ったように、Play にはあなたが示したほど大きなライブラリはありませんがtags、動的なパラメーターを使用してそのようなものを (つまりパッケージに) 記述し、ヘルパーとまったく同じ方法で使用することもできます。

実際、私はこれらの言及された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>

したがって、どのビューでも、後で次のように使用できます。

@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 クラスに追加のメソッドが必要なので、変更しないと機能しません。一般的に、のアイデアを示したいと思いますtags。

もちろん、Play フレームワークに簡単にインストールできる同様の API があれば完璧だという意見には同意しますが、Play の開発者がそれを計画しているかどうかはわかりません...彼らに尋ねるべきです。ほとんどの場合、これは、使用する必要があるデフォルトのフロントエンドライブラリがない前に書いたように、いくつかの JS ライブラリの原因を対象とするスタンドアロンモジュールのタスクです。

playframework-2.0 - Play 2.0 ウィジェット

1 に答える 1

Related

Reference