大标签作为 Vaadin 8 网络应用程序中的标题

Question

我需要一段更大的文本作为标题来标记 Vaadin 8 应用程序中使用 Valo 主题的表单部分。

在以前版本的 Vaadin 中，我记得使用 Label 执行此操作，我以某种方式分配了预定义样式 "H1"（如 HTML "h1" 标记) 其中该样式是 Reindeer 主题的一部分。

我尝试通过调用 Label::addStyleName 并传递常量 ValoTheme.LABEL_H1.

在 Vaadin 8 中执行此操作但失败了

Answer 1

是的，的确，根据 Morfic 的评论，调用 addStyleName on the Label and passing the constant ValoTheme.LABEL_H1 确实有效。

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 );

这是一个完整的示例应用程序，由 Vaadin 8.1.0 Alpha 6 中常用的 Vaadin archetype vaadin-archetype-application 修改而成。

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 {
    }
}

运行 该示例应用程序的屏幕截图。

addStyleName 对比 setStyleName

注意调用 addStyleName 而不是 setStyleName。第二个清除所有现有样式，替换为您的一个样式参数。这不是您想要的，因为您将丢失 Vaadin 框架分配的所有现有样式。