Baja el código de ejemplo aquí
Introducción
Como saben, Silvelight es la nueva tecnología de presentación para la web, multiplataforma que nos permite ofrecer contenidos ricos en gráficos y multimedia creado por Microsoft. Si quieres ver más detalles y descargar lo necesario para comenzar a desarrollar, te sugiero que visites http://www.microsoft.com/silverlight
Silverlight en distintos sabores
Silverlight Alpha 1.1, el cual nos permite desarrollar aplicaciones utilizando código .NET, lo cual es una ventaja enorme para la gran cantidad de desarrolladores , además de la velocidad y las operaciones disponibles en un framework reducido de 4.5 MB Aprox. Una de las características interesantes en la posibilidad de acceder al DOM con programación del lado del servidor.
Lo necesario para instalarlo:
· Microsoft VisualStudio 2008
· Silverlight Alpha Tools for VisualStudio 2008
· Silverlight 1.1 Alpha SDK
· Microsoft Expression Blend 2.0
Silverlight 1.0, utiliza exclusivamente JavaScript del browser para implementar la interacción del usuario con el objeto Silverlight, con un framework más pequeño (1.4 mb aprox) y sin la posibilidad de utilizar directamente recursos del servidor.
Lo necesario para instalarlo:
· Silverlight 1.0 SDK
· Microsoft VisualStudio 2008
· Microsoft Expression Blend 2.0
Gráficos de barras con información del lado del servidor con Silverlight 1.0
Si, como lo leen, inicialmente indicábamos que no hay interacción con recursos del servidor con Silverlight 1.0 de manera directa, pero veamos una forma “indirecta” que les va a servir a los desarrolladores ASP.NET y porque no decirlo, a los desarrolladores PHP.
Creando el diseño en Microsoft Expression Blend 2 December Preview
Para esto, utilicé como ejemplo el porcentaje de animales por raza que han sido visitados por un veterinario dentro de una granja (Off record: mi padre tiene una granja, por lo que me gustó este ejemploJ)
La idea es que la información asociada a perros, gatos, vacas y cerdos se vea reflejada en el gráfico. Cada barra fue diseñada con la herramienta de dibujo Rectangle y el Fill de cada uno de los rectángulos con la propiedad Gradient Brush,y luego, con la herramienta Brush Transform 
modificamos la dirección del relleno de tal manera de lograr el efecto de la figura 1. Cada objeto rectángulo tiene x:name, por ejemplo, la barra de los perros se llama barraPerros.
Figura 1- Aspecto General del Gráfico
Es importante señalar que cada barra tiene acompañado un objeto TextBlock con la propiedad text en null, es necesario setear el x:name de cada TextBlock, ejemplo (valorPerros, valorGatos,etc).
Animación de la Barra
Cada barra del grafico tiene asociada dos animaciones, las cuales le dará el efecto de iluminación cuando el mouse se mueva sobre ella. Estas animaciones serán llamadas desde la página mediante JavaScript, la cuales explicaremos más adelante.
 |
 |
![clip_image006[1]](https://geeks.ms/blogs/gperez/WindowsLiveWriter/beee4f0fbc3b_8AE/clip_image006%5B1%5D_thumb.jpg) |
La primera animación para crear el efecto de iluminación (MouseEnter) y la segunda animación es para volver al estado normal el color de la barra (MouseLeave). Con esto completamos el efecto que queremos lograr. Cada objeto Rectagle tiene entonces las siguientes propiedades:
…MouseEnter="BarPerroOn" MouseLeave="BarPerroOff" Cursor="Hand">
En donde BarrPeroOn y BarrPerroOff son funciones JavaScript que se gatillarán en los eventos MouseEnter y MouseLeave respectivamente.
|
| Inicio |
MouseEnter |
MouseLeave |
|
Ahora que tenemos construido el gráfico, junto con las animaciones, tenemos que asignarle los valores a la propiedad Height de cada barra, dependiendo de los valores que obtendremos de la base de datos. Para lograr esto, vamos a recordar que podemos asociar una función JavaScript que se ejecute en el evento Loaded del Canvas del Objeto Silverlight, entonces, con esta información vamos a realizar lo siguiente.
Generación de JavaScript mediante código manejado.
Podemos generar JavaScript mediante el Control Literal de ASP.NET. Para esto instanciamos un objeto StringBuilder que nos permitirá formar la función JavaScript.
Dim script As StringBuilder = New StringBuilder
script.Append(" <script type=’text/javascript’> function root_Loaded(sender,args) {")
script.Append(" sender.findName(‘barraPerros’).Height=’")
script.Append(altoBarraPerros.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorPerros’)[‘Canvas.Top’]=’")
script.Append(PosicionTextoPerros.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorPerros’).Text=’")
script.Append(TextoPerros)
script.Append("%’;")
script.Append(" sender.findName(‘barraGatos’).Height=’")
script.Append(altoBarraGatos.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorGatos’)[‘Canvas.Top’]=’")
script.Append(PosicionTextoGatos.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorGatos’).Text=’")
script.Append(TextoGatos)
script.Append("%’;")
script.Append(" sender.findName(‘barraVacas’).Height=’")
script.Append(altoBarraVacas.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorVacas’)[‘Canvas.Top’]=’")
script.Append(posicionTextoVacas.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorVacas’).Text=’")
script.Append(TextoVacas)
script.Append("%’;")
script.Append(" sender.findName(‘barraCerdos’).Height=’")
script.Append(altoBarraCerdos.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorCerdos’)[‘Canvas.Top’]=’")
script.Append(posicionTextoCerdos.ToString.Replace(",", "."))
script.Append("’;")
script.Append(" sender.findName(‘valorCerdos’).Text=’")
script.Append(TextoCerdos)
script.Append("%’;")
script.Append(" }</script>")
MyScript.Text = script.ToString
Sin entrar en mayor detalle, con sender.findName, accedemos a los objetos dentro de nuestro control Silverlight y podemos modificar sus propiedades como Height (para el alto de la barra), Canvas.Top, para la posición de cada objeto TextBlock y que no se traslape con su correspondiente barra, Text para setear la propiedad Text del TextBlock con el valor (redondeado en mi caso) del porcentaje. Puedes notar que se hace un remplazo de la coma (;) por el punto(.) esto es porque los valores, para que sean reconocidos como válidos en Silverlight deben tener puntos y no comas.
Datos de la base de Datos
Creamos una tabla con los valores por año, para poder filtrar por ese campo, y en donde tenemos indicadores por animales, cada uno de estos indicadores se verá reflejado en el gráfico.
La método que utilizaremos para la conexión tiene un argumento de entrada que es el año, el cual se obtendrá de un dropdownlist , en el que el usuario seleccionará el año para la confección del gráfico, ejecutamos la query y seteamos las variables de instancia.
Private Sub obtDatos(ByVal año As Integer)
Dim con As New SqlConnection("Data Source=.SQLEXPRESS;AttachDbFilename=C:demosilverlightgraficoDemoGraficoApp_DataAnimales.mdf;Integrated Security=True;User Instance=True")
Dim query As SqlCommand = con.CreateCommand
query.CommandText = "select Perros,Gatos,Vacas,Cerdos from porcentajes where año=@añoParam"
Dim añoparam As New SqlParameter("añoParam", Data.SqlDbType.Int)
añoparam.Value = año
query.Parameters.Add(añoparam)
Try
con.Open()
Dim dr As SqlDataReader = query.ExecuteReader
dr.Read()
Me.valorPerros = dr.Item("Perros")
Me.ValorGatos = dr.Item("Gatos")
Me.valorVacas = dr.Item("Vacas")
Me.valorCerdos = dr.Item("Cerdos")
dr.Close()
Catch ex As Exception
status.Text = ex.Message.ToString
Finally
con.Close()
End Try
End Sub
Ahora bien el alto de la barra se calcula mediante una fórmula sencilla, en donde la constante AltoBarra( que es el alto del y), y MarcaTexto, que nos sirve para calcular la posición del texto en relación al alto de la barra.
Para este ejemplo.
Const AltoBarra As Double = 415
Const MarcaTexto As Double = 430
Calculo de variables
Dim altoBarraPerros As Double = (valorPerros * AltoBarra) / 100
Dim altoBarraGatos As Double = (valorGatos * AltoBarra) / 100
Dim altoBarraVacas As Double = (valorVacas * AltoBarra) / 100
Dim altoBarraCerdos As Double = (valorCerdos * AltoBarra) / 100
‘Lo siguiente es para calcular la posición en donde irá el texto que indica el porcentaje
Dim PosicionTextoPerros As Double = MarcaTexto – altoBarraPerros
Dim PosicionTextoGatos As Double = MarcaTexto – altoBarraGatos
Dim posicionTextoVacas As Double = MarcaTexto – altoBarraVacas
Dim posicionTextoCerdos As Double = MarcaTexto – altoBarraCerdos
‘Seteamos el texto qye va en cada textblock del control
Dim TextoPerros As String = Math.Round(valorPerros).ToString
Dim TextoGatos As String = Math.Round(ValorGatos).ToString
Dim TextoVacas As String = Math.Round(valorVacas).ToString
Dim TextoCerdos As String = Math.Round(valorCerdos).ToString
Luego, con estos datos generamos el Javascript utilizando el control literal “MyScript”
Archivo animacionChart.js
Este archivo contiene las funciones JavaScript necesarias para iniciar las animaciones de las barras, veamos el contenido.
//Ejecutar la animación de la barra de la vacas
function BarVacaOn(sender,args){sender.findName("vacason").Begin(); }
function BarVacaOff(sender,args){sender.findName("vacasoff").Begin();}
//Ejecutar la animación de la barra de los perros
function BarPerroOn(sender,args){sender.findName("perroson").Begin();}
function BarPerroOff(sender,args){sender.findName("perrosoff").Begin();}
//Ejecutar la animación de la barra de los gatos
function BarGatoOn(sender,args){sender.findName("gatoson").Begin();}
function BarGatoOff(sender,args){sender.findName("gatosoff").Begin();}
//Ejecutar la animación de la barra de los cerdos
function BarCerdoOn(sender,args){sender.findName("cerdoson").Begin();}
function BarCerdoOff(sender,args){sender.findName("cerdosoff").Begin();}
Se observa que en cada función se obtienen la animación correspondiente y se ejecuta el método Begin para que se ejecute.
Archivo Grafico.aspx
Este archivo es bastante simple, tiene las referencias a los archivos JavaScript, un dropdownlist seteado con la propiedad AutoPostBack="True", el control Literal, para imprimir el JavaScript generado y la llamada a la función CreateSilverlight() que genera el control Silverlight y se encuentra en el archivo Silverlight.js.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Grafico.aspx.vb" Inherits="Grafico" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ejemplo Silverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="grafico.js"></script>
<script type="text/javascript" src="Chart.xaml.js"></script>
<script type="text/javascript" src="animacionChart.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="MyScript" runat="server"></asp:Literal>
Seleccione el año:<br />
<asp:DropDownList ID="DropAño" runat="server" AutoPostBack="True">
<asp:ListItem>2006</asp:ListItem>
<asp:ListItem Selected="True">2007</asp:ListItem>
</asp:DropDownList>
</div>
<div id="silverlightControlHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
<!– Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when debugging is completed –>
<div id=’errorLocation’>
<asp:Label ID="status" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Luego ejecutamos el demo y tenemos el siguiente resultado:
Vídeo de como funciona 🙂
Conclusión
Silverlight es una herramienta con la cual podemos dotar a nuestras aplicaciones Web de nuevos contenidos ricos en gráficos y multimedia. La facilidad con que podemos generar gráficos de alto impacto, como también crear animaciones es una potencialidad que sin duda debemos aprovechar en nuestros desarrollos. Así también la forma de acceder mediante Javascript para manejar los objetos dentro del XAML nos provee una poderosa herramienta. Este mismo ejemplo pudo ser generado con otras tecnologías del lado del servidor como lo es PHP, JSP, etc., permitiendo integrar Silverlight a desarrollos con distintas plataformas.
![clip_image006[1]](http://geeks.ms/blogs/gperez/WindowsLiveWriter/beee4f0fbc3b_8AE/clip_image006%5B1%5D.jpg)
