CUBA 플랫폼 동적으로 필드 색상을 변경하는 방법

Question

일부 처리로 인해 필드 색상이 변경되면 동적으로 변경하려고합니다.

쿠바 문서는 웹 테마 확장 (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html)을 통해 정적으로 수행하는 방법을 설명하지만 동적으로 설명하지 않습니다. 플랫폼 웹 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 믹스 인을 작성하십시오. - 편집기 클래스에 필드를 삽입하여 액세스하십시오. - 필드 변경 이벤트에 반응하여 스타일 이름을 정의하십시오. 필드

나는 SCSS 믹스 인을 작성했다

하지만 두 가지 문제 내가 가진 : 1) 나는 (깨끗하고 밝은 코드를 유지) 2) 내가 싶습니다를 주입 동적으로 대신 필드 인스턴스를 검색하고 싶습니다 배경색을 정적으로 정의하여 런타임시 색상을 매개 변수화 할 수 없도록하십시오.

1) fieldGroup을 주입하려고 시도했습니다. getFieldComponent()를 호출 한 다음 스타일이 변경되면 스타일이 setStyleName으로 적용됩니다. 그것은 작동하지만 입력 필드 인 모든 필드에 대해이 동작을 정의하는 것을 선호합니다.

2의

) 간격 (거리 일반적인 인터페이스의 저를 선도 있도록 Vaadin이 내 코드를 tighing (와) CSS를 주입 angel이라는 특정 기능을 사용에서 나는

이 좀 더 명확

을 희망하는 방법을 볼 수 없습니다

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이 페이지처럼) 이후를 그것은 논리와 홍보의 혼합이다. 안식. 대신 모든 미리 정의 된 스타일을 만들 (30 ~ 50 개 스타일이 충분해야한다)과의 setStyleName 방법을 사용하여 일부 조건에 따라 할당 할 수 있습니다 : 당신이 내 FieldGroup의 모든 TextField의의 색상 변화의 논리를 적용 할 경우

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 필드를 반복 할 수

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