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

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

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.

• Silverlight 1.0 Released and Silverlight for Linux Announced (Scott's Blog)
• Microsoft/Novell Collaboration on Silverlight (Miguel de Icaza's Blog)
• Microsoft Silverlight 1.0
• Microsoft Silverlight 1.1 Alpha September Refresh
• Microsoft Silverlight 1.1 SDK Alpha September Refresh
• Microsoft Expression Encoder 1.0

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>

    <ImageBrush ImageSource="images/notepad.png"/>

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

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

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)

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

• Using Silverlight Brushes for Color, Gradient and Video
• Using the Silverlight Downloader Object
• Basic Keyboard Input with Silverlight
• Adding Ink Support to a Silverlight-based Application
• 2D Geometries in Silverlight
• Building Video Overlays with Silverlight
• Creating a Video Scrubbing Control with Silverlight
• Using Silverlight for Full Screen Experiences
• Silverlight Event Handling with JavaScript
• Animating and Clipping Video with Silverlight
• Creating Vector Art for Silverlight with Expression Blend
• Animating Vector Art for Silverlight with Expression Blend Part I
• Animating Vector Art for Silverlight with Expression Blend Part II
• Animating Raster Art for Silverlight with Expression Blend
• Using Expression Blend to Control Silverlight Media Playback
• Delivering Parameterized Silverlight Content with ASP.NET
• Delivering Parameterized Silverlight Content with PHP
• Delivering Parameterized Silverlight Content with Java
• Using AJAX to Dynamically Update Silverlight Content
• Creating a Video Playlist with Silverlight and ASP.NET
• Overlaying HTML and Silverlight Content
• Real-Time Data Update with Silverlight and Web Services

Desde el siguiene link podran bajar u observar varias de las sesiones que se presentaron en esta edicion de MIX, muchas de ellas abordan temas relacionados con Silverlight.

MIX07 Sessions

Para finalizar les dejo el link a un poster donde podrán observar todos los componentes y herramientas que componen el ecosistema de Silverlight. 

Download Silverlight Poster