Dans la troisième partie de ce tutorial sur les modèles, nous avons vu comment utiliser des expressions et des paramètres :

• Pour rendre un attribut de balise modifiable
• Pour créer des régions facultatives

L’utilisation d’expressions et de paramètres peut aller beaucoup plus loin. Nous verrons comment par exemple alterner les couleurs de lignes d’un tableau à l’aide d’expressions, comment utiliser des conditions multiples pour déterminer un affichage particulier d’une région.

Expressions et paramètres de modèle

Notre objectif ici va être d’alterner les couleurs de rangées d’un tableau. C’est un effet très courant, qui permet d’assurer une meilleure lisibilité d’un tableau quand celui-ci comprend de nombreuses lignes.
Malheureusement, Dreamweaver ne nous propose aucune interface, boite de dialoque, pour ce que nous voulons faire. il faudra taper le code dans la fenêtre d’édition de code.

Créez un nouveau modèle, insérez une tableau répété d’une ligne, deux colonnes (Voir ici pour la création de tableau répété).

Positionnez-vous dans la balise <tr> et tapez la syntaxe suivante :

<tr bgcolor=’@@(_index%2? »#FF9900″: »#FFFF99″)@@’>

Avant de décortiquer ce code, voyons ce que cela va donner.
Créez une page à partir de ce modèle. Vous devez voir apparaitre le MUI à côté de l’onglet Répéter . Testez en cliquant sur le bouton +.
Les couleurs de fond de chaque ligne que vous rajoutez doivent alterner.

De quoi s’agit-il ?
Nous voulons jouer ici sur la couleur de fond des lignes. Donc le paramètre à évaluer est bgcolor . Un paramètre est une variable, chargée de stocker telle ou telle valeur selon l’évaluation qu’a fait Dreamweaver de l’expression.
Et l’expression ici est tout ce qui est entre parenthèses :

_index%2? »#FF9900″: »#FFFF99″

Nous rentrons ici dans un domaine un petit plus complexe : le langage d’expression de modèle

Langage d’expression de modèle

C’est un (très petit) sous-ensemble du Javascript dont il utilise la syntaxe et les règles de priorité. A chaque fois que vous créez, mettez à jour, sauvegardez une page créée à partir d’un modèle, ce code est exécuté.
Le LEM supporte (extrait de la documentation Macromedia) :

• les constantes numériques, constantes de chaîne (syntaxe avec guillemets doubles uniquement), constantes booléennes ( true ou false )
• la référence à une variable (voir le modèle d’objet d’expression pour connaître les variables définies)
• la référence à un champ (opérateur « point »)
• les opérateurs unaires : +, -, ~, !
• les opérateurs binaires : +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
• les opérateurs conditionnels : ?:
• les parenthèses : ()

Et il dispose également des objets suivants :

_repeat		Cette variable est définié uniquement pour les expressions apparaissant dans une région répétée et fournit les informations suivantes :
	_index	C’est l’index numérique d’une entrée dans une région répétée. Comme dans les tableaux Javascript, la première entrée a l’index 0 .
	_numrows	Nombre total d’entrées dans une région répétée
	_isFirst	Vrai si c’est la première entrée
	_isLast	Vrai si c’est la dernière entrée
	_prevRecord	Objet de l’entrée précédente
	_nextRecord	Objet de l’entrée suivante
	_parent	Dans une région répétée imbriquée, donne l’objet _repeat correspondant à la région répétée extérieure
_document		Contient les données de modèle de niveau document. Comprend un champ pour chaque paramètre du modèle et un ensemble de champs fournissant des informations prédéfinies sur le document.

Revenons à notre expression.

_index%2? »#FF9900″: »#FFFF99″

Elle utilise l’opérateur ternaire.
Tout ce qui est à gauche du point d’interrogation est évalué comme vrai ou faux.

• _index représente le numéro de l’entrée (la ligne) en cours. Ce numéro change à chaque fois que nous ajoutons une ligne puisque nous sommes dans une région répétée.
• %2 , signifie modulo 2. Comme nous voulons qu’une ligne sur deux ait une couleur différente, nous divisons à chaque fois le numéro courant par %2, le modulo représente le reste d’une division, arrondi à l’entier supérieur.
• Si le résultat est vrai (=1), alors c’est la première valeur à droite du point d’exclamation qui est appliquée, soit #FF9900 .
• Si le résultat est faux (=0), alors c’est la deuxième valeur à gauche des deux-points qui est appliquée, soit #FFFF99 .

(Comme en JS, l’objet _index aurait pû être référencé de la façon suivante avec l’opérateur point (.) : _repeat._index . ){mospagebreak}

Conditions multiples et expressions sur des régions facultatives

Nous pouvons encore aller plus loin. En récupérant la valeur d’un seul paramètre, nous pouvons contrôler l’affichage de plusieurs régions.
Pour ceci nous allons utiliser :

• des conditions multiples
• une région facultative basée sur la valeur d’une expression.

Note : la plupart des opérations que nous allons effectuer ne peuvent se faire qu’en mode Code ! Il va donc falloir taper vous-même…

Voici le scénario : nous avons un produit en vente sur 3 mois.
- Le 1er mois (mois1) le produit bénéficie d’une offre promotionnelle. Nous devrons afficher l’image de cette offre, plus un texte signalant jusqu’à quelle date l’offre est valable.
- Le 2ème mois (mois2), c’est une autre offre promotionnelle, avec aussi une nouvelle date d’expiration.
- Idem pour le 3ème mois.

Suivez bien
Voilà nos 3 images. Remarquez comme nous les avons nommées : elles ont toutes le même nom, sauf à la fin où le chiffre change.

Mois1	Mois2	Mois3
promo1.gif	promo2.gif	promo3.gif

Voici ce que devra afficher la page qui utilise le modèle, par exemple pour le 1er mois :

Un point important : observez ici l’arborescence de nos dossiers.
Les pages qui vont utiliser le modèle seront stockées dans un dossier « produit « , à la racine du site. C’est important car, à cause des modifications que nous allons apporter au code du modèle lui-même, DMX ne va pas être capable de rectifier les chemins d’accès de lui-même…

Commencez par créer un modèle.
Dans l’en-tête du document, dans une zone non-editable, vous tapez le code suivant :

<!– TemplateParam name= »mois » type= »number » value= »1″–>

Puis dans le corps du document vous insérez un tableau 2 lignes, 2 colonnes, et vous fusionnez les cellules de la deuxième rangée.

Dans la cellule en haut à gauche, insérez une image et transformez-la en zone modifiable, ceci afin d’éviter les sempiternels messages de Dreamweaver (« Attention, ce modèle ne contient aucune région modifiable. Voulez-vous continuer blabla ? « )

Dans la cellule de droite, insérez le code suivant. Il s’agit des balises d’ouverture et de fermeture de conditions multiples.

<td>
<!– TemplateBeginMultipleIf –>

<!– TemplateEndMultipleIf –>
</td>.

Entre ces balises ouvrante et fermante, vous devez maintenant insérer les 3 images destinées à apparaitre ou non, avec cette fois les balises TemplateBeginIfClause et TemplateEndIfClause.

<td>
<!– TemplateBeginMultipleIf –>
<!– TemplateBeginIfClause cond= »mois==1″ –><img src= »../images/promo1.gif »><!– TemplateEndIfClause –>
<!– TemplateBeginIfClause cond= »mois==2″ –><img src= »../images/promo2.gif »><!– TemplateEndIfClause –>
<!– TemplateBeginIfClause cond= »mois==3″ –><img src= »../images/promo3.gif »><!– TemplateEndIfClause –>
<!– TemplateEndMultipleIf –>
</td>

Puis, tout l’intérêt d’avoir nommé nos images de la même façon : nous allons remplacer simplement le chiffre de fin par le paramètre @@(mois)@@. Ce qui donne :

<!– TemplateBeginIfClause cond= »mois==1″ –><img src= »../images/promo@@(mois)@@.gif »><!– TemplateEndIfClause –>
<!– TemplateBeginIfClause cond= »mois==2″ –><img src= »../images/promo@@(mois)@@.gif »><!– TemplateEndIfClause –>
<!– TemplateBeginIfClause cond= »mois==3″ –><img src= »../images/promo@@(mois)@@.gif »><!– TemplateEndIfClause –>

Bien entendu, en mode Création, cela ne correspond plus à rien pour Dreamweaver, et il affiche l’icone d’une image brisée (introuvable).

Maintenant, passons à la cellule du bas. Elle doit recevoir des textes correspondants à chacune des offres.

<p>Offre valable jusq’au 31 janvier.</p>
<p>Offre valable jusq’au 29 février.</p>
<p>Offre valable jusq’au 31 mars.</p>

Chacune de ces phrases devra donc s’afficher toujours aussi en fonction de la valeur du paramètre mois. Nous allons donc en faire des Régions facultatives.
Remarquez comme nous avons englobé chacune des phrases dans des balises de paragraphe. C’est essentiellement pour éviter d’exploser la mise en page dans le modèle, car sinon tout serait sur une seule ligne, et la cellule s’agrandirait outre-mesure. Il faudra penser bien sûr à englober ces balises de paragraphes dans sa propre région facultative.

Faites une sélection du premier paragraphe. Allez dans le menu Insertion > Objets de modèles > Région facultative, et sélectionnez l’onglet Avancé.
Dans celui-ci cochez l’option Saisir une expression, et dans le champ en dessous, tapez « mois==1 » (sans les guillemets…) Notez le DOUBLE SIGNE EGAL. C’est ici un opérateur de comparaison, pas un opérateur d’affectation.

Le code source généré :

<td colspan= »2″>
<!– TemplateBeginIf cond= »mois==1″ –><p>Offre valable jusq’au 31 janvier.</p><!– TemplateEndIf –>
<!– TemplateBeginIf cond= »mois==2″ –><p>Offre valable jusq’au 29 février.</p><!– TemplateEndIf –>
<!– TemplateBeginIf cond= »mois==3″ –><p>Offre valable jusq’au 31 mars.</p><!– TemplateEndIf –>
</td>

Et en mode Création :

À présent, nous testons tout ça en créant une page à partir du modèle, et en l’enregistrant tout de suite dans notre dossier produits.
Puis allez dans le menu Modifier > Propriétés du modèle et amusez-vous à changer la valeur. Vos zones d’affichage doivent se modifier en fonction de la valeur de paramètre que vous donnez.

Conclusion

Vous avez pu le constater, ce que nous venons de faire nous rapproche des fonctionnalités que l’on pourrait obtenir avec l’utilisation d’un langage dynamique, couplé ou non avec une base de données. Dans l’exemple précédent, nous contrôlions l’apparition de 2 régions, mais rien n’empêcherait de contrôler des pans entiers d’un document, en fonction de certaines conditions, et ces conditions peuvent être multiples. Ici une condition était que le mois soit égal à un nombre. Mais nous aurions pu augmenter la complexité, dans le genre : si mois = 1 ET semaine = 4 et jour = lundi etc…

Dans tout ce zoo que constituent les modèles, il reste à voir encore une bête étrange, les modèles imbriqués. Et nous ferons également une rapide incursion du côté des modèles dynamiques, à savoir qui utilisent un langage dynamique, PHP, ASP et autre.