Create CSS style in JSF page from bean

Question

I have a JSF page created from a template where I want to add CSS styles from my backing bean, because some CSS attributes (like color, etc.) are read from a configuration database. The colors are used for rowStyleClass in a p:dataTable via #{bean.getRowStyleClass(item)}. This works only if the style tag is hard-coded within the page. If the style tag is retrieved from the backing bean, the returned string is just printed on the page as normal string.

Kukeltje mentioned in Primefaces datatable: set row color from bean that the bean could create the selectors dynamically with return ".redBackgroundColor { background-color: #FF0000; !important; }" and that the bean could create the full css part (which I do in #{bean.styles}) but this results also in a dataTable without colored rows.

template.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;
    }

}

So, how can I create the styles in my backing bean and use them in the p:dataTable rowStyleClass attribute?

I am using Primefaces 6.0 on Wildfly 10.0.0.Final

Any hints welcome - Thank you!

Post your HTML output.

jklee
– jklee

2017-02-22 11:21:13 +00:00
Commented Feb 22, 2017 at 11:21 — jklee
– jklee, Commented Feb 22, 2017 at 11:21
Seems you're missing a style endtag

Jaqen H'ghar
– Jaqen H'ghar

2017-02-22 11:43:06 +00:00
Commented Feb 22, 2017 at 11:43 — Jaqen H'ghar
– Jaqen H'ghar, Commented Feb 22, 2017 at 11:43

raho · Accepted Answer · 2017-02-22 12:04:32Z

4

It works when I change the page to:

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

and the bean method to:

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();
}

answered Feb 22, 2017 at 12:04

raho

3177 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jaqen H'ghar Over a year ago

Did you try with a style endtag?

W vd L Over a year ago

Maybe a silly question, but what does it hurt to have a global CSS file with all default backgrounds color in it and by creating the <div class="xx"> you determ the css to show?

raho Over a year ago

@Jaqen: the missing endtag results from a copy-paste error - in the real code it was present!

Master Azazel Over a year ago

awesome i was looking for exactly this

Collectives™ on Stack Overflow

Create CSS style in JSF page from bean

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related