Convertir des données XML en HTML à l'aide de XSLT

Convertissez les données XML en HTML à l'aide d'une simple feuille de style XSL. Alors que la spécification XML continue d'évoluer, il semble nécessaire de satisfaire les besoins de chacun dans les nouvelles versions. Malheureusement, effectuer de simples transformations a toujours été un problème pour la spécification.

Supposons que j'ai des données XML représentant le contenu d'une page et que je souhaite maintenant convertir son contenu en une mise en page. Voici le XML que je souhaite convertir :

<?xml version=&#39;1.0&#39;?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<xml>
    <folders>
        <folder>
            <text>Folder 1</text>
            <files>
                <file>
                    <text>File 1</text>
                    <fields>
                        <field>
                            <data>
                                <type>string</type>
                                <length>50</length>
                                <value>some data</value>
                            </data>
                        </field>
                    </fields>
                </file>
            </files>
        </folder>
    </folders>
</xml>

Ce contenu représente un ensemble de dossiers, de fichiers et de champs. Chaque dossier contient des fichiers et chaque fichier contient des champs pour saisir des données. Chaque dossier du groupe de dossiers sera représenté par un élément TR et un élément TD dans la première ligne d'un TABLE. Chaque fichier du groupe de fichiers sera représenté comme un élément TR et un élément TD sur la première ligne d'un élément TABLE imbriqué dans l'élément TR du dossier. Chaque domaine du groupe de domaines apparaîtra comme une INPUT dans le fichier associé.

Pour mettre en œuvre cette idée, nous devons parcourir le XML et construire une table basée sur XSL.

Voici le XSL utilisé pour cette transformation :

<?xml version="1.0"?>
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:fn="http://www.mycompany.com/mynamespace">
<xsl:output method="html"/>
<msxsl:script language="JScript" implements-PRefix="fn">
    function getElementCount(nodelist, what) {
        var rtrn = 0;
        rtrn = nodelist[0].parentNode.selectNodes(what).length;
        return (rtrn + 1); //1 is added for filler TD
    }
</msxsl:script>
<xsl:template match="/">
<TABLE CELLSPACING="0" CELLPADDING="0"
    WIDTH="100%" BORDER="0" ID="tblRoot" NAME="tblRoot"
    style="table-layout:fixed;">
    <TR>
        <xsl:for-each select="xml/folders/folder">
        <xsl:element name="TD">
            <xsl:attribute name="style">width:55px</xsl:attribute>
            <xsl:value-of select="text"/>
        </xsl:element>
        </xsl:for-each>
        <TD> </TD>
    </TR>
    <xsl:for-each select="xml/folders/folder">
    <TR>
        <xsl:element name="TD">
            <xsl:attribute name="colspan">
                <xsl:value-of select="fn:getElementCount(., &#39;folder&#39;)"/>
            </xsl:attribute>
                
            <TABLE CELLSPACING="0" CELLPADDING="0"
                WIDTH="100%" BORDER="0" style="table-layout:fixed;">
                <TR>
                    <xsl:for-each select="files/file">
                    <xsl:element name="TD">
                        <xsl:attribute name="style">width:55px;</xsl:attribute>
                        <xsl:value-of select="text"/>
                    </xsl:element>
                    </xsl:for-each>
                    <TD> </TD>
                </TR>
                <xsl:for-each select="files/file">
                    <TR>
                        <xsl:element name="TD">
                            <xsl:attribute name="colspan">
                                <xsl:value-of select="fn:getElementCount(., &#39;file&#39;)"/>
                            </xsl:attribute>
                        <xsl:for-each select="fields/field">
                        <xsl:element name="INPUT">
                            <xsl:attribute name="type">text</xsl:attribute>
                            <xsl:attribute name="maxlength">
                                <xsl:value-of select="data/length"/>
                            </xsl:attribute>
                            <xsl:attribute name="value">
                                <xsl:value-of select="data/value"/>
                            </xsl:attribute>
                        </xsl:element><BR/>
                        </xsl:for-each>
                        </xsl:element>
                    </TR>
                </xsl:for-each>
            </TABLE>
        </xsl:element>
    </TR>
    </xsl:for-each>
</TABLE>
</xsl:template>
</xsl:stylesheet>

Dans la balise stylesheet, nous avons mis en place plusieurs espaces de noms, dont l'espace de noms xsl qui définit toutes les balises de transformation xsl. Espace de noms msxml qui nous permet de créer des fonctions utilisateur pouvant être utilisées dans des feuilles de style. J'utilise ceci pour obtenir tous les éléments enfants afin d'obtenir un attribut COLSPAN défini pour une balise TD. L'espace de noms fn utilisé pour rejoindre un ensemble de fonctions définies par l'utilisateur créées par l'élément msxml:script.

Ensuite, nous créons la TABLE externe et le premier TR. Dans le TR, je crée un TD pour chaque dossier spécifié dans le XML. J'ai utilisé la balise xsl:element car elle me permet d'ajouter des attributs personnalisés ou d'exécuter une fonction qui définit une propriété pour l'attribut COLSPAN dans un autre élément TD.

Après avoir créé les TD requis pour chaque dossier, j'ai commencé à créer des TR pour chaque dossier. J'ajoute seulement un TD à ce TR, mais je définis sa propriété COLSPAN égale au nombre de balises de dossier dans le groupe de dossiers plus une. L'extra est utilisé pour remplir les espaces dans une TABLE à disposition fixe.

Pour obtenir COLSPAN, je passe dans le contexte courant (précisé ici par ".") et le nom du nœud que je veux calculer. Dans ma fonction, j'obtiens le contexte actuel, paraentNode et le nombre de nœuds spécifiés dans la requête XPath. La fonction renvoie ensuite ce montant plus un pour remplir le TD.

Avec ce TD, j'intègre une autre TABLE à l'intérieur qui contient chaque fichier du groupe de fichiers. A partir de ce moment, le processus est le même que pour une conversion TABLE externe. La dernière étape consiste à ajouter les champs dans chaque fichier. Cette fois, je n'ai pas créé à nouveau de TABLE intégrée, j'ai simplement ajouté les champs au TD actuel.

Une fois la présentation générale terminée, je peux commencer à ajouter des fonctionnalités de l'interface utilisateur, telles que masquer d'autres dossiers et lignes de fichiers jusqu'à ce que l'utilisateur clique sur l'onglet correspondant. Cette fonctionnalité peut être obtenue en écrivant un script qui prend en charge cette fonctionnalité, en ajoutant un élément onclick xsl:attribute aux éléments TD de dossier et de fichier, puis en définissant sa valeur sur le nom de la fonction de script.

Enfin, une fois la fonctionnalité commune terminée, vous pouvez ajouter la classe xsl:attributes et ajouter les noms de classe associés dans STYLE ou CSS pour obtenir l'apparence souhaitée.

Cet exemple crée une base pour la vue Fichier-Dossier-Champ utilisée dans le déploiement de solutions de données Web. Visitez MSDN pour en savoir plus sur la spécification XML de Microsoft.

Ce qui précède est le contenu de l'utilisation de XSLT pour convertir des données XML en HTML. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !