如何在 p:selectManyCheckbox 中显示带有图像的项目答案

【问题标题】：How to display items with image in p:selectManyCheckbox如何在 p:selectManyCheckbox 中显示带有图像的项目
【发布时间】：2015-01-06 02:27:45
【问题描述】：

我需要显示带有图像的<p:selectManyCheckbox> 项目。我试图在<p:selectOneRadio> 中显示图像。它工作正常。我正在以编程方式在 UI 上添加组件。这是我的代码。

answerRadio.setLayout("custom"); //answerRadio is SelectOneRadio
customPnl = (PanelGrid) app.createComponent(PanelGrid.COMPONENT_TYPE);
            customPnl.setId("pnl"+qstnCnt);
            customPnl.setColumns(3);
radioBtn = (RadioButton) app.createComponent(RadioButton.COMPONENT_TYPE);
                        radioBtn.setId("opt"+qstnAnsIndx);
                        radioBtn.setFor("ID of answerRadio");
                        radioBtn.setItemIndex(ansIndx);
                        customPnl.getChildren().add(radioBtn);

outPnl.getChildren().add(answerRadio); //outPnl is OutputPanel that include answerRadio
outPnl.getChildren().add(customPnl);

那是<p:selectOneRadio>，有图片。

我想以同样的方式使用<p:selectManyCheckbox>。但是 PrimeFaces 只有 <p:radioButton> 用于自定义布局，而不是 <p:checkbox> 这样的。无论如何，我怎样才能实现它？如何显示带有图像的<p:selectManyCheckbox> 项目？

【问题讨论】：

关于声明/创建组件：nothing 在 XHTML 中是不可能的，只有在 Java 中才有可能。与 XHTML <p:selectOneRadio>/<p:radioButton> 相比，Java 基本上是一个不可读的混乱。我强烈建议停止在控制器中声明/创建组件，而是在视图中停止声明/创建组件，就像所有其他理智的 JSF 开发人员一样。
那我需要做什么？
只使用 XHTML。这更具可读性和维护友好性。

标签： image jsf primefaces selectmanycheckbox

【解决方案1】：

<p:selectManyCheckbox> 无法做到这一点。最好的办法是只使用一堆<p:selectBooleanCheckbox> 组件，并将模型更改为Map<Entity, Boolean> 而不是List<Entity>。您可以使用<ui:repeat> 循环遍历它。

例如（普通的 XHTML 变体；我不会提倡 Java createComponent() 等效）：

<ui:repeat value="#{bean.entities}" var="entity">
    <p:selectBooleanCheckbox value="#{bean.selection[entity]}" />
    ... (you can put here image, label, anything)
</ui:repeat>

与

private List<Entity> entites; 
private Map<Entity, Boolean> selection;

@PostConstruct
public void init() {
    entities = service.list();
    selection = new HashMap<>(); // No need to prefill it!
}

要检查选择了哪些，请在操作方法中循环遍历地图：

List<Entity> selectedEntities = new ArrayList<>();

for (Entry<Entity, Boolean> entry : selection.entrySet()) {
    if (entry.getValue()) {
        selectedEntities.add(entry.getKey());
    }
}

【讨论】：

这才是真道。