Create TOP and SIDE MENU together

Support
#1

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

#3

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
#5

thanks