CUBA-Plattform, wie Feldfarbe dynamisch ändern

Question

Ich versuche einige Feldfarbe dynamisch zu ändern, wenn es aufgrund einiger Verarbeitung geändert hat.

In der CUBA-Dokumentation wird erläutert, wie dies statisch über die Webdesignerweiterung (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), jedoch nicht dynamisch, durchgeführt wird. Es ist zwar in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) möglich, auf welcher Plattform Webgui aufgebaut ist.

Ich nehme an, dass, wenn ich die Vaadin Art der Injektion von CSS verwenden wird es funktioniert (was ich versuchen werde), aber ich werde dann Vaadin spezifischen Code haben, den ich versuche zu vermeiden.

Gibt es eine CUBA-Methode, die ich vermisse?

Edit:

Ich versuche jedes Feld eines Formulars zu haben, um die Hintergrundfarbe zu ändern, wenn es von seinem Anfangswert geändert hat. Laut CUBA-Dokumentation (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html) muss ich: - ein SCSS Mixin mit Hintergrundfarbe erstellen - das Feld in die Editor-Klasse injizieren, um darauf zugreifen zu können - auf ein Feldwechselereignis reagieren und dann den Stilnamen definieren des Feldes

ich die SCSS mixin tat schaffen, aber zwei Fragen, die ich habe: 1) I der Injektion dynamisch statt möchte die Feldinstanz abzurufen (halten Code sauber und Licht) 2) ich möchte vermeiden Sie, die Hintergrundfarbe statisch zu definieren, damit die Farbe zur Laufzeit

parametrisiert werden konnte. Für 1) habe ich versucht, die fieldGroup zu injizieren und benutzt getFieldComponent(), hat dann den Stil mit setStyleName angewendet, wenn er geändert wurde. Es hat funktioniert, aber ich würde es vorziehen, dieses Verhalten für jedes Feld zu definieren, das ein Eingabefeld ist.

für 2) außer mit Vaadin Spezifikum CSS der Injektion (und tighing meinen Code Vaadin (und führt mich so weg von generische Schnittstelle) Ich sehe nicht, wie

Hoffnung zu tun, es ist mehr klar

Answer 1

Sie können nicht wirklich dynamische Farbe (jede RGBA) von Code auf das Feld, aber Sie können viele vordefinierte Farben sorgen für Ihr Feld: seit

@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; 
    } 
} 

ich empfehle, nicht mit Arten von Code injiziert (wie Vaadin Seite der Fall ist) es ist eine Vermischung von Logik und PR Präsentation. Stattdessen können Sie alle vordefinierten Stile erstellen (30-50 Arten sollte genug sein) und weisen sie auf einigen Bedingungen abhängig setStyleName Methode:

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++; 
    } 
} 

Wenn Sie die Logik der Farbänderung anwenden möchten für alle Textfeldern innerhalb von Feldgruppen-

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") 
     ); 
    } 
}