Valo Theme not applied to label

Vaadin 6 / 7 / 8
1

When I try to apply the built in Valo Theme to a label, I see no difference in the rendered text. The same actions taken against a button are immeditely visible upon redeployment of my application. I’ve tried multiple browsers to make sure nothing is cached, but the effects are the same, even on mobile browsers (Chrome in Android).


Setup

  • Eclipse
  • Maven project from
    vaadin-archetype-application v7.3.0
  • Tomcat 7
// imports go here
@Theme("mytheme")
@SuppressWarnings("serial")
public class MyVaadinUI extends UI
{

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
    public static class Servlet extends VaadinServlet {
         
    }

    @Override
    protected void init(VaadinRequest request) {
        // main layout
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
      
        final Label label = new Label();
        label.setCaption("label");
        // no combination works and text is always default size
        label.addStyleName(ValoTheme.LABEL_BOLD + " " + ValoTheme.LABEL_HUGE);
       
        final Button button = new Button();
        button.setCaption("button");
        // any combination works and is immeditely visible
        button.addStyleName(ValoTheme.BUTTON_HUGE + " " + ValoTheme.BUTTON_DANGER);
        
        layout.addComponent(label);
        layout.addComponent(button);
       
        
    }
    

}
2

I did eventually get this simple case to work, but only after I put the label in the click listener of the button.

3

I was a bit baffled at first also, but turns out this is a pretty common mistake that you stumbled on: the Label component can have both a caption and a value.

The caption of a Label is handles the same way as all generic component captions, like for a TextField. unless the component itself takes care of the rendering, like the Button component. The value of the Label is part of the text for which the additional built-in styles are applied to (although you can style the caption also of course).

So change
label.setCaption(“label”);
 to either
label.setValue(“label”);
 or just pass the value in the constructor,
new Label(“label”);

4

That did it. Thank you!