Microsoft Silverlight 4 - Tutoriel 17 : Lecteur de flux RSS

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 :

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 :

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

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 :

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 :

Imports System.ServiceModel.Syndication
Imports System.Windows.Data
Imports System.Text.RegularExpressions
Imports System.Windows.Browser

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

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

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 :

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

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

Voir ci-dessous :

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

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 :

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

Voir ci-dessous :

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

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 :

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

Voir ci-dessous :

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

Puis dans le volet XAML pour MainPage.xaml, en dessous de la section

x:Class="RSSReader.MainPage"

tapez le code XAML suivant :

xmlns:app="clr-namespace:RSSReader"

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 :

<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 :

<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 :

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

<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 :

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 :

Location.Text = "http://feeds.feedburner.com/cespageblog"

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 :

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))

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 :

Content.DataContext = CType(CType(sender, ComboBox).SelectedItem, SyndicationItem)

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 :

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

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 :

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

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 :

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 :

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 :

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

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 interdomaines. 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 :

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 :

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 en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.