从 bean 在 JSF 页面中创建 CSS 样式答案

【问题标题】：Create CSS style in JSF page from bean从 bean 在 JSF 页面中创建 CSS 样式
【发布时间】：2023-04-03 07:36:01
【问题描述】：

我有一个从模板创建的 JSF 页面，我想从我的支持 bean 添加 CSS 样式，因为一些 CSS 属性（如颜色等）是从配置数据库中读取的。这些颜色用于rowStyleClass 中的p:dataTable 通过#{bean.getRowStyleClass(item)}。仅当样式标记在页面中硬编码时才有效。如果从支持 bean 中检索到样式标记，则返回的字符串将作为普通字符串打印在页面上。

Kukeltje 在Primefaces datatable: set row color from bean 中提到，bean 可以使用return ".redBackgroundColor { background-color: #FF0000; !important; }" 动态创建选择器，并且 bean 可以创建完整的 css 部分（我在 #{bean.styles} 中这样做）但这也会导致 dataTable 没有彩色行。

模板.xhtml

<html>
    <h:head>...</h:head>
    <h:body>
        <ui:insert name="styles"/>
        <ui:insert name="content"/>
    </h:body>
</html>

page.xhtml

<html>
    <ui:composition template="/WEB-INF/template.xhtml">
        <ui:define name="styles">
            <!-- this works as expected -->
            <style type="text/css">
                .redBackgroundColor   { background-color: #FF0000; !important; }
                .blueBackgroundColor  { background-color: #00FF00; !important; }
                .greenBackgroundColor { background-color: #0000FF; !important; }
            </style>
            <!-- this does not work - it prints the string on the page --> 
            #{bean.styles}
        </ui:define>
        <ui:define name="content">
            <!-- here comes the page content -->
            <p:dataTable var="item"
                         value={#bean.values}
                         rowStyleClass="#{bean.getRowStyleClass(item)}">
                ...
            </p:dataTable>
        </ui:define>
    </ui:composition>
</html>

Bean.java

public class Bean {

    public String getStyles() {
        return new StringBuffer()
            .append("<style type=\"text/css\">")
            .append(".redBackgroundColor   { background-color: #FF0000; !important; }")
            .append(".blueBackgroundColor  { background-color: #00FF00; !important; }")
            .append(".greenBackgroundColor { background-color: #0000FF; !important; }") 
            .toString();
    }

    public String getRowStyleClass(Item item) {
        if (condition1) {
            return "redBackgroundColor";
        }
        if (condition2) {
            return "blueBackgroundColor";
        }
        if (condition3) {
            return "greenBackgroundColor";
        }
        return null;
    }

}

那么，如何在我的支持 bean 中创建样式并在 p:dataTable rowStyleClass 属性中使用它们？

我在 Wildfly 10.0.0.Final 上使用 Primefaces 6.0

欢迎任何提示 - 谢谢！

【问题讨论】：

发布您的 HTML 输出。
您好像缺少样式结束标签

标签： jsf primefaces

【解决方案1】：

当我将页面更改为：

    <style type="text/css">
        #{bean.styles}
    </style>

和bean方法：

public String getStyles() {
    return new StringBuffer()
        .append(".redBackgroundColor   { background-color: #FF0000; !important; }")
        .append(".blueBackgroundColor  { background-color: #00FF00; !important; }")
        .append(".greenBackgroundColor { background-color: #0000FF; !important; }")                 
        .toString();
}

【讨论】：

您是否尝试过使用样式结束标签？
也许是一个愚蠢的问题，但是拥有一个包含所有默认背景颜色的全局 CSS 文件并通过创建
您确定要显示的 CSS 有什么害处？
@Jaqen：缺少的结束标签是由于复制粘贴错误导致的——在它存在的真实代码中！
太棒了，我正在寻找这个