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.
- Create an extended main screen using the Main screen with top menu template.
- 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