Inicio rápido: Agregar una barra de navegación (NavBar)

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 a agregar una "barra de navegación", también denominada "barra de la aplicación superior") a tu aplicación de la Tienda Windows mediante JavaScript. La Biblioteca de Windows para JavaScript (WinJS) incluye controles NavBar, NavBarCommand y NavBarContainer para ayudar a crear una aplicación con navegación de una página.

Nota Los controles NavBar, NavBarCommand y NavBarContainer son nuevos en Windows 8.1. En Windows 8, usa el control AppBar y la propiedad placement para proporcionar una barra de navegación.

La mayoría de las plantillas de Microsoft Visual Studio 2013 para aplicaciones de la Tienda Windows implementa el marco de navegación por ti. Estas plantillas, incluida la plantilla de elemento Control de páginas (consulta Agregar controles de página), incluyen el control BackButton que permite proporcionar al usuario la navegación hacia atrás.

Nota Las aplicaciones de la Tienda Windows, por lo general, usan uno de dos patrones de navegación (plano y jerárquico). Recomendamos no usar el objeto BackButton en aplicaciones con navegación plana. Para obtener más información, consulta Patrones de navegación.

El ejemplo que planteamos aquí usa la plantilla Aplicación vacía de Microsoft Visual Studio. Si usas los estilos predeterminados y el marcado, se aplicará el estilo adecuado a los comandos que coloques en el control NavBar. Esto incluye gráficos móviles de la imagen (sprite) y glifos de fuentes para los iconos y comandos.

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

Inicia Visual Studio 2013.

Nota Cuando ejecutas Visual Studio por primera vez, te pide que obtengas una licencia de este tipo.
Elige Archivo > Nuevo proyecto o haz clic en Nuevo proyecto en la pestaña Página de inicio. Se abre el cuadro de diálogo Nuevo proyecto.
En el panel Instalado, expande Plantillas y JavaScript, y selecciona el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto instaladas 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 un nombre para el proyecto. Los ejemplos de este tema usan Nav bar demo.
Haz clic en Aceptar para crear el proyecto.

2. Agrega la definición de la barra de navegación al proyecto.

Puedes definir la barra de navegación de manera declarativa en una página HTML o en tiempo de ejecución en un archivo JavaScript cargado con la página. Este ejemplo crea la barra de navegación de manera declarativa en el marcado HTML.

Abre default.html e inserta el siguiente HTML en el elemento body. La barra de navegación debería ser un elemento secundario directo del elemento body.

Aquí declaramos un control NavBar que contiene un NavBarContainer con dos controles NavBarCommand.

Nota Mientras sea válido, te recomendamos que no agregues controles NavBarCommand como elementos secundarios inmediatos de NavBar. Tanto la distribución de botones como la accesibilidad del teclado se ven afectadas.


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. Agregar el código del controlador de navegación

Los objetos NavBarCommand declarados en el marcado generan de forma inherente eventos de navegación (Navigation.onnavigating y Navigation.onnavigated), por lo que no es necesario agregar ningún código de controlador a los objetos NavBarCommand. En lugar de ello, debes agregar código de controlador a los eventos Navigation.onnavigating o Navigation.onnavigated del archivo default.js asociado con el archivo default.html.

El ejemplo agrega un controlador al evento Navigation.onnavigated. El controlador obtiene la dirección URL de la ubicación a la que se está navegando a partir del objeto del evento (definido en la propiedad location del atributo data-win-options de NavBarCommand). El controlador vacía el host de contenido (control de página) del contenido existente y representa la nueva página en el host.

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

En default.js, reemplaza el código predeterminado por este.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    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.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

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

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. Agregar dos páginas para navegar entre ellas

Puedes agregar estas páginas manualmente o mediante la plantilla de elemento Control de páginas de Visual Studio, que proporciona todo el código JavaScript y marcado necesario.

Dn376409.wedge(es-es,WIN.10).gif Agregar manualmente páginas nuevas al proyecto

En Explorador de soluciones, haz clic con el botón secundario en el nombre del proyecto (Nav bar demo) y elige Agregar, Nueva carpeta. Asigna el nombre "pages" a la nueva carpeta.
Haz clic con el botón secundario en la carpeta pages que acabas de crear y elige Agregar, Nueva carpeta. Asigna el nombre "home" a la nueva carpeta.
Crea una segunda carpeta en pages. Asigna el nombre "page2" a esta carpeta.
Haz clic con el botón secundario en la carpeta home y elige Agregar, Nuevo archivo HTML. En el cuadro de diálogo Agregar nuevo elemento, asigna el nombre "home.html" al nuevo archivo y elige Agregar.

Reemplaza el HTML predeterminado por este código.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
Repite el paso anterior para la carpeta page2. Asigna el nombre "page2.html" al archivo.

Reemplaza el HTML predeterminado por este código.
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

También puedes usar las plantillas de elemento de JavaScript para aplicaciones de la Tienda Windows en Visual Studio.

Dn376409.wedge(es-es,WIN.10).gif Usa la plantilla de elemento Control de páginas para agregar nuevas páginas al proyecto

Crea la carpeta pages con las subcarpetas home y page2 que se describieron antes.
Haz clic con el botón secundario en la carpeta home y selecciona Agregar > Nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.
Selecciona Control de páginas en la lista. En el cuadro de texto Nombre, escribe "home.html".
Haz clic en Agregar. Aparece un nuevo objeto PageControl en el Explorador de soluciones.

El nuevo PageControl incluye tres archivos: home.css, home.html y home.js.

Nota Los archivos HTML agregados de esta forma incluyen código para el control BackButton. Como explicamos antes, recomendamos no usar BackButton con el patrón de navegación plano. Así puedes eliminar este código de manera segura. Para obtener más información, consulta Patrones de navegación.
Haz clic con el botón secundario en la carpeta page2 y selecciona Agregar > Nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.
Selecciona Control de páginas en la lista. En el cuadro de texto Nombre, escribe "page2.html".
Haz clic en Agregar. Aparece un nuevo objeto PageControl en el Explorador de soluciones.

El nuevo PageControl tiene tres archivos:page2.css, page2.html y page2.js.

5. Probar la aplicación

Presiona F5 para ejecutar la aplicación. La aplicación muestra la página Home.
Mientras se ejecuta la aplicación, haz clic con el botón secundario en cualquier punto de la aplicación para abrir la barra de navegación y elige Page2.

El encabezado Page2 aparece en el control de página de la aplicación.
Haz clic con el botón secundario para ver la barra de navegación y después elige Home.

La página Home aparece en el control de página de la aplicación.

Resumen y siguientes pasos

En este inicio rápido, has agregado un NavBar con un NavBarContainer y cuatro objetos NavBarCommand a tu aplicación. También has agregado una función simple de controlador al evento Navigation.onnavigated.

Para ver un ejemplo de diseño y navegación jerárquica más complejo, consulta el siguiente tutorial en el control Hub.

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