monster.ui.generateAppLayout()

Syntax

monster.ui.generateAppLayout(thisArg, args);

Parameters

thisArgs: Object (mandatory)

The context of the app invoking the helper.

args: Object (mandatory)

Customize application type and menus settings with the following object properties:

  • appType: default|fullscreen|docked String (optional, default: default) - define wrapper behavior
  • forceNavbar: Boolean (optional, default: false) - render navbar even when only one tab exists
  • menus: Array (mandatory) of Objects
    • pull: left|right String (optional, default: left) - floating direction
    • tabs: Array (mandatory) of Objects
      • text: String (mandatory if more than on item in tabs) - tab menu label
      • callback: Function (mandatory if no menus property) - callback on click
      • onClick: Function (optional) - execute before callback
      • menus: Array (optional) of Objects - same structure as parent menus

Description

The monster.ui.generateAppLayout() method generates a consistent markup to wrap the content of your Monster app. It also generates the navbar menu of the app and handles tab clicks and animations. The goal of this method is to empower developers by giving them the basics (app navbar, tabs handling) so they can just an start coding the core of their app.

The markup generated will looks like this:

<div id="{appName}_app_container" class="app-layout">
    <div class="app-header">
        <div class="app-navbar-bg">
            <div class="app-navbar-wrapper">
                <nav class="app-navbar monster-navbar">
                    /* app navbar */
                </nav>
            </div>
        </div>
        <div class="app-subnav-bg">
            <div class="app-subnav-wrapper">
                <nav class="app-subnav monster-navbar">
                    /* app subnav */
                </nav>
            </div>
        </div>
    </div>
    <div class="app-content-wrapper">
        /* app content */
    </div>
</div>

The monster-navbar contains the navbar and subnav of the application, depending on the options passed to the method.

Customization

appType

An app can have three different types: default, fullscreen and docked. Those types will only impact the markup and styling of the generated layout.

default

Maximum width of 1280px with 20px of on each sides to keep it from hitting the sides on smaller screens.

fullscreen

Takes the full width of the window minus the 20px of padding on each side.

docked

No margin or padding around the wrapper, the content will be right next to the topbar and take full size of the window.

Examples

Generate layout with navbar and menus

Layout with navbar and multiple menus

monster.ui.generateAppLayout(this, {
    menus: [
        {
            tabs: [
                {
                    text: 'Home',
                    callback: function() {}
                },
                {
                    text: 'List',
                    callback: function() {}
                }
            ]
        },
        {
            tabs: [
                {
                    text: 'Settings',
                    callback: function() {}
                }
            ]
        },
        {
            tabs: [
                {
                    text: 'Q&A',
                    callback: function() {}
                },
                {
                    text: 'Support',
                    callback: function() {}
                }
            ]
        }
    ]
});

The concept of multiple menus is simply used to group tabs together with a separator between them.

Generate layout with navbar and sub-menus

Layout with navbar and sub-menus

monster.ui.generateAppLayout(this, {
    menus: [
        {
            tabs: [
                {
                    text: 'Settings',
                    menus: [
                        {
                            tabs: [
                                {
                                    text: 'Profile',
                                    callback: function() {}
                                },
                                {
                                    text: 'Account',
                                    callback: function() {}
                                },
                                {
                                    text: 'Emails',
                                    callback: function() {}
                                }
                            ]
                        },
                        {
                            tabs: [
                                {
                                    text: 'Billing',
                                    callback: function() {}
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            tabs: [
                {
                    text: 'Q&A',
                    callback: function() {}
                },
                {
                    text: 'Support',
                    callback: function() {}
                }
            ]
        }
    ]
});

When a menu has sub-menus, the callback of the first sub-menu will be used as its default callback.

Generate layout with navbar and menus pulled right

Layout with navbar and menus pulled right

monster.ui.generateAppLayout(this, {
    menus: [
        {
            pull: 'right',
            tabs: [
                {
                    text: 'Q&A',
                    callback: function() {}
                },
                {
                    text: 'Support',
                    callback: function() {}
                }
            ]
        }
    ]
});
Generate layout without navbar

Layout without navbar

monster.ui.generateAppLayout(this, {
    menus: [
        {
            tabs: [
                {
                    callback: function() {}
                }
            ]
        }
    ]
});

Since only one tab was defined, no navbar will be rendered.

Edit this page here