Inténtelo: Crear un lector de noticias RSS

  • Artículo

Esta página es específica de proyectos WPF

Las fuentes web, como las fuentes de noticias o podcasts, suelen usar archivos con formato XML para su contenido. Puede usar programas llamados lectores o agregadores para suscribirse a las fuentes web y leerlas. A menudo, los lectores permanecen abiertos en el equipo y se actualizan con contenido nuevo cada vez que se actualiza la fuente web. El mecanismo de entrega más común de las fuentes web se denomina Really Simple Syndication (RSS).

Los siguientes procedimientos muestran cómo crear un lector RSS sencillo mediante Microsoft Expression Blend y una fuente RSS. El lector RSS puede servir para leer cualquier origen de datos XML, incluso un archivo local o un archivo XML de su propio sitio web.

[!NOTA]

En los siguientes procedimientos, se presupone que dispone de una conexión activa a Internet.

[!NOTA]

Silverlight 2 no es compatible con orígenes de datos XML. No obstante, puede obtener información acerca de cómo trabajar con datos XML en Análisis de datos XML en Silverlight en MSDN (puede estar en inglés).

Crear el origen de datos

Para crear el origen de datos

  1. En Expression Blend, en el menú Archivo, haga clic en Nuevo proyecto y, a continuación, haga clic en Aplicación WPF (.exe).

    Se creará un nuevo proyecto.

  2. En Datos del panel Proyecto, haga clic en +XML.

    Se abrirá la ventana Agregar origen de datos XML.

  3. En el campo Nombre de conexión, escriba "rssDS" y, en el campo URL para datos XML, escriba la dirección URL de una fuente RSS. Por ejemplo, para crear un origen de datos XML para la fuente de información meteorológica de MSNBC, debería escribir "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml". Haga clic en Aceptar.

    Cc294852.alert_tip(es-es,Expression.10).gifSugerencia:

    Puede escribir cualquier dirección URL o ruta de acceso local a un archivo XML en el campo URL para datos XML. Si desea usar otra fuente RSS, puede encontrar la dirección URL abriendo el sitio web de un proveedor en un explorador web (por ejemplo, http://www.msnbc.com) y buscando un vínculo a las fuentes RSS. Normalmente, el sitio web mostrará las fuentes disponibles y los botones que le permiten suscribirse a ellas. Busque un vínculo al archivo XML de la fuente que desea.

  4. Se agregará un origen de datos denominado rssDS en Datos, en el panel Proyecto. Expanda los nodos y examine los distintos campos del origen de datos. No se muestran los datos, sino sólo los nombres de los campos que contienen los datos y su estructura.

    Ahora ya puede enlazar controles de la aplicación a los datos.

    Panel Datos después de agregar el origen de datos XML

    Cc294852.14b54f1f-7d84-4604-ba0a-35b50460b6cf(es-es,Expression.10).png

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Enlazar a campos de datos arrastrándolos desde el panel Proyecto

Existen diversas formas de enlazar controles a elementos de un origen de datos. El siguiente procedimiento muestra cómo arrastrar campos de origen de datos desde el panel Proyecto hasta la mesa de trabajo para crear dos controles nuevos. También se pueden arrastrar campos de origen de datos a controles existentes para enlazar los datos a propiedades de estos controles.

Para enlazar a campos de datos arrastrándolos desde el panel Proyecto

  1. En Datos del panel Proyecto, expanda los nodos rss, channel e image. Arrastre el nodo url : (String) a la mesa de trabajo, en la esquina superior izquierda. En la lista desplegable que se muestra, haga clic en el control Image.

    Se creará un objeto Image en la mesa de trabajo y se abrirá el cuadro de diálogo Crear enlace de datos.

  2. Seleccionar campo especifica la propiedad del objeto Image al que desea enlazar el elemento de datos URL. La selección predeterminada (Source) es correcta, por lo que puede hacer clic en Aceptar.

    El objeto Image de la mesa de trabajo refleja la imagen correspondiente a la URL del elemento de datos. Use la herramienta SelecciónCc294852.2ff91340-477e-4efa-a0f7-af20851e4daa(es-es,Expression.10).png para arrastrar el objeto Image a la esquina superior izquierda de la mesa de trabajo y reducir su tamaño a escala.

    La mesa de trabajo tras la adición de un objeto Image y su enlace al elemento de datos URL (la apariencia de la imagen habrá cambiado)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(es-es,Expression.10).png

  3. En Datos del panel Proyecto, expanda los nodos rssDS, rss y channel. Arrastre el nodo title : (String) a la mesa de trabajo, a la derecha del objeto Image. En la lista desplegable que se muestra, haga clic en el control Label. La propiedad predeterminada que figura junto a Seleccionar campo en el cuadro de diálogo Crear enlace de datos es correcta (Content, contenido), por lo que puede hacer clic en Aceptar.

    Aparecerá el cuadro de diálogo Crear plantilla de datos.

  4. La opción Nueva plantilla de datos y campos para mostrar está seleccionada y configurada para crear una plantilla de datos que mostrará el elemento de datos title en un control TextBlock. Haga clic en Aceptar.

    El título de la fuente de noticias se muestra en el nuevo control Label en la mesa de trabajo. La herramienta Selección permite mover el objeto Label y ajustar su escala, mientras que las propiedades de las categorías Texto y Pinceles del panel Propiedades permiten cambiar la apariencia del texto.

    [!NOTA]

    No verá el control TextBlock en Objetos y escala de tiempo porque este control forma parte de la plantilla de datos Contenido generado que sirve para diseñar la apariencia del control cuando se enlaza a datos. Para obtener información acerca de las plantillas, vea Crear o editar una plantilla de control.

    La mesa de trabajo tras la adición de un objeto Label y su enlace al elemento de datos title (la apariencia de la imagen habrá cambiado)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(es-es,Expression.10).png

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Usar un contexto de datos para enlazar varios controles a los mismos datos

La asignación de un contexto de datos a un objeto primario permite usar la misma instantánea de datos en varios objetos secundarios. Esto es útil cuando se desea crear un diseño de tipo maestro/detalles en el que, si se hace clic en un elemento de la lista (el panel maestro), la información sobre dicho elemento aparece en otro objeto (panel de detalles).

Para usar un contexto de datos para enlazar varios controles a los mismos datos

  1. Cree un panel de cuadrículaCc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(es-es,Expression.10).png que ocupe el área situada bajo la imagen y el título. El objeto Grid será el objeto primario en el que se establece el contexto de datos.

  2. En Objetos y escala de tiempo, haga clic en el nuevo objeto Grid para seleccionarlo y, a continuación, busque la propiedad DataContext (contexto de datos) en Propiedades comunes, en el panel Propiedades.

  3. Haga clic en el botón Opciones avanzadas de la propiedadCc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png asociado a la propiedad DataContext (contexto de datos) y, a continuación, haga clic en Enlace de datos.

    Se abrirá el cuadro de diálogo Crear enlace de datos.

  4. En la ficha Campo de datos (la ficha predeterminada) de Orígenes de datos, haga clic en rssDS. En Campos, expanda los nodos rss y channel, haga clic en item (Array) y después haga clic en Finalizar.

    Ha asignado la colección item del origen de datos al nuevo objeto Grid. Ahora todos los elementos secundarios del objeto Grid pueden usarse con la misma instantánea de la colección item.

  5. Con la herramienta Selección, haga doble clic en el nuevo objeto Grid para activarlo y poder agregar objetos secundarios.

  6. En el cuadro de herramientas, seleccione el control ListBoxCc294852.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,Expression.10).png y a continuación, dibuje un control ListBox que ocupe la mitad izquierda de la cuadrícula.

  7. Seleccione el control ListBox con la herramienta Selección, y localice la propiedad ItemsSource (original de elementos) en Propiedades comunes del panel Propiedades.

    [!NOTA]

    La propiedad ItemsSource (original de elementos) puede establecerse en cualquier colección de elementos. Las propiedades ItemsSource (original de elementos) e Items (elementos) no pueden usarse de forma simultánea. La propiedad ItemsSource (original de elementos) suele usarse para enlazar a una colección de elementos generados. La propiedad Items (elementos) puede usarse para agregar elementos individuales de forma manual mediante el botón Editar elementos de esta colección.

  8. Haga clic en el botón Opciones avanzadas de la propiedadCc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png asociado a la propiedad ItemsSource y, a continuación, haga clic en Enlace de datos.

    Se abrirá el cuadro de diálogo Crear enlace de datos.

  9. Haga clic en la ficha Contexto de datos explícito. En Campos, expanda los nodos rss y channel, haga clic en item (Array). Haga clic en el botón Definir plantilla de datos.

    Se abrirá el cuadro de diálogo Crear plantilla de datos.

  10. Active la tercera opción Nueva plantilla de datos y campos para mostrar (la predeterminada). Desactive la casilla junto a elemento para desactivar todas las casillas de una vez. Active la casilla junto a title y haga clic en Aceptar.

    El objeto ListBox, que ahora está enlazado a los datos de item (Array), muestra la lista de noticias.

    La mesa de trabajo tras la adición de un objeto ListBox y su enlace a la colección de datos item (Array) (la apariencia de la imagen habrá cambiado)

    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(es-es,Expression.10).png

  11. En el cuadro de herramientas, seleccione el control TextBlockCc294852.42165963-00f7-4a33-abcd-b0849edebada(es-es,Expression.10).png y, a continuación, dibuje un control TextBlock que ocupe la mitad derecha de la cuadrícula.

  12. Seleccione el control TextBlock con la herramienta Selección, y localice la propiedad Text (texto) en Propiedades comunes del panel Propiedades. Haga clic en el botón Opcionesavanzadasde la propiedadCc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png asociado a la propiedad Text y después haga clic en Enlace de datos.

    [!NOTA]

    Cuando se agrega un control de texto a la mesa de trabajo, Expression Blend entra en el modo de edición para el control. Esto significa que puede escribir contenidos inmediatamente en el control, pero no puede obtener acceso a todas las propiedades del mismo. Para salir del modo de edición para el control, presione ESC o haga clic en la herramienta Selección.

    Se abrirá el cuadro de diálogo Crear enlace de datos.

  13. Haga clic en la ficha Contextode datos explícito. En Campos, expanda los nodos rss y channel, haga clic en item (Array) y después haga clic en description: (String). Haga clic en Finalizar.

    El objeto TextBlock, que ahora está enlazado a los datos de description del elemento que está seleccionado en el ListBox porque ambos controles comparten el mismo contexto de datos, muestra la descripción.

    Mesa de trabajo tras la adición de un objeto TextBlock y su enlace al elemento de datos Description (es posible que la apariencia de la mesa de trabajo sea distinta).

    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(es-es,Expression.10).png

  14. Presione F5 para ejecutar la aplicación y, a continuación, haga clic en el ListBox en la aplicación para cambiar la selección y poder leer distintas descripciones de noticias.

    [!NOTA]

    Algunos elementos podrían incluir texto HTML. Puede crear un convertidor de valores que quite los elementos HTML de la cadena Description y, a continuación, aplicar ese convertidor de valores en el cuadro de diálogo Crear enlace de datos. Para obtener información acerca de cómo crear un convertidor de valores, vea Inténtelo: Crear y aplicar un convertidor de valores.

Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio