Creando una Barra de Herramientas con Silverlight

Como ya saben, silverlight viene a dar “luz” a la web, si bien algunos podrían pensar que nada nuevo esta pasando ya que existen tecnologías que hacen lo mismo, sin embargo, Silverlight tiene ventajas sobre esas tecnologías, por ejemplo las “escenas” no se convierten a un archivo compilado cerrado dando la posibilidad de modificarlo ( si es que así se setea) , Silverlight utiliza archivos XAML que contienen la información de los gráficos y animación. Además la programación ( que generalmente es lo que nos interesa) es bastante más amigable para nosotros, los desarrolladores.


La botonera (Ve el resultado de esta botonera haciendo click acá.)


La idea es crear una barra de herramientas animada, que nos pueda sirvir como menú de una pagina web. Hechemos un vistaso de cual es el resultado esperado ( este es solo un ejemplo, andaba falto de imaginación para los íconos).


clip_image002


Cada vez que se pasa el mouse sobre una imagen, se hace el efecto de zoom sobre el ícono, y cuando se presiona sobre él gira en 360 grados ( que lindo no?). El en ícono de Media Center , cuando haces click aparece una ventana con la autoría del este lindo ejemplo, jejeje.


clip_image004


Construcción


Para diseñar la toobar utilizamos Microsoft Expression Blend 2 y para lo programación, notepad ( si como leer, para nuestro ejemplo, nada más). Todos los íconos que utilizamos son PNG, con fondo transparente. El fondo es un rectángulo con los bordes redondeados.


Cada icono tiene asociando los siguientes eventos, las cuales harán llamadas funciones javascript correspondientes, las cuales van a gatillas las animaciones (al igual que el articulo del gráfico de barras)

MouseLeave=”runoffMouseEnter=”runonMouseLeftButtonDown=”runclick

 


Obviamente las llamadas a javascript corresponden a cada opción, es decir:

<script language=”javascript”>

 

function lupaon(sender,args){
     sender.findName(“lupaon”).Begin();
}

 

function lupaoff(sender,args){
     sender.findName(“lupaoff”).Begin();
}

 

function lupaclick(sender,args){
     sender.findName(“lupaclick”).Begin();
}

 

function panelon(sender,args){
     sender.findName(“panelon”).Begin();
}

 

function paneloff(sender,args){
     sender.findName(“paneloff”).Begin();
}

 

function panelclick(sender,args){
     sender.findName(“panelclick”).Begin();
}

 


function basureron(sender,args){
      sender.findName(“basureron”).Begin();

}

 

function basureroff(sender,args){
     
sender.findName(“basureroff”).Begin();
  }

 

function basureroclick(sender,args){
   
 sender.findName(“basureroclick”).Begin();
}

 

function runon(sender,args){
     sender.findName(“runon”).Begin();
}

function runoff(sender,args){
     sender.findName(“runoff”).Begin();
}

function runclick(sender,args){
    sender.findName(“runclick”).Begin();
}
function acercaclick(sender,args){
    sender.findName(“acercaon”).Begin();
}

 

function acercaoff(sender,args){
    sender.findName(“acercaoff”).Begin();
}
function blog(sender,args){
    window.open(“http://geeks.ms/blogs/gperez”,“_blank”);

 

}
</script>

 


Como podemos ver, en cada función javascript se llama al método Begin de cada animación.


 image


Entonces, como decíamos, cada ícono tiene su correspondiente (on,off, click), además existe 3 funciones adiciones(acercarclick,acercaoff, blog), las dos primeras son mostrar y ocultar el cuadro de “Acerca de…” una asociada al icono del media center, la otra asociada a la X para cerrar, recuerda que siempre que quieres hacer referencia a algún objeto debe estar su X:Name seteado. Blog es la función que se llama desde el pseudo link del banner,( solo es un textblock color azul y subrayado).


Debes fijarte en las posiciones cuando haces la animación, para que cuando aumentes de tamaño la imagen, está se vea bien. Recuerda hacer la animación que corresponde a cuando se hace zoom-in y la que hace zoom-out.


Viste que fácil es? Espero que te sirva.  🙂


Ve el resultado de esta botonera haciendo click acá.


Descarga los archivos desde acá.


 


Saludos,
Gonzalo.

Creando un Gráfico de Barras con acceso a Bases de Datos con SilverLight 1.0

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 clip_image002 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.

clip_image004

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 clip_image008 clip_image006[1]

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.

clip_image010

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:

img3

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.