2016-08-04 15 views
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のやり方はありますか?私は行方不明ですか?

編集:

私はそれがその初期値から変更されたときに背景色を変更するには、フォームの任意のフィールドを持つようにしようとしています。 - 背景色のSCSSミックスインを作成する - エディタクラスにフィールドを挿入してアクセスするには - フィールド変更イベントに反応してスタイル名を定義するフィールド

で私はSCSSのミックスインを作成しましたが、私は持っている二つの問題: 1)私は私がしたい) 2(クリーンで光コードを維持)フィールドインスタンスを検索する動的代わりにそれを注入したいと思います色が1の場合、ランタイム

でパラメータ化することができるように、私はFIELDGROUPを注入しようとして使用)静的背景色を定義避けますgetFieldComponent()を呼び出し、変更されたときにsetStyleNameを含むスタイルを適用します。それは機能しましたが、入力フィールドであるすべてのフィールドに対してこの動作を定義する方が好きです。 2については

)離れてCSSを注入(とVaadinに私のコードをtighing(とそう離れて一般的なインターフェイスの私を導く)のVaadin特定の機能を使用してから私は

を行う方法を見ていないが、それがより明確に

のご希望します
+1

:https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html「新しいスタイルの作成」サブパートは説明します達成したいこと。静的に唯一のことは、スタイル定義が静的であることです。 「動的」とは、正確にはどういう意味ですか? –

答えて

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ページが行うように)以来それは論理とprのミックスです礼拝。代わりに、すべての定義済みのスタイルを作成します(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の内のすべてのテキストフィールドのための色の変化のロジックを適用したい場合あなたは、次の方法で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") 
     ); 
    } 
}