Question

我有一个dataTable，包含具有id和phaseList属性的Package对象。我希望这个dataTable显示包ID和它的五个阶段状态与一些像彩色圆圈的图形。

例如：如果包的第一阶段完成，则在进度列中呈现的第一个圆是绿色圆，其他四个是红色圆。

所以基本上我需要根据phaseList元素属性的值渲染一个圆。我已经完成了所有这些，但在我看来应该有其他方式。问题是我必须在一个支持bean中有五个阶段颜色属性，并为这些属性设置五个getter和setter（参见下面的代码）。在那些getter中，所有五个属性的代码都非常相似，所以我认为我应该只有一个颜色属性和一个getter，并且应该以某种方式获取当前呈现圆圈的信息。

有没有其他方式（代码重复较少）来渲染这些圈子？

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类：

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代码：

<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>

我的支持bean的一部分：

private String phaseOneColor;
private String phaseTwoColor;
private String phaseThreeColor;
private String phaseFourColor;
private String phaseFiveColor;
private DataTable dtPackages;

其中一个吸气者：

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

我使用的是PrimeFaces 5.1。

Answer 1

这样的事情

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

类似于工具提示

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

你在这样的页面中使用它

<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>

代码中可能存在一些错误，因为我直接在此处输入错误，但您可以理解。

<强>更新

对于Java 5（参数的方法调用不起作用），你可以这样做

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" />

类似于工具提示。

如何根据列值在dataTable中渲染graphicImage？

1 个答案: