Question

我尝试动态更改某些字段颜色，因为某些处理已经改变了。

CUBA文档解释了如何通过Web主题扩展（https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html）静态地执行此操作，但不是动态的。尽管Vaadin（https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS）可以在哪个平台上构建web gui。

我想如果我使用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（并因此引导我离开通用接口）我看不到怎么做

希望它更清楚

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平台如何动态更改字段颜色

1 个答案: