Отображение хронометра setInterval в виде простых чисел - PullRequest
Новая
       7

Отображение хронометра setInterval в виде простых чисел

0 голосов
/ 08 января 2019

Hy, я только начинаю программу Primefaces. Я хочу отобразить хронометр в таблице данных. Я хочу использовать setInterval для отображения «хронометра в реальном времени». Я получил объект Date в атрибуте synopticBean.enteredTime, который я использую для начала отсчета начала.

Но я не знаю, как вызвать функцию JavaScript для отображения хронометра. 

<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
    <p:column headerText="Family">
        <h:outputText value="#{synopticBean.family}" />
    </p:column>

    <p:column headerText="id">
        <h:outputText value="#{synopticBean.brNumber}" />
    </p:column>

    <p:column headerText="Target Time">
        <h:outputText value="#{synopticBean.referenceTime}" />
    </p:column>

    <p:column headerText="Δ">
        <h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" />
    </p:column>

    <p:column headerText="Elapsed Time">
        <h:outputText value="#{synopticBean.enteredTime}" />
    </p:column>
</p:dataTable>

Результат, который я хочу получить, представляет собой таблицу данных, в которой два последних столбца отображают хронометр реального времени, который уменьшается и увеличивается:

enter image description here

Мои данные доступны с javabean. В столбце «Истекшее время» указывается дата в формате Java, например «Пн 21 января 15:26:40 CET 2019». Я не знаю, как отобразить хронометр в реальном времени в каждой ячейке колонки. Как я могу установить свою дату Java для метода setInterval и отобразить «результат» в ячейке, которой я не знаю идентификатор html?

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Решение от @Kukeltje, я использовал расширение Primefaces, но я не знаю, как запустить счетчик по значению. У меня может быть объект даты или миллисекунда длинного типа, но я не знаю, как использовать одно из этих двух значений, может быть начальным значением моего счетчика.

Я добавляю следующее включение на мою страницу JSF: 

xmlns:pe="http://primefaces.org/ui/extensions"

и в мой файл pom.xml: 

<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>primefaces-extensions</artifactId>
    <version>6.0.0</version>
</dependency>

Итак, таблица: 

<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
    <p:column headerText="Family">
        <h:outputText value="#{synopticBean.family}" />
    </p:column>

    <p:column headerText="BT">
        <h:outputText value="#{synopticBean.brNumber}" />
    </p:column>

    <p:column headerText="Target time">
        <h:outputText value="#{synopticBean.referenceTime}" />
    </p:column>

    <p:column headerText="Δ">
        <pe:timer 
            style="color:grey;"
            forward="true" 
            format="HH:mm:ss"/>
    </p:column>

    <p:column headerText="Elapsed time">
        <h:outputText value="#{synopticBean.enteredTime}" />
    </p:column>
</p:dataTable>
0 голосов
/ 08 января 2019

Чтобы преобразовать приведенный выше код в рабочий пример, вы должны сделать что-то вроде этого, 

<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
    <p:column headerText="Famille">
        <h:outputText value="#{synopticBean.family}" />
    </p:column>

    <p:column headerText="BT">
        <h:outputText value="#{synopticBean.brNumber}" />
    </p:column>

    <p:column headerText="Temps cible">
        <h:outputText value="#{synopticBean.referenceTime}" />
    </p:column>

    <p:column headerText="Δ">
        <script type="text/javascript">
        //<![CDATA[
            setInterval(function(){ console.log("Hello"); }, 3000);
        //]]>
        </script>
        <!-- You can add any HTML code needed to display the chronometer here -->
    </p:column>

    <p:column headerText="Temps Accumulé">
        <h:outputText value="#{synopticBean.enteredTime}" />
    </p:column>
</p:dataTable>

Как указано в комментариях, вы не используете для этого h:outputText value - это предназначено для получения значения бина-поддержки.

Также обратите внимание, что это вызовет setInterval для каждой ячейки в столбце Δ - что, я думаю, то, что вы хотите. Просто замените console.log вызов на обновление вашего хронометра, и он должен работать.

Как и примечание - может быть предпочтительнее обновить все хронометры всего одним вызовом setInterval вместо одного для каждой ячейки в столбце Δ. В конце концов, это зависит от того, чего вы хотите достичь.

...