Desarrollo de Aplicaciones con Silverlight

Parte 1. Introducción

Silverlight es la tecnología recientemente propuesta por Microsoft para desarrollar aplicaciones web de alto impacto visual. El objetivo de esta serie de artículos es encaminarlos a cómo crear su primera aplicación con Silverlight.

Los archivos de una aplicación Silverlight
Todo 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:

• Default.html - Esta será la clásica página web a donde navegaremos. Invoca al plugin de Silverlight.

• Silverlight.js - Un archivo con las instrucciones en javascript para validar que el browser
tenga el plugin de Silverlight. Este archivo viene incluido en el SDK de Silverlight
y está listo para usarse, por lo que no es necesario modificarlo.

• Archivo *.xaml - Este archivo contiene las instrucciones en lenguaje XAML (eXtensible Application Markup Language) que definen los elementos de la interfaz de usuario (UI) de nuestra aplicación.

• Archivo *.js - Contendrá el código javascript necesario para invocar el plugin de Silverlight e indicarle el XAML que debe cargar.

Veamos ahora el contenido inicial de cada archivo.

Listado 1. Default.html













Como se dan cuenta, esta página es muy sencilla. Carga un par de archivos de javascript e invoca una función para cargar nuestro componente de Silverlight.

Como ya se indicó, el archivo Silverlight.js ya viene incluido en el SDK de Silverlight y no se modifica, así que solo necesitamos ponerlo en un directorio de donde podamos cargarlo.

Listado 2. crearSilverlight.js
function crearPluginSilverlight()
{
Silverlight.createObject(
“mixaml.xaml”, // El XAML a pintar.
hostdelplugin, // Variable que apunta al DIV host.
“miHostdelPlugin”, // El ID de la etiqueta DIV host.
{
width:’300’, // Ancho del plugin en pixeles
height:’300’, // Alto del plug in en pixeles
inplaceInstallPrompt:false, // Indica si pregunta si se
// instala el plugin si no es la
// versión correcta
background:’#D6D6D6’, // Color Background del plugin
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 contiene la función que invocamos desde el html, lo que hace es indicarle al navegador que hay que invocar al método createObject del objeto Silverlight para poder crear un plugin de acuerdo a ciertos parámetros.

Listado 3. mixaml.xaml

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



Como habíamos indicado, el archivo xaml define la parte visual. Por lo pronto, lo único que tenemos definido es un canvas vacío, el cual vamos a utilizar para desplegar elementos visuales.

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


Figura 1. Camvas en blanco

El color del fondo del plugin debe ser el indicado de acuerdo a los parámetros que dimos en nuestra función. Ahora crearemos el contenido visual de nuestra aplicación.

Modificando el archivo XAML
Como ya vimos, nuestro archivo mixaml.xml contiene el XAML para definir el contenido visual. Todo se pinta dentro de un lienzo sobre el cual se puede pintar y posicionar elementos. De esta manera, si modificamos nuestro archivo mixaml.xaml para que quede como el listado 4, obtendremos un despliegue como el de la figura 2.

Listado 4. mixaml.xml invocando elementos visuales

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


Canvas.Top=”30” Canvas.Left=”30” Fill=”Blue”
Height=”100” Width=”100” />


Canvas.Top=”80” Canvas.Left=”80” Fill=”Red”
Height=”100” Width=”100” />


Canvas.Top=”130” Canvas.Left=”130” Fill=”Green”
Height=”100” Width=”100” />



Figura 2. Canvas con elementos viuales

¡Perfecto! Has creado tu primera aplicación Silverlight. En la siguiente entrega de esta serie estaremos viendo 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)

Referencias
[developersdotnet.com]

Acerca del Autor
Guillermo Morales colabora actualmente en InterSoftware, empresa dedicada a la capacitación especializada en desarrollo de software. Con un perfil técnico,
se ha desenvuelto en varias áreas del proceso de desarrollo de aplicaciones, desde la implementación, hasta la administración de proyectos. Es cofundador de la comunidad de desarrollo en México www.developersdotnet.com en donde frecuentemente se reúne con otros expertos de desarrollo de aplicaciones para la difusión de nuevas tecnologías.