将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...\" />");
...