限制 Vaadin 中的 OptionGroup 宽度

Question

我有几个 OptionGroups 的标题很长，横跨页面的宽度，看起来很糟糕。我尝试使用 setWidth 和 CSS 限制 OptionGroup 的宽度，还尝试限制父容器的宽度；全部无效。

所以我做了一个网格布局，第一列有一个选项组（跨越所有行），第二列有单独的标题标签（每行一个）。但是，如果字幕跨越多行（在我的情况下是这样），这会导致单选按钮/复选框不再与字幕对齐。 （很遗憾，我不允许发布图片。）例如，

(o) 这是多行
(o) 标题
这是另一个多行
标题

我通过为每个标签创建一个 OptionGroup 并在第一列中添加每个选项组来解决此问题：

(o) 这是多行
标题
(o) 这是另一个多行
标题

显然，对于单选按钮，这意味着可以同时选择多个按钮，因为它们不再通过单个 OptionGroup 链接。因此，我注册了侦听器，每次选择一个按钮时，都会取消选择所有其他按钮。这让我想到了我的问题；由于这种“取消选中”是在服务器端完成的，因此不可避免地会出现一些滞后，这意味着在一段时间内，客户端会出现多个单选按钮。

关于如何解决这个问题的任何想法？我最近才开始与 Vaadin 合作，所以我远非专家。是否有一些简单的方法来限制标题宽度（一些神奇的未记录的 CSS 类），还是我需要扩展/调整客户端小部件实现？

谢谢，

威廉

Answer 1

您需要的是FlexibleOptionGroup 插件。

这是一个示例实现：

@Override
protected void init(VaadinRequest request) {
    Container cont = new IndexedContainer();
    cont.addContainerProperty("caption", String.class, "");
    // very long strings in the following setValue() methods 
    cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
    cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");

    FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
    fog.setCaption("FlexibleOptionGroup:");
    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(400, Unit.PIXELS);
        fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
    }
    setContent(fogLayout);
}

以上代码产生：