Initializing application¶

The on_page_loaded event is the first event triggered by an application on the client.

The new project uses on_page_loaded event handler to dynamically build the application’s main menu and attach the on click event handler to menu items using JQuery.

function on_page_loaded(task) {

    $("title").text(task.item_caption);
    $("#title").text(task.item_caption);

    if (task.safe_mode) {
        $("#user-info").text(task.user_info.role_name + ' ' + task.user_info.user_name);
        $('#log-out')
        .show()
        .click(function(e) {
            e.preventDefault();
            task.logout();
        });
    }

    if (task.full_width) {
        $('#container').removeClass('container').addClass('container-fluid');
    }
    $('#container').show();

    task.create_menu($("#menu"), $("#content"), {view_first: true});

}

This event handler uses JQuery to select elements from the index.html to set their attributes and assign events.

<div id="container" class="container" style="display: none">
    <div class="row-fluid">
        <div class="span6">
            <h3 id="title" class="muted"></h3>
        </div>
        <div class="span6 logging-info">
            <span id="user-info"></span>
            <a id="log-out" href="#" style="display: none">Log out</a>
        </div>
    </div>
    <div class="container">
        <div id="taskmenu" class="navbar">
            <div class="navbar-inner">
                <ul id="menu" class="nav">
                </ul>
            </div>
        </div>
    </div>
    <div id="content">
    </div>
</div>

Finally, the create_menu method of the task is called to dynamically create the main project menu.