Inicio rápido: usar la navegación de una página (HTML)

  • Artículo

[ 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

Obtén más información sobre el modelo de navegación de una página y cómo puedes implementarlo en tu propia aplicación con los objetos PageControl y las características WinJS.Navigation.

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

Creación de un vínculo básico

Una de las formas más simples y más comúnmente usadas de navegación es el hipervínculo. El siguiente código HTML crea un hipervínculo que navega a page2.html.

<p><a href="page2.html">Go to page 2</a></p>

Dado que es un vínculo relativo, el sistema asume que page2.html es una página local que es parte de tu aplicación, relativa a la dirección URL base del documento actual. Por ejemplo, si el vínculo aparece en /folder/default.html, hacer clic en el vínculo e lleva a /folder/page2.html.

Nota  Si optimizaste tu aplicación para la localización (lo cual es una buena idea), este comportamiento varía en función de las carpetas de contenido localizado en /folder/. Consulta Globalización de la aplicación.

 

Si quieres especificar de manera explícita el URI completo para un archivo local de la aplicación, usa el nuevo esquema de dirección URL de contenido empaquetado (ms-appx) de esta forma:

  • **ms-appx://package name/**file path

Si quieres, puedes omitir el nombre del paquete.

  • **ms-appx:///**file path

Observa el siguiente ejemplo.

<p><a href="ms-appx:///page2.html">Go to page 2</a></p>

Puedes usar el esquema de dirección URL ms-appx para hacer referencia a cualquier archivo que esté incluido en el paquete de la aplicación. Sin embargo, recomendamos usar direcciones URL relativas porque están automáticamente resueltas en función de la dirección URL base del documento.

En el ejemplo anterior viste cómo crear un vínculo que realice una navegación de nivel superior. Eso sirve para una página web, pero no debes realizar una navegación de nivel superior en una aplicación por varias razones, entre ellas, las siguientes:

  • La pantalla se pone en blanco mientras se carga la página siguiente.
  • El contexto de script se destruye y debe inicializarse nuevamente. La aplicación podrá recibir eventos del sistema, pero no podrá controlarlos porque el contexto de script se ha perdido y se ha reinicializado.

La navegación de una página proporciona un mejor rendimiento y una experiencia más parecida a una aplicación que la navegación de nivel superior. Los controles de navegación no se proporcionan automáticamente en los nuevos proyectos de Microsoft Visual Studio, así que una navegación de nivel superior a una nueva página quiere decir que no hay forma de volver a la primera página a no ser que crees un vínculo de forma manual u otro mecanismo que permita retroceder. Además, la página de inicio es donde se debe definir de qué manera la aplicación administra su ciclo de vida: cómo se comporta cuando se inicia, se apaga o se suspende. Si tienes varias páginas de nivel superior, cada una debe contener lógica para administrar el estado y ciclo de vida de la aplicación.

¿Qué control debes usar para traer contenido a la página principal?

  • Puedes usar Document Object Model (DOM) para cargar documentos de otro origen.
  • Para contenido HTML simple (contenido que no es interactivo ni tiene referencias de script) usa un objeto HtmlControl.
  • Para contenido web externo, usa un control x-ms-webview siempre que sea posible. En comparación con iframe, este control proporciona mejor aislamiento, navegación, disponibilidad del Filtro SmartScreen y compatibilidad para sitios que no pueden hospedarse en iframe.
  • Para todo otro contenido, usa un control de páginas.

Visual Studio proporciona varias plantillas de proyecto JavaScript para aplicaciones a fin de facilitar la administración de la navegación. Estas plantillas de proyecto proporcionan un control de navegación, llamado PageControlNavigator, que puedes usar para moverte entre objetos PageControl. La clase PageControlNavigator demuestra una sola forma en la que puedes usar el PageControl para facilitar la navegación de una página.

Los siguientes pasos muestran cómo crear una aplicación que contiene varios objetos PageControl y cómo usar el modelo de navegación de una página para navegar entre esas páginas.

Paso 1: crear un nuevo proyecto con la plantilla Aplicación de navegación

  1. Inicia Microsoft Visual Studio 2013 Update 2.

    Nota  Cuando ejecutas Visual Studio por primera vez, te pide que obtengas una licencia de este tipo.

     

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

  3. En el panel Plantillas de la izquierda, expande Instaladas => Plantillas => JavaScript => Aplicaciones de la Tienda.

  4. Selecciona el tipo de plantilla Aplicaciones universales. Las plantillas de proyecto instaladas para JavaScript se muestran en panel central del cuadro de diálogo.

  5. En el panel central, selecciona la plantilla de proyecto Aplicación de navegación (aplicaciones universales).

  6. En el cuadro de texto Nombre, escribe un nombre para el proyecto. Los ejemplos de este tema usan "NavigationAppExample".

    Aparece el cuadro de diálogo de proyecto nuevo en el que se muestran las plantillas de aplicaciones universales de JavaScript.

  7. Haz clic en Aceptar para crear el proyecto.

    El nuevo proyecto Aplicación de navegación contiene una página de inicio, una página principal y algunos archivos auxiliares. Tiene esta apariencia en el Explorador de soluciones.

    Archivos en el nuevo proyecto Aplicación de navegación.

    El nuevo proyecto Aplicación universal incluye una serie de archivos. Algunos son específicos de una aplicación de Windows, otros son específicos de una aplicación de Phone y otros son compartidos.

    El proyecto incluye los siguientes archivos TML:

    • default.html—la página de inicio Se carga primero. Contiene una instancia de PageControlNavigator (que carga cada página en la ventana principal) y es donde crearías tu AppBar, en caso de que la aplicación use una.Nota  Las páginas HTML se cargan en un solo host de contenido, un elemento div declarado en default.html. En default.html, el elemento div de host de contenido se declara como un control de tipo PageControlNavigator mediante el atributo data-win-control que proporciona la biblioteca de Windows para JavaScript (WinJS).  
    • home.html— la página principal. Muestra un título de bienvenida.

    El proyecto incluye los siguientes archivos JavaScript:

    • default.js— especifica el comportamiento de la aplicación cuando se inicia.
    • home.js— especifica el comportamiento de la página principal.
    • navigator.js— implementa el objeto PageControlNavigator compatible con el modelo de navegación de las plantillas JavaScript de las aplicaciones de la Tienda Windows.

    El proyecto incluye los siguientes archivos CSS:

    • default.css— especifica los estilos de hojas de estilo CSS de la página de host de contenido y de la aplicación en general.
    • home.css— especifica los estilos CSS de la página principal.

    El proyecto también incluye el archivo package.appxmanifest, que describe el paquete de aplicación. Por último, el proyecto incluye también varios archivos de imagen, como splashscreen.png para la imagen de la pantalla de presentación y storelogo.png,que se usa en la Tienda Windows.

  8. Ejecuta la aplicación. Elige Depurar > Iniciar depuración, o bien elige F5 (usa SHIFT + F5 para detener la depuración y volver a Visual Studio).

    Aquí se muestra una captura de pantalla de la aplicación de Windows.

    La nueva aplicación de navegación de Windows.

    Aquí se muestra una captura de pantalla de la aplicación de Phone.

    La nueva aplicación de navegación de Phone.

    Ten en cuenta que el contenido que estás viendo no está definido en el archivo default.html. Está definido en el archivo home.html, una página separada. Es PageControlNavigator el que recupera el contenido de la página principal y lo muestra dentro de default.html.

    El control de navegación PageControlNavigator se muestra aquí. Define varias funciones que se usan para la navegación. Este control se implementa en navigator.js.

    
WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            // Initialization code.
            }, {
                // Members specified here.
            }
    ), // . . .
});

    La función de constructor inicializa el control de navegación. Algunas tareas importantes de inicialización incluyen la configuración de controladores para eventos de WinJS, como el evento WinJS.Navigation.onnavigating, y configuración de la página principal de la aplicación. (El valor de página principal se especifica en el elemento contenthostDIV, en un atributo data-win-options).

    
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);

    Un elemento DIV que se declara como el control de navegación de la aplicación (en default.html) proporciona el host del contenido para todas las páginas de la aplicación. El elemento DIV usa el atributo data-win-control de WinJS para declararse a sí mismo como el control de navegación y este control proporciona el modelo de navegación para la aplicación. Todo el contenido de la página se carga en este DIV.

    A continuación encontrarás el marcado completo para la página default.html.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavigationAppExample</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>

    <!-- NavigationAppExample 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'}">
        </button>
    </div> -->
</body>
</html>

    Esta ilustración muestra las distintas unidades de contenido que aparecen en la ventana de la aplicación:

    Descomposición de contenido para una Aplicación de navegación.

En los siguientes pasos, profundizarás tu conocimiento sobre cómo agregar pasos con PageControlNavigator y el objeto PageControl.

Paso 2: crear una nueva página

Un PageControl es una unidad modular de HTML, CSS y JavaScript que funciona como una página lógica.

Cuando agregues una nueva página a un proyecto de Visual Studio 2013, necesitarás:

  1. Agregar la página nueva con la plantilla de Control de páginas de Visual Studio.
  2. Agregar código para navegar a la nueva página con la función WinJS.Navigation.navigate. Sugerencia  Esta función no lleva a cabo la navegación directamente, pero invoca el evento WinJS.Navigation.onnavigated, que se controla en navigator.js. El código en navigator.js llama a la función ready en la nueva página. Normalmente, no tendrás que modificar navigator.js.  
  3. Agrega controladores de eventos e interfaz de usuario adecuados para tu aplicación, si es necesario, para invocar el código de navegación de la página.

Una página tiene un conjunto de métodos predefinidos que la biblioteca llama automáticamente en un orden predefinido. La función WinJS.UI.Pages.define expone estos métodos para su implementación.

Hh452768.wedge(es-es,WIN.10).gifAgregar una página

  1. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta pages y elige Agregar > Nueva carpeta.Nota  Para este ejemplo hemos agregado una página compartida. Puedes agregar páginas exclusivas a los proyectos de Windows o de Phone, según sea necesario.

     

  2. Asigna el nombre page2 a la nueva carpeta.

  3. Haz clic con el botón secundario en la carpeta page2 y selecciona Agregar > Nuevo elemento.

  4. En el cuadro de diálogo Agregar nuevo elemento, elige Control de páginas en el panel del medio.

  5. Asigna el nombre page2.html a la página y elige Agregar.

    Se crea el archivo page2.html en la carpeta page2, además de otros dos archivos de proyecto: page2.css y page2.js. Estos archivos juntos representan una página lógica.

    Sugerencia  Si agregas la plantilla de elemento en otro lugar del proyecto, es posible que debas actualizar las referencias a los script y a CSS en page2.html.

     

  6. Abre page2.js y comprueba que el URI sea correcto en la función define. Debería tener el siguiente formato:

    WinJS.UI.Pages.define("/pages/page2/page2.html", {
    // . . .
    ready: function (element, options) {
        // ready function implementation.
    },
    // . . .
});

Paso 3: personalizar la página

Ahora modifica la nueva página para que muestre un mensaje distinto y el día de la semana.

  1. Abre page2.html. La plantilla de elemento Control de páginas crea una página HTML que contiene una sección de encabezado (con un botón Atrás) y una sección para el contenido principal de la página.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

  2. Reemplaza la sección de contenido principal por lo siguiente.

    
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>

    El archivo page2.html debería tener el siguiente formato.

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page2</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="page2.css" rel="stylesheet" />
    <script src="page2.js"></script>
</head>
<body>
    <div class="page2 fragment">
        <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 page2</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Page controls make it easy to divide your app 
                into modular portions.</p>
            <p>Today is <span id="dayPlaceholder"></span>.</p>
        </section>
    </div>
</body>
</html>

  3. Abre page2.js. PageControl incluye un conjunto de funciones predefinidas que se llaman automáticamente en un orden predefinido. Las plantillas de elemento Control de páginas incluyen la función ready y las funciones updateLayout y unload.

    PageControlNavigator llama a la función updateLayout cuando el usuario cambia entre las orientaciones vertical y horizontal, o cambia el tamaño de ventana de la aplicación. Este tema no te mostrará cómo definir la función updateLayout, pero es algo que toda aplicación debería hacer. Consulta Directrices para cambiar el tamaño de las ventanas en diseños alargados y estrechos y Diseño con capacidad de respuesta 101 para aplicaciones de la Plataforma universal de Windows (UWP).

    La función ready se llama cuando se ha cargado el DOM de la página, se han activado los controles y se ha cargado la página en el DOM principal.

    (PageControl admite funciones adicionales para el ciclo de vida de la página. Si quieres obtener más información, consulta Agregar controles de página.

    Aquí te mostramos el archivo page2.js creado por la plantilla de elemento Control de páginas.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

  4. Modifica la función ready para que recupere el intervalo que creaste en el paso 2 ("dayPlaceholder") y establece su innerText en el día actual.

    
// page2.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/page2/page2.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.

            var dayPlaceholder = document.querySelector("#dayPlaceholder");
            var calendar = new Windows.Globalization.Calendar();
            dayPlaceholder.innerText =
                calendar.dayOfWeekAsString();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

Has creado y personalizado una página. En el siguiente paso, habilitarás al usuario que ejecute la aplicación para que navegue a tu página.

Paso 4: usar la función navegar para desplazarse entre páginas

Si ejecutas la aplicación en este momento, se muestra home.html; el usuario no puede navegar a page2.html de ninguna manera. Una forma simple de ayudar al usuario para obtenga page2.html es vincularlos en home.html.


<!-- home.html -->
<!DOCTYPE html>
<html>
<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>
<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 NavigationAppExample!</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>

            <!-- A hyperlink to page2.html. -->
            <p><a href="/pages/page2/page2.html">Go to page 2.</a></p>
        </section>
    </div>
</body>
</html>

Si ejecutas la aplicación y haces clic en el vínculo, parece funcionar: la aplicación muestra page2.html. El problema es que la aplicación realiza una navegación de nivel superior. En lugar de navegar de home.html a page2.html, navega de default.html a page2.html.

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.onnavigated. 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 el hipervínculo, la aplicación use WinJS.Navigation.navigate para ir 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. Puedes hacer esto de este modo:

  1. En el archivo home.js, define un controlador de eventos click para los hipervínculos.

    
function linkClickEventHandler(eventInfo) {

}

  2. Llama al método preventDefault para evitar el comportamiento de vínculo predeterminado (navegar directamente a la página especificada).

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
}

  3. Recupera el hipervínculo que desencadenó el evento.

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
}

  4. Llama a la función WinJS.Navigation.navigate y pásale el destino del 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 WinJS.Navigation.navigate).

    function linkClickEventHandler(eventInfo) {
    eventInfo.preventDefault(); 
    var link = eventInfo.target;
    WinJS.Navigation.navigate(link.href); 
}

  5. En la función home.js en ready, adjunta el controlador de eventos a tus hipervínculos.

        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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 

        }
    });

Este es el último paso. He aquí el código completo para el archivo home.js.


// 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.
            WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); 
        
        }
    });

    function linkClickEventHandler(eventInfo) {
        eventInfo.preventDefault();
        var link = eventInfo.target;
        WinJS.Navigation.navigate(link.href);
    }


})();

Ejecuta la aplicación y haz clic en el vínculo de page2.html. Verás lo siguiente.

Pantalla page2.html con botón negro

Esta vez la página se visualiza mediante el patrón de navegación correspondiente.

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

La plantilla de control de páginas incluye un botón Atrás que se habilita cuando usas las funciones WinJS.Navigation para navegar. Cuando usas las funciones WinJS.Navigation, la aplicación almacena el historial de navegación. Puedes usar ese historial para navegar hacia atrás llamando a WinJS.Navigation.back o hacia adelante llamando a WinJS.Navigation.forward.

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.

 

Guardar el historial de navegación cuando la aplicación está suspendida

El historial de navegación no se almacena de manera automática cuando la aplicación está suspendida o apagada, pero almacenar esta información es muy sencillo. Usa la propiedad WinJS.Navigation.history para recuperar el historial de navegación y el objeto WinJS.Application.sessionState, para almacenarlo. Para garantizar una experiencia de suspensión/reanudación suave, se recomienda almacenar esta información cada vez que el usuario navega.

Cuando la aplicación se reanude, recupera la información del historial del objeto WinJS.Application.sessionState y úsala para establecer la propiedad WinJS.Navigation.history.

Para ver un ejemplo que indica cómo usar el objeto WinJS.Application.sessionState para almacenar y restaurar datos de una sesión, consulta Parte 2: Administrar el ciclo de vida y el estado de la aplicación. Para obtener más información sobre la suspensión y la reanudación, consulta Inicio, reanudación y multitarea.

Resumen

Has aprendido a usar objetos y métodos del espacio de nombres WinJS.UI.Pages para admitir el modelo de navegación de una página.

Has aprendido a compilar aplicaciones usando el modelo de navegación de una página. Usaste la clase PageControlNavigator, proporcionada por las plantillas, para implementar este modelo en tu propia aplicación con objetos PageControl y características WinJS.Navigation.

Temas relacionados

Para desarrolladores

Tu primera aplicación: Parte 3: Navegación y objetos de PageControl

Agregar barras de la aplicación

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

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

WinJS.Navigation Namespace

WinJS.UI.Hub object

WinJS.UI.AppBar object

WinJS.UI.NavBar object

WinJS.UI.BackButton object

Muestra del control de navegación centralizada HTML

Muestra del control AppBar HTML

Muestra de control NavBar HTML

Muestra de navegación e historial de navegación

Para diseñadores

Patrones de navegación

Diseños de comandos

Diseño

Botón Atrás

Directrices para el control 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