.Net Adventure Center: Silverlight

Silverlight 2 Beta 2 y los archivos XAP

Mon, 09 Jun 2008 16:50:13 GMT

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.

TechNight: Desarrollo de aplicaciones RIA distribuidas con WCF y Silverlight

Sun, 08 Jun 2008 04:03:04 GMT

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 mostrando como así también algunos links que pueden ser de interés.

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

Charts en Silverlight, fácil con Visifire

Tue, 15 Apr 2008 15:44:12 GMT

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.

Rotando objetos con Silverlight 1.0

Fri, 05 Oct 2007 21:08:34 GMT

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

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

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

Drag and Drop con Silverlight 1.0

Mon, 24 Sep 2007 21:03:57 GMT

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.

Silverlight 1.1 Controls

Thu, 13 Sep 2007 14:00:12 GMT

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

Silverlight 1.0 Final Release

Wed, 05 Sep 2007 13:04:26 GMT

La versión final de Silverlight 1.0 ha sido liberada hoy junto a un nuevo refresh de Silverlight 1.1 y la versión final de Expression Media Encoder 1.0.

También hoy se ha anuncio un acuerdo con Novell para dar soporte a Monolight, la implementación open source de Silverlight 1.0 y 1.1, que les da soporte y acceso a información de primera mano que les permitirá un desarrollo más rápido y una compatibilidad asegurada.

A continuación les dejo algunos links con más información acerca de los anuncios y los links correspondientes a las descargas.

Ink con Silverlight

Tue, 07 Aug 2007 04:33:47 GMT

Windows Presentation Foundation hizo que el uso de tinta o Ink en nuestras aplicaciones sea algo muy simple, Silverlight no se queda atrás en este campo y es por ello que desarrolle este pequeño ejemplo utilizando Silverlight 1.1 para mostrarles lo simple que es implementar esta funcionalidad.

Primero comenzamos con el código XAML, como se ve, he declarado un elemento InkPresenter al cual le agregue algunos eventos de mouse que pasaremos a configurar en el code behind.

<Canvas

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

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

x:Name="parentCanvas"

Loaded="Page_Loaded"

x:Class="InkDemo.Page;assembly=ClientBin/InkDemo.dll"

Width="500"

Height="646">

<Canvas.Background>

</Canvas.Background>

<InkPresenter x:Name="inkPresenterPad"

Background="Transparent" Width="500" Height="646"

MouseLeftButtonDown="inkPresenterPad_MouseDown"

MouseMove="inkPresenterPad_MouseMove"

MouseLeftButtonUp="inkPresenterPad_MouseUp">

</InkPresenter>

</Canvas>

En la parte C# del ejemplo configuro las acciones de cada uno de los eventos del mouse, el Stroke que pienso utilizar, el color del mismo y por ultimo lo agrego al InkPanel para dibujar sobre el.

public partial class Page : Canvas

{

Stroke inkStroke;

public void Page_Loaded(object o, EventArgs e)

{

InitializeComponent();

}

void inkPresenterPad_MouseDown(object sender, MouseEventArgs e)

{

inkPresenterPad.CaptureMouse();

inkStroke = new Stroke();

inkStroke.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkPresenterPad));

inkStroke.DrawingAttributes.Color = Colors.Blue;

inkPresenterPad.Strokes.Add(inkStroke);

}

void inkPresenterPad_MouseUp(object sender, MouseEventArgs e)

{

inkStroke = null;

}

void inkPresenterPad_MouseMove(object sender, MouseEventArgs e)

{

if (inkStroke != null)

{

inkStroke.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkPresenterPad));

}

El resultado que obtendremos al correr el ejemplo es el siguiente.

Silverlight nos provee de muchas más funciones relacionadas con Ink, si están interesados en seguir investigando el tema a continuación les dejo algunos enlaces que les serán de utilidad.

Gavin Gear's Tech Blog

MIX07 - XD014 - Ink for Designers and Developers

Recursos para Silverlight 1.0 RC y 1.1 Alpha Refresh

Sun, 29 Jul 2007 22:55:27 GMT

Estos últimos días se han presentado varias actualizaciones de productos relacionados con Silverlight, es por ellos que he creado una pequeña recopilación de las mismas para que puedan comenzar a utilizar y aprovechar esta tecnología.

En primera instancia tenemos las actualizaciones que han sufrido las dos versiones de Silverlight, la 1.0 RC y la 1.1 Alpha Refresh y sus respectivos SDKs.

Luego tenemos a Expression Blend 2 August Preview, que ha sido actualizado para ser compatible con las nuevas versiones de Silverlight.

Expression Media Encoder también recibió un pequeño update para actualizar sus templates.

También están disponibles las Silverlight Tools Alpha for Visual Studio 2008 Beta 2, que nos proveen de templates de proyectos Silverlight para VB y C#, Intellisense en XAML, soporte para debugging y una mejor integración con Expression Blend.

Para finaliza tenemos a Microsoft ASP.NET Futures, el cual entre otras cosas nos provee unos cuantos server controls para integrar Silverlight en aplicaciones ASP.NET.

A continuación les dejo un listado de links de todas las herramientas comentadas anteriormente para su descarga.

Microsoft Silverlight 1.0 Release Candidate

Microsoft Silverlight 1.1 Alpha Refresh

Microsoft Silverlight 1.0 SDK Release Candidate

Microsoft Silverlight 1.1 SDK Alpha Refresh

Microsoft Expression Blend 2 August Preview

Microsoft Expression Media Encoder Preview Update

Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2

Microsoft ASP.NET Futures (July 2007)

Novedades de Silverlight 1.0 RC

Fri, 27 Jul 2007 03:14:31 GMT

Esta nueva versión de Silverlight 1.0 trae entre sus novedades, aparte de la tradicional actualización al archivo Silverlight.js, otras que afectan la manera en la que están desarrolladas aplicaciones creadas con la Beta 1, a continuación les dejo un listado de algunas de ellas.

Se elimina el prefijo “javascript:” en los manejadores de eventos

Silverlight 1.0 Beta

Silverlight 1.0 RC

Se elimina el namespace “Sys.”

Silverlight 1.0 Beta

Sys.Silverlight.createObject(....)

Silverlight 1.0 RC

Silverlight.createObject(....)

Se elimina Visibility.Hidden

Silverlight 1.0 Beta

sender.findName("mask").visibility = "Hidden";

Silverlight 1.0 RC

sender.findName("fsm").visibility = "Collapsed";

Desde ahora tambien todos los download son asincronicos, todos los elementos dentro de un <*.Resource> deberán poseer la propiedad x:Name, ya no podrá usarse mas “\” en las URI solo se aceptada el uso de “/”, también se ha agregado la propiedad root a Content para acceder al elemento root del XAML DOM y por último se han agregado nuevas APIs a MediaElement.

Estas son solo algunas de las novedades que trae Silverlight 1.0 RC con el correr de los días y con el uso que le demos iremos descubriendo todos los cambios que se han realizado, por mi parte les estaré comentando mis experiencias con la misma en sucesivos posts.

Webcasts sobre Silverlight en MSDN Latam

Tue, 08 May 2007 00:38:39 GMT

La gente de MSDN Latam ha preparado una serie de webcasts relacionados con Silverlight que serán presentados entre el 15 y 22 de este mes por Roberto Hernández-Pou, a continuación les dejo los links para que se registren a los mismos.

Introducción a Silverlight

Animaciones, Scripting y Multimedia con Silverlight

Código Manejado y Silverlight 1.1