Les fondamentaux XML avec Flex 3

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.

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.

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

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

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

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 :

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

            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.

    <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 nœud XML à afficher ;
4. Chaque nœud du fichier XML a un attribut appelé « id » qui correspond à la valeur du paramètre pageCible ;
5. La XMLList contenuSite fait correspondre un nœud à pageCible et charge alors les bons textes de titre et de corps dans leurs étiquettes respectives.

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.