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

如果您只想显示/隐藏不同的选项卡页面而不进行实际导航，则可以在tabs with pages example中查看其操作方式。

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

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

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看起来一点也不差（我想到的是Buttons，看上去确实很差）。因此，如果您使用导航，然后使用Tatu的答案，如果您想在不导航的情况下显示/隐藏组件，请制作一个Map<Tab, Component>并显示映射到所选选项卡的组件（同时隐藏所有映射到其他组件的组件）标签）

Answer 3

页面标签附件

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

此附加组件简化了选项卡的处理。您只需传递组件（小部件，布局）以及标题。

from_records

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

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

此库还提供“可关闭”功能，显示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 ) ; 供用户单击以删除该选项卡。