Importer des flux RSS (MSDN Magazine) avec XMLRAD

Vous savez que dans un projet XMLRAD, le code de gestion est totalement découplé de la présentation. Nous écrirons seulement deux lignes de code de gestion uniquement pour une conversion de date, et ce en C#. On utilisera SharpDevelop, outil libre et open source.
Assurez-vous qu'il soit bien installé ainsi que le framework .NET 1.1.

Démarrez l'environnement de développement XMLRAD, et créez un nouveau projet. Sélectionnez Projet Simple.

Dans la fenêtre suivante, indiquez le nom du nouveau projet : RSSReader, l'environnement de développement : SharpDevelop. Cliquez sur le bouton << Options Avancées et décochez la case : [oui, je vais utiliser une base de données pour ce projet]. Cliquez sur Suivant et vous devriez aboutir sur la fenêtre suivante. Si on vous demande de migrer à partir d'une version antérieure de XMLRAD, cliquez sur Annuler.

Dans le module RSSReaderWM, nous allons créer un nouveau XMLService nommé FormRSSReader.
(L'adresse d'invocation par le navigateur sera : http://stardev/RSSReaderBin/Global.aspx/FormRSSReader).
Cliquez sur le module RSSReaderWM puis sur le bouton Ajout de XMLService :

Un assistant vous propose des modèles de XMLServices. Cliquez sur l'onglet Divers, puis sur Fiche Vide et validez.

Une nouvelle page vous demande le nom du XMLService. Saisissez FormRSSReader dans la zone de saisie Nom et cliquez sur le bouton Terminer.

L'assistant a terminé sa tâche et vous pouvez désormais travailler votre XMLService. Dans un premier temps, nous allons rassembler les données utiles de notre future page web, puis nous nous occuperons de la mise en forme.
Sur l'écran suivant, vous pouvez remarquer qu'un gabarit graphique par défaut (Modèle Divers / Page Vide) a été appliqué, mais ne vous inquiétez pas, vous pouvez tout changer si vous le souhaitez.

Nous allons ajouter une instruction HttpInvoke dans le XMLGram. Le rôle de HttpInvoke est d'invoquer une URL, et de récupérer le flux résultat.
Cliquez sur le menu XMLGram et en haut à droite de la fenêtre dans XMLGramExplorer, sélectionnez le composant HttpInvoke . Donnez-lui un nom, par exemple StreamReader.
Effectuez un clic droit sur la première instruction par défaut : Params et sélectionnez le menu Insert After. Ensuite, remplissez les paramètres de l'instruction ainsi :

• Méthode : GET
• URL : http://msdn.microsoft.com/msdnmag/rss/rss.aspx?tech=ASP&x=27&y=9
• Identifiant HTTP :
• Mot de Passe HTTP :
• Asynchrone : non coché
• Récupérer le document et le rajouter dans le document de sortie : True
• Selection (XPath) : /rss
• Type de document de sortie : OutputDoc
• Nom du champ de sortie :

L'URL spécifiée est celle invoquant le flux RSS des articles ASP/ASP.NET chez MSDN Magazine de Microsoft.
On demande à l'instruction d'ajouter le flux résultat dans le document de sortie (OutputDoc), qu'on exploitera plus tard pour la transformation XSL (visualisation des données).
La sélection XPath indique le chemin de la grappe XML à récupérer dans le flux résultat. Il aurait pu être possible que seule une partie du RSS nous intéresse.

Voyons maintenant comment XMLRAD exécutera cette instruction et stockera le flux de données. Cliquez sur le menu XML du XMLService.
La grappe XML (Output) s'est enrichie du flux RSS provenant de MSDN Magazine :

Remarquez l'élément <rss>, qui est la racine de la grappe XML constituant le fil RSS récupéré par HttpInvoke.
Maintenant que le mécanisme de production des données est en place, nous allons passer à la représentation visuelle.
Cliquez sur le menu XSL du XMLService.

Dans l'éditeur XSLStudio, cliquez sur le texte « Ceci est un formulaire simple ». Choisissez le composant DataTable dans la barre centrale rubrique Data.
Dans la partie basse de XSLStudio, effectuez un clic droit sur l'élément <p>, et sélectionnez Insert Before.

Un assistant va s'ouvrir et demander quel nœud XML va servir de racine d'alimentation (Dataset) de notre table. Sélectionnez le nœud <rss> et cliquez sur Next.
Il vous demande ensuite le chemin d'accès aux « record node » qui représente le nœud racine des informations à afficher sur chaque ligne du tableau. Sélectionnez le nœud <item> (enfant de /rss/channel).

L'assistant vous demande quels sont les champs que vous voulez afficher dans le tableau. Sélectionnez les éléments tels que le screen suivant :

Voilà le résultat obtenu, que nous allons retravailler :

On va maintenant oublier un peu les assistants, car on pourrait faire croire aux débutants XMLRAD que rien n'est possible sans eux.
Au contraire, on peut partir complètement de zéro, mais ce serait revenir quelques années en arrière. En revanche, nous allons maintenant rentrer dans le détail du HTML produit par le XMLService et apporter des modifications de manière à améliorer la présentation de notre flux RSS.

II-5-1. Modifier les titres▲

Pour modifier un titre, cliquez dessus dans XSLStudio. Dans la partie basse, le flux produit par le processeur XSL s'affiche.
Ci-dessous, nous avons cliqué sur le titre : title. En bas nous voyons que « title » est un texte inséré dans une balise TD. Nous le modifions et confirmons avec CTRL + S pour sauvegarder.
Répétez cette opération pour chaque colonne.

II-5-2. Supprimer la colonne link puis mixer le titre et le link respectif▲

Cliquez sur le titre « Link ». Dans la partie basse de l'éditeur effectuez un clic droit sur la balise TD, et sélectionnez Supprimer.
Vous venez de supprimer la colonne TD de la ligne de titre (TR en HTML). Cette ligne TR a été générée lorsque le template rss a été rencontré par le processeur XSL.
Voyons le template rss, cliquez à droite sur le bouton XSL et sélectionnez le template rss.

Une balise TR est générée ainsi que des TD dans lesquelles on retrouve les titres de notre tableau. À la fin, une instruction xsl : <xsl:apply-templates select=« channel/item »/> indique au processeur xsl de déclencher les templates adaptés pour chaque élément item rencontré, enfant de l'élément channel.
Toujours dans l'exploreur XSL, cliquez sur le template : <xsl:template match=« item »/>

Nous voyons qu'à chaque fois que la balise item est « matchée », une TR est générée, avec des colonnes TD à l'intérieur desquelles on extrait des informations du XML (OutputDoc) qu'on avait prévisualisé précédemment dans ce tutoriel.
D'ailleurs si vous cliquez sur le bouton XML (en bas à droite dans XSLStudio), la structure XML de votre document apparaît, en surbrillance l'élément courant. Si vous cliquez sur un autre élément, le chemin relatif de cet élément par rapport à l'élément courant est affiché. Dans l'image ci-dessous, l'élément item est en surbrillance, car c'est l'élément courant. En effet, nous sommes dans le template qui est chargé de traiter le nœud item, donc lorsque le processeur xsl arrivera sur l'élément item, il déclenchera ce template, item sera l'élément courant.

Comme pour le titre du tableau où nous avons supprimé la colonne Description, nous allons supprimer la colonne Description de la ligne générée pour chaque item.

Nous allons maintenant afficher le titre en tant que lien renvoyant vers l'article respectif. Pour cela cliquez sur la partie blanche juste sous la zone Titre, vous allez visualiser uniquement la partie qui s'occupe d'afficher le contenu de cette colonne. Puis pour découvrir et changer un peu, cliquez sur le bouton Source dans l'explorateur de XSLStudio. Profitez-en pour afficher la structure XML également, positionnez-la vers l'élément item, cela va nous servir de repère.

Nous allons écrire du HTML à la main cette fois (on a toujours le choix), en encapsulant le titre dans un lien <a href=""> dont la référence sera justement le contenu de l'élément link. Voici la modification à apporter :

L'élément link est intégré dans le HTML à l'aide d'accolades {} et non d'une instruction xsl:value-of, car il doit être inséré dans un attribut et non un élément. Remarquez la barre d'état du navigateur, le lien a bien été pris en compte (je survolais le lien avec la souris au moment de la capture d'écran).
Ici nous avons intégré un lien, mais on peut injecter le HTML que l'on souhaite, une image comme une applet flash par exemple.

II-5-3. Déplacer la description de l'article sous le titre dans un <DIV> caché▲

Nous allons encore modifier la structure HTML du résultat, cette fois en supprimant la colonne Description. À la place nous ajouterons un lien à la fin de chaque Titre, et le fait de cliquer successivement sur ce lien fera apparaître ou disparaître la description dans un bloc (DIV) situé juste sous le titre.
Supprimez la colonne description, qui prend beaucoup de place, et qu'on ne visualisera que sur commande.
On va ensuite ajouter une image avec lien juste après le contenu le la colonne titre :
Cliquez à nouveau sur la zone blanche juste en dessous du titre de colonne « Titre ». Dans la palette HTML, choisissez le composant ImageLink, puis dans XSLStudio, effectuez un clic droit sur <xsl:value-of select=« title »>, ce qui aura pour effet d'ajouter l'image juste après le contenu du titre de cette ligne.

Puis choisissez une image de votre choix dans l'explorateur d'image. XMLRAD se charge d'insérer le chemin relatif dans la balise <img>. Le résultat obtenu ressemble à celui-ci :

On va passer en mode source, puis ajouter une balise <DIV> nommée sous l'image que l'on vient d'ajouter. Dans le style de ce bloc, on attribuera une couleur de fond (background-color) et de texte (color), et on cachera le bloc (display:none).
On ajoutera aussi une commande JavaScript dans l'évènement onclick du lien dans lequel l'image est placée :

 

Sélectionnez

onclick="ShowHide('Desc{position()}');return false"

On supprime aussi le lien href par défaut en le remplaçant par un point (.). Seul le déclenchement du onclick nous intéresse ici lorsque l'on cliquera sur l'image. C'est pour cela que nous avons ajouté le morceau de code js : return false; qui évite au navigateur de chercher à aller sur le lien href après avoir traité le onclick.

ShowHide est une fonction issue de la bibliothèque JavaScript (voir Appendix de la bibliothèque xslc.js) de l'environnement XMLRAD. Elle prend en paramètre l'identifiant d'un élément du DOM, et se charge de cacher ou afficher cet élément selon son état initial, se comportant comme un interrupteur.

position() est une expression xsl qui renvoie la position du nœud XML en cours de traitement par le processeur XSL. Nous nous en servons pour être surs d'attribuer un nom différent à chaque bloc généré.

Lorsque nous voudrons Afficher ou Cacher un bloc, il nous sera possible de localiser un bloc distinctement des autres grâce à son nom unique.

Dans le screen ci-dessous, étudiez le code que nous avons modifié dans XSLStudio. Nous n'avons pas ajouté grand-chose, mais c'est efficace.
Vous voyez le code modifié en surbrillance couleur.

Si on repasse en mode Normal dans XSLStudio, alors voici la vue correspondante :

Cette vue « en grille » est souvent utile et claire pour appréhender la structure HTML. Ne vous étonnez pas si vous ne voyez pas le nouveau bloc DIV dans la fenêtre Preview, c'est normal puisque nous lui avons demandé d'être caché (style = display:none).

Vous pouvez maintenant exécuter le projet et vérifier l'affichage de la description lorsque vous cliquez sur le lien image dans la zone titre.

En programmation classique, nous utiliserions une classe XMLReader ou équivalent, de façon à déplacer un curseur XML sur le flux RSS.

Retournez dans l'éditeur XMLGram, sélectionnez l'instruction Match, donnez-lui le nom Items, effectuez un clic droit sur la dernière instruction HttpInvoke,
et enfin cliquez sur le menu Insert after.

• L'instruction Match devra parcourir le flux RSS : dans la source de données Output.
• Le chemin XPath pour matcher chaque article est : /document/rss/channel/item.
• Enfin nous demandons à l'instruction de remplir le context, car nous nous en servirons pour récupérer la date à formater.

Nous allons enfin taper une ligne de code ! Ouf sauvés !
Quel est le moyen de prendre la main à chaque fois que l'instruction Match nommée Items va s'arrêter sur un élément item (se comportant comme un itérateur en quelque sorte) ?
Vous devez connaître le workflow d'exécution d'une instruction XMLGram (Appendix 13), et donc savoir qu'à chaque fois qu'une instruction Match itère sur un élément, les gestionnaires d'évènement BeforeInternalInstruction et AfterInternalInstruction sont exécutés.

Nous allons ouvrir le projet SharpDevelop sous-jacent à l'application et écrire le gestionnaire d'évènement AfterInternalInstruction nécessaire. Démarrez SharpDevelop et ouvrez le projet XMLServer.cmbx situé dans le dossier \Bin de notre application.

Ensuite dans la fenêtre projet de SharpDevelop, effectuez un double clic sur RSSReaderWM.cs qui est le fichier source lié à la prise en charge des traitements en code du module RSSReaderWM.

Décommentez

// private XMLComponent.WebForm Updatepublishers;

et remplacez UpdatePublishers par FormRSSReader (le nom de notre XMLService).

Après avoir déclaré la variable private : private XMLComponent.WebForm FormRSSReader;, nous devons l'instancier dans la méthode InitializeComponent().
Nous ajoutons un delegate pour gérer l'évènement AfterInternalInstruction. Le nom de la méthode qui jouera ce rôle est FormRSSReader_AfterInternalInstruction.

private void InitializeComponent()
        {
            FormRSSReader = new XMLComponent.WebForm();
            FormRSSReader.AfterInternalInstruction += new XMLComponent.TAfterInternalInstructionEventHandler(FormRSSReader_AfterInternalInstruction);
        }

Il nous reste à coder cette méthode delegate, dans laquelle nous allons réaliser la conversion de date.

private void FormRSSReader_AfterInternalInstruction(XMLCLX.IXMLInstruction XMLInstruction, XMLComponent.TAfterInternalInstructionEventArgs e)
        {
            DateTime dt;
            
            if (XMLInstruction.Name == "Items")
            {
                dt = Convert.ToDateTime(Context.GetValue("pubDate"));
                e.Input.SetValue("pubDateFormatted", dt.ToString("dd/MM/yyyy"));
            }
        }

Il reste une dernière chose : Compiler le projet et vous pourrez passer aux tests pour vérifier la qualité de votre travail :-)