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>
<!-- Este DIV será el contenedor del Plugin de Silverlight-->
<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!
Enviado
Mar 10 2008, 05:38 PM
por
gmorales