Maquetar una aplicacion Twitter en Silverlight con Expression Blend 2

Silverlight 2 nos ofrece una gran plataforma para crear aplicaciones RIA multinavegador y multiplataforma.

Una de las cosas que hacen a Silverlight tan poderoso es que permite que diseñadores y programadores puedan colaborar en un mismo proyecto. Los desarrolladores pueden usar Visual Studio para abrir y modificar proyectos Silverlight 2 y tener toda la potencia de .NET y los desarrolladores pueden usar Expression Blend 2 SP1 para trabajar con el mismo proyecto y usar una herramienta para poder pulir, crear y optimizar los diseños que harán una rica experiencia de usuario.

El framework de WPF que publicamos en Silverlight permite dar soporte a un maravilloso flujo de trabajo entre programadores y diseñadores, dando soporte a conceptos como layout management, controles, estilos, templates, y recursos – que facilitan la integración de funcionalidad, comportamiento y diseño.

Ejemplo de Twitter con Silverlight 2

El mes pasado posteé un tutorial bastante amplio sobre cómo crear una aplicación digg con Silverlight 2 que podéis encontrar aquí. Este tutorial se centra primero en los aspectos de la programación e introduce los conceptos fundamentales necesarios a la hora de crear una aplicación Silverlight 2.

Celso gomes y Peter Blois han publicado un video tutorial de 10 minutos en el que nos muestran el uso de Expression Blend para maquetar una aplicación de Twitter Silverlight 2. El vídeo lo tenéis aquí. Podéis descargar el código completo aquí.

En el video se muestra cómo se puede re-maquetar una aplicación Silverlight sin tener que pelearnos con el código que hay detrás. En el proceso se muestra el poder y las capacidades de Expression blend 2 para crear experiencias de usuario amigables. Celso empieza con la versión del desarrollador, y la personaliza para que tenga un aspecto más amigable, en plan twitter.

El modelo de la aplicación.

El cliente de Twitter con Silverlight está hosteada en una aplicación ASP.NET que expone un servicio web que permite comunicarse con el servicio de Twitter (ya que Twitter no permite acceso directo desde las aplicaciones cliente). la comunicación entre el cliente Silverlight y el servidor web ASP.NET es con Windows Communication Foundation (WCF).

La aplicación cliente usa el patron Modelo -Vista -Presentación (MVP) (también conocido como Modelo-Vista-VistaModelo) que es usado comunmente en aplicaciones WPF amplias. Aunque en nuestro caso es una aplicación sencilla queríamos aprovechar la flexibilidad que MVP permite para un posible crecimiento algo más adelante.

Manteniendo la separación entre el aspecto visual y la lógica permite que los diseñadores puedan aplicar cambios muy complejos a la forma en que se ve, sin tener que modificar nada del flujo de la aplicación. El video habla sobre algunos ejemplos de extensibilidad que tiene esta arquitectrua.

El proceso de maquetación.

En el video, Celso resalta cómo los Resources ayudan a los diseñadores a cambiar colores rápidamente. Un Brush Resource común, por ejemplo, se puede usar para cambiar el color de todos los elementos del texto de la apliación.

Celso muestra cómo de facil es crear un nuevo User Control para gráficos con Expression Blend 2 SP1 (con tan solo seleccionar varios elementos en el diseñador, boton derecho, y seleccionamos la opción “Make Control”):

También nos enseña cómo crear nuevos estados en el user Control (con el Visual State Manager – que también está ahora disponible en WPF), para animar el pájaro (volar, etc..)

También nos enseña a crear animaciones por cada estado, cambiando las propiedades avanzadas de las curvas Key Spline, y el Repeat Behavior:

también muestra cómo crear botones personalizados desde dibujos (que pueden venir desde un XAML o cualquier otra herramienta como Photoshop o Illustrator). Todos los estados del control Button están disponibles:

Expression Blend también nos permite cambiar controles complejos como los ListBox. Los diseñadores tienen acceso a todos los estilos, tempaltes y estados – y pueden personalizar todas las partes de un List Box sin tener que escribir nada de código:

Podéis ver el vídeo y descargar el código para comprobar cómo funciona la aplicación de Twitter.

Si queréis aprender más sobre Expression Blend, os recomiendo ver la presentación Expression Blend: Trucos del PDC de hace dos semanas.

Actualización: Mirad también el webcast de Shawn Wildermuth Deep Control Skinning with Styles.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.