设计器布局问题咨询

Jmix
#1

咨询一下，初次使用，假如我用设计器，如何能拖动设计出类似如下图所示的布局结构
test

#2

你好，欢迎加入社区！

是否要求点击顶部的 菜单1 左侧的菜单就展示菜单1的所有子菜单？

#3

嗯嗯，是的。

#4

点击上面的主菜单1， 左侧展示主菜单1的所有子菜单，
点击上面的主菜单2，左侧展示主菜单2的所有子菜单。

#5

这样的话，你就不能使用Jmix提供的默认菜单了。

你可以先创建一个 Main Screen with top menu，然后基于这个进行修改。这个生成的界面是带有顶部菜单的。你可以看一下界面的xml内容，熟悉下目前这个界面是怎么做出来。然后可以进行下列步骤：

  1. 将顶部的 menu 替换成一个 hbox 用来放置你的顶部菜单按钮。如果菜单固定，可以直接在hbox中添加需要的按钮。否则可以用代码添加。
  2. 将 workArea 包含在一个 hbox 中，并在左侧添加一个 drawer 组件，drawer 内部可以放置一个 tree 组件，用来展示子菜单。

最后大概是这样，你可以与Jmix自定生成的菜单比较下：

<window xmlns="http://jmix.io/schema/ui/window"
        caption="msg://caption">
    <layout expand="workAreaBox">
        <hbox id="header"
              expand="mainMenuBox"
              margin="false;true;false;true"
              stylename="jmix-app-menubar"
              spacing="true"
              width="100%">
            <image id="logoImage"
                   align="MIDDLE_CENTER"
                   scaleMode="SCALE_DOWN"
                   stylename="app-icon">
                <resource>
                    <theme path="branding/app-icon-menu.svg"/>
                </resource>
            </image>
<!--            <menu id="mainMenu"-->
<!--                  align="MIDDLE_LEFT"/>-->
            <hbox id="mainMenuBox" align="MIDDLE_LEFT">

            </hbox>
            <userIndicator id="userIndicator"
                           align="MIDDLE_LEFT"/>
            <timeZoneIndicator id="timeZoneIndicator"
                               align="MIDDLE_LEFT"/>
            <hbox id="mainButtonsBox"
                  align="MIDDLE_LEFT"
                  stylename="jmix-main-buttons">
                <newWindowButton id="newWindowButton"
                                 icon="TH_LARGE"
                                 description="msg://newWindowBtnDescription"/>
                <logoutButton id="logoutButton"
                              description="msg://logoutBtnDescription"
                              icon="SIGN_OUT"/>
            </hbox>
        </hbox>
        <hbox id="workAreaBox" expand="workArea" stylename="jmix-workarea" width="100%">
            <drawer id="leftDrawer" expandOnHover="true">
                <tree id="sideMenuTree"></tree>
            </drawer>
            <workArea id="workArea"
                      height="100%">
                <initialLayout margin="true"
                               spacing="true">
                </initialLayout>
            </workArea>
        </hbox>
        
    </layout>
</window>
1 个赞
#6

嗯，好的，第一次使用，我先消化一下，后续有问题再向您请教。
非常感谢哈~

2 个赞