Blog ENI : Toute la veille numérique !
🎁 Jusqu'au 25/12 : 1 commande de contenus en ligne
= 1 chance de gagner un cadeau*. Cliquez ici
🎁 Jusqu'au 31/12, recevez notre
offre d'abonnement à la Bibliothèque Numérique. Cliquez ici
  1. Livres et vidéos
  2. Animate 2023
  3. Gérer le format XML
Extrait - Animate 2023 Créer des contenus animés et interactifs en HTML5
Extraits du livre
Animate 2023 Créer des contenus animés et interactifs en HTML5 Revenir à la page d'achat du livre

Gérer le format XML

Introduction

Le format XML (eXtensible Markup Language) est un langage de description de données. Il permet d’enregistrer des informations dans une structure logique relativement simple.

Les données sont structurées. Par exemple dans un carnet d’adresses, vous trouvez une liste de personnes possédant chacune un nom, un prénom, une ou plusieurs adresses, un ou plusieurs numéros de téléphone, etc.

Pour classer ces données, vous pouvez utiliser un tableur. Vous enregistrez le fichier au format XLS ou ods selon que vous utilisez Excel de Microsoft ou Calc d’OpenOffice. Mais en HTML, à la différence du XML, ces formats ne sont pas reconnus.

Les fichiers XML

A quoi ressemble un fichier XML ?

Fichier de départ : 1801Deb.xml

Fichier résultat : aucun

Objectif : consulter les données d’un fichier XML.

 Si vous possédez le logiciel Excel, lancez-le et ouvrez le fichier 1801Deb.xml.

Excel vous demande sous quelle forme ouvrir ce fichier.

 Optez pour l’option En tant que tableau XML.

images/18SF01.PNG

Vous obtenez un tableau de données concernant six films.

images/18SF02.PNG

Le fichier XML ouvert dans Excel

 Dans ce tableau, distinguez bien deux points de vocabulaire importants des bases de données :

  • Les champs (titre des colonnes) qui correspondent aux attributs ou aux éléments de la base de données (nous verrons la différence dans l’activité suivante). 

  • Les enregistrements (contenu des lignes 2 à 7), qui correspondent aux données saisies. Ces données sont pour chaque film le titre, le réalisateur, le genre, et les deux acteurs principaux. Ce fichier comporte six séries de données

Cela paraît simple, mais en réalité c’est un peu plus compliqué. Excel vous permet de lire ces données très facilement dans un tableau mais la structure d’un fichier XML est constituée de balises propres au langage HTML.

 Pour vous en rendre compte, ouvrez le fichier avec un éditeur HTML type Dreamweaver :

images/18SF03.PNG

Le fichier XML ouvert dans Dreamweaver (éditeur HTML)

 Sinon, utilisez tout simplement un traitement de texte basique comme le Bloc-notes de Windows.

Attention, si vous ne voyez pas le fichier dans la boîte de dialogue d’ouverture, pensez à sélectionner comme type de fichier : Tous les fichiers.

images/18SF04.PNG

Ouvrir un fichier XML avec le Bloc-notes

Voici ce que vous obtenez avec le Bloc-notes :

images/18SF05.PNG

Le fichier XML ouvert dans Bloc-notes

Dans un éditeur de texte, la présentation est plus complexe. Surtout si vous n’avez jamais utilisé les balises. Notez la différence entre une balise ouvrante et une balise fermante.

Pour mentionner par exemple le nom du réalisateur du film La Grande vadrouille, vous devez écrire la ligne de code :

<Réalisateur> Gérard Oury </Réalisateur> 

Vous saisissez donc en premier une balise ouvrante, puis la donnée correspondante et terminez...

Charger des données dans un fichier XML

Extraire des données du carnet d’adresses

Fichier de départ : 1805Deb.fla

Fichier résultat : 1805Fin.fla

Visualisation web : 1805Fin.html

Objectif : charger des données à partir d’un fichier XML.

Code JavaScript :. XMLHttpRequest, xml.open(), xml.send(), getAttribute(), getElementsByTagName

 Commencez par créer un dossier sur votre ordinateur. Nommez-le par exemple adresses.

 Ensuite, copiez le fichier carnetAdresses.xml du dossier chap18 et collez-le dans le dossier adresses.

 Enfin, ouvrez le fichier 1805Deb.fla du dossier chap18 et enregistrez-le dans le dossier adresses.

Vous allez travailler sur un fichier fla qui devra aller puiser des données dans un fichier XML. Le ficher fla sera exporté en HTML. Il est donc impératif de placer tous ces fichiers dans le même dossier.

Le fichier fla sur lequel vous travaillerez est constitué uniquement de cadres textes.

 Testez l’animation pour vous en rendre compte.

images/18SF25.PNG

Le fichier fla

Afficher le contenu du fichier XML

 Revenez dans Animate et affichez la fenêtre Actions du calque action.

Les six premières lignes de code concernent les appareils tactiles et la sixième le titre de la page.

Vous allez utiliser l’objet XMLHttpRequest sur lequel vous appliquerez différentes méthodes pour extraire des données d’un fichier XML.

 Saisissez le code :

noXml=0 ; 
var xml = new XMLHttpRequest(); 
xml.open("GET", "carnetAdresses.xml", false); 
xml.send(); 
var xmlData=xml.responseText ; 
alert(xmlData) 

 Testez l’animation dans le navigateur.

Vous obtenez un message d’alerte affichant le contenu du fichier carnetAdresses.xml

images/18SF26.PNG

Code pour charger le fichier XML

Quelques explications :

  • Ligne 7 : les données d’un fichier XML sont numérotées à partir de zéro. D’où la variable d’initialisation noXml=0,

  • Ligne 8 : vous avez commencé par créer, par la méthode new, un objet de requête XML. Cet objet est nommé XML,

  • Ligne 9 : par la méthode open, vous ouvrez le fichier carnetAdresses.xml et vous allez acquérir (GET) les données avec un paramètre booléen (false) car cette...