Une première approche des templates

L'utilisation des templates présente plusieurs avantages conséquents. Nous allons en examiner ici quelques uns, avant de plonger dans l'univers des templates.

Identifier des éléments récurents

La première pratique qui vient au développeur en DIML (et celle dont il a le plus de mal à se passer au bout de quelques jours de développement) est la facilité avec laquelle des portions récurrentes de code peuvent être factorisées et réutilisées à loisir.

Regardons la page dans laquelle nous sommes... N'y a-t-il pas des éléments ostensiblement récurrents par rapport aux autres pages de ce tutoriel, et même de ce site ?

Malheureusement vous ne pouvez voir le code effectif de cette page, car toutes les balises DIML ont été résolues par le serveur. Néanmoins nous vous fournissons le code exact (approach_fr.dim) de cette page pour que vous vous rendiez compte de sa simplicité.

En attendant, analysons cette page...

1. Le contenu variable de cette page est le contenu d'une cellule de tableau.
2. Le tableau est toujours le même du point de vue de la structure.
3. Le titre du tableau change par contre à chaque page, mais c'est le seul changement notable.
4. Un en-tête chapote le tout.
5. Ce qui intéresse le rédacteur n'est pas le tableau lui-même, mais bien le contenu qu'il met dans la cellule de texte.

Maintenant comparez le code source (faites afficher le source dans votre navigateur) et le code effectif de la page (lien ci-dessus). Que voit-on ?

Que le DIML a visiblement simplifié le code de la page en laissant pratiquement la totalité de l'espace au contenu. Ce dernier est simplement encadré du template %IntroFile% en haut, et %TableBottom% en bas.

En capitalisant ces trois templates dans un fichier unique (appelé très souvent "globals.dim" pour les templates les plus répandus dans le site), nous nous sommes fait une bibliothèque très simple d'éléments de construction de toutes les pages de ce site, sans avoir à se rappeller des dizaines de noms de styles !!.

Découper l'information en blocs

Cette page, qui se veut très simple, n'est pas le meilleur exemple du découpage en bloc, mais cette technique de construction du Web fait aujourd'hui recette dans de nombreux projets open source de CMS (lire "Content Management System" ou systèmes de gestion de contenu).

Dans cette optique, le contenu d'une page ou d'un portail peut être analysé sous forme d'un ensemble de blocs "graphiques" qui apportent un ensemble de fonctionnalités cohérentes.

Par exemple, dans cette page, on peut distinguer dans la barre de titre du tableau deux zones, ou blocs :

• La zone de titre de la page (à gauche).
• La zone des contrôles généraux de navigation (à droite).

C'est le cas idéal pour faire des templates ! Et d'autant plus que l'on décidera un peu plus tard de rendre conditionnel l'apparition des contrôles de navigation !

Voici justement le code du template "bloc" qui affiche les contrôles :

<TEMPLATE ID="CONTROL">
<a href="<%%SITE_ROOT_URL%%>index_<%%FORM::lang%%>.dim?lang=<%%FORM::lang%%>">
   <img src="<%%IMAGES_ROOT_URL%%>home.gif" border=0 alt="Home">
</a>
<a href="<%%SITE_ROOT_URL%%>forum/main_<%%FORM::lang%%>.dim?lang=<%%FORM::lang%%>">
   <img src="<%%IMAGES_ROOT_URL%%>news.gif" border=0 alt="Forum">
</a>
<a href="javascript:history.back()">
   <img src="<%%IMAGES_ROOT_URL%%>back.gif" border=0 alt="Back">
</a>
</TEMPLATE>

Même si vos pages sont toutes différentes, il existe des mécanismes reproductibles et des similarités. Ces similarités se gèrent très facilement en DIML en paramétrant des templates par d'autres variables ou templates. Par exemple :

Si l'on regarde la cellule titre de cette page, le template appelé est %TableTop%. Un seul template pour l'ensemble des titres de toutes les pages de ce site, alors que tous ces titres sont différents.

Pour faire ceci, il a suffit que lors du design du template %TableTop%, l'on isole la partie variable (le titre affiché) de la "glue" fixe sous la forme d'un nouvel appel à une variable %TITRE% (notez ici l'identité entre une variable et un template, mais ceci sera discuté dans le document Simples variables ou super-éléments.

Cette variable est définie (par l'instruction de définition DIML %set) avant l'utilisation du template %TableTop% (haut du source approach_fr.dim).

Résumé

Le DIML et les templates permettent :

• De ne plus être lié à la structure linéaire de la page Web.
• De capitaliser des éléments récurrents.
• D'organiser son code en éléments, et plus tard en objets.
• De gérer facilement et à moindre coût des dispositifs complexes tels que la compatibilité, le multilinguisme, etc.

De nombreux autres aspects sont dévoilés dans les étapes qui suivent.