Hello,
I was using as a base the sample application by Matti
https://github.com/mstahv/tab-as-main-layout-example
to have a tabs based main navigation for my app. What i need to change in it, it’s that tabs are not collected and added to the Tab component at the beginning, but through a menu bar.
So this is the main class, i removed the registration of each view from the constructor to not have all the tabs at the beginning, but only when the menu item is clicked.
public class TabBasedMainLayout extends VerticalLayout implements RouterLayout {
Tabs tabs = new Tabs();
Map<Class<? extends Component>, Tab> viewToTab = new HashMap<>();
public TabBasedMainLayout() {
MenuBar menuBar = new MenuBar();
menuBar.setOpenOnHover(true);
MenuItem mainView = menuBar.addItem("Main", e -> registerView(MainView.class));
MenuItem anotherView = menuBar.addItem("AnotherView",e -> registerView(AnotherView.class));
MenuItem thirdView = menuBar.addItem("ThirdView", e -> registerView(ThirdView.class));
add(menuBar);
add(tabs);
}
private void registerView(Class<? extends Component> clazz) {
Tab tab = new Tab();
RouterLink rl = new RouterLink(
createTabTitle(clazz),
clazz
);
tab.add(rl);
tabs.add(tab);
viewToTab.put(clazz, tab);
tabs.setSelectedTab(tab);
}
protected static String createTabTitle(Class<? extends Component> clazz) {
return // Make somewhat sane title for the tab from class name
StringUtils.join(
StringUtils.splitByCharacterTypeCamelCase(
clazz.getSimpleName()), " ");
}
public void selectTab(Component view) {
tabs.setSelectedTab(viewToTab.get(view.getClass()));
}
}
Then I have the base class for all the views:
@Route(layout = TabBasedMainLayout.class)
public abstract class AbstractTabView extends VerticalLayout {
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
ensureSelectTab();
}
private void ensureSelectTab() {
TabBasedMainLayout ml = (TabBasedMainLayout) getParent().get();
ml.selectTab(this);
}
}
And the 3 views, with a field uid just to see if the istance is the same:
public class MainView extends AbstractTabView {
private String uid = UUID.randomUUID().toString();
public MainView() {
add(new Paragraph("This is main view content " + uid));
}
}
public class AnotherView extends AbstractTabView {
private String uid = UUID.randomUUID().toString();
public AnotherView() {
add(new Paragraph("This is another view content " + uid));
}
}
public class ThirdView extends AbstractTabView {
private String uid = UUID.randomUUID().toString();
public ThirdView() {
add(new Paragraph("This is third view content " + uid));
}
}
The application works, clicking on the menu item the tab and its view is added to the panel, but there are 2 issues that i need to fix:
-
This issue is also present in the original Matti code, when i switch from one tab to another, a new instance of that view is created, example:
First click on “anotherView” in the menu, and the tab is added to the panel, then click on “thirdView” in the menu and a new tab is added to the panel. If then i click on the first tab, the instance is different from the previous. -
if i click 2 times on the same menu item (let’s say another view) I would like to see 2 tabs in the panel, with 2 different instance of the view, but instead the view uid is still the same. How to make the view with a scope “prototype” so that each time that i click on the menu, a new instance of the view is added to the tabPanel?
Curios that if i click on tabs with the same view, the instance doesn-t change, but if i click on a different view tab, and then again to the first, the instance has changed (the case 1 that i described), and it changes for all the tabs of the same view.
Any idea?