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

1

Привет, я только начинаю программу 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>

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

Изображение 174551

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

  • 0
    Я думаю, вам нужно сделать шаг назад к разработке jsf или, по крайней мере, начать с более простого теста без данных, так как <h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" /> уже не прав. Вы не можете поместить javascript в атрибуты значения, они для фиксированных строк или EL. И я не уверен, что вы хотели бы показать там, так как setInterval возвращает идентификатор, а не интервал developer.mozilla.org/en-US/docs/Web/API/… и afaik, вы не можете получить 'оставшиеся время до следующего
  • 0
    По h:datatable у вас возникла бы та же проблема с простым jsf h:datatable или с одним h:outputText поэтому вопрос не связан с PrimeFaces (или xhtml) ...
Показать ещё 4 комментария
Теги:
primefaces
xhtml
setinterval

2 ответа

0
Лучший ответ

Решение @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>
Поделиться
2

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

<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, предназначенное для извлечения h:outputText value компонента.

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

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

Поделиться
  • 2
    У меня сложилось впечатление , что ОП хочет на самом деле Disaplay хронометр в каждой Δ клетке. И, как правило, это настоящий javascript-хронометр (или таймер) (поэтому не в базовый javasscript setTimeout/setInterval встроен запуск / останов. OP должен прояснить этот вопрос и исследовать немного больше. Primefaces.org/showcase-ext/sections/timer /direction.jsf может быть полным решением (особенно если OP также хочет запускать что-то на стороне сервера). Эти основы являются большей частью «проблемой» OP, я думаю
  • 0
    Да, это другой маршрут. Использование компонента p:poll уже доступного в PrimeFaces, может быть другим, если кто-то просто хочет опросить данные на стороне сервера (например, новые значения для хронометров). Как всегда, это зависит от требований.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню