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.

0 comentarios sobre “Tutorial Silverlight Parte 3: Usar la red para obtener datos y rellenar un DataGrid”

  1. Para la gente que haya tenido algún problema a la hora de usar la etiqueta Data:DataGrid dentro de la etiqueta TextBlock, deberéis insertar en la cabecera del archivo .xaml el espacio de nombres que hace referencia al ensamblado de silverLigth, bastará con añadir en la cabecera:
    xmlns:Data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”

    Y con eso ya funcinará todo.

  2. Hola, estos tutoriales me parecen muy buenos, pero estaba haciendo la parte dos que era muy facil de seguir, y cuando llegue a la parte 3 encontre ue habia cosas muy avanzadas y que no era capaz de crear esta aplicacion,
    Hay algun otro tutorial en espanol de silverlight que empieze desde cero?
    Gracias en antelacion y gracias por molestarte en crear estos tutoriales.

  3. Victor, muy buen comentario, sin embargo olvidaste mencionar que hay que agregar la referencia al System.Windows.Control.Data y aprovechando hay que agregar la referencia a Sistem.Xml.Linq. Lo anterior se hace en las propiedades del proyecto DiggSample, en la pestaña “References”.

    Saludos y gracias por el tutoria.

  4. Estoy con Cesar, agradezco mucho el aporte pero en esta parte 3 o faltan datos que se sobresuponen(los principiantes no tenemos estos conocimientos) o algo hay que en la función DisplayStories no reconoce la mitad de los comandos.

    No existe una ampliación de este manual para zoquetes??

    De todos modos, gracias.

  5. En Silverlight 5 me da el error de seguridad System.Security.SecurityException : Error de Seguridad

    Me fui a los manuales de Microsoft y dice lo siguiente :

    Si el archivo de política recuperada se analiza correctamente y concede el permiso, una conexión se abre finalmente al host de destino. Si el archivo de política recuperada no es válido y no pueda analizarse correctamente, las conexiones a la red de recursos se les niega el tiempo de ejecución de Silverlight y cualquier solicitud de conexión fallará. Si no hay ningún archivo de política se encuentra, entonces las conexiones a la red de recursos se les niega el tiempo de ejecución de Silverlight y cualquier solicitud de conexión fallará.

    cuando habla de los archivos de politica se refiere a clientaccesspolicy.xml o crossdomain.xml es decir tiene que estar en el dominio de destino.

    Entiendo que este tipo de llamadas entre dominios pueden causar Silverlight para aplicar un control de seguridad, pero en este caso, no tengo ningún control sobre el servicio. Así que, ¿cómo puedo añadir / utilizar los archivos clientaccesspolicy.xml o crossdomainpolicy.cml?

    por favor ayuda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *