3

当由于某些处理而发生更改时，我正在尝试动态更改某些字段颜色。

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 的方式，所以我错过了？

编辑：

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

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

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

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

希望更清楚

4

1 回答 1

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")
        );
    }
}
于 2016-08-09T08:58:24.857 回答