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