Parte 3: Navegación y objetos de PageControl (HTML)

Parte 3: Navegación y objetos de PageControl (HTML)

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

La aplicación "Hello, world!" que creaste en los tutoriales anteriores solamente contiene una única página de contenido. La mayoría de las aplicaciones reales contienen varias páginas.

Hay varios patrones de navegación que se pueden usar en una aplicación de la Tienda Windows. Los patrones de navegación te ayudarán a elegir el mejor patrón de navegación para tu aplicación.

Nota  

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

 

En este tutorial, copias el código de tu aplicación "Hello, world!" en una nueva aplicación que usa la plantilla Navigation App y después agregas una página adicional.

Aprende a:

  • Usar la plantilla de proyecto Navigation App para crear una aplicación que contiene múltiples páginas de contenido
  • Usar objetos de PageControl para separar tu código en unidades modulares
  • Usar el modelo de navegación de una página para navegar entre páginas
  • Usar una NavBar para proporcionar comandos de navegación
Sugerencia  

Si quieres pasar por alto el tutorial e ir directamente al código, consulta Introducción a JavaScript: código completo de la serie de tutoriales.

 

Antes de comenzar...

Acerca de la navegación en aplicaciones de la Tienda Windows

Casi todos los sitios web proporcionan cierta forma de navegación, generalmente en la forma de hipervínculos a los que puedes hacer clic para ir a una página diferente. Cada página tiene su propio conjunto de datos y funciones de JavaScript, un nuevo conjunto de HTML para mostrar, información de estilo, etc. Este modelo de navegación se conoce como navegación multipágina. Este diseño es bueno para la mayoría de los sitios web, pero puede significar un problema para una aplicación porque hace que sea difícil mantener un estado entre las diferentes páginas.

Otro modelo es la navegación de una página, en el que se usa una sola página para la aplicación donde se cargan datos adicionales según sea necesario. Aun así, puedes dividir la aplicación en varios archivos; pero en lugar de desplazarse de página a página, la aplicación carga otros documentos en la página principal. Dado que la página principal de la aplicación nunca se descarga, los scripts tampoco lo hacen y eso facilita la administración del estado, las transiciones y las animaciones. Para aplicaciones de la Tienda Windows, recomendamos usar el modelo de navegación de una página.

Para ayudar a crear aplicaciones que usan el modelo de navegación de una página, la biblioteca de Windows para JavaScript proporciona el objeto WinJS.UI.Pages.PageControl. También está la plantilla de proyectoNavigation App, que proporciona cierta infraestructura de navegación adicional. En el siguiente paso, usas esta plantilla para crear un nuevo proyecto.

Paso 1: Crear una nueva aplicación de navegación en Visual Studio

Vamos a crear una nueva aplicación llamada HelloWorldWithPages que usa la plantilla Navigation App. Pasos a seguir:

  1. Inicia Microsoft Visual Studio Express 2013 para Windows.
  2. En el menú Archivo, selecciona Nuevo proyecto.

    Se abre el cuadro de diálogo Nuevo proyecto. El panel izquierdo del cuadro de diálogo te deja elegir el tipo de plantillas que mostrar.

  3. En el panel izquierdo, expande Instalado, después expande Plantillas, después JavaScript y selecciona el tipo de plantilla Tienda Windows. El panel central del cuadro de diálogo muestra una lista de plantillas de proyecto para JavaScript.

    Para este tutorial, usamos la plantilla Navigation App.

  4. En el panel central, selecciona la plantilla Navigation App.
  5. En el cuadro de texto Name, escribe "HelloWorldWithPages".
  6. Desactiva la casilla Crear directorio para la solución.

    La ventana Nuevo proyecto

  7. Haz clic en Aceptar para crear el proyecto.

    Visual Studio crea tu proyecto y lo muestra en el Explorador de soluciones.

    El Explorador de soluciones para el proyecto HelloWorldWithPages

Ten en cuenta que tu nueva Navigation App contiene algunos archivos más que tu aplicación "Hello, world!". Echemos un vistazo a estos archivos nuevos:

  • /pages/home/home.css, /pages/home/home.html y /pages/home/home.js

    Estas tres páginas definen un PageControl para la página principal de la aplicación. Un PageControl se compone de un archivo HTML, un archivo JavaScript y un archivo CSS. Un PageControl es una unidad modular de HTML, CSS y JavaScript a la que se puede navegar (como una página HTML) o que se puede usar como un control personalizado. Puedes usar objetos PageControl para dividir una aplicación grande en partes más pequeñas y manejables.

    Los objetos PageControl admiten varios métodos, de manera que usarlos en tu aplicación es más sencillo que usar una colección de páginas HTML, CSS y JavaScript sueltas. Aprenderás más acerca de estos métodos en otro paso más adelante.

  • /js/navigator.js

    Este archivo proporciona la clase auxiliar PageControlNavigator que puedes usar para mostrar objetos PageControl y navegar entre ellos. No lo necesitas para mostrar un PageControl, pero puede facilitar su uso.

Echemos un vistazo a la página default.html de tu nueva aplicación:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorldWithPages</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorldWithPages references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>

    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" 
            type="button"></button>
    </div> -->
</body>
</html>

El body del archivo contiene dos elementos: un elemento div para el PageControlNavigator y un div comentado para una AppBar. Ignoremos la app bar por ahora y analicemos más atentamente el primer elemento div.



    <div id="contenthost" data-win-control="Application.PageControlNavigator" 
        data-win-options="{home: '/pages/home/home.html'}"></div>
 

Este elemento div crea un control PageControlNavigator. El PageControlNavigator carga y muestra nuestra página principal por nosotros. Usas el atributo data-win-options para informarle qué página debe cargarse (/pages/home/home.html).

Adelante. Ejecuta la aplicación.

La aplicación HelloWorldWithPages

Aunque esto no es evidente, la aplicación en realidad muestra tanto default.html como home.html. Es similar a usar un iframe para mostrar una página HTML dentro de otra página HTML.

El PageControl home.html se muestra desde dentro de la página default.html

Paso 2: Copiar tu contenido HTML y CSS desde tu aplicación "Hello, world!"

Nuestra nueva aplicación tiene dos páginas HTML: default.html y home.html. ¿Dónde pones tu contenido?

  • Usa default.html para la interfaz de usuario que siempre debe estar presente, sin importar qué pagina esté mostrando la aplicación. Por ejemplo, puedes usar default.html para hospedar una barra de navegación.

  • Usa páginas, como home.html, para el contenido que confirma una pantalla individual de la aplicación.

Abramos home.html y echemos un vistazo a parte del marcado que contiene.

  • Tiene un elemento head que contiene referencias al código de WinJS para JavaScript y las hojas de estilo. También contiene referencias a la hoja de estilo predeterminada de la aplicación (default.css) y a otros archivos que conforman la página principal (home.css y home.js).

    
    
    <head>
        <meta charset="utf-8" />
        <title>homePage</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/home/home.css" rel="stylesheet" />
        <script src="/pages/home/home.js"></script>
    </head>
    
    
    
  • Tiene un área de encabezado de página que incluye un BackButton para navegar hacia atrás y un área de título. La plantilla contiene código que habilita automáticamente el botón Atrás cuando puedes navegar hacia atrás. El botón no estará visible hasta que agreguemos una segunda página y naveguemos hasta allí.

    
    
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
    
    
    
  • Tiene una sección para tu contenido principal.

    
    
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
    
    
    

Agreguemos el contenido desde nuestra aplicación ""Hello, world!"" en la página principal (home.html) de nuestro nuevo proyecto HelloWorldWithPages.

JJ663505.wedge(es-es,WIN.10).gifPara agregar contenido HTML y CSS desde tu aplicación "Hello, world!"

  1. Copia tu contenido HTML final desde el archivo default.html de tu aplicación "Hello, world!" en la sección de contenido principal de /pages/home/home.html de tu nuevo proyecto.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
    
                <!-- Copied from "Hello, world" -->
                <h1 class="headerClass">Hello, world!</h1>
                <div class="mainContent">
                    <p>What's your name?</p>
                    <input id="nameInput" type="text" />
                    <button id="helloButton">Say "Hello"</button>
                    <div id="greetingOutput"></div>
                    <label for="ratingControlDiv">
                        Rate this greeting: 
                    </label>
                    <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                    </div>
                    <div id="ratingOutput"></div>
                </div>
            </section>
        </div>
    </body>
    
    
  2. Mueve el contenido del título que copiaste al elemento h1 que home.html te proporciona. Dado que home.html ya contiene una sección de contenido principal, quita el elemento "mainContent" div que copiaste (pero deja su contenido).
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to HelloWorldWithPages!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
            </section>
        </div>
    </body>
    
    
  3. Cambia a la hoja de estilos clara. Reemplaza la referencia a la hoja de estilos oscura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Con esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  4. Cada PageControl tiene su propio archivo de Hojas de estilo CSS (CSS).

    Copia el estilo greetingOutput desde el archivo default.css que creaste en Parte 1: Crear una aplicación "Hello, world!" en home.css.

    
    .homepage section[role=main] {
        margin-left: 120px;
        margin-right: 120px;
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  5. Ejecuta la aplicación.

    La aplicación HelloWorldWithPages con tu contenido de la aplicación Hello, world!

    Has recreado el contenido de tu aplicación "Hello, world!" original. Después agregamos interactividad copiando tus controladores de eventos de "Hello, world!".

Paso 3: Copiar tus controladores de eventos

Cada PageControl tiene su propio archivo JavaScript. Echa un vistazo al archivo JavaScript que Visual Studio creó para nuestro "inicio" PageControl, home.js:


(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
        }
    });
})();

Este archivo tiene una apariencia un poco diferente de la de tu archivo default.js. Por un lado, es mucho más corto. Esto se debe a que default.js ya controla la lógica de la aplicación clave y la activación. Cada PageControl solamente necesita contener lógica para la página en sí.

Una de las primeras líneas de código, una llamada a la función WinJS.UI.Page.define, crea el objeto PageControl. Esta función toma dos parámetros: el identificador URI de la página ("/pages/home/home.html" en este ejemplo) y un objeto que define los miembros de PageControl. Puedes agregar cualquier tipo de miembro que quieras. También puedes implementar un conjunto de miembros especiales, descritos por la interfaz de IPageControlMembers a la que automáticamente llama la aplicación cuando usas el PageControl.

El archivo home.js creado por la plantilla define uno de estos miembros especiales, la función ready. La función ready se llama después de que se inicia y representa tu página. Este es un buen lugar para adjuntar controladores de eventos.

Probablemente notes que el código no incluye una llamada a WinJS.UI.processAll. Esto se debe a que PageControl lo llama por ti automáticamente. En el momento en que se llama a la función ready, ya se llamó a WinJS.UI.processAll y este ya completó su procesamiento.

JJ663505.wedge(es-es,WIN.10).gifPara agregar tus controladores de eventos

  1. En Parte 1: Crear una aplicación "Hello, world!" y Parte 2: Administrar el ciclo de vida y el estado de tu aplicación, definiste tres controladores de eventos: buttonClickHandler, ratingChanged y nameInputChanged. Cópialos en tu archivo home.js y haz que sean miembros de tu PageControl. Agrégalos después de la función ready que la plantilla creó para ti.

    
        WinJS.UI.Pages.define("/pages/home/home.html", {
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
            },
    
            buttonClickHandler: function (eventInfo) {
    
                var userName = document.getElementById("nameInput").value;
                var greetingString = "Hello, " + userName + "!";
                document.getElementById("greetingOutput").innerText = greetingString;
    
                // Save the session data. 
                WinJS.Application.sessionState.greetingOutput = greetingString;
            },
    
            ratingChanged: function (eventInfo) {
    
                var ratingOutput = document.getElementById("ratingOutput");
                ratingOutput.innerText = eventInfo.detail.tentativeRating;
    
                // Store the rating for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["greetingRating"] = eventInfo.detail.tentativeRating;
            },
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            }
    
    
        });
    
    
  2. Ahora necesitamos adjuntar nuestros controladores de eventos. En las partes 1 y 2, creamos una función then para la Promise devuelta por WinJS.UI.processAll. Ahora es un poco más simple porque podemos usar la función ready para adjuntar nuestros controladores de eventos. Se llama a la función ready después de que PageControl haya llamado automáticamente a WinJS.UI.processAll por nosotros.

    Copia el código que se adjunta a tus controladores de eventos en la función ready en home.js.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
            },
    
    
  3. Ejecuta la aplicación. Cuando escribas un nombre, haz clic en el botón; muestra un saludo. Cuando calificas el saludo, muestra el valor de calificación numérica.

    La aplicación HelloWorldWithPages después de seleccionar una calificación

Paso 4: Restaurar el estado de la aplicación

Casi hemos recreado la funcionalidad que teníamos en nuestra aplicación "Hello, world!". Lo único que necesitamos hacer ahora es restaurar el estado de la aplicación cuando el usuario la inicia.

Probablemente recuerdes que teníamos dos tipos de estados de la aplicación por restaurar:

  • La calificación y el nombre de usuario Restauramos este estado sin importar cómo se apagó la aplicación.
  • El saludo personalizado. Solamente restauramos este estado si la aplicación se finalizó correctamente la última vez que se ejecutó.

JJ663505.wedge(es-es,WIN.10).gifPara restaurar el estado de la aplicación

  1. Copia el código desde la aplicación "Hello, world!" que restaura la calificación y el nombre de usuario. Agrega el código a la función ready en home.js.
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;
    
                // Register the event handler. 
                ratingControl.addEventListener("change", this.ratingChanged, false);
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", this.buttonClickHandler, false);
    
                // Retrieve the input element and register our
                // event handler.
                var nameInput = document.getElementById("nameInput");
                nameInput.addEventListener("change", this.nameInputChanged);
    
                // Restore app data. 
                var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
    
                // Restore the user name.
                var userName =
                    Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                if (userName) {
                    nameInput.value = userName;
                }
    
                // Restore the rating. 
                var greetingRating = roamingSettings.values["greetingRating"];
                if (greetingRating) {
                    ratingControl.userRating = greetingRating;
                    var ratingOutput = document.getElementById("ratingOutput");
                    ratingOutput.innerText = greetingRating;
                }
    
            },
    
    
    .
  2. Solamente queremos restaurar el saludo personalizado si la aplicación finalizó correctamente la última vez que se ejecutó. Por desgracia, nuestro PageControl no nos proporciona un modo integrado de comprobar el estado de ejecución previo de la aplicación: esa información se proporciona al controlador de eventos onactivated del archivo default.js. No obstante, existe una solución sencilla a este problema: solo hay que guardar el estado de ejecución previo de la aplicación en el objeto sessionState para que nuestro PageControl pueda acceder a él.
    1. En tu archivo default.js, agrega código al controlador onactivated para guardar el estado de ejecución previo. Guárdalo agregando una propiedad al objeto sessionState llamado previousExecutionState.
      
          app.addEventListener("activated", function (args) {
              if (args.detail.kind === activation.ActivationKind.launch) {
                  if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                      // TODO: This application has been newly launched. Initialize
                      // your application here.
                  } else {
                      // TODO: This application has been reactivated from suspension.
                      // Restore application state here.
                  }
      
                  // Save the previous execution state. 
                  WinJS.Application.sessionState.previousExecutionState = 
                      args.detail.previousExecutionState;
      
                  if (app.sessionState.history) {
                      nav.history = app.sessionState.history;
                  }
                  args.setPromise(WinJS.UI.processAll().then(function () {
                      if (nav.location) {
                          nav.history.current.initialPlaceholder = true;
                          return nav.navigate(nav.location, nav.state);
                      } else {
                          return nav.navigate(Application.navigator.home);
                      }
                  }));
              }
          });
      
      
    2. En el archivo home.js, agrega código al método ready que comprueba los datos de previousExecutionState. Si el estado de ejecución previo es terminated, restaura el saludo personalizado (puedes copiar el código que hace esto del archivo default.js en tu aplicación "Hello, world").
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
      

      Este es el método ready completo.

      
              // This function is called whenever a user navigates to this page. It
              // populates the page elements with the app's data.
              ready: function (element, options) {
                  // TODO: Initialize the page here.
      
                  // Retrieve the div that hosts the Rating control.
                  var ratingControlDiv = document.getElementById("ratingControlDiv");
      
                  // Retrieve the actual Rating control.
                  var ratingControl = ratingControlDiv.winControl;
      
                  // Register the event handler. 
                  ratingControl.addEventListener("change", this.ratingChanged, false);
      
                  // Retrieve the button and register our event handler. 
                  var helloButton = document.getElementById("helloButton");
                  helloButton.addEventListener("click", this.buttonClickHandler, false);
      
                  // Retrieve the input element and register our
                  // event handler.
                  var nameInput = document.getElementById("nameInput");
                  nameInput.addEventListener("change", this.nameInputChanged);
      
                  // Restore app data. 
                  var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
      
                  // Restore the user name.
                  var userName =
                      Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
                  if (userName) {
                      nameInput.value = userName;
                  }
      
                  // Restore the rating. 
                  var greetingRating = roamingSettings.values["greetingRating"];
                  if (greetingRating) {
                      ratingControl.userRating = greetingRating;
                      var ratingOutput = document.getElementById("ratingOutput");
                      ratingOutput.innerText = greetingRating;
                  }
      
                  // If the app was terminated last time it ran, restore the personalized
                  // greeting. 
                  if (
                      WinJS.Application.sessionState.previousExecutionState
                      === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                      var outputValue = WinJS.Application.sessionState.greetingOutput;
                      if (outputValue) {
                          var greetingOutput = document.getElementById("greetingOutput");
                          greetingOutput.innerText = outputValue;
                      }
      
                  }
      
              },
      
      
  3. Ejecuta la aplicación. Hemos duplicado la funcionalidad que teníamos en nuestra aplicación "Hello, world!" original.

Paso 5: Agregar otra página

La mayoría de las aplicaciones contienen varias páginas. Vamos a agregar otra página a nuestra aplicación. Debido a que estamos usando la plantilla Aplicación de navegación, es fácil agregar páginas adicionales.

JJ663505.wedge(es-es,WIN.10).gifPara agregar otra página

  1. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta pages y selecciona Agregar > Nueva carpeta. Aparece una nueva carpeta en el proyecto.
  2. Cambia el nombre de la carpeta por "page2".
  3. 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.
  4. Selecciona Control de páginas en la lista. En el cuadro de texto Nombre, escribe "page2.html".

  5. Haz clic en Agregar para añadir el PageControl. El nuevo PageControl aparece en el Explorador de soluciones.

    El proyecto HelloWorldWithPages

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

  6. En tu archivo page2.html, reemplaza la referencia a la hoja de estilos oscura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Con esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    

Has creado una página nueva. En el paso siguiente, aprenderás a navegar a ella.

Paso 6: Usar la función navegar para desplazarse entre páginas

Ahora, tenemos una segunda página pero no existe manera alguna en la que el usuario puede obtenerla. Actualicemos nuestra página home.html agregando un vínculo a page2.html.

JJ663505.wedge(es-es,WIN.10).gifPara navegar entre páginas

  1. Abre tu home.html y agrega un vínculo a page2.html.
    
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Hello, world!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
     
                <p>What's your name?</p>
                <input id="nameInput" type="text" />
                <button id="helloButton">Say "Hello"</button>
                <div id="greetingOutput"></div>
                <label for="ratingControlDiv">
                    Rate this greeting: 
                </label>
                <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
                </div>
                <div id="ratingOutput"></div>
    
                <!-- A hyperlink to page2.html. -->
                <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
            </section>
        </div>
    </body>
    
    
  2. Ejecuta la aplicación y haz clic en el vínculo. Parece funcionar: la aplicación muestra page2.html.

    El cuadro de diálogo Agregar nuevo elemento

No obstante, hay un problema: la aplicación realizó una navegación de nivel superior. En lugar de navegar de home.html a page2.html, navega de default.html a page2.html.

Realizar una navegación de nivel superior

Lo que quieres, en cambio, es reemplazar el contenido de home.html por page2.html.

Navegación recomendable a page2.html

Afortunadamente, el control PageControlNavigator facilita bastante realizar este tipo de navegación. El código de PageControlNavigator (en el archivo navigator.js de la aplicación) controla el evento WinJS.Navigation.navigated. Cuando se produce el evento, PageControlNavigator carga la página que este especifica.

El evento WinJS.Navigation.navigated se produce cuando usas las funciones WinJS.Navigation.navigate, WinJS.Navigation.back o WinJS.Navigation.forward para navegar.

Debes llamar a WinJS.Navigation.navigate por ti mismo en lugar de usar el comportamiento predeterminado del hipervínculo. Podrías reemplazar el vínculo con un botón y usar el controlador de eventos Click del botón para llamar a WinJS.Navigation.navigate. O podrías cambiar el comportamiento predeterminado del hipervínculo para que cuando el usuario haga clic en un vínculo, la aplicación use WinJS.Navigation.navigate para navegar al destino del vínculo. Para hacer esto, controla el evento click del hipervínculo y usa el evento para detener el comportamiento de navegación predeterminado del hipervínculo y después llama a la función WinJS.Navigation.navigate y pásale el destino del vínculo.

JJ663505.wedge(es-es,WIN.10).gifPara reemplazar el comportamiento de hipervínculo predeterminado

  1. En tu archivo home.js, define un controlador de eventos click para tus hipervínculos y hazlo miembro de tu PageControl. Denomínalo linkClickEventHandler y agrégalo después del controlador nameInputChanged.
    
    
            nameInputChanged: function (eventInfo) {
                var nameInput = eventInfo.srcElement;
    
                // Store the user's name for multiple sessions.
                var appData = Windows.Storage.ApplicationData.current;
                var roamingSettings = appData.roamingSettings;
                roamingSettings.values["userName"] = nameInput.value;
            },        
    
     
            linkClickEventHandler: function (eventInfo) {
    
            }
    
    
  2. Llama al método preventDefault para evitar el comportamiento de vínculo predeterminado (navegar directamente a la página especificada).
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
    
            }
    
    
  3. Recupera el hipervínculo que desencadenó el evento.
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
    
            }
    
    
  4. Llama a la función WinJS.Navigation.navigate y pásale el destino de vínculo. (También puedes pasar un objeto de estado que describa el estado para esa página. Para obtener más información, consulta la página WinJS.Navigation.navigate).
    
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
            }
    
    
  5. En la función ready del archivo home.js, adjunta el controlador de eventos a tus hipervínculos.

    WinJS proporciona una función WinJS.Utilities.query que facilita la recuperación de un número de elementos en la página. La función WinJS.Utilities.query devuelve una QueryCollection, que proporciona métodos adicionales para adjuntar y quitar controladores de eventos. Usemos la colección WinJS.Utilities.query y el método listen para adjuntar nuestro linkClickEventHandler.

    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
    
                WinJS.Utilities.query("a").listen("click", 
                    this.linkClickEventHandler, false);
    
    

    Lo bueno de este enfoque es que funcionará para cualquier número de vínculos en la página. Solamente tenemos un vínculo ahora, pero, con este enfoque, podríamos agregar más y no tendríamos que cambiar nuestro código.

  6. Ejecuta la aplicación y haz clic en el vínculo de page2.html.

    Ahora la aplicación muestra page2.html de la manera correcta

    Ahora se muestra la página usando el patrón de navegación correspondiente.

    Descomposición de contenido después de navegar a page2.html

Paso 7: Agregar una NavBar para navegación adicional

La NavBar es como una AppBar dedicada a comandos de navegación. (De hecho, la NavBar es una subclase de la AppBar). Puede contener una lista sencilla de vínculos, además de varios niveles de vínculos organizados en categorías. Puedes rellenar la NavBar con entradas codificadas de forma rígida, actualizarla mediante programación o utilizar el enlace de datos.

La NavBar aparece en la parte superior de la ventana de la aplicación cuando el usuario la necesita. Para invocar a la NavBar, el usuario puede deslizar rápidamente el borde, presionar la tecla de logotipo de Windows + Z o hacer clic con el botón secundario.

La NavBar también admite diseños verticales y elementos de navegación dividida (elementos de navegación con opciones de navegación secundarias). La NavBar es altamente personalizable: puedes usar CSS para aplicar estilos a prácticamente todos los aspectos de la NavBar y su contenido, y también puedes crear elementos de navegación personalizados.

La barra de navegación es un control WinJS. Para declarar una en tu HTML, usas esta sintaxis:



<div id="navbar" data-win-control="WinJS.UI.NavBar">

</div>


La NavBar tiene tres componentes:

  • La propia NavBar.
  • Un objeto NavBarContainer, que contiene los elementos de navegación (objetos NavBarCommand) y admite tanto la paginación como el movimiento panorámico y el desplazamiento. Puedes tener uno o más objetos NavBarContainer en una misma NavBar. Los objetos NavBarContainer se usan para definir grupos de opciones de navegación.
  • Uno o más objetos NavBarCommand. Son los objetos en los que el usuario hace clic para navegar.

Este es un ejemplo de una sencilla NavBar:


<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',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>

Nuestra aplicación contiene varias páginas. ¿Dónde debemos agregar nuestra barra de navegación?

  • Si tu barra de navegación contiene comandos que deben estar disponibles en cada página, agrégala a tu archivo default.html.
  • Si tu barra de navegación es diferente en cada página, puedes definir una barra de la aplicación diferente en cada uno de tus objetos PageControl.
  • También puedes definir una barra de navegación central en default.html y después modificarla a medida que cargas diferentes objetos PageControl.

Creemos una barra de navegación sencilla que permita que el usuario navegue entre home.html y page2.html. Definiremos nuestra barra de navegación en el archivo default.html.

JJ663505.wedge(es-es,WIN.10).gifPara agregar una barra de navegación

  1. Abre tu archivo default.html. Agrega un control NavBar como el primer elemento secundario del elemento body.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
    
        </div>
     
    
    
  2. Cada barra de navegación incluye uno o varios objetos NavBarContainer. Los objetos NavBarContainer se usan para definir grupos de opciones de navegación. Agrega un NavBarContainer a tu barra de navegación.

    
    
        <div id="navbar" data-win-control="WinJS.UI.NavBar">
            <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
                   
            </div>
        </div>
     
    
    
  3. Cada NavBarContainer incluye uno o varios objetos NavBarCommand. Son los objetos en los que el usuario hace clic para navegar. Agrega objetos NavBarCommand a tu NavBarContainer.

    Estas son las propiedades que hay que establecer para cada NavBarCommand:

    • label: la etiqueta que debe mostrarse para el comando.

    • icon: el icono que debe mostrarse para el comando o la ruta al archivo PNG personalizado. (Para obtener una lista de valores de icono, consulta AppBarIcon.

    • location: la ubicación a la que ir.

    • splitButton: si el comando tiene un submenú. El valor predeterminado es false.

    
    
        <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',
                        icon: WinJS.UI.AppBarIcon.home,
                        location: '/pages/home/home.html',
                        splitButton: false
                        }">
                    </div>
                    <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                        label: 'Page 2',
                        icon: WinJS.UI.AppBarIcon.page,
                        location: '/pages/page2/page2.html',
                        splitButton: false
                        }">
                    </div>
            </div>
        </div>
     
    
    

    (En este ejemplo se muestra cómo definir objetos NavBarCommand en línea, pero también puedes generarlos a partir de un origen de datos. Por ejemplo, consulta la muestra de NavBar HTML).

  4. Ejecuta la aplicación. Para mostrar la barra, desliza rápidamente los dedos por el borde, presiona Win + Z o haz clic con el botón secundario del mouse.

    Una barra de la aplicación sencilla

    Cuando haces clic en un botón, la barra de navegación llama automáticamente a navigate y te lleva a la página.

    Has declarado una barra de navegación. A continuación, apliquémosle estilo.

  5. Abre tu archivo default.css y, al comienzo del archivo, crea un estilo CSS para la barra de la aplicación que cambie su color de fondo.
    
    #navbar {
    
        background-color: #03abe2;
    }
    
    
    
  6. Ejecuta la aplicación. Ahora puedes usar la barra de navegación para navegar entre las dos páginas.

    La aplicación HelloWorldWithPages, ahora con una barra de la aplicación

Resumen

Enhorabuena, ¡ya has completado el tercer tutorial! Aprendiste cómo crear un proyecto que usa la plantilla Aplicación de navegación y cómo usar los objetos PageControl. También aprendiste cómo crear una barra de la aplicación.

Descargar la muestra

¿Te has quedado atascado o quieres revisar tu trabajo? En este caso, descarga las muestras de la introducción a JavaScript.

Pasos siguientes

En la siguiente parte de esta serie de tutoriales, aprenderás a crear una aplicación más compleja. Ve a Parte 4: Diseño y vistas.

Temas relacionados

Introducción a JavaScript: código completo de la serie de tutoriales
Programming Windows 8 Apps with HTML, CSS, and JavaScript (libro electrónico)
Para diseñadores
Patrones de navegación
Diseños de comandos
Diseño
Directrices para botones Atrás
Directrices para controles de navegación centralizada
Directrices para las barras de la aplicación (aplicaciones de la Tienda Windows)
Hacer que la barra de la aplicación sea accesible
Para desarrolladores (HTML)
Muestra de navegación e historial de navegación
Agregar barras de la aplicación
Agregar barras de navegación
Ir de una página a otra (HTML)
Muestra del control Hub HTML
Muestra del control AppBar HTML
Muestra de control NavBar HTML
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object

 

 

Mostrar:
© 2016 Microsoft