Vaadin：使用 Tab 组件在视图之间进行适当导航

Question

我已经使用 Vaadin 创建了一个导航菜单栏，我想知道如何将视图或链接附加到每个选项卡，以便单击它可以将我重定向到相应的视图。我设法找到了解决方法，但我认为这种方法有缺陷：

Tabs tabs = new Tabs(new Tab("Login"), new Tab("Register"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        tabs.addSelectedChangeListener(event -> {
            if (event.getSelectedTab().getLabel().equalsIgnoreCase("Login")) {
                UI.getCurrent().navigate(LoginView.class);
            } else if (event.getSelectedTab().getLabel().equalsIgnoreCase("Register")) {
                UI.getCurrent().navigate(RegisterView.class);
            }
        });

我没有在 Tab 组件上找到一个对我来说很奇怪的 clickListener 事件。还注意到我可以使用 tabName.getUI() 方法将 UI 附加到选项卡，但是我找不到附加它的方法。

帮助我找到使用标签导航的正确方法！提前致谢！

Answer 1

在 Vaadin 14 中，您可以将组件添加到选项卡。因此，除了new Tab("Login")，您还可以执行以下操作：

private Tab createMenuItem(String title, VaadinIcon icon, Class<? extends Component> target) {
    RouterLink link = new RouterLink(null,target);
    if (icon != null) link.add(icon.create());
    link.add(title);
    Tab tab = new Tab();
    tab.add(link);
    return tab;
}

当然RouterLink不是唯一的选择，如果你喜欢你也可以使用Button并使用按钮的点击监听器来调用导航等。这里有很多选择。

Answer 2

分页标签 附加组件

看起来Alejandro Duarte 制作了一个名为paged-tabs 的 Vaadin 14 插件，供我们插入到我们的 Vaadin 项目中。我想这是对correct Answer by Kaspar Scherrer 中显示的那种代码的包装。

此插件简化了选项卡的处理。您只需传递组件（小部件、布局）和标题。

PagedTabs tabs = new PagedTabs() ;
tabs.add( component , "Tab caption 1" ) ;
tabs.add( component2 , "Tab caption 2" ) ;

或者，您可以传递一个Tab 对象。

Tab tab = new Tab();
tab.add( new Span( "Tab caption" ) , new Button( "Click me" ) ) ;

PagedTabs tabs = new PagedTabs() ;
tabs.add( new Span( "Tab content" ) , tab ) ;

此库还提供“可关闭”功能，显示X 供用户单击以删除该选项卡。

Answer 3

如果您只想在没有实际导航的情况下显示/隐藏不同的标签页，您可以在tabs with pages example 中查看它是如何完成的。

如果您想导航（您的设置似乎就是这种情况），那么 addSelectedChangeListener 是正确的方法 - 如果您不想像 Tatus 回答所建议的那样使用 RouterLink 或 Button。就个人而言，我认为 RouterLinks 和 Buttons 在 Tab 组件中看起来并不好看，因此更喜欢这种方式。

为避免在该侦听器中比较硬编码字符串，您可以使用类似于上面链接中的方法的Map<Tab, Class>，并导航到为该选项卡定义的类。

Tab loginTab = new Tab("Login");
Tab registerTab = new Tab("Register");

Map<Tab, Class> tabsMap = new HashMap<>();
tabsMap.put(loginTab, LoginView.class);
tabsMap.put(registerTab, RegisterView.class);

Tabs tabs = new Tabs(loginTab, registerTab);
tabs.setOrientation(Orientation.VERTICAL);
tabs.addSelectedChangeListener(event -> {
    UI.getCurrent().navigate(tabsMap.get(event.getSelectedTab()));
});

编辑：在现在测试之后，我必须说在 Tab 组件中使用RouterLink 看起来一点也不差（我在想按钮，它看起来确实很糟糕）。因此，如果您使用导航然后使用 Tatu 的答案，如果您想在没有导航的情况下显示/隐藏组件，请创建 Map<Tab, Component> 并显示映射到所选选项卡的组件（同时隐藏映射到其他选项卡的所有其他组件）