paulo.arancibia

Leyendo el ultimo post de Scott Guthrie sobre las nuevas features de Silverlight, note que no se hablo del cambio en el modelo de “deployment” usado para las aplicaciones Silverlight, como sabrán cuando compilamos una solución Silverlight se crea un archivo .xap el cual no es más que un zip que contiene todas las DLLs necesarias para correr nuestra aplicación, este .xap viaja hasta el browser y luego es manipulado por el engine de Silverlight el cual se encarga de correr nuestra solucion, en la siguiente imagen pueden observar el contenido de dicho archivo compilado con la Beta1.

Notaran que además de la dll de nuestra aplicación, en este caso Anim.dll, también están incluidas un par de dlls con los controles usados por Silverlight.

En cambio en la siguiente imagen la cual corresponde a la misma solución pero ccompilada con la Beta2 solo se puede apreciar que se incluye en el .xap la dll correspondiente a nuestra solución y su correspondiente manifest.

Este approach hace que el runtime crezca un poco en tamaño, pero como contraparte tenemos que nuestras aplicaciones son más livianas, me parece un cambio inteligente, pero espero que el tamaño del runtime se mantenga controlado.

En próximos posts les iré mostrando algunas de las nuevas features que se incluyen en esta Beta de Silverlight 2.

El pasado 6 de junio junto a Edgardo Rossetto estuvimos presentando en las oficinas de Microsoft Argentina sobre desarrollo de aplicaciones RIA utilizando Silverlight y WCF, tal como prometí les dejo el código de las demos que estuvimos presentando como así también algunos links que les pueden ser de interés.

Technight Demos
Silverlight Screencasts & Quickstarts
Pictures Services
Microsoft Expression Community
Inkscape
Kaxaml

Visifire es una suite de componentes Silverlight para la visualización de datos, los mismos son muy fáciles de implementar y pueden ser utilizados en la mayoría de las plataformas para desarrollo Web.

La forma más fácil de comenzar a probar Visifire y comprobar el poder de esta suite es utilizando el Chart Designer, el cual es una herramienta online que permite la creación de charts interactivamente y cuyo resultado podemos embeber en cualquier pagina.

También como es de suponer, podemos programáticamente crear charts y configurar su apariencia, ya que contamos con una gran cantidad de elementos visuales para personalizar y elegir el tipo de chart cuyo número también es muy amplio.

public Page()

{
 InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded); 

}

public class Vendor

{

public string name;

public int sales;

public Vendor(string name, int sales)
 {

this.name = name;
 this.sales = sales;
 }
 } 

void Page_Loaded(object sender, RoutedEventArgs e)

{ CreateChart();
 }
 public void CreateChart()
 { 

//Inicializamos el chart y los elementos que lo componen

Visifire.Charts.Chart chart = new
 Visifire.Charts.Chart();

Visifire.Charts.DataSeries dataSeries = new
 Visifire.Charts.DataSeries();

Visifire.Charts.DataPoint dataPoint;
 Visifire.Charts.Title title = new
 Visifire.Charts.Title();

//Configuración de las características visuales 

title.Text = “Sales in millions”;
 chart.Children.Add(title);
 chart.Width = 600;
 chart.Height = 400;
 chart.AnimationEnabled = true;
 chart.Theme = “Theme1″;
 chart.AnimationType = “Type3″;
 chart.UniqueColors = true; 

chart.View3D = true;

//DataSource

List<Vendor> people = new List<Vendor>();

people.Add(new Vendor(“Paulo”, 55));
 people.Add(new Vendor(“Chorch”, 33));
 people.Add(new Vendor(“Lito”, 66));
 people.Add(new Vendor(“Ed”, 37)); 

people.Add(new Vendor(“Max”, 21));

//Enlazamos los datos de la lista con los DataPoints

people.ForEach(delegate(Vendor v)
 {
 dataPoint = new Visifire.Charts.DataPoint();
 dataPoint.AxisLabel = v.name;
 dataPoint.YValue = v.sales;
 dataSeries.Children.Add(dataPoint);
 });

//Configuramos el tipo de chart a utilizar

dataSeries.RenderAs = “Doughnut”;
 chart.Children.Add(dataSeries);
 LayoutRoot.Children.Clear();
 LayoutRoot.Children.Add(chart);

}

Las siguientes imágenes muestran algunos de los resultados que podemos obtener al utilizar el código arriba expuesto.

Doughnut Charts

Pie Charts

Bars & Columns Charts

Para más información acerca de Visifire visiten su sitio donde encontraran gran cantidad de ejemplos, el código de la solución para bajar y su documentación.

Hoy veremos cómo rotar elementos en Silverlight 1.0, comenzaremos viendo el código XAML.

<Image Width=“485“ Height=“352“ Canvas.Top=“0“ Canvas.Left=“0“ Source=“images/control.png“/>

<Canvas x:Name=“rotateCanvasDial“ Width=“190“ Height=“190“ Canvas.Left=“180.554“ Canvas.Top=“99.313“ Background=“Transparent“ RenderTransformOrigin=“0.5,0.5“ Canvas.ZIndex=“1“>

<Canvas.RenderTransform>

<TransformGroup>

<RotateTransform x:Name = “canvasRotateDial“ CenterX=“0“ CenterY=“0“ Angle=“0“/>

</TransformGroup>

</Canvas.RenderTransform>

<Image x:Name=“dial“ Width=“190“ Height=“190“ Canvas.Left=“0“ Canvas.Top=“0“ Stretch=“Fill“ Source=“images/dial.png“/>

<Ellipse MouseMove=“rotateMouseMove“ MouseLeftButtonDown=“rotateMouseDown“ MouseLeftButtonUp=“rotateMouseUp“ Cursor=“Hand“ x:Name=“rotateHandleDial“ Width=“190“ Height=“190“ Fill=“Transparent“ Canvas.Left=“0“ Canvas.Top=“0“/>

</Canvas>

En primera instancia creamos un Canvas con una RotateTransform que será la encargada de girar el elemento, luego agregamos una imagen que será el elemento visual a rotar y una elipse que lo cubre, a esta elipse le agregue tres eventos MouseMove, MouseLeftButtonDown y MouseLeftButtonUp.

En la parte JavaScript, lo primero que haremos será declarar unas variables para diferentes parámetros que luego utilizaremos.

var lastPosition = 0;

var beginAngle = 0;

var isMouseDown = false;

var rotateCanvasName;

var rotateTransformName;

var imageZIndex = 0;

var rotateZIndex = 1;

En el evento MouseLeftButtonUp ,cambiamos el valor de la variable rotateMouseUp y liberamos al mouse.

function rotateMouseUp(sender, args)

{

isMouseDown = false;

sender.releaseMouseCapture();

}

En MouseLeftButtonDown, activamos la captura del mouse, cambiamos el valor de la variable isMouseDown y registramos la última posición del cursor del mouse.

function rotateMouseDown(sender, args)

{

sender.captureMouse();

isMouseDown = true;

lastPosition = args.getPosition(null);

objectName = sender.name;

rotateCanvasName = “rotateCanvasDial”;

rotateTransformName = “canvasRotateDial”;

}

Por último en el evento MouseMove capturamos la posición actual del cursor, seleccionamos la RotateTransform a utilizar, calculamos el CenterPoint y el ángulo dependiendo de los movimientos del mouse.

function rotateMouseMove(sender, args)

{

var position = args.getPosition(null);

if (isMouseDown)

{

var rotate = sender.findName(rotateTransformName);

var centerPoint = {};

canvasLeft = sender.findName(rotateCanvasName)["Canvas.Left"];

canvasTop = sender.findName(rotateCanvasName)["Canvas.Top"];

canvasWidth = sender.findName(rotateCanvasName).width;

canvasHeight = sender.findName(rotateCanvasName).height;

centerPoint.X = canvasLeft + canvasWidth/2;

centerPoint.Y = canvasTop + canvasHeight/2;

var radiansToDegrees = 360 / (2 * Math.PI);

var lastAngle = parseInt(Math.atan2(lastPosition.Y - centerPoint.Y, lastPosition.X - centerPoint.X) * radiansToDegrees);

var currentAngle = parseInt(Math.atan2(position.Y - centerPoint.Y, position.X - centerPoint.X) * radiansToDegrees);

var deltaAngle = currentAngle - lastAngle;

rotate.Angle += deltaAngle;

beginAngle += deltaAngle;

lastPosition = position;

}

}

Al ejecutar nuestro ejemplo se debería de ver como en la siguiente imagen.

Hoy les mostrare como hacer drag and drop de un objeto cualquiera utilizando Silverlight 1.0.

Para comenzar he creado un simple rectángulo al cual le he agregado tres eventos, uno para el evento MouseLeftButtonDown, otro para MouseLeftButtonUp y finalmente uno para MouseMove.

<Rectangle MouseLeftButtonUp=“onMouseUp” MouseLeftButtonDown=“onMouseDown“

MouseMove=“onMouseMove“ Width=“100“ Height=“100“ Fill=“#FF095B8D“ RadiusX=“10“ RadiusY=“10“ StrokeThickness=“5“ Canvas.Left=“10“ Canvas.Top=“10“/>

Pasando a la parte JavaScript, he declarado tres variables, dos para conocer la posición inicial del objeto a mover y otra para saber si estamos arrastrando o no el objeto.

var beginX;

var beginY;

var trackingMouseMove = false;

En el evento MouseDown, capturo la posición X e Y del mouse y las asigno a sus respectivas variables, también cambio el valor de la opacidad así vemos como cambia mientras lo arrastramos a 0.5, seteamos la variable trackingMouseMove a true y con sender.captureMouse() nos aseguramos de que este objeto sea el único que recibe eventos del mouse.

function onMouseDown (sender, mouseEventArgs)

{

beginX = mouseEventArgs.getPosition(null).x;

beginY = mouseEventArgs.getPosition(null).y;

sender.Opacity = .5;

trackingMouseMove = true;

sender.captureMouse();

}

En el evento MouseUp, solo seteamos la variable trackingMouseMove a false, y cambiamos al opacidad a 1.

function onMouseUp (sender, mouseEventArgs)

{

sender.releaseMouseCapture();

trackingMouseMove = false;

sender.Opacity = 1;

}

Para finalizar en el evento MouseMove consultamos la posición actual de X e Y para asignárselas a las propiedades Canvas.Left y Canvas.Top de nuestro objeto.

function onMouseMove (sender, mouseEventArgs)

{

if (trackingMouseMove == true)

{

var actualX = mouseEventArgs.getPosition(null).x;

var actualY = mouseEventArgs.getPosition(null).y;

sender["Canvas.Left"] += actualX - beginX;

sender["Canvas.Top"] += actualY - beginY;

beginX = actualX;

beginY = actualY;

}

}

El ejemplo terminado debería de lucir como se ve a continuación.

En el último refresh del SDK de Silverlight 1.1, se han agregado más user controls de ejemplo, entre los cuales se encuentran un button, un par de sliders, algunas scrool bars y un listbox.

Como verán la estética no es de lo mejor.

Pero con un poco de trabajo y la ayuda de Expression Blend 2 August Preview.

Podemos personalizarlos a nuestro gusto.

Download Silverlight 1.1 SDK Alpha Refresh September 2007