Flow 13 How Tabs Work

Flow
1

In Vaadin 8, creating a tabsheet and adding tabs to it was quite simple.

TabSheet tabs = new TabSheet();

tabs.addTab(formLayout1, "Form1");
tabs.addTab(formLayout2, "Form2");

With Flow 13, I am having a hard time applying the same concept above.

Tabs tabs = new Tabs();
Tab tab1 = new Tab("Form1");
Tab tab2 = new Tab("Form2");

// formlayout1 and formlayout2 are containers for textfields, comboboxes, etc.
tab1.add(formlayout1);
tab2.add(formlayout2);

tabs.add(tab1, tab2);

This simply does not work correctly. Can someone please elaborate the usage to Flow 13 tabs dealing with forms?

Thanks.

2

Tabs in Vaadin 13 are just the tabs, they don’t have a container for content. Take a look at https://vaadin.com/components/vaadin-tabs/java-examples for examples. See also https://vaadin.com/directory/component/paged-tabs for an add-on that works more like TabSheet in V8.

3

Thank you for the response. I do use paged-tabs in some cases, however, paged-tabs does not support scrolling at this time. I decided to use accordion instead and it’s working out well.

4

How do I add content to the tab? I’ve a horizontal layout which I want to show when a tab is clicked.

5

Use tabs.addSelectedChangeListener to add a listener when the selected tab is changed and show your horizontal layout there