Après avoir réalisé "une galerie photo" puis "un lecteur MP3" avec Flash MX et XML, nous passons ici à un type très répandu de fichier XML : les fichiers RSS, utilisés pour diffuser le contenu des sites d'informations et des weblogs.
Nous irons ici au plus simple : afficher/parcourir le contenu du fichier RSS du JDN Développeurs. La prochaine étape sera de pouvoir lire les RSS des autres sites...

Pour rappel, le début d'un fichier RSS se présente comme suit :

<?xml version="1.0" encoding="iso-8859-1" ?>
<rss version="2.0">
  <channel>
    <title>Journal du Net Développeurs</title>
    <link>http://www.journaldunet.com/developpeur/</link>
    <description>Tutoriels PHP, XML, Java, Flash, .NET, méthodes et outils. Actualités du développement.</description>
    <language>fr</language>
    <image>
      <title>Journal du Net Développeurs</title>
      <url>http://solutions.journaldunet.com/images/tet_dev.gif</url>
      <link>http://www.journaldunet.com/developpeur/</link>
      <description>Journal du Net Développeurs : tutoriels et actualités pour développeurs.</description>
    </image>

    <item>
      <title>[actualités] L'Europe remporte un concours international de programmation </title>
      <link> http://www.journaldunet.com/developpeur/news/
040329_0404_bref.shtml#concours</link>
      <description>En bref...</description>
    </item>

(...une suite d'éléments channel...))

  </channel>
</rss/>

Mise en place de l'interface
Le flux RSS du JDNDev comportent trois balises, à savoir son titre (title), son permalien (link) et sa description (description). Notre interface sera donc composée en premier lien de deux champs Texte dynamiques, qui afficheront respectivement le titre et la description (un clic sur le titre ouvrant le navigateur sur le permalien), et seront liés aux variables affTitre et affDescr.

Pour parcourir les articles du flux, nous utiliserons deux boutons de Flash MX (proposés dans la bibliothèque commune - menu Fenêtre/Bibliothèques communes/Boutons), nommés flecheDroite et flecheGauche, qui permettront d'aller à l'article suivant/précédent, accompagné pour tout compteur de progression d'un autre champ dynamique, attaché à la variable ouEstOn, indiquant notre position dans le flux (exemple : 7/19 pour le 7e article d'un ensemble de 19).

Enfin, en prévision de l'évolution de notre lecteur RSS, nous créons un champ Texte de saisie, lié à la variable adresseFlux, où nous entrerons donc l'adresse du fichier RSS à afficher. Un simple bouton, nommé btnCharge, lancera le chargement.
Notre lecteur se limite ici à un seul flux, dans notre prochain article il s'agira d'un élément ListBox où nous pourrons directement choisir le flux à charger.

Le code
L'ensemble de notre script tiens comme d'habitude dans la première (et seule) image-clé du calque "script".

Le plus gros de notre programme réside dans la gestion d'XML :

system.useCodepage = true;
rss_xml = new XML();
rss_xml.ignoreWhite = true;
rss_xml.onLoad = function(ok) {
  if (ok = true) {
    var filsChannel = this.firstChild.firstChild.childNodes;
    var contenuChannel = this.firstChild.firstChild.firstChild;
    var noeudEnCours = contenuChannel;

    articles = new Array();
    articles.push(["", "", ""]);

    for (i = 0, artNombre = 0; i < filsChannel.length; i++) {
      switch (noeudEnCours.nodeName) {
      case "item" :
        artNombre++;
        var leTitre = noeudEnCours.firstChild.firstChild.nodeValue;
        var leLien = noeudEnCours.firstChild.nextSibling.firstChild.nodeValue;
        var laDescr = noeudEnCours.firstChild.nextSibling.
nextSibling.firstChild.nodeValue;
        articles.push([leTitre, leLien, laDescr]);
        break;
      }
    noeudEnCours = noeudEnCours.nextSibling;
    }
  artPosition = 1;
  affiche();
  }
};

Les trois premières lignes ne doivent pas vous être étrangères si vous avez lu nos articles précédents sur Flash MX et XML. L'intérêt réside ici dans la définition de la fonction onLoad de notre objet rss_xml.

La première variable locale filsChannel nous permet de placer notre "tête de lecture" sur l'ensemble des noeuds contenus dans le noeud channel. Cela nous permettra bientôt de compter le nombre d'articles affichables, pour commencer.
contenuChannel, pour sa part, nous positionne sur le premier sous noeud de channel, dans le cas de RSS le noeud title. D'ici, nous parcourons les plaines du fichier XML...
noeudEnCours, enfin, contiendra à tout moment le nom en cours de lecture... et pour commencer, il s'agira du premier sous noeud de channel, c'est-à-dire title.

On voit en observant un fichier RSS que les articles ne sont pas numérotés : il s'agit d'une suite (apparemment non ordonnée) d'éléments item. Nous ne pouvons donc pas nous reposer sur un attribut numéraire pour passer d'un élément à l'autre. Nous allons donc dans cet évènement onLoad placer le contenu dans éléments item dans un tableau multidimensionnel nommé articles[][]. Pour s'y retrouver plus simplement, nous définissons directement le premier article comme étant vide, à l'aide de articles.push(["", "", ""]).

La boucle for() suivante nous permet donc de parcourir le contenu de channel. Au moyen d'une structure switch...case, nous repérons les noeuds item (les articles), et à partir de là, nous faisons le compte des articles avec artNombre++, et plaçons le contenu du noeud dans notre tableau articles[].
Nous n'utilisons switch...case que pour item pour le moment, donc if() serait préférable, mais nous étendrons notre code aux autres balises dans notre article à venir, aussi nous préparons de suite cette évolution...
A la fin de la boucle for(), nous passons au noeud voisin avec noeudEnCours = noeudEnCours.nextSibling.
Une fois l'ensemble de nos noeuds parcourus, nous effectuons l'affichage de l'article en première position avec
artPosition = 1;
affiche();

Il nous faut maintenant présenter la fonction affiche() :

function affiche(direction) {
  switch (direction) {
  case "suiv" :
    artPosition++;
    break;
  case "prec" :
    artPosition--;
    break;
  default :
    artPosition = 1;
    break;
  }
ouEstOn = artPosition + "/" + artNombre;
affTitre = "<a href='" + articles[artPosition][1] + "'>" + articles[artPosition][0] + "</a>";
affDescr = articles[artPosition][2];
}

Celle-ci utilise à nouveau la structure switch...case, cette fois pour augmenter ou baisser la valeur de la variable définissant la position de l'article en cours (ou bien, si aucune direction n'est précisée, comme c'est le cas à la fin de notre évènement .onLoad, indiquer le premier article), puis afficher les valeurs nécessaires dans les différents champs dynamiques de notre interface.

Ne nous reste plus qu'à définir les trois fonctions attachées aux évènements onPress de nos trois boutons :

flecheDroite.onPress = function() {
  if (artPosition < artNombre) {
    affiche("suiv");
  }
};

flecheGauche.onPress = function() {
  if (artPosition > 1) {
    affiche("prec");
  }
};

btnCharge.onPress = function() {
  chargerFlux();
}

function chargerFlux() {
  rss_xml.load(adresseFlux);
}

Forum

Réagissez dans les forums de JDN Développeurs

Les deux boutons servant à se déplacer au sein des articles vérifient bien sûr, avant de lancer le mouvement, si l'on ne sortira pas des limites de ce flux (passer en dessous de 1 ou au-dessus du nombre d'articles).
btnCharger se contente de lancer la même fonction qui termine notre page de code, et qui permet de lancer le chargement du flux RSS :

adresseFlux = "jdnetdev.xml";
//chargerFlux();

(nous gardons ici chargerFlux() en commentaire, pour vous laisser le soin de charger le flux avec le bouton et ainsi que ce chargement ne se fasse pas automatiquement au lancement de l'animation).