albloguera

• Estructura Proyecto Silverlight (2ª Parte)

La teoria esta muy bien para tomar un primer contacto con una nueva tecnología, pero no hay nada como ponerse con las manos en la masa, en nuestro caso en el teclado. Vamos a ello.

El ejemplo, como ya anticipamos, consistirá en generar un control Silverlight que contendrá un Gráfico de Barras, la cuales cambiaran su áltura en función de los valores asignados a cada una de ellas. Los valores serán introducidos en tres cajas de texto (simples componentes HTML).

Para empeza abrimos Visual Studio, y creamos un nuevo proyecto Silverlight. Si recordamos, la interfaz de nuestro control esta definida en un fichero con extension XAML. Aunque podríamos crear nuestro control editando directamente este fichero, vamos a hacer uso de Expression Design, herramienta que ofrece Microsoft para crear interfaces de un modo profesional. Como el uso de esta herramienta se escapa del ambito de este articulo, partiremos de un fichero XAML generado por Expression Design.

Fichero XAML:

Para empezar resumamos los elementos que podemos encontrarnos en un fichero XAML de Silverlight.

Clase	Descripción
Canvas	Es un objeto contenedor. En el podrémos añadir otros elementos e incluso otros objetos canvas.
Textblock	Elemento que contiene texto, en una o varias lineas.
Image	Elemento que puede mostrar una imagen(png,jpeg...)
Rectangle, Ellipse, Line, Polyline, Polygon	Representa distintas figuras 2D
Path	Representa figuras no geométricas
MediaElement	Elemento que controla fichero de audio/video

Los elementos son posionados dentro del elemento canvas prinipal. La posicion de un objeto se especifica mediante las propiedades Top y Left, que son relativas al elemento canvas contenedor (un elemento con Top=0 y Left =0, tiene su origen en la esquina superior izquierda del objeto contenedor). Veamos como definimos un objeto rectángulo, que representa una barra de nuestro gráfica:

Detalles importantes:

1. Le damos un nombre a los objetos. De esta manera podremos referirnos al los elemetos desde codigo.

2. Posicionamos los elementos respecto al objeto Canvas contenedor, haciendo uso de las propiedades Top y Left de la clase Canvas.

Además podemos observar otra forma de especificar propiedades, como el usado para especificar el relleno de la figura (Rectangle.Fill). Como comentamos al principio del articulo, el fichero ha sido generado mediante una herramienta de diseño y unicamente se ha añadido codigo para definir animaciones y trasformaciones sobre los objetos.

Animaciones:

Definir una animación sobre un objeto no es complicado: se establece el estado inicial. el estado final, y la duracion de la animacion. Silverlight realiza el resto. Cuando definimos el estado incial y final, lo que hacemos es establecer el valor de una propiedad de objeto al comienzo de la animacion y cual será el valor que tenga esa propiedad al final.

Un objeto animación en Silverlight trabaja solo sobre una propiedad, lo cual implica que una animación solo puede cambiar el valor de una propiedad. Para animar una propiedad, es decir, cambiar valor de la propiedad, necesitamos una clase Animación que soporte el tipo de datos de la propiedad que queremos animar. Por ejemplo, nuestro objeto Barra crecerá y decrecerá en función de un valor especificado. Para ello modificaremos la propiedad Height del objeto, por lo que animaremos dicha propiedad. Esta propiedad es de tipo Double, y necesitamos una animación que soporte este tipo de datos. Usaremos una animación de tipo DoubleAnimation. En cualquier caso Silverlight nos ofrece tres tipos de animaciones para actuar sobre distintos tipos de propiedades:

• DoubleAnimation
• ColorAnimation
• PointAnimation

Dicho esto veamos como definiriamos nuestras animaciones:

Bueno en este código hay algo mas que un objeto animación. Vayamos por partes. Todos los objetos Silverlight tienen una propiedad Resources, que no es mas que una colección de objetos que no son elementos. En este caso vamos a usar la propiedad Resources de nuestro Canvas principal, y le vamos a añadir nuestras animaciones. Añadimos nuestras animaciones a la coleccion Resources porque estan van a estar controlados desde nuestro código y no van a reponder a ningun evento (por ejemplo loaded) de la aplicación.

Pero claro un objeto Animación define unicamente un compormiento, necesitamos algo que controle la animación y además lo aplique a un objeto. Para eso tenemos los objetos StoryBoard. Además de ser un puente entre el objeto Barra y el objeto Animación nos proporciona metodos para pausar, activar y parar la animación. En un objeto Storyboard podemos agrupar varias animaciones y cada una puede actuar sobre un objeto distinto.

Transformaciones:

Un objeto Transform es un objeto que modifica la forma en que un elemento es dibujado, cambiando las coordenadas del sistema que usa. En nuestro ejemplo usamos un objeto Transform para las barras. Exactamente usamos un ScaleTrasnform con los valores scaleX=1 y scaleY=-1.

¿Qué sentido tiene esta trasnformación?. Cuando posicionamos nuestra barra, lo hacemos a traves de sus propiedades Top y Left, que son relativas al Canvas en el que está situado el elemento. Teniendo en cuenta que las Barras tendrán el mismo Top que la linea que define el eje X de la gráfica (por lo que tendrán este punto como origen), no es dificil imaginar que nuestra Barra se dibujará en sentido invertido al esperado. Para corregir esto le aplicamos una trasformacion que invierta el mapa de posicionamiento de nuestra barra en su sentido vertical.

Descargar Fichero Grafica.XAML

Antes de continuar viendo código y explicaciones, veamos el ejemplo en funcionamiento. 

Fichero CS

Como podemos ver, nuestra mini-aplicacion Silverlight está formada por:

• un control Silverlight, que contiene una gráfica (con sus barras), y un boton.

• una  zona de componentes HTML. 

Sigamos el flujo de nuestra aplicación.  Una vez se han introducidos valores en las cajas de texto, pulsamos el botón "Dibujar". Asi esta definido el boton en el fichero XAML.

Eventos

En Silverlight no tenemos un evento onClick (evento de alto nivel), sino que tenemos los eventos MouseLeftButtonDown -acto de pulsar el boton- y MouseLeftButtonUp -acto de soltar el boton. Estos son algunos de los eventos que tienen los controles Silverlight.

• GetFocus

• KeyDown, KeyUp

• Loaded

• MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp

Para nuestro botón hemos definido las dos acciones, porque queremos realizar un cambio en el gradiente del relleno del botón. Asi estan definidos los manejadores de estos eventos:

Este es el flujo del evento OnClickLeftMouseDown:

1. Se llama al método CambiarGradiente, que invierte los colores con lo que se forma el gradiente que pinta el  botón.

2. Recuperamos los valores introducidos por el usuario.

3. Establecemos el valor inicial de la animación, que será el valor actual de la propiedad Height de la barra.

4. Calculamos el nuevo valor de la altura de cada una de las barras, proporcionalmente a la altura del Eje Y de la gráfica.

5. Establecemos el valor final de la animación, que en este caso será la nueva altura calculada.

6. Iniciamos la animación llamando al metodo Begin() de los objetos Storyboard.

 El manejador del evento MouseLeftButtonUp, lo único que hace es reestablecer los colores del botón llamando nuevamente al método CambiaGrandiete. Este método lo que hace es asignar a la propiedad "Fill" del botón un nuevo gradiente en función de los colores que recibe como parametros.

 

Comunicación Silverlight - HTML

En este caso la comunicación se limita a obtener los valores introducidos por el usuario en unas cajas de texto. Para conseguir esto Silverlight incluye un conjunto de clases que definen los elementos HTML DOM. No vamos a profundizar en este punto, pero si decir que aunque en este caso nosotros vamos a simplemente leer un valor, podríamos hacer por ejemplo que el evento de un componente HTML sea  capturado por Siverlight. Veamos nuestra comunicacion:

Recuperamos un elemento input buscando por su "Id", para lo cual usamos el metodo GetElementById(value) del objeto Document,  que nos devuelve un  objeto de la clase HtmlElement. Asignar y obtener valores es trivial con los metodos GetAttribute y SetAttribute.

Un detalle que no devemos pasar por alto es el contenido de la funcion Page_loaded, que aunque tenga unicamente una sola linea,  es la encargada de inicializar todos los elementos de nuestro control. Si echamos un vistazo al XAML, cuando definimos el Canvas principal, le indicamos que tiene que hacer para inicializar el control, mediante la propiedad Loaded, la cual nos dirige al manejador de eventos Page_Loaded.

Descargar Proyecto Grafico de Barras

Bueno con esto doy por terminado el minitutorial de Silverligth, esperando no haberme dejado mucho en el tintero. En cualquier caso, gustosamente reponderé las dudas que pudieran surgir.