Large label as a heading in Vaadin 8 web app

Question

I need a larger piece of text to use as a heading to label sections of a form in a Vaadin 8 app using the Valo theme.

In previous versions of Vaadin, I recall doing this with a Label that I had somehow assigned a predefined style of "H1" (as in HTML "h1" tag) where that style was part of the Reindeer theme.

I tried and failed to do this in Vaadin 8 by calling Label::addStyleName and passing the constant ValoTheme.LABEL_H1.

Answer 1

Yes, indeed, calling addStyleName on the Label and passing the constant ValoTheme.LABEL_H1 does work, as per the comment by Morfic.

final Label labelPlain = new Label ( "This is a plain Label in Vaadin 8.1.0 Alpha 6." );
final Label labelH1 = new Label ( "This is a 'h1' Label in Vaadin 8.1.0 Alpha 6." );
labelH1.addStyleName ( ValoTheme.LABEL_H1 );

Here is a complete example app, modified from the usual Vaadin archetype vaadin-archetype-application in Vaadin 8.1.0 Alpha 6.

package com.example.try_h1;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme ( "mytheme" )
public class MyUI extends UI {

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout ( );

        final Label labelPlain = new Label ( "This is a plain Label in Vaadin 8.1.0 Alpha 6." );
        final Label labelH1 = new Label ( "This is a 'h1' Label in Vaadin 8.1.0 Alpha 6." );
        labelH1.addStyleName ( ValoTheme.LABEL_H1 );

        layout.addComponents ( labelPlain, labelH1 );

        setContent ( layout );
    }

    @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
    public static class MyUIServlet extends VaadinServlet {
    }
}

Screenshot of running that example app.

addStyleName versus setStyleName

Be careful to call addStyleName rather than setStyleName. That second one clears all existing styles, replacing with your one style argument. This is not what you want, as you’ll lose all the existing styles assigned by the Vaadin framework.