"Tabs with pages" example not working

General
1

Hi I’m new to Vaadin and I’m trying to follow your Tabs examples over at the [Vaadin tabs docs]
(https://vaadin.com/components/vaadin-tabs/java-examples). You have one example called Tabs with pages that doesn’t seem to work for me. When I run an app using the copy-and-pasted code from that example:

@Route(value = "")
public class ManagementView extends VerticalLayout {

    private Tabs tabs;

    public ManagementView() {
        this.tabs = new Tabs();

        init();
    }

    private void init() {

        Tab tab1 = new Tab("Tab one");
        Div page1 = new Div();
        page1.setText("Page#1");

        Tab tab2 = new Tab("Tab two");
        Div page2 = new Div();
        page2.setText("Page#2");
        page2.setVisible(false);

        Tab tab3 = new Tab("Tab three");
        Div page3 = new Div();
        page3.setText("Page#3");
        page3.setVisible(false);

        Map<Tab, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(tab1, page1);
        tabsToPages.put(tab2, page2);
        tabsToPages.put(tab3, page3);
        Tabs tabs = new Tabs(tab1, tab2, tab3);
        Div pages = new Div(page1, page2, page3);
        Set<Component> pagesShown = Stream.of(page1)
                .collect(Collectors.toSet());

        tabs.addSelectedChangeListener(event -> {
            pagesShown.forEach(page -> page.setVisible(false));
            pagesShown.clear();
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
            pagesShown.add(selectedPage);
        });

        // Added this in here to make the `tabs` actually show on the page
        add(tabs);
    }
}

I get a page with the three tabs, but nothing loads underneath those tabs. Also I noticed in your example that the pages Div isn’t used anywhere…perhaps there’s some missing code?

Thanks in advance for any-and-all help!

2

Looks like there’s a missing add(pages); from the end, after add(tabs);.

3

Awesome thanks Olli!

4

I made the exact same mistake as Zac by following the explanation on this page : https://vaadin.com/components/vaadin-tabs/java-examples

Maybe specifying a bit better in the example to prevent future mistakes for our fellow coders ?

Grts,
Jorn

5

Please correct the documentation on the component page under example.

The explanation is not clear and causes a lot of confusion.
I searched for almost a very long period to figure it out.

Good documentation is a golden key in software development.

6

Does this work only for Div and not for other Components?

Tab tab1 = new Tab("Tab one");
        /*Div page1 = new Div();
        page1.setText("Page#1");*/

        Tab tab2 = new Tab("Tab two");
        /*Div page2 = new Div();
        page2.setText("Page#2");
        page2.setVisible(false);*/

        Tab tab3 = new Tab("Tab three");
        Div page3 = new Div();
        page3.setText("Page#3");
        page3.setVisible(false);

        Map<Tab, Component> tabsToPages = new HashMap<>();
        tabsToPages.put(tab1, msgEditor);
        tabsToPages.put(tab2, this.listing.getComponent());
        tabsToPages.put(tab3, page3);
        Tabs tabs = new Tabs(tab1, tab2, tab3);
        Div pages = new Div(msgEditor, this.listing.getComponent(), page3);
        Set<Component> pagesShown = Stream.of(msgEditor)
                .collect(Collectors.toSet());

        tabs.addSelectedChangeListener(event -> {
            errorNotify(event.getSelectedTab().getLabel());
            pagesShown.forEach(page -> page.setVisible(false));
            pagesShown.clear();
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
            pagesShown.add(selectedPage);
        });

        // Added this in here to make the `tabs` actually show on the page
        add(tabs);
        add(pages);

The above code works for the first component but not for the second. If I use just Div setText it works. So, how can I show a button in Tab1 and a comboBox in Tab2?

7

I have problem with tabs and pages display , my requirement was i want to show tabs in header section like menus once i select Tab i need to show pages in body Div. i need to add in header Div only Tabs and in another body Div i need to show Tab Pages.
An above examples added Tabs and pages in same div , but my requirement is different please help me any one.

Please provide the solution any possibility ASAP.
Thanks
Chenga