Essayez ! Créer un lecteur de News RSS

Les flux Web, tels que les échanges de News (discussion) ou les podcasts, utilisent souvent des fichiers mis en forme en XML pour leur contenu. Vous pouvez recourir à des programmes appelés lecteurs ou agrégateurs pour vous abonner aux flux Web et les lire. Il arrive souvent qu’un lecteur reste ouvert sur votre ordinateur et qu’il se mette à jour tout seul avec le nouveau contenu pendant l’actualisation du flux Web. Le mécanisme de livraison de flux Web le plus connu s’appelle le RSS (Really Simple Syndication).

Les procédures suivantes montrent comment créer un lecteur RSS simple à l’aide de Microsoft Expression Blend et d’un flux RSS. Le lecteur RSS vous permet de lire n’importe quelle source de données XML, notamment un fichier local ou un fichier XML de votre site Web.

Remarque :
Dans les procédures suivantes, il est supposé que vous disposez d’une connexion active à Internet.

Remarque :
Silverlight 2 ne prend pas en charge les sources de données XML. Cependant, vous pouvez trouver des informations sur l’utilisation des données XML sous Parsing XML Data in Silverlight (Analyse de données XML dans Silverlight) sur MSDN.

Création de la source de données

Pour créer la source de données

1. Dans Expression Blend, cliquez sur Nouveau projet dans le menu Fichier, puis sur Application WPF (.exe).

   Un projet est créé.

2. Sous Données dans le panneau Projet, cliquez sur +XML.

   La fenêtre Ajouter une source de données XML s’ouvre.

3. Dans le champ Nom de la connexion, tapez « rssDS » et dans le champ URL des données XML, tapez l’URL d’un flux RSS. Par exemple, pour créer une source de données XML vers le flux météo MSNBC, vous taperiez « http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml » (en anglais). Cliquez sur OK.

   Conseil :

   Vous pouvez utiliser une URL ou un chemin d’accès local vers un fichier XML dans le champ URL des données XML. Si vous souhaitez utiliser un autre flux RSS, vous pouvez localiser l’URL en ouvrant un site Web d’un fournisseur Web (par exemple, http://www.msnbc.com (en anglais)) et en recherchant un lien vers ses flux RSS. En règle générale, le site Web contient la liste des flux disponibles ainsi que les boutons qui vous permettent de vous abonner au flux. Recherchez un lien vers le fichier XML correspondant au flux souhaité.

4. Une source de données nommée rssDS est ajoutée sous Données dans le panneau Projet. Développez les nœuds et examinez les différents champs de la source de données. Les données ne sont pas affichées ; seuls le sont les noms des champs contenant les données et leur structure.

   Vous pouvez à présent lier les contrôles de votre application aux données.

   Panneau Données après l’ajout de la source de données XML

   

Haut de la page

Liaison aux champs de données par glissement des champs à partir du panneau Projet

Il existe de nombreux moyens de lier des contrôles à des éléments d’une source de données. La procédure suivante vous montre comment faire glisser des champs de sources de données du panneau Projet vers la planche graphique pour créer deux contrôles. Vous pouvez également faire glisser des champs de sources de données dans des contrôles existants pour lier les données aux propriétés de ces contrôles.

Pour lier des champs de données par glissement des champs à partir du panneau Projet

1. Sous Données dans le panneau Projet, développez les nœuds rss, channel et image. Faites glisser le nœud url : (String) vers la planche graphique dans le coin supérieur gauche. Dans la liste déroulante qui apparaît, cliquez sur le contrôle Image.

   Un objet Image est créé sur la planche graphique et la boîte de dialogue Créer une liaison de données s’ouvre.

2. Le champ Sélectionner un champ spécifie la propriété de l’objet Image auquel vous souhaitez lier l’élément de données URL. La sélection par défaut (Source) étant correcte, cliquez sur OK.

   L’objet Image sur votre planche graphique reflète l’image trouvée à l’emplacement de l’URL à partir de l’élément de données. Utilisez l’outil Sélection pour faire glisser l’objet Image vers le coin supérieur gauche de la planche graphique et en réduire la taille pour la mettre à l’échelle.

   Planche graphique après l’ajout et la liaison d’un objet Image à l’élément de données URL (l’image peut changer d’apparence)

   

3. Sous Données dans le panneau Projet, développez les nœuds rssDS, rss et channel. Faites glisser le nœud title : (String) sur la planche graphique vers la droite de l’objet Image. Dans la liste déroulante qui apparaît, cliquez sur le contrôle Label. La propriété par défaut indiquée en regard du champ Sélectionner un champ de la boîte de dialogue Créer une liaison de données étant correcte (Content), cliquez sur OK.

   La boîte de dialogue Créer un modèle de données apparaît.

4. L’option Nouveau modèle de données et champs d’affichage est sélectionnée et configurée pour créer un modèle de données présentant l’élément de données Title (titre) dans un contrôle TextBlock. Cliquez sur OK.

   Le titre de l’échange de News apparaît dans le nouveau contrôle Label sur la planche graphique. Utilisez l’outil Sélection pour déplacer l’objet Label et le mettre à l’échelle, puis utilisez les propriétés des catégories Texte et Pinceaux du panneau Propriétés pour modifier l’apparence du texte.

   Remarque :
   Le contrôle TextBlock sous Objets et chronologie ne s’affiche pas car il fait partie du modèle de données Contenu généré utilisé pour créer l’apparence du contrôle lorsqu’il est lié aux données. Pour plus d’informations sur les modèles, voir Créer ou modifier un modèle de contrôle.

   Planche graphique après l’ajout et la liaison d’un objet Label à l’élément de données titre (la planche graphique peut changer d’apparence)

   

Haut de la page

Utilisation d’un contexte de données pour lier plusieurs contrôles à des données identiques

L’affectation d’un contexte de données à un objet parent vous permet d’utiliser le même instantané de données dans plusieurs objets enfants. Cette méthode est utile pour créer une structure maître/détails dans laquelle, si vous cliquez sur un élément dans une liste (le volet principal), les informations concernant cet élément apparaissent dans un autre objet (le volet d’informations).

Pour utiliser un contexte de données pour lier plusieurs contrôles à des données identiques

1. Créez un panneau Grille qui couvre la zone située en dessous de l’image et du titre. L’objet Grille sera votre objet parent lorsque vous définirez le contexte de données.

2. Sous Objets et chronologie, cliquez sur le nouvel objet grille pour le sélectionner, puis recherchez la propriété DataContext sous Propriétés communes dans le panneau Propriétés.

3. Cliquez sur le bouton Options de propriétés avancées  associé à la propriété DataContext, puis cliquez sur Liaison de données.

   La boîte de dialogue Créer une liaison de données s’ouvre.

4. Dans l’onglet Champ de données (valeur par défaut), sous Sources de données, cliquez sur rssDS. Sous Champs, développez les nœuds rss et channel, sélectionnez item (Array), puis cliquez sur Terminer.

   Vous avez affecté la collection d’éléments de la source de données au nouvel objet grille. Tout enfant de l’objet grille peut à présent utiliser le même instantané de la collection d’éléments.

5. Sélectionnez l’outil Sélection, puis double-cliquez sur le nouvel objet grille afin de l’activer et d’y ajouter des objets enfants.

6. Dans la Boîte à outils, sélectionnez le contrôle ListBox , puis dessinez un ListBox qui occupe la moitié gauche de la grille.

7. Sélectionnez le contrôle ListBox à l’aide de l’outil Sélection, puis recherchez la propriété ItemsSource sous Propriétés communes dans le panneau Propriétés.

   Remarque :

   Vous pouvez affecter à la propriété ItemsSource n’importe quelle collection d’éléments. Seule l’une des propriétés ItemsSource ou Items peut être utilisée à la fois. La propriété ItemsSource permet généralement de lier à une collection d’éléments générés. Vous pouvez utiliser la propriété Items pour ajouter manuellement des éléments individuels à l’aide du bouton Modifier les éléments de cette collection.

8. Cliquez sur le bouton Options de propriétés avancées  associé à la propriété ItemsSource, puis cliquez sur Liaison de données.

   La boîte de dialogue Créer une liaison de données s’ouvre.

9. Cliquez sur l’onglet Contexte de données explicite. Sous Champs, développez les nœuds rss et channel, puis cliquez sur item (Array). Cliquez sur le bouton Définir DataTemplate.

   La boîte de dialogue Créer un modèle de données s’ouvre.

10. Sélectionnez la troisième option, Nouveau modèle de données et champs d’affichage (paramètre par défaut). Désactivez la case à cocher en regard du champ item afin de désactiver rapidement toutes les cases à cocher. Activez la case à cocher en regard de title, puis cliquez sur OK.

    L’objet ListBox, à présent lié aux données item (Array), affiche la liste des nouveaux éléments.

    Planche graphique après l’ajout et la liaison d’un objet ListBox à la collection de données d’éléments (la planche graphique peut changer d’apparence)

    

11. Dans la Boîte à outils, sélectionnez le contrôle TextBlock , puis dessinez un TextBlock qui occupe la moitié droite de la grille.

12. Sélectionnez le TextBlock à l’aide de l’outil Sélection, puis recherchez la propriété Text sous Propriétés communes dans le panneau Propriétés. Cliquez sur le bouton Optionsde propriétésavancées associé à la propriété Text, puis cliquez sur Liaison de données.

    Remarque :
    Lorsque vous ajoutez un contrôle Text sur la planche graphique, Expression Blend passe en mode d’édition de ce contrôle. Pour vous, cela signifie que vous pouvez taper immédiatement du contenu dans le contrôle mais que vous ne pouvez pas accéder à la totalité des propriétés relatives à ce contrôle. Pour quitter le mode d’édition, appuyez sur la touche Échap ou cliquez sur l’outil Sélection.

    La boîte de dialogue Créer une liaison de données s’ouvre.

13. Cliquez sur l’onglet Contexte dedonnées explicite. Sous Champs, développez les nœuds rss et channel, sélectionnez item (Array), puis cliquez sur description : (String). Cliquez sur Terminer.

    L’objet TextBlock, à présent lié à la description de l’élément sélectionné dans la ListBox du fait que les deux contrôles partagent le même contexte de données, contient la description.

    Planche graphique après l’ajout et la liaison d’un objet TextBlock à l’élément de données Description. (La planche graphique peut changer d’apparence.)

    

14. Appuyez sur F5 pour exécuter l’application, puis cliquez sur la ListBox dans l’application pour modifier la sélection afin de lire des descriptions de News différentes.

    Remarque :
    Il est possible que certains éléments contiennent du texte HTML. Vous pouvez créer un convertisseur de valeurs qui supprimerait les éléments HTML de la chaîne Description et que vous appliqueriez ensuite dans la boîte de dialogue Créer une liaison de données. Pour plus d’informations sur la création d’un convertisseur de valeurs, voir Essayez ! Créer et appliquer un convertisseur de valeurs.

Haut de la page