Como pasar parámetros desde HTML/JavaScript/ASP.NET hacia Silverlight (Parte I)

Hola Universo:

En la mayoría de las ocasiones nuestros sitios web están desarrollados en mas de una tecnología por X o Y motivo. Gracias a uno de los beneficios fundamentales de Silverlight, interoperabilidad, es posible interactuar con otros lenguajes como es el caso de los mencionados en el titulo del post. En esta primera entrega comunicaremos HTML con Silverlight. Veamos como hacerlo!

HTML

El mas sencillo ya que HTML (versión 4) por si solo no permite obtener datos de forma dinámica. El mecanismo es utilizar InitParams en la etiqueta Object que es el “contenedor” de la aplicación Silverlight. Observa que en la propiedad value existen dos elementos: la llave o ID (ej. parametro1) y el valor (ej. Portugal)

<param name="initParams" value="Pais=Nicaragua, Departamento=Managua, Ciudad=Sandino" />

Ahora pasaremos 3 argumentos (Pais1=Nicaragua, Pais2=México, Pais3=Colombia)

Pasos

1. Abre Visual Studio, crea un proyecto Silverlight, por esta vez trabajaremos una solución por ejemplo para que todo sea mas claro. En este caso quita el check para generar un sitio Web.

2. Corre el proyecto (F5) y regresa a Visual Studio (VS), esto generara una pagina de pruebas (TestPage.html) en la siguiente ruta “Bin/Debug/” . Crea una nueva pagina HTML(en VS) a la que puedes llamar “pruebaHTML.html” en la misma ruta(Bin/Debug/)  y copia/pega el contenido de TestPage.html a la nueva página.

3. Ubícate en la etiqueta Object y agrega la siguiente línea:

<param name="initParams" value="Pais=Nicaragua, Departamento=Managua, Ciudad=Sandino" />

La etiqueta Object quedaría de esta manera:

 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	<param name="source" value="ParametrosHTML.xap"/>
	<param name="onError" value="onSilverlightError" />
	<param name="background" value="white" />
        <param name="initParams" value="Pais=Nicaragua, Departamento=Managua, Ciudad=Sandino" />
        <param name="minRuntimeVersion" value="4.0.50826.0" />
        <param name="autoUpgrade" value="true" />
	    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
 		<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
	    </a>
</object>

4. Hemos terminado con el HTML, pasemos a Silverlight.

El proyecto genera automáticamente el archivo app.xaml y su code-behind app.xaml.cs. Abre el ultimo y dirígete al método Application_Startup. Fijate en  StartupEventArgs e, interpretado al español significaría argumentos del evento de inicio, el objeto “e” contiene los parámetros que hemos transferido desde el código HTML. Lo que debemos hacer es gestionarlos de una forma mas sencilla.

private void Application_Startup(object sender, StartupEventArgs e)
{
       this.RootVisual = new MainPage();
       foreach (var parametro in e.InitParams)
       {
            this.Resources.Add(parametro.Key, parametro.Value);
       }
}

Seguro recuerdas Resources, en el referencias brochas, estilos, etc. Ya que es accesible desde todo el proyecto lo utilizaremos. Con un ciclo agregamos a Resources como en una colección, los parámetros llaves y valor.

Para ahorrar código y aprovechar las bondades de XAML, implementaremos DataBinding para enlazar los datos obtenidos desde HTML hacia los controles de la aplicación Silverlight.

5. Crea una nueva clase en el proyecto con el nombre Parametros (Parametros.cs) y pega el siguiente código en la clase:

public string pais { get; set; }
public string departamento { get; set; }
public string ciudad { get; set; }

6. Abre MainPage.xaml  y diseña una interfaz que te quede de esta manera:

Puedes utilizar el panel que sea de tu comodidad pero los únicos requisitos son:

• Asígnale el nombre “ControlPrincipal” al UserControl
• A las cajas de texto (TextBox) asígnale los siguientes nombres:
  • txtPais
  • txtDept
  • txtCiudad

Te dejo el código del Grid por si quieres ahorrar trabajo:

 <Grid x:Name="LayoutRoot" Background="White">
        <Grid   Margin="90,20,90,20" Name="grid1" Background="#FFFCFCFC">
            <Grid.RowDefinitions>
                <RowDefinition Height="46*" />
                <RowDefinition Height="46*" />
                <RowDefinition Height="46*" />
                <RowDefinition Height="121*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="102*" />
                <ColumnDefinition Width="258*" />
            </Grid.ColumnDefinitions>
            <TextBlock Name="lblPais" Text="Pais" Margin="0,0,0,26" />
            <TextBlock Name="lblDept" Text="Dept." Margin="0,0,0,26" Grid.Row="1" />
            <TextBlock Grid.Row="2" Name="lblCiudad" Text="Ciudad" Margin="0,0,0,26" />
            <TextBox Grid.Column="1" Height="25"  Name="txtPais" VerticalAlignment="Top" />
            <TextBox Grid.Column="1" Grid.Row="1" Height="25" Name="txtDept" VerticalAlignment="Top" />
            <TextBox Grid.Column="1" Grid.Row="2" Height="25" Name="txtCiudad" VerticalAlignment="Top" />
        </Grid>
</Grid>

• Agrega a través de XAML o el panel de eventos, el evento Loaded al UserControl (ControlPrincipal)

Name="ControlPrincipal" Loaded="ControlPrincipal_Loaded"

7. Automáticamente se generara el evento en Code-Behind (MainPage.xaml.cs). Agrega en dicho evento el siguiente código:

Parametros param = new Parametros
{
  pais = App.Current.Resources["Pais"].ToString(),
  departamento = App.Current.Resources["Departamento"].ToString(),
  ciudad = App.Current.Resources["Ciudad"].ToString()
};
this.ControlPrincipal.DataContext = param;

El código no tiene mucha complejidad. Lo que hemos hecho es crear una instancia de la clase Parámetros (param) que codificamos anteriormente e inicializar sus atributos con valores. Observa la línea:

App.Current.Resources["Pais"].ToString()

Con esto accedemos a los recursos de la aplicación actual, en corchetes miramos “Pais” que es la llave o ID pasada desde HTML, finalmente la transformamos al tipo string.

Por ultimo, establecemos el contexto de datos, en palabras mas sencillas, la fuente de la información del UserControl a través del objeto param.

8. Ya casi terminamos!, vuelve a MainPage.xaml, lo que haremos será enlazar a través de XAML los datos de la clase Parametros. Para esto simplemente agrega la siguiente propiedad a cada TextBox así:

Text="{Binding pais}"

Claro, lo único que cambiaras será la variable (txtCiudad –> ciudad). El XAML de los 3 TextBox queda así:

<TextBox Grid.Column="1" Text="{Binding pais}" Height="25"  Name="txtPais" VerticalAlignment="Top" />
<TextBox Grid.Column="1" Text="{Binding departamento}" Grid.Row="1" Height="25" Name="txtDept" VerticalAlignment="Top" />
<TextBox Grid.Column="1" Text="{Binding ciudad}" Grid.Row="2" Height="25" Name="txtCiudad" VerticalAlignment="Top" />

9. Lo único que queda será cambiar la pagina de inicio, TestPage.html por pruebaHTML.html.

10. Listo!! Corre (f5) y observa que los parámetros que pasaste desde HTML son los mismos en la app Silverlight.

Resumiendo el flujo es así:

HTML –> App.xaml.cs –> Parametros.cs –> MainPage.xaml.cs –> MainPage.xaml

Descarga

En el próximo post estableceremos comunicación entre JavaScript y Silverlight.

Compilación Completa!