Vaadin - Динамический макет фона

Question

Я пытаюсь изменить фоновое изображение макета на кнопку. Я использовал следующие правила css, чтобы сначала добавить фон, и в событии нажатия кнопки я попытался переопределить правила css.

.appname .v-desktop { 
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

стирающий код

private void setImage(String url) { 
     Styles styles = Page.getCurrent().getStyles(); 
     styles.add(".appname .v-desktop {" 
      +"background: url(icons/img.jpg) no-repeat center center fixed;" 
      +"-webkit-background-size: cover;" 
      +"-moz-background-size: cover;" 
      +"-o-background-size: cover;" 
      +"background-size: cover;}"); 
    } 

Он не будет работать, как ожидалось. Когда я проверяю правила css из функции проверки элемента браузера, правила css переопределяются правильно. Любая помощь

Answer 1

Вы должны добавить стиль (скажем, «изменился-фон») по нажатию кнопки:

button.addClickListener(...){ 
    myLayout.addStyleName("changed-background"); 

} 

В вашем SCSS файле темы, добавить пользовательский стиль

.changed-background{ 
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed; 
}