Desarrollo de Aplicaciones Silverlight Parte 2. Eventos desde XAML y Javascript

Bienvenidos a esta segunda parte de nuestro tutorial sobre desarrollo de aplicaciones Silverlight.

En base a lo que hicimos en la parte 1 (SG Num. 21), deberíamos tener los siguientes archivos:

• crearSilverlight.js
• Default.html
• Mixaml.xaml
• Silverlight.jsRespondiendo al click del mouse
Vamos a crear un elemento que pueda responder a eventos del mouse, para comenzar a darle más interacción a nuestros sitios Silverlight.

La forma y el concepto son muy sencillos: en el XAML se declaran los eventos que queremos estar observando, y se indica la función de Javascript que debe dispararse con cada evento. Dichas funciones de Javascript las podemos definir en el archivo HTML o en un archivo .js.

Veamos como se implementa esto en código. Primero, modificaremos nuestro archivo XAML para que quede como el listado 1.

Listado 1. mixaml.xaml
<Canvas Width=”300” Height=”300”
    xmlns=”http://schemas.microsoft.com/client/2007”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>

<Canvas.Background>
    <LinearGradientBrush EndPoint=”0.5,1” StartPoint=”0.5,0”>
        <GradientStop Color=”#FFDCEF1B” Offset=”0”/>
        <GradientStop Color=”#FF801A1A” Offset=”1”/>
    </LinearGradientBrush>
</Canvas.Background>

<Rectangle
    x:Name=”r1”
    MouseEnter=”r1Entrar” MouseLeave=”r1Salir”
    MouseLeftButtonDown=”r1Abajo”
    MouseLeftButtonUp=”r1Arriba”
Height=”100” Width=”100”
    Canvas.Left=”100” Canvas.Top=”50”
    Stroke=”Black” StrokeThickness=”10” Fill=”Blue”/>

<TextBlock
    x:Name=”miTexto”
    Canvas.Left=”70” Canvas.Top=”180”
    Text=”Dame Click” FontSize=”30”/>
</Canvas>
Noten que tanto el TextBlock como el Rectangle, tienen una propiedad x:Name por medio de la cual podemos identificar a cada elemento dentro del XAML. Utilizaremos esto más adelante en el código Javascript.

Al visualizar nuestra página web, obtendremos lo que se ve en la siguiente figura.



Insertando código javascript
El siguiente paso es definir las funciones de Javascript que respondan a los eventos que se disparan desde el XAML. Para esto, insertaremos en nuestra página web el código Javascript del listado 2. Este código lo pueden insertar dentro del mismo bloque de código <script> donde se encuentra la obtención de la referencia al plugin de Silverlight que ya se tiene.

Listado 2. Funciones en Javascript
function r1Entrar(sender, args) {
sender.stroke = “red”;
sender.findName(“miTexto”).Text = “Rojo”;
}
function r1Salir(sender, args) {
sender.stroke = “black”;
sender.findName(“miTexto”).Text = “Negro”;
}
function r1Abajo(sender, args) {
sender.stroke = “yellow”;
sender.findName(“miTexto”).Text = “Diste Click”;
}
function r1Arriba(sender, args) {
sender.stroke = “Green”;
sender.findName(“miTexto”).Text = “Verde”;
}
En este código podemos observar dos cosas:
• Los eventos disparados desde el XAML, reciben dos parámetros:

- sender: Corresponde al objeto que inicia la acción
- args: Corresponde a información relacionada al evento disparado
• Mediante el método findName localizamos a elementos específicos dentro del XAML, en este caso, el objeto que estamos localizando y manipulando es el Rectángulo al cual nombramos “miTexto”.

Con esto tenemos una página cuyos elementos XAML disparan eventos en javascript.


Conclusión
Ya tenemos una página cuyos elementos XAML responden al comportamiento del mouse y disparan funciones javascript.En futuros artículos incluiremos una animación, un video y más eventos para atraparlos con el mouse. Suerte, y hasta la próxima.