ALL HTML - en pratique : Intégration de données

retour

en pratique : Intégration de données

Article publié le mardi 16 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « XML »

Introduction aux XML data islands

Nous allons dans cet exemple introduire et voir plusieurs moyens d'utiliser et d'intégrer des données XML à l'intérieur de pages HTML. Cet exemple s'appuie sur l'utilisation du navigateur Internet Explorer 5 fourni par Microsoft.

Nous allons d'abord présenter les XML data islands ou îlots de données XML
Il existe aujourd’hui un moyen d’insérer des îlots de données à l’intérieur de page HTML. Ainsi il n'est pas obligatoire de charger un fichier XML dans le navigateur et le lier à une feuille XSL pour pouvoir offrir au visiteur de votre site une information formatée en HTML.
L’utilisation des XML data islands nécessite quelques notions de XML DOM (document object Model) que nous verrons par la suite.

Définition d'un "data island"
Un "îlot de données XML" peut être défini de deux manières à l’intérieur d’une page HTML :

- Soit par la balise XML.
- Soit en "surchargeant" la balise script.

Balise XML

L’îlot de données XML sera :

- Encadré par la balise ou l’élément <xml> :


<xml id="xmlid">
<xmldata>
<data>text</data>
</xmldata>
</xml>

- Définit extérieurement dans un fichier XML dont le chemin sera indiqué par l’attribut src.


<xml src="http://wwwsite.com/fichier.xml"></xml>

Plusieurs attributs sont possible pour la balise XML :

- disabled : Donne ou définit la valeur du statut de la balise
- id : Chaîne de caracteres identifiant la balise XML et donc l'objet XML
- src : URL reliant la balise à un fichier XML distant

Note : L’élément XML doit avoir une balise fermante.

Balise script

Cette méthode n’est pas recommandée et ne doit être utilisée que pour des applications de bas niveau. Il y a trois manière de surcharger la balise script pour la rattacher à des données XML.

L’attribut language peut prendre comme valeur : "XML"
L’attribut type peut prendre comme valeur : "text/xml"
Et comme pour la balise XML, L’attribut src peut prendre comme valeur, le chemin d’un fichier XML externe.

Exemple :


<script id="xmlid" language="xml">
<xmldata>
<data>text</data>
</xmldata>
</script>


<script id="xmlid" TYPE="text/xml">
<xmldata>
<data>text</data>
</xmldata>
</script>

Utilisation des données

Nous avons vu comment introduire des données XML à l'intèrieur d'une page HTML. Nous allons maintenant utiliser ces données.
Ce qui donne pour une page HTML standard :


<html>
<head>
<title>Données</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<xml id="donneesxml">
<datas>
<data/>
</datas>
</xml>
<xml id="feuilledestylexsl" src="repertoire/fichier.xsl"/>
</head>
<body>
</body>
</html>

Note : Vous pouvez également mettre ces balises à l'intérieur de la balise <body>.

Notre exemple va simplement utiliser les "îlots de données" pour pouvoir afficher un tableau construit à partir de données XML et réalisé grâce à un fichier XSL (lui aussi introduit par une "data island"). Ce tableau aura la particularité de se trier en cliquant simplement sur les entêtes des colonnes. Nous utiliserons pour cela l'attribut order-by propre au nœud <xsl:for-each> définit dans le langage XSL. Pour de plus amples informations sur le langage XSL, vous pouvez sur ce même site trouver les notions de bases.

Exemple du fichier HTML :


<head>
<title>Données</title>
<meta http-equiv="content-type" co,tent="text/html; charset=iso-8859-1">
<xml id="xmldatas">
<?xml version="1.0"?>
<portfolio>
<stock exchange="1logiciel">
<soft>Photoshop</soft>
<editeur>Adobe</editeur>
<prix>7295,60</prix>
</stock>
<stock exchange="2logiciel">
<soft>LiveMotion</soft>
<editeur>Adobe</editeur>
<prix>1422,04</prix>
</stock>
<stock exchange="3logiciel">
<soft>Flash5</soft>
<editeur>Macromediadobe</editeur>
<prix>2858,44</prix>
</stock>
<stock exchange="4logiciel">
<soft>Dreamweaver</soft>
<editeur>Macromedia</editeur>
<prix>1984,16</prix>
</stock>
</portfolio>
</XML
<XML id="FeuilledeStyle" src=&style.xsl"></XML>

<script language="javascript">
    function transformationXMLavecXSL()
    {
        document.body.innerHTML = xmldatas.transformNode(FeuilledeStyle.XMLDocument);
    }
    function orderBy(choice)
    {
        var StringSort = FeuilledeStyle.getelementsbytagname("@order-by").item(0).text;
        if (StringSort.lastIndexOf(choice) >= 0)
        {
            if (StringSort.lastIndexOf("-") >= 0)
                StringSort = choice;
            else 
                StringSort = "-" + choice;
        }
        else
        {
            StringSort = choice;
        } 
        
        FeuilledeStyle.getelementsbytagname("@order-by").item(0).text = StringSort;

        transformationXMLavecXSL()
    }
</script>
</head>

<body onload="transformationXMLavecXSL()">
</body>
</html>

Comme nous pouvons le remarquer, il n'y rien de nouveaux dans l'utilisation des "îlots de données", par contre nous rencontrons deux méthodes XML DOM très prisée :

a ) getElementsByTagName

Renvoie une collection d'objets basés sur la valeur de l'attribut passé en paramètre. Dans notre exemple, xmldatas.transformNode(FeuilledeStyle.XMLDocument), cette ligne de code renvoie tous les nœuds de l'objet XML (laFeuilledeStyle) désignés par le pattern @order-by.

b ) transformNode

Traite un nœud et ses enfants en utilisant la feuille fournie de modèle de XSL, et renvoie la transformation résultante. Dans notre exemple, xmldatas.transformNode(laFeuilledeStyle.XMLDocument), cette ligne de code applique une feuille de style à l'objet xmldatas dans son intégralité et renvoie le résultat sous forme de chaîne de caractères.

Notre programme se résume à modifier le fichier XSL puis à retransformer le fichier XML ainsi cela se traduit à l'écran par une nouvelle mise en forme des données. Attention pour pouvoir utiliser la méthode number afin de classer des nombres comme tel et non pas selon un ordre alphabétique, il faut auparavant que ces nombres soient au bon format (, ou . pour les décimales) cela dépend des paramètres de la machine cliente.

Conclusion : Le principal avantage à l'utilisation des îlots de données est que le formatage des données XML ne nécessitent pas un rafraîchissement de la page. Il n'est pas nécessaire de télécharger à nouveau des fichiers. Le triage des données est d'une extrême simplicté.