How to render graphicImage in dataTable based on a column value? - jsf

Question

I have a dataTable, containing Package objects with id and phaseList attributes. I would like this dataTable to display package id and its five phases status with some graphicImages like colored circles.
For example: If a package's phase one is completed, the first circle rendered in a progress column is a green one, other four are red ones.
So basically I need to render a circle based on a value from phaseList element attribute. I already accomplished all of this, but it seems to me that there should be some other way. The problem is that I must have five phase color attributes in a backing bean and five getters and setters for those attributes (see code below). In those getters there is very similar code for all five attributes, so I thought I should have just one color attribute and one getter and there should somehow get an information which circle is currently rendered.
Is there any other way (with less duplicated code) to render those circles?
public class Package implements Serializable {
private static final long serialVersionUID = 1L;
private BigDecimal id;
private List<PhaseStatus> phaseList;
public BigDecimal getId() {
return id;
}
public void setId(BigDecimal id) {
this.id = id;
}
public void setPhaseList(List<PhaseStatus> phaseList) {
this.phaseList= phaseList;
}
public List<PhaseStatus> getPhaseList() {
return phaseList;
}
}
PhaseStatus class:
public class PhaseStatus implements Serializable {
private static final long serialVersionUID = 1L;
private BigDecimal phaseId;
private BigDecimal phaseStatus;
private String hint;
public void setPhaseId(BigDecimal phaseId) {
this.phaseId = phaseId;
}
public BigDecimal getPhaseId() {
return phaseId;
}
public void setPhaseStatus(BigDecimal phaseStatus) {
this.phaseStatus = phaseStatus;
}
public BigDecimal getPhaseStatus() {
return phaseStatus;
}
public void setHint(String hint) {
this.hint = hint;
}
public String getHint() {
return hint;
}
}
Xhtml code:
<p:column headerText="Id">
<p:outputLabel value="#{item.id}" />
</p:column>
<p:column headerText="Progress">
<p:commandLink id="lnkPhase1">
<p:graphicImage library="icons" name="#{bean.phaseOneColor}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint1" for="lnkPhase1" value="#{bean.phaseOneHint}" />
<p:commandLink id="lnkPhase2">
<p:graphicImage library="icons" name="#{bean.phaseTwoColor}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint2" for="lnkPhase2" value="#{bean.phaseTwoHint}" />
<p:commandLink id="lnkPhase3">
<p:graphicImage library="icons" name="#{bean.phaseThreeColor}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint3" for="lnkPhase3" value="#{bean.phaseThreeHint}" />
<p:commandLink id="lnkPhase4">
<p:graphicImage library="icons" name="#{bean.phaseFourColor}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint4" for="lnkPhase4" value="#{bean.phaseFourHint}" />
<p:commandLink id="lnkPhase5">
<p:graphicImage library="icons" name="#{bean.phaseFiveColor}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint5" for="lnkPhase5" value="#{bean.phaseFiveHint}" />
</p:column>
Part of my backing bean:
private String phaseOneColor;
private String phaseTwoColor;
private String phaseThreeColor;
private String phaseFourColor;
private String phaseFiveColor;
private DataTable dtPackages;
one of the getter's:
public String getPhaseOneColor() {
Package myPackage = (Package) getDtPackages().getRowData();
List<PhaseStatus> list = myPackage.getPhaseList();
BigDecimal status = list.get(0).getPhaseStatus();
if (status != null) {
switch (status.intValue()) {
case 1:
phaseOneColor = "green.png";
break;
default:
phaseOneColor = "red.png";
break;
}
} else {
phaseOneColor = "red.png";
}
return phaseOneColor;
}
I'm using PrimeFaces 5.1.

Answer 1

What about something like this
public String getPhaseColor(int phase) {
Package package = (Package) getDtPackages().getRowData();
List<PhaseStatus> list = package.getPhaseList();
BigDecimal status = list.get(phase).getPhaseStatus();
if (status != null) {
switch (status.intValue()) {
case 1:
phaseColor = "green.png";
break;
default:
phaseColor = "red.png";
break;
}
} else {
phaseColor = "red.png";
}
return phaseColor;
}
Similar for tooltips
public String getPhaseTooltip(int phase) {
Package package = (Package) getDtPackages().getRowData();
List<PhaseStatus> list = package.getPhaseList();
BigDecimal status = list.get(phase).getPhaseStatus();
String tooltip = null;
if (status != null) {
switch (status.intValue()) {
case n:
tooltip = "Phase " + phase + " tooltip";
break;
default:
}
} else {
tooltip = "probably error";
}
return tooltip;
}
And you use this in page like this
<p:column headerText="Progress">
<ui:repeat var="phase" value="#{item.phaseList}" varStatus="status">
<p:commandLink id="lnkPhase#{status.index + 1}">
<p:graphicImage library="icons" name="#{bean.getPhaseColor(status.index + 1)}" width="24px" height="24px" />
</p:commandLink>
<p:tooltip id="hint#{status.index + 1}" for="lnkPhase#{status.index + 1}" value="#{bean.getPhaseTooltip(status.index + 1)}" />
</ui:repeat>
</p:column>
There might be some errors in the code since I'm typing it in here directly, but you'll get the idea.
UPDATE
For Java 5 (method invocations with parameters doesn't work), you could do something like this
public Map<Integer, String> getPhaseColors() {
Package package = (Package) getDtPackages().getRowData();
Map<Integer, String> phaseColors = new HashMap<Integer, String>();
if (package != null) {
List<PhaseStatus> list = package.getPhaseList();
for (int i = 0; i < list.size(); i++;) {
BigDecimal ps = list.get(i).getPhaseStatus();
if (ps != null) {
phaseColors.put(i, ps.intValue() == 1 ? "green.png" : "red.png");
} else {
phaseColors.put(i, "red.png");
}
}
}
return phaseColor;
}
<p:graphicImage library="icons" name="#{bean.phaseColors[status.index + 1]}" width="24px" height="24px" />
Similar for tooltips.