Recibí una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los datos de un DataGrid. La respuesta es ¡Con DataBinding!

Muchas gracias.

Ok ok, la explicación larga. Primero vamos a hacer un modelo para datos de prueba:

using System.ComponentModel;

namespace SilverlightApplication3
{
    public class SampleData : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }

        private double _value;
        public double Value
        {
            get { return _value; }
            set
            {
                _value = value;
                NotifyPropertyChanged("Value");
            }
        }

        public SampleData() {  }

        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Este modelo cuenta con dos propiedades (Name y Value) e implementa INotifyPropertyChanged para poder manejar el Binding de forma correcta.

Ahora creamos el ViewModel. En una aplicación real deberías obtener dichos valores desde un webservice en tu servidor, pero para efectos prácticos, aquí inicializo una lista de objetos SampleData (nuestro modelo) en el constructor del ViewModel.

using System.Collections.Generic;

namespace SilverlightApplication3
{
    public class ViewModel
    {
        public string Title { get; set; }
        public List<SampleData> Samples { get; set; } 

        public ViewModel()
        {
            Title = "Probando graficas";
            Samples = new List<SampleData>();
            Samples.Add(new SampleData() { Name = "Nombre 1", Value = 1 });
            Samples.Add(new SampleData() { Name = "Nombre 2", Value = 4 });
            Samples.Add(new SampleData() { Name = "Nombre 3", Value = 3 });
            Samples.Add(new SampleData() { Name = "Nombre 4", Value = 2 });
            Samples.Add(new SampleData() { Name = "Nombre 5", Value = 5 });
        }
    }
}

Finalmente creamos nuestra vista en XAML:

<UserControl x:Class="SilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="390"
             d:DesignWidth="638"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:me="clr-namespace:SilverlightApplication3"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
    <UserControl.Resources>
        <me:ViewModel x:Key="model" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          Background="White"
          DataContext="{Binding Source={StaticResource model}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="237" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel>
            <TextBlock Text="{Binding Title}"
                       FontWeight="Bold"
                       Margin="0,10"
                       HorizontalAlignment="Center" />
            <sdk:DataGrid AutoGenerateColumns="False"
                          x:Name="dataGrid1"
                          VerticalAlignment="Top"
                          ItemsSource="{Binding Samples, Mode=TwoWay}"
                          Margin="10,0">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Nombre"
                                            Binding="{Binding Name}" />
                    <sdk:DataGridTemplateColumn Header="Valor"
                                                Width="150">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Slider Value="{Binding Value, Mode=TwoWay}"
                                            Maximum="5"
                                            Minimum="0"
                                            Width="100" />
                                    <TextBlock Text="{Binding Value, StringFormat=\{0:F4\} }" />
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </StackPanel>
        <Grid Grid.Column="1">
            <toolkit:Chart Margin="10">
                <toolkit:ColumnSeries x:Name="columnSeries1"
                                      ItemsSource="{Binding Samples, Mode=TwoWay}"
                                      IndependentValuePath="Name"
                                      DependentValuePath="Value">
                    <toolkit:ColumnSeries.DependentRangeAxis>
                        <toolkit:LinearAxis Orientation="Y"
                                            Minimum="0"
                                            Maximum="5.5" />
                    </toolkit:ColumnSeries.DependentRangeAxis>
                </toolkit:ColumnSeries>
            </toolkit:Chart>
        </Grid>
    </Grid>
</UserControl>

En la línea 13 creamos una instancia de nuestro ViewModel y la agregamos a nuestros recursos locales. Después, en la línea 17 asignamos dicho recurso al DataContext de nuestro LayoutRoot (en este caso el Grid que contiene todos los elementos de la vista). En la línea 30 definimos la propiedad Samples de nuestro ViewModel como la fuente de datos del DataGrid. En la línea 40 definimos el binding a la propiedad Value con un slider para modificar los datos fácilmente. Las líneas 55 y 57 se encargan de hacer lo mismo para la gráfica de barras.

Nótese como los bindings se definien con el Mode=TwoWay para actualizar el ViewModel “de ida y vuelta”, es decir, que los cambios en la vista se reflejan en el ViewModel y viceversa.

Puedes ver el ejemplo corriendo aquí. Y puedes descargar el código aquí.

UPDATE: De pura casualidad encontré mi compañera Araceli Medina encontró un bug en el Silverlight Toolkit mientras jugaba con el demo. Estaba jugando con mover sliders y cambiar el tamaño de la ventana cuando noté que esto pasaba:

El borde inferior de los rectangulos no se quedaba en la parte de abajo de la gráfica. No estoy seguro a qué se deba esto pero si se vuelve a cambiar el tamaño de la ventana el problema se corrije. El bug fue dado de alta en codeplex.

Estaba siguiendo el tutorial de MVC Music Store V2.0 hecho por Jon Galloway (muy recomendable para meterse a ASP.NET MVC 3 con Razor) cuando noté una constante repetición de código necesario para un par de dropdowns en varias vistas del StoreManagerController:

ViewBag.Genres = storeDB.Genres.OrderBy(g => g.Name).ToList();
ViewBag.Artists = storeDB.Artists.OrderBy(a => a.Name).ToList();

Si bien son sólo dos lineas de código, me parece muy innecesaria la repetición de este en 4 ActionMethods. Así que se me ocurrió usar un Custom Action Filter para agregar dichas propiedades al ViewBag con un simple atributo, aquí la implementación:

using System.Linq;
using System.Web.Mvc;
using MvcMusicStore.Models;

namespace MvcMusicStore
{
    public class IncludeArtistsGenreAttribute : ActionFilterAttribute
    {
        public MusicStoreEntities db = new MusicStoreEntities();

        public override void OnActionExecuting(
            ActionExecutingContext filterContext)
        {
            base.OnActionExecuting(filterContext);

            filterContext.Controller.ViewBag.Genres =
                db.Genres.OrderBy(g => g.Name).ToList();
            filterContext.Controller.ViewBag.Artists =
                db.Artists.OrderBy(a => a.Name).ToList();
        }
    }
}

Lo primero que necesitamos es heredar de la clase ActionFilterAttribute para poder hacer override de uno de los siguientes métodos virtuales:

• OnActionExecuting. El cuál se ejecuta antes del Action method correspondiente.
• OnActionExecuted. Se ejecuta después de que el Action method termina.
• OnResultExecuting. Se ejecuta justo antes de regresar el ActionResult del método.
• OnResultExecuted. Se ejecuta una vez que el ActionResult ha sido regresado.

En este caso el único método que no nos sirve es el OnResultExecuted ya que es demasiado tarde para agregar propiedades al ViewBag. Una vez implementado nuestro atributo, simplemente decoramos los Action methods en donde necesitamos estas propiedades (los que tienen vistas con los dropdown de Géneros y Artistas) de esta manera:

//
// GET: /StoreManager/Create

[IncludeArtistsGenre]
public ActionResult Create()
{
    //ViewBag.Genres = db.Genres.OrderBy(g => g.Name).ToList();
    //ViewBag.Artists = db.Artists.OrderBy(a => a.Name).ToList();

    var album = new Album();

    return View(album);
} 

//
// POST: /StoreManager/Create

[HttpPost]
[IncludeArtistsGenre]
public ActionResult Create(Album album)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(album);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    //ViewBag.Genres = db.Genres.OrderBy(g => g.Name).ToList();
    //ViewBag.Artists = db.Artists.OrderBy(a => a.Name).ToList();

    return View(album);
}

//
// GET: /StoreManager/Edit/5
[IncludeArtistsGenre]
public ActionResult Edit(int id)
{
    //ViewBag.Genres = db.Genres.OrderBy(g => g.Name).ToList();
    //ViewBag.Artists = db.Artists.OrderBy(a => a.Name).ToList();

    var album = db.Albums.Single(a => a.AlbumId == id);
    return View(album);
}

//
// POST: /StoreManager/Edit/5

[HttpPost]
[IncludeArtistsGenre]
public ActionResult Edit(int id, FormCollection collection)
{
    var album = db.Albums.Find(id);
    if (TryUpdateModel(album))
    {
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    else
    {
        //ViewBag.Genres = db.Genres.OrderBy(g => g.Name).ToList();
        //ViewBag.Artists = db.Artists.OrderBy(a => a.Name).ToList();

        return View(album);
    }
}

Nótese que dejé las lineas repetitivas comentadas por motivos ilustrativos pero en realidad habría que borrarlas por completo .

MVC nos incluye varios Action Filters que pueden ser utilizados para cosas como autenticación/autorización, manejo de errores, manejo de cache, etc. Para más información puedes checar el artículo correspondiente en MSDN.

Rendimiento

Uno de los puntos que mucha gente Pro-Silverlight sacó a relucir es el rendimiento. Esta punto es debatible. Es cierto que hoy una aplicación que utilice la tarjeta de video será mucho más rápida en Silverlight gracias al uso de la aceleración por hardware (actualmente IE9 es el único navegador con soporte para aceleración por hardware). Pero no debes asumir que usar Silverlight es más rápido en todos los casos. Movimientos, fades, rotación y distintos tipos de animaciones serán mejor provistos usando javascript, debido a que el tiempo de carga de un aplicación de Silverlight es mucho mayor que un script de Javascript (aún cuando la más reciente actualización de SL mejoró esto notablemente). Es mejor analizar bien en qué punto el tiempo de carga hace que valga la pena usar SL sobre JS.

Escribe una vez, corre en donde sea

Ninguna de tecnologías te permite hacer esto. Esta frase la he escuchado desde los inicios de Java, pero ninguna tecnología ha podido llegar a este punto. Y para ser sinceros, es una pérdida de tiempo intentar algo así. Cada dispositivo que usamos tiene sus propias características que influyen sobre la forma en que interactuamos con él. Si bien es cierto que una buena arquitectura te puede llevar a compartir las mismas librerías principales, no esperes escribir una aplicación y mandarla a donde sea sin cambiar nada. Eso de que HTML5 requiere escribir un código para cada navegador no es cierto. Herramientas como jQuery te permiten extraer las diferencias y concentrarte en escribir tu aplicación y delegar las diferencias de navegadores a alguien más. Además, les tengo una noticia, con SL también hay casos en los tienes que escribir lógica para ver si estas en Windows, Windows Phone, Mac o Linux (en especial Linux ya que la implementación del plugin, Mono, está apenas a la par con la versión 2.0 de SL).

HTML5 no está listo

¡Tampoco CSS3 y llevamos años usándolo! HTML5 no estará oficialmente listo hasta dentro de muchos años. Sin embargo ya se está usando desde hace tiempo y la implementación en los navegadores continúa mejorando.

No hay herramientas para desarrollar en HTML5

Aquí tienes. Por otro lado, no tengas miedo de salir de Visual Studio de vez en cuando.

Silverlight es mejor para aplicaciones, HTML para sitios

HTML puede generar impresionantes aplicaciones (véase AgileZen)

Silverlight corre en tres pantallas

Silverlight corre en ciertos navegadores, como aplicación nativa en Windows y Mac OS y como aplicación Nativa en un teléfono (WP7). Hasta ahí llega hoy. No corre completamente en Linux (pero ahí va), no corre en teles (aún) y no corre en el navegador de ningún teléfono.

Silverlight (y Flash) morirá(n) gracias al Tag de video de HTML5

Nada podría ser más falso. Silverlight proveé muchos casos de uso que no están ni siquiera planeados para dicho tag. El más mencionado es DRM, pero existen muchísimas experiencias que aún no se pueden lograr con HTML5.  Si bien la mayoría de las aplicaciones de SL que existen no desarrollan todo su potencial, exiten empresas con Vertigo que han sabido explotar todo el poder de la plataforma creando experiencias asombrosas como Hard Rock Memorabilia, Playboy Catalog, las Olimpiadas de Invierno 2010 entre muchas otras.

Silverlight no fue mencionado en el keynote del PDC, por lo tanto morirá

Tampoco hablaron sobre el café en el keynote y dudo que Starbucks vaya a cerrar pronto. Además, si no lo notaron, hicierton un demo de Silverlight para WP7 y hubieron muchísimas sesiones de SL después del keynote.

Y como estos existen muchos mitos más. Cómo siempre, es mejor experimentar de primera mano antes de tomar decisiones.

En mi caso particular, he pasado por Basic, Pascal, C, C++, FoxPro, VB.NET, C#, HTML, XHTML, Javascript, Silverlight, Flash, Java, PHP etc, etc, etc. En los últimos años me he adentrado en C# y toda la tecnología .NET de Microsoft. Me gusta C#, quizá por mi forma de ser, muy ordenado y el hecho de que me gusta que las cosas hagan sentido y sean cuadradas. Me encantaba la forma en que ASP.NET con sus extensiones de AJAX te permitía hacer páginas que parecían hechas con Javascript pero todo desde código manejado. Hoy en día, detesto este enfoque. El mundo cambió y yo también.

Hace 2 años me adentré al mundo de Silverlight gracias a mi amigo Rodrigo Díaz y me encantó la idea de poder programar una aplicación web como si fuera de escritorio. Conforme pasó el tiempo, fueron sacando mejoras como aplicaciones fueras del navegador que ¡Funcionaban incluso en las Mac! El poder del binding y las plantillas que comenzaron a sacar hacía que programar con Silverlight fuera una experiencia fácil y rápida. Cuando conocí MVVM simplemente quedé enganchado. Soy fan de las arquitecturas y MVVM es simplemente genial con Silverlight.

Hace 1 año comencé a adentrarme al mundo de ASP.NET MVC y jQuery. MVC fue para mí, como dicen por ahí, una bocanada de aire fresco. Estaba harto de ASP.NET y su lentitud y falta de compatibilidad con estándares. MVC es rápido, ligero, limpio y genera HTML compatible con cualquier navegador. Siempre le había tenido miedo a Javascript, pero jQuery lo hizo tan fácil que ahora me gusta tanto que me estoy metiendo más a fondo en Javascript como lenguaje y me asombro de todo lo que puede hacer. Con las nuevas características que se están introduciendo con HTML5, existe un gran potencial para hacer aplicaciones Web sin necesidad de instalar un plugin adicional.

Hace unos meses Brad Becker del equipo de Silverlight escribió un interesante artículo sobre el futuro de Silverlight. En dicho artículo destaca los diferentes puntos en los que Silverlight complementa HTML5. Esto me parece muy importante. Desde el principio, la gente dijo que Silverlight llegó a competir con Flash (incluso yo llegué a pensarlo) y ahora dicen que compite con HTML5. Nada podría ser más falso (bueno, con Flash si tiene algo de verdad). Si bien existen puntos que las 3 tecnologías tocan, cada una tiene sus características que las hacen únicas. Además, aún cuando no compiten del todo, el simple hecho de que existan hace que cada tecnología genere más innovaciones para no quedarse atrás.

La semana pasada, Mary-Jo Foley, escritora de la columna “All about Microsoft” para ZDNET escribió un artículo llamado “Microsoft: Our strategy with Silverlight has shifted”, en el que entrevista a Bob Muglia, Presidente de la división de Servidores y Herramientas de Negocios de Microsoft. Este artículo generó polémica e ira entre programadores y tomadores de decisiones. En él Muglia menciona que su enfoque con Silverlight ha cambiado y que HTML es la verdadera solución multiplataforma. Los medios y Twitter estallaron con suposiciones de que Silverlight estaba muerto. Todo esto se dejó crecer durante el fin de semana y el lunes el mismo Muglia publicó un comunicado confirmando su compromiso con Silverlight. Incluso, la misma Foley comentó como todo había sido malinterpretado.

En mi opinión, Muglia no dijo nada que no fuera verdad. Silverlight sigue siendo una excelente herramienta para desarrollo para web, cliente, Windows Phone y próximamente TVs (lo cual puede ser algo muy grande, en especial compitiendo con algo como Google TV). HTML es la verdadera solución multiplataforma. Funciona en todos los sistemas operativos, todos los navegadores (obvio) y en todos los teléfonos con navegador (muchos que ni siquiera son smartphones). Mucha gente defiende una herramienta o la otra a capa y espada, pero como dije al principio, son sólo opciones, ninguna es mejor que otra en todos los casos. Uno como desarrollador debe analizar cada situación y usar lo que mejor se aplique. No vas a poner a hacer una base de datos en HTML ni vas a ponerte a hacer sistemas de soporte de vida en Silverlight. Como desarrolladores tenemos que saber muchos lenguajes, y si te quieres encerrar en uno sólo creo que te estás perdiendo de muchas cosas y no estás alcanzando todo tu potencial y el de la tecnología misma.

Existen muchos mitos sobre Silverlight y HTML5 (que dejaré para otro post), lo mejor es que tu mismo pruebas de primera mano cómo son ambas herramientas (o muchas otras) antes de formar tu opinión sobre ellas. Si no has usado una y sólo te basas en comentarios de otras personas, mejor no critiques sobre lo que no conoces. Esa mentalidad de “mi lenguaje es mejor que el tuyo” sólo estorba. Conoce tu herramienta, echa un vistazo a otras herramientas y usa la que más te guste y/o mejor se acomode a tus necesidades.

A mi me gusta desarrollar para la web. Si Silverlight desaparece en 2 o 3 años, ni modo. Si HTML5 no está listo antes de que se acabe el mundo, pues que así sea. La vida sigue y la tecnología avanza muy rápido como para andar discutiendo quien tiene la mejor herramienta.

Mas información en el post original.

Pero esta vez, Arcade Fire y Google van mucho más alla, haciendo el video de la canción “We used to wait” un experimento con html5 que muestra el potencial de esta tecnología que si bien no cuenta con una especificación terminada, ya está dando muestras del poder con el que cuenta.

En la página en cuestión (que por cierto, recomiendan altamente el uso de Google Chrome) tu puedes escribir la dirección del barrio donde creciste (yo tuve que insertar una dirección en Estados Unidos pues la de México no me funcionó). Después de un tiempo de carga un poco largo (pero que vale la pena) podrás ver como se desarrolla el video en distintas ventanas, algunas de las cuales muestra imágenes y vistas de la dirección que escribiste.

Qué bueno ver a grupos rompiendo esquemas en una época donde la industria musical está en decadencia y que bueno ver el potencial de html5 en acción.

En vísperas de dichos aconteciemientos en La Liga Silverlight estamos organizando un evento para dar a conocer las herramientas de desarrollo para el Windows Phone 7. Aquí la información:

UPDATE: Debido a que otro evento de la misma índole se llevará a cabo en la misma fecha por parte de Microsoft, nuestro evento se moverá para un día después, misma hora, mismo lugar.

Agenda:

Tema	Expositor
Introducción a Windows Phone 7: Una propuesta diferente y una gran oportunidad (Intoducción y Market place)	Jorge Levy
Arquitectura y desarrollo de Aplicación en Windows Phone 7 con Silverlight	Arturo Molina
Desarrollo de juegos para Windows Phone con XNA Framework	Tarcisio de la Vega

Puedes registrarte aquí (La fecha y la hora están mal en esa liga, pero si es ahí donde tienes que registrarte).

• Habilidad para agregar una nueva fila al control DataGrid
• Mejoras el tiempo de carga de las aplicaciones
• Soporte para la rueda del mouse en las aplicaciones fuera del navegador para Mac
• Se arreglaron unos bugs relacionador con el uso de DRM para contenido multimedia
• Se arregló una fuga de memoria relacionada con el uso de MouseCapture
• Se arregló una fuga de memoria relacionada con el uso de DataTemplate

Aquí los pasos para bajar la nueva versión:

Para usuarios finales

Lo recomendado en el post de Tim Heuer es modificar el tag de object que hospeda nuestro xap dentro de nuestra página:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
  width="640" height="400">
    <param name="source" value="YOUR_PATH_TO_XAP" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50826.0" />
    <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=4.0.50826.0" style="text-decoration: none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
          style="border-style: none" />
       </a>
</object>

La clave aquí están en las líneas 5 y 6, minRuntimeVersion indica que la versión mínima requerida para correr la aplicación y autoupgrade le pedirá permiso al usuario para actualizar la aplicación si la versión de Silverlight instalada es menor a la requerida.

Para desarrolladores

Debes actualizar tanto el developer runtime como el SDK (preferentemente en ese orden). Aquí las ligas para realizarlo:

• Windows developer runtime
• Mac developer runtime
• Silverlight 4.0.50826.0 SDK

Una vez instalados el runtime y el SDK puedes crear un nuevo proyecto de Silverlight y el tag de object reflejará automáticamente la nueva versión:

Puedes leer más información en el post de Tim Heuer y en el Knowledge Base de la actualización (KB2164913).

ASP.NET MVC3 Preview 1 – Índice

1. Introducción
2. Datos de la Vista dinámicos

NOTA: Este post es sobre una versión muy temprana de lo que será MVC3. Todo lo que está aquí esta sujeto a cambios drásticos mientras no se indique lo contrario.

Anteriormente, MVC nos permitía mandar cierta información del controlador a la vista usando un diccionario de tipo ViewDataDictionary que permitía almacenar todo tipo de información.

Dicho diccionario se llenaba como cualquier otro diccionario en el controlador:

ViewData["MensajeViewData"] = "Mensaje desde ViewData";

Y se accedia de la misma manera en la vista:

<%: ViewData["MensajeViewData"] %>

Ahora bien, lo nuevo en MVC3 es una nueva variable que en el controlador podemos es llamada ViewModel y es de tipo dinámico, osea, podemos asignar un valor del siguiente modo:

ViewModel.MensajeViewModel = "Mensaje desde ViewModel";

Y accederlo desde la vista de la siguiente manera:

<%: View.MensajeViewModel %>

¿En qué beneficia esto? Pues quizá no parezca mucho, pero nos ahorra 3 caracteres por casa variable que usamos (usar los dos corchetes y las comillas vs solo usar un punto).

¿Por qué no se llama igual la variable en el controlador (ViewModel) y en la vista (View)? De acuerdo con Phil Haack, el problema fue que cuando estaban implementando esta funcionalidad, lo hicieron primero en la vista, y escogieron el nombre View por ser corto y claro. El problema fue cuando portaron la funcionalidad a la clase Controller ya contenía un método llamado View, por lo que tuvieron que usar un nombre disponible como ViewModel que es más largo y va en contra de su objetivo de hacernos teclear menos. En mi humilde opinión, el hecho de que los datos introducidos en ViewData y ViewModel en el controlador pueden ser accedidos por medio de View (y ViewData para el caso), el nombre View está bien, pero puede haber quien encuentre esto un tanto confuso.

Otra cosa interesante es que el tipo dynamic nos permite almacenar no sólo objetos sino también funciones. Por ejemplo:

public ActionResult Index(){    ViewModel.MensajeViewModel = "Pasando una función";

    Func<int, int, string> funcionEsMayorQue =         (operador1, operador2) =>             operador1 > operador2 ? "Es mayor" : "No es mayor";

    ViewModel.EsMayorQue = funcionEsMayorQue;

    return View();}

Definimos una expresión lambda, en la cuál se recibirán dos enteros y se regresará un string indicando si el primer entero es mayor al primero o no (me rompí la cabeza pensando en este ejemplo). Esta función puede ser invocada en la vista de la siguiente manera:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <h2><%: View.MensajeViewModel %></h2>

    <p>23 <%: View.EsMayorQue(23,7) %> que 7</p></asp:Content>

Lo cuál nos resulta en algo como esto:

Esto fué un pequeño vistazo a esta la nueva funcionalidad de MVC3 para usar datos de la vista almacenados en una variable de tipo dynamic, la cuál no sólo nos permite almacenar objetos sino también funciones.

Si tienes 3 minutos, puedes contestar la encuesta en su sitio para hacerle saber qué es lo que mejor funciona para ti.

¡Gracias! y por favor corran la voz.

ASP.NET MVC3 Preview 1 – Índice

1. Introducción
2. Datos de la Vista dinámicos

NOTA: Este post es sobre una versión muy temprana de lo que será MVC3. Todo lo que está aquí esta sujeto a cambios drásticos mientras no se indique lo contrario.

Para poder jugar con este Preview, pueden descargar un pequeño instalador que incluye las DLLs y plantillas requeridas.

Si bien en el diálogo de Nuevo Proyecto existe una plantilla para el View Engine de ASPX y otro para Razor (la nueva View Engine cuyo propósito es ser menos ceremonial y escribir menos caracteres de sintáxis), la idea es tener una sola plantilla y luego escoger el View Engine. Algo como lo que observamos al agregar una vista nueva:

Es importante mencionar que aquí se podrán integrar otros View Engines que no son de Microsoft como Spark, NHaml, NDjango y muchas otras.

En las próximas semanas estaré escribiendo sobre algunas de las nuevas características incluídas (y no incluídas) en este release.

Hace unos meses, decidieron abrir su plataforma para quien lo quisiera de manera gratuita. Esto quiere decir, que por medio de un proceso definido en Area51, la gente puede crear propuestas para tener un sitio muy similar, pero de temas diferentes (cocina, construcción, etc.). En conjunto con David Mora y Rodrigo Díaz, decidimos mandar nuestra propuesta para un sito como StackOverlfow, pero en español.

¿Por qué en español? Segun Wolpram Alpha, El español es hablado por unos 417 millones de personas (6.2% de la población mundial) y es el 3er idioma más hablado en el mundo (diferentes fuentes difieren en si es la 2da o 3ra lengua más hablada). Sin embargo, muchos recurrimos a sitios en inglés porque ser un idioma universal en el rubro.

La idea de este sitio es formar un espacio para desarrolladores de cualquier lenguaje de programación (C, C++, C#, Java, Ruby, Phyton, Javascript, Visual Basic, LISP, etc…), así como frameworks, librerías y herramientas de los mismos (LINQ, jQuery, ADO.NET, Drupal, etc…).

Si estás interesado, por favor apoya la propuesta en Area51 y corre la voz. ¡Muchas gracias!

UPDATE: Estoy consciente de la existencia de una página similar llamada YoProgramo.NET, la cuál me parece buena propuesta, pero me parece que tener el respaldo de un sitio ya establecido, con mayor funcionalidad y gente dedicada a desarrollar más funcionalidad, le daría mejor continuidad al proyecto. Además, no dependería de un pequeño grupo de personas, sino de una comunidad comprometida.

UPDATE 2: Para apoyar la propuesta, sólo tienen que “seguirla” (osea, darle Follow). Los sitios de StackExchange usan OpenID, por lo que si ya tienen cuenta en google, yahoo, blogger, wordpress, etc… no necesitan registrarse.

Pero no hay por que entrar en pánico, aquí una pequeña receta para crear tu propio archivo jquery-1.4.2-vsdoc.js

1. Descargar la versión minificada y/o la comprimida, así como también la documentación para Visual Studio de la versión 1.4.1 (en el caso de Visual Studio 2010, las plantillas de proyectos como MVC2 ya traen esa versión de la documentación)
2. Agregar los scripts a la solución
3. Renombrar jquery-1.4.1-vsdoc.js a jquery-1.4.2-vsdoc.js
4. Abrir el archivo renombrado y buscar la variable donde se define la versión de la librería (línea 225)
5. Como se puede ver en el log de cambios, esta versión agrega dos métodos: delegate() y undelegate(), así que sólo tenemos que agregar la documentación de dichos métodos después de documentación de unbind(), esto en la línea 2937

A continuación la documentación completa a agregar:

delegate: function( selector, types, data, fn ) {
/// <summary>
///   Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. See also "live".
/// </summary>
/// <param name="selector" type="String">
///     An expression to search with.
/// </param>
/// <param name="types" type="String">
///     A string containing a JavaScript event type, such as "click" or "keydown".
/// </param>
/// <param name="data" type="Object">
///     A map of data that will be passed to the event handler.
/// </param>
/// <param name="fn" type="Function">
///     A function to execute at the time the event is triggered.
/// </param>
    return this.live( types, data, fn, selector );
},
undelegate: function( selector, types, fn ) {
/// <summary>
///   Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements. See also "die".
/// </summary>
/// <param name="selector" type="String">
///     An expression to search with.
/// </param>
/// <param name="types" type="String">
///     A string containing a JavaScript event type, such as "click" or "keydown".
/// </param>
/// <param name="data" type="Object">
///     A map of data that will be passed to the event handler.
/// </param>
/// <param name="fn" type="Function">
///     A function to execute at the time the event is triggered.
/// </param>
    if ( arguments.length === 0 ) {
            return this.unbind( "live" );

    } else {
        return this.die( types, null, fn, selector );
    }
},

¡Listo! Ya tienen Intellisense en Visual Studio. No olviden agregar la referencia a la librería:

<script src="/Scripts/jquery-1.4.2.js" type="text/javascript"></script>

Referencia: StackOverflow

En dicho evento tuve la oportunidad de dar dos presentaciones:

• Stay in the zone. En donde se muestran las nuevas herramientas para ayudar al desarrollador a mantenerse enfocado (o recuperar la concentración) en lo que realmente importa. Muchos detalles que por pequeños que sean hacen una gran diferencia. Este ejemplo fue hecho con ASP.NET MVC, lo cuál lo hizo más interesante aún.
• Windows Phone 7 + Azure. Aquí se mostró Silverlight como plataforma de desarrollo para el nuevo sistema operativo de smartphones. Además las capacidades y facilidad de uso de Windows Azure.

La respuesta de la gente fue buena. Unas 50 personas en total aunque iban y venian . Y como siempre me agradó platicar con la audiencia sobre dudas y nuevas tecnologías.

El siguiente evento se llevará a cabo mañana jueves 15 de abril en el CUCEI:

Centro de Ciencias Exactas e Ingenierías, UdG
Fecha: jueves, 15 de abril de 2010
Hora: de 11:30 a.m. a 2:00 p.m.
Lugar: Auditorio Antonio Alatorre, CUCEI

Registro para evento CUCEI

¡Los esperamos!

Si ya tienen el SDK instalado, solo necesitan bajar la siguiente imagen, ya sea directamente aquí o por torrent aquí. [NOTA: Yo bajé el archivo directamente, no me hago responsable del torrent ]

Una vez que tienen la imagen, hay que colocarla en C:\Program Files\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images. Es muy recomendable respaldar la imagen que ya se encuentra ahí (por ejemplo, agregarle la extensión .old o algo por el estilo) ya que al parecer la imagen completa no permite instalar aplicaciones para debugear. Finalmente solo renombran la imagen descargada a WM70C1.bin

Ahora solo entramos a Visual Studio 2010 y creamos un proyecto nuevo, de cualquier tipo pero que sea para Window Phone, presinamos F5 y ¡Listo!

Lamentablemente, yo no pude logearme a ninguna de mis cuentas para tratar de tener la experiencia completa. Pero por lo menos uno puede darse una idea más completa de lo que será.

En La Liga Silverlight y La Comunidad Guadalajara.NET estamos organizando diferentes eventos de lanzamiento de Visual Studio 2010 y Azure, en la ciudad de Guadalajara tendremos dos eventos con la siguiente agenda:

• Stay in the zone: Mejoras del producto para que el desarrollador no tenga que salir fuera de VS para conseguir lo que necesita para trabajar. Esto incluye mejoras de la interfaz, Extension Manager y Code Snippets.
• Desarrollo para Windows7: VS2010 permite crear aplicaciones para aprovechar todas las mejoras que Windows7 tiene de manera rápida. Esto incluye soporte multitouch, ribbon, animaciones.
• Desarrollo para Sharepoint: Las nuevas herramientas de Visual Studio para ayudar a desarrollar sobre esta plataforma tan popular
• Phone+Azure: Herramientas para crear aplicaciones de Windows Phone Series 7 con Silverlight y utilizar servicios en Windows Azure para que tu aplicación se conecte con otros usuarios.
• Team Collaboration: Mejoras para la colaboración del equipo, esto incluye, Team Foundation Client como parte de VS profesional además de Team Explorer en la web, diagramas de arquitectura para entender el código que otros desarrolladores escribieron, utilizar información recolectada automáticamente por los testers para corregir defectos en el código y nuevas gráficas creadas automáticamente para visualizar el progreso del equipo.

Para el evento en el Centro de Software un servidor estará dando las pláticas de Stay in The Zone y Phone + Azure. Estaremos dando un par de obsequios (no, lo siento, no habrá licencias gratis)

Para más información y otros eventos en México entra a: http://www.tuvidaencodigo.com

1. Visual Studio 2010 RC
2. Silverlight 4 Tools para VS2010. Esto incluye el runtime, SDK, herramientas para VS y WCF RIA Services
3. Silverlight Toolkit release de Marzo 2010 (Opcional, disponible próximamente)
4. WCF RIA Services toolkit (Opcional, son controles extras a los incluídos en la instalación de SL4 Tools)
5. Expression Blend 4 (Opcional)
6. Herramientas para el desarrollo de Windows Phone 7 (WP7)
7. Add-in para desarrollo de Windows Phone en Blend y SDK Preview para Windows Phone en Blend (WP7)

Próximamente estaremos publicando artículos sobre las novedades de esta versión los cambios. Si no pueden esperar, les recomiendo ver los posts de Tim Heuer y René Schulte sobre Silverlight 4 y el de Christian Schormann sobre Blend 4.

Por lo pronto ya contamos con un pequeño Hola Mundo para Windows Phone 7.

En esta ocasión, les voy a presentar el típico “Hola Mundo” versión WP7. Necesitarán:

• Visual Studio 2010 RC
• Windows Phone Developer Tools CTP

Ó en su defecto, la versión gratuita Visual Studio 2010 Express for Windows Phone.

Una vez instaladas las herramientas requeridas, abrimos Visual Studio 2010 (VS2010) y creamos un nuevo proyecto. Podemos ver que tenemos 2 nuevas secciones en nuestra ventana:

Seleccionamos Windows Phone Application bajo la sección Silverlight for Windows Phone y nombramos el proyecto.

Obtenemos el siguiente template por default:

Vamos a hacer unas modificaciones a nuestro XAML, donde cambiaremos los título que aparecen de forma predeterminada y agregaremos al ContentGrid un TextBox y un Button:

<Grid x:Name="LayoutRoot"
      Background="{StaticResource PhoneBackgroundBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!--TitleGrid is the name of the application and page title-->
    <Grid x:Name="TitleGrid"
          Grid.Row="0">
        <TextBlock Text="HOLA MUNDO"
                   x:Name="textBlockPageTitle"
                   Style="{StaticResource PhoneTextPageTitle1Style}" />
        <TextBlock Text="Hola Mundo"
                   x:Name="textBlockListTitle"
                   Style="{StaticResource PhoneTextPageTitle2Style}" />
    </Grid>

    <!--ContentGrid is empty. Place new content here-->
    <Grid x:Name="ContentGrid"
          Grid.Row="1">
        <TextBox Height="72"
                 HorizontalAlignment="Left"
                 Margin="6,6,0,0"
                 Name="txtNombre"
                 Text=""
                 VerticalAlignment="Top"
                 Width="468" />
        <Button Content="Saluda"
                Height="70"
                HorizontalAlignment="Left"
                Margin="146,84,0,0"
                Name="button1"
                VerticalAlignment="Top"
                Width="160"
                Click="button1_Click" />
    </Grid>
</Grid>

Además en el evento del botón tendremos este sencillo código:

private void button1_Click(object sender, RoutedEventArgs e)
{
    this.textBlockListTitle.Text = "Hola " + txtNombre.Text;
}

Ahora solo tenemos que correr la aplicación para ver el resultado en el emulador:

Es importante hacer notar que el emulador tiene muchas funciones, como cambiar la orientación, capturar el teclado y simular multitouch (con monitores que lo soporten claro está).

También hay que considerar que esto es un CTP (Community Technical Preview). En mi caso el emulador es muy lento de cargar y me salian errores de repente. Sin embargo, vale la pena empezar a conocer las herramientas de desarrollo para el WP7.

El otro día mi amigo Jorge Levy estaba desarrollando una aplicación de Silverlight para una empresa de Tamales. Dicha aplicación cuenta con una página de contacto, donde muestra un control de Bing Maps y una opción para ver la fachada del local. Lo malo de esto es que para ver la fachada, el link te lleva a la página de Photosynth donde puedes ver el synth del local.

Me pareció una buena idea, pero no me gustó el hecho de que no pudieras ver el synth dentro de la aplicación. Me di a la tarea de investigar una forma de hacer esto. Primero pensé, en Silverlight 4 beta es posible poner contenido HTML, pero esto tiene dos problemas actualmente. Primero, ¡Es BETA! por lo que para ver la página estarías obligando al usuario a buscar el runtime de SL4Beta (pues en la página te dan la liga para instalar la última versión estable). Segundo, esta funcionalidad solo funciona fuera del navegador, lo cuál tampoco queremos, pues no queremos forzar al usuario a instalar una appliación nada más para esto.

Pues bien, después de buscar y buscar, encontré este post donde aprendí sobre la existencia de un control gratuito llamado HtmlHost. Todo lo que hay que hacer es descargar el zip y descomprimirlo en su lugar predilecto para librerías.

Para una pequeña demostración, vamos a crear un proyecto nuevo de Silverlight, y vamos a agregar como referencia el emsamblado que acabamos de descargar: Divelements.SilverlightTools.dll

Después abrimos MainPage.xaml en Blend para hacer una layout rápido:

Aquí tenemos una versión resumida del XAML:

<UserControl x:Class="PhotosynthDemo.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:divel="clr-namespace:Divelements.SilverlightTools;assembly=Divelements.SilverlightTools"
     mc:Ignorable="d"
     d:DesignWidth="640"
     d:DesignHeight="480">

    <Grid x:Name="LayoutRoot"
          Background="#FF293949">

        <Border BorderBrush="#FF9A0707"
                BorderThickness="3"
                Margin="82,88,90,120">
            <divel:HtmlHost Name="htmlHost" />
        </Border>

    </Grid>
</UserControl>

En la línea 6 estamos agregando el namespace del control HtmlHost y en la línea 17 es donde colocamos y nombramos nuestro control.

Ahora necesitamos asignar un valor a la propiedad SourceHtml del HtmlHost. Vamos a usar el mismo código que nos da Photosynth como si lo fueramos a poner en una página Html común y corriente:

Y en el code behind vamos a asignar esa cadena a la propiedad antes mencionada:

namespace PhotosynthDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            htmlHost.SourceHtml = "<iframe frameborder='0' src='http://photosynth.net/embed.aspx?cid=e9f3bd27-c3f5-4e2e-8022-3a746a4b3119&delayLoad=false&slideShowPlaying=false' width='100%' height='100%'></iframe>";
        }
    }
}

Como podemos ver tuvimos que hacer unos cambios a la cadena, primero tenemos que cambiar todas las comillas dobles, por comillas sencillas. También cambiamos el parámetro delayLoad a false y el with y height a 100%.

Si en este momento corren el proyecto, funcionará bien, pero verán un cuadro de dialogo con la siguiente advertencia:

Para corregir esto solo tenemos que ir a nuestro aspx de nuestro proyecto web:

Y en la sección del div llamado silverlightControlHost vamos a agregar un parámetro:

<param name="windowless" value="true" />

Pueden ver un demo en vivo aquí y descargar el código aquí.

• GetChildrenCount – Obtiene el número de Hijos que tiene el UIElement
• GetChild – Obtiene un hijo del UIElement

NOTA: El propósito del siguiente ejemplo es ilustrar el uso del VisualTree. Hay muchas maneras de hacer lo siguiente, como cambiar directamente la fuente de datos para reflejar los cambios en la Interfaz de Usuario. De hecho, si no se usa adecuadamente, el VisualTreeHelper puede hacer nuestra aplicación lenta.

Primero, vamos a usar una clase llamada ListInfo. Esta clase implementa la interfaz INotifyPropertyChanged y tiene solo dos propiedades: Name y Check. Además cuenta con un método estático llamado getInfo() que devuelve una ObservableCollection de 3 elementos:

public class ListInfo : INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            NotifyPropertyChange("Name");
        }
    }

    private bool check;
    public bool Check
    {
        get
        {
            return check;
        }
        set
        {
            check = value;
            NotifyPropertyChange("Check");
        }
    }

    public static ObservableCollection<ListInfo> getInfo()
    {
        ObservableCollection<ListInfo> data = new ObservableCollection<ListInfo>();
        data.Add(new ListInfo { Name = "Texto", Check = true });
        data.Add(new ListInfo { Name = "Qwerty", Check = false });
        data.Add(new ListInfo { Name = "Asdf", Check = true });

        return data;
    }

    public void NotifyPropertyChange(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

A continuación tenemos nuestro XAML, que es un simple ListBox con un ItemTemplate definido:

<StackPanel x:Name="LayoutRoot">
    <ListBox x:Name="myList"
             Width="450"
             SelectionChanged="myList_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CheckBox IsChecked="{Binding Check, Mode=TwoWay}"
                              IsEnabled="True"
                              Content="{Binding Name, Mode=TwoWay}"
                              Margin="5,0,0,0" />
                    <TextBlock Text="Al cambiar el elemento cambia nuestro CheckBox"
                               Margin="5,0,0,0"
                               Foreground="Blue" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

Finalmente, nuestro CodeBehind:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        myList.ItemsSource = ListInfo.getInfo();
    }

    private void myList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ListInfo current = myList.SelectedItem as ListInfo;

        List<UIElement> checkBoxes = new List<UIElement>();
        getChildTypes(myList, typeof(CheckBox), ref checkBoxes);

        foreach (UIElement element in checkBoxes)
        {
            CheckBox checkBox = (CheckBox)element;
            if (checkBox.Content.ToString() == current.Name)
            {
                checkBox.IsChecked = !checkBox.IsChecked;
            }
        }
    }

    public void getChildTypes(UIElement parent, Type elementType, ref List<UIElement> items)
    {
        int count = VisualTreeHelper.GetChildrenCount(parent);
        if (count > 0)
        {
            for (int i = 0; i < count; i++)
            {
                UIElement child = VisualTreeHelper.GetChild(parent, i) as UIElement;
                if (child.GetType() == elementType)
                {
                    items.Add(child);
                }
                getChildTypes(child, elementType, ref items);
            }
        }
    }
}

El método que nos interesa es getChildTypes. En este caso le mandamos el padre de los elementos que estamos buscando, en este caso, el ListBox myList. Después el tipo de elementos que queremos que nos regrese, osea, ChecBox. Finalmente le mandamos un valor de referencia de tipo List<UIElement>, en el cuál obtendremos nuestros resultados.

La lógica es sencilla, es un método recursivo que recorre todos los hijos y va agregando a la lista todos los que coindicen con el tipo indicado por elementType.

Pueden ver el resultado aquí.

Aquí una lista de los temas (que pueden ver en su post arriba mencionado):

Introducción

Introducción y Bienvenida al Curso de Introducción de Silverlight 4 creado por Rodrigo Díaz Concha, MVP de ASP.NET, fundador de La Liga Silverlight, Orador de INETA Latam y Master Instructor del Silverlight Tour para Latinoamérica y España.

Este curso introductorio a Silverlight 4 te permitirá comprender los conceptos básicos y diversas funcionalidades con las que cuenta esta fabulosa plataforma de desarrollo. Esta primera parte del curso consta de 12 videos y 1 práctica que refuerza los conceptos vistos en la serie de screencasts.

Silverlight es una plataforma de desarrollo para construir aplicaciones enriquecidas para Internet (RIA por sus siglas en inglés) que cada vez está siendo más usada como opción tecnológica en aplicativos modernos.

Una confusión que se tiene hoy en día es que se relaciona únicamente a Silverlight con el sistema operativo Windows, pero lejos de eso, las aplicaciones de Silverlight pueden ejecutar en Mac OS, Linux y Windows.

En este screencast veremos una introducción a la plataforma de desarrollo Silverlight, sus herramientas, aplicaciones reales y los requisitos necesarios para poder comenzar a construir aplicaciones con esta tecnología. Para más artículos acerca de Silverlight totalmente en español visita La Liga Silverlight: La Primera Comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas (http://blogs.LigaSilverlight.com).

1. Fundamentos

   Una vez instaladas las herramientas de Silverlight para Visual Studio .NET es hora de poner manos a la obra, asimismo es muy importante tener en cuenta algunos conceptos fundamentales acerca de la construcción de soluciones en esta tecnología. En este capítulo veremos conceptos fundamentales en el desarrollo de aplicaciones de Silverlight como las plantillas de Visual Studio .NET, el diseñador, el empaquetado XAP y el hospedaje en la página. Para más artículos acerca de Silverlight totalmente en español visita La Liga Silverlight: La Primera Comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas (http://blogs.LigaSilverlight.com).

2. Xaml

   Xaml (acrónimo de Extensible Application Markup Language) es el lenguaje de marcación utilizado por Silverlight (y también por su hermano mayor WPF) para poder definir las interfaces de usuario de nuestras aplicaciones.  Toda aplicación de Silverlight implica código de Xaml ligado a código en .NET. Por esta razón en este capítulo veremos conceptos básicos acerca de Xaml, sus elementos básicos y transformaciones.

3. Animaciones

   Para darle vida a nuestras aplicaciones de Silverlight podemos hacer uso entre otras cosas de las Animaciones. Las Animaciones son un mecanismo para cambiar el valor de las propiedades de los elementos y transformaciones conforme pasa un tiempo determinado. En este capítulo describiremos de manera rápida y sencilla el uso y creación de Animaciones dentro de Silverlight.

4. Expression Blend

   Todo desarrollador de Silverlight debe tener en su cinturón de herramientas Expression Blend, ya que nos ayuda de gran manera a hacer más rápido, efectivo y divertido nuestro trabajo al momento de construir soluciones con la plataforma de desarrollo Silverlight. En este capítulo apreciaremos en conjunto el uso de Expression Blend como herramienta de edición nativa de Xaml  además describiremos las opciones más importantes de la herramienta.

5. Recursos y Estilos

   Los recursos son un concepto básico para poder crear aplicaciones que reutilicen elementos ya que permiten ser un almacenaje de objetos de cualquier tipo para poder reusar en cualquier parte de nuestras aplicaciones. Los estilos son elementos que podemos  guardar en el diccionario de Recursos para poder aplicarlos y lograr así una apariencia estándar en la aplicación. En este capítulo describiremos el concepto de Recursos y también describiremos la creación y utilización de Estilos para controles y elementos.

6. Controles y Plantillas

   Silverlight cuenta con una gran cantidad de controles que podemos utilizar en nuestras aplicaciones y la gran mayoría soporta el cambio o modificación de su Plantilla.  En este capítulo mostraremos la manera de cómo cambiar la Plantilla en los controles básicos de Silverlight.

7. MediaElement

   Silverlight ha sido utilizado como aplicación cliente en la transmisión de importantes eventos en los últimos meses: la toma de poder de Barack Obama, el Memorial de Michael Jackson, los Juegos Olímpicos de Beijing , etc. Debido a su extraordinaria calidad en la reproducción de audio y video Silverlight está siendo la plataforma favorita para sitios multimedia. En este capítulo veremos la utilización del elemento MediaElement, el cual nos permite reproducir audio y video en nuestros aplicativos y apreciaremos la manera tan sencilla de incorporar esta características en nuestras propias aplicaciones.

8. Impresión

   Una de las características más esperadas y solicitadas por la comunidad de Silverlight es el soporte de impresión dentro de las aplicaciones, esto es, la capacidad de poder mandar a imprimir el contenido que estemos viendo en la aplicación ya sea una lista de datos de un DataGrid o ListBox o simplemente tomarle una “foto” a la pantalla y enviarla a papel o alguna de las impresoras virtuales instaladas en nuestros equipos (por ejemplo: OneNote, XPS, PDF, etc.).  Silverlight 4 incluye esta característica a través de un modelo de clases muy sencillo.

   En este capítulo mostraremos el uso de la clase PrintDocument para poder crear documentos de impresión a través de nuestras aplicaciones de Silverlight 4.

9. Webcam

   Con la llegada de Silverlight 4 también ha llegado a nosotros la posibilidad de implementar en nuestras aplicaciones la capacidad de tomar video a través de la Webcam y capturar audio por medio del micrófono del equipo.  Este fue una de las peticiones más fuertes en Silverlight 3 y la espera ha terminado.  En este capítulo del curso veremos cómo fácilmente podemos utilizar la Webcam para poder realizar capturas de fotografías con el video.

10. Drag and Drop

    Silverlight 4 cuenta con soporte de arrastrar uno o varios archivos desde afuera de la aplicación hacia adentro de ella y soltarlo(s) para poder leer su información y contenido.  Esta característica nos permite como desarrolladores crear mejores Experiencias para los Usuarios ya que evitan el número de cajas de diálogo y clics para abrir o leer un archivo o conjunto de archivos. En este capítulo del curso veremos cómo aplicar esta sencilla pero poderosa funcionalidad en nuestras propias soluciones.

11. OpenFileDialog

    De manera predeterminada, Silverlight requiere el permiso explícito del usuario para poder leer el Sistema de Archivos ya que ejecuta en Confianza Parcial. La caja de diálogo OpenFileDialog nos brinda un mecanismo para permitir a los usuarios que accedan a sus archivos desde las aplicaciones con Silverlight. En este capítulo del curso describiremos el uso de la caja de diálogo OpenFileDialog para poder leer archivos del equipo del usuario.

12. Clic Derecho

    Tradicionalmente al hacer clic derecho sobre una aplicación de Silverlight nos muestra un menú con la opción de abrir la caja de diálogo con información del plugin (como la versión, las cuotas para el almacenamiento aislado, etc.). Ahora en Silverlight 4 podemos capturar el evento de clic derecho del mouse para crear nuestra propia Interface de Usuario y código relacionado. En este capítulo describiremos el manejo de esta característica para poder crear menús contextuales en nuestras aplicaciones de Silverlight.

Llevaba varios días tratando de encontrar la opción para cambiar el navegador predeterminado de Visual Studio, sabía que era posible porque así lo tengo en la computadora del trabajo, pero en mi computadora personal (que había sido recientemente formateada) nada más no recordaba la opción (revisé tooooodas las opciones de personalización y nada).

Hoy por fin la encontré y aunque para muchos es obvia, la voy a posterar nada más para que cuando se me olvide encontrarla fácil (que es uno de mis principales propósitos de tener este blog).

Paso 1. Dar clic derecho sobre un aspx como Default.aspx y seleccionar Browse with

Paso 2. En el cuadro de dialogo, elegir Internet Explorer y dar clic en el botón “Set as Default”

Y ¡Listo!. Nada más que dar clic en Cancel y Debugear con otro navegador.

Nota. Por alguna razón, aquí no aparece mi otro navedagor Google Chrome, no estoy seguro a que se deba, si alguien sabe, por favor deje un comentario.

No duden en echarle un vistazo.

Esta serie de posts pretende ser un poco menos introductoria y más enfocada a hacer una aplicación real, pero sencilla.

Vamos a realizar una aplicación para ayudar en un intercambio de regalos (si, este post llega un poco tarde, pero por lo menos espero que sea ilustrativo).

NOTA: Aunque este ejemplo estará hecho en Visual Studio 2010 beta 2 + SL4 Tools Beta, la mayoría de las cosas puede ser hecha en VS2008 SP1 con WCF RIA Services Beta. En caso contrario, se hará notar para evitar confusiones.

Lo primero que debemos hacer es crear una nueva aplicación de tipo Silverlight Business Application, la cual nombraremos “Intercambios”:

Si corremos nuestro proyecto tal y como está, obtenemos el template base de RIA Services:

Ahora, vamos a personalizar un poco nuestro proyecto. Para esto iremos a la Galería de Microsoft Expression, en donde buscaremos un tema para nuestra aplicación. Nuestro tema será Lime Shocker de Tim Heuer.

Bajamos el tema y extraemos los archivos en un directorio de nuestra elección. A continuación, buscamos en nuestro proyecto la carpeta Assets (en este caso Intercambios\Intercambios\Assets) y renombramos el archivo Styles.xaml (por ejemplo: Styles.xaml.old) y finalmente copiamos el que descargamos. Si volvemos a correr nuestro proyecto, ahora obtenemos algo como esto:

Ahora, debido a que Shock Limer fue hecho para una versión anterior de RIA Services, debemos de cambiar un par de cosas en nuestro Styles.xaml. Primero, debemos agregar a las nuestras referencias (al inicio del archivo) la siguiente linea:

xmlns:loginWindow="clr-namespace:Intercambios.LoginUI"

Después tenemos que encontrar el estilo encabezado con el comentario “<!– LoginRegistration Window Style –>” y reemplazarlo por el de nuestro archivo Styles.xaml.old (osea, nuestro archivo original). Esto debido a unos estados nuevos incluídos en esta versión de WCF RIA Services.

Vamos a personalizar un poco el tema, para que luzca un poco más navideño (o cualqueir otra festividad que se ajuste más a la época en que nos encontremos). Abrimos nuestro proyecto en Blend Preview for .NET 4 (o Blend 3 esta bien si estan trabajando en VS2008). y con nuestro MainPage.xaml abierto abrimos el panel de Resources. Vamos a modificar dos de nuestras brochas: NavigationBackgroundColorBrush y HighLightColorBrush a Rojo y un Verde más obscuro respectivamente:

Ahora agregamos un par de imagenes al proyecto, un árbol de navidad para nuestra página de bienvenida y unos bastones de caramelo para decorar un poco nuestro borde:

Regresamos a Visual Studio. Dentro de la carpeta de Assets, hay otra que se llama Resources, y ahí encontramos un archivo de recursos llamado ApplicationStrings.resx. Este archivo nos permite personalizar distintos textos que aparecen en nuestra aplicación. Vamos a dejarlo algo así:

Corremos nuestro proyecto y obtenemos algo como esto:

Puedes descargar el proyecto aquí.

Resultó que esto es algo muy sencillo de hacer, pero no tan obvio:

<chartingToolkit:Chart Margin="109,62,116,64"
                       Title="Chart Title">
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:LinearAxis Orientation="Y"
                                    ShowGridLines="False" />
    </chartingToolkit:Chart.Axes>
    <chartingToolkit:Chart.DataContext>
        <PointCollection>
            <Point>1,10</Point>
            <Point>2,20</Point>
            <Point>3,30</Point>
            <Point>4,40</Point>
        </PointCollection>
    </chartingToolkit:Chart.DataContext>
    <chartingToolkit:ColumnSeries DependentValuePath="X"
                                  IndependentValuePath="Y"
                                  ItemsSource="{Binding}" />
</chartingToolkit:Chart>

Aquí podemos observar que de la línea 3 a la 6 definimos la propiedad Axes de nuestro control Chart. Estamos indicando que tendremos un LinearAxis con orientación “Y” (las líneas muestran los valores para los datos en dicho eje) y definimos ShowGridLines como falso para evitar que aparezcan. El resultado es:

Tema: SketchFlow

Fecha: 19 de Noviembre 2009

Hora: 6:30 – 7:30PM (-6 GMT)

Orador: Arturo Molina

Regístrate aquí.

Tema: Silverlight Toolkit Parte II

Fecha: 05 de Noviembre 2009

Hora: 6:30 – 7:30PM (-6 GMT)

Orador: Arturo Molina

Regístrate aquí.

class Program
{
    static void Main(string[] args)
    {
        string className = "Tester.SpanishGreeter";

        Assembly assembly = Assembly.GetExecutingAssembly();

        object o = assembly.CreateInstance(className);

        IGreeter test = (IGreeter)o;
        test.sayHello();
        Console.ReadLine();
    }
}

interface IGreeter
{
    void sayHello();
}

class SpanishGreeter : IGreeter
{
    public void sayHello()
    {
        Console.WriteLine("Hola");
    }
}

class EnglishGreeter : IGreeter
{
    public void sayHello()
    {
        Console.WriteLine("Hello");
    }
}

class DanishGreeter : IGreeter
{
   public void sayHello()
   {
       Console.WriteLine("Hej");
   }
}

Fácilmente el nombre de la clase lo podríamos obtener de una entrada del usuario, archivo de configuración o base de datos. Después obtenemos el ensamblado que se está ejecutando actualmente, de ahí podemos crear una instancia de object llamando al método CreateInstance() y enviando el nombre de la clase (namespace incluído). De ahí todo lo que tenemos que hacer es castear el objecto a nuestra clase y ¡Listo! Podemos hacer uso de cualquiera de nuestras implementaciones de la interfaz IGreeter.

• 3 licencias de Visual Studio 2008 Professional Edition
• 1 licencia de Epression Studio 3 (Incluyendo Blend, Sketchflow y Web)
• 2 licencias de Expression Web 3
• 4 licencias por procesador de Windows Web Server 2008 R2
• 4 licencias pro procesador de SQL Server 2008 Web Edition
• Panel de Control DotNetPanel

Las licencias de Windows Server y SQL Sever pueden usarse tanto para ambientes de desarrollo como de producción.

Todo lo que necesitan es ser desarrolladores independientes o ser una compañía de 10 o menos empleados.

Después de 3 años, no tiene olbigación alguna de pagar el software, solo un cargo de $100 dlls al final del programa. Si deciden seguir en el programa, este tendrá un costo de $999 dlls por año. Alternativamente, pueden quedarse sólo con las licencias de producción (una de Windows Web Server y otra de SQL Server) por $199 dlls al año.

Para enrolarse solo necesitan entrar a la página del programa en donde se les solicitará unos datos sobre su compañía y un referal code que pueden solicitar a webspark@microsoft.com

No lo duden más y ¡enrólense!

Lo primero que vamos a hacer es diseñar la interfaz de nuestra aplicacción. Esta puede ser tan sencilla como quieran, por lo menos necesitamos 2 TextBlock y un Button (liga al código al final del post):

Los TextBlock en los que estamos interesados por el momento son los que en la imagen vemos con la palabra “NO” en rojo. Uno lo llamaremos txtOOB que indicará si la aplicación se encuentra fuera del navegador y el otro txtConexion que indicará si la aplicación cuenta con conexión disponible.

A continuación, vamos a crear un pequeño método para ayudarnos a cambiar el estado de dichos TextBlock.

public void cambiaEstado(TextBlock texto, bool estado)

{

    if (estado)

    {

        texto.Text = "Si";

        texto.Foreground = new SolidColorBrush(Colors.Green);

    }

    else

    {

        texto.Text = "No";

        texto.Foreground = new SolidColorBrush(Colors.Red);

    }

}

Este método nos permite mandar el TextBlock correspondiente y el valor que le será asignado. Si es verdadero, entonces el TextBlock mostrará la palabra “Si” en verde, si es falso, mostrará la palabra “No” en rojo.

Para la siguiente función declaramos el nombre de espacio System.Net.NetworkInformation. Aquí está contenida la clase NetworkInterface que nos permitirá saber si tenemos una conexión disponible:

private void ActualizarEstados()

{

    cambiaEstado(txtOOB, App.Current.IsRunningOutOfBrowser);

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Podemos ver GetIsNetworkAvailable() nos regresa un booleano indicando el estado de la conexión. Además, la propiedad App.Current.IsRunningOutOfBrowser nos indica si la aplicación está corriendo fuera del navegador. Solo necesitamos añadir la llamada a ActualizarEstados() en el constructor de nuestra clase MainPage. Al ejecutar nuestra aplicación vemos lo siguiente:

Ahora pasamos a la funcionalidad del botón. Queremos dos cosas: primero crearemos una función que inicialice el botón, dependiendo de si la aplicación está o no fuera del navegador y si está o nó instalada. Segundo, programaremos la funcionalidad de dicho botón, también en función de si está o no fuera del navegador. Veamos primero el método de inicialización:

private void inicializarBoton()

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        btnAccion.Content = "Actualizar";

    }

    else

    {

        if (App.Current.InstallState == InstallState.NotInstalled)

        {

            btnAccion.Content = "Instalar";

        }

        else

        {

            btnAccion.Content = "Aplicación instalada";

            btnAccion.IsEnabled = false;

        }

    }

}

El primer if determina si la aplicación está fuera del navegador, de ser así, el botón simplemente muestra “Actualizar”. Si estamos dentro del navegador, entonces debemos determinar si la aplicación está o no instalada, si no es así, el botón despliega el mensaje “Instalar” y si ya está instalada, mostramos “Aplicación Instalada” y deshabilitamos el botón para evitar una posible excepción. Este método lo mandamos a llamar también en el constructor y además agregamos el un manejador del evento clic:

public MainPage()

{

    // Required to initialize variables

    InitializeComponent();

    btnAccion.Click += new RoutedEventHandler(btnAccion_Click);

    NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

    ActualizarEstados();

    inicializarBoton();

}

Aquí además agregamos un manejador al evento NetworkAddressChanged, con el propósito de actualizar el txtConexion. Y ahora, el código de los manejadores de eventos:

void btnAccion_Click(object sender, RoutedEventArgs e)

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        App.Current.CheckAndDownloadUpdateCompleted += new CheckAndDownloadUpdateCompletedEventHandler(Current_CheckAndDownloadUpdateCompleted);

        App.Current.CheckAndDownloadUpdateAsync();

    }

    else

    {

        App.Current.Install();

    }

}

void Current_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)

{

    if (e.UpdateAvailable)

    {

        MessageBox.Show("La applicación ha sido actualizada, por favor reinicia");

    }

    else

    {

        MessageBox.Show("No hay actualizaciones disponibles");

    }

}

void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)

{

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Si la aplicación está dentro del navedador (código en el bloque else) llamamos al método Install(). Cabe mencionar que este método solo funciona cuando es causado por una acción del usuario, si ustedes lo ponen en el constructor por ejemplo, no funcionará. Si la aplicación ya se encuentra fuera del navegador, entonces procedemos a checar si hay actualizaciones disponibles. Primero añadimos un manejador al evento CheckAndDownloadUpdateCompleted y después mandamos a llamar CheckAndDownloadUpdateAsync(). Éste método va y revisa si hay actualizaciones, si las hay las descarga y las instala cuando la aplicación es reiniciada.

En el manejador del evento de CheckAndDownloadUpdateCompleted revisamos nuestro parámetro de tipo CheckAndDownloadUpdateCompletedEventArgs para ver si hay una actualización disponible. Si la hay mostramos un cuadro de dialogo pidiendo al usuario que reinicie para que se instale la nueva versión.

Por cuestiones de ilustración, este demo tiene la funcionalidad de revisar actualizaciones incluída en una acción de un botón. En una aplicación de verdad, quizá sería prudente hacerlo en el constructor de nuestra clase App por ejemplo.

Finalmente el manejador de NetworkAddressChanged simplemente tiene que mandar a llamar a nuestro primer método para revisar si la conexión está disponible.

¡Nuestra aplicación está casi lista! Solo nos queda habilitarla para instalarla fuera del navegador. Para esto nos vamos a las propiedades de nuestro proyecto, nos aseguramos de que Enable running application out of the browser y damos clic en el botón Out-of-Browser Settings:

Aparecerá un cuadro de dialogo donde podemos definir distintas cosas:

• Window Title: El título de la ventana de la aplicación
• Width y Heigh: Ancho y Alto de la ventana
• Shortcut name: Nombre que llevará el acceso directo
• Download description: Texto que se mostrará en un tooltip al posicionar el cursor sobre el acceso directo de la aplicación.
• Icons: Imágenes que harán de ícono de la aplicación (deben ser parte del proyecto de la aplicación de Silverlight)

Una vez que llenamos la información que queremos se genera un arhivo xml (dentro de la carpeta de propiedades del proyecto) llamado OutOfBrowserSettings.xml, el cúal es muy sencillo y hasta podemos editarlo manualmente (aunque el cuadro de dialogo es más cómodo).

<OutOfBrowserSettings ShortName="OOB Demo" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

  <OutOfBrowserSettings.Blurb>Demo de aplicación fuera del navegador. JAMolina.com</OutOfBrowserSettings.Blurb>

  <OutOfBrowserSettings.WindowSettings>

    <WindowSettings Title="OOB Demo" Height="250" Width="300" />

  </OutOfBrowserSettings.WindowSettings>

  <OutOfBrowserSettings.Icons>

    <Icon Size="16,16">Icons/Logo16.png</Icon>

    <Icon Size="32,32">Icons/Logo32.png</Icon>

    <Icon Size="48,48">Icons/Logo48.png</Icon>

    <Icon Size="128,128">Icons/Logo128.png</Icon>

  </OutOfBrowserSettings.Icons>

</OutOfBrowserSettings>

¡Listo! Nuestra aplicación está lista. Para probar la funcionalidad de actualización pueden barjarse el proyecto para correrla localmente, instalarla y luego modificar algún valor (por ejemplo, algún valor del XAML de la interfaz), compilan y abren la aplicación previamente instalada para probar la actualización.

El resto de la funcionalidad puede ser probada con el demo que pueden encontrar aquí. El código fuente lo pueden descargar de aquí.