动态更改背景颜色

Question

我想在OptionGroup组件的valueChange事件中更改我的Vaadin应用程序的背景颜色。

由于我的页面上有相当多的布局，最好的是更改每个Horizo​​ntalLayout和VerticalLayout背景颜色，但是每个可以添加的新组件也应该具有此颜色。

我怎样才能实现这一目标？感谢。

Answer 1

我想到了两种方法。

最简单的，从概念上讲，以及在实施方面，最好是将一个组件作为背景，并为您的HorizontalLayout和VerticalLayout组件提供透明背景。如果您的布局太复杂，那么您可以拥有许多基本的“背景”组件，顶部的布局组件也是透明的。我们的想法是将需要更改颜色的组件减少到可管理的范围。

如果该方法不能转换为您的用例，您可以随时使用JavaScript来选择布局组件并重新定义其背景。通过为所有布局组件提供一个通用的CSS类（例如：'dynamic-background'），可以使这更易于管理。

JavaScript.getCurrent().execute("$('.dynamic-background').css('background-color', 'purple')");

请注意，此JavaScript依赖于JQuery，请查看有关将JQuery与Vaadin集成的更多详细信息：
Add javascript/Jquery & client side code in Vaadin 7
Integrating HTML and JavaScript in Vaadin 7