Les modèles - 4 : Expressions, paramètres, conditions
Écrit par Thibault Imbert | 28-07-2005
Index de l'article
Les modèles - 4 : Expressions, paramètres, conditions
Page 2

Les articles précédents :
Les modèles - Partie 1 : Introduction aux modèles par yeca
Les modèles - Partie 2 : Tableaux répétés et régions répétées
Les modèles : Partie 3 : Attributs modifiables, régions facultatives

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


 
Dernière mise à jour : 31-07-2005