Guia de início rápido: usando um controle hub para layout e navegação

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Saiba como adicionar um controle Hub ao seu aplicativo da Windows Store em JavaScript.

Para obter ajuda sobre como escolher o melhor padrão de navegação para o seu aplicativo, veja Padrões de navegação.

Veja também os padrões Navegação simples e Navegação hierárquica em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

Pré-requisitos

Instruções

1. Crie um novo projeto usando o modelo de Aplicativo em Branco

Inicie o Microsoft Visual Studio Express 2013 para Windows.
Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.
No painel Instalado, expanda Modelos e JavaScript, e clique no tipo de modelo Aplicativo da Windows Store. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.
No painel central, selecione o modelo de projeto Aplicativo em Branco.
Na caixa de texto Nome, digite Demonstração do hub.
Clique em OK para criar o projeto.

2. Adicione a definição de hub ao projeto.

Defina um controle Hub declarativamente em uma página HTML ou em tempo de execução usando o JavaScript carregado com a página. Este exemplo cria o hub de modo declarativo na marcação HTML.

Abra default.html e insira o HTML a seguir no elemento body. O hub deve ser um filho direto do elemento body. É recomendável colocar os comandos globais antes dos comandos contextuais no DOM (Document Object Model) para obter o melhor layout quando os usuários redimensionam seu aplicativo.

Este exemplo adiciona um hub de forma declarativa com três objetos HubSection, sendo que o segundo objeto HubSection é a primeira seção visível no Hub. Use os estilos padrão ou grave suas CSSs (Folhas de Estilos em Cascata) ) dos controles Hub e HubSection.


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. Adicionar código para manipular eventos de Hub

Dois dos objetos HubSection nesse exemplo têm cabeçalhos dinâmicos: quando clicados, eles acionam o evento Hub.onheaderinvoked, por padrão. Para configurar cabeçalhos dinâmicos ou estáticos, use a propriedade HubSection.isHeaderStatic, que, por padrão, está definida como false.

No manipulador de eventos Hub.onheaderinvoked, o objeto HubSection ou o índice do objeto HubSection invocado pode ser extraído dos argumentos do evento (o índice se baseia em zero).

O exemplo a seguir adiciona um manipulador ao evento Hub.onheaderinvoked. O manipulador obtém o índice do HubSection invocado e define o valor Hub.sectionOnScreen .

No Gerenciador de Soluções, abra default.js na pasta js.

No arquivo default.js, substitua o código existente por este código.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

Configure o ambiente de tempo real como Simulador e pressione F5 para executar o aplicativo.
Altere a resolução da janela do simulador, para que a última seção de hub fique parcialmente fora da tela quando a página de hub se estender para a esquerda.
Clique no cabeçalho da última seção parcialmente visível, no hub, para estender a página de hub e, assim, tornar visível toda a seção de hub.

4. Navegando em um aplicativo de hub

Os aplicativos de hub seguem o que se chama de um padrão de navegação hierárquica. Para saber mais sobre experiências do usuário de navegação em aplicativos da Windows Store, veja Padrões de navegação.

Em aplicativos que incluem um conjunto grande de conteúdo de conteúdo ou muitas seções distintas de conteúdo que um usuário pode explorar, você certamente vai querer fornecer uma maneira de os usuários navegarem rapidamente de volta, assim como navegaram para frente. Títulos de páginas e seções em um aplicativo de hub podem hospedar controles BackButton. Cada página pode hospedar um botão voltar, que permanecerá oculto até você navegar para essa página partindo de uma outra, quando então o botão voltar se tornará visível na página. O controle BackButton pode ser criado de modo declarativo no HTML da página ou em tempo de execução usando JavaScript.

O controle BackButton não exige a realização de muito trabalho. Na verdade, a maior parte do código associado à funcionalidade de navegação do botão voltar é compilada na plataforma WinJS (Biblioteca do Windows para JavaScript). Você só precisa declarar o controle na sua marcação HTML, como mostrado aqui.

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

Sem a estilização, o controle BackButton é exibido em um bloco separado, acima do título da página. Para obter o estilo do Windows em que o botão voltar aparece alinhado ao título, adicione alguma CSS personalizada ao projeto. Especificamente, é preciso criar uma grade no elemento pai (a marca <section> ), que organiza os dois elementos lado a lado.

Em default.css (na pasta css), adicione o seguinte código de CSS para ajustar o layout do controle BackButton e do título nas páginas.

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

Resumo

Neste guia de início rápido, você adicionou um controle Hub com três objetos HubSection. Adicionou também uma função de manipulador simples ao evento Hub.onheaderinvoked.

E ainda adicionou um controle BackButton a cada página do aplicativo.