Inicio rápido: usar un control de navegación contralizada para el diseño y la navegación

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Aprende cómo agregar un control Hub a la aplicación de la Tienda Windows con JavaScript.

Para ayudarte a elegir el mejor patrón de navegación para tu aplicación, consulta Patrones de navegación.

Consulta también los patrones de navegación plana y navegación jerárquica como parte de nuestra serie Características de aplicaciones, de principio a fin.

Requisitos previos

Instrucciones

1. Crear un nuevo proyecto usando la plantilla Aplicación vacía

Abre Microsoft Visual Studio Express 2013 para Windows.
En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.
En el panel Instalado, expande Plantillas y JavaScript, y haz clic en el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto disponibles para JavaScript se muestran en panel central del cuadro de diálogo.
En el panel central, selecciona la plantilla de proyecto Aplicación vacía.
En el cuadro de texto Nombre, escribe Hub demo.
Haz clic en Aceptar para crear el proyecto.

2. Agregar la definición del concentrador (hub) al proyecto

Define un control Hub ya sea de manera declarativa en una página HTML o en tiempo de ejecución, mediante JavaScript cargado con la página. Este ejemplo crea el concentrador de manera declarativa en el marcado HTML.

Abre default.html e inserta el siguiente HTML en el elemento body. El concentrador debería ser un elemento secundario directo del elemento body. Sería una buena idea colocar comandos globales antes de los comandos contextuales en el Document Object Model (DOM) para obtener el mejor diseño cuando los usuarios cambian el tamaño de la aplicación.

Este ejemplo agrega un concentrador de manera declarativa con tres objetos HubSection, donde el segundo HubSection es la primera versión visible en Hub. Usa los estilos predeterminados o escribe tus propias hojas de estilo CSS para los controles Hub y 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. Agregar código para administrar eventos de concentrador

Dos de los objetos HubSection de este ejemplo tienen encabezados dinámicos: cuando se hace clic en ellos generan el evento Hub.onheaderinvoked de manera predeterminada. Para establecer encabezados dinámicos o estáticos, usa la propiedad HubSection.isHeaderStatic, que se establece en false de manera predeterminada.

En el controlador de eventos Hub.onheaderinvoked, el objeto HubSection o el índice del objeto HubSection invocado pueden extraerse de los argumentos del evento (el índice está basado en cero).

El siguiente ejemplo agrega un controlador al evento Hub.onheaderinvoked. El controlador obtiene el índice del HubSection y establece el valor de Hub.sectionOnScreen.

En el Explorador de soluciones, abre default.js desde la carpeta js.

En el archivo default.js, reemplaza el 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();
})();

Establece el entorno en tiempo de ejecución en Simulador y presiona F5 para ejecutar la aplicación.
Cambia la resolución de la ventana del simulador para que la última sección del concentrador esté parcialmente fuera de pantalla cuando la página de concentrador se desplace lateralmente hacia la izquierda.
Haz clic en el encabezado de la última sección visible de forma parcial en el concentrador, para desplazar lateralmente la página de concentrador y la sección pueda visualizarse de forma total.

4. Navegar en una aplicación de concentrador

Las aplicaciones de concentrador siguen lo denominado patrón de navegación jerárquico. Para obtener más información sobre las experiencias de usuario relacionadas con la navegación en aplicaciones de la Tienda Windows, consulta patrones de navegación.

En aplicaciones que incluyen una gran colección de contenido o varias secciones distintas de contenido para que el usuario explore, por lo general, se desea proporcionar una manera en que los usuarios puedan navegar con rapidez hacia atrás por donde avanzaron. Los títulos de las secciones y páginas de una aplicación de concentrador pueden hospedar controles BackButton. Cada página puede hospedar un botón Atrás que permanece oculto hasta que navegues hacia esa página desde otra, con lo que el botón Atrás se hace visible en la página. El control BackButton puede crearse de manera declarativa en el HTML de la página o en tiempo de ejecución mediante JavaScript.

El control BackButton no requiere demasiado trabajo de tu parte. De hecho, la mayor parte del código asociado con las funciones de navegación del botón Atrás se incorpora en la Biblioteca de Windows para JavaScript. Solo necesitas declarar el control en el marcado HTML como se muestra aquí.

<!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>

Sin aplicación de estilos, el control BackButton se muestra en un bloque independiente arriba del título de página. Para lograr el estilo Windows donde el botón Atrás aparece alineado con el título, debes agregar algunas CSS personalizadas en tu proyecto. Concretamente, necesitas crear una cuadrícula en el elemento primario (la etiqueta <section>) que disponga los dos elementos uno al lado de otro.

En default.css (en la carpeta css), agrega el siguiente código CSS para ajustar el diseño del control BackButton y título en las 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;
    }

Resumen

En este inicio rápido, has agregado un control Hub con tres objetos HubSection. También has agregado una función simple de controlador al evento Hub.onheaderinvoked.

Y has agregado un control BackButton en cada página de la aplicación.