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

Question

我试图动态地改变一些字段的颜色，当它由于一些处理而改变的时候。

CUBA文档解释了如何通过web主题扩展(https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html)静态实现，而不是动态实现。尽管在其上构建web gui的平台上的Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS)中是可能的。

我想，如果我使用Vaadin的方式注入CSS，它会工作(我会尝试)，但我会有Vaadin特定的代码，这是我试图避免的。

有没有一种古巴的方法来解决我错过的问题？

编辑：

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

我确实创建了SCSS混合，但我有两个问题: 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中的所有TextFields应用颜色更改逻辑，可以按以下方式迭代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")
        );
    }
}