CUBA平台如何动态改变字段颜色

Question

我正在尝试在某些字段颜色因某些处理而改变时动态更改它。

CUBA 文档解释了如何通过 Web 主题扩展 (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), but not dynamically. Although it is possible in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) 静态地完成此操作，Web 图形用户界面建立在该平台上。

我想如果我使用 Vaadin 注入方式 CSS 它会起作用（我会尝试）但是我将拥有 Vaadin 特定代码，我试图避免这种情况。

有没有 CUBA 方法可以做到这一点？

编辑：

我正在尝试让表单的任何字段在其初始值发生变化时更改背景颜色。根据 CUBA 文档 (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html)，我需要： - 创建一个带有背景颜色的 SCSS 混入 - 在编辑器中插入字段 class 以便访问它 - 对字段更改事件做出反应，然后定义字段的样式名称

我确实创建了 SCSS mixin，但我有两个问题： 1）我想动态检索字段实例而不是注入它（保持代码干净轻便） 2) 我想避免静态定义背景颜色，以便可以在运行时参数化颜色

对于 1) 我尝试注入 fieldGroup 并使用 getFieldComponent()，然后在更改时应用带有 setStyleName 的样式。它有效，但我更愿意为作为输入字段的每个字段定义此行为。

对于 2）除了使用 Vaadin 特定的注入功能 CSS（并将我的代码绑定到 Vaadin（从而使我远离通用接口）之外，我不知道该怎么做

希望更清楚

Answer 1

您无法从代码到字段设置真正的动态颜色（任何 RGBA），但您可以为您的字段创建许多预定义颜色：

@import "../halo/halo";

@mixin halo-ext {
  @include halo;

  .v-textfield.color-red {
    background: red;
  }
  .v-textfield.color-blue {
    background: blue;
  }
  .v-textfield.color-green {
    background: green;
  }
}

我不建议使用从代码注入的样式（如 Vaadin Page 所做的那样），因为它是逻辑和表示的混合体。相反，您可以创建所有预定义样式（30-50 种样式应该足够了）并使用 setStyleName 方法根据某些条件分配它：

public class ExtAppMainWindow extends AppMainWindow {
    @Inject
    private TextField textField;

    private int steps = 0;

    public void changeColor() {
        if (steps % 2 == 0) {
            textField.setStyleName("color-red");
        } else {
            textField.setStyleName("color-blue");
        }
        steps++;
    }
}

如果您想对 FieldGroup 内的所有 TextField 应用颜色更改逻辑，您可以按以下方式迭代 FieldGroup 字段：

for (FieldGroup.FieldConfig fc : fieldGroup.getFields()) {
    Component fieldComponent = fieldGroup.getFieldComponent(fc);
    if (fieldComponent instanceof TextField) {
        TextField textField = (TextField) fieldComponent;
        textField.addValueChangeListener(e -> 
                textField.setStyleName("color-red")
        );
    }
}

CUBA平台如何动态改变字段颜色

CUBA platform how to dynamically change field color

cuba-platform