Vaadin Spring 导航栏答案

【问题标题】：Vaadin Spring NavbarVaadin Spring 导航栏
【发布时间】：2015-12-02 09:24:33
【问题描述】：

我正在尝试为 Spring 应用程序添加导航栏（就像引导程序一样），但没有让导航菜单出现在网页上！

谁能告诉我这里出了什么问题？

下面是我的代码：

private Panel viewContainer;

private HorizontalLayout navbar;

private Button btnHome;
private Button btnNested;

private Button createNavigationButton(String caption, final String viewName) {
    Button button = new Button(caption);
    button.addStyleName(ValoTheme.BUTTON_SMALL);
    // If you didn't choose Java 8 when creating the project, convert this
    // to an anonymous listener class
    button.addClickListener(event -> getUI().getNavigator().navigateTo(
            viewName));
    return button;
}

@Override
protected void init(VaadinRequest request) {

    final VerticalLayout root = new VerticalLayout();
    root.setSizeFull();

    navbar = new HorizontalLayout();
    navbar.setWidth("100%");
    navbar.setDefaultComponentAlignment(Alignment.MIDDLE_RIGHT);
    root.addComponent(navbar);

    final Label brand = new Label("Nested demo");
    brand.addStyleName(ValoTheme.LABEL_H1);
    brand.addStyleName(ValoTheme.LABEL_NO_MARGIN);
    navbar.addComponent(brand);
    navbar.setComponentAlignment(brand, Alignment.MIDDLE_LEFT);
    navbar.setExpandRatio(brand, 1);

    btnHome = new Button("Home", FontAwesome.HOME);
    btnHome.addStyleName(ValoTheme.BUTTON_BORDERLESS);

    navbar.addComponent(btnHome);

    btnNested = new Button("nested", FontAwesome.COFFEE);
    btnNested.addStyleName(ValoTheme.BUTTON_BORDERLESS);

    navbar.addComponent(btnNested);

    viewContainer = new Panel();
    viewContainer.setSizeFull();
    root.addComponent(viewContainer);
    root.setExpandRatio(viewContainer, 1);
    }

非常感谢任何提示。

谢谢

【问题讨论】：

是 only 缺少导航栏吗？是否有任何提示（例如，您的浏览器的开发工具告诉您什么）？
似乎 setContent(root); init 方法中缺少调用。

标签： html spring vaadin

【解决方案1】：

Henri 的评论几乎可以肯定是正确答案。

根据您正在使用 UI 类的 init(VaadinRequest) 代码判断。

没有setContent(some components with visible stuff in them); 你什么都看不到。

当您尝试新事物或进行概念验证时，在 Vaadin 中经常会出现“您什么都看不到”的情况。恕我直言，从真正愚蠢的 UI 内容开始总是一个好习惯，例如setContent(new Label("TODO - 实现这个内容-xxx"));

使用浏览器开发工具也是一个好主意。快速选择元素应显示 UI div 为空，并允许您开始诊断。

TL;DR :-

UI 是一个 ComponentContainer，所以你需要 - 要么

setContent(myLayoutWithStuff);

或

getContent().addComponent(myStuff);

展示一些东西。

【讨论】：