El modelo de navegación recomendato de las aplicaciones Metro hechas con Javascript utiliza un concepto que se conoce como fragmentos, básicamente es una página principal en la cual se van cargando dentro de un contenedor las páginas que navegamos, es decir, siempre estamos en la misma página y cambiamos el contenido.
El objeto Navigator
Lograr este tipo de navegación en HTML es posible gracias a un objeto que es parte de WinJS, el objeto WinJS.Navigation, si bien hace gran parte del trabajo no lo hace todo, en general es necesario “escuchar” algunos eventos y realizar la carga de los fragmentos, por ejemplo, cuando se invoca el evento onnavigated.
No es necesario que lo hagamos nosotros
No es necesario que nosotros agregemos el código que escuche los eventos y carga y descarge los fragmentos, podemos copiar el código de alguno de los templates como “Grid Application” o “Split Application”, o más fácil, crear una “Navigation Application”, que no es más que una aplicación en blanco con esta navegación ya resuelta.
Una vez de creamos la aplicación tenemos lo siguiente:
Como podemos ver dentro de la carpeta js tenemos un archivo navigator.js, justamente es quien se encarga de la carga y descarga de fragmentos, entre otras cosas.
Primer intento: agregando un botón para navegar a otra página:
Para comenzar modificamos homePage.html y agregamos un botón para poder navegar a una segunda página.
Ahora vamos a homePage.js y agregamos el código para que al hacer click en el botón navege a page.html
Bien sencillo, asociamos este código con la carga del fragmento utilizando WinJS.UI.Pages.define y le indicamos que cuando se carge el fragmento llame a la función ready, dentro de ésta seleccionamos el botón haciendo:
document.querySelector("#boton")
y asignamos el evento click
document.querySelector("#boton").addEventListener("click", function () {
});
e invocamos al navigator para cargar el fragmento
(function () {
"use strict";
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
function ready(element, options) {
// TODO: Initialize the fragment here.
document.querySelector("#boton").addEventListener("click", function () {
WinJS.Navigation.navigate("/html/page.html");
});
}
WinJS.UI.Pages.define("/html/homePage.html", {
ready: ready
});
})();
El hecho de que se cargen los fragmentos depende de que el archivo navigator.js extiende la funcionalidad del objeto WinJS.Navigation y gestiona el mecanismo.
Cómo cargar un fragmento con un hipervínculo como si fuera un botón?
El principal problema es que si le indicamos al hipervínculo como url page.html no se cargará el fragmento sino que se cargará la página completa, para evitarlo hacemos lo siguiente:
(function () {
"use strict";
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
function ready(element, options) {
// TODO: Initialize the fragment here.
document.querySelector("#link").addEventListener("click", function () {
WinJS.Navigation.navigate("/html/page.html");
return false;
});
}
WinJS.UI.Pages.define("/html/homePage.html", {
ready: ready
});
})();
Nótese que ponemos como href el valor # y cuando atrapamos el evento hacemos return false, con esto evitamos que se ejecute el evento por defecto, o sea que cargue la otra página.
Además de manejar la carga de fragmentos el objeto Navigator también controla el poder volver a la página anterior por medio de un fragmento, es decir, si hacemos Alt+izq vuelve a la página anterior manteniendo el marco.
Hasta la próxima.
).