Vaadin：使用 Tab 组件在视图之间正确导航

Question

i have created a navigation menu bar with Vaadin and i was wondering how i can attach a view or a link to each tab so on click it can redirect me to the corresponding view. I have managed to get a workaround but i think this approach is flawed:

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

I did not find an individual clickListener event on the Tab component which is weird to me. Also noticed that i can get the UI attached to the tab with tabName.getUI() method, however i cannot find a way to attach it.

Help me find the propper way to navigate with tabs! Thanks in advance!

Answer 1

In Vaadin 14 you can add components to Tabs. So instead of doing just new Tab("Login") you can do something like the follows:

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

Naturally RouterLink is not the only option, if you like you could use also Button and use click listener of the button to call navigation, etc. There is quite a lot options here.

Answer 2

If you only want to show/hide different tab-pages without actual navigation, you can see how it's done in the tabs with pages example .

If you want to navigate (which seems to be the case with your setup) then the addSelectedChangeListener is the correct approach - if you don't want to use RouterLink or Button as Tatus answer suggests. Personally, I think the RouterLinks and Buttons do not really look nice inside the Tab component, and therefore prefer it this way instead.

To avoid having to compare hardcoded strings in that listener, you could use a Map<Tab, Class> similar to how it's done in the above link, and navigate to the class defined for that 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()));
});

Edit: After testing it right now, I must say that using RouterLink inside Tab component does not look bad at all (I was thinking of Buttons, which DO look bad). So if you use navigation then use Tatu's answer, if you want to do showing/hiding of components without navigation, make a Map<Tab, Component> and show the component mapped to the selected tab (while hiding all other components that are mapped to other tabs)

Answer 3

paged-tabs add-on

Looks like Alejandro Duarte has made a Vaadin 14 add-on, named paged-tabs , for us to plug into our Vaadin projects. I imagine this is a wrapper around the kind of code shown in the correct Answer by Kaspar Scherrer .

This add-on simplifies the handling of tabs. You just pass the components (widgets, layouts) along with a title.

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

Alternatively, you can pass a Tab object.

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

This library also provide a “closable” feature, displaying an X for the user to click to remove that tab.