Reputation: 660
it's my first project with primefaces, and I can't find out why my cells are not colored. 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 WebContent/resources/css/ folder and defined as follow:
.green.ui-datatable { background: green;}
.red.ui-datatable {background: red;}
.yellow.ui-datatable {background: yellow;}
.white.ui-datatable {background: white;}
but I still get uncolored cells on my web browser, can anyone tell me what's the problem?
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?
Upvotes: 7
Views: 18796
Reputation: 660
I've finally found a solution: In myJob class I added the below method:
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 is :
.SUCCESS{
background-color : green !important;
}
.FAILURE{
background-color: red !important;
}
.PARTIAL_SUCCESS{
background-color: yellow !important;
}
.DEFAULT{
background-color: white !important;
}
and it works perfectly. many thanks @Lukasz for your precious help.
Upvotes: 5
Reputation: 22877
Your situation is similar as Color the rows of datatable based a condition in JSF 2. h:dataTable
doesn't have such attribute, since you're using PrimeFaces, you should use their components, since they provide much more functionality.
Use <p:dataTable rowStyleClass="..." ... />
as well as <p:column../>
within it.
It would be probably more readable and less error-prone if you'd generate the style class in the item, to prevent too long and complex EL expression.
You may note style differences because components rendered by PrimeFaces are using jQuery-UI CSS styles, but you may customize them as easy as "old" components from "h:" namespace.
Upvotes: 0