Silverlight Parte 2 - Eventos desde XAML y JavaScript

gmorales — Tue, 11 Mar 2008 20:12:00 GMT

Este artículo es parte de una serie, cuyo artículo anterior está localizado aquí

Silverlight y JavaScript

Tenemos al momento los siguientes archivos:

Y al ejecutar la página web, vemos lo siguiente:

Respondiendo 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. Desde el XAML, se declaran los eventos a disparar en JavaScript, esto es, por ejemplo, a una etiqueta de XAML, le podemos declarar un atributo como MouseLeave y asociar este atributo a una función de JavaScript en el HTML. De esta manera lo que tenemos es:

Primero, vamos a cambiar el XAML existente por el siguiente:

<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>

Para obtener lo siguiente:

Aquí lo imporante que mencionar es 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

Insertando Código JavaScript

El siguiente paso, como ya se imaginarán, es obvio, es momento de insertar el código que responda a los eventos que se disparan desde el XAML, para esto, insertaremos en nuestra página web, el siguiente bloque de código 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, siempre 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 de manera específica dentro del XAML, en este caso, “miTexto”

Este código lo pueden insertar dentro del mismo bloque de código <script> donde se encuentra la obtención de la referencia a plugin de Silverlight que ya se tiene. Obteniendo ya una página cuyos elementos XAML disparan eventos en JavaScript

Conclusión

Listo, ya tienen elementos XAML de Silverlight que responden al mouse disparando funciones JavaScript dentro de sus tradicionales páginas Web.

Seguiremos posteando más artículos relacionados a esta tecnología, en las próximas entregas, incluiré ya alguna animación, un video y más eventos para atraparlos con el mouse.

Suerte!

Silverlight Parte 1

gmorales — Mon, 10 Mar 2008 23:38:00 GMT

Larga ausencia

Después de una larga ausencia, estoy de vuelta para platicarles de tecnología. Disculpen de antemano este laaaaaaargo letargo, pero estuvimos enfrascados en otras cosas que no nos dejaban meternos de lleno en esto de la comunidad.

Para todos, estaremos nuevamente haciendo nuestras reuniones mensuales, así como participando en eventos de lanzamiento de nuevos productos de Microsoft, por supuesto ya escucharán de esto, en un rato más, así que bueno, pues a lo que te truje:

Silverlight

La verdad, no quiero marearlos con el rollo sobre lo que me imagino ya todos conocen, ¿Qué es Silverlight?, pueden encontrar mucha documentación en la red, y un excelente lugar para empezar es este (http://silverlight.net/). Así que vamos sólo a decir, que es la forma más reciente de hacer aplicaciones WEB de alto impacto visual de Microsoft. Obviamente hay muchas cosas más, pero vamos a dejarlo ahí.

A donde vamos con este demo

El objetivo de este demo es encaminarlos rápidamente a cómo crear su primera aplicación con Silverlight, no tanto el qué se puede hacer, si no, que comprendan qué se necesita para echar a volar su primer demo, y para eso explico lo siguiente:

Los archivos de una aplicación Silverlight

Para empezar, les comento que todos lo que podemos hacer hoy en día con Silverlight 1.0, se puede crear mediante cualquier editor de texto, en nuestro caso, usaremos al famoso Notepad. Pensemos que tenemos una página llamada Default.html en donde queremos crear nuestra primera aplicación de Silverlight.

Entonces, los archivos que necesitamos crear son:

Para comenzar nuestro ejemplo, estos archivos deberán de tener el siguiente contenido:

Default.html

<html>
<head>
    <title>Primer Ejemplo Silverlight</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="crearSilverlight.js"></script>
</head>
<body>
    
    <div id="miHostdelPlugin">
    </div>
    <script type="text/javascript">
        // Obtener el DIV host del plug in.
        var hostdelplugin = document.getElementById("miHostdelPlugin");
        // Creación del plugin
        crearPluginSilverlight(); //Llamada a la función del archivo de abajo
    </script>
</body>
</html>

Como se dan cuenta, esta página muy sencilla, hace llamadas a un par de archivos JavaScript, el primero de ellos, el Silverlight.js no lo muestro porque es un archivo que pueden obtener con el SDK de Silverlight, y no se modifica, solo tienen que estar seguros de copiar este archivo a la misma carpeta donde tienen su demo. El otro es el archivo:

crearSilverlight.js

function crearPluginSilverlight()
{
    Silverlight.createObject(
        "mixaml.xaml",                  // El XAML a pintar.
        hostdelplugin,                  // La variable que apunta al DIV host.
        "miHostdelPlugin",              // El ID de la etiqueta DIV host.
        {                               //
            width:'300',                // Ancho del plug in en pixeles
            height:'300',               // Alto del plug in en pixeles
            inplaceInstallPrompt:false, // Indica si pregunta si se
                                        // instala el plug in si no es la
                                        // versión correcta
            background:'#D6D6D6',       // Color Background del plug in
            isWindowless:'false',       // Determina si el plug in se muestra en
                                        // modo sin ventana
            framerate:'24',             // Número de cuadros por segundo
            version:'1.0'               // Versión Silverlight a usar.
        },
        {
            onError:null,               // Manejador de función cuando hay error
            onLoad:null                 // Manejador de función carga del plug in
        });
}

Este archivo en pocas palabras, lo que hace es indicarle al navegador, por medio de una función de JavaScript, que hay que invocar al método createObject del objeto Silverlight para poder crear con ciertos parámetros, un plug in. Los parámetros de la función vienen descritos en los comentarios del código
El siguiente archivo es el XAML que contiene la parte visual, este es el archivo para nuestro primer ejemplo:

mixaml.xaml

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</Canvas>

Como nos podemos dar cuenta, este archivo contiene un Canvas en donde pintaremos el contenido de nuestra aplicación Silverlight mediante XAML. Por el momento está vacío.
Una imagen de lso archivos de nuestro sitio web al momento sería esta:

Si se echa a andar la página web, obtenemos la siguiente pantalla por el momento:

PERFECTO, el color del fondo del plug in es el indicado según el indicado en el archivo crearSilverlight.js, solo nos queda, crear el contenido visual por medio del archivo XAML.

Modificando el archivo XAML

Windows Presentation Foundation es uno de los pilares de. Net Framework 3.0, el más importante beneficio es la creación de creación de aplicaciones de alto impacto visual, esto, trasladado a Web es lo que dio origen a Silverlight, originalmente llamado WPF/e.

XAML es un lenguaje de marcas para crear contenido visualmente hablando, muy rico y de manera muy sencilla. Para este caso, el archivo mixaml.xml contiene el XAML de este contenido visual.

Todo el Silverlight, se pinta dentro de una etiqueta CANVAS, que es algo así como un lienzo en blanco sobre el cual, por medio de alineaciones de los elementos, los puedo pintar y posicionar. De esta manera, si yo escribo el siguiente XAML dentro del archivo mixaml.xaml

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle
        Canvas.Top="30"
        Canvas.Left="30"
        Fill="Blue"
        Height="100"
        Width="100" />

    <Rectangle
        Canvas.Top="80"
        Canvas.Left="80"
        Fill="Red"
        Height="100"
        Width="100" />

    <Ellipse
        Canvas.Top="130"
        Canvas.Left="130"
        Fill="Green"
        Height="100"
        Width="100" />
</Canvas>

Lo que nos pinta una pantalla como la siguiente:

Perfecto! Has creado tu primera aplicación Silverlight. En la siguiente entrega, estaremos viendo ya como poder responder a eventos del mouse y lanzar alguna animación.

Conclusión

El desarrollo con Silverlight está basado en una serie de archivos que contienen indicaciones para:

Creación del Plugin de Silverlight (archivo crearSilverlight.js)
La declaración de los elementos visuales a crear (mixaml.xaml)
La página web que hostea al plug in (default.html)
El código de validación de la existencia del plug in, este archivo es parte del SDK de Silverlight y generalmente no deberíamos de modificarlo (Silverlight.js)

Creo que con este pequeño demo, ya tienes una mejor idea de cómo comenzar con una aplicación silverligt. Hacia adelante, bastará con modificar el archivo XAML para poder cambiar el contenido visual, y si se desea código para responder a eventos, modificar el archivo html. Esto lo veremos en la siguiente entrega.

Suerte!

Guillermo Morales [blog]

Silverlight Parte 2 - Eventos desde XAML y JavaScript

Silverlight Parte 1