java - 将 Vaadin 自定义组件作为标题提供给 Vaadin 选项组

Question

我正在 Vaadin 中创建一个 OptionGroup，我想做的是这个。我不想提供纯文本标题，而是想设置另一个 CustomComponent 作为其标题。因此，我生成了一组 CustomComponents，用户需要从中选择一个。那么，有没有办法做到这一点？

Answer 1

看起来您需要FlexibleOptionGroup附加组件。

这是一个示例实现：

@Override
protected void init(VaadinRequest request) {

    Container cont = new IndexedContainer(); // create a container
    cont.addContainerProperty("caption", String.class, "");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("first");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("second");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("third");

    FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
    fog.setItemCaptionPropertyId("caption");
    fog.setMultiSelect(true); // force using CheckBoxes

    VerticalLayout fogLayout = new VerticalLayout();
    Iterator<FlexibleOptionGroupItemComponent> iter;
    iter = fog.getItemComponentIterator();
    while(iter.hasNext()) {
        // OptionGroupItem part (CheckBox or RadioButton)
        FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
        // CustomComponent part
        Label caption = new Label(fogItemComponent.getCaption());
        caption.setWidth(50, Unit.PIXELS);
        Slider slider = new Slider(1, 100);
        fogLayout.addComponent(
            new HorizontalLayout(fogItemComponent, caption, slider)
        );
    }
    setContent(fogLayout);
}

上面的代码产生：

Answer 2

另一种解决方案是将属性设置setHtmlContentAllowed为true，并将图像作为 base64 添加到组中每个项目的代码中。就像是：

OptionGroup selectionList = new OptionGroup("Select one image:");
selectionList.addItem(item);
selectionList.setItemCaption(itemId, "Text1 " + "<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...\" />");
...