<%importfile="../../../globals.dim#*"
%>
<%templatefile="<%%WCT_ROOT_PATH%%>proto/WCT_SYSTEM/templates.dim#WCT_SYSTEM::WCT_PATHES"
%>
<%set%WCT_SESSION::ID%
= "1" %>
<%importfile="<%%WCT_SRC_PATH%%>WCT_SESSION/templates.dim#*"
%>
<%%WCT_SESSION::Check()%%>
<%templatefile="../parcours1_<%%FORM::lang%%>.dim#autonav"
%>
<html>
<head>
</head>
<%set%this%
= "approach" %>
<TEMPLATE ID="TITRE" INLINE>
Didacticiel - Une première approche
</TEMPLATE>
<BODY BGCOLOR=#FFFFFF MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>
<%%FRAMEWORK%%>
<TEMPLATE ID="LOCAL_TOC">
<A class=t1 HREF="#BM1">Identifier des éléments récurents</A><BR>
<A class=t1 HREF="#BM2">Découper l'information en blocs</A><BR>
<A class=t1 HREF="#BM3">Identifier des structures paramétrables</A><BR>
<A class=t1 HREF="#BM4">Résumé</A>
</TEMPLATE>
<TEMPLATE ID="CONTENT_fr">
<TABLE WIDTH="95%">
<TD VALIGN=top><H2>Une première approche des templates</H2></TD><TD
Valign=top><%templatefile="../parcours1_<%%FORM::lang%%>.dim#coursestamp"
%></TD>
</TR>
</TABLE>
<P>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.
<A NAME="BM1"><H3>Identifier des éléments récurents</H3></A>
<P>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.
<P>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 ?
<P>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 <A HREF="<%%SITE_ROOT_URL%%>services/viewsource.dim?source=support/tutorial/parcours1/06_approach_<%%FORM::lang%%>.dim" TARGET="_blank">code exact</A>
(approach_<%%FORM::lang%%>.dim) de cette page
pour que vous vous rendiez compte de sa simplicité.
<P>En attendant, analysons cette page...
<ol><li>Le contenu variable de cette page est le contenu d'une cellule
de tableau.
<li>Le tableau est toujours le même du point de vue de la structure.
<li>Le titre du tableau change par contre à chaque page, mais c'est le
seul changement notable.
<li>Un en-tête chapote le tout.
<li>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.
</ol>
<P>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
?
<P>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 <B>%IntroFile%</B> en haut, et <B>%TableBottom%</B>
en bas.
<P>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, <B>sans avoir à se rappeller des dizaines
de noms de styles !!</B>.
<A NAME="BM2"><H3>Découper l'information en blocs</H3></A>
<P>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).
<P>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.
<P>Par exemple, dans cette page, on peut distinguer dans la barre de titre
du tableau deux zones, ou blocs :
<P><ul>
<li>La zone de titre de la page (à gauche).
<li>La zone des contrôles généraux de navigation (à droite).
</ul>
<P>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 !
<P>Voici justement le code du template "bloc" qui affiche les contrôles
:
<P><PRE class=code>
<FONT class=syntax><TEMPLATE ID="CONTROL"></FONT>
<a href="<FONT class=syntax><%%SITE_ROOT_URL%%></FONT>index_<FONT
class=syntax><%%FORM::lang%%></FONT>.dim?lang=<FONT
class=syntax><%%FORM::lang%%></FONT>">
<img src="<FONT class=syntax><%%IMAGES_ROOT_URL%%></FONT>home.gif"
border=0 alt="Home">
</a>
<a href="<FONT class=syntax><%%SITE_ROOT_URL%%></FONT>forum/main_<FONT
class=syntax><%%FORM::lang%%></FONT>.dim?lang=<FONT
class=syntax><%%FORM::lang%%></FONT>">
<img src="<FONT class=syntax><%%IMAGES_ROOT_URL%%></FONT>news.gif"
border=0 alt="Forum">
</a>
<a href="javascript:history.back()">
<img src="<FONT class=syntax><%%IMAGES_ROOT_URL%%></FONT>back.gif"
border=0 alt="Back">
</a>
<FONT class=syntax></TEMPLATE></FONT>
</PRE>
<A NAME="BM3"><H3>Identifier des structures paramétrables</H3></A>
<P>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 :
<P>Si l'on regarde la cellule titre de cette page, le template appelé
est <B>%TableTop%</B>. Un seul template pour l'ensemble des titres
de toutes les pages de ce site, alors que tous ces titres sont différents.
<P>Pour faire ceci, il a suffit que lors du design du template <B>%TableTop%</B>,
l'on isole la partie variable (le titre affiché) de la "glue" fixe sous la forme
d'un nouvel appel à une variable <B>%TITRE%</B> (notez ici l'identité
entre une variable et un template, mais ceci sera discuté dans le document <A
HREF="07_variables_<%%FORM::lang%%>.dim?session=<%%FORM::session%%>">Simples variables ou super-éléments</A>.
<P>Cette variable est définie (par l'instruction de définition DIML <FONT
class=syntax>%set</FONT>) avant l'utilisation du template <B>%TableTop%</B>
(haut du source <A HREF="<%%SITE_ROOT_URL%%>services/viewsource.dim?source=support/tutorial/parcours1/06_approach_<%%FORM::lang%%>.dim" TARGET="_blank">approach_<%%FORM::lang%%>.dim</A>).
<A NAME="BM4"><H3>Résumé</H3></A>
<P>Le DIML et les templates permettent :
<p><ul>
<li>De ne plus être lié à la structure linéaire de la page Web.
<li>De capitaliser des éléments récurrents.
<li>D'organiser son code en éléments, et plus tard en <A HREF="<%%SITE_ROOT_URL%%>wct/index_<%%FORM::lang%%>.dim?session=<%%FORM::session%%>">objets</A>.
<li>De gérer facilement et à moindre coût des dispositifs complexes tels
que la compatibilité, le multilinguisme, etc.
</ul>
<P>De nombreux autres aspects sont dévoilés dans les étapes qui suivent.
<%templatefile="../parcours1_<%%FORM::lang%%>.dim#navcall"
%>
</TEMPLATE>
</body>
</html>
<%%WCT_SESSION::Add()%%>