Tutorial Silverlight Parte 3: Usar la red para obtener datos y rellenar un DataGrid

Este es el tercero de ocho tutoriales en el que estamos creando un cliente de Digg con la Beta 1 de Silverlight 2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.

Podéis descargar el código fuente completo de la aplicación que estamos haciendo aquí.

Usando Networking para obtener historias de Digg

Silverlight 2 tiene una API de networking integrada para permitir que los clientes Silverlight puedan llamar a servicios remotos con REST, SOAP/WS*, RSS, JSON y servicios web XML. También incluye una API para sockets (System.Net.Sockets) para poder comuncar con otros protcolos que no-HTTP (ideal para escenarios como servidores de chat, etc).

Cross Domain Network Access

Las aplicaciones Silverlight 2 siempre pueden llamar al servidor “origen” cuando hacen llamadas a través de la red (es decir, pueden llamar a urls del mismo dominio del que se descargó la aplicación). También se pueden hacer llamadas a traves de dominos (es decir, puden llamar a urls de distinto dominio del que fué descargada) cuando el servidor web tenga un archivo de políticas XML en donde se indica qué clientes pueden hacer esas llamadas.

Silverlight 2 definie un formato para estos archivos que permite a los administradores de los servidores tener un control total sobre lo que puede acceder un cliente. También es compatible con el formato de estos archivos de Flash – con lo que podemos usar cualquier end-point remoto con REST, SOAP/WS*, RSS, JSON o XML que esté disponible para clientes Flash.

Digg.com tiene un gran conjunto de APIs que publican sobre HTTP. Como tienen archivos de políticas para Flash, podemos usarlo en nuestra aplicación Silverlight (sin tener que hacer ningún tunel con nuestro servidor web para poder usar esas APIs).

Digg.com Topic Feed API

Queremos que nuestros usuarios puedan realizar una búsqueda (por ejemplo: “Programming”) y que Digg.com nos devuelva el resultado de la búsqueda:

Podemos usar la API para feeds de Digg.com para ello. Recive un tema como parámetro en la url (por ejemplo: GET /stories/topic/programming), y devuelve un XML con las historias de digg que coinciden con el tema. Aquí tenéis un ejemplo de cómo es el XML que se devuelve.

Llamadas asíncronas a .Digg REST con System.Net.WebClient.

Cuando hacemos clic en el botón de búsqueda, capturaremos el evento “clic”, obtendremos la cadena con el tema a buscar del control WaterMarkTextBox, e iniciaremos una llamada a Digg para obtener el XML del que hablábamos anteriormente.

Silverlight incluye la clase WebClient en el namespace System.NET (también está en la versión completa del Framework). Con esta clase podemos descargar contenido asíncronamente de una URL. La ventaja de descargarnos el XML asíncronamente es que la interfaz de usuario no se bloqueará ni dejará de responder mientras esperamos al servidor remoto (consiguiendo de esta manera una experiencia de usuario fluida).

Todo lo que tenemos que hacer para hacer esto es subscribirnos al evento “DownloadStringCompleted” que se lanzará cuando se termine la descarga, y luego llamar al método WebClient.DownloadStringAsync(url) para comenzar la descarga:

Y con el código anterior ya podemos obtener asíncronamente un string con datos XML que contiene el resultado de la búsqueda.

LINQ to XML para parsear los resultados en clases.

Ahora que podemos obtener un xml con datos, el próximo paso es parsearlo y convertirlo en objetos “DiggStory” para que podamos manipularlos y enlazarlos con los controles.

Esto lo haremos definiendo la clase “DiggStory” con propiedades que se mapean con el contenido de Digg (aprovecharemos las “propiedades automáticas” de C# para conseguir esto):

Ahora podemos usar LINQ(que está incluido en Silverlight 2) y LINQ to XML (una librería extra que podemos añadir a nuestra aplicación) para parsear y filtrar el contenido del documento XML de Digg, y traducirlo en una secuencia de objetos “DiggStory” con el siguiente código:

Fijáos que estamos usando un tipo fuertemente tipado con objetos DiggStory a partir del XML.

Mostrar los reultados en un DataGrid

Usaremos el nuevo control DataGrid de Silverlight para mostrar los resultados. Para ello tenemos que referneciar al assembly de controles de Silverlight, y remplazaremos el texto “Todo” de la página con la declaración del control DataGrid:

El DataGrid nos permite configurar las columnas y mostrar los tipos (para un control mayor). Además podemos poner la propiedad “AutoGenerateColumns” a true para que use la reflexión del datasource y cree automáticamente las columnas basándose en el esquema de los objetos.

Actualizamos el code behind para enlazar la propiedad ItemSource del datagrid con la secuencia de historias que obtenemos de Digg:

Y ahora cuando ejecutemos la aplicación y hagamos una búsqueda, veremos un listado con los datos que nos devuelve Digg:

El DataGrid de Silverlight soporta todas las características estándar que esperamos que un control de servidor tenga: edicion, selección, scroll, redimensionado, etc. También soporta el auto-flow layout, es decir, se puede expandir y contraer dinámicamente ajustándose al tamaño de su contenedor. También tiene un modelo de templates que nos permiten personalizar el visionado y la edición de datos. Veremos estas características con más detalles en otros post.

Traducido por: Juan María Laó Ramos.

Artículo original.