How to load styles dynamically in Flow | Vaadin

Docs
1

This topic is the discussion thread for the Vaadin documentation page How to load styles dynamically in Flow | Vaadin.

Questions, feedback, and comments are welcome here.

2

I was intreagued by the possibility to be able to change styles "in-flight" and added the shown "ThemeChanger" to my application's header-bar. But to my disappointment the "Select<String>" widget does not work at all. It only shows a grayish box without any text or label:

and when one clicks the down-arrow one gets a small white bar on top (but again no text nor anything useful):

What's wrong with this widget or what am I missing?


3

BTW 1: the comments-editor has a bug! If one edits an append containing an image (as my append showing the faulty Select-widget and one edits that append (I wanted to correct a typo after my initial submit) this causes the images to be lost! So I had to start over... Just wanted to make you aware...

BTW 2: it would be helpful, if code-blocks would use a fixed-width font. That would allow to maintain proper indentation.

4

Looks like the Select doesn't have any items. Are you calling `setItems()` correctly?

5

I would claim so. This is the code-snippet that I am using (it's a 1:1 copy of the example given except that I am using the string-constants Lumo.STYLESHEET and Aura.STYLESHEET instead of verbatim Strings):

public class ThemeChanger extends Select<String>
{
  public ThemeChanger() {
    setLabel("Select Theme:");
    setItems(Lumo.STYLESHEET, Aura.STYLESHEET);
    setValue(Lumo.STYLESHEET);
    addValueChangeListener(event -> {
      log.info("Theme '{}' selected.", event.getValue());
      switchTheme(event.getSource().getUI().orElse(UI.getCurrent()), event.getValue());
    });
}
...

When this did not work I also had tried using explicit Strings, i.e. "A", "B" but no joy.

Odd! I am using Select's elsewhere in my application and there they work flawlessly. Beats me, why this one is not... :-(

6

Meanwhile I found the reason for the issue: it's the "onAttach(...)"-method shown!

When I commented out that method then the Widget displayed as expected and also worked as expected.

I then realized that this method lacks a super-call!

If I add a line "super.onAttach(attachEvent);" to the method then the ThemeChanger shows and works fine!

Please correct the example to spare others from falling into the same loop-hole.

7

Thanks for taking the time to figuring it out! I’ll update the example right away.

Now I wonder if something has changed in some recent release that might’ve changed with the onAttach().