Les fondamentaux XML avec Flex 3

Cet article est la traduction de l'article :XML Basics with Flex 3.

Retrouvez toutes les traductions disponibles de Build Internet sur buildinternet.developpez.com.

Commentez : 4 commentaires

Si vous utilisez toujours des tableaux et des fichiers textes pour charger du contenu, il est temps d'évoluer.

Avec XML, vous pouvez concentrer un fouillis complet d'informations apparemment sans lien dans un fichier bien organisé et facile à lire. Nous allons voir aujourd'hui comment en tirer des avantages avec Flex 3. Ce tutoriel vous apprendra comment charger un fichier XML externe dans Flex et ensuite comment faire passer les résultats dans des étiquettes.

Article lu   fois.

Les deux auteurs

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Mettre en place l'espace de travail

Ouvrez Flex 3 Builder et commencez une nouvelle application MXML. J'ai appelé la mienne fondamentauxXML pour cet exemple. Choisissez un layout vertical et cliquez sur finish.

Image non disponible

Avant de charger un fichier XML, nous devons en avoir un. J'en ai fait un à télécharger pour ce tutoriel. Créez un nouveau répertoire dans votre répertoire 'src' par clic droit sur l'icône et la sélection de New > Folder. Appelez ce nouveau répertoire 'assets' et importez le fichier XML téléchargé dedans. Une fois que c'est fait, vous êtes prêt à le charger dans le document Flex.

Charger le XML

MXML rend simple le chargement de fichiers externes avec la balise HTTPService. Ecrivez le code suivant immédiatement sous la balise application ouvrante :

 
Sélectionnez
<mx:HTTPService url="assets/contenu.xml" id="donneesSite" resultFormat="e4x"/>

Vous venez de créer un service HTTP avec l'id 'donneesSite' qui pointe sur le fichier XML dans le répertoire 'assets'. Les résultats sont formatés en e4x, qui nous permet de naviguer vers les contenus du fichier XML. Pour que cette url soit chargée, nous devons demander à l'application d'envoyer la requête. Nous le faisons en ajoutant l'événement 'creationComplete' à la balise application ouvrante.

 
Sélectionnez
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="donneesSite.send()">

L'événement creationComplete est appelé après le chargement de la page. Dans le code ci-dessus nous indiquons que quand le chargement de la page est terminé, le service HTTP appelé 'donneesSite' doit être envoyé. Prenez un instant pour tester votre application. Elle doit s'exécuter sans erreur si le XML est chargé correctement.

Récupérer les données XML

Les données XML auront besoin d'être stockées en attendant d'être utilisées. Ajoutez une balise script juste sous la balise application ouvrante et déclarez la variable suivante :

 
Sélectionnez
<mx:Script>
    <![CDATA[
    private var contenuSite:XMLList;
    ]]>
</mx:Script>

Le type XMLList nous permet de charger des données XML et de travailler avec. Pour le démontrer nous allons créer une fonction qui chargera les données du fichier XML et les affichera dans des étiquettes. Ajoutez la fonction suivante à votre balise script(1) :

 
Sélectionnez
            private function afficherPage(pageCible:String):void
            {
                // Recherche du titre de la page cible
                contenuSite = donneesSite.lastResult.page.(@id==pageCible).titre;
                // Affiche les résultats dans l'étiquette
                enTete.text = contenuSite;
                
                // Recherche du corps de la page cible
                contenuSite = donneesSite.lastResult.page.(@id==pageCible).texte;
                // Affiche les résultats dans l'étiquette
                corps.text = contenuSite;
            }

Maintenant, sous la balise HTTPService, nous allons ajouter quelques composants dans lesquels les résultats seront chargés. Nous allons aussi ajouter des boutons pour contrôler la navigation.

 
Sélectionnez
    <mx:VBox>
        <mx:Label fontSize="24" id="enTete" text="Cliquez sur un bouton"/>
        <mx:Label id="corps" text="A vous de choisir !"/>
    
        <mx:HBox>
            <mx:Button label="Page d'accueil" click="afficherPage('accueil')"/>
            <mx:Button label="Page à propos" click="afficherPage('apropos')"/>
            <mx:Button label="Page de contact" click="afficherPage('contact')"/>
        </mx:HBox>
    </mx:VBox>

Que venons-nous de faire au juste ? Voici un aperçu de ce qui arrive :

  1. Quand un des boutons est pressé il passe une chaîne de caractères à la fonction afficherPage.
  2. afficherPage reçoit ce paramètre dans une chaîne de caractères nommée pageCible.
  3. Cette pageCible déterminera le noeud XML à afficher.
  4. Chaque noeud du fichier XML a un attribut appelé "id" qui correspond à la valeur du paramètre pageCible.
  5. La XMLList contenuSite fait correspondre un noeud à pageCible et charge alors les bons textes de titre et de corps dans leurs étiquettes respectives.

Conclusion

Maintenant vous y êtes ! Exécutez votre application. Si tout se passe comme ça devrait, les données du fichier XML sont chargées pour chaque page quand un bouton est pressé. Pas mal ! Vous n'êtes pas limité à du texte. Essayez de charger l'url d'une image d'un fichier XML avec Flex. Le XML a un grand nombre de possibilités à explorer.

Regardez la démo en ligne.

Téléchargez les sources.


NdT : l'auteur affecte directement dans cet exemple 'contenuSite' au texte des étiquettes 'enTete' et 'corps'. Cela n'est possible que parce que les balises XML titre et texte ne contiennent que du texte : la conversion automatique du type XMLList vers le type String retourne alors simplement le contenu de l'élément.

  

Copyright © 2009 Zach Dunn. 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.