Vaadin 10 Tabs: unable to update page content on tab selection

Hi, I am trying to update page content on tab selection, but i am getting errors in browser, below code is not working,…

Below example i want to update page#2 grid dynamically, but getting errors(Attached image).Please help.

MainView.java

@HtmlImport("styles/shared-styles.html")
@Route
public class MainView extends VerticalLayout {

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

        Tab tab2 = new Tab("Tab two");
        TestDiv page2 = new TestDiv();
        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);
            if (selectedPage.equals(page2)) {
                page2.update();
            }
            pagesShown.add(selectedPage);
        });

        add(tabs, pages);
        tabs.setFlexGrowForEnclosedTabs(1);
        setClassName("main-layout");
    }

}

TestDiv.java


public class TestDiv extends Div {
    private Grid<Person> grid;

    public TestDiv() {
        this.grid = new Grid<>();
        this.grid.addColumn(Person::getName).setHeader("Name");
        this.grid.addColumn(person -> Integer.toString(person.getYearOfBirth()))
                .setHeader("Year of birth");
        add(this.grid);
    }

    public void update() {
        this.grid.setItems(getPeople());

    }

    private List<Person> getPeople() {
        // Have some data
        List<Person> people = Arrays.asList(
                new Person("Nicolaus Copernicus", 1543),
                new Person("Galileo Galilei", 1564),
                new Person("Johannes Kepler", 1571));

        return people;

    }
}

17150200.png

another thing in V10 made badly, missing to add components after selecting tab like in V8

Petr Mikolas:
another thing in V10 made badly, missing to add components after selecting tab like in V8

Thank you for reply, any plans to add this feature in V10 ? It is important for my application to get data after selecting tab so I will use another button to update contents for now (OR) is there any way to add data to components after selecting tab ??

Just a workaround for this limitation, below Working example uses refesh button to update components on tab selection,

@HtmlImport("styles/shared-styles.html")
@Route
public class MainView extends VerticalLayout {

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

        Tab tab2 = new Tab("Tab two");
        TestDiv page2 = new TestDiv();
        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);
            if (selectedPage.equals(page2)) {
                page2.update();
            }
            pagesShown.add(selectedPage);
        });

        add(tabs, pages);
        tabs.setFlexGrowForEnclosedTabs(1);
        setClassName("main-layout");
    }

}

TestDiv.java


public class TestDiv extends Div {
    private Grid<Person> grid;
    private Button refresh;

    public TestDiv() {
        this.refresh = new Button("");
        this.refresh.addClickListener(buttonClickEvent -> {
            this.grid.setItems(getPeople());
        });
        this.grid = new Grid<>();
        this.grid.addColumn(Person::getName).setHeader("Name");
        this.grid.addColumn(person -> Integer.toString(person.getYearOfBirth()))
                .setHeader("Year of birth");
        add(this.refresh,this.grid);
    }

    public void update() {
        this.refresh.click();
    }

    private List<Person> getPeople() {
        // Have some data
        List<Person> people = Arrays.asList(
                new Person("Nicolaus Copernicus", 1543),
                new Person("Galileo Galilei", 1564),
                new Person("Johannes Kepler", 1571));
        return people;

    }
}

Tabs and Tab in V10 have a different philosophy than TabSheet in previous versions. You could take a look at t flow-viritin [here]
(https://github.com/viritin/flow-viritin/blob/master/src/main/java/org/vaadin/firitin/layouts/VTabSheet.java) where this code creates a V10 Tabsheet component through server side composition.

Thank you, it working like v8.