Tabs in tab Vaadin Flow java

Viewed 71

I want to make tabs in tab in Vaadin. I'm using tabs with routes https://cookbook.vaadin.com/tabs-with-routes/a . It is working fine when I have only one level of tabs. I dont know how to display Main Tabs, tabs under and its content. How to achieve something like that: enter image description here

MainView.java

@Route("")
public class MainView extends VerticalLayout implements RouterLayout {

    private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();

    public MainView(){

        H1 title = new H1("CMS");

        Tabs tabs = getTabs();
       
        UI.getCurrent().navigate(OrderGUI.class);
        tabs.addSelectedChangeListener(e -> UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));

        add(title, tabs);

    }

    private Tabs getTabs() {

        RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

        tabToUrlMap.put(new Tab("Zamówienia"), routeConfiguration.getUrl(OrderGUI.class));
//code for rest tabs
        Tabs tabs = new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));
        tabs.getStyle().set("margin", "auto");

        return tabs;

    }


}

OrderGUI.java

@Route(value="zamowienia", layout = MainView.class)

public class OrderGUI extends VerticalLayout implements RouterLayout{
    private Map<Tab, String> tabToUrlMapOrder = new LinkedHashMap<>();

    public OrderGUI() {

        //super();
        Tabs tabs = getTabsOrder();
        UI.getCurrent().navigate(OrderedOrderGUI.class);//pierwsza zakładka jako główna
        tabs.addSelectedChangeListener(e -> UI.getCurrent().navigate(tabToUrlMapOrder.get(e.getSelectedTab())));

        add(tabs);
    }
    private Tabs getTabsOrder() {

        RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

        tabToUrlMapOrder.put(new Tab("Złożone"), routeConfiguration.getUrl(OrderedOrderGUI.class));
        tabToUrlMapOrder.put(new Tab("W produkcji"), routeConfiguration.getUrl(ProductionOrderGUI.class));
        tabToUrlMapOrder.put(new Tab("Gotowe"), routeConfiguration.getUrl(ReadyOrderGUI.class));
        
        Tabs tabs = new Tabs(tabToUrlMapOrder.keySet().toArray(new Tab[]{}));
        tabs.getStyle().set("margin", "auto");

        return tabs;

    }


}

OrderedOrderGUI.java

@Route(value="zamowienia/zlozone", layout = OrderGUI.class)
public class OrderedOrderGUI extends VerticalLayout {
    public OrderedOrderGUI() {
        add(new Text("some content"));
    }
}
1 Answers

Problem solved, I had to add annotation @ParentLayout(MainView.class) in OrderGUI.java

Related