How to set different content for Tabs in Vaadin14?

Question

I have a pretty simple class that basically is just an AppLayout with some Tab .

Now my issue. I am not able to find a smart way to display different contents for the Tabs -class. Is there any interface or something that can be called to differ the content for the Tab ?

class MainAppView extends AppLayout {

public MainAppView()
{
    createDrawerAndAddToAppView();
}

void createDrawerAndAddToAppView()
{
    Tabs tabs = createTabsForDrawer();
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    addToDrawer(tabs);

    H1 a = new H1("Test"); // Is displayed as content for every Tab
    tabs.addSelectedChangeListener(selectedChangeEvent ->
            /**
             * How to get the specific content of a Tab here?
             */
            //selectedChangeEvent.getSelectedTab(). //getContent() and put in super.setContent()?
            super.setContent(a)); // Displays 'Test' as content for every Tab
            // The Listener shall display the specific content of the getSelectedTab()
}

private Tabs createTabsForDrawer()
{
    return  new Tabs(
            new Tab("Home"),
            new Tab("Dummy"),
            new Tab("Test"));
}

}

Answer 1

Here is one example, using a map to keep track of which content belongs to which tab. In reality your tab content would be more complicated, and maybe be created in it's own method.

@Route
public class TabTest extends VerticalLayout {

    private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();

    public TabTest() {
        Tabs tabs = createTabs();
        Div contentContainer = new Div();
        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e -> {
            contentContainer.removeAll();
            contentContainer.add(tabComponentMap.get(e.getSelectedTab()));
        });
        // Set initial content
        contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));
    }

    private Tabs createTabs() {
        tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));
        tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());
        tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));
        return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));
    }
}

You can do something similar with routes also, but then you would probably want your containing component to be a RouterLayout . Also this requires a bit more logic if you want to automatically select the correct tab after navigating from somewhere else.

@Route
public class TabTest extends VerticalLayout implements RouterLayout {

    private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();
    private Div contentContainer = new Div();

    public TabTest() {
        Tabs tabs = createTabs();
        Div contentContainer = new Div();
        contentContainer.setSizeFull();
        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e ->
                UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));
    }

    private Tabs createTabs() {
        RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

        tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));
        tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));
        tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));
        return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        getElement().appendChild(content.getElement());
    }
}

And an example view

@Route(layout = TabTest.class)
public class TestView3 extends VerticalLayout {

    public TestView3() {
        add("View 3");
    }
}