Tutoriel : créer un plugin d'extension HTML

Comprendre comment intervenir sur la présentation d'éléments spécialisés.

Durée : 90 minutes 
Objectifs :
Contenus :

















L'objectif de ce tutoriel n'est en aucun cas de réaliser une intégration complète, mais de comprendre les mécanismes d'intégration.

Modifier la présentation standard de la recette de cuisine

Procédure :

    Création du plugin fr.masociete.xhtml

  1. Dans le répertoire des plugins de votre DITA-OT, créez le répertoire fr.masociete.xhtml.
  2. Dans ce répertoire, ajoutez un fichier XML dénommé plugin.xml.
    Le contenu est le suivant :
    <?xml version="1.0" encoding="UTF-8"?>
    <plugin id="fr.masociete.xhtml">
        <require plugin="fr.masociete.doctypes"/>
        <feature extension="dita.xsl.xhtml" value="recette2xhtml.xslt" type="file"/>
    </plugin>
    Avec :
    • fr.masociete.xhtml : l'identificateur du plugin. Attention, ce nom doit être unique dans le répertoire des plugins.
    • require : indique que ce plugin dépend de l'existence des doctypes fr.masociete.doctypes, et donc de recette.
    • feature : définit une extension de la transformation XHTML standard en utilisant le fichier recette2html.xslt. Peu importe comment est faite l'intégration, le mécanisme permet d'en assurer le bon déroulement.
  3. Créez avec Oxygen une feuille de styles XSLT vierge et enregistrez la dans le répertoire du plugin avec le nom défini dans plugin.xml.
  4. Utilisez Oxygen pour faire l'intégration du plugin (voir dans le tutoriel de création d'un plugin "modèle", la partie "Enregistrement du plugin").
  5. Réalisation de la feuille de styles XSLT

  6. Créez un "template" pour intervenir sur l'élément nbPers.
        <xsl:template match="*[contains(@class, ' recette/nbPers ')]">
            <div class="nbPers">
                <span class="label">Nombre de personnes : </span>
                <span class="value">
                    <xsl:apply-templates/>
                </span>
            </div>
        </xsl:template>
    Avec :
    • match="*[contains(@class, ' recette/nbPers ')] : définit que ce template s'applique à n'importe quel élément qui contient dans son attribut class la valeur ' recette/nbPers '.
    • div, span, etc. : une structure HTML, somme toute, classique avec des classes HTML pour gérer le graphisme.
    • <xsl:apply-templates/> : ordre donné au processeur XSLT d'explorer de façon standard les contenus de nbPers.
  7. Lancez la transformation XHTML du topic recetteTest.dita.
    Le formatage est bien pris en compte. Il reste à styler en utilisant une CSS (voir le tutoriel sur l'utilisation d'une feuille de styles dédiée).
  8. Finalisez l'XSLT en utilisant le modèle suivant :
    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl"
        exclude-result-prefixes="xs xd" version="2.0">
    
        <!-- définition de la recette : des lignes contenant un label puis la valeur. -->
    
        <xsl:template match="*[contains(@class, ' recette/nbPers ')]">
            <div class="nbPers">
                <span class="label">Nombre de personnes : </span>
                <span class="value">
                    <xsl:apply-templates/>
                </span>
            </div>
        </xsl:template>
    
        <xsl:template match="*[contains(@class, ' recette/tpsPreparation ')]">
            <div class="tpsPreparation">
                <span class="label">Temps de préparation : </span>
                <span class="value">
                    <xsl:apply-templates/>
                </span>
            </div>
        </xsl:template>
    
        <xsl:template match="*[contains(@class, ' recette/tpsCuisson ')]">
            <div class="tpsCuisson">
                <span class="label">Temps de cuisson : </span>
                <span class="value">
                    <xsl:apply-templates/>
                </span>
            </div>
        </xsl:template>
    
        <!-- Les ingrédients : un label sur une ligne puis les différents ingrédients 
             en réutilisant le formatage des li -->
        <xsl:template match="*[contains(@class, ' recette/ingredients ')]">
            <div class="ingredients">
                <div class="label">Ingrédients</div>
                <ul class="ingredients">
                    <xsl:apply-templates/>
                </ul>
            </div>
        </xsl:template>
    
        <!-- La préparation : un label et ensuite le contenu -->
        <xsl:template match="*[contains(@class, ' recette/preparation ')]">
            <div class="preparation">
                <div class="label">Préparation</div>
                <xsl:apply-templates/>
            </div>
        </xsl:template>
    
        <!-- Le résultat : une petite div pour jouer sur la présentation -->
        <xsl:template match="*[contains(@class, ' recette/resultat ')]">
            <div class="resultat">
                <xsl:apply-templates/>
            </div>
        </xsl:template>
    </xsl:stylesheet>
  9. Relancez la transformation XSLT et constatez : tous les éléments du nouveau topic sont maintenant présentés.