Use of Standard menu and Side bar menu in same app

Hi
I want to give option to users to choose SideBar menu or standard menu options i.e. menu bar on top of the app. I have extended the mainWindow with side bar menu.

Now when I set the sidebar menu .setVisible(false) and standardMenu (AppMenu) with .setVisible(true). It works but I don’t see the standard menu panel anymore, only menu items are displayed as attached.
How can i display the standard menu with the menu panel?

menu

Hello!

I just checked what you want to do and everything works as it should.
Could you provide your application or just mainwindow.xml extension and main window controller?

Hi Deniil
Please find below the ext-mainwindow.xml and controller



<?xml version="1.0" encoding="UTF-8" standalone="no"?>  
<window xmlns="[url=http://schemas.haulmont.com/cuba/window.xsd"]http://schemas.haulmont.com/cuba/window.xsd"[/url];  
        caption="mainMsg://application.caption"  
        class="com.company.erp.web.mainwindow.ExtMainwindow"  
        xmlns:chart="[url=http://schemas.haulmont.com/charts/charts.xsd"]http://schemas.haulmont.com/charts/charts.xsd"[/url];  
        xmlns:main="[url=http://schemas.haulmont.com/cuba/mainwindow.xsd">]http://schemas.haulmont.com/cuba/mainwindow.xsd">[/url];  
    <dsContext>  
        <collectionDatasource id="companiesDs"  
                              class="com.company.util.entity.Company">  
            <query>  
                <!&#91;CDATA&#91;select e from companyutil$Company e&#93;&#93;>  
            </query>  
        </collectionDatasource>  
        <valueCollectionDatasource id="customerSalesDs">  
            <query>  
                <!&#91;CDATA&#91;select e.customer, SUM(e.amount) as amount   
from erp$SalesOrder e   
group by e.customer order by e.customer&#93;&#93;>  
            </query>  
            <properties>  
                <property class="com.company.erp.entity.ar.CustomerProfile"  
                          name="customer"/>  
                <property datatype="double"  
                          name="soAmount"/>  
            </properties>  
        </valueCollectionDatasource>  
        <valueCollectionDatasource id="salesOrderStatisticsDs">  
            <query>  
                <!&#91;CDATA&#91;select e.docDate, COUNT(e.amount) as orders, SUM(e.amount) as amount   
from erp$SalesOrder e   
Group by e.docDate Order by e.docDate&#93;&#93;>  
            </query>  
            <properties>  
                <property datatype="date"  
                          name="docDate"/>  
                <property datatype="int"  
                          name="orders"/>  
                <property datatype="double"  
                          name="amount"/>  
            </properties>  
        </valueCollectionDatasource>  
    </dsContext>  
    <dialogMode height="600"  
                width="800"/>  
    <layout stylename="c-sidemenu-responsive">  
        <hbox id="horizontalWrap"  
              expand="workArea"  
              height="100%"  
              stylename="c-sidemenu-layout"  
              width="100%">  
            <main:menu id="menuTop"  
                       responsive="true"/>  
            <vbox id="sideMenuPanel"  
                  expand="sideMenu"  
                  height="100%"  
                  responsive="true"  
                  spacing="true"  
                  stylename="c-sidemenu-panel"  
                  width="AUTO">  
                <button id="mobileMenuButton"  
                        caption="mainMsg://app.menu"  
                        icon="icons/mobile-menu.png"  
                        stylename="primary c-sidemenu-toggle"/>  
                <hbox id="mobileButtonsBox"  
                      stylename="c-sidemenu-mobile-buttons">  
                    <main:newWindowButton id="mobileNewWindowButton"  
                                          description="mainMsg://newWindowBtnDescription"  
                                          icon="app/images/new-window.png"/>  
                    <main:logoutButton id="mobileLogoutButton"  
                                       description="mainMsg://logoutBtnDescription"  
                                       icon="app/images/exit.png"/>  
                </hbox>  
                <hbox id="appTitleBox"  
                      spacing="true"  
                      stylename="c-sidemenu-title"  
                      width="100%">  
                    <label id="appTitleLabel"  
                           align="MIDDLE_CENTER"  
                           value="mainMsg://application.logoLabel"/>  
                </hbox>  
                <embedded id="logoImage"  
                          align="MIDDLE_CENTER"  
                          height="40px"  
                          stylename="c-app-icon"  
                          type="IMAGE"  
                          width="125px"/>  
                <hbox id="userInfoBox"  
                      align="MIDDLE_CENTER"  
                      expand="userIndicator"  
                      margin="true"  
                      spacing="true"  
                      width="100%">  
                    <main:userIndicator id="userIndicator"  
                                        align="MIDDLE_CENTER"/>  
                    <main:newWindowButton id="newWindowButton"  
                                          description="mainMsg://newWindowBtnDescription"  
                                          icon="app/images/new-window.png"/>  
                    <main:logoutButton id="logoutButton"  
                                       description="mainMsg://logoutBtnDescription"  
                                       icon="app/images/exit.png"/>  
                </hbox>  
                <hbox id="hBoxNotification"  
                      align="MIDDLE_CENTER"  
                      spacing="true">  
                    <main:timeZoneIndicator id="timeZoneIndicator"  
                                            align="MIDDLE_CENTER"/>  
                    <hbox id="hBox1"  
                          spacing="true">  
                        <label id="lblNotification"  
                               icon="font-icon:BELL_O"/>  
                    </hbox>  
                    <hbox id="hBox2"  
                          spacing="true">  
                        <label id="lblReminder"  
                               icon="font-icon:CALENDAR_CHECK_O"/>  
                    </hbox>  
                </hbox>  
                <main:sideMenu id="sideMenu"  
                               stylename="sidemenu"  
                               width="100%"/>  
                <main:ftsField id="ftsField"/>  
            </vbox>  
            <main:workArea id="workArea"  
                           height="100%">  
                <main:initialLayout margin="true"  
                                    spacing="true">  
                    <vbox spacing="true">  
                        <vbox spacing="true">  
                            <cssLayout id="cssLayout"  
                                       height="800px"  
                                       stylename="colorBoxPanel"  
                                       width="100%"/>  
                        </vbox>  
                    </vbox>  
                </main:initialLayout>  
            </main:workArea>  
        </hbox>  
    </layout>  
</window>  

Controller


public class ExtMainwindow extends AbstractMainWindow {  
    @Inject  
    private FtsField ftsField;  
    @Inject  
    private Embedded logoImage;  
    @Inject  
    private AppMenu menuTop;  
    @Inject  
    private SideMenu sideMenu;  
    @Inject  
    private UserSessionSource userSessionSource;  
    @Inject  
    private com.haulmont.cuba.gui.components.Label lblNotification;  
    @Inject  
    private com.haulmont.cuba.gui.components.Label lblReminder;  
    @Inject  
    private PieChart pieChart;  
    //  @Inject  
  //  private HBoxLayout hBoxNotification;  
    @Inject  
    private HBoxLayout hBox1;  
    @Inject  
    private HBoxLayout hBox2;  
       @Inject  
    private VBoxLayout sideMenuPanel;  
    @Inject  
    private Button mobileMenuButton;  
    @Inject  
    private HBoxLayout mobileButtonsBox;  
    @Inject  
    private UserSettingService userSettingService;  
    @Override  
    public void init(Map<String, Object> params) {  
        super.init(params);  
        sideMenuPanel.setWidth("250px");  
        String menuOption = userSettingService.loadSetting("menuType");  
        menuTop.setVisible(true);  
        sideMenuPanel.setVisible(false);  
        initLayoutAnalyzerContextMenu(logoImage);  
        initLogoImage(logoImage);  
    }  
    @Override  
    public void ready() {  
        super.ready();  
    }  
}  

Please also note that, this mainwindow is modified one from the template generated mainwindow, When I tried to use .setVisible(false) to appMenu inside template generated ext-mainwindow, it doesn’t work. I believe you can regenerate it too.

I’ve prepared an example how two menus config can be implemented. Check code snippets below:
Main window screen descriptor:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        xmlns:main="http://schemas.haulmont.com/cuba/mainwindow.xsd"
        class="com.company.twomenus.web.screens.ExtAppMainWindow"
        messagesPack="com.company.twomenus.web.screens">
    <dialogMode height="600"
                width="800"/>
    <layout expand="foldersSplit">
        <hbox id="titleBar" stylename="c-app-menubar"
              expand="mainMenu" width="100%" height="AUTO"
              spacing="true" margin="false;false;false;true">

            <embedded id="logoImage" align="MIDDLE_LEFT" type="IMAGE" stylename="c-app-icon"/>

            <main:menu id="mainMenu" align="MIDDLE_LEFT"/>

            <main:ftsField id="ftsField" align="MIDDLE_LEFT"/>

            <main:userIndicator id="userIndicator" align="MIDDLE_LEFT"/>

            <main:timeZoneIndicator id="timeZoneIndicator" align="MIDDLE_LEFT"/>

            <hbox id="mainButtonsBox" stylename="c-main-buttons" align="MIDDLE_LEFT">
                <main:newWindowButton id="newWindowButton"
                                      icon="app/images/new-window.png"
                                      description="msg://newWindowBtnDescription"/>

                <main:logoutButton id="logoutButton"
                                   icon="app/images/exit.png"
                                   description="msg://logoutBtnDescription"/>
            </hbox>
        </hbox>

        <split id="foldersSplit" orientation="horizontal" pos="200px">
            <main:foldersPane id="foldersPane" width="100%" height="100%"/>

            <main:workArea id="workArea" width="100%" height="100%">
                <main:initialLayout spacing="true" margin="true" expand="spacer">
                    <button caption="Change menus" invoke="changeMenus"/>
                    <label id="spacer"/>
                </main:initialLayout>
            </main:workArea>
        </split>
    </layout>
</window>

Screen controller:

public class ExtAppMainWindow extends AppMainWindow {

    @Inject
    private ComponentsFactory componentsFactory;
    private SideMenu sideMenu;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        sideMenu = componentsFactory.createComponent(SideMenu.class);
        sideMenu.setWidth("250px");
        sideMenu.setHeightFull();
        sideMenu.setVisible(false);

        HBoxLayout hBox = componentsFactory.createComponent(HBoxLayout.class);
        hBox.setSizeFull();

        remove(workArea);

        hBox.add(sideMenu);
        hBox.add(workArea);

        add(hBox);

        expand(hBox);
        hBox.expand(workArea);

        sideMenu.loadMenuConfig();
    }

    public void changeMenus() {
        titleBar.setVisible(!titleBar.isVisible());
        sideMenu.setVisible(!sideMenu.isVisible());
    }
}