Microsoft Silverlight 4 - Tutoriel 17 : Lecteur de flux RSS

Lecteur de flux RSS avec le mode hors navigateur et les privilèges élevés

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Silverlight 4 par le biais d'exemples pas à pas.

Langage : VB.NET

Public visé : niveau Intermédiaire

Commentez ce tutoriel : Commentez Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - RSS Reader with Out-of-Browser Mode and Elevated Trust.

Introduction

RSS Reader vous permet d'accéder au contenu des flux RSS en utilisant la prise en charge du Service Model Syndication dans Silverlight. Par ailleurs, ce lecteur possède un mode hors navigateur optionnel pour la navigation dans tout flux de syndication compatible.

Lecteur de flux RSS avec le mode hors navigateur et les privilèges élevés

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express, ensuite sélectionnez Fichier puis Nouveau Projet... Sélectionnez Visual Basic ensuite Application Silverlight dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Image non disponible

Étape 2

Une nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :

Image non disponible

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Image non disponible

Étape 4

Sélectionnez Projet ensuite Ajouter une référence... La fenêtre Ajouter une référence devrait apparaître, sélectionnez System.ServiceModel.Syndication dans la liste .NET :

Image non disponible

Étape 5

Ajouter la référence à System.ServiceModel.Syndication en cliquant sur OK.

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code au-dessus de la ligne Partial Public Class MainPage tapez le code suivant :

 
Sélectionnez
Imports System.ServiceModel.Syndication
Imports System.Windows.Data
Imports System.Text.RegularExpressions
Imports System.Windows.Browser
Image non disponible

Étape 6

Puisque nous en sommes à la vue de code, en dessous du End Class pour la classe Partial Public Class MainPage tapez les classes suivantes :

 
Sélectionnez
Public Class LinkFormatter
    Implements IValueConverter
  Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
      ByVal parameter As Object, _
      ByVal culture As System.Globalization.CultureInfo) As Object _
      Implements IValueConverter.Convert
    Return DirectCast(value, System.Collections.ObjectModel.Collection(Of SyndicationLink)).FirstOrDefault.Uri
  End Function

  Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
     ByVal parameter As Object, _
     ByVal culture As System.Globalization.CultureInfo) As Object _
     Implements IValueConverter.ConvertBack
    Throw New NotImplementedException()
  End Function
End Class


Public Class HtmlSanitiser
    Implements IValueConverter
    Implements IValueConverter
  Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
      ByVal parameter As Object, _
      ByVal culture As System.Globalization.CultureInfo) As Object _
      Implements IValueConverter.Convert
    Dim _convert As String
    _convert = Regex.Replace(TryCast(value, String), "<.*?>", "") ' Remove HTML Tags
    _convert = Regex.Replace(_convert, "\n+\s+", vbLf & vbLf) ' Remove Spaces
    _convert = HttpUtility.HtmlDecode(_convert) ' Decode HTML Entities
    Return _convert
  End Function

  Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
     ByVal parameter As Object, _
     ByVal culture As System.Globalization.CultureInfo) As Object _
     Implements IValueConverter.ConvertBack
    Throw New NotImplementedException()
  End Function
End Class
Image non disponible

Étape 7

Retournez au concepteur de vues pour MainPage en sélectionnant l'onglet MainPage.xaml.

Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :

Image non disponible

Étape 8

Dessinez un Canvas sur la page, ensuite dans le volet XAML au-dessus de </Grid> modifiez la ligne Canvas1 comme ceci :

 
Sélectionnez
<Canvas Height="65" Width="400" VerticalAlignment="Top" HorizontalAlignment="Left" Name="Toolbar"></Canvas>

Voir ci-dessous :

Image non disponible

Étape 9

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle TextBox :

Image non disponible

Étape 10

Dessinez un TextBox sur le Canvas et dans le volet XAML, en dessous de la balise <Canvas> et au-dessus de </Canvas>, modifiez TextBox1 comme ceci :

 
Sélectionnez
<TextBox Canvas.Left="6" Canvas.Top="6" Height="23" Width="237" Name="Location"/> 

Voir ci-dessous :

Image non disponible

Étape 11

Puis dans la section Contrôles Silverlight communs de la Boîte à outils, sélectionnez le contrôle Button :

Image non disponible

Étape 12

Dessinez un bouton sur la barre d'outils du Canvas à côté du TextBox, en glissant le bouton de la Boîte à outils sur le Canvas, ensuite dans le volet XAML entre les balises <TextBox> et </Canvas> modifiez la ligne <Button> comme ceci :

 
Sélectionnez
<Button Canvas.Left="249" Canvas.Top="6" Height="23" Width="75" Name="Go" Content="Go"/>

Voir ci-dessous :

Image non disponible

Étape 13

Sélectionnez Debug ensuite l'option Build RSSReader du menu :

Image non disponible

Étape 14

Puis dans le volet XAML pour MainPage.xaml, en dessous de la section x:Class="RSSReader.MainPage", tapez le code XAML suivant :

 
Sélectionnez
xmlns:app="clr-namespace:RSSReader"
Image non disponible

Étape 15

Puisque nous en sommes au volet XAML pour MainPage.xaml, au-dessus de la balise <Grid> et en dessous de la balise <UserControl>, tapez le code XAML suivant :

 
Sélectionnez
<UserControl.Resources>
  <app:HtmlSanitiser x:Key="HtmlSanitiser"/>
  <app:LinkFormatter x:Key="LinkFormatter"/>
</UserControl.Resources>

Encore une fois, toujours dans le volet XAML pour MainPage.xaml, en dessous de la balise <Button> et au-dessus de la balise </Canvas>, tapez le code ComboBox XAML suivant :

 
Sélectionnez
<ComboBox Canvas.Left="6" Canvas.Top="36" Height="23" Width="318" ItemsSource="{Binding}" Name="Title">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Title.Text,Converter={StaticResource HtmlSanitiser}}"/>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

Voir ci-dessous :

Image non disponible

Étape 16

Toujours dans le volet XAML, en dessous de </Canvas> et au-dessus de la balise </Grid>, tapez le code XAML suivant :

 
Sélectionnez
<ScrollViewer Height="235" Width="400" Margin="0,65,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
  <StackPanel Orientation="Vertical" x:Name="Content">
    <HyperlinkButton FontSize="16" TargetName="_blank" Content="{Binding Title.Text,Converter={StaticResource HtmlSanitiser}}" 
      NavigateUri="{Binding Links,Converter={StaticResource LinkFormatter}}"/>
    <TextBlock FontSize="14" TextWrapping="Wrap" Text="{Binding PublishDate}"/>
    <TextBlock TextWrapping="Wrap" FontSize="14" Text="{Binding Summary.Text,Converter={StaticResource HtmlSanitiser}}"/>
  </StackPanel>
</ScrollViewer>

Voir ci-dessous :

Image non disponible

Étape 17

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code du constructeur Public Sub New(), en dessous de la ligne InitializeComponent(), tapez le code suivant :

 
Sélectionnez
Location.Text = "http://feeds.feedburner.com/cespageblog" 
Image non disponible

Étape 18

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le bouton Go et tapez ceci dans le Sub Go_Click :

 
Sélectionnez
Dim _client As New WebClient
AddHandler _client.OpenReadCompleted, Sub(s As Object, args As OpenReadCompletedEventArgs)
    If Not args.Cancelled Then
      Try
        Dim _reader As XmlReader = XmlReader.Create(args.Result)
        Dim _feed As SyndicationFeed = SyndicationFeed.Load(_reader)
        Title.DataContext = _feed.Items
        Title.SelectedIndex = 0
      Catch ex As Exception
        MessageBox.Show(ex.ToString, "RSS Reader", MessageBoxButton.OK)
      End Try
    End If
  End Sub
_client.OpenReadAsync(New Uri(Location.Text))
Image non disponible

Étape 19

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ou faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Concepteur de vues.

Double-cliquez sur le ComboBox « Title » et tapez ceci dans le Sub Title_SelectionChanged :

 
Sélectionnez
Content.DataContext = CType(CType(sender, ComboBox).SelectedItem, SyndicationItem)
Image non disponible

Étape 20

Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :

Image non disponible

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Image non disponible

Étape 21

Si vous cliquez sur Go, qu'ensuite vous sélectionnez un titre pour un élément de flux RSS, le contenu de cet élément de flux RSS apparaîtra :

Image non disponible

Étape 22

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible en haut à droite du navigateur Web pour Arrêter l'application.

Étape 23

Il y a un problème avec ce lecteur de flux RSS car il ne fonctionne uniquement que s'il y a un fichier spécial appelé la politique d'accès client, situé sur le serveur où le flux RSS se trouve. Toutefois, il est possible d'accéder à n'importe quel flux RSS, en suivant les étapes optionnelles suivantes. Sélectionnez Projet ensuite Propriétés... La fenêtre Propriétés devrait apparaître, cochez la case Permettre l'exécution de l'application hors navigateur, et assurez-vous également que la version de Silverlight ciblée soit Silverlight 4 :

Image non disponible

Étape 24

Toujours au niveau de la fenêtre Propriétés, cliquez sur le bouton Paramètres hors navigateur..., définissez Largeur à 400 et Hauteur à 300, ensuite cochez la case Privilèges élevés requis lors d'une exécution hors du navigateur :

Image non disponible

Étape 25

Confirmez les paramètres en cliquant sur OK.

Enregistrer le Projet une nouvelle fois car vous avez terminé la mise à jour de l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :

Image non disponible

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Image non disponible

Étape 26

Pour accéder à n'importe quel flux RSS cela fonctionne uniquement en mode hors navigateur avec les privilèges élevés pour accéder à un flux sans politique d'accès client ou d'accès inter-domaines. Faites un clic droit sur l'application dans le navigateur et choisissez l'option Installer l'application RSS Reader sur cet ordinateur... pour afficher l'écran d'installation :

Image non disponible

Étape 27

Cochez les cases Start menu et/ou Desktop pour ajouter un raccourci à l'application dans l'un ou les deux emplacements, et ensuite cliquez sur le bouton Installer, ce qui suit apparaîtra alors dans une nouvelle fenêtre :

Image non disponible

Étape 28

Il sera possible de saisir dans la zone d'emplacement n'importe quelle url de flux RSS ou l'adresse RSS, et le lecteur de flux RSS pourra y accéder.

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.

Conclusion

Ceci est une application de lecture de flux RSS simple, vous pouvez essayer de personnaliser l'application pour la rendre plus utile. Vous pouvez aussi y ajouter plusieurs éléments de syndication afin d'afficher plus d'informations. De plus avec la prise en charge hors navigateur, vous n'êtes pas limité aux flux RSS qui ont une politique d'accès client. Utilisez l'application comme base pour votre propre lecteur flux RSS, c'est à vous de voir !

Liens

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également FirePrawn pour sa relecture orthographique et ses propositions.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.