La Liga Silverlight

** Post actualizado con la versión Silverlight 3 RTW **

Lo prometido es deuda, así que aquí la segunda parte del tema de Framework de Navegación en Silverlight 3. Si no has leido la primera parte, aquí la puedes encontrar. También mencionar que utilizaremos el proyecto/código que hicimos en dicho post.

Configurando la ‘página’ de inicio de la aplicación

Iniciaremos configurando la página de inicio de la aplicación, o mejor dicho del frame que la contiene, y para eso basta con completar la propiedad de ‘Source’ del ‘Frame’:

<nav:Frame x:Name="MainFrame" Grid.Column="1" Source="/Contents/Home.xaml" UriMapper="{StaticResource uriMapper}" />

** SL3 RTW Update: Para la versión de Silverlight 3 RTW, es necesario agregar la propiedad UriMapper.

Url Mapping

Para no exponer nuestra estructura de archivos en el url, podemos utilizar lo que se llama Url Mappings, y esto puede ser a nivel de nuestro frame o a nivel de la aplicación. Para el proposito de esta guia, lo haremos a nivel de aplicación.

Lo primero es agregar a nuestro xaml de aplicación, usualmente App.xaml, el namespace: clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation.

NOTA: A diferencia del namespace que agregamos a nuestro xaml principal (MainPage.xaml), notese que estamos usando System.Windows.Navigation en lugar de System.Windows.Controls

Una vez que tenemos nuestro namespace agregaremos el elemento llamado UriMapper dentro de nuestros recursos (Application.Resources). Adicionalmente se deberá de configurar la propieda x:key del UriMapper.

Dentro del UriMapper definiremos nuestros mapeos utilizando el elemento UriMapping en donde tendremos un valor para la propiedad Uri, que es el nombre o la definición de nuestro nuevo uri, y la propiedad MappedUri, que a donde apuntará nuestro mapeo.

** SL3 RTW Update: Debio al uso de la propiedad de UriMapper en el frame de nuestra aplicación, es necesario asegurarnos que el valor que se tiene el MapperUri comienze con diagonal (‘\’)

   1: <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   2:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

   3:              xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"

   4:              x:Class="Silverlight3.NavigationFramework.Part2.App"

   5:              >

   6:     <Application.Resources>

   7:         <navcore:UriMapper x:Key="uriMapper">

   8:             <navcore:UriMapping Uri="Inicio" MappedUri="/Contents/Home.xaml" />

   9:             <navcore:UriMapping Uri="Acerca" MappedUri="/Contents/About.xaml" />

  10:         </navcore:UriMapper>

  11:     </Application.Resources>

  12: </Application>

Como usar los mapeos en la apliación

Para usar los mapeos configurados solo basta con utilizar el valor de la propiedad Uri de los elementos UriMapping en el Tag de nuestros botones de navegación, incluso lo podemos configurar como el source de nuestro frame (para configurar la página inicial del frame).

   1: <StackPanel Margin="8,8,8,8" VerticalAlignment="Top">

   2:     <HyperlinkButton Content="Inicio" FontSize="14" Click="NavigateButton_Click" Tag="Inicio" />

   3:     <HyperlinkButton Content="Acerca" FontSize="14" Click="NavigateButton_Click" Tag="Acerca" />

   4:     <HyperlinkButton Content="Clientes" FontSize="14" IsEnabled="False"/>

   5: </StackPanel>

   6: <nav:Frame x:Name="MainFrame" Grid.Column="1" Source="Inicio" />

Actualizar iFrame en nuestro archivo aspx/html.

** SL3 RTW Update: Para que los mapeos en la url funciones adecuadamente, es necesario verificar que el iFrame que es agregado al documento aspx/html tenga un id con valor = ‘_sl_historyFrame’

   1: <iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'></iframe>

Tiempo de Ejecución

Nuestra gran diferencia con apenas estos cambios es que ahora nuestros url de acceso a nuestra aplicación serán del tipo:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part2TestPage.aspx#Inicio

Notese que ahora estamos usando una palabra clave, en este caso ‘inicio’, y que ya no estamos mostrando ni donde esta ubicado nuestro xaml, ni siquiera que es un xaml al que estamos haciendo referencia.

Donde encontrar este código:

KodiakLS.codeplex.com (I’m in love with codeplex.com)

Proximamente:

Aunque este post es corto y sencillo, nos está dando las bases para nuestros siguientes post, los cuales incluye:

• Como cargar información dependiendo de parametros en el url
• Plantilla de projecto para el framework de navegación.
• Etc…

Saludos

Filed under:
General by Jorge Levy