Create TOP and SIDE MENU together

Sorry may i know how to create side menu and top menu together with different menu ID
Thank You

Hi,

You can easily use both menus at the same time.

Let’s assume that TopMenu (aka AppMenu) is the main one, e.g. shows items from web-menu.xml and SideMenu has a separate config.

  1. Create an extended main screen using the Main screen with top menu template.
  2. Alter XML template in order to add SideMenu:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="mainMsg://application.caption">
    <layout expand="horizontalWrap">
        <hbox id="titleBar"
              stylename="c-app-menubar"
              expand="mainMenu"
              width="100%"
              spacing="true"
              margin="false;false;false;true">
            <image id="logoImage"
                   align="MIDDLE_LEFT"
                   scaleMode="SCALE_DOWN"
                   stylename="c-app-icon"/>
            <menu id="mainMenu"
                  align="MIDDLE_LEFT"/>
            <ftsField id="ftsField"
                      align="MIDDLE_LEFT"/>
            <userIndicator id="userIndicator"
                           align="MIDDLE_LEFT"/>
            <timeZoneIndicator id="timeZoneIndicator"
                               align="MIDDLE_LEFT"/>
            <hbox id="mainButtonsBox"
                  stylename="c-main-buttons"
                  align="MIDDLE_LEFT">
                <newWindowButton id="newWindowButton"
                                 icon="app/images/new-window.png"
                                 description="mainMsg://newWindowBtnDescription"/>
                <logoutButton id="logoutButton"
                              icon="app/images/exit.png"
                              description="mainMsg://logoutBtnDescription"/>
            </hbox>
        </hbox>
        <hbox id="horizontalWrap"
              expand="workArea"
              stylename="c-sidemenu-layout"
              width="100%">
            <vbox id="sideMenuPanel"
                  spacing="true"
                  stylename="c-sidemenu-panel"
                  expand="sideMenu"
                  width="250px"
                  height="100%"
                  margin="false,false,true,false">
                <hbox id="appTitleBox"
                      spacing="true"
                      stylename="c-sidemenu-title"
                      width="100%">
                    <label id="appTitleLabel"
                           align="MIDDLE_CENTER"
                           value="mainMsg://application.logoLabel"/>
                </hbox>
                <sideMenu id="sideMenu"
                          loadMenuConfig="false"
                          width="100%"/>
            </vbox>
            <workArea id="workArea"
                      height="100%">
                <initialLayout spacing="true" margin="true">
                </initialLayout>
            </workArea>
        </hbox>
    </layout>
</window>

Screen controller

@UiController("topMenuMainScreen")
@UiDescriptor("ext-main-screen.xml")
public class ExtMainScreen extends MainScreen {

    public ExtMainScreen() {
        addInitListener(this::initLayout);
    }

    private void initLayout(InitEvent initEvent) {
        loadSideMenuConfig();
    }

    private void loadSideMenuConfig() {
        SideMenu sideMenu = getSideMenu();
        if (sideMenu != null) {
            // add menu items
            ...
        }
    }
}

The way you load the side menu’s menu items is optional and depends on your requirements.

In the attached demo project, I created a custom SideMenuConfig that reflects MenuConfig implementation but loads menu items from a different menu config file. Also, ExtSideMenuBuilder extends SideMenuBuilder and adds a method that uses SideMenuConfig as the source for populating SideMenu.

both-app-menus.zip (92.7 KB)

Regards,
Gleb

2 Likes

thanks