Main menu configuration

This is an overview how to create and customize main menu for TG-based application.

WebUiConfig is the only place what take responsibility of creation main menu view, adding new modules as well as custom centres and masers for each of them. In the early beginning of any project, generated using Archetype, there is only one User / Personnel module with few items. WebUiConfig.initConfiguration is the exact place where all magic happens. Let's have a look on it.

 @Override
    public void initConfiguration() {
        super.initConfiguration();

        final IWebUiBuilder builder = configApp();
        builder.setDateFormat("DD/MM/YYYY").setTimeFormat("HH:mm").setTimeWithMillisFormat("HH:mm:ss")
        // Minimum tablet width defines the boundary below which mobile layout takes place.
        // For example for Xiaomi Redmi 4x has official screen size of 1280x640,
        // still its viewport sizes is twice lesser: 640 in landscape orientation and 360 in portrait orientation.
        // When calculating reasonable transition tablet->mobile we need to consider "real" viewport sizes instead of physical pixel sizes (http://viewportsizes.com).
        .setMinTabletWidth(600);

        // Personnel
        final PersonWebUiConfig personWebUiConfig = PersonWebUiConfig.register(injector(), builder);
        final UserWebUiConfig userWebUiConfig = new UserWebUiConfig(injector());
        final UserRoleWebUiConfig userRoleWebUiConfig = new UserRoleWebUiConfig(injector());

        // Configure application web resources such as masters and centres
        configApp()
        .addMaster(userWebUiConfig.master)
        .addMaster(userWebUiConfig.rolesUpdater)
        .addMaster(userRoleWebUiConfig.master)
        .addMaster(userRoleWebUiConfig.tokensUpdater)
        // user/personnel module
        .addCentre(userWebUiConfig.centre)
        .addCentre(userRoleWebUiConfig.centre);


        ...

In the beginning it is required to register specific WebUiConfig for all types. In the example above, it is shown how to do that in two ways: final PersonWebUiConfig personWebUiConfig = PersonWebUiConfig.register(injector(), builder); — here all centres and masters what were created in PersonWebUiConfig are registered in one line. In case with UserWebUiConfig and UserRoleWebUiConfig, firstly they were created and than registered separately all centres and masters.

Next step is to add modules and menu items.

        ...
        
        // Configure application menu
        configDesktopMainMenu().
            addModule("Users / Personnel").
                description("Provides functionality for managing application security and personnel data.").
                icon("mainMenu:help").
                detailIcon("mainMenu:help").
                bgColor("#FFE680").
                captionBgColor("#FFD42A").menu()
                .addMenuItem("Personnel").description("Personnel related data")
                    .addMenuItem("Personnel").description("Personnel Centre").centre(personWebUiConfig.centre).done()
                .done()
                .addMenuItem("Users").description("Users related data")
                    .addMenuItem("Users").description("User centre").centre(userWebUiConfig.centre).done()
                    .addMenuItem("User Roles").description("User roles centre").centre(userRoleWebUiConfig.centre).done()
                .done()
            .done().done()
        ...
    }

After that we can add as many modules as it is required in the same way as above.

In the end, when all modules and menu items were added it is required to specify layouts. It this case is only one row and one column as there is only one module.

        ...
       
        .setLayoutFor(Device.DESKTOP, null, "[[[]]]")
        .setLayoutFor(Device.TABLET, null, "[[[]]]")
        .setLayoutFor(Device.MOBILE, null, "[[[]]]")
        .minCellWidth(100).minCellHeight(148).done();
    }

Let's review layout configuration when there are four modules. If we simply want to have two rows and two column we can configure menu like that.

        ...
       
        .setLayoutFor(Device.DESKTOP, null, "[[[], []], [[], []]]")
        .setLayoutFor(Device.TABLET, null, "[[[], []], [[], []]]")
        .setLayoutFor(Device.MOBILE, null, "[[[]], [[]], [[]], [[]]]")
    }

And here is the result:

Let's try some other modules allocation, for example:

        ...
       
        .setLayoutFor(Device.DESKTOP, null, "[[[{\"rowspan\": 2,\"colspan\": 2}], [{\"colspan\": 2}]],[[], []]]")
        .setLayoutFor(Device.TABLET, null, "[[[], []], [[], []]]")
        .setLayoutFor(Device.MOBILE, null, "[[[]], [[]], [[]], [[]]]")
    }

And the result looks like that: