< Précédent | Suivant >

Leçon 1.4 : Créer et éditer une feuille de style XSL

Les feuilles de style sont des fichiers qui permettent de transformer les documents XML en d'autres types de documents et de formater la sortie. Dans cet exercice, vous allez créer une feuille de style XSL simple pour formater les données de votre fichier XML en tableau dans un fichier HTML.
Avant de commencer, vous devez effectuer la Leçon 1.3 : Créer et éditer votre fichier XML

Créer la feuille de style

Créez une nouvelle feuille de style vide en procédant comme suit :
  1. Sélectionnez Fichier > Nouveau > Autre. Dans la fenêtre Nouveau, sélectionnez XML > XSL. Cliquez sur Suivant.
  2. Sélectionnez le répertoire MyProject.
  3. Tapez CDTitle.xsl dans la zone Nom de fichier, puis cliquez sur Suivant.
  4. Sur la page Sélectionner un fichier XML, sélectionnez le fichier CDTitle.xml. Cela associe ce fichier au fichier CDTitle.xsl.
  5. Cliquez sur Terminer.
Le fichier CDTitle.xsl est créé et s'ouvre automatiquement dans l'éditeur XSL.

Editer la feuille de style

L'éditeur XSL fournit différents assistants pour vous aider à créer le contenu de vos feuilles de style.
  1. Pour créer un document HTML, vous allez ajouter un canevas pour générer des informations d'en-tête HTML et définir la méthode de sortie du document.
    1. Dans l'éditeur XSL, placez le curseur sur une ligne vide après l'élément <xsl:stylesheet> dans le fichier CDTitle.xsl.
    2. Cliquez sur la vue Fragments et ouvrez le tiroir XSL. Si la vue Fragments n'est pas affichée, vous pouvez l'ouvrir en cliquant sur Fenêtre > Afficher la vue > Autre > Général > Fragments.
    3. Cliquez deux fois sur En-tête HTML par défaut. Cela crée un élément <xsl:output> qui sortira les résultats de la transformation (l'application de CDTitle.xsl à CDTitle.xml) en HTML, et un canevas qui produira un en-tête HTML avec une règle <xsl:apply templates> pour traiter tous les enfants directs du fichier CDTitle.xml.
  2. Créez un canevas qui produira un tableau HTML :
    1. Placez le curseur sur une ligne vide après la balise de fin </xsl:template> générée à l'étape 1.
    2. Dans le tiroir XSL, cliquez deux fois sur Tableau HTML dans un fichier XSL.
    3. Sélectionnez le premier élément CD comme noeud de contexte pour construire le tableau HTML.
    4. Cochez la case Intégrer le tableau dans un canevas. Cela indique que vous voulez intégrer ce tableau dans un nouveau canevas.
    5. Cochez la case Inclure un en-tête pour indiquer que vous voulez inclure un en-tête dans le tableau. Cliquez sur Suivant.
    6. Dans la zone Espacement des cellules, tapez 20. Cela améliorera la présentation du tableau en augmentant l'espace entre les cellules.
    7. Cliquez sur Terminer. Cela crée un nouveau canevas qui produira un tableau HTML dans le fichier CDTitle.xsl.
  3. Cliquez sur Fichier > Enregistrer pour enregistrer votre fichier.

Transformer le fichier XML en HTML

  1. Dans la vue Navigateur, maintenez la touche Ctrl enfoncée et sélectionnez CDTitle.xml et CDTitle.xsl.
  2. Cliquez avec le bouton droit de la souris et sélectionnez Exécuter en tant que > Transformation XSL.
  3. Le fichier de résultat est _CDTitle_transform.html. Il s'ouvre automatiquement dans le Concepteur de page ; il contient le contenu de votre fichier XML en tableau.
  4. Pour voir le tableau tel qu'il se présentera dans un navigateur web, fermez le fichier _CDTitle_transform.html, cliquez dessus avec le bouton droit de la souris dans la vue Navigateur et sélectionnez Ouvrir avec > Navigateur Web.
Il devrait s'afficher ainsi :

Navigateur Web

Point de contrôle

L'éditeur XSL fournit différents assistants pour vous aider à créer le contenu d'une feuille de style. Il offre également une méthode pour créer un tableau HTML basé sur une feuille de style.
Maintenant que vous avez fini cette leçon, vous devriez savoir :
  • Créer une feuille de style XSL
  • Définir dans une feuille de style un contenu qui générera un tableau HTML
  • Transformer un fichier XML en HTML
< Précédent | Suivant >

Commentaires en retour