如何设置 pe:timer 的文本颜色？答案

【问题标题】：How to set the text color of a pe:timer?如何设置 pe:timer 的文本颜色？
【发布时间】：2019-10-01 13:38:32
【问题描述】：

我为计时器使用 primefaces 扩展。我在数据列表组件中显示多个计时器，这些数据列表组件显示在数据表的单元格中。

我使用样式参数更改每个单元格的颜色，值来自 bean 值。每个单元格的背景颜色都发生了变化，计时器单元格也是如此，但文本颜色没有改变。

<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}"
                                resizableColumns="false"
                                rendered="true"
                                rowIndexVar="rowIndex">

    <p:column headerText="ID" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <h:outputText value="#{synopticIdBean.number}" />
    </p:column>

    <p:column headerText="Nom" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <h:outputText value="#{synopticIdBean.name}"/>
    </p:column>

    <p:column headerText="Chrono" rendered="#{dashboardView.manageChronometers}" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
            <pe:timer id="timer_#{synopticLocationBean.id}" 
                    forward="true" 
                    timeout="10000"
                    formatFunction="return displayElapsedTimeForChrono_save('#{synopticCounterBean.name}',
                                                                            '#{synopticCounterBean.startTime}',
                                                                            '#{synopticCounterBean.pauseTime}',
                                                                            '#{synopticCounterBean.endTime}',
                                                                            '#{synopticCounterBean.counterValue}');"/>
        </p:dataList>
    </p:column>
</p:dataTable>

当我在计时器组件上设置样式参数时，我收到以下错误：错误解析 /pages/dashboardgeneric/dashboardWip.xhtml: Error Traced[line: 846] 已经为元素“pe:timer”指定了属性“style”。

【问题讨论】：

你用的是什么版本？
我使用 primefaces 6.0.0 和 primefaces 扩展 6.0.0

标签： primefaces timer primefaces-extensions

【解决方案1】：

看起来它应该可以工作，但 Timer 缺少文档中的 style 和 styleClass 属性，但它们应该在组件上。我创建了一张票来更新文档。

https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/733

【讨论】：

【解决方案2】：

我找到了解决方案，我在组件 pe:timer 中添加了这样的样式：

<p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
    <pe:timer id="timer_#{synopticLocationBean.id}" 
        forward="true" 
        timeout="10000"
        formatFunction="return displayElapsedTimeForChrono_save('{synopticCounterBean.name}',
    '#{synopticCounterBean.startTime}',
    '#{synopticCounterBean.pauseTime}',
    '#{synopticCounterBean.endTime}',                                                                            '#{synopticCounterBean.counterValue}');"
    style="color : #{synopticMainLocationIdBean.foregroundColor};"/>
            </p:dataList>

继承自datalist的背景色和前景色取自datalist声明的值。

【讨论】：

感谢您发布您的解决方案。