title: Create CSS style in JSF page from bean
body: <p>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 <code>rowStyleClass</code> in a <code>p:dataTable</code> via <code>#{bean.getRowStyleClass(item)}</code>. 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.</p>
  
  <p><a href="https://stackoverflow.com/users/4478047/kukeltje">Kukeltje</a> mentioned in <a href="https://stackoverflow.com/questions/39707287/primefaces-datatable-set-row-color-from-bean">Primefaces datatable: set row color from bean</a> that the bean could create the selectors dynamically with <code>return ".redBackgroundColor { background-color: #FF0000; !important; }"</code> and that the bean could create the full css part (which I do in <code>#{bean.styles}</code>) but this results also in a dataTable without colored rows.</p>
  
  <p>template.xhtml</p>
  
  <pre><code>&lt;html&gt;
      &lt;h:head&gt;...&lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;ui:insert name="styles"/&gt;
          &lt;ui:insert name="content"/&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>page.xhtml</p>
  
  <pre><code>&lt;html&gt;
      &lt;ui:composition template="/WEB-INF/template.xhtml"&gt;
          &lt;ui:define name="styles"&gt;
              &lt;!-- this works as expected --&gt;
              &lt;style type="text/css"&gt;
                  .redBackgroundColor   { background-color: #FF0000; !important; }
                  .blueBackgroundColor  { background-color: #00FF00; !important; }
                  .greenBackgroundColor { background-color: #0000FF; !important; }
              &lt;/style&gt;
              &lt;!-- this does not work - it prints the string on the page --&gt; 
              #{bean.styles}
          &lt;/ui:define&gt;
          &lt;ui:define name="content"&gt;
              &lt;!-- here comes the page content --&gt;
              &lt;p:dataTable var="item"
                           value={#bean.values}
                           rowStyleClass="#{bean.getRowStyleClass(item)}"&gt;
                  ...
              &lt;/p:dataTable&gt;
          &lt;/ui:define&gt;
      &lt;/ui:composition&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Bean.java</p>
  
  <pre><code>public class Bean {
  
      public String getStyles() {
          return new StringBuffer()
              .append("&lt;style type=\"text/css\"&gt;")
              .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;
      }
  
  }
  </code></pre>
  
  <p>So, how can I create the styles in my backing bean and use them in the <code>p:dataTable rowStyleClass</code> attribute?</p>
  
  <p>I am using Primefaces 6.0 on Wildfly 10.0.0.Final</p>
  
  <p>Any hints welcome - Thank you!</p>