doSimple L’utilisation des modèles HTML (Template)

Dernière modification le 30 August 2006

Les modèles HTML (Template)

L’HTML est un langage de structuration de l’information et non un langage de programmation comme le PHP. L’idée des modèles HTML (Template, Gabarits, Canevas) est de séparer ces deux parties afin de bénéficier de tout les avantages d’un découplage fort. Le but de cet article est d’illustrer comment fonctionne un système de Gabarit simple.

Il existe maintenant une nouvelle classe plus puissante.

Quand les utiliser ?

Alors que les feuilles de styles (CSS) permettent de séparer la structure du document et la présentation de ce même document. Les canevas permettent de séparer clairement la logique de programmation de la structure HTML.

Les canevas HTML servent à éviter le mélange sauvage de code HTML et de code applicatif. L’utilisation appropriée des gabarits dans votre application garanti un découplage total entre HTML et le langage de programmation.

Avantages

Cette façon de procéder permet d’acheminer son application vers le modèle de type "Modèle, Vue, Contrôle". Il convient particulierement bien aux applications Web car la couche de présentation (Vue) se fait dans un langage différent de celui dévoué à la programmation (Contrôle et Modèle).

Robustesse

La modification de la présentation ne touche pas l’application, et inversement. Comme on peut se concentrer sur une plus petite partie du problème, on évite des erreurs.

Flexibilité

Le graphiste et le programmeur peuvent travailler ensemble sur l’application de manière non concurrente.

Clareté & réutilisabilité

La séparation fonctionnelle des langages facilite les modifications ultérieurs.

Utilisation

Durant la réalisation d’un projet il est apparu différents besoins que j’ai pu couvrir avec quatres fonctions primitives.

• Remplacements simples ;
• Remplacements par boucles ;
• Les conditions ;
• Remplacements récursifs.

Remplacements simples

Imaginez que votre fichier de template se nomme standard.template.html et qu’il contienne cette ligne :

...
<title><!--%titrePage%---></title>
...

Aillant programmé le système de template en PHP le code associé serait :

// construction de l’objet Template
$standardTemplate = new Template('standard.template.html');
// remplacement
$standardTemplate->replace('titrePage','ma belle page');
// affichage
echo $standardTemplate->toString();

Ce qui donnerait ceci :

...
<title>ma belle page</title>
...

Remplacements par boucle

Imaginez que votre fichier contienne :

...
<select>
<!--%loop:options%-->
    <option value="<!--%valeur%-->"><!--%texte%--></option>
<!--%endLoop:options%-->
</select>
...

Le code associé serait :

// construction de l’objet Template
$standardTemplate = new Template('standard.template.html');
// construction du tableau de valeurs
$optionsArray = array( array('valeur'=>1,'texte'=>'hello'), 
   array('valeur'=>2,'texte'=>'world') );
 // remplacement par boucle
$standardTemplate->iterateReplace('options',$optionsArray );
// affichage
echo $standardTemplate->toString();

Ce qui vous donnerait quelque chose dans le genre :

...
<select>
    <option value="1">hello</option>
    <option value="2">world</option>
</select>
...

Les conditions

Reprenons le code HTML ci-dessus et ajoutons lui une condition. Les conditions peuvent être evaluées sur des variables passées dans le tableau destiné à une boucle ou à la récursion :

...
<select>
<!--%loop:options%-->
    <option 
   <!--%if:isset($['selected'])%-->selected="selected"<!--%endIf%--> 
   value="<!--%valeur%-->"><!--%texte%--></option>
<!--%endLoop:options%-->
</select>
...

Avec le code suivant :

// construction de l’objet Template
$standardTemplate = new Template('standard.template.html');
// construction du tableau de valeurs
$optionsArray = array( array('valeur'=>1,'texte'=>'hello'), 
   array('valeur'=>2,'texte'=>'world', 'selected'=>true ) );
 // remplacement par boucle
$standardTemplate->iterateReplace('options',$optionsArray );
// affichage
echo $standardTemplate->toString();

Vous donnerais au final :

...
<select>
    <option value="1">hello</option>
    <option selected="selected" value="2">world</option>
</select>
...

Ou plus exactement ceci :

hello world

Conditions plus complexes

...
<!--%if:1==0%-->
<p>1 est égal à 0.</p>
<!--%elseif:1==2%-->
<p>1 est égal à 2.</p>
<!--%else%-->
<p>0 n’est ni égal à 1, ni égal à 2.</p>
<!--%endIf%-->
...

Ce qui donnerait evidemment :

...
<p>0 n’est ni égal à 1, ni égal à 2.</p>
...

Remplacements récursifs

Voici à quoi ressemblerait un code HTML taillé pour la récursion :

...
<!--%recursion:listeImbriquee%-->
<ul>
<!--%loop%-->
<li><!--%texte%--><!--%recursion%--></li>
<!--%endLoop%-->
</ul>
<!--%endRecursion:listeImbriquee%-->
...

Si le code PHP associé était comme ceci :

// construction de l’objet Template
$standardTemplate = new Template('standard.template.html');
// construction du tableau de valeurs
$listesArray = 
    array( array('texte'=>'une'), array('texte'=>'belle', 
    array( array('texte'=>'liste', 
    array( array('texte'=>'récursive')))))); 
 // remplacement par boucle
$standardTemplate->recursiveReplace('listeImbriquee',$listesArray );
// affichage
echo $standardTemplate->toString();

La structure de la variable listesArray serait alors :

Array
(
    [0] => Array
    (
        [texte] => une
    )

    [1] => Array
    (
        [texte] => belle
        [0] => Array
        (
            [0] => Array
            (
                [texte] => liste
                [0] => Array
                (
                    [0] => Array
                    (
                        [texte] => récursive
                    )
                )
            )
        )
    )
)

Et vous en obtiendriez le code HTML suivant :

<ul>
<li>une</li>
<li>belle
<ul>
<li>liste
<ul>
<li>récursive</li>
</ul>
</li>
</ul>
</li>
</ul>

C’est à dire ceci :

• une
• belle
  • liste
    • récursive

Conclusion

Avec l’implémentation fournie, il est possible de combiner les différentes façons de faire ormis que l’on ne peut emboiter plusieurs niveaux de conditions. La classe n’est de loin pas parfaite mais suffit pour des besoins limités. Il existe de nombreuses autres implémentations plus évoluées. Je vous laisse les découvrir par vous même.

Liens

• Une implémentation de la classe en PHP ;
• Une implémentation de la classe en Python ;
• Template selon Wikipedia.

Auteur

Batiste Bieler

Licence

LGPL

2004 © doSimple.ch