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