Coloring the cells of the landmark table depending on the condition

Question

This is my first project with primary faces, and I can’t understand why my cells are not painted. my XHTML file contains the following:

<h:head> <title>Job Status Reporter</title> <link rel="stylesheet" type="text/css" href="/jobstatusreport/colors.css" /> </h:head> ... <h:dataTable var="myJob" value="#{workPackage.jobs}" rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red' :'white'))}"> <h:column> <h:outputText value="#{myJob.jobId}" /> </h:column> <h:column> <h:outputText value="#{myJob.jobType}" /> </h:column> <h:column> <h:outputText value="#{myJob.jobStatus}" /> </h:column> </h:dataTable> 

and my colors.css file is created in the WebContent / resources / css / folder and is defined as follows:

 .green.ui-datatable { background: green;} .red.ui-datatable {background: red;} .yellow.ui-datatable {background: yellow;} .white.ui-datatable {background: white;} 

but I still get unpainted cells in my web browser, can someone tell me what the problem is?

EDIT:

when i changed h: dataTable ... to p: dataTable ... I got the following message:

 /globalReport.xhtml @32,169 rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red' : 'white'))}": Property 'jobStatus' not found on type org.hibernate.collection.internal.AbstractPersistentCollection$SetProxy 

can anyone help please?

Answer 1

I finally found a solution: In the myJob class, I added a method below:

  public String createLabel(){ switch (jobStatus){ case "SUCCESS": return "SUCCESS"; case "PARTIAL SUCCESS": return "PARTIAL_SUCCESS"; case "FAILURE": return "FAILURE"; default: return "DEFAULT"; } } 

and in my globalReport.xhtml I changed the following:

 <h:head> <title>Job Status Reporter</title> <h:outputStylesheet library="css" name="colors.css" target="head" /> </h:head> .... <h:dataTable var="myJob" value="#{workPackage.jobs}"> <h:column> <h:outputText value="#{myJob.jobId}"/> </h:column> <h:column> <h:outputText value="#{myJob.jobType}"/> </h:column> <h:column> <h:outputText value="#{myJob.jobStatus}" styleClass="#{myJob.createLabel()}"/> </h:column> </h:dataTable> 

and my colors.css:

 .SUCCESS{ background-color : green !important; } .FAILURE{ background-color: red !important; } .PARTIAL_SUCCESS{ background-color: yellow !important; } .DEFAULT{ background-color: white !important; } 

and it works great. Thank you very much @Lukasz for your precious help.

Answer 2

Your situation is similar to the Color of state based strings in JSF 2 . h:dataTable does not have such an attribute since you are using PrimeFaces, you should use their components as they provide much more functionality.

Use <p:dataTable rowStyleClass="..." ... /> , as well as <p:column../> inside it.

This would probably be more readable and less error prone if you would generate a style class in the element to prevent the EL expression from being too long and complex.

You can note the differences in style because the components created by PrimeFaces use jQuery-UI CSS styles, but you can customize them as easily as the "old" components from the "h:" namespace.