INTRODUCCION A SILVERLIGHT

Introducción a la tecnología silverlight, conceptos básicos de XAML y manejo de eventos con código manejado.

Al desarrollar aplicaciones web la problemática ha sido siempre incluir video de manera fácil y sin preocuparnos del tamaño de los mismos, esto era casi imposible, ya que en la práctica unos pocos segundos de vídeo con sonido puede representar un fichero de varios MB. Silverlight soporta el manejo rápido y eficiente de video de alta calidad en los principales navegadores que corren en Mac OS o Windows.
Esta tecnología de Microsoft permite el desarrollo de aplicaciones interactivas en ambiente web con contenido rico en animaciones, video, audio e imágenes; para múltiples plataformas de sistemas operativos (Windows, Macintosh y Linux a través de Moonlight), también tendrá versión para móviles iniciando con los S60 de Nokia.
Tiene una integración nativa de DRM y está basado en XML, lo que se traduce en una indexación más rápida y sencilla para los buscadores.

Versiones Silverlight

Actualmente existen las siguientes versiones de Silverlight:
Silverlight 1.0: Versión que soporta solamente Javascript como lenguaje de programación.
Silverlight 2 (antes conocida como 1.1): Permite desarrollar aplicaciones usando los lenguajes (Visual Basic, Visual C#, IronRuby, Ironpython), esta versión tiene licencia Go Live.
Silverlight usa una porción de la funcionalidad de XAML (eXtensible Application Markup Language); que es un lenguaje declarativo basado en XML, optimizado para escribir interfaces visuales y ricas desde el punto de vista grafico, fue diseñado para trabajar con Windows Presentation Foundation (WPF).

WPF/Everywhere (como se conoció en sus inicios a Silverlight), facilita el desarrollo de aplicaciones , permitiendo que un diseñador pueda crear un documento XAML que contenga gráficos, animaciones y escalas de tiempo y, por otra parte, un desarrollador puede adjuntar esta interfaz grafica a un proyecto e implementar su funcionalidad.

Para crear aplicaciones con Silverlight 2 necesitamos el siguiente ambiente de desarrollo:
Microsoft Visual Studio 2008 RTM : Permite debugging de aplicaciones silverlight e integración con Expression Blend.
Microsoft Silverlight 2 Software Development Kit Beta 1: Provee las librerías, documentación y ejemplos para desarrollar aplicaciones.
Microsoft Silverlight Tools Beta 1 for Visual Studio 2008: Incluye entre otras cosas plantillas de proyectos para Visual Basic y C#, Intellisense ,así como la integración con Expression Blend.
Para presentar las aplicaciones desarrolladas solo es necesario instalar en la maquina cliente Silverlight Rumtime.

En cuanto a seguridad de las aplicaciones creadas con silverlight, todas corren en un ambiente controlado, similar al HTMLDOM sandbox, es decir la aplicación no tiene privilegio para trabajar como administrador en el sistema o accesar a información que no forme parte de la aplicación.
XAML pone a nuestra disposición etiquetas para crear formas básicas, brushes , animaciones, transformaciones, entre otros.
A continuación se describen algunas etiquetas basicas:

ETIQUETAS Y ATRIBUTOS BASICOS DE XAML

<Canvas>

Es una superficie de dibujo, que define un área en la que pueden colocarse otros elementos.


<TextBlock >


Permite insertar texto.

Para mostrar música y video

<Storyboard>


Contiene una o mas animaciones


<TriggerActionCollection>


Usado para manejar animaciónes.


<TransformGroup>


Permite agregar múltiples transformaciones

<Rectangle>


Nos permite crear un rectángulo

<RadialGradientBrush >


Pinta o dibuja con un gradiente radial.

<UserControl >


Control que permite contener otros controles





Atributos propios de objetos: Son propiedades de objetos dentro de XAML, por ejemplo:

<Rectangle Canvas.Left="60" Canvas.Top="60" Width="280" Height="180" Fill="Red" Stroke="Blue" StrokeThickness="10"/>

El código anterior crea un rectángulo con ancho=280, alto=180, relleno=rojo, línea contorno azul y grosor del contorno 10. Todos estos atributos son propios del rectángulo.
Atributos Atachados: No tienen relación con el objeto a que se les asigna. Canvas.Left="60" y Canvas.Top="60", son propiedades del objeto canvas, mas sin embargo se le agregan como atributos al rectángulo, para determinar su posición dentro de la superficie de dibujo (Canvas).

Veremos un ejemplo básico sobre el manejo de eventos:
Iniciamos abriendo Visual Studio 2008 y creamos un nuevo proyecto silverlight.

A parecerá la siguiente ventana

Selecciona en la primera opción, para crear los dos proyectos.
Visual Studio 2008 RTM nos proporciona por medio de sus vistas la posivilidad de editar el codigo XAML y al mismo tiempo visualizar como severa en nuestro navegador.
Solo tenemos que dar clic en las pestañas de cada una de las vistas para tener acceso a ellas, ademas por defecto Visual Studio tiene configurado mostrar ambas vistas, como se muestra en la siguiente figura:

En el explorador de soluciones busca la pagina Default.aspx ,por el momento es la pagina principal de nuestra aplicación, sin embargo, esta página no contiene objetos Silverlight, así que borrala del proyecto.
Para borrarla dirigite al explorador de soluciones ,click derecho sobre la pagina y luego en eliminar.

Haremos que la página llamada nombredelproyectoTestPage.aspx, sea la pagina de inicio, dando click derecho sobre ella y luego en Establecer como pagina de inicio. Esta página ya contiene las extenciones para mostrar contenido silverlight, puedes constatarlo haciendo doble click sobre nombredelproyectoTestPage.aspx, observa que se encuentra el siguiente código:

Estas extensiones incluyen el control , por medio del cual, se carga el contenido Silverlight. Al compilar el proyecto por primera vez, en el explorador de soluciones podemos encontrar el archivo .xap;

Abre la carpeta del proyecto desde el explorador de Windows y busca el proyecto silverlight (se identifica porque no tiene _web), entra a la carpeta ClientBin, ahí encontraras el archivo .xap.Haz una copia del archivo y modifica su formato a .zip, descomprímelo, y veras que contiene algunos archivos, principalmente unas DLL con el código compilado C # Silverlight del proyecto.
El archivo .Xap contiene el archivo AppManifest.xaml que tiene las referencia de todas las DLL's que son requeridos por la aplicación y el atributo punto de entrada(clase principal que será instanciada para iniciar la aplicación).
En mi prueba he creado una aplicación con nombre "eventos", por lo que la DLL se llama "eventos.dll" ;el resto de las DLL son las dependencias que la aplicación requiere.
Bueno, ya es hora de hacer nuestra primera aplicación en silverlight.
En el explorador de soluciones, da doble click sobre Page.xaml,el codigo dentro del UserControl debe de quedar como el siguinte:

NOTA: Tener en cuenta que el atributo x:Class del Usercontrol debe hacer referencia al nombre del proyecto que se ha creado proyecto.Page .
Con el atributo x:Name asignas un nombre, con el que podrás tener control del objeto desde el condigo manejado.
Primero creamos un control vacío que se usara para crear otros controles (este ya lo genera Visual Studio 2008 )

UserControl x:Class="eventos.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="1000" Height="1000">

<!--Crea una superficie de dibujo de color blanco de 800x600 p-->

<Canvas x:Name="plantilla" Background="White" Width="1000" Height="1000">

<!-- Se crea un rectangulo llamado "rectangulo1", con atributos top y left con respecto al canvas-->

<Rectangle Canvas.Left="60" Canvas.Top="60" x:Name="rectangulo1"

Width="280" Height="180">

<!--Se crea un rectangulo llamado "rectangulo1", con atributos top y left con respecto al canvas-->

<Rectangle.Fill>

<!--Crea gradiente radial para el rectangulo especificamos su origen centro y radio horizontal y vertical, si no lo especifica por defecto es 0.5.-->

<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

RadiusX="0.5" RadiusY="0.5">

<!-- Especificamos el color y el puntos de transici›n del gradiente-->

<!-- el centro color amarillo-->

<GradientStop Color="Yellow" Offset="0" />

<!--cambia a color rojo a un radio de 0.25-->

<GradientStop Color="Red" Offset="0.25" />

<GradientStop Color="Blue" Offset="0.75" />

<GradientStop Color="White" Offset="1" />

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

<!--El siguiente codigo crea un texto multilinea.-->

<TextBlock TextWrapping="Wrap" FontSize="25" Foreground="Red">

<Run Text="ESTE ES UN EJEMPLO BASICO" />

<Run FontWeight="Bold" Text="UTILIZANDO " />

<Run FontStyle="Italic" Text="SILVERLIGHT 2" />

</TextBlock>

<!--Creamos un TextBlock con nombre "sigue" que inicialmente se le asigana opacidad 0,lo cual lo pone invisible-->

<TextBlock x:Name="sigue" Text="MEDIA CENTER MC" FontSize="25" Foreground="Red" Opacity="0"/>

</Canvas>

</UserControl>



Ya creamos nuestro XAML, ahora a darle vida, por medio de código manejado. En el explorador de soluciones, abre el archivo Page.xaml.cs , en este archivo podremos crear nuestras clases, métodos ,manejadores de evento, todo lo necesario para crear animaciones y aplicaciones ricas en contenido web usando código c#.
Lo que haremos es una aplicación que permita mover con el mouse el rectángulo que hemos creado,para ello construiremos el siguiente código

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;namespace eventos
{
public partial class Page : UserControl
{
// Tenemos que añadir código que permite arrastrar el rectangulo con el mouse, necesitamos saber si actualmente se esta arrastrando un objeto con el mouse. Para ello creamos las variables:
bool arrastrando = false;//indica si actualmente se esta arrastrando
Point arratrandoOffset; //Almacenara el punto donde se deja de arrastrarpublic Page()
{
InitializeComponent();
// Posteriormente en el constructor, despus de la llamada a InitializeComponent, creamos los manejadores de eventos de MouseLeftButtonDown, MouseLeftButtonUp, y MouseMove de la siguiente forma:rectangulo1.MouseLeftButtonDown += new MouseButtonEventHandler(rectangulo1_MouseLeftButtonDown);
rectangulo1.MouseLeftButtonUp += new MouseButtonEventHandler(rectangulo1_MouseLeftButtonUp);rectangulo1.MouseMove += new MouseEventHandler(rectangulo1_MouseMove);
}
public void rectangulo1_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
//Si se da clic sobre el rectangulola variable arrastrando sera cierta y se obtendra por medio de GetPosition las coordenadas de posición del mouse.arrastrando = true;
arratrandoOffset = e.GetPosition(rectangulo1);

rectangulo1.Opacity = 0.5;
}public void rectangulo1_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
//Si se suelta el boton izquierdo significa que no estamos arrastrando y por tanto hacemos que la variable arrastrando sea igual a falso arrastrando = false;
// Como no estamos arrastrando el rectangulo es necesario habilitarla el modo de captura del mouse para obtener las poción de inicio de arrastrado.
rectangulo1.CaptureMouse();
// Pero como solo nos interesa estar capturando la posición del mouse en el rectangulo,desabilitamos que capture de otros objetos. Con Opacity ponemos el rectangulo mas visible, y tambein en este metodo cambiamos el texto del textblock.
rectangulo1.ReleaseMouseCapture();
rectangulo1.Opacity = 1;sigue.Text="SILVERLIGHT 2";
}public void rectangulo1_MouseMove(object sender, MouseEventArgs e)
{
//si se esta arrastrandoif (arrastrando)
{ // se toma la posición del MousePoint mousePoint = e.GetPosition(this);
//Se reposiciona el rectangulo1 con respecto al canvas en (posicion del clic izquierdo cuando iniciamos a rrastrar-posicion de desplazamiento). Cambiamos el texto yla opacidad del textblock sigue
//Recuerda que mousePoint tiene la ultima posición de movimiento y arratrandoOffset ultima posición donde diste clic izquierdo.
Canvas.SetLeft(rectangulo1, mousePoint.X - arratrandoOffset.X);
Canvas.SetTop(rectangulo1, mousePoint.Y - arratrandoOffset.Y);Canvas.SetLeft(sigue, mousePoint.X);
Canvas.SetTop(sigue, mousePoint.Y - arratrandoOffset.Y);sigue.Text = "MEDIA CENTER";
sigue.Opacity = 1;
}
}
}
}

Nuestra aplicación, quedara asi: