Tutoriel : créer un plugin d'extension HTML

Dans le répertoire des plugins de votre DITA-OT, créez le répertoire fr.masociete.xhtml.

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.

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.

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").

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.

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).

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>

Relancez la transformation XSLT et constatez : tous les éléments du nouveau topic sont maintenant présentés.

Tutoriel : créer un plugin d'extension HTML

Modifier la présentation standard de la recette de cuisine