Vaadin sampler dynamic color change

General
1

How does the dynamic color change functionality work in Vaadin sampler?

Exact steps - Select component → settings → theme → custom theme → change color combo box

I actually want to know how the css values are passed to the scss/css files on changing the values - color, font etc…

Thanks

2

Can anyone check into this, would be very grateful of you.

3

Hi Dinesh,
If you want to know the values the UI is fetching from your application or CSS. Firebug can help you. Try Installing Firebug in Firefox.

4

Hi Annie,
Thanks for reply.

But my question is ‘How does the change in style values work on the fly’?

  • Eg. If I change the background-color, the change is instantly visible. I would like to know the logic/process behind?

Actually, the confusing part is there is no ‘dynamic style injection’ or cssLayout used.

5

Hi Dinesh,
Sampler compiles a new theme on the server for every variable change applied in the theme switch control. First it uses UI.setTheme() with a dynamic theme name to make the client request for a new css file.

There’s a custom tailored servlet filter which then catches requests for the theme files and does the sass compilation including the dynamic variables (stored in a session attribute before the first phase) and returns the resulting css for the client.

The source code is intentionally not public as it’s a dirty hack implemented for demonstrational purposes only :slight_smile: It bypasses much of the default behaviour of Vaadin so the code is not even guaranteed be backwards compatible.

6

Oh but I have actually got this working in different way, and it would be nice to know if its fine.

  • Firstly, styles are injected using dynamic injection - Page.getCurrent().getStyles().executeJavascript(“”);
  • When a color is selected/changed, in its respective listener, using javascript
    [list]
  • I get the style tag and its text content and replace the ‘color’ value and thereby update the style tag.

    [/list]

And I know the values updated are lost on page refresh.

7

Sure, using css injection trough Page.Styles is a good solution if you only need to add some new/overriding css-rules dynamically.

8

Tomi, its been very nice of you.

Cheers.