Vaadin 14 单选按钮组将自定义字符串显示为选项

Posted 2023-03-05

【中文标题】Vaadin 14 单选按钮组将自定义字符串显示为选项

【英文标题】：Vaadin 14 radiobuttongroup display custom Strings as options

【发布时间】：2020-07-15 09:21:06

【问题描述】：

我正在使用 Vaadin 14.1.21 + Java JDK/JRE 1.8

我在 DataClass 中有一个单选单选按钮组，后面有一个布尔字段。

我不想将“true”/“false”显示为用户的选项，而是自定义字符串，让我们说“红色选项”表示 true，“绿色选项”表示 false。

我在 API 中看到有一个名为 setRenderer 的函数，但我不知道如何使用它。我已经想出了如何在网格中做到这一点，但不是在选择框上......

选择框（待办事项）：

rbgroup = new RadioButtonGroup<>();
rbgroup.setRequired(true);
rbgroup.setLabel("Title of radiobuttongroup");
rbgroup.setItems(true, false); // how to display them in the frontend as "Green option" / "Red option"?

....

binder.forField(rbgroup).bind("mybooleanField");

网格：（完成）

addColumn((mn) ->  // custom display
            final String displayAS;
            if (mn.getBoolValue()) 
                displayAS = "Option Red";
             else 
                displayAS = "Option Green";
            
            return displayAS;
        )
.setHeader("Columntitle")
.setFlexGrow(1)
.setSortable(true)
.setKey("Color Option");

【参考方案1】：

如code examples of RadioButtonGroup 所示，设置渲染器以显示文本可以这样完成（混合示例代码和您的代码）：

RadioButtonGroup<Boolean> rbgroup = new RadioButtonGroup<>();
rbgroup.setRequired(true);
rbgroup.setLabel("Title of radiobuttongroup");
rbgroup.setItems(true, false);
rbgroup.setRenderer(new TextRenderer<>((mn) -> 
    if (mn) 
        return "Option Red";
     else 
        return "Option Green";
    
));

如果您想显示任何 Vaadin 组件而不仅仅是文本，您可以使用 ComponentRenderer 而不是 TextRenderer。我使用简单的Span 作为示例，但您可以构建复杂的布局并返回它们。

RadioButtonGroup<Boolean> rbgroup = new RadioButtonGroup<>();
rbgroup.setRequired(true);
rbgroup.setLabel("Title of radiobuttongroup");
rbgroup.setItems(true, false);
rbgroup.setRenderer(new ComponentRenderer<>((mn) -> 
    if (mn) 
        return new Span("Option Green");
     else 
        return new Span("Option Red");
    
));