Introducción a los Convertidores en Silverlight 2

Introducción a los Convertidores en Silverlight 2

Introducción

Los Convertidores en el contexto de Silverlight, específicamente en el atado a datos son un mecanismo poderoso para poder cambiar un valor cuando de una fuente de datos se esté atando a un destino, pudiendo ser este destino por ejemplo un control.  El atado de datos en Silverlight funciona a partir de cuatro conceptos:  una fuente, la propiedad de la fuente de la que “leeremos” el dato, el destino y la propiedad del destino al que ataremos el dato.

Un ejemplo claro es cuando una fuente de datos incluye un campo tipo DateTime.  Debido a que el tipo de dato DateTime incluye día, mes, año, horas, minutos, segundos y milisegundos, frecuentemente necesitamos únicamente presentar la fecha y quitar la hora.  O por ejemplo cuando a partir de un campo bool deseamos mostrar las palabras ‘Sí’ o ‘No’ en vez de True y False.

Es aquí cuando los Convertidores son una solución natural, ya que nos permiten transformar (convertir) el dato inicial a otro que represente mejor lo que necesitamos mostrar.

Desarrollo

Iniciemos creando una nueva aplicación Silverlight utilizando la plantilla correspondiente en Visual Studio .NET 2008.  A nuestra solución le llamaremos EjemploConvertidores.

En esta solución tendremos como fuente de datos una lista de álbumes musicales, tal y como lo muestra el siguiente código:

Claro está, nuestra fuente de datos puede provenir de un Servicio Web, un Servicio REST, un archivo XML,etc.  Por efectos de simplicidad he modelado directamente en la aplicación las clases Album y Albumes.  Albumes es de tipo List<Album>.  La clase List<T> implementa las interfaces IList y IEnumerable por lo tanto podremos usar Albumes como fuente de datos.

Ahora bien, para este ejemplo declararé el objeto que representa la fuente de datos directamente en markup, esto es, como recurso en el UserControl de Page.xaml.  Hay diferentes maneras de lograr el mismo escenario pero este mecanismo es particularmente más eficiente por el desacoplamiento que logramos.  Además, es necesario recordar que para hacer esto necesitamos importar el espacio de nombres xml en la declaración del control y asignarle un alias.  El alias en este caso se llama ‘app’.  Todo esta idea es mostrada en el siguiente fragmento de código:

El siguiente paso será declarar el control al que deseemos atar la lista de álbumes.  El siguiente fragmento de código muestra un ListBox con un DataTemplate el cual incluye los tres datos de un álbum: título, banda y fecha de lanzamiento; cada uno atándose a un TextBlock.  El concepto de DataTemplate y DataContext será orígen de otro artículo específicamente para el tema de atado de datos.

Al ejecutar la aplicación veremos el siguiente resultado:

Como podemos observar, la fecha está mostrando horas, minutos y segundos y muy probablemente no sea la mejor manera de mostrarla.  Es el momento de crear nuestro primer Convertidor.

Creando el Convertidor de Fecha

Agregaremos a nuestra solución un fólder llamado Convertidores y en este fólder una clase llamada ConvertidorFecha.  Usar fólders nos permite tener más organizado nuestro proyecto Silverlight y es una práctica recomendada.

Los Convertidores son clases que implementan la interfaz IValueConverter.  Esta interfaz expone dos métodos que podemos reemplazar:  Convert y ConvertBack.  El primero es el método que se ejecutará cuando estamos atando el dato de la fuete al destino y ConvertBack es el método que se ejecutará cuando el destino cambie el dato y regrese a la fuente original, en escenarios principalmente de tipos de atado TwoWay.

Para nuestro proyecto implementaremos el método Convert de la siguiente manera:

Es de notar que estamos usando el argumento parameter, el cual representa un parámetro de entrada que podemos establecer cuando realizamos el atado.

Para usar nuestro Convertidor y establecer el parámetro que requiere, modificamos la implementación del Binding en nuestro archivo XAML.  Cada objeto Binding expone diversas propiedades, entre ellas las propiedades Converter y ConverterParameter, siendo el nombre del objeto Convertidor y los parámetros opcionales respectivamente,.

De la  misma manera que dimos de alta la fuente de datos en el diccionario de recursos del UserControl, así expresaremos el Convertidor que acabamos de escribir.  Nótese cómo es requerida la importación del espacio de nombres que representa el fólder creado:

Finalmente, a nuestro objeto Binding de la FechaLanzamiento le aplicamos el Convertidor, por medio de las propiedades Converter y ConverterParameter.  Por medio de la extensión StaticResource invocamos el Convertidor que dimos de alta en el diccionario de recursos:

En ConverterParameter estamos usando la cadena ‘MMMM dd yyyy’ aunque podríamos utilizar cualquier formato de fecha soportado.

El resultado final de nuestra aplicación será la siguiente:

En donde podemos observar que efectivamente el dato mostrado es transformado a través del Convertidor que creamos.

Resumen

Los Convertidores son clases que implementan la interfaz IValueConverter y nos sirven para modificar un dato a otro cuando estamos atando una fuente de datos a un destino, por ejemplo un control.  Este tipo de objetos nos brinda una gran flexibilidad ya que con ellos no es necesario modificar nuestra fuente de datos para poder soportar diversas maneras de mostrar la información.

El código fuente de esta aplicación lo pueden descargar de la sección “Contenido” de La Liga Silverlight.

Pasar parámetros a una aplicación Silverlight desde ASP.NET

Pasar parámetros a una aplicación Silverlight desde ASP.NET

Introducción

Un requerimiento muy común al desarrollar aplicaciones con Silverlight 2 es poder pasar parámetros a la aplicación Silverlight desde ASP.NET.  Esto obedece a diferentes motivos entre los cuales podemos destacar:

  • Parámetros de inicialización
  • Parámetros para un reporte
  • Parámetros para recordar el estado
  • Parámetros de configuración

Sea cual fuese tu requerimiento, esta tarea se puede lograr de una manera muy sencilla.  En este artículo veremos cómo mandar parámetros a un objeto Silverlight usando el control de ASP.NET AJAX.

El control de Silverlight de ASP.NET AJAX cuenta con la propiedad pública InitParameters la cual representa los parámetros que deseamos enviar.  Esta propiedad es de tipo string no obstante podemos mandar diferentes parámetros siempre y cuando tengan el siguiente formato:

llave=valor,llave=valor,llave=valor,…

Esto debido a que la clase StartupEventArgs es un IDictionary<string, string>.  Esta clase es utilizada como argumentos del evento Startup de la aplicación.

Parámetros fijos

Mandar parámetros fijos es una tarea sumamente sencilla: simplemente establece la propiedad InitParameters en el control con la cadena de parámetros que desees enviar.  El siguiente ejemplo de código muestra este concepto:

Parámetros dinámicos

Otra manera –incluso más poderosa- es que la cadena de parámetros no quede fija en el markup de la página, sino crear la cadena a través de la interacción del usuario por ejemplo usando el QueryString.  Esto lo podemos lograr fácilmente en el manejador del evento Load de la página para determinar si el objeto QueryString tiene los parámetros esperados, si es así, mandarlos al control de Silverlight:

Obtención de los parámetros

Sea cual fuese el mecanismo que vas a utilizar para enviarle parámetros al objeto Silverlight, tienes que consumirlos dentro de la aplicación.  Esto se logra por medio del evento Startup.  A continuación se muestra el fragmento de código en App.xaml.cs en donde se aprecia cómo obtenemos el diccionario de parámetros:

Finalmente, con los parámetros disponibles los podemos enviar, por ejemplo, a la página inicial de la aplicación.  Una buena idea será modificar el constructor de la clase para ahí indicar los valores de los argumentos.  El siguiente fragmento de código supone un TextBlock llamado texto el cual establecemos su propiedad Text concatenando los valores obtenidos:

Y otra vez en Startup:

Resultado:

El código fuente lo pueden descargar de la sección “Contenido” en La Liga Silverlight

Resumen

Mandar parámetros a una aplicación Silverlight es una tarea muy sencilla.  En este artículo mostrarmos cómo mandar los parámetros obtenidos en el QueryString del navegador a la página principal de nuestra aplicación.

Creando un lector de feeds RSS con Silverlight 2

Creando un lector de feeds RSS con Silverlight 2

Introducción

En este artículo veremos cómo crear un lector de feeds de RSS 2.0 usando Silverlight 2 como interfaz de usuario, para crear una aplicación que muestre las últimas actualizaciones de una fuente sindicalizada con el formato RSS 2.0.  Este tipo de formato es muy utilizado en los motores de blogging como WordPress, en las plataformas de portales como SharePoint o DotNetNuke entre otro tipo de plataformas; no obstante, no es el único formato para hacer la difusión de contenidos ya que también existe Atom: otro formato similar para la exposición de actualizaciones.

Los formatos RSS como Atom están basados en XML, cada uno con un esquema en particular que los diferencia.  La especificación de RSS (en inglés) la podrán encontrar haciendo clic aquí.

Por otro lado, a partir de la versión 3.5 del .NET Framework se incorporó el namespace System.ServiceModel.Syndication el cual contiene todas las clases necesarias para interpretar y crear este tipo de fuentes de información.

Desarrollo

Comencemos creando una nueva aplicación de Silverlight 2 usando Visual Studio .NET 2008.  A nuestra nueva aplicación le llamaremos FeedSlideShow tal como lo muestra la siguiente figura:

El primer elemento que agregaremos a nuestra aplicación de Silverlight será un User Control llamado FeedBalloon que represente la forma que deseamos que tenga cada uno de los elementos que estamos leyendo del feed.  En el caso de este artículo crearemos una forma tipo “post-it” la cual tenga un título que al hacer clic nos redirija al sitio original del elemento y un cuerpo el cual tenga el texto relacionado con el artículo.  Esto es una tarea sencilla si la realizamos con Expression Blend:

El siguiente fragmento de código muestra el XAML que hemos definido para este ejemplo.  Es importante resaltar que estamos usando elementos “nombrados” para poder tener acceso a ellos cuando creemos cada uno de los elementos en el Canvas de la aplicación.

El segundo elemento que implementaremos a nuestro proyecto de Silverlight será una clase llamada Link, la cual representará cada uno de los elementos que estamos leyendo del feed.  Esta clase tendrá las propiedades Title, Body y Url todas de tipo string.  El siguiente fragmento de código muestra esta clase y en unos momentos más veremos cómo la usaremos en esta aplicación:

Ahora, la página de nuestra aplicación:  Page.xaml.  La aplicación tendrá un lienzo de fondo negro con esquinas redondeadas.  Este lienzo es donde se dibujarán cada uno de los elementos del feed.  Este diseño lo podemos lograr facilmente si implementamos el Canvas dentro de un elemento Border con las propiedades deseadas:

Esta aplicación la haremos parametrizable, para que podamos definir fuera de la aplicación el Url de los feeds que deseamos obtener y no tener esa dirección codificada directamente en el proyecto.  Pasar parámetros en una aplicación Silverlight es una tarea muy sencilla, pero depende de si estamos usando <object> o el control <asp:Silverlight> para instanciar nuestro control de Silverlight.  A continuación se muestra el nombre del parámetro correcto para cada una de estos mecanismos:

<object>
InitParams

<asp:Silverlight>
InitParameters

Independientemente de cuál sea el método que usaremos para instanciar el control de Silverlight, los parámetros los podemos obtener en el evento StartUp de la aplicación.  El nombre por defecto de la aplicación en un proyecto de Silverlight es App, no obstante este nombre es totalmente arbitrario y lo podemos renombrar incluso borrar y agregar uno nuevo.  El siguiente fragmento de código muestra la obtención de los parámetros que recibe la aplicación, y cómo los mandamos a la nueva instancia de la página que usaremos (Page) usando su constructor:

Es importante aquí mencionar que las páginas en una aplicación Silverlight no son más que clases que heredan la clase UserControl, y podemos modificar su comportamiento –en este caso agregando un argumento al constructor principal en Page.xaml.cs-

Como se puede apreciar en el código, estamos usando un campo privado llamado url el cual guarda el Url que se manda como parámetro desde la instanciación del control Silverlight.

Ahora bien, la funcionalidad principal de nuestra aplicación la implementaremos en el event handler del evento Loaded, es decir, Page_Loaded.  Básicamente, tenemos que hacer las siguientes acciones para leer el feed de RSS en cuestión:

  1. Usar el método OpenReadAsync de la clase WebClient para hacer una petición asíncrona del Url RSS que deseamos leer en forma de un Stream
  2. Una vez obtenido el Stream creamos un objeto de tipo XmlReader para leer ese contenido (finalmente el contenido RSS es XML como lo comentamos con anterioridad)
  3. Además de crear el objeto Stream crearemos un objeto de tipo XmlReaderSettings para determinar la configuración del XmlReader.  Este paso aunque no es necesario es recomendado para indicar exactamente cómo queremos que funcione.
  4. Creamos un objeto de tipo Rss20FeedFormatter y determinamos si podemos leer el objeto XmlReader con él.
  5. Si sí lo podemos leer, obtenemos un objeto de tipo SyndicationFeed de la propiedad Feed.  Este objeto incorpora la propiedad Items la cual representa todos y cada uno de los elementos de ese feed.
  6. Leemos esos elementos y creamos una lista genérica de tipo Link (la clase que implementamos más arriba en este artículo).
  7. Iniciamos un timer que nos ayudará a mostrar elemento por elemento de una manera atractiva dentro del Canvas.

A continuación se muestra el código:

Y a continuación el código del Tick del timer.  Cabe notar que estamos haciendo uso de expresiones Lambda en vez de escribir los cuerpos de los manejadores de eventos (event handlers):

En cada Tick del timer:

  1. Actualizamos un contador que nos servirá para ir barriendo uno por uno de los elementos de la lista
  2. Creamos un objeto de tipo FeedBalloon, el cual como recordaremos, representa el elemento visual que vamos a mostrar en el Canvas.  A este objeto le asignamos en sus elementos los valores que deseamos mostrar.  En el caso de este ejemplo estamos usando propiedades normales del CLR, pero podríamos implementar propiedades dependientes para hacer atado de datos en vez de hacerlo de manera directa.  No obstante, por efectos prácticos para este artículo lo haremos directamente.
  3. Creamos una animación programáticamente.  Esta animación hará un efecto de fadein-fadeout cuando presentemos los elementos del feed.  Es notable la potencia de Silverlight al permitirnos definir vía código este tipo de elementos.
  4. La animación la agregamos a un StoryBoard y lo iniciamos.  Cuando finaliza el StoryBoard, removemos el elemento del Canvas y la historia vuelve a comenzar…

Todo completo

La aplicación finalizada la pueden checar en el sitio de ejemplos de La Liga Silverlight y el código fuente lo pueden descargar de la parte de Contenido en el mismo sitio.

No olviden que la aplicación quedó parametrizada así que si usan, por ejemplo, <object> para instanciar su control de Silverlight, deberán incluir el parámetro con la dirección del Url que desean leer:

Resumen

Silverlight nos permite crear aplicaciones con alto impacto visual y que hagan uso de servicios o datos externos, tal es el caso de un feed RSS de un blog o de un portal.  La aplicación que aquí construímos es un ejemplo de esta característica y puede ser usado como base para crear aplicaciones que hagan uso de fuentes sindicadas.

Silverlight Tour Workshop en Guadalajara, Jalisco

Silverlight Tour Workshop en Español – Guadalajara, Jalisco, México

Esta es la última llamada para todos/as los/as interesados en asistir al curso Silverlight Tour Workshop en Español en la tapatía ciudad de Guadalajara que se llevará a cabo los días 18 al 20 de febrero 2009.

El Silverlight Tour Workshop es un curso de Silverlight de tres días de duración completamente en Español y de alta profundidad técnica acerca de Silverlight 2. Incluye los comos y por qués de XAML, el hospedaje en el navegador, las herramientas y el uso de Silverlight 2 en el servidor.  El curso utiliza Silverlight 2 así como las últimas herramientas tecnológicas de Microsoft (incluyendo Visual Studio .NET 2008 y Expression Studio).

La fecha límite para registrarse es el día martes 17 de febrero a las 16:00 hrs.   !Los esperamos!

Recordatorio: Primer reunión presencial de La Liga Silverlight

1er Reunión presencial de la comunidad La Liga Silverlight

Ya está todo listo para que mañana tengamos la primer reunión de la comunidad La Liga Silverlight – la primer comunidad MSDN en español acerca de Silverlight y tecnologías relacionadas.

Ya que es el evento inaugural como comunidad habrá muchos regalos y sorpresas como:

  • Libros técnicos de Microsoft Press
  • Llaveros
  • Playeras de La Liga Silverlight
  • Windows Vista Ultimate (con licencia)
  • Windows 2008 (con licencia)
  • … y más!

Lugar y Hora

Centro del Software (Sala 2) – Guadalajara, Jalisco, México

Hora: A las 6:00 p.m. comienza el registro y a las 6:15 p.m. el show

Agenda

18:00 – 18:15  Registro
18:15 – 18:30  Bienvenida e Introducción a La Liga Silverlight
18:30 – 20:30  Tema:  Silverlight como plataforma de desarrollo
20:30 – 21:00  Rifa de regalos y sorpresas

Los esperamos!

Serie de Videos: Diseño de IU para Desarrolladores

Arturo Toledo acaba de anunciar en su blog la disponibilidad de una serie de videos llamada “Diseño de Interfaz de Usuario para Desarrolladores”.  Son 13 de videos de corta duración en donde podemos encontrar tips y reglas de oro para el diseño gráfico de aplicaciones.  Es un excelente recurso para todos los que estamos envueltos en el mundo de RIA y/o cualquier otro tipo de aplicativo.

La lista de videos es la siguiente (la traducción del título está hecha por mí):

  1. Principios de Diseño (Balance)
  2. Principios de Diseño (Ritmo)
  3. Principios de Diseño (Énfasis)
  4. Principios de Diseño (Simetría)
  5. Principios de Diseño (Unidad)
  6. Principios de Diseño (Puntos, Líneas y Forma)
  7. Eligiendo Colores
  8. Experimentando con Colores para la Interfaz de Usuario
  9. Creando Patrones tipo Mosaico y Azulejo
  10. Aprendiendo a Crear Iconos
  11. Creando un Icono de ejemplo
  12. Diseñando un Botón Cristalino
  13. Aplicando Efectos a Imágenes Bitmap

Chéquenlos están muy buenos.

Salu2!

Construyendo aplicaciones de última generación con Silverlight y Windows Azure (parte 1 de 3): Silverlight + Live Search

Introducción

Incorporar un mecanismo de búsqueda adecuado en las aplicaciones es un escenario muy común hoy en día para construir soluciones con alta funcionalidad, usando diversos servicios especializados que estén al alcance de nuestra mano.  Live Search es un buen ejemplo de este tipo de servicios, el cual podemos utilizar efectuar búsquedas en sitios, imágenes, foros, etc.

En este artículo veremos cómo utilizar el servicio de búsqueda de Microsoft Live Search e incorporarlo en nuestras aplicaciones Silverlight.

API de Live Search

El API de Live Search está disponible hoy en día para implementar características de búsqueda en nuestras aplicaciones de cualquier tipo:  Windows, Web, Móvil, o RIA; como es el caso de este ejemplo ya que usaremos Silverlight.

Para poder usar esta API es necesario crear una cuenta, la cual te dará una llave única relacionada a tu cuenta de MSN.  Esta llave es requerida para crear la petición al servicio y obtener los resultados encontrados.

El API de Live Search soporta 3 tipos diferentes de protocolos:

  • JSON
  • XML
  • SOAP

La decisión de utilizar uno u otro depende directamente del tipo de aplicación en donde usarás esta API.  En nuestro caso utilizaremos SOAP aunque XML o JSON son también opciones bastante viables.

La dirección para obtener una llave es para Live Search es: http://search.live.com/developers/default.aspx

Creando la solución

Crearemos una nueva aplicación Silverlight utilizando la plantilla de Visual Studio .NET 2008 llamada SLSearch.  Esta aplicación será de tipo Application.

Creando el XAML

La aplicación necesita básicamente los siguientes controles:

  • Un control para que el usuario escriba la búsqueda que desee realizar
  • Un control para iniciar esa búsqueda
  • Un control para desplegar los resultados apropiadamente

El siguiente XAML crear un TextBox, Button y ListBox acomodados en un contenedor de tipo Grid.  El resultado de la búsqueda la desplegaremos como una serie de hipervínculos.

Referenciando el servicio

A nuestra aplicación Web (la cual es creada automáticamente por la plantilla de Silverlight) agregaremos una referencia a http://api.search.live.net/search.wsdl?AppID=nuestroAppId  el cual es el URL del servicio Web de búsqueda de Live Search.  Como se podrá observar necesitamos pasar como parámetro el AppID el cual es la llave mencionada con anticipación en este artículo.  A esta referencia le pondremos el nombre ServicioLiveSearch tal y como lo muestra la siguiente figura:

Ahora en nuestra aplicación Web agregaremos una clase llamada Resultado la cual represente un resultado al ejecutar la búsqueda: