Inicializando a aplicação

O evento on_page_loaded é o primeiro evento acionado por uma aplicação no cliente.

O novo projeto utiliza o manipulador de evento on_page_loaded para construir dinamicamente o menu principal da aplicação e anexar o manipulador do evento de clique aos itens do menu utilizando JQuery.

function on_page_loaded(task) {

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

    if (task.small_font) {
        $('html').css('font-size', '14px');
    }
    if (task.full_width) {
        $('#container').removeClass('container').addClass('container-fluid');
    }

    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();
        });
    }

    $('#container').show();

    task.create_menu($("#menu"), $("#content"), {
        splash_screen: '<h1 class="text-center">Jam.py Demo Application</h1>',
        view_first: true
    });

Este manipulador de evento utiliza JQuery para selecionar elementos do index.html para definir seus atributos e atribuir eventos.

<div id="container" class="container" style="display: none">
    <nav class="navbar navbar-expand-lg bg-light mb-2">
        <div class="container-fluid">
            <span id="app-title" class="navbar-brand mb-0 h1"></span>
            <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul id="menu" class="navbar-nav me-auto mb-2 mb-lg-0">
            </ul>
            <div class="d-flex pe-2 justify-content-end">
                <span id="user-info" class="navbar-text p-2"></span>
                <button id="log-out" class="btn btn-secondary" type="button" style="display: none"><i class="bi bi-box-arrow-right"></i></button>
            </div>
        </div>
      </div>
    </nav>
    <div id="content">
    </div>
</div>

Por fim, o método create_menu da tarefa é chamado para criar dinamicamente o menu principal do projeto.