Aprendiendo a utilizar Silverlight (Primera Parte)
Lo prometido es deuda, en mi ultimo post les había ofrecido comenzar una serie de post para aprender a utilizar Silverlight, así que aquí les entrego la primera Parte.
La gran aceptación que han tenido las tecnologías como AJAX (Asyncronous Javascript and XML) y Flash en las aplicaciones Web ha permitido a los usuarios poder navegar en sitios donde tienen una mejor interacción y experiencia, gracias a estas tecnologías podemos agregar elementos dinámicos y contenido multimedia a una página web, Microsoft no se podía quedar atrás en este tema y hace ya algún tiempo nos sorprendió con la noticia del lanzamiento de un nuevo producto llamado Silverlight, esta herramienta provee un entorno base muy bueno para que los desarrolladores puedan lograr mejorar la experiencia de usuario en sus aplicaciones web. Silverlight funciona sobre los sistemas operativos Windows y Mac, además es soportado en múltiples navegadores como Internet Explorer, Firefox y Safari.
¿Pero qué es Silverlight?
Para los que han escuchado, pero no han podido experimentar con Silverligth, éste es un Plug In que instalamos en nuestra máquina y que a través podemos presentar videos y audio, realizar algún tipo de transformación o animaciones y que básicamente ayuda a mejorar la forma en que presentamos la información en una página web. Silverlight tiene dos versiones la 1.0 que esta ya en producción (Sobre esta basare mis articulos) y la versión 2.0 (Antes 1.1) la cual esta en versión beta.
La versión Silverlight 1.0 esta basada en un lenguaje declarativo llamado XAML, así mismo utiliza Javascript para responder a los eventos y agregar funcionalidad. Sin embargo, es totalmente compatible con plataformas que hoy en día tenemos disponibles como por ejemplo ASP.NET AJAX.
Comenzando a desarrollar una aplicación Silverlight
Silverlight hace uso de algunas tecnologías para hacer que todo funcione sobre una pagina Web. En primer lugar tenemos a XAML, es cual es utilizado para definir la presentación del contenido, XAML es un lenguaje de marcado que esta basado en XML y es utilizado en Windows Presentation Foundation. De hecho Silverlight, utiliza un subconjunto de toda la especificación de XAML, esto con el fin de mantener liviano el download del plug in y de esta forma facilitar su instalación.
Otra herramienta clave es Javascript, el cual permite crear la instancia de Silverlight en una página, así como también acceder programaticamente a los objetos y poder responder a los eventos.
Cuales son los pasos para crear una aplicación web con silverlight:
- Crear una nueva aplicación web en Visual Studio o Web Developer Express
- Añadir un archivo Silverlight.js al sitio
- Crear un archivo XAML que será consumido por silverlight
- Agregar una página web con un <div> que será el contenedor para la instancia del control Silverlight
- Agregar un archivo CreateSilverlight.js
- Invocar el método Silverlight.CreateObject
- Referenciar los archivos Silverlight.js y CreateSilverlight en la pagina web creada
Pareciera un proceso bastante complicado, sin embargo podemos hacer uso del SDK 1.0 para silverlight, el cual ya contiene plantillas y ejemplos para poder comenzar a desarrollar sitios web con silverlight.
Para hacer una aplicación con silverlight no es necesario tener Visual Studio, lo podemos hacer desde un notepad. Claro!, esta no es la manera más fácil, pero quería hacer la aclaración. Definitivamente recomiendo utilizar Visual Studio si queremos tener una mejor experiencia y ser más productivos.
Lo que haremos a continuación es hacer download de las herramientas de silverlight para visual studio 2008. (Si todavía utilizan Vs2005 el download del SDK 1.0 contienen plantillas para ser utilizadas). Ojo que este download es algo pesado (54Mb), ahora es grande el archivo debido a que estas herramientas ya traen también las plantillas para desarrollar aplicaciones con la versión 2 beta de silverlight. Nota: Estas herramientas pueden ser utilizadas únicamente sobre Visual Studio Standar o arriba, no funciona con la versión Web Developer Express. Sin embargo si trabajan con la versión express pueden utilizar las plantillas incluidas en el SDK.
Comenzaremos Abriendo un "New Web Site" y seleccionamos la Plantilla "Silverlight Script Web"
Esta acción crea un nuevo sitio web pero existen algunos elementos ya definidos dentro del mismo. Hey!, acaso son los pasos para crear una aplicacion Web Silverlight ? , efectivamente. Esta plantilla ya hace el trabajo por nosotros. A continuación vemos los archivos creados:
Detengamonos un poco y verifiquemos los archivos que aparecen en la imagen contra los pasos descritos con anterioridad. ....
.............
Ven alguna Diferencia?, efectivamente el archivo CreateSilverlight.js no existe, bueno esto es por que la plantilla define el Script de creación del control Silverlight dentro de la página Default.html.
1: <div id="silverlightPlugInHost">
2: <script type="text/javascript">1:2: if (!window.Silverlight)3: window.Silverlight = {};4:5: Silverlight.createDelegate = function(instance, method) {6: return function() {7: return method.apply(instance, arguments);8: }9: }10:11: var scene = new WebSilverlight.Scene();12:13: Silverlight.createObjectEx({14: source: 'Scene.xaml',15: parentElement: document.getElementById('silverlightPlugInHost'),16: id: 'silverlightPlugIn',17: properties: {18: width: '100%',19: height: '100%',20: background:'white',21: version: '1.0'22: },23: events: {24: onLoad: Silverlight.createDelegate(scene, scene.handleLoad),25: onError: function(sender, args) {26: var errorDiv = document.getElementById("errorLocation");27: if (errorDiv != null) {28: var errorText = args.errorType + "- " +29: args.errorMessage;30:31: if (args.ErrorType == "ParserError") {32: errorText += "<br>File: " + args.xamlFile;33: errorText += ", line " + args.lineNumber;34: errorText += " character " + args.charPosition;35: }36: else if (args.ErrorType == "RuntimeError") {37: errorText += "<br>line " + args.lineNumber;38: errorText += " character " + args.charPosition;39: }40: errorDiv.innerHTML = errorText;41: }42: }43: },44: context: null45: });46:</script>
3: </div>
Como vemos en el código anterior, podemos observar que en la pagina Default.html se agrego codigo de javascript. Acá realmente lo que nos interesa son 2 cosas:
- Notar que dentro de la pagina default.html se ha agregado un <div id="silverlightPlugInHost">, este será el contenedor en donde instanciaremos el control de silverlight
- Dentro del Codigo Javascript se invoca la función Silverlight.createObjectEx, esta función es utilizada para inicializar el control de silverlight en nuestra página. Notar que la propiedad source hace referencia al archivo Scene.Xaml el cual contiene los elementos de presentación.
Otro aspecto que debemos notar es que el archivo Scene.Xaml tiene asociado un archivo llamado Scene.js
Veamos el codigo del Archivo
1: if (!window.WebSilverlight)
2: window.WebSilverlight = {};
3:
4: WebSilverlight.Scene = function()
5: {
6: }
7:
8: WebSilverlight.Scene.prototype =
9: {
10: handleLoad: function(plugIn, userContext, rootElement)
11: {
12: this.plugIn = plugIn;
13:
14: // Sample button event hookup: Find the button and then
15: //attach event handlers
16: this.button = rootElement.children.getItem(0);
17:
18: this.button.addEventListener("MouseEnter",
19: Silverlight.createDelegate(this, this.handleMouseEnter));
20: this.button.addEventListener("MouseLeftButtonDown",
21: Silverlight.createDelegate(this, this.handleMouseDown));
22: this.button.addEventListener("MouseLeftButtonUp",
23: Silverlight.createDelegate(this, this.handleMouseUp));
24: this.button.addEventListener("MouseLeave",
25: Silverlight.createDelegate(this, this.handleMouseLeave));
26: },
27:
28: // Sample event handlers
29: handleMouseEnter: function(sender, eventArgs)
30: {
31: // The following code shows how to find an element by name and call a method on it.
32: var mouseEnterAnimation = sender.findName("mouseEnter");
33: mouseEnterAnimation.begin();
34: },
35:
36: handleMouseDown: function(sender, eventArgs)
37: {
38: var mouseDownAnimation = sender.findName("mouseDown");
39: mouseDownAnimation.begin();
40: },
41:
42: handleMouseUp: function(sender, eventArgs)
43: {
44: var mouseUpAnimation = sender.findName("mouseUp");
45: mouseUpAnimation.begin();
46:
47: // Put clicked logic here
48: alert("clicked");
49: },
50:
51: handleMouseLeave: function(sender, eventArgs)
52: {
53: var mouseLeaveAnimation = sender.findName("mouseLeave");
54: mouseLeaveAnimation.begin();
55: }
56: }
Si revisamos detenidamente este archivo podremos observar varias cosas. Haciendo uso de Prototipos inicializamos la escena del control Silverlight para manejar los eventos del mouse
1: handleLoad: function(plugIn, userContext, rootElement)
2: {
3: this.plugIn = plugIn;
4:
5: // Sample button event hookup: Find the button
6: //and then attach event handlers
7: this.button = rootElement.children.getItem(0);
8:
9: this.button.addEventListener("MouseEnter",
10: Silverlight.createDelegate(this, this.handleMouseEnter));
11: this.button.addEventListener("MouseLeftButtonDown",
12: Silverlight.createDelegate(this, this.handleMouseDown));
13: this.button.addEventListener("MouseLeftButtonUp",
14: Silverlight.createDelegate(this, this.handleMouseUp));
15: this.button.addEventListener("MouseLeave",
16: Silverlight.createDelegate(this, this.handleMouseLeave));
17: },
Posteriormente a esta declaración se definen las funciones que capturarán los eventos que fueron registrados, ejemplo:
1: // Sample event handlers
2: handleMouseEnter: function(sender, eventArgs)
3: {
4: // The following code shows how to find an element by
5: // name and call a method on it.
6: var mouseEnterAnimation = sender.findName("mouseEnter");
7: mouseEnterAnimation.begin();
8: },
Ahora revisemos un poco el contenido del archivo Scene.Xaml
1: <Canvas xmlns="http://schemas.microsoft.com/client/2007"
2: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3: <Canvas.Resources>
4: <Storyboard x:Name="mouseEnter">
5: <ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF"
6: Storyboard.TargetName="highlightEllipse"
7: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
8: </Storyboard>
9: <Storyboard x:Name="mouseDown">
10: <ColorAnimation Duration="00:00:00.2" To="#22000000"
11: Storyboard.TargetName="highlightEllipse"
12: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
13: </Storyboard>
14: <Storyboard x:Name="mouseUp">
15: <ColorAnimation Duration="00:00:00.2" To="#3DFFFFFF"
16: Storyboard.TargetName="highlightEllipse"
17: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
18: </Storyboard>
19: <Storyboard x:Name="mouseLeave">
20: <ColorAnimation Duration="00:00:00.25" To="#00FFFFFF"
21: Storyboard.TargetName="highlightEllipse"
22: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
23: </Storyboard>
24: </Canvas.Resources>
25:
26: <Canvas Width="120" Height="44">
27: <Rectangle StrokeThickness="4" RadiusX="17" RadiusY="36"
28: Width="120" Height="44" Stroke="#46000000">
29: <Rectangle.Fill>
30: <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
31: <GradientStop Color="gray" Offset="0.242"/>
32: <GradientStop Color="black" Offset="0.333"/>
33: </LinearGradientBrush>
34: </Rectangle.Fill>
35: </Rectangle>
36: <TextBlock Width="67" Height="23.2" Canvas.Left="29" Canvas.Top="10"
37: Foreground="#FFEFEFEF" Text="Click Me" />
38: <Rectangle StrokeThickness="4" RadiusX="16" RadiusY="36" Width="104"
39: Height="32" Canvas.Left="8" Canvas.Top="1.3">
40: <Rectangle.Fill>
41: <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
42: <GradientStop Color="#00FFFFFF" Offset="0.13"/>
43: <GradientStop Color="#FFFFFFFF" Offset="1"/>
44: </LinearGradientBrush>
45: </Rectangle.Fill>
46: </Rectangle>
47: <Rectangle RadiusX="17" RadiusY="36" Width="114" Height="38"
48: Fill="#00FFFFFF" x:Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>
49: </Canvas>
50: </Canvas>
Como bien había definido anteriormente, XAML es el lenguaje utilizado para definir la Interfaz de la aplicación. Yo se que parece complicado, pero por el momento no se preocupen por lo que esta definido en este ejemplo, lo que me interesa es que se comprenda el concepto, más adelante en otros posts explicaremos a detalle particularidades de XAML. Veamos a continuación el siguiente codigo:
1: <Canvas Width="120" Height="44">
2: <Rectangle StrokeThickness="4" RadiusX="17" RadiusY="36"
3: Width="120" Height="44" Stroke="#46000000">
4: <Rectangle.Fill>
5: <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
6: <GradientStop Color="gray" Offset="0.242"/>
7: <GradientStop Color="black" Offset="0.333"/>
8: </LinearGradientBrush>
9: </Rectangle.Fill>
10: </Rectangle>
11: <TextBlock Width="67" Height="23.2" Canvas.Left="29" Canvas.Top="10"
12: Foreground="#FFEFEFEF" Text="Click Me" />
13: <Rectangle StrokeThickness="4" RadiusX="16" RadiusY="36" Width="104"
14: Height="32" Canvas.Left="8" Canvas.Top="1.3">
15: <Rectangle.Fill>
16: <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
17: <GradientStop Color="#00FFFFFF" Offset="0.13"/>
18: <GradientStop Color="#FFFFFFFF" Offset="1"/>
19: </LinearGradientBrush>
20: </Rectangle.Fill>
21: </Rectangle>
22: <Rectangle RadiusX="17" RadiusY="36" Width="114" Height="38" Fill="#00FFFFFF"
23: x:Name="highlightEllipse" Canvas.Left="3" Canvas.Top="3"/>
24: </Canvas>
25: </Canvas>
En este bloque lo que hacemos es definir dentro de un Canvas (El cual es como una hoja de papel a la cual le podemos agregar controles y donde podemos dibujar el contenido del control). Dentro de este Hay dos Rectángulos y un TextBlock, por ejemplo el textblock es un control que permite agregar texto a su contenido (tal y como un Textbox de winforms o asp.net). Las otras propiedades definen los colores y estilos de presentación.
Siguiendo en la revisión del contenido del archivo Scene.Xaml :
1: <Storyboard x:Name="mouseEnter">
2: <ColorAnimation Duration="00:00:00.25" To="#3DFFFFFF"
3: Storyboard.TargetName="highlightEllipse"
4: Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />
5: </Storyboard>
Un storyboard es un elemento que nos permitira agregar animaciones a nuestro control. Para los que han utilizado Flash esto es conocido. A travez del storyboard podremos agregar todas las animaciones y transformaciones que deseamos realizar.
PREGUNTA: ¿Y tengo que aprender todo este rollo de XAML para silverlight?, la respuesta es si y no, me explico: Si por que es bueno conocer la estructura y sintaxis de XAML, pero no les pido aprender de memoria todos estos elementos. No, por que afortunadamente, tenemos una herramienta que hace todo este trabajo por nosotros. Se trata de Expression Blend. Esta herramienta la cubrieremos en posts mas adelante.
Bien, si queremos observar el resultado de esto en nuestro navegador, hacemos click derecho sobre el archivo Default.html y seleccionamos la opción View in Browser. El resultado deberia verse de la siguiente forma:
Conclusión
En esta primera entrega hemos aclarado ¿Que es silverlight?. Hemos visto que Silverlight 1.0 depende de dos herramientas claves que son XAML y javascript. También hemos visto como crear una aplicación silverlight desde visual studio y cual es el contenido generado por la plantilla.
En los próximos posts entraremos más a detalle a como hacer nuestra primer aplicación en silverlight.
HASTA LA PROXIMA!!!!
Zip del Sitio web Creado: Bajar Zip
Saludos,
Carlos A. Lone