[Universal Apps] Navegación entre páginas, paso de parámetros y gestión de la tecla volver (1/2)

WP8.1 LogoIntroducción

Casi cualquier aplicación que realices tendrá más de una página. Por lo que es vital saber como navegar entre ellas.

En este artículo, vamos a aprender como se realiza la navegación entre páginas en Windows Phone 8.1 además de aprender como gestionar la tecla física atrás, gestionar el historial de navegación,etc.

¿Te apuntas?

Navegación entre páginas

Antes de entrar de lleno a la navegación entre páginas en si. Vamos a analizar una serie de conceptos básicos para entender todo el funcionamiento del sistema de navegación.

Ahora, en Windows Phone 8.1, la App cuenta con una Window que contiene un único Frame que ocupa el 100% del área de la pantalla.

Window, Frame y Pages

Window, Frame y Pages

El Frame, se crea en el arranque de la aplicación y es el encargado de contener y gestionar cada una de las páginas (Page). Creamos una nueva aplicación desde cero, para ver donde se crea el Frame y como gestionamos la navegación.

Nuevo proyecto

Nuevo proyecto

Elegimos la plantilla de aplicación en blanco, la más básica, para centrarnos en la navegación entre páginas.

Si nos dirigimos a la clase App.xaml.cs, en el método OnLaunched, lanzado al arrancar la App, podemos ver la creación del Frame:

Creación del Frame

Creación del Frame

NOTA: El Frame también mantiene un historial de navegación de las páginas que han sido visitadas.

Añadimos un botón en la página principal de nuestra aplicación:

<Button Content="Navegar a página 2" HorizontalAlignment="Center" />
El botón que nos permitirá navegar

El botón que nos permitirá navegar

Antes de continuar, añadiremos una segunda página a la que navegaremos tras pulsar el botón. Seleccionamos el Proyecto, hacemos clic derecho y seleccionamos la opción Agregar. A continuación, seleccionamos la opción Nuevo elemento. Tras hacer clic en la opción nuevo elemento se nos abrirá el cuadro de diálogo Agregar nuevo elemento:

Añadir nueva página

Añadir nueva página

Añadimos una nueva página (en nuestro ejemplo llamada “Pagina2”) al proyecto. Ahora ya podemos continuar con la navegación de la página principal a la que acabamos de añadir.

Utilizamos el evento clic del botón:

<Button Content="Navegar a página 2" HorizontalAlignment="Center" Click="Button_Click"/>

Y en el code-behind:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}

Y en el clic del botón:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
     Frame.Navigate(typeof(Pagina2));
}

Analicemos el código. Contamos con un modelo de navegación integrado que usa controles Frame y Page y funciona de manera similar a un navegador web. El control Frame hospeda controles Page y tiene un historial de navegación que se puede utilizar para ir hacia atrás y hacia adelante por las páginas que ya visitaste. Tras obtener el Frame correspondiente, utilizamos el método Navigate para realizar la navegación a otra página. Tenemos dos sobrescrituras del método Navigate:

  • Navigate(TypeName). Provoca que el Frame cargue el contenido especificado por el tipo pasado como parámetro.
  • Navigate(TypeName, Object). En este caso, además de indicar el tipo del contenido a cargar (primer parámetro), podemos pasar un parámetro a la página que se navega(segundo parámetro).

En nuestro ejemplo hemos utilizado la primera sobrescritura del método sin pasar parámetro.

Volver atrás

Ahora, una vez en la segunda página, podemos programáticamente volver a la página anterior. Añadimos un botón en la segunda página:

<Button Content="Volver" HorizontalAlignment="Center" Click="Button_Click"/>
Volver atrás

Volver atrás

Este botón nos permitirá volver a la página anterior. Añadimos el manejador del evento en el code-behind:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}

En el clic del botón:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
     if (Frame.CanGoBack)
          Frame.GoBack();
}

Como hicimos previamente, vamos a analizar el sencillo código anterior. Utilizamos primero la propiedad CanGoBack que nos devuelve un bool indicando si hay páginas en el historial de navegación o no. Si existe historial de navegación utilizamos el método GoBack que navega al elemento más inmediato del historial de navegación.

NOTA: También contamos con la propiedad CanGoForward. Indica si en el historial de navegación existe una página delante de la actual.

Pasar parámetros

Ya hemos visto como navegar hacia delante y hacia atrás. Sin embargo, en ocasiones, necesitamos pasar información entre las páginas. Ya hemos visto que el método Navigate cuenta con una sobrescritura que nos permite pasar parámetros.

Navigate(TypeName, Object). En este caso, además de indicar el tipo del contenido a cargar (primer parámetro), podemos pasar un parámetro a la página que se navega(segundo parámetro).

En nuestro ejemplo modificamos la navegación de la página principal a la secundaria:

Frame.Navigate(typeof(Pagina2), "Podemos enviar un parámetro");

De manera similar a como ya hemos visto en Windows Phone, al navegar hacia o desde una página se ejecutan los métodos:

Para recuperar el String pasado como parámetro vamos a utilizar el método OnNavigatedTo que se ejecutará al entrar en la segunda página:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
     base.OnNavigatedTo(e);
     
     if (e.Parameter != null)
          Debug.WriteLine(e.Parameter);
}

En nuestro ejemplo, hemos recuperado el String y lo sacamos por la consola de depuración.

Parámetro recibido

Parámetro recibido

Sencillo, ¿cierto?.

Gestión de la tecla física atrás

En nuestra aplicación, estando en la segunda página podemos utilizar también la tecla física como hacíamos en Windows Phone 8 para volver atrás. Si la pulsamos… Ops!, ¿que ha ocurrido?

No hemos vuelto a la página anterior. En aplicaciones Windows XAML, al pulsar la tecla física atrás provoca una navegación a la App anterior no a la página anterior.

Podemos incluir código personalizado para anular este comportamiento y causaruna navegación atrás dentro de la propia aplicación.

NOTA: En aplicaciones Silverlight 8.1 la navegación atrás es dentro de la propia aplicación.

En el archivo App.xaml.cs, en el constructor de nuestra aplicación añadimos:

HardwareButtons.BackPressed += HardwareButtons_BackPressed;

El evento será:

void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
{
     Frame frame = Window.Current.Content as Frame;

     if (frame == null)
          return;

     if (frame.CanGoBack)
     {
          frame.GoBack();
          e.Handled = true;
     }
}

Analizamos que hemos hecho. Cada vez que se pulse la tecla física volver, entramos en nuestro código personalizado. Accedemos al Frame de la aplicación, y si no es nulo, navegamos atrás y anulamos el comportamiento por defecto.

Podéis descargar el ejemplo realizado a continuación:

Más información

4 pensamientos en “[Universal Apps] Navegación entre páginas, paso de parámetros y gestión de la tecla volver (1/2)

  1. En primer lugar agradecerte tus enseñanzas y en segundo gracias de nuevo por acudir a Madrid a algunos eventos a los que podemos asistir de manera gratuita y continuar con nuestro aprendizaje. GRACIAS.
    Bueno, te quiero comentar unas cosillas, yo programo con ASP MVC y estoy desarrollando mi primera APP para Windows Phone pero me surgen algunas dudas.
    1. Ya tengo la BBDD realizada con SQLEXPRESS ya que la aplicación que tengo pensada requiere una BBDD que no sea la SQLITE ya que según creo, SQLITE solo almacena datos en tu terminal, o sea que no podrías compartir con otros usuarios ( por ejemplo para hacer un ranking y mostrárselo a cada usuario que se haya descargado la APP. Pues mi pregunta es: para acceder a esa BBDD que tengo realizada puedo usar Entity Framework o ADO.NET de toda la vida? O al ser una APP WINDOWS PHONE necesito otro tipo de BBDD?

    2. Puedo alojar esa BBDD en cualquier servidor de BBDD? Me han comentado que obligatoriamente tiene que ser en AZURE al ser una APP WINDOWS PHONE

    3. Existe alguna manera de usar el patrón MVC para esta aplicación como lo realizo para mis aplicaciones web?

    4. Recomiandas XAML para las vistas o HTML? Existe algún método para que mi futura APP se adapte de manera automática a cada dispositivo desde el cual se acceda?

    Te mando un saludo y espero que tengas un ratito para comentarme algo. Prometo que si la APP tiene acogida tienes una cena pagada jejejeje

    • Hola Iván,

      Un verdadero placer poder ayudar con el blog en lo posible y un placer aun mayor poder desvirtualizaros a muchos en eventos, conocer que hacéis y poder ayudar en lo posible.
      Me alegro que te hayas lanzado al desarrollo en Windows Phone. Ánimo, ya veras como es muy divertido.
      Para el desarrollo de Windows Phone puedes utilizar datos relacionales efectivamente con base de datos locales como por ejemplo SQLite. En tu caso, ¿que te parcería montar un servicio REST con Web Api?.
      En Windows Phone utilizamos el patrón MVVM (Modelo-Vista-VistaModelo). Conceptualmente te será muy fácil de entender y comenzar a usar. Echale un vistazo a los artículos:
      https://javiersuarezruiz.wordpress.com/2013/03/18/windows-phone-tecnicas-para-compartir-codigo-1o-parte/
      https://javiersuarezruiz.wordpress.com/2013/04/04/windows-phone-tecnicas-para-compartir-codigo-2o-parte/

      Si tienes conocimientos ya de HTML y Javascript, tienes accesible WinJS. En cualquier otro caso, te recomiendo XAML. En cuanto a “adaptar a cada dispositivo” no se si te refieres a teléfono y tableta o a diferentes resoluciones. Si es lo primero, deberás hacer una app universal con un proyecto para cada plataforma (Windows Phone y Windows). Si es lo segundo, no es complicado. Debes tener una serie de pautas (usar Grids con tamaños percentuales, no posiciones absolutas fijas, etc.) Te recomiendo echarle un vistazo a:
      https://javiersuarezruiz.wordpress.com/2013/11/19/tips-and-tricks-windows-phone-optimiza-tus-apps-a-pantallas-grandes/

      Espero haber sido de ayuda. Para cualquier otro detalle aqui estamos😉

      Un saludo.

      • Gracias “Don” Javier por contestar🙂.
        Pues te comento que yo necesito que la BBDD no sea local, sino que sea una BBDD para todos los usuarios. A lo que dices del servicio REST con Web Api pues no lo había pensado. Hasta hoy estaba haciendo pruebas con Windows Services de AZURE.

        Si conozco XAML y es lo que estaba usando hasta ahora, pero echaré un vistazo a WinJS a ver que tal se me da.

        En cuanto a lo de “adaptar a cada dispositivo” me refiero a que, lógicamente, al ser una aplicación móvil pues pueden descargarla desde un movil de 4 pulgadas, uno de 6, una tablet….. pero si, lo estaba haciendo con tamaños porcentuales.

        Una cosa, estoy utilizando VS2012, aunque tengo la posibilidad de instalar el VS2013. Te lo digo por si piensas que puede ser recomendable, por si existe alguna funcionalidad en el 2013 que sea interesante para este proyecto.

        Un saludo y gracias nuevamente.

      • Hola Ivan!

        Es una buena opción tambien Azure.
        En cuanto a novedades de VS2013 con respecto a VS2012, de entrada el SDK de WP8.1 funciona bajo VS2013. Además se incorporan nuevas herramientas de análisis de rendimiento, nuevas opciones en el emulador, etc. bastante interesante.
        Con VS2012 podrás desarrollar apps para WP8 que funcionaran en dispositivos WP8.1 sin necesidad de cambios.

        Un saludo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s