Manuel du propriétaire | Adobe DREAMWEAVER CS5 Manuel utilisateur

Ajouter à Mes manuels
393 Des pages
Extension
d’ADOBE&reg; DREAMWEAVER&reg; CS5 &amp; CS5.5
Mentions l&eacute;gales
Mentions l&eacute;gales
Vous trouverez des informations juridiques &agrave; l'adresse http://help.adobe.com/fr_FR/legalnotices/index.html.
Derni&egrave;re mise &agrave; jour le 22/6/2011
iii
Sommaire
Chapitre 1 : Introduction
A propos des extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Installation d'une extension
Cr&eacute;ation d'une extension
............................................................................................ 1
.............................................................................................. 2
Ressources suppl&eacute;mentaires pour les cr&eacute;ateurs d'extensions
Nouvelles fonctionnalit&eacute;s de Dreamweaver CS5
Conventions utilis&eacute;es dans ce manuel
............................................................ 2
........................................................................ 2
.................................................................................. 3
Chapitre 2 : Personnalisation de Dreamweaver
Techniques de personnalisation de Dreamweaver
...................................................................... 4
Personnalisation de Dreamweaver dans un environnement multi-utilisateur
Modification des mappages FTP
Types de documents extensibles dans Dreamweaver
Modification des raccourcis clavier
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapitre 3 : Personnalisation du mode Code
A propos des conseils de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
A propos de la coloration du code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
A propos de la validation du code
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Modification du formatage HTML par d&eacute;faut
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
A propos du mode Fractionnement vertical
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A propos des fichiers apparent&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A propos de l'affichage en direct
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapitre 4 : Extension de Dreamweaver
Types d'extensions Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Extensions et dossiers de configuration
API d'extension
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Localisation d'une extension
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Utilisation d'Extension Manager
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Chapitre 5 : Interfaces utilisateur destin&eacute;es aux extensions
Instructions de conception d'une interface utilisateur d'extension
Commande de rendu HTML de Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Commandes d'interface utilisateur personnalis&eacute;es dans les extensions
Ajout de contenu Flash &agrave; Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Int&eacute;gration de Photoshop et d'objets dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Chapitre 6 : Mod&egrave;le d'objet de document (DOM) Dreamweaver
A propos du DOM de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Distinction entre les DOM de document utilisateur et d'extension
DOM Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Derni&egrave;re mise &agrave; jour le 22/6/2011
iv
EXTENSION DE DREAMWEAVER
Sommaire
Chapitre 7 : Objets de la barre Insertion
Fonctionnement des fichiers d'objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Fichier de d&eacute;finition de la barre Insertion
Modification de la barre Insertion
Exemple simple d'insertion d'un objet
Fonction de l'API des objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Chapitre 8 : API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
Proc&eacute;dure de d&eacute;tection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Exemple de fichiers de probl&egrave;mes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Fonctions de l'API de v&eacute;rification des probl&egrave;mes
Chapitre 9 : Commandes
Fonctionnement des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Ajout de commandes au menu Commandes
Exemple de commande simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Fonctions de l'API des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Chapitre 10 : Menus et commandes de menu
Fichier menus.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Modification des menus et des commandes de menu
Commandes de menu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Exemple de commande de menu simple
Exemple de menu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Fonctions de l'API des commandes de menu
Chapitre 11 : Barres d'outils
Fonctionnement des barres d'outils
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Fichier simple de commande de barre d'outils
Fichier de d&eacute;finition de la barre d'outils
Balises d'&eacute;l&eacute;ments de barre d'outils
Attributs des balises d'&eacute;l&eacute;ments
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Fonctions de l'API de commande de barre d'outils
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Chapitre 12 : Rapports
Rapports de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Rapports autonomes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Fonctions de l'API de rapports
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Chapitre 13 : Biblioth&egrave;ques et &eacute;diteurs de balises
Format de fichier biblioth&egrave;que de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
S&eacute;lecteur de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Exemple simple de cr&eacute;ation d'un &eacute;diteur de balise
Fonctions de l'API de l'&eacute;diteur de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Chapitre 14 : Inspecteurs Propri&eacute;t&eacute;s
Fichiers d'inspecteur Propri&eacute;t&eacute;s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Fonctionnement des fichiers d'inspecteur Propri&eacute;t&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Derni&egrave;re mise &agrave; jour le 22/6/2011
v
EXTENSION DE DREAMWEAVER
Sommaire
Exemple simple d'inspecteur Propri&eacute;t&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Fonctions de l'API de l'inspecteur Propri&eacute;t&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Chapitre 15 : Panneaux flottants
Fonctionnement des fichiers de panneau flottant
Exemple de panneau flottant simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Fonctions de l'API du panneau flottant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Chapitre 16 : Comportements
Fonctionnement des comportements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Exemple de comportement simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Fonction de l'API des comportements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Chapitre 17 : Comportements de serveur
Terminologie des comportements de serveur
Architecture de Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Exemple de comportement de serveur simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Sc&eacute;narios dans lesquels les fonctions de l'API de comportement de serveur sont appel&eacute;es
API de comportement de serveur
Fonctions d'impl&eacute;mentation des comportements de serveur
Fichiers EDML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Balises de fichiers EDML Groupe
Fichiers EDML Participant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Techniques de comportements de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Chapitre 18 : Sources de donn&eacute;es
Fonctionnement des sources de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Exemple simple de source de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Fonctions de l'API des sources de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Chapitre 19 : Formats de serveur
Fonctionnement du formatage de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Sc&eacute;narios dans lesquels les fonctions de formatage des donn&eacute;es sont appel&eacute;es
Fonctions de l'API des formats de serveur
Chapitre 20 : Composants
A propos des notions de base des composants
Extension du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Personnalisation du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Personnalisation des fichiers du panneau Composants
Fonctions de l'API du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Chapitre 21 : Mod&egrave;les de serveur
Personnalisation des mod&egrave;les de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Fonctions de l'API des mod&egrave;les de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Chapitre 22 : Traducteurs de donn&eacute;es
Fonctionnement des traducteurs de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D&eacute;termination du type de traducteur &agrave; utiliser
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Derni&egrave;re mise &agrave; jour le 22/6/2011
vi
EXTENSION DE DREAMWEAVER
Sommaire
Ajout d'un attribut traduit &agrave; une balise
Inspection des attributs traduits
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Verrouillage des balises ou des blocs de code traduits
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Cr&eacute;ation d'inspecteurs Propri&eacute;t&eacute;s pour du contenu verrouill&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Recherche de bogues dans le traducteur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Exemple de traducteur d'attributs simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Exemple de traducteur de blocs/balises simple
Fonctions de l'API du traducteur de donn&eacute;es
Chapitre 23 : Extensions C
Int&eacute;gration des fonctions C
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Extensions C et interpr&eacute;teur JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Types de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
API d'extension C
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
API de configuration multi-utilisateur et d'acc&egrave;s aux fichiers
Appel d'une fonction C &agrave; partir de JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Chapitre 24 : Dossier Shared
Contenu du dossier Shared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Utilisation du dossier Shared
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Derni&egrave;re mise &agrave; jour le 22/6/2011
1
Chapitre 1 : Introduction
Ce guide d&eacute;crit l'API (interface de programmation d'application) et la plate-forme Adobe&reg; Dreamweaver&reg; CS5 qui
vous permettent des cr&eacute;er des extensions de Dreamweaver. Le guide Extension de Dreamweaver CS5 fournit des
informations sur les th&egrave;mes suivants :
• la fa&ccedil;on dont chaque type d'extension fonctionne ;
• les fonctions d'API que Dreamweaver appelle pour mettre en oeuvre les diff&eacute;rents objets ;
• les menus, panneaux flottants, comportements de serveur, etc. qui constituent les fonctionnalit&eacute;s de Dreamweaver ;
• un exemple simple de chaque type d'extension ;
• la fa&ccedil;on de personnaliser Dreamweaver en modifiant des balises dans divers fichiers HTML et XML, afin d'ajouter
des commandes ou des types de documents.
Pour plus d'informations sur l'utilit&eacute; et les possibilit&eacute;s offertes par les API JavaScript™, utilisables pour effectuer
diverses op&eacute;rations dans vos extensions Dreamweaver, consultez le Guide des API de Dreamweaver. Si vous envisagez
de cr&eacute;er des extensions fonctionnant avec des bases de donn&eacute;es, consultez les sections du manuel Utilisation de
Dreamweaver consacr&eacute;es aux connexions de bases de donn&eacute;es.
A propos des extensions
La plupart des extensions Dreamweaver sont r&eacute;dig&eacute;es en langage HTML et en langage JavaScript. Les instructions
pr&eacute;sent&eacute;es ici supposent que vous poss&eacute;dez une bonne ma&icirc;trise des &eacute;l&eacute;ments suivants : Dreamweaver et
programmation JavaScript, HTML et XML. Par ailleurs, si vous impl&eacute;mentez des extensions C, vous devez savoir
comment cr&eacute;er et utiliser des biblioth&egrave;ques de liens dynamiques (DLL) C. Pour r&eacute;diger vos propres extensions afin de
cr&eacute;er des applications Web, vous devez conna&icirc;tre les langages de script c&ocirc;t&eacute; serveur et au moins l'une des plates-formes
suivantes : Active Server Pages (ASP), ASP.NET, PHP: Hypertext Preprocessor (PHP), Adobe&reg; ColdFusion&reg;, ou
JavaServer Pages (JSP).
Installation d'une extension
Pour vous familiariser avec la proc&eacute;dure de r&eacute;daction d'extensions, vous pouvez consulter les extensions, ainsi que les
ressources disponibles sur le site Web d'Adobe Exchange ( http://www.adobe.com/go/exchange_fr). L'installation
d'une extension existante vous permet de d&eacute;couvrir quelques-uns des outils qui vous seront utiles pour travailler avec
vos propres extensions.
1 T&eacute;l&eacute;chargez et installez Adobe&reg; Extension Manager, qui est disponible sur le site de t&eacute;l&eacute;chargement d'Adobe, sur
http://www.adobe.com/go/downloads_fr.
2 Connectez-vous au site Web Adobe Exchange sur http://www.adobe.com/go/exchange_fr.
3 S&eacute;lectionnez l'extension que vous souhaitez r&eacute;cup&eacute;rer parmi celles disponibles. Cliquez sur le lien de
t&eacute;l&eacute;chargement pour t&eacute;l&eacute;charger le progiciel d'extension.
4 Enregistrez le progiciel d'extension dans le dossier Downloaded Extensions de votre dossier Dreamweaver.
5 Dans Extension Manager, choisissez Fichier &gt; Installer une extension. Depuis Dreamweaver, choisissez
Commandes &gt; G&eacute;rer les extensions pour lancer Extension Manager.
Derni&egrave;re mise &agrave; jour le 22/6/2011
2
EXTENSION DE DREAMWEAVER
Introduction
Extension Manager installe automatiquement l'extension dans Dreamweaver, depuis le dossier Downloaded
Extensions.
Il est n&eacute;cessaire de red&eacute;marrer Dreamweaver avant de pouvoir utiliser certaines extensions. Si Dreamweaver est en
cours d'ex&eacute;cution pendant l'installation de l'extension, il vous sera peut-&ecirc;tre demand&eacute; de fermer et de red&eacute;marrer
l'application avant de poursuivre l'installation.
Pour afficher des informations de base sur l'extension &agrave; la suite de son installation, depuis Dreamweaver, ouvrez
Extension Manager (Commandes &gt; G&eacute;rer les extensions).
Cr&eacute;ation d'une extension
Avant de cr&eacute;er une extension Dreamweaver, consultez le site Web Adobe Exchange
(http://www.adobe.com/go/exchange_fr) pour d&eacute;terminer si l'extension &agrave; cr&eacute;er existe d&eacute;j&agrave;. Si aucune extension
existante ne r&eacute;pond &agrave; vos besoins, proc&eacute;dez comme suit pour en cr&eacute;er une :
• D&eacute;terminez le type d'extension &agrave; cr&eacute;er. Pour plus d'informations sur les types d'extensions, voir &laquo; Types
d'extensions Dreamweaver &raquo; &agrave; la page 79.
• Recherchez dans la documentation le type d'extension que vous souhaitez cr&eacute;er. Pour vous familiariser avec la
proc&eacute;dure de cr&eacute;ation du type d'extension requis, il est recommand&eacute; de cr&eacute;er l'exemple simple d'extension en vous
reportant &agrave; la rubrique correspondante.
• D&eacute;terminez les fichiers &agrave; modifier ou cr&eacute;er.
• Le cas &eacute;ch&eacute;ant, effectuez des pr&eacute;paratifs concernant l'interface utilisateur requise pour l'extension.
• Cr&eacute;ez les fichiers requis et enregistrez-les dans les dossiers appropri&eacute;s.
• Red&eacute;marrez Dreamweaver pour qu'il reconnaisse la nouvelle extension.
• Testez l'extension.
• Empaquetez l'extension pour pouvoir la partager avec d'autres utilisateurs. Pour plus d'informations, voir
&laquo; Utilisation d'Extension Manager &raquo; &agrave; la page 86.
Ressources suppl&eacute;mentaires pour les cr&eacute;ateurs
d'extensions
Pour entrer en contact avec d'autres d&eacute;veloppeurs d'extensions, rejoignez le forum de discussion consacr&eacute; &agrave;
l'extensibilit&eacute; de Dreamweaver. Vous trouverez ce forum sur le site Web d'Adobe, &agrave; l'adresse
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&amp;catid=190&amp;entercat=y.
Nouvelles fonctionnalit&eacute;s de Dreamweaver CS5
Nouveaut&eacute;s
chacune de ces fonctionnalit&eacute;s poss&egrave;de de nouvelles fonctions apparent&eacute;es qui ont &eacute;t&eacute; ajout&eacute;es &agrave; l'API d'utilitaire et &agrave;
l'API JavaScript. Pour plus d'informations sur les nouvelle fonctions, voir Nouveaut&eacute;s de Dreamweaver CS5.
Derni&egrave;re mise &agrave; jour le 22/6/2011
3
EXTENSION DE DREAMWEAVER
Introduction
Centre de documentation
Approfondissez votre connaissance de Dreamweaver gr&acirc;ce aux ouvrages publi&eacute;s par Adobe. Consultez le contenu le
plus r&eacute;cent et r&eacute;dig&eacute; par des experts sur http://www.adobe.com/support/documentation/buy_books.html.
Fonctions supprim&eacute;es
Diverses fonctions ont &eacute;t&eacute; supprim&eacute;es de Dreamweaver. Pour plus d'informations sur les fonctions &eacute;limin&eacute;es de l'API
d'utilitaire et de l'API JavaScript, voir le Guide des API de Dreamweaver.
Conventions utilis&eacute;es dans ce manuel
Ce manuel utilise les conventions typographiques suivantes :
• La police de code indique des fragments de code et des constantes d'API, notamment des noms de classe, des noms
de m&eacute;thodes, des noms de fonctions, des noms de type, des scripts, des instructions SQL et des noms de balises et
d'attributs HTML et XML.
•
La police de code en italique identifie les &eacute;l&eacute;ments rempla&ccedil;ables dans le code.
• Le symbole de continuation (&not;) indique qu'une longue ligne de code a &eacute;t&eacute; fractionn&eacute;e sur deux lignes ou plus. En
raison des limites de marge du format de ce manuel, une ligne de code continue doit ici &ecirc;tre coup&eacute;e. Lorsque vous
copiez les lignes de code, supprimez le symbole de continuation et entrez-les comme une seule ligne.
• Les accolades ({ }) plac&eacute;es avant et apr&egrave;s un argument de fonction indiquent que cet argument est facultatif.
• Les noms de fonction portant le pr&eacute;fixe dreamweaver. (comme dans dreamweaver.nomfonc) peuvent &ecirc;tre
abr&eacute;g&eacute;s en dw.nomfonc lorsque vous &eacute;crivez le code. Ce manuel utilise le pr&eacute;fixe dreamweaver. complet dans les
d&eacute;finitions de fonctions et dans l'index. De nombreux exemples utilisent n&eacute;anmoins le pr&eacute;fixe court (dw.).
Ce manuel utilise les conventions de d&eacute;nomination suivantes :
• Vous — le d&eacute;veloppeur responsable de la r&eacute;daction des extensions
• L'utilisateur — la personne utilisant Dreamweaver
• Le visiteur — la personne qui visualise la page Web cr&eacute;&eacute;e par l'utilisateur
Derni&egrave;re mise &agrave; jour le 22/6/2011
4
Chapitre 2 : Personnalisation de
Dreamweaver
Outre cr&eacute;er et utiliser des extensions Adobe Dreamweaver , vous pouvez personnaliser Dreamweaver de diff&eacute;rentes
mani&egrave;res afin de l'adapter au mieux &agrave; vos besoins.
Techniques de personnalisation de Dreamweaver
Vous pouvez personnaliser Dreamweaver en employant plusieurs m&eacute;thodes g&eacute;n&eacute;rales. Certaines sont pr&eacute;sent&eacute;es dans
Utilisation de Dreamweaver. Vous pouvez d&eacute;finir des pr&eacute;f&eacute;rences dans divers domaines, comme l'accessibilit&eacute;, la
coloration de code, les polices, la mise en surbrillance et l'aper&ccedil;u dans les navigateurs, par l'interm&eacute;diaire du panneau
Pr&eacute;f&eacute;rences (Edition &gt; Pr&eacute;f&eacute;rences ou Dreamweaver &gt; Pr&eacute;f&eacute;rences (MacOs X)). Vous pouvez &eacute;galement modifier les
raccourcis clavier &agrave; l'aide de l'&eacute;diteur de raccourcis clavier (Edition &gt; Raccourcis clavier) ou en modifiant un fichier de
configuration.
Personnalisation des documents par d&eacute;faut
Le dossier DocumentTypes/NewDocuments contient, par d&eacute;faut, un document (vierge) de chaque type de document
que vous pouvez cr&eacute;er &agrave; l'aide de Dreamweaver. Lorsque vous cr&eacute;ez un nouveau document vierge en s&eacute;lectionnant
Fichier &gt; Nouveau et en s&eacute;lectionnant un &eacute;l&eacute;ment dans les listes Page de base, Page dynamique ou Autres cat&eacute;gories,
Dreamweaver base le nouveau document sur le document par d&eacute;faut correspondant dans ce dossier. Pour modifier les
&eacute;l&eacute;ments par d&eacute;faut d'un type de document donn&eacute;, modifiez le document correspondant dans ce dossier.
Remarque : Si vous souhaitez que toutes les pages de votre site contiennent certains &eacute;l&eacute;ments communs (par exemple une
mention sur le copyright) ou une pr&eacute;sentation constante, il est pr&eacute;f&eacute;rable d'utiliser des mod&egrave;les et des &eacute;l&eacute;ments de
biblioth&egrave;que plut&ocirc;t que de changer les documents par d&eacute;faut. Pour plus d'informations sur les mod&egrave;les et les &eacute;l&eacute;ments de
biblioth&egrave;que, voir Utilisation de Dreamweaver.
Personnalisation des conceptions de pages
Dreamweaver propose divers &eacute;l&eacute;ments pr&eacute;d&eacute;finis: feuilles de style CSS, jeux de cadres et conceptions de pages. Vous
pouvez cr&eacute;er des pages bas&eacute;es sur ces conceptions en cliquant sur Fichier &gt; Nouveau.
Pour personnaliser les conceptions disponibles, modifiez les fichiers pr&eacute;sents dans les dossiers BuiltIn/css,
BuiltIn/framesets, BuiltIn/Templates et BuiltIn/TemplatesAccessible
Remarque : Les conceptions r&eacute;pertori&eacute;es dans les cat&eacute;gories Conception de page et Conception de page (Accessibilit&eacute;) sont
les fichiers mod&egrave;les de Dreamweaver. Pour plus d'informations sur les mod&egrave;les, voir Utilisation de Dreamweaver.
Vous pouvez &eacute;galement cr&eacute;er des conceptions de pages en ajoutant des fichiers dans les sous-dossiers du dossier
BuiltIn. Pour qu'une description du fichier s'affiche dans la bo&icirc;te de dialogue Nouveau document, cr&eacute;ez un fichier
Design Notes (dans le dossier _notes appropri&eacute;) correspondant au fichier de conception de page.
Derni&egrave;re mise &agrave; jour le 22/6/2011
5
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Personnalisation de l'aspect des bo&icirc;tes de dialogue
La mise en forme des bo&icirc;tes de dialogue pour les objets, les commandes et les comportements sont d&eacute;finis comme des
formulaires HTML. Ils r&eacute;sident dans des fichiers HTML du dossier Configuration au sein du dossier d'application
Dreamweaver. Ces formulaires peuvent &ecirc;tre modifi&eacute;s comme tout autre formulaire Dreamweaver. Pour plus
d'informations, voir Utilisation de Dreamweaver.
Remarque : Dans le cadre d'un syst&egrave;me d'exploitation multi-utilisateur, vous devez modifier les copies des fichiers de
configuration contenues dans votre dossier de configuration utilisateur plut&ocirc;t que les fichiers Configuration de
Dreamweaver. Pour plus d'informations, voir &laquo; Dossiers de configuration multi-utilisateur &raquo; &agrave; la page 82.
Modification de l'aspect d'une bo&icirc;te de dialogue
1 Dans Dreamweaver, choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Correction du code.
2 D&eacute;s&eacute;lectionnez l'option Renommer les &eacute;l&eacute;ments de formulaire lors du collage.
Cette op&eacute;ration vous assure que les &eacute;l&eacute;ments de formulaire conserveront leur nom original une fois ceux-ci copi&eacute;s
et coll&eacute;s.
3 Cliquez sur OK pour fermer la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
4 Sur votre disque dur, localisez le fichier HTM appropri&eacute; dans le dossier Configuration/Objects,
Configuration/Commands ou Configuration/Behaviors.
5 Faites une copie du fichier dans un dossier autre que le dossier Configuration.
6 Ouvrez cette copie dans Dreamweaver, modifiez le formulaire et enregistrez le document.
7 Quittez Dreamweaver.
8 Copiez le fichier modifi&eacute; &agrave; la place de l'original dans le dossier Configuration. Il est toutefois conseill&eacute; de conserver
une sauvegarde du fichier original pour pouvoir l'utiliser &agrave; nouveau en cas de besoin.
9 Red&eacute;marrez Dreamweaver pour constater les changements.
Il est recommand&eacute; de ne modifier que l'aspect de la bo&icirc;te de dialogue et non son fonctionnement. Le type des &eacute;l&eacute;ments
de formulaire doit &ecirc;tre identique, tout comme les noms, afin que l'information obtenue par Dreamweaver &agrave; partir de
la bo&icirc;te de dialogue puisse &ecirc;tre utilis&eacute;e de la m&ecirc;me mani&egrave;re.
Par exemple, l'objet Commentaire prend le texte entr&eacute; dans une zone de texte de bo&icirc;te de dialogue et utilise une
fonction JavaScript simple pour transformer ce texte en commentaire HTML et l'ins&eacute;rer dans votre document. Le
formulaire qui d&eacute;crit la bo&icirc;te de dialogue se trouve dans le fichier Comment.htm dans le dossier
Configuration/Objects/Invisibles. Vous pouvez ouvrir ce fichier et modifier la taille ou d'autres attributs dans la zone
de texte, mais si vous supprimez int&eacute;gralement la balise textarea ou si vous modifiez la valeur de son attribut name,
l'objet Commentaire ne fonctionne plus correctement.
Modification du type de fichier par d&eacute;faut
Par d&eacute;faut, Dreamweaver affiche tous les types de fichiers reconnus dans la bo&icirc;te de dialogue Fichier &gt; Ouvrir. Vous
pouvez utiliser un menu contextuel dans cette bo&icirc;te de dialogue pour limiter l'affichage de certains types de fichiers. Si
la plupart de vos travaux impliquent un type de fichier sp&eacute;cifique (par exemple, les fichiers ASP), vous pouvez modifier
l'affichage par d&eacute;faut. Le type de fichier indiqu&eacute; sur la premi&egrave;re ligne du fichier Extensions.txt de Dreamweaver devient
le type par d&eacute;faut.
Remarque : Pour afficher tous les types de fichiers dans la bo&icirc;te de dialogue Fichier &gt; Ouvrir (y compris les fichiers que
Dreamweaver ne peut pas ouvrir), choisissez Tous les fichiers (*.*). Ne confondez pas cette option avec Tous les
documents, qui r&eacute;pertorie uniquement les fichiers que Dreamweaver peut ouvrir.
Derni&egrave;re mise &agrave; jour le 22/6/2011
6
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Modification du type de fichier par d&eacute;faut de Dreamweaver dans Fichier &gt; Ouvrir
1 Cr&eacute;ez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un &eacute;diteur de texte.
3 Coupez la ligne correspondant &agrave; la nouvelle valeur par d&eacute;faut. Collez-la ensuite au d&eacute;but du fichier, de fa&ccedil;on &agrave; ce
qu'elle devienne sa premi&egrave;re ligne.
4 Enregistrez le fichier.
5 Red&eacute;marrez Dreamweaver.
Pour afficher le nouveau type par d&eacute;faut, choisissez Fichier &gt; Ouvrir, puis examinez le menu contextuel de types de
fichiers.
Ajout de nouveaux types de fichier dans le menu de la bo&icirc;te de dialogue Fichier &gt; Ouvrir
1 Cr&eacute;ez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un &eacute;diteur de texte.
3 Ajoutez une nouvelle ligne pour chaque nouveau type de fichier. Tapez en majuscules les extensions de fichier
g&eacute;r&eacute;es par le nouveau type de fichier, en les s&eacute;parant par une virgule. Ajoutez le signe deux points et une br&egrave;ve
description, qui appara&icirc;tra dans le menu contextuel de types de fichiers associ&eacute; &agrave; la bo&icirc;te de dialogue qui s'affiche
lorsque vous s&eacute;lectionnez Fichier &gt; Ouvrir.
Par exemple, pour les fichiers JPEG, entrez JPG,JPEG,JFIF:Fichiers image JPEG
4 Enregistrez le fichier.
5 Red&eacute;marrez Dreamweaver.
Pour observer les modifications, choisissez Fichier &gt; Ouvrir, puis cliquez sur le menu contextuel de types de fichiers.
Personnalisation de l'interpr&eacute;tation de balises propri&eacute;taires
Les technologies c&ocirc;t&eacute; serveur telles que ASP, Adobe ColdFusion, JSP et PHP utilisent du code sp&eacute;cial non-HTML au
sein des fichiers HTML. Les serveurs cr&eacute;ent et servent du contenu HTML bas&eacute; sur ce code. Lorsque Dreamweaver
rencontre des balises non-HTML, il les compare aux informations contenues dans les fichiers de balises propri&eacute;taires,
lesquels d&eacute;finissent comment lire et afficher ces balises non-HTML.
Par exemple, les fichiers ASP contiennent (outre le code HTML habituel) du code ASP que le serveur doit interpr&eacute;ter.
Le code ASP ressemble &agrave; une balise HTML mais est marqu&eacute; par une paire de d&eacute;limiteurs : il commence par &lt;% et se
termine par %&gt;. Le dossier Configuration/ThirdPartyTags de Dreamweaver contient un fichier nomm&eacute; Tags.xml. Ce
fichier d&eacute;crit le format des diverses balises propri&eacute;taires, dont le code ASP, et d&eacute;crit comment Dreamweaver doit
afficher ce code. La fa&ccedil;on dont le code ASP est sp&eacute;cifi&eacute; dans le fichier Tags.xml conduit Dreamweaver &agrave; ne pas tenter
d'interpr&eacute;ter le code situ&eacute; entre les d&eacute;limiteurs. A la place, en mode Cr&eacute;ation, seule une ic&ocirc;ne indiquant la pr&eacute;sence de
code ASP s'affiche. Vos propres fichiers de donn&eacute;es de balises peuvent d&eacute;finir l'affichage et la lecture de vos balises par
Dreamweaver. Cr&eacute;ez un nouveau fichier de donn&eacute;es de balises pour chaque jeu de balises afin d'indiquer &agrave;
Dreamweaver comment les afficher.
Remarque : Cette section vous explique comment d&eacute;finir l'affichage d'une balise personnalis&eacute;e par Dreamweaver, mais
ne d&eacute;crit pas comment modifier le contenu ou les propri&eacute;t&eacute;s d'une balise personnalis&eacute;e. Pour plus d'informations sur la
cr&eacute;ation d'un inspecteur Propri&eacute;t&eacute;s permettant de v&eacute;rifier et modifier les propri&eacute;t&eacute;s d'une balise personnalis&eacute;e, voir
&laquo; Inspecteurs Propri&eacute;t&eacute;s &raquo; &agrave; la page 223.
Derni&egrave;re mise &agrave; jour le 22/6/2011
7
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Chaque fichier de donn&eacute;es de balises d&eacute;finit le nom, le type, le mod&egrave;le de contenu, le mod&egrave;le de rendu et l'ic&ocirc;ne pour
une ou plusieurs balises. Vous pouvez cr&eacute;er un nombre illimit&eacute; de fichiers de donn&eacute;es de balises, mais tous doivent se
trouver dans le dossier Configuration/ThirdPartyTags afin d'&ecirc;tre consult&eacute;s et trait&eacute;s par Dreamweaver. Les fichiers de
donn&eacute;es de balises portent l'extension .xml.
Si vous travaillez sur plusieurs sites distincts &agrave; la fois (par exemple, en tant que d&eacute;veloppeur ind&eacute;pendant), vous pouvez
regrouper toutes les sp&eacute;cifications de balises relatives &agrave; un site dans un fichier. Il suffit ensuite de remettre ce fichier de
donn&eacute;es de balises avec les ic&ocirc;nes personnalis&eacute;es et les inspecteurs Propri&eacute;t&eacute;s aux responsables qui g&eacute;reront le site.
Vous pouvez d&eacute;finir une sp&eacute;cification de balise &agrave; l'aide d'une balise XML nomm&eacute;e tagspec. Par exemple, le code
suivant d&eacute;crit les sp&eacute;cifications d'une balise nomm&eacute;e happy :
&lt;tagspec tag_name=&quot;happy&quot; tag_type=&quot;nonempty&quot; render_contents=&quot;false&quot; content_model=
&quot;marker_model&quot; icon=&quot;happy.gif&quot; icon_width=&quot;18&quot; icon_height=&quot;18&quot;&gt;&lt;/tagspec&gt;
Vous pouvez d&eacute;finir deux types de balises &agrave; l'aide de tagspec :
• Balises de type HTML standard
happy est un exemple de balise de type HTML standard. Elle d&eacute;bute par une balise d'ouverture &lt;happy&gt;, des
donn&eacute;es sont plac&eacute;es entre les balises d'ouverture et de fermeture, et elle se termine par une balise &lt;/happy&gt; de
fermeture.
• Balises d&eacute;limit&eacute;es par des cha&icirc;nes
Les balises d&eacute;limit&eacute;es par des cha&icirc;nes d&eacute;butent par une cha&icirc;ne et se terminent par une autre cha&icirc;ne. Elles se
comportent comme des balises HTML vides (telle img), car elles n'entourent pas les donn&eacute;es de balises et ne
comportent pas de balises de fermeture. Si la balise happy &eacute;tait d&eacute;limit&eacute;e par des cha&icirc;nes, les sp&eacute;cifications de
balises incluraient les attributs start_string et end_string. Une balise ASP est une balise d&eacute;limit&eacute;e par des
cha&icirc;nes. Elle commence par la cha&icirc;ne &lt;% et se termine par la cha&icirc;ne %&gt;, sans balise de fermeture.
Les informations suivantes d&eacute;crivent les attributs et les valeurs valides de la balise tagspec. Les attributs marqu&eacute;s
d'un ast&eacute;risque (*) sont ignor&eacute;s dans le cadre des balises d&eacute;limit&eacute;es par des cha&icirc;nes. Les attributs facultatifs sont d&eacute;finis
par des accolades ({}) dans la liste des attributs ; les attributs ne comportant pas d'accolades sont donc obligatoires.
&lt;tagspec&gt;
Description
Fournit des informations &agrave; propos d'une balise propri&eacute;taire.
Attributs
tag_name, {tag_type}, {render_contents}, {content_model}, {start_string}, {end_string},
{detect_in_attribute}, {parse_attributes}, icon, icon_width, icon_height, {equivalent_tag},
{is_visual}, {server_model}
•
tag_name est le nom de la balise personnalis&eacute;e. Pour les balises d&eacute;limit&eacute;es par des cha&icirc;nes, tag_name n'est utilis&eacute;
que pour d&eacute;terminer si un inspecteur Propri&eacute;t&eacute;s donn&eacute; peut &ecirc;tre utilis&eacute; pour la balise. Si la premi&egrave;re ligne de
l'inspecteur Propri&eacute;t&eacute;s contient ce nom de balise encadr&eacute; par des ast&eacute;risques, l'inspecteur peut &ecirc;tre utilis&eacute; pour les
balises de ce type. Par exemple, le nom de balise associ&eacute; au code ASP correspond &agrave; ASP. Les inspecteurs Propri&eacute;t&eacute;s
pouvant examiner le code ASP doivent comporter la mention *ASP* sur la premi&egrave;re ligne. Pour plus d'informations
sur l'inspecteur Propri&eacute;t&eacute;s API, voir &laquo; Inspecteurs Propri&eacute;t&eacute;s &raquo; &agrave; la page 223.
Derni&egrave;re mise &agrave; jour le 22/6/2011
8
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
•
tag_type d&eacute;termine si la balise est vide (telle que img) ou si un contenu est pr&eacute;sent entre les balises d'ouverture et
de fermeture (telles que code). Cet attribut est requis pour les balises normales (non d&eacute;limit&eacute;es par des cha&icirc;nes).
Il est ignor&eacute; pour les balises d&eacute;limit&eacute;es par des cha&icirc;nes, car celles-ci sont toujours vides. Les valeurs valides sont
&quot;empty&quot; et &quot;nonempty&quot;.
•
render_contents d&eacute;termine si le contenu de la balise doit s'afficher en mode Cr&eacute;ation ou s'il est remplac&eacute; par
l'ic&ocirc;ne sp&eacute;cifi&eacute;e. Cet attribut est requis pour les balises nonempty et n'est pas pris en compte pour les balises empty
(les balises empty sont vides de contenu). Cet attribut ne s'applique qu'aux balises affich&eacute;es hors des attributs. Le
contenu des balises imbriqu&eacute;es &agrave; l'int&eacute;rieur des valeurs d'attributs d'autres balises n'est pas affich&eacute;. Les valeurs
valides sont &quot;true&quot; et &quot;false&quot;.
•
content_model d&eacute;crit les diff&eacute;rents types de contenu que la balise peut contenir et l'emplacement o&ugrave; la balise peut
s'afficher dans un fichier HTML. Les valeurs valides sont &quot;block_model&quot;, &quot;head_model&quot;, &quot;marker_model&quot; et
&quot;script_model&quot;.
•
block_model sp&eacute;cifie que la balise peut contenir des &eacute;l&eacute;ments de niveau de bloc comme div et p et que la balise
peut appara&icirc;tre uniquement dans la section body ou dans d'autres balises au contenu body, telles que div, layer
et td.
•
head_model sp&eacute;cifie que le contenu de la balise peut &ecirc;tre compos&eacute; de texte et que la balise peut uniquement
appara&icirc;tre dans la section head.
•
marker_model sp&eacute;cifie que la balise peut contenir tout code HTML valide et peut se trouver &agrave; tout endroit du
fichier HTML. Le validateur HTML de Dreamweaver ignore les balises sp&eacute;cifi&eacute;es comme marker_model.
N&eacute;anmoins, le validateur n'ignore pas le contenu de ces balises. En cons&eacute;quence, m&ecirc;me si la balise peut
appara&icirc;tre &agrave; n'importe quel emplacement, le contenu de la balise peut corrompre le document HTML &agrave; certains
endroits. Par exemple, du texte simple ne peut appara&icirc;tre dans la section head d'un document (&agrave; l'exception des
&eacute;l&eacute;ments head valides). Il est donc impossible de placer une balise marker_model qui contient du texte simple
dans la section head. Pour placer une balise personnalis&eacute;e dans la section head, d&eacute;finissez le mod&egrave;le de contenu
de la balise comme head_model au lieu de marker_model. Utilisez marker_model pour les balises qui doivent
s'afficher en ligne (dans un &eacute;l&eacute;ment de niveau de bloc, comme p ou div, par exemple, dans un paragraphe).
N'utilisez pas ce mod&egrave;le si la balise doit &ecirc;tre affich&eacute;e seule dans un paragraphe, encadr&eacute;e par des sauts de ligne.
• script_model permet un emplacement libre de la balise entre les balises d'ouverture et de fermeture d'un
document. Lorsque Dreamweaver rencontre une balise de ce mod&egrave;le, il ignore totalement le contenu de la balise.
Utilisez cette balise pour le marquage (comme certaines balises ColdFusion) que Dreamweaver ne doit pas
analyser.
•
start_string sp&eacute;cifie un d&eacute;limiteur qui marque le d&eacute;but d'une balise d&eacute;limit&eacute;e par des cha&icirc;nes. Les balises
d&eacute;limit&eacute;es par des cha&icirc;nes peuvent &ecirc;tre pr&eacute;sentes en tout point du document pouvant contenir un commentaire.
Dreamweaver n'analyse pas les balises et ne d&eacute;code pas les entit&eacute;s ou URL comprises entre start_string et
end_string. Cet attribut est requis si end_string est sp&eacute;cifi&eacute;.
•
end_string sp&eacute;cifie un d&eacute;limiteur qui marque la fin d'une balise d&eacute;limit&eacute;e par une cha&icirc;ne. Cet attribut est requis
si start_string est sp&eacute;cifi&eacute;.
•
detect_in_attribute indique si les &eacute;l&eacute;ments contenus entre start_string et end_string (ou entre les balises
d'ouverture et de fermeture si ces cha&icirc;nes ne sont pas d&eacute;finies) doivent &ecirc;tre ignor&eacute;s m&ecirc;me si ces cha&icirc;nes
apparaissent dans les valeurs ou noms d'attributs. Vous devez g&eacute;n&eacute;ralement r&eacute;gler la valeur sur &quot;true&quot; pour les
balises d&eacute;limit&eacute;es par des cha&icirc;nes. La valeur par d&eacute;faut est &quot;false&quot;. Ainsi, les balises ASP sont parfois imbriqu&eacute;es
dans des valeurs d'attributs et contiennent parfois des guillemets (&quot;). Parce que la balise ASP sp&eacute;cifie
detect_in_attribute=&quot;true&quot;, Dreamweaver ne tient pas compte des balises ASP, y compris des guillemets
internes, lorsqu'elles sont imbriqu&eacute;es dans des valeurs d'attributs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
9
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
•
parse_attributes indique si les attributs de la balise doivent &ecirc;tre analys&eacute;s. Si la valeur d&eacute;finie est &quot;true&quot; (par
d&eacute;faut), Dreamweaver analyse les attributs. Si elle est d&eacute;finie sur &quot;false&quot;, Dreamweaver ignore tous les &eacute;l&eacute;ments
jusqu'au crochet situ&eacute; hors des guillemets. Par exemple, cet attribut doit &ecirc;tre r&eacute;gl&eacute; sur &quot;false&quot; pour les balises telles
que cfif (par exemple, &lt;cfif a is 1&gt;, que Dreamweaver ne peut pas analyser comme ensemble de paires nom
d'attribut/valeur).
•
icon sp&eacute;cifie le chemin et le nom de fichier de l'ic&ocirc;ne associ&eacute;e &agrave; la balise. Cet attribut est requis pour les balises
empty ainsi que pour les balises nonempty dont le contenu ne s'affiche pas dans la fen&ecirc;tre de document en mode
Cr&eacute;ation.
•
icon_width sp&eacute;cifie la largeur de l'ic&ocirc;ne en pixels.
•
icon_height sp&eacute;cifie la hauteur de l'ic&ocirc;ne en pixels.
•
equivalent_tag sp&eacute;cifie des &eacute;quivalents HTML simples pour certaines balises li&eacute;es &agrave; des formulaires ColdFusion.
Ceci ne doit pas &ecirc;tre utilis&eacute; avec d'autres balises.
•
is_visual indique si la balise a un impact visuel sur la page. Par exemple, la balise ColdFusion cfgraph ne sp&eacute;cifie
aucune valeur pour is_visual ; la valeur par d&eacute;faut &quot;true&quot; est donc appliqu&eacute;e. La valeur is_visual de la balise
ColdFusion cfset est d&eacute;finie sur false. La visibilit&eacute; des balises de marquage de serveur est contr&ocirc;l&eacute;e par la
cat&eacute;gorie El&eacute;ments invisibles dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. La visibilit&eacute; des balises de marquage de serveur
visuel peut &ecirc;tre d&eacute;finie ind&eacute;pendamment de celle des balises de marquage de serveur non visuel.
•
server_model, si sp&eacute;cifi&eacute;, indique que la balise tagspec s'applique uniquement aux pages appartenant au mod&egrave;le
de serveur sp&eacute;cifi&eacute;. Si server_model n'est pas sp&eacute;cifi&eacute;, la balise tagspec s'applique &agrave; toutes les pages. Par exemple,
les d&eacute;limiteurs des balises ASP et JSP sont identiques, mais la balise tagspec pour JSP sp&eacute;cifie un param&egrave;tre
server_model d&eacute;fini sur &quot;JSP&quot;. Par cons&eacute;quent, lorsque Dreamweaver rencontre ce code avec les d&eacute;limiteurs
ad&eacute;quats sur une page JSP, il affiche une ic&ocirc;ne JSP. Lorsque ce code est rencontr&eacute; sur une page autre qu'une page
JSP, une ic&ocirc;ne ASP s'affiche.
Contenu
Aucun (balise vide).
Conteneur
Aucun.
Exemple
&lt;tagspec tag_name=&quot;happy&quot; tag_type=&quot;nonempty&quot; render_contents=&quot;false&quot; content_model=
&quot;marker_model&quot; icon=&quot;happy.gif&quot; icon_width=&quot;18&quot; icon_height=&quot;18&quot;&gt;&lt;/tagspec&gt;
Affichage des balises personnalis&eacute;es dans le mode Cr&eacute;ation
L'affichage des balises personnalis&eacute;es dans la fen&ecirc;tre de document en mode Cr&eacute;ation d&eacute;pend des valeurs entr&eacute;es pour
les attributs tag_type et render_contents de la balise tagspec. Si la valeur de tag_type est &quot;empty&quot;, l'ic&ocirc;ne
sp&eacute;cifi&eacute;e dans l'attribut icon s'affiche. Si la valeur de tag_type est &quot;nonempty&quot; mais que la valeur de
render_contents est &quot;false&quot;, l'ic&ocirc;ne s'affiche de la m&ecirc;me fa&ccedil;on que pour une balise vide. L'exemple suivant indique
comment une instance de la balise happy d&eacute;finie ant&eacute;rieurement peut appara&icirc;tre dans le code HTML :
&lt;p&gt;This is a paragraph that includes an instance of the &lt;code&gt;happy&lt;/code&gt;
tag (&lt;happy&gt;Joe&lt;/happy&gt;).&lt;/p&gt;
Dans la mesure o&ugrave; render_contents est r&eacute;gl&eacute; sur &quot;false&quot; dans la sp&eacute;cification de balise, le contenu de la balise
happy (le mot Joe) ne s'affiche pas. Les balises de d&eacute;but et de fin et leur contenu sont alors remplac&eacute;s par une ic&ocirc;ne
unique.
Derni&egrave;re mise &agrave; jour le 22/6/2011
10
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Pour les balises nonempty dont la valeur render_contents est r&eacute;gl&eacute;e sur &quot;true&quot;, l'ic&ocirc;ne ne s'affiche pas en mode
Cr&eacute;ation. C'est le contenu ins&eacute;r&eacute; entre les balises d'ouverture et de fermeture qui s'affiche (par exemple, le texte
contenu entre les balises dans &lt;mytag&gt;Ceci est le contenu ins&eacute;r&eacute; entre les balises d'ouverture et de
fermeture&lt;/mytag&gt;). Si l'option Affichage &gt; El&eacute;ments invisibles est activ&eacute;e, le contenu est mis en surbrillance &agrave; l'aide
de balises propri&eacute;taires, comme sp&eacute;cifi&eacute; dans les pr&eacute;f&eacute;rences de surbrillance (la mise en surbrillance ne s'applique
qu'aux balises d&eacute;finies dans les fichiers de donn&eacute;es de balises).
Modification de la couleur de surbrillance des balises propri&eacute;taires
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Surbrillance.
2 Cliquez sur la zone de s&eacute;lection de couleurs de balises propri&eacute;taires pour afficher le s&eacute;lecteur de couleur.
3 S&eacute;lectionnez une couleur, puis cliquez sur OK pour fermer la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Pour plus
d'informations sur la s&eacute;lection d'une couleur, voir Utilisation de Dreamweaver.
Pr&eacute;vention de la correction de balises propri&eacute;taires
Dreamweaver corrige certains types d'erreurs dans le code HTML. Pour plus d'informations, voir Utilisation de
Dreamweaver. Par d&eacute;faut, Dreamweaver &eacute;vite toute modification du code HTML dans les fichiers portant certaines
extensions, comme .asp (ASP), .cfm (ColdFusion), .jsp (JSP) et .php (PHP). Ce param&egrave;tre est d&eacute;fini pour &eacute;viter toute
modification accidentelle du code contenu dans de telles balises non-HTML. Vous pouvez modifier le comportement
de correction de Dreamweaver par d&eacute;faut afin que le code HTML soit modifi&eacute; lors de l'ouverture de tels fichiers. Vous
pouvez &eacute;galement ajouter d'autres types de fichiers auxquels Dreamweaver n'apportera pas de modifications.
Dreamweaver encode certains caract&egrave;res sp&eacute;ciaux en les rempla&ccedil;ant par des valeurs num&eacute;riques lorsque vous les
entrez dans l'inspecteur Propri&eacute;t&eacute;s. Il est normalement pr&eacute;f&eacute;rable de laisser Dreamweaver effectuer cet encodage, car
les caract&egrave;res sp&eacute;ciaux seront ainsi reconnus par un nombre plus important de plates-formes et de navigateurs.
N&eacute;anmoins, cette op&eacute;ration d'encodage peut interf&eacute;rer avec les balises propri&eacute;taires. Vous pouvez donc modifier le
comportement de Dreamweaver concernant l'encodage des balises lorsque vous travaillez avec des fichiers comportant
des balises propri&eacute;taires.
Permettre &agrave; Dreamweaver de corriger le code HTML dans plus de types de fichiers
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Correction du code.
2 S&eacute;lectionnez l'une des options suivantes :
• Corriger les balises incorrectement imbriqu&eacute;es et non ferm&eacute;es
• Supprimer les balises de fermeture superflues
3 Effectuez l'une des op&eacute;rations suivantes :
• Supprimez une ou plusieurs extensions de la liste d'extensions dans l'option Ne jamais corriger le code : Dans
les fichiers avec extensions.
• D&eacute;sactivez l'option Ne jamais corriger le code : Dans les fichiers avec extensions. La d&eacute;sactivation de cette option
permet &agrave; Dreamweaver de r&eacute;&eacute;crire le code HTML dans tous types de fichiers.
Ajout de fichiers dans lesquels Dreamweaver ne doit pas apporter de corrections
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Correction du code.
2 S&eacute;lectionnez l'une des options suivantes :
• Corriger les balises incorrectement imbriqu&eacute;es et non ferm&eacute;es
• Supprimer les balises de fermeture superflues
Derni&egrave;re mise &agrave; jour le 22/6/2011
11
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
3 Assurez-vous que l'option Ne jamais corriger le code: Dans les fichiers avec extensions est s&eacute;lectionn&eacute;e. Ajoutez les
nouvelles extensions de fichiers &agrave; la liste dans la zone de texte.
Si le nouveau type de fichier ne s'affiche pas dans le menu contextuel Types de fichiers dans la bo&icirc;te de dialogue Fichier
&gt; Ouvrir, vous pouvez l'ajouter dans le fichier Configuration/Extensions.txt. Pour plus d'informations, voir
&laquo; Modification du type de fichier par d&eacute;faut &raquo; &agrave; la page 5.
D&eacute;sactivation des options d'encodage de Dreamweaver
1 Choisissez Edition &gt; Pr&eacute;f&eacute;rences, puis la cat&eacute;gorie Correction du code.
2 D&eacute;s&eacute;lectionnez les options de caract&egrave;res sp&eacute;ciaux de votre choix.
Pour plus d'informations sur les autres pr&eacute;f&eacute;rences de correction de code, voir Utilisation de Dreamweaver.
Personnalisation de Dreamweaver dans un
environnement multi-utilisateur
Vous pouvez personnaliser Dreamweaver sous un syst&egrave;me d'exploitation multi-utilisateur tel que Microsoft&reg;
Windows&reg; XP, Windows Vista ou Mac OS&reg; X. Aucune configuration personnalis&eacute;e de Dreamweaver ne peut affecter
celle d'un autre utilisateur. Lorsque vous ex&eacute;cutez pour la premi&egrave;re fois Dreamweaver sous un syst&egrave;me d'exploitation
multi-utilisateur, Dreamweaver copie les fichiers de configuration dans un dossier Configuration utilisateur. Lorsque
vous personnalisez Dreamweaver &agrave; l'aide des panneaux et bo&icirc;tes de dialogue, l'application modifie vos fichiers de
configuration utilisateur au lieu de modifier les fichiers de configuration de Dreamweaver. Pour personnaliser
Dreamweaver dans un environnement multi-utilisateur, modifiez le fichier de configuration utilisateur appropri&eacute; au
lieu de modifier les fichiers de configuration de Dreamweaver. Pour apporter des modifications qui influeront la
plupart des utilisateurs, modifiez un fichier Configuration de Dreamweaver. Toutefois, les utilisateurs auxquels
correspondent d&eacute;j&agrave; des fichiers de configuration utilisateur ne seront pas concern&eacute;s par ces modifications. Pour
apporter des modifications qui influeront sur tous les utilisateurs, cr&eacute;ez une extension et installez-la &agrave; l'aide
d'Extension Manager.
Remarque : Dans les anciens syst&egrave;mes d'exploitation multi-utilisateur (Windows 98, Windows ME et Mac OS 9.x), tous
les utilisateurs partagent le m&ecirc;me ensemble de fichiers de configuration de Dreamweaver.
L'emplacement du dossier Configuration de l'utilisateur d&eacute;pend de la plate-forme employ&eacute;e par l'utilisateur.
Les plates-formes Windows XP utilisent l'emplacement suivant :
disque dur:\Documents and Settings\nom_utilisateur\Application Data\Adobe\Dreamweaver CS5\Configuration
Remarque : Il se peut que ce dossier se trouve dans un dossier cach&eacute;.
Les plates-formes Windows Vista utilisent l'emplacement suivant :
disque dur: \Users\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver CS5\Configuration
Les plates-formes MacOS X utilisent l'emplacement suivant :
disque dur: \Users/nom d'utilisateur/Library/Application Support/Adobe/Dreamweaver CS5/Configuration
Remarque : Pour installer des extensions accessibles &agrave; tous les utilisateurs dans un syst&egrave;me d'exploitation multiutilisateur, vous devez disposer des droits de niveau Administrateur (Windows) ou root (MacOS X).
Derni&egrave;re mise &agrave; jour le 22/6/2011
12
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Lorsque vous ex&eacute;cutez Dreamweaver pour la premi&egrave;re fois, il ne copie que certains fichiers de configuration dans votre
dossier Configuration utilisateur. (les fichiers copi&eacute;s sont sp&eacute;cifi&eacute;s dans le fichier version.xml dans le dossier
Configuration). Lorsque vous personnalisez Dreamweaver depuis l'application, Dreamweaver copie les fichiers de
configuration dans votre dossier Configuration utilisateur. Par exemple, Dreamweaver copie les fichiers lorsque vous
modifiez l'un des fragments de code pr&eacute;d&eacute;finis dans le panneau Fragments de code. La version d'un fichier pr&eacute;sente
dans le dossier Configuration utilisateur prime toujours sur celle du dossier Configuration de Dreamweaver. Pour
personnaliser un fichier de configuration, il doit se trouver dans le dossier Configuration de l'utilisateur. Si
Dreamweaver n'a pas d&eacute;j&agrave; copi&eacute; le fichier, copiez le fichier dans le dossier Configuration de l'utilisateur puis modifiez-le.
Suppression de fichiers de configuration dans un environnement multiutilisateur
Lors de toute op&eacute;ration engendrant l'effacement d'un fichier de configuration dans Dreamweaver sous un syst&egrave;me
d'exploitation multi-utilisateur (par exemple, la suppression d'un fragment de code pr&eacute;d&eacute;fini dans le panneau
Fragments de code), Dreamweaver cr&eacute;e un fichier nomm&eacute; mm_deleted_files.xml dans votre dossier Configuration.
Lorsqu'un fichier est r&eacute;pertori&eacute; dans le fichier mm_deleted_files.xml, Dreamweaver se comporte comme si le fichier
n'existait plus.
D&eacute;sactivation d'un fichier de configuration
1 Quittez Dreamweaver.
2 A l'aide d'un &eacute;diteur de texte, modifiez le fichier mm_deleted_files.xml dans votre dossier de configuration
utilisateur, ajoutez une balise d'&eacute;l&eacute;ment dans ce fichier en indiquant le chemin (relatif au dossier Configuration de
Dreamweaver) du fichier de configuration &agrave; d&eacute;sactiver.
Remarque : Ne modifiez pas le fichier mm_deleted_files.xml dans Dreamweaver.
3 Enregistrez et fermez mm_deleted_files.xml.
4 Lancez &agrave; nouveau Dreamweaver.
Syntaxe de la balise mm_deleted_files.xml
Le fichier mm_deleted_files.xml contient une liste structur&eacute;e d'&eacute;l&eacute;ments qui indiquent les fichiers de configuration
que Dreamweaver doit ignorer. Ces &eacute;l&eacute;ments sont sp&eacute;cifi&eacute;s par des balises XML, que vous pouvez modifier dans un
&eacute;diteur de texte.
Dans les descriptions de syntaxe des balises mm_deleted_files.xml ci-apr&egrave;s, les attributs facultatifs dans les listes
d'attributs sont indiqu&eacute;s par des accolades({}). Les attributs qui ne sont pas signal&eacute;s ainsi sont consid&eacute;r&eacute;s comme
obligatoires.
&lt;deleteditems&gt;
Description
Balise de conteneur renfermant une liste d'&eacute;l&eacute;ments &agrave; consid&eacute;rer comme supprim&eacute;s par Dreamweaver.
Attributs
Aucun.
Contenu
Cette balise doit contenir une ou plusieurs balises item.
Derni&egrave;re mise &agrave; jour le 22/6/2011
13
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Conteneur
Aucun.
Exemple
&lt;deleteditems&gt;
&lt;!-- item tags here --&gt;
&lt;/deleteditems&gt;
&lt;item&gt;
Description
D&eacute;finit un fichier de configuration &agrave; ignorer par Dreamweaver.
Attributs
name
L'attribut name sp&eacute;cifie le chemin du fichier de configuration par rapport au dossier Configuration. Sous Windows,
utilisez une barre oblique invers&eacute;e (\) pour s&eacute;parer les &eacute;l&eacute;ments constitutifs du chemin ; sur Macintosh&reg;, utilisez deux
points (:).
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit se trouver dans une balise deleteditems.
Exemple
&lt;item name=&quot;snippets\headers\5columnwith4links.csn&quot; /&gt;
R&eacute;installation et d&eacute;sinstallation de Dreamweaver dans un environnement
multi-utilisateur
Apr&egrave;s avoir install&eacute; Dreamweaver, si vous souhaitez r&eacute;installer le programme ou le mettre &agrave; jour, Dreamweaver
sauvegarde automatiquement une copie des fichiers de configuration utilisateur existants. Vos param&egrave;tres personnels
resteront donc accessibles. Lors de la d&eacute;sinstallation de Dreamweaver dans un environnement multi-utilisateur
(op&eacute;ration possible uniquement pour les utilisateurs disposant de privil&egrave;ges administratifs), Dreamweaver peut
supprimer tous les dossiers de configuration utilisateur &agrave; votre demande.
Modification des mappages FTP
Le fichier FTPExtensionMap.txt (Windows) et le fichier FTPExtensionMapMac.txt (Macintosh) mappent les
extensions de nom de fichier en modes de transfert FTP (ASCII ou BINAIRE).
Chaque ligne dans chacun des deux fichiers comprend une extension de nom de fichier (par exemple, GIF) ainsi que
le mot ASCII ou le mot BINARY (binaire) pour indiquer quel mode utiliser lors du transfert d'un fichier comportant
cette extension. Sur Macintosh, chaque ligne comprend &eacute;galement un code cr&eacute;ateur (tel que DmWr) et un type de
fichier (tel que TEXT). Lorsque vous t&eacute;l&eacute;chargez un fichier portant l'extension donn&eacute;e, Dreamweaver lui assigne alors
le cr&eacute;ateur et le type de fichier d&eacute;sign&eacute;s.
Derni&egrave;re mise &agrave; jour le 22/6/2011
14
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Si un fichier que vous transf&eacute;rez ne comporte pas d'extension de nom de fichier, Dreamweaver utilise le mode de
transfert BINAIRE.
Remarque : Dreamweaver ne peut pas transf&eacute;rer de fichiers en mode Macbinary. Si vous devez transf&eacute;rer des fichiers en
mode Macbinary, vous devez utiliser un autre client FTP.
Les exemples suivants illustrent une ligne (du fichier Macintosh) indiquant que les fichiers portant l'extension .html
doivent &ecirc;tre transf&eacute;r&eacute;s en mode ASCII :
HTML DmWr TEXT ASCII
Dans le fichier FTPExtensionMap.txt et le fichier FTPExtensionMapMac.txt (Macintosh), tous les &eacute;l&eacute;ments plac&eacute;s sur
une m&ecirc;me ligne sont s&eacute;par&eacute;s par des tabulations. L'extension et le mode de transfert sont &eacute;crits en majuscules.
Pour modifier un param&egrave;tre par d&eacute;faut, modifiez le fichier dans un &eacute;diteur de texte.
Ajout d'informations relatives &agrave; une nouvelle extension de nom de fichier
1 Modifiez le fichier extension-map dans un &eacute;diteur de texte.
2 Sur une ligne vierge, entrez l'extension de nom de fichier (en majuscules), puis appuyez sur la touche de tabulation.
3 Sur Macintosh, ajoutez le code cr&eacute;ateur, un caract&egrave;re de tabulation, puis le type de fichier suivi d'un autre caract&egrave;re
de tabulation.
4 Choisissez entre ASCII ou BINARY pour sp&eacute;cifier un mode de transfert FTP.
5 Enregistrez le fichier.
Types de documents extensibles dans Dreamweaver
XML est dot&eacute; d'un syst&egrave;me performant pour d&eacute;finir des documents et des structures de donn&eacute;es complexes.
Dreamweaver organise selon plusieurs sch&eacute;mas XML les informations sur les comportements de serveur, les balises et
les bo&icirc;tes de dialogue de balises, les composants, les types de documents et des r&eacute;f&eacute;rences.
Lorsque vous cr&eacute;ez et utilisez des extensions dans Dreamweaver, vous pouvez souvent cr&eacute;er ou modifier les fichiers
XML existants afin de g&eacute;rer les donn&eacute;es utilis&eacute;es par ces extensions. Dans la plupart des cas, vous pouvez copier un
fichier existant du sous-dossier appropri&eacute; du dossier Configuration vers le dossier &agrave; utiliser comme mod&egrave;le.
Fichiers de d&eacute;finition de type de document
Le concept de type de document s'articule autour d'un composant central, &agrave; savoir le fichier de d&eacute;finition de type de
document. Vous pouvez &ecirc;tre en pr&eacute;sence de plusieurs fichiers de d&eacute;finition ; le cas &eacute;ch&eacute;ant, ils r&eacute;sident tous dans le
dossier Configuration/DocumentTypes. Chaque fichier de d&eacute;finition contient des informations concernant au moins
un type de document. Des informations essentielles, telles que le mod&egrave;le de serveur, le style de codage par couleurs, les
descriptions, etc., sont d&eacute;crits pour chacun de ces types de documents.
Remarque : Attention : il ne faut pas confondre fichiers de d&eacute;finition de type de document de Dreamweaver et d&eacute;finition
de type de document XML (DTD). Les fichiers de d&eacute;finition de type de document de Dreamweaver contiennent un
ensemble d'&eacute;l&eacute;ments documenttype, chacun d'entre eux d&eacute;finissant une collection pr&eacute;d&eacute;finie de balises et d'attributs
associ&eacute;s &agrave; un type de document. Au lancement, Dreamweaver analyse les fichiers de d&eacute;finition de type de document et
place en m&eacute;moire une base de donn&eacute;es d'informations concernant tous les types de documents d&eacute;finis.
Dreamweaver fournit un fichier de d&eacute;finition de type de document initial. Ce fichier, nomm&eacute;
MMDocumentTypes.xml, contient les d&eacute;finitions de type de document fournies par Adobe :
Derni&egrave;re mise &agrave; jour le 22/6/2011
15
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Type de document
Mod&egrave;le de serveur
Type interne
Extensions de fichier
ASP.NET C#
ASP.NET-Csharp
Dynamique
aspx, ascx
ASP.NET VB
ASP.NET-VB
Dynamique
aspx, ascx
ASP JavaScript
ASP-JS
Dynamique
asp
ASP VBScript
ASP-VB
Dynamique
asp
ColdFusion
ColdFusion
Dynamique
cfm, cfml
Dynamique
cfc
Composant ColdFusion
JSP
JSP
Dynamique
jsp
PHP
PHP
Dynamique
php, php3
El&eacute;ment de biblioth&egrave;que
Extension DW
lbi
Mod&egrave;le ASP.NET C#
Mod&egrave;le DW
axcs.dwt
Mod&egrave;le ASP.NET VB
Mod&egrave;le DW
axvb.dwt
Mod&egrave;le ASP JavaScript
Mod&egrave;le DW
aspjs.dwt
Mod&egrave;le ASP VBScript
Mod&egrave;le DW
aspvb.dwt
Mod&egrave;le ColdFusion
Mod&egrave;le DW
cfm.dwt
Mod&egrave;le HTML
Mod&egrave;le DW
dwt
Mod&egrave;le JSP
Mod&egrave;le DW
jsp.dwt
Mod&egrave;le PHP
Mod&egrave;le DW
php.dwt
HTML
HTML
htm, html
ActionScript
Texte
as
CSharp
Texte
cs
CSS
Texte
CSS
Java
Texte
java
JavaScript
Texte
js
VB
Texte
vb
VBScript
Texte
vbs
Texte
Texte
txt
EDML
XML
edml
TLD
XML
tld
VTML
XML
vtm, vtml
WML
XML
wml
XML
XML
xml
Mod&egrave;le de serveur
ant&eacute;rieur
UltraDev 4 ColdFusion
Si vous avez besoin de cr&eacute;er un nouveau type de document, vous pouvez soit ajouter votre entr&eacute;e dans le fichier de
d&eacute;finition de document fourni par Adobe (MMDocumentTypes.xml), soit ajouter votre propre fichier de d&eacute;finition
dans le dossier Configuration/DocumentTypes.
Derni&egrave;re mise &agrave; jour le 22/6/2011
16
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Remarque : Le sous-dossier NewDocuments r&eacute;sidant dans le dossier Configuration/DocumentTypes contient des pages
par d&eacute;faut (mod&egrave;les) propres &agrave; chaque type de document.
Structure des fichiers de d&eacute;finition de type de document
L'exemple suivant repr&eacute;sente un fichier classique de d&eacute;finition de type de document :
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;documenttypes
xmlns:MMString=&quot;http://www.adobe.com/schemes/data/string/&quot;&gt;
&lt;documenttype
id=&quot;dt-ASP-JS&quot;
servermodel=&quot;ASP-JS&quot;
internaltype=&quot;Dynamic&quot;
winfileextension=&quot;asp,htm, html&quot;
macfileextension=&quot;asp, html&quot;
previewfile=&quot;default_aspjs_preview.htm&quot;
file=&quot;default_aspjs.htm&quot;
priorversionservermodel=&quot;UD4-ASP-JS&quot; &gt;
&lt;title&gt;
&lt;loadString id=&quot;mmdocumenttypes_0title&quot; /&gt;
&lt;/title&gt;
&lt;description&gt;
&lt;loadString id=&quot;mmdocumenttypes_0descr&quot; /&gt;
&lt;/description&gt;
&lt;/documenttype&gt;
...
&lt;/documenttypes&gt;
Remarque : Le codage par couleurs des types de documents est d&eacute;fini dans les fichiers XML qui r&eacute;sident dans le dossier
Configuration/CodeColoring.
Dans l'exemple pr&eacute;c&eacute;dent, l'&eacute;l&eacute;ment loadstring identifie les cha&icirc;nes localis&eacute;es que Dreamweaver utilise pour le titre
et la description des documents de type ASP-JS. Pour plus d'informations sur les cha&icirc;nes localis&eacute;es, voir &laquo; Fourniture
de cha&icirc;nes localis&eacute;es &raquo; &agrave; la page 21.
Le tableau ci-dessous recense les balises et les attributs autoris&eacute;s dans un fichier de d&eacute;finition de type de document.
Derni&egrave;re mise &agrave; jour le 22/6/2011
17
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoire
Description
Oui
Nœud parent.
id
Oui
Identificateur unique pour tous les fichiers de
d&eacute;finition de type de document.
servermodel
Non
Sp&eacute;cifie le mod&egrave;le de serveur associ&eacute; (casse prise en
compte). Les valeurs suivantes sont valides par d&eacute;faut
:
documenttype
(root)
ASP.NET C#
ASP.NET VB
ASP VBScript
ASP JavaScript
ColdFusion
JSP
PHP MySQL
Un appel des fonctions
getServerModelDisplayName() renvoie ces
noms. Les fichiers d'impl&eacute;mentation des mod&egrave;les de
serveur se trouvent dans le dossier
Configuration/ServerModels.
Les d&eacute;veloppeurs d'extensions peuvent cr&eacute;er de
nouveaux mod&egrave;les de serveur en compl&eacute;tant cette
liste.
internaltype
Oui
Classification g&eacute;n&eacute;rale des modes de traitement des
fichiers dans Dreamweaver. Le type interne
d&eacute;termine si le mode Cr&eacute;ation est activ&eacute; pour ce
document et traite des cas particuliers tels que les
extensions ou les mod&egrave;les Dreamweaver.
Les valeurs suivantes sont possibles :
Dynamique
DWExtension (zones d'affichage sp&eacute;ciales)
DWTemplate (zones d'affichage sp&eacute;ciales)
HTML
HTML4
Text (mode Code uniquement)
XHTML1
XML (mode Code uniquement)
Tous les types de documents li&eacute;s au serveur de
mod&egrave;le sont associ&eacute;s &agrave; la valeur Dynamic. Les fichiers
HTML sont associ&eacute;s &agrave; HTML. Les fichiers de script
(notamment les fichiers .css, .js, .vb et .cs) sont associ&eacute;s
&agrave; Text.
Si internaltype vaut DWTemplate, d&eacute;finissez la
valeur dynamicid. Dans le cas contraire, le panneau
Comportement de serveur ou Liaisons ne reconna&icirc;t
pas le nouveau mod&egrave;le vierge cr&eacute;&eacute; par la bo&icirc;te de
dialogue Nouveau document. Les instances de ce
mod&egrave;le sont des mod&egrave;les HTML.
Derni&egrave;re mise &agrave; jour le 22/6/2011
18
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoire
Description
dynamicid
Non
R&eacute;f&eacute;rence &agrave; l'identificateur unique d'un type de
document dynamique. Cet attribut n'est pertinent
que lorsque internaltype correspond &agrave;
DWTemplate. Il vous permet d'associer un mod&egrave;le
dynamique avec un type de document dynamique.
winfileextension
Oui
Extension de nom de fichier associ&eacute;e au type de
document sous Windows. Utilisez une liste s&eacute;par&eacute;e
par des virgules pour sp&eacute;cifier plusieurs extensions. La
premi&egrave;re extension de cette liste correspond &agrave;
l'extension utilis&eacute;e par Dreamweaver lorsque
l'utilisateur enregistre un document de type
documenttype.
Lorsque deux types de documents non associ&eacute;s &agrave; un
mod&egrave;le de serveur portent la m&ecirc;me extension de
fichier, Dreamweaver reconna&icirc;t le premier comme le
type de document associ&eacute; &agrave; l'extension.
macfileextension
Oui
Extension de nom de fichier associ&eacute;e au type de
document sur Macintosh. Utilisez une liste s&eacute;par&eacute;e par
des virgules pour sp&eacute;cifier plusieurs extensions. La
premi&egrave;re extension de cette liste correspond &agrave;
l'extension utilis&eacute;e par Dreamweaver lorsque
l'utilisateur enregistre un document de type
documenttype.
Lorsque deux types de documents non associ&eacute;s &agrave; un
mod&egrave;le de serveur portent la m&ecirc;me extension de
fichier, Dreamweaver reconna&icirc;t le premier comme le
type de document associ&eacute; &agrave; l'extension.
previewfile
Non
Fichier rendu dans la zone Aper&ccedil;u de la bo&icirc;te de
dialogue Nouveau document.
file
Oui
Le fichier situ&eacute; dans le dossier
DocumentTypes/NewDocuments contenant le
contenu du mod&egrave;le des nouveaux documents de type
documenttype.
Derni&egrave;re mise &agrave; jour le 22/6/2011
19
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoire
Description
priorversionservermodel
Non
Si le mod&egrave;le serveur de ce document poss&egrave;de un
&eacute;quivalent Dreamweaver UltraDev 4, sp&eacute;cifiez le nom
de l'ancienne version du mod&egrave;le serveur.
UltraDev4 ColdFusion est un mod&egrave;le de serveur
ant&eacute;rieur valide.
Oui
title
(sous-balise)
Cha&icirc;ne qui appara&icirc;t comme &eacute;l&eacute;ment de cat&eacute;gorie
sous la section Document vierge de la bo&icirc;te de
dialogue Nouveau document. Vous pouvez ins&eacute;rer
cette cha&icirc;ne directement dans le fichier de d&eacute;finition
ou pointer vers elle indirectement pour la localiser.
Pour plus d'informations sur la localisation de cette
cha&icirc;ne, voir &laquo; Fourniture de cha&icirc;nes localis&eacute;es &raquo; &agrave; la
page 21.
La mise en forme n'&eacute;tant pas autoris&eacute;e, il est
impossible de sp&eacute;cifier les balises HTML.
Non
description
(sous-balise)
Cha&icirc;ne de description du type de document. Vous
pouvez ins&eacute;rer cette cha&icirc;ne directement dans le
fichier de d&eacute;finition ou pointer vers elle indirectement
pour la localiser. Pour plus d'informations sur la
localisation de cette cha&icirc;ne, voir &laquo; Fourniture de
cha&icirc;nes localis&eacute;es &raquo; &agrave; la page 21.
La mise en forme &eacute;tant autoris&eacute;e, il est possible de
sp&eacute;cifier les balises HTML.
Remarque : Lorsque l'utilisateur enregistre un nouveau document, Dreamweaver examine la liste des extensions de la
plate-forme actuelle qui sont associ&eacute;es avec le type de document (par exemple winfileextension et
macfileextension). Dreamweaver s&eacute;lectionne la premi&egrave;re cha&icirc;ne de la liste pour l'utiliser comme l'extension de nom
de fichier par d&eacute;faut. Pour changer cette extension de nom de fichier par d&eacute;faut, r&eacute;organisez les extensions de la liste
s&eacute;par&eacute;es par des virgules de sorte que la nouvelle extension par d&eacute;faut soit la premi&egrave;re entr&eacute;e de la liste.
Au lancement, Dreamweaver lit tous les fichiers de d&eacute;finition de type de document et cr&eacute;e une liste des types de
documents valides. Dreamweaver traite toutes les entr&eacute;es des fichiers de d&eacute;finition pour lesquels des mod&egrave;les de
serveur inexistants sont utilis&eacute;s comme types de documents non serveur de mod&egrave;le. Dreamweaver ignore les entr&eacute;es
dont le contenu est incorrect ou dont les ID ne sont pas uniques.
Si les fichiers de d&eacute;finition de type de document sont endommag&eacute;s ou ne sont pas disponibles dans le dossier
Configuration/DocumentTypes, Dreamweaver se ferme en affichant un message d'erreur.
D&eacute;finition de mod&egrave;les dynamiques
Vous pouvez cr&eacute;er des mod&egrave;les d'apr&egrave;s des types de documents dynamiques, appel&eacute;s des mod&egrave;les dynamiques. La
notion de mod&egrave;le dynamique repose sur les deux &eacute;l&eacute;ments fondamentaux suivants :
• La valeur de l'attribut internaltype d'un nouveau type de document doit &ecirc;tre DWTemplate.
• L'attribut dynamicid doit &ecirc;tre d&eacute;fini et sa valeur doit faire r&eacute;f&eacute;rence &agrave; l'identificateur d'un type de document
existant.
L'exemple suivant d&eacute;finit un type de document dynamique :
Derni&egrave;re mise &agrave; jour le 22/6/2011
20
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
&lt;documenttype
id=&quot;PHP_MySQL&quot;
servermodel=&quot;PHP MySQL&quot;
internaltype=&quot;Dynamic&quot;
winfileextension=&quot;php,php3&quot;
macfileextension=&quot;php,php3&quot;
file=&quot;Default.php&quot;&gt;
&lt;title&gt;PHP&lt;/title&gt;
&lt;description&gt;&lt;![CDATA[PHP document]]&gt;&lt;/description&gt;
&lt;/documenttype&gt;
Vous pouvez d&eacute;sormais d&eacute;finir le mod&egrave;le dynamique suivant, bas&eacute; sur ce type de document PHP_MySQL :
&lt;documenttype
id=&quot;DWTemplate_PHP&quot;
internaltype=&quot;DWTemplate&quot;
dynamicid=&quot;PHP_MySQL&quot;
winfileextension=&quot;php.dwt&quot;
macfileextension=&quot;php.dwt&quot;
file=&quot;Default.php.dwt&quot;&gt;
&lt;title&gt;PHP Template&lt;/title&gt;
&lt;description&gt;&lt;![CDATA[Dreamweaver PHP Template document]]&gt;&lt;/description&gt;
&lt;/documenttype&gt;
Lorsqu'un utilisateur de Dreamweaver cr&eacute;e un nouveau mod&egrave;le vierge de type DWTemplate_PHP, Dreamweaver lui
permet de cr&eacute;er des comportements de serveur PHP dans le fichier. En outre, lorsque cet utilisateur cr&eacute;e des instances
du nouveau mod&egrave;le, il peut leur d&eacute;finir aussi des comportements de serveur PHP.
Dans l'exemple pr&eacute;c&eacute;dent, o&ugrave; l'utilisateur enregistre le mod&egrave;le, Dreamweaver ajoute automatiquement l'extension
.php.dwt au fichier. De m&ecirc;me, lorsque cet utilisateur enregistre une instance du mod&egrave;le, le fichier re&ccedil;oit l'extension
.php.
Ajout et modification d'extensions de documents et de types de fichiers
Par d&eacute;faut, Dreamweaver affiche tous les types de fichiers reconnus dans la bo&icirc;te de dialogue Fichier &gt; Ouvrir. Apr&egrave;s
avoir cr&eacute;&eacute; un type de document, le d&eacute;veloppeur d'une extension doit mettre &agrave; jour le fichier Extensions.txt appropri&eacute;.
Il se peut que l'utilisateur emploie un syst&egrave;me multi-utilisateur (comme Windows XP, Windows Vista ou MacOS X).
Dans de tel cas, il existe un autre fichier Extensions.txt dans le dossier Configuration de l'utilisateur. L'utilisateur doit
mettre &agrave; jour le fichier Extensions.txt, car il s'agit de l'instance recherch&eacute;e et analys&eacute;e par Dreamweaver.
L'emplacement du dossier Configuration de l'utilisateur d&eacute;pend de la plate-forme employ&eacute;e par l'utilisateur.
La plate-forme Windows XP emploie l'emplacement suivant :
disque dur:\Documents and Settings\nom_utilisateur\Application Data\Adobe\Dreamweaver CS5\Configuration
Remarque : Il se peut que ce dossier se trouve dans un dossier cach&eacute;.
La plate-forme Windows Vista emploie l'emplacement suivant :
disque dur:\Users\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver CS5\Configuration
La plate-forme MacOS X utilise l'emplacement suivant :
disque dur:\Users/nom d'utilisateur/Library/Application Support/Adobe/Dreamweaver CS5/Configuration
Si Dreamweaver ne parvient pas &agrave; localiser le fichier Extensions.txt dans le dossier Configuration de l'utilisateur,
Dreamweaver le recherche dans son propre dossier Configuration.
Derni&egrave;re mise &agrave; jour le 22/6/2011
21
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Remarque : Sur une plate-forme multi-utilisateur, Dreamweaver analyse la copie du fichier Extensions.txt dans le
dossier Configuration de l'utilisateur, et pas celle qui se trouve dans son propre dossier Configuration. D&egrave;s lors, si vous
modifiez la copie du fichier Extensions.txt qui se trouve dans le dossier Configuration de Dreamweaver, Dreamweaver
n'est pas inform&eacute; de ces modifications.
Pour cr&eacute;er une extension de document, vous avez le choix entre ajouter la nouvelle extension &agrave; un type de document
existant ou cr&eacute;er un nouveau type de document.
Ajout d'une nouvelle extension &agrave; un type de document existant
1 Modifiez le fichier MMDocumentTypes.xml.
2 Ajoutez la nouvelle extension aux attributs winfileextension et macfileextension du type de document
existant.
Ajout d'un nouveau type de document
1 Cr&eacute;ez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un &eacute;diteur de texte.
3 Ajoutez une nouvelle ligne pour chaque nouveau type de fichier. Entrez, en majuscules, les extensions de noms de
fichiers compatibles avec le nouveau type de fichier et s&eacute;parez-les par des virgules. Ajoutez ensuite deux points et
une br&egrave;ve description &agrave; afficher dans le menu d&eacute;roulant des types de fichiers qui s'affichent dans la bo&icirc;te de dialogue
Fichier &gt; Ouvrir.
Par exemple, pour les fichiers JPEG, entrez JPG,JPEG,JFIF:Fichiers image JPEG
4 Enregistrez le fichier Extensions.txt.
5 Red&eacute;marrez Dreamweaver.
Pour observer les modifications, choisissez Fichier &gt; Ouvrir, puis cliquez sur le menu d&eacute;roulant des types de fichiers.
Modification du type de fichier indiqu&eacute; par d&eacute;faut dans Fichier &gt; Ouvrir de Dreamweaver
1 Cr&eacute;ez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un &eacute;diteur de texte.
3 Coupez la ligne correspondant &agrave; la nouvelle valeur par d&eacute;faut. Collez-la ensuite au d&eacute;but du fichier, de fa&ccedil;on &agrave; ce
qu'elle devienne sa premi&egrave;re ligne.
4 Enregistrez le fichier Extensions.txt.
5 Red&eacute;marrez Dreamweaver.
Pour observer les modifications, choisissez Fichier &gt; Ouvrir, puis cliquez sur le menu d&eacute;roulant des types de fichiers.
Voir aussi
http://www.adobe.com/go/16410_fr
Fourniture de cha&icirc;nes localis&eacute;es
Dans un fichier de d&eacute;finition de type de document, les sous-balises &lt;title&gt; et &lt;description&gt; d&eacute;signent le titre
d'affichage et la description du type de document. Vous pouvez utiliser la directive MMString:loadstring dans les
sous-balises comme espace r&eacute;serv&eacute; pour les cha&icirc;nes localis&eacute;es de ces deux sous-balises. Ce proc&eacute;d&eacute;, similaire &agrave; la
programmation de scripts c&ocirc;t&eacute; serveur, permet de sp&eacute;cifier l'utilisation d'une cha&icirc;ne particuli&egrave;re dans votre page en
utilisant un identificateur de cha&icirc;ne comme espace r&eacute;serv&eacute;. Cet espace r&eacute;serv&eacute; accepte les balises sp&eacute;ciales ou les
attributs de balises dont la valeur est remplac&eacute;e.
Derni&egrave;re mise &agrave; jour le 22/6/2011
22
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Fourniture de cha&icirc;nes localis&eacute;es
1 Placez l'instruction suivante en t&ecirc;te du fichier de d&eacute;finition de type de document :
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
2 D&eacute;clarez les espaces de nom MMString dans la balise &lt;documenttypes&gt; :
&lt;documenttypes
xmlns:MMString=&quot;http://www.adobe.com/schemes/data/string/&quot;&gt;
3 A l'emplacement du fichier de d&eacute;finition de type de document auquel ins&eacute;rer une cha&icirc;ne localis&eacute;e, utilisez la
directive MMString:loadstring pour d&eacute;finir un espace r&eacute;serv&eacute; &agrave; cette cha&icirc;ne. Vous pouvez sp&eacute;cifier cet espace
r&eacute;serv&eacute; en proc&eacute;dant d'une des fa&ccedil;ons suivantes :
&lt;description&gt;
&lt;loadstring&gt;myJSPDocType/Description&lt;/loadstring&gt;
&lt;/description&gt;
ou
&lt;description&gt;
&lt;loadstring id=&quot;myJSPDocType/Description&quot; /&gt;
&lt;/description&gt;
Dans ces exemples, myJSPDocType/Description est un identificateur de cha&icirc;ne unique faisant office d'espace
r&eacute;serv&eacute; &agrave; la cha&icirc;ne localis&eacute;e. La cha&icirc;ne localis&eacute;e est d&eacute;finie &agrave; l'&eacute;tape suivante.
4 Dans le dossier Configuration/Strings, cr&eacute;ez un fichier XML (ou modifiez un fichier existant) d&eacute;finissant la cha&icirc;ne
localis&eacute;e. Par exemple, lorsque le code suivant est ins&eacute;r&eacute; dans le fichier Configuration/Strings/strings.xml, il d&eacute;finit
la cha&icirc;ne myJSPDocType/Description :
&lt;strings&gt;
...
&lt;string id=&quot;myJSPDocType/Description&quot;
value=
&quot;&lt;![CDATA[JavaServer&amp;nbsp;Page with &lt;em&gt;special&lt;/em&gt; features]]&gt;&quot;
/&gt;
...
&lt;/strings&gt;
Remarque : Les identificateurs de cha&icirc;ne, tels que myJSPDocType/Description dans l'exemple pr&eacute;c&eacute;dent, doivent &ecirc;tre
uniques dans l'application Dreamweaver. Au lancement, Dreamweaver analyse tous les fichiers XML du dossier
Configuration/Strings et charge ces cha&icirc;nes uniques.
R&egrave;gles d'utilisation des fichiers de d&eacute;finition de type de document
Dreamweaver autorise les types de documents associ&eacute;s &agrave; un mod&egrave;le de serveur &agrave; partager des extensions de fichiers.
Par exemple, ASP-JS et ASP-VB peuvent adopter l'extension .asp. Pour savoir quel mod&egrave;le de serveur pr&eacute;vaut, voir
&laquo; canRecognizeDocument() &raquo; &agrave; la page 335.
Dreamweaver n'autorise pas les types de documents non associ&eacute;s &agrave; un mod&egrave;le de serveur &agrave; partager des extensions de
fichiers.
Si une extension de fichier est revendiqu&eacute;e par deux types de documents alors qu'un type est associ&eacute; &agrave; un mod&egrave;le de
serveur et que l'autre ne l'est pas, ce dernier pr&eacute;vaut. Supposons que vous ayez d&eacute;fini un type de document appel&eacute; SAM,
non associ&eacute; &agrave; un mod&egrave;le de serveur et portant l'extension de fichier.sam, et que vous ajoutiez cette extension au type
de document ASP-JS. Lorsqu'un utilisateur ouvre un fichier portant l'extension.sam dans Dreamweaver, le programme
lui affecte le type de document SAM, et non pas le type ASP-JS.
Derni&egrave;re mise &agrave; jour le 22/6/2011
23
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
D&eacute;finition des d&eacute;clarations de document
Dreamweaver permet de d&eacute;finir des DTD pour les documents &agrave; l'aide du fichier MMDocumentTypeDeclarations.xml
qui se trouve dans le dossier Configuration/DocumentTypes. La liste de DTD disponibles et des documents auxquels
elles s'appliquent est d&eacute;finie dans le fichier MMDocumentTypeDeclarations.xml.
Ouverture d'un document dans Dreamweaver
Lorsqu'un utilisateur ouvre un document, Dreamweaver identifie en plusieurs &eacute;tapes le type de document d'apr&egrave;s son
extension de fichier.
Si Dreamweaver d&eacute;tecte un type de document unique, il l'utilise et charge le mod&egrave;le de serveur associ&eacute; (le cas &eacute;ch&eacute;ant)
pour le document que l'utilisateur ouvre. Si cet utilisateur a opt&eacute; pour l'utilisation des comportements de serveur de
Dreamweaver UltraDev4, Dreamweaver charge le mod&egrave;le de serveur UltraDev4 correspondant.
Si l'extension de fichier est commune &agrave; plusieurs types de documents, Dreamweaver effectue les op&eacute;rations suivantes :
• Si un type de document statique figure dans la liste des types de documents, il pr&eacute;vaut.
• Si tous les types de documents sont dynamiques, Dreamweaver g&eacute;n&egrave;re une liste alphab&eacute;tique des mod&egrave;les de
serveur associ&eacute;s &agrave; ces types de documents, puis appelle la fonction canRecognizeDocument() pour chacun des
mod&egrave;les de serveur (voir &laquo; canRecognizeDocument() &raquo; &agrave; la page 335). Dreamweaver collecte les valeurs de retour
et identifie le mod&egrave;le de serveur qui a renvoy&eacute; l'entier positif le plus grand. Le type de document dont le mod&egrave;le de
serveur a renvoy&eacute; l'entier le plus grand correspond au type de document assign&eacute; par Dreamweaver au document en
cours d'ouverture. Si, toutefois, plusieurs mod&egrave;les de serveur renvoient le m&ecirc;me entier, Dreamweaver passe en
revue la liste alphab&eacute;tique de ces mod&egrave;les de serveur, choisit le premier de la liste, puis l'utilise. Si, par exemple, les
types ASP-JS et ASP-VB portent la m&ecirc;me extension.asp et que leur fonction canRecognizeDocument() respective
renvoie une valeur &eacute;gale, Dreamweaver affecte au document le type ASP-JS (puisque ASP-JS appara&icirc;t en premier
dans l'ordre alphab&eacute;tique).
Si Dreamweaver ne peut pas faire correspondre l'extension de fichier &agrave; un type de document, Dreamweaver ouvre le
document au format texte.
Personnalisation des pr&eacute;sentations de l'espace de travail
Dreamweaver vous permet de personnaliser la pr&eacute;sentation de l'espace de travail. Vous pouvez ainsi sp&eacute;cifier les
panneaux inclus dans la pr&eacute;sentation indiqu&eacute;e, ainsi que divers autres attributs tels que la position et la taille des
panneaux, leur &eacute;tat (r&eacute;duit ou d&eacute;velopp&eacute;), la position et la taille de la fen&ecirc;tre d'application, ainsi que la position et la
taille de la fen&ecirc;tre de document.
La pr&eacute;sentation de l'espace de travail est sp&eacute;cifi&eacute;e dans les fichiers XML stock&eacute;s dans le dossier
Configuration/Workspace layouts. Les sections suivantes d&eacute;crivent la syntaxe des balises XML. Les attributs facultatifs
sont d&eacute;finis par des accolades ({}) dans la liste des attributs ; les attributs ne comportant pas d'accolades sont donc
obligatoires.
&lt;panelset&gt;
Description
Balise d'extr&eacute;mit&eacute;, qui signale le d&eacute;but de la description du jeu de panneaux.
Attributs
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
24
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Contenu
Cette balise peut contenir une ou plusieurs balises application, document ou panelset.
Conteneur
Aucun.
Exemple
&lt;panelset&gt;
&lt;!-- panelset tags here --&gt;
&lt;/panelset&gt;
&lt;application&gt;
Description
Stipule la position et la taille initiales de la fen&ecirc;tre d'application.
Attributs
rect, maximize
•
rect sp&eacute;cifie la position et la taille de la fen&ecirc;tre d'application. La cha&icirc;ne est exprim&eacute;e au format &laquo; gauche haut droite
bas &raquo;, sp&eacute;cifi&eacute; sous forme de nombres entiers.
•
maximize est une valeur bool&eacute;enne : true si la fen&ecirc;tre d'application doit &ecirc;tre agrandie au d&eacute;marrage, et false dans
le cas contraire. La valeur par d&eacute;faut est true.
Contenu
Aucun.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise panelset.
Exemple
&lt;panelset&gt;
&lt;application rect=&quot;0 0 1000 1200&quot; maximize=&quot;false&quot;&gt;
&lt;/application&gt;
&lt;/panelset&gt;
&lt;document&gt;
Description
Stipule la position et la taille initiales de la fen&ecirc;tre de document.
Attributs
rect, maximize
•
rect sp&eacute;cifie la position et la taille de la fen&ecirc;tre de document. La cha&icirc;ne est exprim&eacute;e au format &laquo; gauche haut droite
bas &raquo;, sp&eacute;cifi&eacute; sous forme de nombres entiers. Si la valeur maximize est r&eacute;gl&eacute;e sur true, la valeur rect n'est pas
prise en compte.
•
maximize est une valeur bool&eacute;enne : true si la fen&ecirc;tre de document doit &ecirc;tre agrandie au d&eacute;marrage, et false dans
le cas contraire. La valeur par d&eacute;faut est true.
Derni&egrave;re mise &agrave; jour le 22/6/2011
25
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Contenu
Aucun.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise panelset.
Exemple
&lt;panelset&gt;
&lt;document rect=&quot;100 257 1043 1200&quot; maximize=&quot;false&quot;&gt;
&lt;/document&gt;
&lt;/panelset&gt;
&lt;panelframe&gt;
Description
D&eacute;crit un groupe entier de panneaux.
Attributs
x, y, {width, height}, dock, collapse
•
x indique la position de gauche du groupe de panneaux. Vous pouvez le r&eacute;gler sur un nombre entier ou sur une
valeur relative &agrave; l'&eacute;cran. Si le nombre entier exc&egrave;de les limites de l'&eacute;cran, le groupe de panneaux s'affiche &agrave;
l'emplacement le plus proche possible pour &ecirc;tre visible &agrave; l'&eacute;cran. Les valeurs relatives g&eacute;r&eacute;es sont &laquo; left &raquo; ou &laquo; right
&raquo; et identifient la bordure du groupe de panneaux align&eacute;e sur la bordure de l'&eacute;cran virtuel.
•
y indique la position sup&eacute;rieure du groupe de panneaux. Vous pouvez le r&eacute;gler sur un nombre entier ou sur une
valeur relative &agrave; l'&eacute;cran. Si le nombre entier exc&egrave;de les limites de l'&eacute;cran, le groupe de panneaux s'affiche &agrave;
l'emplacement le plus proche possible pour &ecirc;tre visible &agrave; l'&eacute;cran. Les valeurs relatives g&eacute;r&eacute;es sont &laquo; top &raquo; ou &laquo; bottom
&raquo; et identifient la bordure du groupe de panneaux align&eacute;e sur la bordure de l'&eacute;cran virtuel.
•
width indique la largeur du groupe de panneaux, exprim&eacute;e en pixels. Cet attribut est facultatif. Si vous ne sp&eacute;cifiez
pas de largeur, la valeur par d&eacute;faut du groupe de panneaux est utilis&eacute;e.
•
height indique la hauteur du groupe de panneaux, exprim&eacute;e en pixels. Cet attribut est facultatif. Si vous ne
sp&eacute;cifiez pas de hauteur, la valeur par d&eacute;faut du groupe de panneaux est utilis&eacute;e.
•
dock est une cha&icirc;ne qui identifie la bordure du cadre d'application sur laquelle est ancr&eacute; le groupe de panneaux. Cet
attribut n'est pas pris en compte sur Macintosh, car il est impossible d'ancrer les groupes de panneaux.
•
collapse est une valeur bool&eacute;enne : true indique que le groupe de panneaux est r&eacute;duit, et false indique qu'il est
d&eacute;velopp&eacute;. Cet attribut n'est pas pris en compte sur Macintosh, car les panneaux flottent.
Contenu
Cette balise doit contenir une ou plusieurs balises panelcontainer.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise panelset.
Derni&egrave;re mise &agrave; jour le 22/6/2011
26
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Exemple
&lt;panelset&gt;
&lt;panelframe rect=&quot;196 453 661 987&quot; visible=&quot;true&quot; dock=&quot;floating&quot;&gt;
&lt;!-- panelcontainer tags here --&gt;
&lt;/panelframe&gt;
&lt;/panelset&gt;
&lt;panelcontainer&gt;
Description
D&eacute;crit un groupe entier de panneaux.
Attributs
expanded, title,{ height,} activepanel, visible, maximize, maxRestorePanel, maxRestoreIndex,
maxRect, tabsinheader
•
expanded est une valeur bool&eacute;enne : true si le panneau est d&eacute;velopp&eacute; et false s'il ne l'est pas.
•
title est une cha&icirc;ne qui indique le titre du panneau.
•
height est un nombre entier qui indique la hauteur des panneaux, exprim&eacute;e en pixels. Cet attribut est facultatif. Si
vous ne sp&eacute;cifiez pas height, la valeur par d&eacute;faut de chaque panneau est utilis&eacute;e.
Remarque : La largeur est h&eacute;rit&eacute;e du parent.
•
activepanel est une valeur num&eacute;rique correspondant &agrave; l'ID du panneau avant.
•
visible est une valeur bool&eacute;enne : true si le panneau est visible et false s'il ne l'est pas.
•
maximize est une valeur bool&eacute;enne : true si le panneau doit &ecirc;tre agrandi lorsqu'il s'affiche initialement et false
dans le cas contraire.
•
maxRestorePanel est une valeur num&eacute;rique correspondant &agrave; l'ID du panneau &agrave; afficher suite &agrave; une restauration.
•
maxRect est une cha&icirc;ne qui indique la position et la taille du panneau agrandi. La cha&icirc;ne est exprim&eacute;e au format &laquo;
gauche haut droite bas &raquo;, sp&eacute;cifi&eacute; sous forme de nombres entiers.
•
tabsinheader est une valeur bool&eacute;enne : true indique que les onglets doivent &ecirc;tre plac&eacute;s dans l'en-t&ecirc;te et non sous
la barre d'en-t&ecirc;te ; false indique le contraire.
Contenu
Cette balise doit contenir une ou plusieurs balises panel.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise panelframe.
Exemple
&lt;panelset&gt;
&lt;panelframe rect=&quot;196 453 661 987&quot; visible=&quot;true&quot; dock=&quot;floating&quot;&gt;
&lt;panelcontainer title=&quot;Color&quot; height=&quot;250&quot; visible=&quot;true&quot; expanded=&quot;true&quot;
activepanel=&quot;20&quot;&gt;
&lt;!-- panel tags here ---&gt;
&lt;/panelcontainer&gt;
&lt;/panelframe&gt;
&lt;/panelset&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
27
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
&lt;panel&gt;
Description
Sp&eacute;cifie le panneau qui s'affiche dans le contenant.
Attributs
id, visibleTab
•
•
id est une valeur num&eacute;rique correspondant &agrave; l'ID du panneau. Le tableau ci-dessous contient une liste de valeurs.
Logiciel
ID
Panneau
Adobe&reg; Flash&reg;
1
Propri&eacute;t&eacute;s
2
Actions
3
Alignement
4
Comportements
5
Composants
6
Inspecteur de composants
7
M&eacute;langeur
8
Nuanciers
9
Historique
10
Info
11
Biblioth&egrave;que
12
Explorateur d'animations
13
Sortie
14
Propri&eacute;t&eacute;s
15
Projet
16
Transformer
17
S&eacute;quence
18
Cha&icirc;nes
19
D&eacute;bogueur
101–110
Biblioth&egrave;que
Dreamweaver
1
Propri&eacute;t&eacute;s
Flex Builder
1
Propri&eacute;t&eacute;s
visibleTab est une valeur bool&eacute;enne : true si l'onglet et le panneau doivent &ecirc;tre visibles, false dans le cas
contraire.
Contenu
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
28
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise panelcontainer.
Exemple
&lt;panelset&gt;
&lt;panelframe rect=&quot;196 453 661 987&quot; visible=&quot;true&quot; dock=&quot;floating&quot;&gt;
&lt;panelcontainer title=&quot;Color&quot; height=&quot;250&quot; visible=&quot;true&quot; expanded=&quot;true&quot;
activepanel=&quot;20&quot;&gt;
&lt;panel id=&quot;20&quot;&gt;&lt;/panel&gt;
&lt;/panelcontainer&gt;
&lt;/panelframe&gt;
&lt;/panelset&gt;
Personnalisation de la barre d'outils de codage
La barre d'outils de codage contient normalement 15 boutons. Vous disposez cependant d'autres boutons. Pour
personnaliser la barre d'outils de codage, vous pouvez modifier ses boutons et leur ordre d'affichage. Vous devez pour
ce faire modifier le fichier Configuration/Toolbars/Toolbars.xml. Vous pouvez &eacute;galement ins&eacute;rer vos propres boutons
par le biais d'Extension Manager.
Modification de l'ordre des boutons
1 Ouvrez le fichier Configuration/Toolbars/toolbars.xml.
2 Localisez la section Code view toolbar en recherchant le commentaire suivant :
&lt;!-- Code view toolbar --&gt;
3 Copiez et collez les balises associ&eacute;es aux boutons pour que ces derniers s'affichent dans l'ordre requis dans la barre
d'outils.
4 Enregistrez le fichier.
Suppression d'un bouton
1 Ouvrez le fichier Configuration/Toolbars/toolbars.xml.
2 Localisez la section Coding toolbar en recherchant le commentaire suivant :
&lt;!-- Code view toolbar --&gt;
3 Entourez le bouton &agrave; supprimer d'un commentaire.
L'exemple suivant illustre un bouton entour&eacute; de commentaires.
&lt;!-- remove button from Coding toolbar
&lt;button id=&quot;DW_ExpandAll&quot;
image=&quot;Toolbars/images/MM/T_ExpandAll_Sm_N.png&quot;
disabledImage=&quot;Toolbars/images/MM/T_ExpandAll_Sm_D.png&quot;
tooltip=&quot;Expand All&quot;
domRequired=&quot;false&quot;
enabled=&quot;dw.getFocus(true) == 'textView' || dw.getFocus(true) == 'html'&not;
&quot;command=&quot;if (dw.getFocus(true) == 'textView' || dw.getFocus(true) &not;
== 'html') dw.getDocumentDOM().source.expandAllCodeFragments();&quot;
update=&quot;onViewChange&quot; /&gt;
--&gt;
4 Enregistrez le fichier.
Derni&egrave;re mise &agrave; jour le 22/6/2011
29
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Pour afficher un bouton qui n'appara&icirc;t pas sur la barre d'outils, il suffit de supprimer le commentaire qui entoure le
bouton dans le fichier XML.
Modification des raccourcis clavier
Dreamweaver offre de nombreux raccourcis clavier pour acc&eacute;der rapidement aux principales fonctionnalit&eacute;s. Les
raccourcis clavier par d&eacute;faut figurent dans le fichier menus.xml et sont con&ccedil;us pour le clavier am&eacute;ricain. En raison du
nombre &eacute;lev&eacute; de raccourcis de Dreamweaver, certains raccourcis ne faisant pas appel &agrave; des caract&egrave;res alphanum&eacute;riques
(caract&egrave;res autres que a-z ou 0-9) n&eacute;cessitent la reconfiguration du clavier. A cette fin, Dreamweaver dispose de
plusieurs fichiers XML qui d&eacute;finissent le mappage des raccourcis clavier en fonction de diff&eacute;rentes langues. Ces fichiers
sont situ&eacute;s dans le dossier Configuration\Menus\Adaptive Sets. Lorsque Dreamweaver d&eacute;tecte un clavier autre que le
clavier Qwerty am&eacute;ricain, il adapte de fa&ccedil;on automatique les raccourcis clavier. Lorsque le fichier appropri&eacute; n'est pas
disponible pour le clavier, Dreamweaver supprime les raccourcis clavier qui ne fonctionnent pas pour ce type de
clavier.
Les fichiers de raccourcis clavier emploient un code &agrave; deux lettres pour identifier le clavier. Ainsi, le fichier du clavier
allemand est appel&eacute; de.xml. Lorsqu'une langue n&eacute;cessite diff&eacute;rentes dispositions en fonction du pays d'utilisation, le
fichier de mappages emploie toujours le code de langue &agrave; deux lettres, mais suivi par un tiret (-) et un code de pays &agrave;
deux lettres. Par exemple, fr-ca.xml d&eacute;signe le clavier canadien fran&ccedil;ais. Les codes de langue &agrave; deux lettres est conforme
&agrave; la norme ISO 639 (http://en.wikipedia.org/wiki/List_of_ISO_639_codes), tandis que le code de pays repose sur la
norme ISO 3166 (http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2).
Lorsque Dreamweaver d&eacute;tecte un changement de clavier, il recherche automatiquement le fichier de mappage
correspondant. Dreamweaver recherche en premier le fichier propre au pays puis, si ce fichier n'existe pas, il recherche
le fichier correspondant &agrave; la langue. Par exemple, si vous connectez un clavier canadien fran&ccedil;ais &agrave; votre ordinateur,
Dreamweaver recherche tout d'abord le fichier fr-ca.xml. S'il n'existe pas, Dreamweaver recherche fr.xml. Le tableau
suivant regroupe les fichiers de mappage livr&eacute;s avec Dreamweaver.
Nom de fichier
Plate-forme Windows
Plate-forme Macintosh
ca.xml
Catalan
Catalan (Espagne)
de.xml
Allemand (Allemagne, Autriche)
Autrichien, Allemand
de-ch.xml
Allemand (Suisse)
Suisse-Allemand
es.xml
Espagnol (international) Espagnol (traditionnel)
Espagnol - ISO
fr.xml
Fran&ccedil;ais (France)
Fran&ccedil;ais
fr-ca.xml
Fran&ccedil;ais (Canada)
Canadien - CSA
fr-ch.xml
Fran&ccedil;ais (Suisse)
Fran&ccedil;ais Suisse
it.xml
Italien (Italie) Italien (Suisse)
Italien - Pro
it-mac.xml
S/O
Italien
ja.xml
Japonais
Japonais
nl-be.xml
N&eacute;erlandais (Belgique) Fran&ccedil;ais (Belgique)
Belge
zh-cn.xml
Chinois (RPC) Chinois (Singapour)
Chinois simplifi&eacute;
Si vous utilisez une disposition de clavier qui ne correspond pas &agrave; celle de Dreamweaver, vous pouvez cr&eacute;er un fichier
de mappage personnalis&eacute; et le placer dans le dossier Configuration\Menus\Adaptive Sets.
Derni&egrave;re mise &agrave; jour le 22/6/2011
30
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
Cr&eacute;ation d'un fichier de mappage du clavier
1 Copiez l'un des fichiers de mappage du clavier dans le dossier Configuration\Menus\Adaptive Sets et nommez-le &agrave;
l'aide du code de langue &agrave; 2 lettres en fonction de la disposition de votre clavier et employez l'extension .xml.
Lorsque vous copiez un fichier, vous devez choisir un fichier de mappage aussi proche que possible de la disposition
du clavier. Par exemple, si vous cr&eacute;ez un fichier de mappage pour le clavier su&eacute;dois, il est recommand&eacute; de copier le
fichier de.xml dans la mesure o&ugrave; les dispositions des claviers su&eacute;dois et allemand sont similaires.
2 Placez le fichier de mappage que vous venez de cr&eacute;er dans un dossier diff&eacute;rent de Configuration\Menus\Adaptive
Sets.
3 Ouvrez le fichier de mappage du clavier dans Dreamweaver.
4 Supprimez ou ajoutez des balises de raccourci pour la disposition de clavier voulue.
Pour d&eacute;terminer les balises de raccourci clavier &agrave; modifier, comparez le jeu de raccourcis du clavier am&eacute;ricain &agrave;
celui de votre langue. La proc&eacute;dure suivante d&eacute;crit la comparaison de raccourcis &agrave; partir de deux dispositions de
clavier distinctes.
5 Apr&egrave;s avoir apport&eacute; les modifications voulues aux raccourcis clavier, enregistrez le fichier et placez-le dans le
dossier Configuration\Menus\Adaptive Sets.
D&eacute;terminez les balises de raccourci clavier que vous voulez modifier.
1 S&eacute;lectionnez la langue correspondant &agrave; votre clavier sur l'ordinateur, si ce n'est d&eacute;j&agrave; fait. Vous devez passer par le
syst&egrave;me d'exploitation de l'ordinateur. Par exemple, sous Windows, vous pouvez s&eacute;lectionner la langue &agrave; l'aide du
Panneau de configuration.
2 Lancez l'&eacute;diteur de raccourcis clavier de Dreamweaver en s&eacute;lectionnant Edition &gt; Raccourcis clavier.
3 Cliquez sur la troisi&egrave;me image de bouton dans le coin sup&eacute;rieur droit de la bo&icirc;te de dialogue. Survolez le bouton
avec le pointeur pour afficher l'infobulle &laquo; Exporter le jeu au format HTML &raquo;.
La bo&icirc;te de dialogue Enregistrer comme fichier HTML s'affiche afin de vous permettre d'entrer le nom du fichier
de r&eacute;sum&eacute; de raccourci clavier correspondant &agrave; la disposition actuelle.
4 Apr&egrave;s avoir enregistr&eacute; le fichier de r&eacute;sum&eacute;, fermez la bo&icirc;te de dialogue de l'&eacute;diteur de raccourcis clavier.
5 S&eacute;lectionnez la disposition de clavier am&eacute;ricain (&agrave; partir du syst&egrave;me d'exploitation de l'ordinateur).
6 Lancez l'&eacute;diteur de raccourcis clavier de Dreamweaver en s&eacute;lectionnant Edition &gt; Raccourcis clavier.
7 Cliquez sur la troisi&egrave;me image de bouton dans le coin sup&eacute;rieur droit de la bo&icirc;te de dialogue pour exporter le jeu
dans un fichier HTML.
8 Apr&egrave;s avoir enregistr&eacute; le fichier de r&eacute;sum&eacute;, fermez la bo&icirc;te de dialogue de l'&eacute;diteur de raccourcis clavier.
9 Vous pouvez d&eacute;sormais imprimer les deux fichiers de r&eacute;sum&eacute; de raccourci clavier et les comparer pour identifier
les raccourcis supprim&eacute;s par Dreamweaver dans la langue du clavier voulu. Il s'agit des raccourcis clavier que vous
devez r&eacute;affecter en fonction des touches propres &agrave; votre clavier.
A partir des informations obtenues en comparant les deux fichiers, vous pouvez mettre &agrave; jour votre fichier de
mappage en ajoutant ou en supprimant des balises de raccourci pour tout raccourci &agrave; r&eacute;affecter.
Fichiers XML de mappage de clavier
L'exemple suivant porte sur le format du mappage de clavier fran&ccedil;ais (fr.xml) :
Derni&egrave;re mise &agrave; jour le 22/6/2011
31
EXTENSION DE DREAMWEAVER
Personnalisation de Dreamweaver
&lt;shortcutset language=&quot;French&quot;&gt;
&lt;shortcut key=&quot;Cmd+[&quot; newkey=&quot;Cmd+&amp;ugrave;&quot;/&gt;
&lt;shortcut key=&quot;Cmd+]&quot; newkey=&quot;Cmd+)&quot;/&gt;
&lt;shortcut platform=&quot;win&quot; key=&quot;Cmd+Shift+&gt;&quot; newkey=&quot;Cmd+Opt+Shift+,&quot;/&gt;
&lt;shortcut platform=&quot;mac&quot; key=&quot;Cmd+Shift+&gt;&quot; newkey=&quot;Cmd+&lt;&quot;/&gt;
&lt;shortcut platform=&quot;win&quot; key=&quot;Cmd+Shift+&lt;&quot; newkey=&quot;Cmd+Shift+,&quot;/&gt;
&lt;shortcut key=&quot;Cmd+'&quot; newkey=&quot;Cmd+Shift+=&quot; /&gt;
...
&lt;/shortcutset&gt;
Syntaxe du fichier XML de disposition du clavier :
&lt;shortcutset language=&quot;language_name&quot;&gt;
&lt;shortcut key=&quot;key_combination&quot; newkey=&quot;key_combination&quot;/&gt;
&lt;shortcut platform=&quot;op_system&quot; key=&quot;key_combination&quot; newkey=&quot;key_combination&quot;/&gt;
&lt;/shortcutset&gt;
O&ugrave;:
• language_name d&eacute;signe la langue associ&eacute;e au clavier, telle que Fran&ccedil;ais, Espagnol, Allemand, etc.
• key_combination est le raccourci clavier, comme Cmd+[, Cmd+Shift+&gt;, Ctrl+$.
•
key sp&eacute;cifie le raccourci clavier &agrave; remplacer.
•
newkey sp&eacute;cifie le raccourci clavier devant remplacer les touches identifi&eacute;es par key.
• platform=op_system d&eacute;signe le syst&egrave;me auquel le raccourci s'applique. Sp&eacute;cifiez win ou mac. Si aucune plate-forme
n'est sp&eacute;cifi&eacute;e, le raccourci s'applique aux deux plates-formes.
Derni&egrave;re mise &agrave; jour le 22/6/2011
32
Chapitre 3 : Personnalisation du mode
Code
En mode Code, Adobe Dreamweaver permet de r&eacute;diger rapidement un code lisible et sans erreur gr&acirc;ce aux deux outils
que sont les conseils de code et la coloration du code. De plus, Dreamweaver effectue un contr&ocirc;le de validit&eacute; du code
saisi par rapport aux navigateurs cibles sp&eacute;cifi&eacute;s et permet de modifier le formatage HTML par d&eacute;faut.
Vous pouvez personnaliser les outils d'indication et de coloration du code en modifiant leurs fichiers
d'impl&eacute;mentation au format XML. Vous pouvez ajouter des &eacute;l&eacute;ments aux menus des conseils de code en ajoutant des
entr&eacute;es dans le fichier CodeHints.xml ou SpryCodeHints.xml. Vous pouvez modifier les mod&egrave;les de couleur par
l'interm&eacute;diaire du fichier de style de coloration du code, Colors.xml, ou encore modifier les mod&egrave;les de coloration du
code ou en ajouter de nouveaux par l'interm&eacute;diaire des fichiers de syntaxe de coloration du code (par exemple,
CodeColoring.xml). Vous pouvez &eacute;galement modifier le fichier de profil CSS (feuille de style en cascade) de votre
navigateur cible de mani&egrave;re &agrave; influer sur le syst&egrave;me de validation des valeurs et des propri&eacute;t&eacute;s CSS dans Dreamweaver.
Vous pouvez enfin modifier le formatage HTML par d&eacute;faut de Dreamweaver par l'interm&eacute;diaire de la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences. Les sections suivantes d&eacute;crivent les proc&eacute;dures de personnalisation de ces diff&eacute;rentes fonctions.
A propos des conseils de code
Les conseils de code sont des menus contextuels qui s'affichent dans Dreamweaver lorsque vous tapez certains
caract&egrave;res en mode Code. Ils vous &eacute;vitent de saisir tout le texte en proposant une liste de cha&icirc;nes susceptibles de
compl&eacute;ter la cha&icirc;ne que vous tapez. Si la cha&icirc;ne que vous tapez appara&icirc;t dans le menu, s&eacute;lectionnez-la et appuyez sur
Entr&eacute;e ou Retour pour compl&eacute;ter votre saisie. Si vous tapez &lt;, par exemple, un menu contextuel affiche une liste des
noms de balises. Plut&ocirc;t que de taper le reste du nom de la balise, vous pouvez la s&eacute;lectionner dans le menu pour
l'inclure &agrave; votre texte. Dreamweaver fournit &eacute;galement des conseils de code pour le cadre applicatif Spry.
Dreamweaver charge les menus de conseils de code &agrave; partir du fichier CodeHints.xml ou de tout autre type de fichier
XML enregistr&eacute; dans le dossier Configuration/CodeHints. Vous pouvez ajouter des menus de conseils de code dans
Dreamweaver en les d&eacute;finissant dans vos propres fichiers XML &agrave; l'aide du format de sch&eacute;ma XML qui est d&eacute;crit dans
cette rubrique et en les pla&ccedil;ant dans le dossier Configuration/CodeHints.
Une fois le contenu du fichier de conseils de code charg&eacute;, vous pouvez &eacute;galement ajouter de fa&ccedil;on dynamique de
nouveaux menus Conseils de code via JavaScript. Par exemple, le code JavaScript ajoute des donn&eacute;es &agrave; la liste des
variables de session dans le panneau Liaisons. Vous pouvez utiliser le m&ecirc;me code pour ajouter un menu de conseils de
code. Dans ce cas, lorsqu'un utilisateur tape &quot;Session.&quot; en mode Code, un menu de variables de session s'affiche dans
Dreamweaver. Pour obtenir des informations sur l'ajout ou la modification d'un menu de conseils de code avec
JavaScript, voir &laquo; Fonctions de code &raquo; dans le Guide des API de Dreamweaver.
Certains types de menus de conseils de code ne s'expriment pas dans le fichier XML ou l'API JavaScript de
Dreamweaver. Les fichiers CodeHints.xml et SpryCodeHints.xml, ainsi que l'API JavaScript, contiennent un sousensemble utile du moteur de conseils de code, mais certaines fonctionnalit&eacute;s de Dreamweaver ne sont pas accessibles.
Par exemple, comme il n'existe pas d'accroche JavaScript pouvant afficher un s&eacute;lecteur de couleur, Dreamweaver ne
peut pas exprimer le menu Valeurs des attributs &agrave; l'aide de JavaScript. Vous pouvez uniquement afficher un menu
d'&eacute;l&eacute;ments de texte permettant d'ins&eacute;rer du texte.
Remarque : Lorsque vous ins&eacute;rez du texte, le point d'insertion se place apr&egrave;s la cha&icirc;ne ins&eacute;r&eacute;e.
Derni&egrave;re mise &agrave; jour le 22/6/2011
33
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Fichier CodeHints.xml
Le fichier CodeHints.xml contient les entit&eacute;s suivantes :
• Une liste de tous les groupes de menus
Lorsque vous s&eacute;lectionnez la cat&eacute;gorie Conseils de code dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, la liste des groupes
de menus s'affiche dans Dreamweaver. Vous pouvez ouvrir la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences en choisissant Edition
&gt; Pr&eacute;f&eacute;rences. Dreamweaver fournit les groupes de menus ou les types de menus de conseils de code suivants :
Noms de balises, Noms d'attributs, Valeurs d'attributs, Arguments de fonctions, M&eacute;thodes et variables d'objets et
Entit&eacute;s HTML.
• La description de chaque groupe de menus
Cette description relative &agrave; la cat&eacute;gorie Conseils de code appara&icirc;t dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences lorsque vous
s&eacute;lectionnez le groupe de menus dans la liste. La description de l'entr&eacute;e s&eacute;lectionn&eacute;e appara&icirc;t au-dessous de la liste
de groupes de menus.
• Des menus de conseils de code
Un menu se compose d'un mod&egrave;le qui d&eacute;clenche le menu Conseils de code et d'une liste de commandes. Par
exemple, le mod&egrave;le &amp; peut d&eacute;clencher un menu &amp;amp;, &amp;gt;, &amp;lt;.
L'exemple suivant pr&eacute;sente le format du fichier CodeHints.xml (les balises en gras sont d&eacute;crites dans &laquo; Balises des
conseils de code &raquo; &agrave; la page 38) :
Derni&egrave;re mise &agrave; jour le 22/6/2011
34
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;codehints&gt;
&lt;menugroup name=&quot;HTML Entities&quot; enabled=&quot;true&quot; id=&quot;CodeHints_HTML_Entities&quot;&gt;
&lt;description&gt;
&lt;![CDATA[ When you type a '&amp;', a pop-up menu shows
a list of HTML entities. The list of HTML entities
is stored in Configuration/CodeHints.xml. ]]&gt;
&lt;/description&gt;
&lt;menu pattern=&quot;&amp;amp;&quot;&gt;
&lt;menuitem value=&quot;&amp;amp;amp;&quot; texticon=&quot;&amp;amp;&quot;/&gt;
&lt;menuitem value=&quot;&amp;amp;lt;&quot; icon=&quot;lessThan.gif&quot;/&gt;
&lt;/menu&gt;
&lt;/menugroup&gt;
&lt;menugroup name=&quot;Tag Names&quot; enabled=&quot;true&quot; id=&quot;CodeHints_Tag_Names&quot;&gt;
&lt;description&gt;
&lt;![CDATA[ When you type '&lt;', a pop-up menu shows
all possible tag names.0You can edit the list of tag
names using the
&lt;a href=&quot;javascript:dw.popupTagLibraryEditor()&quot;&gt; Tag Library
Editor &lt;/a&gt;]]&gt;
&lt;/description&gt;
&lt;/menugroup&gt;
&lt;menugroup name=&quot;Function Arguments&quot; enabled=&quot;true&quot;
id=&quot;CodeHints_Function_Arguments&quot;&gt;
&lt;description&gt;
...
&lt;/description&gt;
&lt;function pattern=&quot;ArraySort(array, sort_type, sort_order)&quot;
doctypes=&quot;CFML&quot;/&gt;
&lt;function pattern=&quot;Response.addCookie(Cookie cookie)&quot;
doctypes=&quot;JSP&quot;/&gt;
&lt;/menugroup&gt;
&lt;/codehints&gt;
Conseils de code JavaScript
Dreamweaver prend en charge les conseils de code pour le cadre applicatif Spry. Le fichier de conseils de code Spry
(SpryCodeHints.xml) reprend le format de base de CodeHints.xml. Il comporte quelques nouveaux mots cl&eacute;s, tels que
method, ainsi qu'un nouvel attribut, classpattern, pour associer la liste de membres de la classe &agrave; la classe (par
exemple, Spry.Data.XMLDataSet). La liste de membres de la classe pour les classes est imbriqu&eacute;e dans le menu
(m&eacute;thodes, propri&eacute;t&eacute;s et &eacute;v&eacute;nements).
La balise &lt;method&gt; et ses attributs est similaire &agrave; la balise function et ses attributs, mais la balise parent, menu, doit
disposer de l'attribut classpattern pour diriger l'association. D'autre part, il existe une balise property pour les
propri&eacute;t&eacute;s et une balise event pour les &eacute;v&eacute;nements, qui sont repr&eacute;sent&eacute;s par les ic&ocirc;nes correspondantes dans le menu
d&eacute;roulant des conseils de code. Vous disposez &eacute;galement des balises parammenu et parammenuitem pour prendre en
charge les conseils de param&egrave;tres.
Le format du fichier SpryCodeHints.xml, est illustr&eacute; dans l'exemple suivant. Les balises en gras sont d&eacute;crites dans
&laquo; Balises des conseils de code &raquo; &agrave; la page 38.
Derni&egrave;re mise &agrave; jour le 22/6/2011
35
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;function pattern=&quot;XMLDataSet(xmlsource, xpath, {options})&quot;
caseSensitive=&quot;true&quot; /&gt;
&lt;menu classpattern=&quot;Spry.Data.XMLDataSet&quot;&gt;
&lt;property pattern=&quot;url&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
&lt;property pattern=&quot;xpath&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
...
...
&lt;method pattern=&quot;getData()&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;getData()&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;loadData()&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;getCurrentRow()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;setCurrentRow(rowID)&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;setCurrentRowNumber(rowNumber)&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;getRowNumber(rowObj)&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;setColumnType(columnName, columnType)&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;parammenu pattern='&quot;' name=&quot;columnName&quot; index=&quot;0&quot; type=&quot;spryDataReferences&quot;&gt;
&lt;/parammenu&gt;
&lt;parammenu pattern='&quot;' name=&quot;columnType&quot; index=&quot;1&quot; type=&quot;enumerated&quot;&gt;
&lt;parammenuitem label=&quot;integer&quot; value=&quot;integer&quot; icon=&quot;.../hintMisc.gif&quot;/&gt;
&lt;parammenuitem label=&quot;image&quot; value=&quot;image&quot; icon=&quot;.../hintMisc.gif&quot;/&gt;
&lt;parammenuitem label=&quot;date&quot; value=&quot;date&quot; icon=&quot;.../hintMisc.gif&quot;/&gt;
&lt;parammenuitem label=&quot;string&quot; value=&quot;string&quot; icon=&quot;.../hintMisc.gif&quot;/&gt;
&lt;/parammenu&gt;
&lt;/method&gt;
&lt;method pattern=&quot;getColumnType(columnName)&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;distinct()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;getSortColumn()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;sort()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
...
...
&lt;event pattern=&quot;onCurrentRowChanged&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;event pattern=&quot;onDataChanged&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
...
...
&lt;/menu&gt;
&lt;function pattern=&quot;Accordion(element,{options})&quot; caseSensitive=&quot;true&quot; /&gt;
&lt;menu classpattern=&quot;Spry.Widget.Accordion&quot;&gt;
&lt;method pattern=&quot;openNextPanel()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
&lt;method pattern=&quot;openPreviousPanel()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
36
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;method pattern=&quot;openFirstPanel()&quot; icon= &quot;.../hintMisc.gif&quot; /&gt;
...
...
&lt;/menu&gt;
&lt;/function&gt;
&lt;function pattern=&quot;XMLDataSet(xmlsource, xpath, {options})&quot; caseSensitive=&quot;true&quot;&gt;
&lt;parammenu pattern='{,' name=&quot;options&quot; index=&quot;2&quot; type=&quot;optionArray&quot;
allowwhitespaceprefix=&quot;true&quot;&gt;
&lt;parammenuitem label=&quot;sortOnLoad&quot; value=&quot;sortOnLoad:&quot;
icon=&quot;shared/mm/images/hintMisc.gif&quot; datatype=&quot;string&quot;/&gt;
&lt;optionparammenu pattern=&quot;sortOrderOnLoad&quot; label=&quot;sortOrderOnLoad&quot;
value=&quot;sortOrderOnLoad:&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot;
type=&quot;enumerated&quot; datatype=&quot;string&quot;&gt;
&lt;optionparammenuitem label=&quot;ascending&quot; value=&quot;ascending&quot;
icon=&quot;shared/mm/images/hintMisc.gif&quot;/&gt;
&lt;optionparammenuitem label=&quot;descending&quot; value=&quot;descending&quot;
icon=&quot;shared/mm/images/hintMisc.gif&quot;/&gt;
&lt;/optionparammenu&gt;
&lt;/parammenu&gt;
&lt;/function&gt;
D&eacute;claration des classes
Le format suivant d&eacute;clare une classe en associant une variable &agrave; la classe :
&lt;variablename&gt;[space][= operator][new keyword][space]&lt;classname&gt;
Par exemple :
var dsFoo = new Spry.Data.XMLDataSet(&quot;products.xml&quot;, &quot;products/product&quot;);
var fooAccordion = new Spry.Widget.Accordion(&quot;accordionDivId&quot;);
Dans le cas du nom de la classe Spry.XML.DataSet, vous devez la d&eacute;clarer de nouveau dans le fichier
ColorCoding.xml, de fa&ccedil;on &agrave; ce que le moteur d'&eacute;tat de la couleur l'identifie en tant qu'occurrence de classe et prenne
le nom de variable d&eacute;fini dans la partie gauche de la d&eacute;claration et la place dans la liste de variables, ainsi que les types
de classe correspondants pour cette page (par ex. la variable fooAccordion et le type de classe
Spry.Widget.Accordion dans l'exemple pr&eacute;c&eacute;dent).
Syntaxe de la nouvelle d&eacute;claration du nom de classe dans le fichier CodeColoring.xml:
&lt;classlibrary name=&quot;Spry Keywords&quot; id=&quot;CodeColor_JavascriptSpry&quot;&gt;
&lt;class&gt;Spry.Data.XMLDataSet&lt;/class&gt;
&lt;class&gt;Spry.Widget.Accordion&lt;/class&gt;
&lt;/classlibrary&gt;
O&ugrave;:
•
classlibrary est une nouvelle balise qui regroupe les classes dans l'id de couleur &quot;CodeColor_JavascriptSpry&quot;
class permet d'afficher la liste des diff&eacute;rentes entr&eacute;es de la biblioth&egrave;que de classes. La liste de classes peut se
d&eacute;velopper afin d'inclure d'autres classes Spry provenant de diff&eacute;rents packages Spry (comme Debug, Data, Utils,
Widgets et Effects), ou d'autres bo&icirc;tes &agrave; outils JavaScript et XML (Ajax) asynchrones ou des biblioth&egrave;ques
JavaScript.
Derni&egrave;re mise &agrave; jour le 22/6/2011
37
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Conseils de code d'attributs Crosstag
Dreamweaver fournit des conseils de code pour les noms d'attribut et les valeurs Spry. Comme ces attributs sont
communs aux balises, au lieu d'ouvrir chaque fichier balise.vtm et d'ajouter la liste d'attributs Spry, Dreamweaver
emploie un nouveau format XML pour les groupes d'attributs (par exemple, spry:region et spry:repeat) et des groupes
de balises qui peuvent &ecirc;tre appliqu&eacute;s dans un seul fichier VTM nomm&eacute; Spry.vtm dans le dossier
Configuration/TagLibraries.
Format de groupement de l'attribut Spry
Le format du fichier .vtm est illustr&eacute; dans l'exemple de code suivant : Ce format permet de sp&eacute;cifier les attributs qui
s'appliquent &agrave; certaines balises.
Remarque : Le format du groupement d'attributs Spry peut &eacute;galement &ecirc;tre utilis&eacute; en dehors du cadre applicatif Spry.
&lt;crosstag_attributes&gt;
&lt;attributegroup id=&quot;group_id_1&quot; name=&quot;group_name_1&quot;&gt;
&lt;attrib name = &quot;fooAttr1&quot;&gt;
&lt;attrib name = &quot;barAttr1&quot;&gt;
...
&lt;taggroup&gt;
&lt;tag name = &quot;fooTag1&quot;&gt;
&lt;tag name = &quot;barTag1&quot;&gt;
...
&lt;/taggroup&gt;
&lt;/attribgroup&gt;
&lt;attributegroup id=&quot;group_id_2&quot; name=&quot;group_name_2&quot;&gt;
&lt;attrib name = &quot;fooAttr2&quot;&gt;
&lt;attrib name = &quot;barAttr2&quot;&gt;
...
&lt;taggroup&gt;
&lt;tag name = &quot;fooTag2&quot;&gt;
&lt;tag name = &quot;barTag2&quot;&gt;
...
&lt;/taggroup&gt;
&lt;/attribgroup&gt;
&lt;/crosstag_attributes&gt;
O&ugrave;:
•
attributegroup donne la liste des attributs du groupe de balises suivantes.
•
taggroup donne la liste des balises auxquelles les attributs pr&eacute;c&eacute;dents s'appliquent.
Derni&egrave;re mise &agrave; jour le 22/6/2011
38
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
&lt;crosstag_attributes&gt;
&lt;attribgroup id=&quot;spryRegionAttrs&quot; name=&quot;Spry1.2&quot;&gt;
&lt;attrib name=&quot;spry:region&quot; type=&quot;spryDataSet&quot; allowmultiplevalues=&quot;yes&quot;/&gt;
&lt;attrib name=&quot;spry:detailregion&quot; type=&quot;spryDataSet&quot; allowmultiplevalues=&quot;yes&quot;/&gt;
&lt;attrib name=&quot;spry:content&quot;/&gt;
&lt;attrib name=&quot;spry:if&quot;/&gt;
&lt;attrib name=&quot;spry:choose&quot;&gt;
&lt;attrib name=&quot;spry:when&quot;/&gt;
&lt;attrib name=&quot;spry:default&quot;/&gt;
&lt;attrib name=&quot;spry:state&quot; type=&quot;Enumerated&quot;&gt;
&lt;attriboption value=&quot;read&quot;
caption=&quot;read&quot;/&gt;
&lt;attriboption value=&quot;loading&quot; caption=&quot;loading&quot;/&gt;
&lt;attriboption value=&quot;failed&quot; caption=&quot;failed&quot;/&gt;
&lt;/attrib&gt;
&lt;taggroup&gt;
&lt;tag name=&quot;div&quot;/&gt;
&lt;tag name=&quot;span&quot;/&gt;
...
&lt;/taggroup&gt;
&lt;/attribgroup&gt;
&lt;attribgroup id=&quot;spryBehaviorAttrs&quot; name=&quot;Spry1.2&quot;&gt;
&lt;attrib name=&quot;spry:hover&quot; type=&quot;cssStyle&quot;/&gt;
&lt;attrib name=&quot;spry:select&quot; type=&quot;cssStyle&quot;/&gt;
&lt;attrib name=&quot;spry:odd&quot;
type=&quot;cssStyle&quot;/&gt;
&lt;attrib name=&quot;spry:even&quot;
type=&quot;cssStyle&quot;/&gt;
&lt;taggroup&gt;
&lt;tag name=&quot;a&quot;/&gt;
&lt;tag name=&quot;abbr&quot;/&gt;
&lt;tag name=&quot;acronym&quot;/&gt;
...
&lt;/taggroup&gt;
&lt;/attribgroup&gt;
&lt;/crosstag_attributes&gt;
Balises des conseils de code
Les fichiers XML de conseils de code ont recours aux balises suivantes, qui d&eacute;finissent les menus de conseils de code.
Vous pouvez utiliser ces balises pour d&eacute;finir les menus de conseils de code.
&lt;codehints&gt;
Description
La balise codehints correspond &agrave; la racine des fichiers CodeHints.xml et SpryCodeHints.xml.
Attributs
Aucun.
Contenu
Une ou plusieurs balises menugroup.
Conteneur
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
39
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
&lt;codehints&gt;
&lt;menugroup&gt;
Description
Chaque balise menugroup correspond &agrave; un type de menu. Vous pouvez afficher les types de menu d&eacute;finis dans
Dreamweaver en choisissant la cat&eacute;gorie Conseils de code dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Pour afficher la bo&icirc;te
de dialogue Pr&eacute;f&eacute;rences, choisissez Pr&eacute;f&eacute;rences dans le menu Edition.
Vous pouvez cr&eacute;er un groupe de menus ou ajouter des menus &agrave; un groupe existant. Les groupes de menus sont des
collections logiques de menus que l'utilisateur peut activer ou d&eacute;sactiver dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
Attributs
name,enabled,id,version
• L'attribut name est le nom localis&eacute; qui appara&icirc;t dans la liste des groupes de menu de la cat&eacute;gorie Conseils de code
de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences.
• L'attribut enabled indique si le groupe de menus est actuellement coch&eacute; ou activ&eacute;. Une coche appara&icirc;t en regard
d'un groupe de menus s'il est activ&eacute; dans la cat&eacute;gorie Conseils de code de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Pour
activer un groupe de menus, assignez-lui la valeur true ; pour le d&eacute;sactiver, assignez-lui la valeur false.
• L'attribut id est un identificateur non localis&eacute; qui se rapporte au groupe de menus.
Contenu
Balises description, menu et function.
Conteneur
Balise codehints.
Exemple
&lt;menugroup name=&quot;Session Variables&quot; enabled=&quot;true&quot; id=&quot;Session_Code_Hints&quot; version=&quot;1.4.2&quot;&gt;
&lt;description&gt;
Description
La balise description contient du texte affich&eacute; par Dreamweaver lorsque vous s&eacute;lectionnez le groupe de menus dans
la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. La description appara&icirc;t au-dessous de la liste de groupes de menus. Elle peut contenir
une balise a dans laquelle l'attribut href doit &ecirc;tre une URL JavaScript ex&eacute;cut&eacute;e par Dreamweaver si l'utilisateur clique
sur le lien. Utilisez la structure XML CDATA pour inclure des caract&egrave;res sp&eacute;ciaux ou ill&eacute;gaux dans la cha&icirc;ne afin qu'ils
soient consid&eacute;r&eacute;s comme du texte par Dreamweaver.
Attributs
Aucun.
Contenu
Texte de la description.
Derni&egrave;re mise &agrave; jour le 22/6/2011
40
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Conteneur
Balise menugroup.
Exemple
&lt;description&gt;
&lt;![CDATA[ To add or remove tags and attributes, use the
&lt;a href=&quot;javascript:dw.tagLibrary.showTagLibraryEditor()&quot;&gt;Tag Library Editor&lt;/a&gt;.]]&gt;
&lt;/description&gt;
&lt;menu&gt;
Description
Cette balise d&eacute;crit un menu contextuel unique. Dreamweaver ouvre ce menu lorsque l'utilisateur tape le dernier
caract&egrave;re de la cha&icirc;ne de l'attribut pattern. Par exemple, le menu qui affiche le contenu d'une variable de session peut
avoir un attribut pattern &eacute;gal &agrave; &laquo; Session &raquo;.
Attributs
pattern, doctypes, casesensitive, classpattern, displayrestriction, alias
• L'attribut pattern sp&eacute;cifie le mod&egrave;le des caract&egrave;res tap&eacute;s entra&icirc;nant l'affichage du menu de conseils de code dans
Dreamweaver. Si le premier caract&egrave;re est une lettre, un chiffre ou un trait de soulignement, Dreamweaver affiche
le menu uniquement si le caract&egrave;re qui pr&eacute;c&egrave;de le mod&egrave;le dans le document n'est pas une lettre, un chiffre ou un
trait de soulignement. Par exemple, si le mod&egrave;le est &laquo; Session. &raquo;, Dreamweaver n'affiche pas le menu si l'utilisateur
tape &laquo; ma_Session. &raquo;.
• L'attribut doctypes indique que le menu est actif uniquement pour les types de documents sp&eacute;cifi&eacute;s. Cet attribut
permet de sp&eacute;cifier diff&eacute;rentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP),
Adobe ColdFusion, etc. Vous pouvez sp&eacute;cifier l'attribut doctypes en tant que liste d'ID de types de documents
s&eacute;par&eacute;s par des virgules. Voir le fichier MMDocumentTypes.xml dans le dossier Configuration/Documenttypes de
Dreamweaver pour consulter la liste des types de documents de Dreamweaver.
• L'attribut casesensitive indique si le mod&egrave;le fait la distinction entre les majuscules et les minuscules. Les valeurs
possibles pour l'attribut casesensitive sont true, false ou un sous-ensemble de la liste s&eacute;par&eacute;e par des virgules
sp&eacute;cifi&eacute;e pour l'attribut doctypes. La liste des types de documents vous permet de sp&eacute;cifier si le mod&egrave;le fait la
distinction entre majuscules et minuscules pour certains types de documents plut&ocirc;t que d'autres. Par d&eacute;faut, la
valeur est false si vous omettez cet attribut. Si vous d&eacute;finissez la valeur de l'attribut casesensitive sur true, le
menu des conseils de code s'affiche uniquement si le texte tap&eacute; par l'utilisateur correspond exactement au mod&egrave;le
sp&eacute;cifi&eacute; par l'attribut du mod&egrave;le. Si vous d&eacute;finissez la valeur de l'attribut casesensitive sur false, le menu
s'affiche m&ecirc;me si le mod&egrave;le est en minuscules et le texte en majuscules.
• L'attribut classpattern associe la liste de membres de la classe &agrave; la classe.
• L'attribut displayrestriction sert &agrave; limiter le menu des conseils de code &agrave; des blocs de syntaxe d'un langage de
programmation sp&eacute;cifique, sur la base des mod&egrave;les de coloration du code d&eacute;finis dans CodeColoring.xml. Par
exemple, si displayrestriction= &quot;JavaScript&quot;, le menu de conseils de code est limit&eacute; au bloc de syntaxe
JavaScript.
• L'argument alias permet &agrave; l'utilisateur d'appeler les conseils de code avec une variante de motif diff&eacute;rente de celle
qui figure dans un argument pattern ou classpattern. Cet argument est facultatif.
Contenu
Balise menuitem.
Derni&egrave;re mise &agrave; jour le 22/6/2011
41
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Conteneur
Balise menugroup.
Exemple
&lt;menu pattern=&quot;CGI.&quot; doctypes=&quot;ColdFusion&quot;&gt;
&lt;menuitem&gt;
Description
Cette balise indique le texte d'un &eacute;l&eacute;ment dans un menu contextuel de conseils de code. La balise menuitem indique
&eacute;galement la valeur &agrave; ins&eacute;rer dans le texte lorsque vous s&eacute;lectionnez l'&eacute;l&eacute;ment.
Attributs
label, value, {icon}, {texticon}, object, source
• L'attribut label correspond &agrave; la cha&icirc;ne affich&eacute;e dans le menu contextuel de Dreamweaver.
• L'attribut value correspond &agrave; la cha&icirc;ne ins&eacute;r&eacute;e par Dreamweaver dans le document lorsque vous s&eacute;lectionnez la
commande. Lorsque l'utilisateur s&eacute;lectionne l'&eacute;l&eacute;ment du menu et appuie sur Entr&eacute;e ou Retour, Dreamweaver
remplace tout le texte tap&eacute; depuis l'affichage du menu. L'utilisateur a tap&eacute; les caract&egrave;res correspondant au mod&egrave;le
avant l'affichage du menu, si bien que Dreamweaver ne les ins&egrave;re pas une seconde fois. Par exemple, si vous
souhaitez ins&eacute;rer &amp;amp, l'entit&eacute; HTML de l'esperluette (&amp;), vous pouvez d&eacute;finir les balises menu et menuitem
suivantes :
&lt;menu pattern=&quot;&amp;amp;&quot;&gt;
&lt;menuitem label=&quot;&amp;amp;amp;&quot; value=&quot;amp;&quot; texticon=&quot;&amp;amp;&quot;/&gt;
L'attribut de valeur n'inclut pas l'esperluette (&amp;), car l'utilisateur l'a tap&eacute;e avant que le menu ne s'affiche.
• L'attribut icon (facultatif) sp&eacute;cifie le chemin d'acc&egrave;s &agrave; un fichier image affich&eacute; par Dreamweaver sous la forme
d'une ic&ocirc;ne situ&eacute;e &agrave; gauche du texte du menu. L'emplacement de ce fichier est d&eacute;fini par une URL (dossier
Configuration).
• L'attribut texticon (facultatif) affiche une cha&icirc;ne de texte dans la zone d'ic&ocirc;ne (et non un fichier image). Cet
attribut est utilis&eacute; pour le menu Entit&eacute;s HTML.
• L'attribut object fait r&eacute;f&eacute;rence au type auquel appartient l'&eacute;l&eacute;ment de menu. Par exemple, type de donn&eacute;es int&eacute;gr&eacute; :
cha&icirc;ne ou fichier JavaScript personnalis&eacute; de type de donn&eacute;es d&eacute;fini par l'utilisateur.
• L'attribut source fait r&eacute;f&eacute;rence &agrave; l'endroit o&ugrave; il est d&eacute;fini ou d'o&ugrave; il provient. Par exemple, DOM/Javascript/ custom
file.js.
Contenu
Aucun.
Conteneur
Balise menu.
Exemple
&lt;menuitem label=&quot;CONTENT_TYPE&quot; value=&quot;&amp;quot;CONTENT_TYPE&amp;quot;)
&quot; icon=&quot;shared/mm/images/hintMisc.gif&quot; /&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
42
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;function&gt;
Description
Cette balise figure dans le fichier CodeHints.xml. Cette balise remplace la balise menu pour la sp&eacute;cification des
arguments de fonction et des m&eacute;thodes d'objet d'un menu contextuel de conseils de code. Lorsque vous tapez un nom
de fonction ou de m&eacute;thode en mode Code, Dreamweaver affiche un menu de prototypes de fonction, indiquant
l'argument actuel en caract&egrave;re gras. Chaque fois que vous tapez une virgule, Dreamweaver met &agrave; jour le menu de
mani&egrave;re &agrave; afficher l'argument suivant en gras. Par exemple, si vous avez tap&eacute; le nom de fonction ArrayAppend dans
un document ColdFusion, le menu de conseils de code affiche ArrayAppend(array, value). Une fois la virgule
suivant array saisie, le menu se met &agrave; jour et affiche ArrayAppend(array, value).
Dans le cas des m&eacute;thodes d'objet, Dreamweaver affiche un menu regroupant les m&eacute;thodes d&eacute;finies pour l'objet dont
vous tapez le nom.
Les fonctions reconnues sont stock&eacute;es dans les fichiers XML du dossier Configuration/CodeHints.
Attributs
pattern, doctypes, casesensitive
• L'attribut pattern sp&eacute;cifie le nom de la fonction et sa liste d'arguments. S'il est utilis&eacute; avec des m&eacute;thodes, l'attribut
pattern d&eacute;crit le nom de l'objet et de la m&eacute;thode, ainsi que les arguments de cette derni&egrave;re. Avec un nom de
fonction, le menu de conseils de code s'affiche lorsque l'utilisateur tape functionname(. Le menu affiche la liste des
arguments relatifs &agrave; la fonction. S'il est utilis&eacute; avec une m&eacute;thode d'objet, le menu de conseils de code s'affiche
lorsque l'utilisateur tape objectname. (point inclus). Ce menu indique les m&eacute;thodes qui ont &eacute;t&eacute; sp&eacute;cifi&eacute;es pour
l'objet. Ensuite, le menu de conseils de code affiche une liste des arguments de la m&eacute;thode, comme il le fait avec une
fonction.
• L'attribut doctypes indique que le menu est actif uniquement pour les types de documents sp&eacute;cifi&eacute;s. Cet attribut
permet de sp&eacute;cifier diff&eacute;rentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP),
Macromedia ColdFusion, etc. Vous pouvez sp&eacute;cifier l'attribut doctypes en tant que liste d'ID de types de
documents s&eacute;par&eacute;s par des virgules. Pour obtenir une liste des types de documents de Dreamweaver, consultez le
fichier Configuration/Documenttypes/MMDocumentTypes.xml.
• L'attribut casesensitive indique si le mod&egrave;le fait la distinction entre les majuscules et les minuscules. Les valeurs
possibles pour l'attribut casesensitive sont true, false ou un sous-ensemble de la liste s&eacute;par&eacute;e par des virgules
sp&eacute;cifi&eacute;e pour l'attribut doctypes. La liste des types de documents vous permet de sp&eacute;cifier si le mod&egrave;le fait la
distinction entre majuscules et minuscules pour certains types de documents plut&ocirc;t que d'autres. Par d&eacute;faut, la
valeur est false si vous omettez cet attribut. Si vous d&eacute;finissez la valeur de l'attribut casesensitive sur true, le
menu de conseils de code s'affiche uniquement si le texte tap&eacute; par l'utilisateur correspond exactement au mod&egrave;le
sp&eacute;cifi&eacute; par l'attribut du mod&egrave;le. Si vous d&eacute;finissez la valeur de l'attribut casesensitive sur false, le menu
s'affiche m&ecirc;me si le mod&egrave;le est en minuscules et le texte en majuscules.
Contenu
Aucun.
Conteneur
Balise menugroup.
Derni&egrave;re mise &agrave; jour le 22/6/2011
43
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
// function example
&lt;function pattern=&quot;CreateDate(year, month, day)&quot; DOCTYPES=&quot;ColdFusion&quot; /&gt;
// object method example
&lt;function pattern=&quot;application.getAttribute(String name)&quot; DOCTYPES=&quot;JSP&quot; /&gt;
&lt;method&gt;
Description
Cette balise est con&ccedil;ue pour le cadre applicatif Spry. Cette balise remplace la balise menu pour la sp&eacute;cification des
m&eacute;thodes d'objet d'un menu contextuel de conseils de code. Lorsque vous tapez un nom de m&eacute;thode en mode Code,
Dreamweaver ouvre un menu de prototypes de m&eacute;thodes, qui fournit une liste de param&egrave;tres pour cette m&eacute;thode. Il
surveille ensuite la s&eacute;quence de param&egrave;tres &agrave; mesure qu'ils sont indiqu&eacute;s. Concernant les m&eacute;thodes qui n'ont pas de
param&egrave;tres, Dreamweaver termine l'appel de m&eacute;thode en ajoutant des parenth&egrave;ses ().
L'argument actif s'affiche en gras. Chaque fois que vous tapez une virgule, Dreamweaver met &agrave; jour le menu de mani&egrave;re
&agrave; afficher l'argument suivant en gras. Dans le cas des m&eacute;thodes d'objet, Dreamweaver affiche un menu regroupant les
m&eacute;thodes d&eacute;finies pour l'objet dont vous tapez le nom.
Attributs
pattern, icon, object, source, constructor, static, retType
• L'attribut pattern sp&eacute;cifie le nom de la m&eacute;thode et sa liste d'arguments. Il d&eacute;crit &eacute;galement les noms de l'objet et
la m&eacute;thode, ainsi que les arguments de la m&eacute;thode. Le menu affiche la liste des arguments de cette m&eacute;thode. Le
menu des conseils de code s'affiche lorsque l'utilisateur tape objectname. (point inclus). Ce menu indique les
m&eacute;thodes qui ont &eacute;t&eacute; sp&eacute;cifi&eacute;es pour l'objet. Ensuite, le menu de conseils de code affiche une liste des arguments de
la m&eacute;thode, comme il le fait avec une fonction.
• L'attribut icon sp&eacute;cifie l'ic&ocirc;ne &agrave; utiliser.
• L'attribut object fait r&eacute;f&eacute;rence au type auquel appartient la commande. Par exemple, type de donn&eacute;es int&eacute;gr&eacute; :
cha&icirc;ne ou fichier JavaScript personnalis&eacute; de type de donn&eacute;es d&eacute;fini par l'utilisateur.
• L'attribut source fait r&eacute;f&eacute;rence &agrave; l'endroit o&ugrave; il est d&eacute;fini ou d'o&ugrave; il provient. Par exemple, DOM/Javascript/ custom
file.js.
• L'argument constructor est une valeur bool&eacute;enne. constructor = true fait r&eacute;f&eacute;rence &agrave; la m&eacute;thode qui construit
l'instance de l'objet ; il est marqu&eacute; s&eacute;par&eacute;ment par rapport aux autres m&eacute;thodes d'objet.
• L'argument static est une valeur bool&eacute;enne. static =
true indique que la m&eacute;thode ne fonctionne pas sur une
instance sp&eacute;cifique de l'objet, mais sur le type d'objet proprement dit. Par exemple,
Date.parse(dateString)
• L'attribut retType fait r&eacute;f&eacute;rence au type de retour de m&eacute;thode qui, &agrave; son tour, peut &ecirc;tre un type d'objet afin de
prendre en charge une cascade de conseils de code.
Contenu
Aucun.
Conteneur
Balise menu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
44
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;parammenu&gt;
Description
Utilis&eacute; pour tout objet (JavaScript) afin de sp&eacute;cifier des conseils de param&egrave;tre pour les param&egrave;tres accept&eacute;s par la
m&eacute;thode ou la fonction.
Attributs
pattern, name, index, type
• L'attribut pattern sp&eacute;cifie le ou les caract&egrave;res qui d&eacute;clenchent le menu de conseils de code. Cet argument est
requis.
• L'attribut name sp&eacute;cifie le nom du param&egrave;tre. Cet argument est requis.
• L'attribut index sp&eacute;cifie le num&eacute;ro d'indice du param&egrave;tre qui fait l'objet d'un conseil (commence &agrave; z&eacute;ro). Cet
argument est requis.
• L'attribut type sp&eacute;cifie le type de donn&eacute;es. Les types de donn&eacute;es suivants sont pris en charge :
•
enumerated (valeur par d&eacute;faut), qui donne une liste de valeurs &lt;optionparammenuitem&gt; imbriqu&eacute;es &agrave; afficher.
•
spryDataReferences, qui donne la liste des colonnes de l'ensemble de donn&eacute;es Spry.
•
cssStyle, qui donne la liste des classes CSS disponibles pour la page.
•
cssId, qui donne la liste des r&egrave;gles d'ID de s&eacute;lection CSS disponibles pour la page.
•
optionArray, qui donne la liste des valeurs &lt;optionparammenu&gt; et &lt;parammenuitem&gt; &agrave; afficher (permet de
prendre en charge le param&egrave;tre de type tableau d'options).
Contenu
Aucun.
Conteneur
Balise method ou function.
&lt;parammenuitem&gt;
Description
Pour tout objet (JavaScript) afin de sp&eacute;cifier des conseils de param&egrave;tre pour les param&egrave;tres accept&eacute;s par la m&eacute;thode ou
la fonction.
Attributs
label, value, icon, {datatype}, object, source
• L'attribut label sp&eacute;cifie le nom que Dreamweaver doit afficher. Cet argument est requis.
• L'attribut value sp&eacute;cifie la valeur que Dreamweaver doit supprimer lorsque l'&eacute;l&eacute;ment est s&eacute;lectionn&eacute; dans le menu
de conseils de code. Cet argument est requis.
• L'attribut icon sp&eacute;cifie l'ic&ocirc;ne que Dreamweaver doit utiliser dans le menu des conseils de code. Cet argument est
requis.
• L'attribut datatype permet de sp&eacute;cifier string, ce qui indique que des guillemets fermants doivent &ecirc;tre ajout&eacute;s
lorsque l'utilisateur s&eacute;lectionne une valeur dans le menu de conseils de code. Cet argument est facultatif.
Derni&egrave;re mise &agrave; jour le 22/6/2011
45
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
• L'attribut object fait r&eacute;f&eacute;rence au type auquel appartient la commande. Par exemple, type de donn&eacute;es int&eacute;gr&eacute; :
cha&icirc;ne ou fichier JavaScript personnalis&eacute; de type de donn&eacute;es d&eacute;fini par l'utilisateur.
• L'attribut source fait r&eacute;f&eacute;rence &agrave; l'endroit o&ugrave; il est d&eacute;fini ou d'o&ugrave; il provient. Par exemple, DOM/Javascript/ custom
file.js.
Contenu
Aucun.
Conteneur
Balise parammenu.
&lt;optionparammenu&gt;
Description
Utilis&eacute; pour tout objet (JavaScript) afin de sp&eacute;cifier des options pour les conseils de tableau pour les arguments
accept&eacute;s par la m&eacute;thode ou la fonction. Un tableau d'options est un argument qui peut comporter des sous-arguments
sous la forme option:value. La plupart des objets Spry a recours &agrave; un argument de tableau d'options pour permettre
aux utilisateurs de configurer le comportement d'un objet (par exemple, un ensemble de donn&eacute;es, un widget ou un
effet). Les tableaux d'options se pr&eacute;sentent g&eacute;n&eacute;ralement sous la forme suivante : {option1: valeur1, option2:
valeur2, option3: valeur3, etc.}
Attributs
pattern, label, value, icon, type
• L'attribut pattern sp&eacute;cifie le ou les caract&egrave;res qui d&eacute;clenchent le menu de conseils de code. Cet argument est
requis.
• L'attribut label sp&eacute;cifie le nom du param&egrave;tre. Cet argument est requis.
• L'attribut value sp&eacute;cifie la valeur du param&egrave;tre &agrave; ins&eacute;rer lorsque l'utilisateur s&eacute;lectionne le conseil de code. Cet
argument est requis.
• L'attribut icon sp&eacute;cifie l'ic&ocirc;ne &agrave; utiliser. Cet argument est requis.
• L'attribut type sp&eacute;cifie le type de donn&eacute;es. Les types de donn&eacute;es suivants sont pris en charge :
•
enumerated (valeur par d&eacute;faut), qui donne une liste de valeurs optionparammenuitem imbriqu&eacute;es &agrave; afficher.
•
spryDataReferences, qui donne la liste des colonnes de l'ensemble de donn&eacute;es Spry.
•
cssStyle, qui donne la liste des classes CSS disponibles pour la page.
•
cssId, qui donne la liste des r&egrave;gles d'ID de s&eacute;lection CSS disponibles pour la page.
Contenu
Aucun.
Conteneur
Balise parammenu de type optionArray.
Derni&egrave;re mise &agrave; jour le 22/6/2011
46
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;optionparammenuitem&gt;
Description
Utilis&eacute; pour tout objet (JavaScript) afin de sp&eacute;cifier des conseils de param&egrave;tre pour les param&egrave;tres accept&eacute;s par la
m&eacute;thode ou la fonction.
Attributs
label, value, icon, {datatype}
• L'attribut label sp&eacute;cifie le nom &agrave; afficher. Cet argument est requis.
• L'attribut value sp&eacute;cifie la valeur &agrave; supprimer lorsque l'&eacute;l&eacute;ment est s&eacute;lectionn&eacute; dans le menu de conseils de code.
Cet argument est requis.
• L'attribut icon sp&eacute;cifie l'ic&ocirc;ne &agrave; utiliser dans le menu de conseils de code. Cet argument est requis.
• L'attribut datatype permet de sp&eacute;cifier string, ce qui indique que des guillemets fermants doivent &ecirc;tre ajout&eacute;s
lorsque l'utilisateur s&eacute;lectionne une valeur dans le menu de conseils de code. Cet argument est facultatif.
Contenu
Aucun.
Conteneur
Balise &lt;optionparammenu&gt;.
&lt;property&gt;
Description
Cette balise d&eacute;crit les propri&eacute;t&eacute;s/champs d'un objet et comporte les attributs standard suivants.
Attributs
label, value, icon, object, source, static, propType, item
• L'attribut label correspond &agrave; la cha&icirc;ne affich&eacute;e dans le menu contextuel de Dreamweaver.
• L'attribut value correspond &agrave; la cha&icirc;ne ins&eacute;r&eacute;e par Dreamweaver dans le document lorsque vous s&eacute;lectionnez la
commande. Lorsque l'utilisateur s&eacute;lectionne l'&eacute;l&eacute;ment du menu et appuie sur Entr&eacute;e ou Retour, Dreamweaver
remplace tout le texte tap&eacute; depuis l'affichage du menu. L'utilisateur a tap&eacute; les caract&egrave;res correspondant au mod&egrave;le
avant l'affichage du menu, si bien que Dreamweaver ne les ins&egrave;re pas une seconde fois.
• L'attribut icon (facultatif) sp&eacute;cifie le chemin d'acc&egrave;s &agrave; un fichier image affich&eacute; par Dreamweaver sous la forme
d'une ic&ocirc;ne situ&eacute;e &agrave; gauche du texte du menu. L'emplacement de ce fichier est d&eacute;fini par une URL (dossier
Configuration).
• L'attribut object fait r&eacute;f&eacute;rence au type auquel appartient l'&eacute;l&eacute;ment de menu. Par exemple, type de donn&eacute;es int&eacute;gr&eacute; :
cha&icirc;ne ou fichier JavaScript personnalis&eacute; de type de donn&eacute;es d&eacute;fini par l'utilisateur.
• L'attribut source fait r&eacute;f&eacute;rence &agrave; l'endroit o&ugrave; il est d&eacute;fini ou d'o&ugrave; il provient. Par exemple, DOM/Javascript/ custom
file.js.
• L'argument static est une valeur bool&eacute;enne. static =
true indique que la m&eacute;thode ne fonctionne pas sur une
instance sp&eacute;cifique de l'objet, mais sur le type d'objet proprement dit. Par exemple,
Number.MAX_VALUE
Derni&egrave;re mise &agrave; jour le 22/6/2011
47
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
• L'attribut propType fait r&eacute;f&eacute;rence au type de propri&eacute;t&eacute; qui, &agrave; son tour, peut &ecirc;tre un type d'objet afin de prendre en
charge une cascade de conseils de propri&eacute;t&eacute;s. Par exemple,
domElement.innerHTML.&lt;code hints for String type&gt;
• L'attribut item fait r&eacute;f&eacute;rence au type d'&eacute;l&eacute;ment lorsque l'attribut propType est du type conteneur de collection.
item sp&eacute;cifie le type de chaque &eacute;l&eacute;ment dans le conteneur (en supposant qu'il s'agisse d'un ensemble homog&egrave;ne,
c'est-&agrave;-dire un ensemble d'&eacute;l&eacute;ments du m&ecirc;me type).
Contenu
Aucun.
Conteneur
Balise menu.
&lt;event&gt;
Description
Cette balise d&eacute;crit les &eacute;v&eacute;nements d'un objet et comporte les attributs standard suivants.
Attributs
label, icon, source, object
• L'attribut label sp&eacute;cifie le nom de l'&eacute;v&eacute;nement.
• L'attribut icon sp&eacute;cifie le chemin vers un fichier d'image que Dreamweaver affiche en tant qu'ic&ocirc;ne &agrave; c&ocirc;t&eacute; du texte
du menu.
• L'attribut source fait r&eacute;f&eacute;rence &agrave; l'endroit o&ugrave; il est d&eacute;fini ou d'o&ugrave; il provient.
• L'attribut object fait r&eacute;f&eacute;rence au type auquel appartient l'&eacute;l&eacute;ment de menu.
Conteneur
Balise menu.
Exemple
&lt;event label=&quot;onblur&quot; source=&quot;DOM 1&amp;amp;2&quot; icon=&quot;shared/mm/images/codeHintEvent.gif&quot;/&gt;
A propos de la coloration du code
Dreamweaver permet de personnaliser ou d'&eacute;tendre les mod&egrave;les de coloration affich&eacute;s en mode Code de mani&egrave;re &agrave;
ajouter de nouveaux mots cl&eacute;s &agrave; un mod&egrave;le ou &agrave; ajouter des mod&egrave;les de coloration du code correspondant &agrave; de
nouveaux types de documents. Par exemple, si vous d&eacute;veloppez des fonctions JavaScript dans le script c&ocirc;t&eacute; client, vous
pouvez ajouter le nom de ces fonctions &agrave; la section des mots cl&eacute;s de mani&egrave;re &agrave; les afficher dans la couleur indiqu&eacute;e dans
la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. De m&ecirc;me, si vous d&eacute;veloppez un nouveau langage de programmation pour un serveur
d'application et que vous souhaitez distribuer un nouveau type de document dans le but d'aider les utilisateurs de
Dreamweaver &agrave; l'inclure dans le processus de cr&eacute;ation de pages, vous pouvez ajouter un mod&egrave;le de coloration du code
correspondant &agrave; ce type de document.
Derni&egrave;re mise &agrave; jour le 22/6/2011
48
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Dreamweaver contient la fonction JavaScript dreamweaver.reloadCodeColoring() permettant de recharger les
fichiers XML de coloration du code susceptibles d'avoir &eacute;t&eacute; modifi&eacute;s manuellement. Pour plus d'informations sur cette
fonction, voir le Guide des API de Dreamweaver.
Pour mettre &agrave; jour un mod&egrave;le de coloration du code ou ajouter un nouveau mod&egrave;le, vous devez modifier les fichiers
de d&eacute;finition de coloration du code.
Coloration du code des fichiers
Dreamweaver d&eacute;finit les styles et les mod&egrave;les de coloration du code dans des fichiers XML se trouvant dans le dossier
Configuration/CodeColoring. Un fichier de style de coloration du code d&eacute;finit le style des champs indiqu&eacute;s dans les
d&eacute;finitions de syntaxe. Le nœud racine est &lt;codeColors&gt;. Un fichier de mod&egrave;le de coloration du code d&eacute;finit la
syntaxe de coloration du code ; le nœud racine est &lt;codeColoring&gt;.
Le fichier de style de coloration du code de Dreamweaver est Colors.xml. Les fichiers de syntaxe de coloration du code
de Dreamweaver sont CodeColoring.xml, ASP JavaScript.xml, ASP VBScript.xml, ASP.NET CSharp.xml et ASP.NET
VB.xml.
L'extrait du fichier Colors.xml ci-dessous illustre la hi&eacute;rarchie de balises dans un fichier de style de coloration du code :
Les couleurs sont indiqu&eacute;es sous la forme de valeurs hexad&eacute;cimales rouge-vert-bleu (RVB). Par exemple, l'instruction
text=&quot;009999&quot; figurant dans le code XML ci-dessus assigne une couleur bleu-vert (sarcelle) &agrave; l'ID
&quot;CodeColor_JavascriptNative&quot;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
49
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
L'extrait du fichier codeColoring.xml ci-dessous illustre la hi&eacute;rarchie de balises dans un fichier de mod&egrave;le de coloration
du code ainsi que la relation entre le fichier de styles de couleur et le mod&egrave;le de couleur :
Notez que les balises syntaxColor et tagColor du fichier Colors.xml assignent des valeurs de couleur et de style &agrave;
une valeur de cha&icirc;ne id. La valeur id permet alors d'assigner un style &agrave; une balise scheme dans le fichier
CodeColoring.xml. Par exemple, l'id de la balise defaultTag figurant dans l'extrait CodeColoring.xml est
&quot;CodeColor_HTMLComment&quot;. Dans le fichier Colors.xml, la valeur text= attribu&eacute;e &agrave; la valeur id de
&quot;CodeColor_HTMLComment&quot; est &quot;#999999&quot;, c'est-&agrave;-dire gris.
Dreamweaver comporte les mod&egrave;les de coloration du code suivants : Default, HTML, JavaScript, ASP_JavaScript,
ASP_VBScript, JSP et ColdFusion. Le mod&egrave;le par d&eacute;faut poss&egrave;de une valeur id &eacute;gale &agrave; &quot;Text&quot;. Dreamweaver l'utilise
pour les types de documents qui ne poss&egrave;dent pas de mod&egrave;le de coloration du code d&eacute;fini.
Un fichier de coloration du code contient les balises suivantes, d&eacute;crites ci-dessous :
scheme, blockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd,
cssImport/, cssMedia/, cssProperty/, cssSelector/, cssValue/, defaultAttribute, defaultTag,
defaultText/, endOfLineComment, entity/, functionKeyword, idChar1, idCharRest, ignoreCase,
ignoreMMTParams, ignoreTags, isLocked, keyword, keywords, numbers/, operators, regexp,
sampleText, searchPattern, stringStart, stringEnd, stringEsc, tagGroup
&lt;scheme&gt;
Description
La balise scheme indique la coloration du code assign&eacute;e &agrave; un bloc de texte de code. Un fichier peut contenir plusieurs
mod&egrave;les sp&eacute;cifiant diff&eacute;rentes colorations pour diff&eacute;rents langages de script ou de balise. Chaque mod&egrave;le poss&egrave;de une
priorit&eacute; qui permet d'imbriquer un bloc de texte correspondant &agrave; un mod&egrave;le dans un bloc de texte correspondant &agrave; un
autre mod&egrave;le.
Depuis Dreamweaver CS4, le filtre Coloration du code fusionne les balises &lt;scheme&gt; poss&eacute;dant le m&ecirc;me id. Toutes les
balises qui ne sont pas en conflit sont ajout&eacute;es au m&ecirc;me mod&egrave;le (&lt;scheme&gt;). En cas de conflit, c'est le mod&egrave;le
poss&eacute;dant la date de fichier la plus r&eacute;cente qui l'emporte.
Derni&egrave;re mise &agrave; jour le 22/6/2011
50
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
name, id, priority, {doctypes}
•
name=&quot;nom_mod&egrave;le&quot; Cha&icirc;ne attribuant un nom au mod&egrave;le. Le nom du mod&egrave;le s'affiche dans la bo&icirc;te de dialogue
Modifier le mod&egrave;le de coloration de Dreamweaver. Dreamweaver affiche une combinaison de nom de mod&egrave;le et
de champ, par exemple HTML Comment. Si vous n'attribuez pas de nom, les champs du mod&egrave;le n'apparaissent pas
dans la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration. Pour plus d'informations sur la bo&icirc;te de dialogue
Modifier le mod&egrave;le de coloration, voir &laquo; Modification des mod&egrave;les &raquo; &agrave; la page 68.
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
•
priority=&quot;cha&icirc;ne&quot; Valeurs comprises entre 1 et 99. La priorit&eacute; la plus haute est 1. Indique la priorit&eacute; d'un
mod&egrave;le. Les blocs se trouvant au sein de blocs dont la priorit&eacute; est sup&eacute;rieure sont ignor&eacute;s ; les blocs se trouvant au
sein de blocs dont la priorit&eacute; est inf&eacute;rieure ou &eacute;gale sont prioritaires. Si vous n'indiquez pas de priorit&eacute;, la valeur par
d&eacute;faut est de 50.
•
doctypes=&quot;liste_doc&quot; Facultatif. Indique une liste des types de documents, s&eacute;par&eacute;s par des virgules, auxquels
s'applique le mod&egrave;le de coloration du code. Cette valeur est indispensable pour la r&eacute;solution des conflits impliquant
diff&eacute;rents blocs de d&eacute;but et de fin dont les extensions sont identiques.
Contenu
blockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd,
cssProperty/, cssSelector/, cssValue/, defaultAttribute, defaultText/, endOfLineComment,
entity/, functionKeyword, idChar1, idCharRest, ignoreCase, ignoreMMTParam, ignoreTags,
keywords, numbers/, operators, regexp, sampleText, searchPattern, stringStart, stringEnd,
stringEsc, urlProtocol, urlProtocols
Conteneur
Balise codeColoring.
Exemple
&lt;scheme name=&quot;Text&quot; id=&quot;Text&quot; doctypes=&quot;Text&quot; priority=&quot;1&quot;&gt;
&lt;blockEnd&gt;
Description
Facultatif. Texte d&eacute;limitant la fin du bloc de texte de ce mod&egrave;le. Les balises blockEnd et blockStart doivent &ecirc;tre
&eacute;quilibr&eacute;es et leur combinaison doit &ecirc;tre unique. La casse des valeurs indiqu&eacute;es n'est pas prise en compte. La valeur de
la balise blockEnd peut &ecirc;tre compos&eacute;e d'un seul caract&egrave;re. Vous pouvez cr&eacute;er plusieurs instances de cette balise. Pour
plus d'informations sur les cha&icirc;nes blockEnd, voir &laquo; Caract&egrave;res g&eacute;n&eacute;riques &raquo; &agrave; la page 65.
Attributs
Aucun.
Exemple
&lt;blockEnd&gt;&lt;![CDATA[---&gt;]]&gt;&lt;/blockEnd&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
51
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;blockStart&gt;
Description
Facultatif. Sp&eacute;cifi&eacute;e uniquement si le mod&egrave;le de coloration peut &ecirc;tre imbriqu&eacute; dans un autre mod&egrave;le de coloration. Les
balises blockEnd et blockStart doivent &ecirc;tre &eacute;quilibr&eacute;es et leur combinaison doit &ecirc;tre unique. La casse des valeurs
indiqu&eacute;es n'est pas prise en compte. La valeur de la balise blockStart doit comporter au minimum deux caract&egrave;res.
Vous pouvez cr&eacute;er plusieurs instances de cette balise. Pour plus d'informations sur les cha&icirc;nes blockStart, voir
&laquo; Caract&egrave;res g&eacute;n&eacute;riques &raquo; &agrave; la page 65. Pour plus d'informations sur l'attribut blockStartscheme, voir &laquo; Coloration
des d&eacute;limiteurs de bloc de mod&egrave;le &raquo; &agrave; la page 63.
Attributs
canNest, doctypes, id, name, scheme
•
canNestIndique si le mod&egrave;le peut s'imbriquer. Les valeurs sont Yes ou No. La valeur par d&eacute;faut est No.
•
doctypes=&quot;type_doc1, type_doc2,… &quot; Obligatoire. Indique une liste des types de documents, s&eacute;par&eacute;s par des
virgules, dans lesquels vous pouvez imbriquer ce mod&egrave;le de coloration du code. Les types de documents sont d&eacute;finis
dans le fichier Configuration/Document Types/MMDocumentTypes.xml de Dreamweaver.
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire lorsque scheme=&quot;customText&quot;. Cha&icirc;ne d'identificateur permettant de mapper la
couleur et le style &agrave; cet &eacute;l&eacute;ment de syntaxe.
•
name=&quot;nom_affich&eacute;&quot;Cha&icirc;ne apparaissant dans la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration lorsque
scheme=&quot;customText&quot;.
•
schemeObligatoire. D&eacute;finit la coloration des cha&icirc;nes blockStart et blockEnd. Pour plus d'informations sur les
valeurs possibles de l'attribut &laquo; scheme &raquo;, voir &laquo; Coloration des d&eacute;limiteurs de bloc de mod&egrave;le &raquo; &agrave; la page 63.
Exemple
&lt;blockStart doctypes=&quot;ColdFusion,CFC&quot; scheme=&quot;innerText&quot; canNest=&quot;Yes&quot;&gt;&lt;![CDATA[&lt;!---]]&gt;
&lt;/blockStart&gt;
&lt;brackets&gt;
Description
Liste des caract&egrave;res repr&eacute;sentant des crochets.
Attributs
name, id
•
•
name=&quot;nom_crochet&quot; Cha&icirc;ne assignant un nom &agrave; la liste des crochets.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;brackets name=&quot;Bracket&quot; id=&quot;CodeColor_JavaBracket&quot;&gt;&lt;![CDATA[{[()]}]]&gt;
&lt;/brackets&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
52
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;charStart&gt;
Description
Contient une cha&icirc;ne de texte repr&eacute;sentant le d&eacute;limiteur du d&eacute;but d'un caract&egrave;re. Les balises charStart et charEnd
doivent &ecirc;tre &eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises charStart … charEnd.
Attributs
Aucun.
Exemple
&lt;charStart&gt;&lt;![CDATA[']]&gt;&lt;/charStart&gt;
&lt;charEnd&gt;
Description
Contient une cha&icirc;ne de texte repr&eacute;sentant le d&eacute;limiteur de fin d'un caract&egrave;re. Les balises charStart et charEnd
doivent &ecirc;tre &eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises charStart … charEnd.
Attributs
Aucun.
Exemple
&lt;charEnd&gt;&lt;![CDATA[']]&gt;&lt;/charEnd&gt;
&lt;charEsc&gt;
Description
Contient une cha&icirc;ne de texte repr&eacute;sentant un caract&egrave;re d'&eacute;chappement. Vous pouvez ins&eacute;rer plusieurs balises
charEsc.
Attributs
Aucun.
Exemple
&lt;charEsc&gt;&lt;![CDATA[\]]&gt;&lt;/charEsc&gt;
&lt;commentStart&gt;
Description
Cha&icirc;ne de texte d&eacute;limitant le d&eacute;but d'un bloc de commentaire. Les balises commentStart et commentEnd doivent &ecirc;tre
&eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises commentStart…/commentEnd.
Attributs
Aucun.
Exemple
&lt;commentStart&gt;&lt;![CDATA[&lt;%--]]&gt;&lt;/commentStart&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
53
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;commentEnd&gt;
Description
Cha&icirc;ne de texte d&eacute;limitant la fin d'un bloc de commentaire. Les balises commentStart et commentEnd doivent &ecirc;tre
&eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises commentStart…/commentEnd.
Attributs
Aucun.
Exemple
&lt;commentEnd&gt;&lt;![CDATA[--%&gt;]]&gt;&lt;/commentEnd&gt;
&lt;cssImport/&gt;
Description
Balise vide indiquant la r&egrave;gle de coloration du code de la fonction @import de l'&eacute;l&eacute;ment style dans une feuille de style CSS.
Attributs
name, id
•
•
name=&quot;nom_importCSS&quot; Cha&icirc;ne assignant un nom &agrave; la fonction @import CSS.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;cssImport name=&quot;@import&quot; id=&quot;CodeColor_CSSImport&quot; /&gt;
&lt;cssMedia/&gt;
Description
Balise vide indiquant la r&egrave;gle de coloration du code de la fonction @media de l'&eacute;l&eacute;ment style dans une CSS.
Attributs
name, id
•
•
name=&quot;nom_m&eacute;diaCSS&quot; Cha&icirc;ne assignant un nom &agrave; la fonction @media CSS.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;cssMedia name=&quot;@media&quot; id=&quot;CodeColor_CSSMedia&quot; /&gt;
&lt;cssProperty/&gt;
Description
Balise vide indiquant les r&egrave;gles CSS et regroupant des attributs de coloration du code.
Derni&egrave;re mise &agrave; jour le 22/6/2011
54
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
name, id
•
name=&quot;nom_propri&eacute;t&eacute;CSS&quot; Cha&icirc;ne assignant un nom &agrave; la propri&eacute;t&eacute; CSS.
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Pr&eacute;f&eacute;rence de couleur de code
Propri&eacute;t&eacute; CSS
Exemple
&lt;cssProperty name=&quot;Property&quot; id=&quot;CodeColor_CSSProperty&quot; /&gt;
&lt;cssSelector/&gt;
Description
Balise vide indiquant les r&egrave;gles CSS et regroupant des attributs de coloration du code.
Attributs
name, id
•
•
name=&quot;nom_s&eacute;lecteurCSS&quot; Cha&icirc;ne assignant un nom au s&eacute;lecteur CSS.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;cssSelector name=&quot;Selector&quot; id=&quot;CodeColor_CSSSelector&quot; /&gt;
&lt;cssValue/&gt;
Description
Balise vide indiquant les r&egrave;gles CSS et regroupant des attributs de coloration du code.
Attributs
name, id
•
•
name=&quot;nom_valeurCSS&quot; Cha&icirc;ne assignant un nom &agrave; la valeur CSS.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;cssValue name=&quot;Value&quot; id=&quot;CodeColor_CSSValue&quot; /&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
55
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;defaultAttribute&gt;
Description
Facultatif. Cette balise s'applique uniquement &agrave; la syntaxe de balise (c'est-&agrave;-dire une syntaxe pour laquelle
ignoreTags=&quot;No&quot;). Si cette balise figure dans le code, tous les attributs de balise sont color&eacute;s suivant le style qui lui
est assign&eacute;. Si ce n'est pas le cas, la couleur des attributs est identique &agrave; celle de la balise correspondante.
Attributs
name •Cha&icirc;ne assignant un nom &agrave; l'attribut par d&eacute;faut.
Exemple
&lt;defaultAttribute name=&quot;Attribute&quot;/&gt;
&lt;defaultTag&gt;
Description
Cette balise permet de sp&eacute;cifier la couleur et le style par d&eacute;faut des balises d'un mod&egrave;le.
Attributs
name, id
•
•
name=&quot;nom_affich&eacute;&quot; Cha&icirc;ne affich&eacute;e par Dreamweaver dans l'&eacute;diteur de coloration du code.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;defaultTag name=&quot;Other Tags&quot; id=&quot;CodeColor_HTMLTag&quot; /&gt;
&lt;defaultText/&gt;
Description
Facultatif. Si cette balise figure dans le code, les cha&icirc;nes de texte d&eacute;finies par toute autre balise sont color&eacute;es suivant le
style assign&eacute; &agrave; cette balise. Si ce n'est pas le cas, le texte est de couleur noire.
Attributs
name, id
•
•
name=&quot;nom_s&eacute;lecteurCSS&quot; Cha&icirc;ne assignant un nom au s&eacute;lecteur CSS.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;defaultText name=&quot;Text&quot; id=&quot;CodeColor_TextText&quot; /&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
56
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;endOfLineComment&gt;
Description
Cha&icirc;ne de texte d&eacute;limitant le d&eacute;but d'un commentaire allant jusqu'&agrave; la fin de la ligne actuelle. Vous pouvez ins&eacute;rer
plusieurs balises endOfLineComment…/endOfLineComment.
Attributs
Aucun.
Exemple
&lt;endOfLineComment&gt;&lt;![CDATA[//]]&gt;&lt;/endOfLineComment&gt;
&lt;entity/&gt;
Description
Balise vide indiquant que les caract&egrave;res sp&eacute;ciaux HTML doivent &ecirc;tre reconnus et contenir des attributs de coloration.
Attributs
name, id
•
•
name=&quot;nom_entit&eacute;&quot; Cha&icirc;ne assignant un nom &agrave; l'entit&eacute;.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;entity name=&quot;Special Characters&quot; id=&quot;CodeColor_HTMLEntity&quot; /&gt;
&lt;functionKeyword&gt;
Description
Identifie les mots cl&eacute;s d&eacute;finissant une fonction. Ces mots cl&eacute;s permettent &agrave; Dreamweaver de naviguer dans le code.
Vous pouvez ins&eacute;rer plusieurs balises functionKeyword.
Attributs
name, id
•
•
name=&quot;nom_motcl&eacute;Fonction&quot; Cha&icirc;ne assignant un nom au bloc functionKeyword.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;functionKeyword name=&quot;Function Keyword&quot;
id=&quot;CodeColor_JavascriptFunction&quot;&gt;function&lt;/functionKeyword&gt;
&lt;idChar1&gt;
Description
Liste de chacun des caract&egrave;res identifiables par Dreamweaver comme premier caract&egrave;re d'un identifiant.
Derni&egrave;re mise &agrave; jour le 22/6/2011
57
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
includeAlpha, includeDecimal, includeHiAscii
Tous les attributs sont bool&eacute;ens et peuvent avoir la valeur True ou False.
Exemple
&lt;identifier name=&quot;Identifier&quot; id=&quot;CodeColor_JavascriptIdentifier&quot;&gt;
&lt;idChar1&gt;_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;/idChar1&gt; &lt;/identifier&gt;
&lt;idCharRest&gt;
Description
Liste de caract&egrave;res devant &ecirc;tre identifi&eacute;s comme les autres caract&egrave;res de l'identificateur. Si la balise idChar1 n'est pas
sp&eacute;cifi&eacute;e, tous les caract&egrave;res de l'identifiant sont valid&eacute;s en fonction de cette liste.
Attributs
includeAlpha, includeDecimal, includeHiAscii
Tous les attributs sont bool&eacute;ens et peuvent avoir la valeur True ou False.
Exemple
&lt;identifier name=&quot;Identifier&quot; id=&quot;CodeColor_JavascriptIdentifier&quot;&gt; &lt;idCharRest&gt;
_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&lt;/idCharRest&gt;
&lt;/identifier&gt;
&lt;identifier&gt;
Description
Les nœuds &lt;idChar1&gt; et &lt;idCharRest&gt; doivent &ecirc;tre entour&eacute;s d'un nœud &lt;identifier&gt;. Les attributs name et id
doivent &ecirc;tre d&eacute;plac&eacute;s de &lt;idCharRest&gt;/&lt;idChar1&gt; vers le nœud &lt;identifier&gt; qui les entoure
Si vous d&eacute;finissez plusieurs types d'identifiants, veillez &agrave; sp&eacute;cifier des valeurs distinctes pour idChar1 pour tous ces
identifiants. Si vous ne respectez pas cette r&egrave;gle, la coloration qui en r&eacute;sulte est al&eacute;atoire pour les identificants qui
d&eacute;butent par un caract&egrave;re inclus dans deux styles qui se chevauchent. Par exemple :
&lt;identifier name=&quot;N1&quot; id=&quot;I1&quot;&gt;
&lt;idchar1&gt;a&lt;/idchar1&gt;
&lt;idcharrest includeAlpha=&quot;true&quot; includeDecimal=&quot;true&quot;
includeHiAscii=&quot;true&quot;&gt;_&lt;/idCharRest&gt;
&lt;/identifier&gt;
&lt;identifier name=&quot;N2&quot; id=&quot;I2&quot;&gt;
&lt;idchar1 includeAlpha=&quot;true&quot; &gt;$_&lt;/idchar1&gt; // ERROR!!!
can be either N1 or N2, the coloring will be random for it!
&lt;idcharrest includeAlpha=&quot;true&quot; includeDecimal=&quot;true&quot;
includeHiAscii=&quot;true&quot;&gt;_&lt;/idCharRest&gt;
&lt;/identifier&gt;
text that starts with &quot;a&quot;
La syntaxe ant&eacute;rieure &agrave; Dreamweaver CS5 (sans le nœud &lt;identifier&gt;) est toujours prise en charge. Cependant, ne
m&eacute;langez pas l'ancienne syntaxe et la nouvelle dans le m&ecirc;me fichier. Si vous m&eacute;langez les styles, ceux de l'ancienne
syntaxe seront ignor&eacute;s. En d'autres termes, si la syntaxe contient un nœud &lt;identifier&gt;, tous les
nœudsidChar1/idCharRest qui ne sont pas entour&eacute;s d'un nœud&lt;identifier&gt; sont ignor&eacute;s.
Derni&egrave;re mise &agrave; jour le 22/6/2011
58
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
name, id
•
name=&quot;nom_restCarID&quot; Cha&icirc;ne assignant un nom au bloc stringStart.
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;identifier name=&quot;Identifier&quot; id=&quot;CodeColor_JavascriptIdentifier&quot;&gt; &lt;idCharRest&gt;
_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&lt;/idCharRest&gt;&lt;/identifier
&lt;ignoreCase&gt;
Description
Indique si la casse des caract&egrave;res doit &ecirc;tre ignor&eacute;e lors de la comparaison des expressions et des mots cl&eacute;s. Les valeurs
sont Yes ou No. La valeur par d&eacute;faut est Yes.
Attributs
Aucun.
Exemple
&lt;ignoreCase&gt;Yes&lt;/ignoreCase&gt;
&lt;ignoreMMTParams&gt;
Description
Indique si une couleur particuli&egrave;re doit &ecirc;tre attribu&eacute;e &agrave; la balise MMTInstance:Param, &lt;!-- InstanceParam ou &lt;!- #InstanceParam. Les valeurs sont Yes et No ; la valeur par d&eacute;faut est Yes. Cette balise assure la coloration
appropri&eacute;e des pages utilisant des mod&egrave;les.
Attributs
Aucun.
Exemple
&lt;ignoreMMTParams&gt;No&lt;/ignoreMMTParams&gt;
&lt;ignoreTags&gt;
Description
Indique si les balises doivent &ecirc;tre ignor&eacute;es. Les valeurs sont Yes et No ; la valeur par d&eacute;faut est Yes. R&eacute;gl&eacute;e sur No lorsque
la syntaxe concerne un langage de marquage de balises d&eacute;limit&eacute; par &lt; et &gt;. R&eacute;glez la valeur sur Yes si la syntaxe
correspond &agrave; un langage de programmation.
Attributs
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
59
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
&lt;ignoreTags&gt;No&lt;/ignoreTags&gt;
&lt;isLocked&gt;
Description
Indique si le texte correspondant au mod&egrave;le est autoris&eacute; &agrave; &ecirc;tre modifi&eacute; en mode Code. Les valeurs sont Yes et No. La
valeur par d&eacute;faut est No.
Attributs
Aucun.
Exemple
&lt;isLocked&gt;Yes&lt;/isLocked&gt;
&lt;keyword&gt;
Description
Cha&icirc;ne de texte d&eacute;finissant un mot cl&eacute;. Vous pouvez ins&eacute;rer plusieurs balises keyword. Il n'existe aucune restriction
li&eacute;e au premier caract&egrave;re d'un mot cl&eacute; ; en revanche, les caract&egrave;res suivants doivent &ecirc;tre a-z, A-Z, 0-9, _, $ ou @.
La couleur du code est sp&eacute;cifi&eacute;e par les balises contenant keyword.
Attributs
Aucun.
Exemple
&lt;keyword&gt;.getdate&lt;/keyword&gt;
&lt;keywords&gt;
Description
Liste des mots cl&eacute;s correspondant au type sp&eacute;cifi&eacute; dans l'attribut category. Vous pouvez ins&eacute;rer plusieurs balises
keywords.
Attributs
name, id
•
•
name=&quot;nom_mots_cl&eacute;s&quot; Cha&icirc;ne assignant un nom &agrave; la liste des mots cl&eacute;s.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Contenu
&lt;keyword&gt;&lt;/keyword&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
60
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
&lt;keywords name=&quot;Reserved Keywords&quot; id=&quot;CodeColor_JavascriptReserved&quot;&gt;
&lt;keyword&gt;break&lt;/keyword&gt;
&lt;keyword&gt;case&lt;/keyword&gt;
&lt;/keywords&gt;
&lt;numbers/&gt;
Description
Balise vide sp&eacute;cifiant les chiffres devant &ecirc;tre reconnus et contenant des attributs de couleur.
Attributs
name, id
•
•
name=&quot;nom_chiffre&quot; Cha&icirc;ne assignant un nom &agrave; la balise numbers.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;numbers name=&quot;Number&quot; id=&quot;CodeColor_CFScriptNumber&quot; /&gt;
&lt;op&eacute;rateurs&gt;
Description
Liste des caract&egrave;res devant &ecirc;tre reconnus comme op&eacute;rateurs.
Attributs
name, id
•
name=&quot;nom_op&eacute;rateur&quot; Cha&icirc;ne assignant un nom &agrave; la liste des caract&egrave;res op&eacute;rateurs.
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Exemple
&lt;operators name=&quot;Operator&quot; id=&quot;CodeColor_JavaOperator&quot;&gt;&lt;![CDATA[+*/%&lt;&gt;!?:=&amp;|^~]]&gt;&lt;/operators&gt;
&lt;regexp&gt;
Description
Sp&eacute;cifie une liste de balises searchPattern.
Attributs
name, id, delimiter, escape
•
•
name=&quot;nom_d&eacute;butCha&icirc;ne&quot; Cha&icirc;ne assignant un nom &agrave; la liste des cha&icirc;nes de mod&egrave;le de recherche.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
Derni&egrave;re mise &agrave; jour le 22/6/2011
61
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
•
delimiterCaract&egrave;re ou cha&icirc;ne situ&eacute; au d&eacute;but et &agrave; la fin d'une expression r&eacute;guli&egrave;re.
•
escape Caract&egrave;re ou cha&icirc;ne signalant le traitement de caract&egrave;res sp&eacute;ciaux, &eacute;galement appel&eacute; caract&egrave;re ou cha&icirc;ne
d'&eacute;chappement.
Contenu
&lt;searchPattern&gt;&lt;/searchPattern&gt;
Exemple
&lt;regexp name=&quot;RegExp&quot; id=&quot;CodeColor_JavascriptRegexp&quot; delimiter=&quot;/&quot; escape=&quot;\\&quot;&gt;
&lt;searchPattern&gt;&lt;![CDATA[(\s*/\e*\\/]]&gt;&lt;/searchPattern&gt;
&lt;searchPattern&gt;&lt;![CDATA[=\s*/\e*\\/]]&gt;&lt;/searchPattern&gt;
&lt;/regexp&gt;
&lt;sampleText&gt;
Description
Texte servant &agrave; la repr&eacute;sentation dans la fen&ecirc;tre Aper&ccedil;u de la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration. Pour
plus d'informations sur la bo&icirc;te de dialogue Modifier le mod&egrave;le de coloration, voir &laquo; Modification des mod&egrave;les &raquo; &agrave; la
page 68.
Attributs
doctypes
•
doctypes=&quot;doc_type1, doc_type2,...&quot; Types de documents pour lesquels cet &eacute;chantillon appara&icirc;t.
Exemple
&lt;sampleText doctypes=&quot;JavaScript&quot;&gt;&lt;![CDATA[/* JavaScript */
function displayWords(arrayWords) {
for (i=0; i &lt; arrayWords.length(); i++) {
// inline comment
alert(&quot;Word &quot; + i + &quot; is &quot; + arrayWords[i]);
}
}
var tokens = new Array(&quot;Hello&quot;, &quot;world&quot;);
displayWords(tokens);
]]&gt;&lt;/sampleText&gt;
&lt;searchPattern&gt;
Description
Cha&icirc;ne de caract&egrave;res d&eacute;finissant un mod&egrave;le de recherche r&eacute;gulier &agrave; l'aide des caract&egrave;res g&eacute;n&eacute;riques pris en charge.
Vous pouvez ins&eacute;rer plusieurs balises searchPattern.
Attributs
Aucun.
Conteneur
Balise regexp.
Derni&egrave;re mise &agrave; jour le 22/6/2011
62
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple
&lt;searchPattern&gt;&lt;![CDATA[(\s*/\e*\\/]]&gt;&lt;/searchPattern&gt;
&lt;stringStart&gt;
Description
Ces balises contiennent une cha&icirc;ne de texte repr&eacute;sentant le d&eacute;limiteur du d&eacute;but d'une cha&icirc;ne. Les balises stringStart
et stringEnd doivent &ecirc;tre &eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises stringStart … stringEnd.
Attributs
name, id, wrap
•
•
name=&quot;nom_stringStart&quot; Cha&icirc;ne assignant un nom au bloc stringStart.
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
•
wrap=&quot;true&quot; ou &quot;false&quot;. D&eacute;finit la reconnaissance ou non des cha&icirc;nes de texte plac&eacute;es sur la ligne suivante. La
valeur par d&eacute;faut est &quot;true&quot;.
Exemple
&lt;stringStart name=&quot;Attribute Value&quot; id=&quot;CodeColor_HTMLString&quot;&gt;&lt;![CDATA[&quot;]]&gt;&lt;/stringStart&gt;
&lt;stringEnd&gt;
Description
Contient une cha&icirc;ne de texte repr&eacute;sentant le d&eacute;limiteur de fin d'une cha&icirc;ne de code. Les balises stringStart et
stringEnd doivent &ecirc;tre &eacute;quilibr&eacute;es. Vous pouvez indiquer plusieurs paires de balises stringStart … stringEnd.
Attributs
Aucun.
Exemple
&lt;stringEnd&gt;&lt;![CDATA[&quot;]]&gt;&lt;/stringEnd&gt;
&lt;stringEsc&gt;
Description
Contient une cha&icirc;ne de texte repr&eacute;sentant le d&eacute;limiteur du caract&egrave;re d'&eacute;chappement d'une cha&icirc;ne. Vous pouvez ins&eacute;rer
plusieurs balises stringEsc.
Attributs
Aucun.
Exemple
&lt;stringEsc&gt;&lt;![CDATA[\]]&gt;&lt;/stringEsc&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
63
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;tagGroup&gt;
Description
Cette balise regroupe une ou plusieurs balises auxquelles vous pouvez assigner une couleur et un style uniques.
Attributs
id, name, taglibrary, tags
•
id=&quot;id_cha&icirc;ne&quot; Obligatoire. Cha&icirc;ne d'identificateur permettant de mapper la couleur et le style &agrave; cet &eacute;l&eacute;ment de
syntaxe.
•
•
name=&quot;nom_affich&eacute;&quot; Cha&icirc;ne affich&eacute;e par Dreamweaver dans l'&eacute;diteur de coloration du code.
taglibrary=&quot;id_biblioth&egrave;que_balises&quot; Identificateur de la biblioth&egrave;que de balises &agrave; laquelle le groupe
appartient.
•
tags=&quot;liste_balise&quot; Balise ou liste de balises s&eacute;par&eacute;es par des virgules comprenant le groupe de balises.
Exemple
&lt;tagGroup name=&quot;HTML Table Tags&quot; id=&quot;CodeColor_HTMLTable&quot; taglibrary=&quot;DWTagLibrary_html&quot;
tags=&quot;table,tbody,td,tfoot,th,thead,tr,vspec,colw,hspec&quot; /&gt;
Coloration des d&eacute;limiteurs de bloc de mod&egrave;le
L'attribut de mod&egrave;le blockStart d&eacute;termine la coloration des cha&icirc;nes de d&eacute;but et de fin de bloc ou des d&eacute;limiteurs de
bloc. Les valeurs valides pour l'attribut blockStart sont r&eacute;pertori&eacute;es ci-apr&egrave;s.
Remarque : Ne pas confondre l'attribut blockStart.scheme et la balise scheme.
innerText
Cette valeur indique &agrave; Dreamweaver que les d&eacute;limiteurs de bloc doivent avoir la m&ecirc;me couleur que le texte par d&eacute;faut
du mod&egrave;le qu'ils renferment.
Le mod&egrave;le Mod&egrave;le illustre l'effet de ce mod&egrave;le. Le mod&egrave;le Mod&egrave;le correspond &agrave; des blocs de code en lecture seule. La
couleur grise indique qu'il est impossible de les modifier. Les d&eacute;limiteurs de bloc, &agrave; savoir les cha&icirc;nes &lt;!#EndEditable
--&gt; et &lt;!-- #BeginEditable &quot;...&quot; --&gt;, sont aussi de couleur grise car, il est &eacute;galement impossible de les modifier.
Exemple de code
&lt;!-- #EndEditable --&gt;
&lt;p&gt;&lt;b&gt;&lt;font size=&quot;+2&quot;&gt;header&lt;/font&gt;&lt;/b&gt;&lt;/p&gt;
&lt;!-- #BeginEditable &quot;test&quot; --&gt;
&lt;p&gt;Here's some editable text &lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;!-- #EndEditable --&gt;
Exemple
&lt;blockStart doctypes=&quot;ASP-JS,ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion,CFC, HTML,
JSP,LibraryItem,PHP_MySQL&quot; scheme=&quot;innerText&quot;&gt;&lt;![CDATA[&lt;!--\s*#BeginTemplate]]&gt;
&lt;/blockStart&gt;
customText
Cette valeur indique &agrave; Dreamweaver qu'une couleur personnalis&eacute;e doit &ecirc;tre appliqu&eacute;e aux d&eacute;limiteurs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
64
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple de code
Les d&eacute;limiteurs de bloc de script PHP, qui apparaissent en rouge, illustrent l'effet de la valeur customText :
&lt;?php
if ($loginMsg &lt;&gt; &quot;&quot;)
echo $loginMsg;
?&gt;
Exemple
&lt;blockStart name=&quot;Block Delimiter&quot; id=&quot;CodeColor_JavaBlock&quot; doctypes=&quot;JSP&quot;
scheme=&quot;customText&quot;&gt;&lt;![CDATA[&lt;%]]&gt;&lt;/blockStart&gt;
outerTag
La valeur outerTag indique que les balises blockStart et blockEnd sont des balises &agrave; part enti&egrave;re et que
Dreamweaver doit les colorer comme des balises du mod&egrave;le qui les entoure.
Le mod&egrave;le JavaScript, dans lequel les cha&icirc;nes &lt;script&gt; et &lt;/script&gt; correspondent aux balises blockStart et
blockEnd, illustre cette valeur. Ce mod&egrave;le correspond aux blocs de code JavaScript, dans lequel les balises ne sont pas
reconnues; les d&eacute;limiteurs doivent donc prendre la coloration du mod&egrave;le qui les entoure.
Exemple de code
&lt;script language=&quot;JavaScript&quot;&gt;
// comment
if (true)
window.alert(&quot;Hello, World&quot;);
&lt;/script&gt;
Exemple
&lt;blockStart doctypes=&quot;PHP_MySQL&quot; scheme=&quot;outerTag&quot;&gt;
&lt;![CDATA[&lt;script\s+language=&quot;php&quot;&gt;]]&gt;&lt;/blockStart&gt;
innerTag
Cette valeur est similaire &agrave; la valeur outerTag ; la seule diff&eacute;rence est que la coloration provient du mod&egrave;le se trouvant
&agrave; l'int&eacute;rieur des d&eacute;limiteurs. Ceci s'applique actuellement &agrave; la balise html.
nameTag
Cette valeur indique que la cha&icirc;ne blockStart correspond au d&eacute;but d'une balise, que la cha&icirc;ne blockEnd correspond
&agrave; la fin d'une balise et que ces d&eacute;limiteurs doivent &ecirc;tre color&eacute;s suivant les param&egrave;tres de balise du mod&egrave;le.
Ce type de mod&egrave;le affiche les balises pouvant &ecirc;tre imbriqu&eacute;es dans d'autres balises (par exemple, la balise cfoutput).
Exemple de code
&lt;input type=&quot;text&quot; name=&quot;zip&quot;
&lt;cfif newRecord IS &quot;no&quot;&gt;
&lt;cfoutput query=&quot;employee&quot;&gt; Value=&quot;#zip#&quot; &lt;/cfoutput&gt;
&lt;/cfif&gt;
&gt;
Exemple
&lt;blockStart doctypes=&quot;ColdFusion,CFC&quot; scheme=&quot;nameTag&quot;&gt;
&lt;![CDATA[&lt;cfoutput\n]]&gt;&lt;/blockStart&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
65
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
nameTagScript
Cette valeur est identique au mod&egrave;le nameTag ; cependant, son contenu se compose de script, par exemple, des
instructions ou des expressions d'assignation, par opposition aux paires d'attributs name=value.
Ce type de mod&egrave;le affiche uniquement les balises contenant du script (par exemple, les balises ColdFusion cfset, cfif
et cfifelse) et pouvant &ecirc;tre imbriqu&eacute;es au sein d'autres balises.
Exemple de code
Voir l'exemple illustrant &laquo; nameTag &raquo; &agrave; la page 64.
Exemple
&lt;blockStart doctypes=&quot;ColdFusion,CFC&quot;
scheme=&quot;nameTagScript&quot;&gt;&lt;![CDATA[&lt;cfset\n]]&gt;&lt;/blockStart&gt;
Traitement des mod&egrave;les
Dreamweaver comporte trois modes de base de coloration du code : mode CSS, mode Script et mode Balises.
Dans chaque mode, Dreamweaver applique uniquement la coloration du code &agrave; certains champs. Le tableau ci-dessous
r&eacute;pertorie les champs auxquels s'applique la coloration du code pour chaque mode.
Champ
CSS
Balises
Script
defaultText
X
X
defaultTag
X
defaultAttribute
X
comment
X
X
X
string
X
X
X
cssProperty
X
cssSelector
X
cssValue
X
X
X
character
function keyword
X
identifier
X
number
X
operator
X
X
brackets
X
X
keywords
X
X
Afin de faciliter le processus de d&eacute;finition de mod&egrave;les, Dreamweaver permet de sp&eacute;cifier des caract&egrave;res g&eacute;n&eacute;riques et
des caract&egrave;res d'&eacute;chappement.
Caract&egrave;res g&eacute;n&eacute;riques
La liste ci-dessous r&eacute;pertorie les caract&egrave;res g&eacute;n&eacute;riques pris en charge dans Dreamweaver, les cha&icirc;nes permettant de les
sp&eacute;cifier et une description de leur utilisation.
Derni&egrave;re mise &agrave; jour le 22/6/2011
66
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Caract&egrave;re g&eacute;n&eacute;rique
Cha&icirc;ne
d'&eacute;chappem
ent
Description
Caract&egrave;re g&eacute;n&eacute;rique
\*
Ignore tous les caract&egrave;res de la r&egrave;gle jusqu'&agrave; la d&eacute;tection du caract&egrave;re suivant le caract&egrave;re
g&eacute;n&eacute;rique. Par exemple, &lt;MMTInstance:Editable name=&quot;\*&quot;&gt; permet de d&eacute;tecter
toutes les balises de ce type pour lesquelles l'attribut name est sp&eacute;cifi&eacute;.
Caract&egrave;re g&eacute;n&eacute;rique avec
caract&egrave;re d'&eacute;chappement
\e*x
x correspond au caract&egrave;re d'&eacute;chappement.
M&ecirc;me utilisation que le caract&egrave;re g&eacute;n&eacute;rique, avec possibilit&eacute; de sp&eacute;cifier un caract&egrave;re
d'&eacute;chappement. Le caract&egrave;re suivant le caract&egrave;re d'espacement est ignor&eacute;. Le caract&egrave;re
suivant le caract&egrave;re g&eacute;n&eacute;rique peut ainsi appara&icirc;tre dans une cha&icirc;ne sans correspondre au
crit&egrave;re sp&eacute;cifi&eacute; pour l'arr&ecirc;t du traitement du caract&egrave;re g&eacute;n&eacute;rique.
Par exemple, /\e*\\/ permet de reconna&icirc;tre une expression JavaScript r&eacute;guli&egrave;re
commen&ccedil;ant et terminant par une barre oblique (/) et pouvant contenir des barres obliques
pr&eacute;c&eacute;d&eacute;es d'une barre oblique invers&eacute;e (\). La barre oblique invers&eacute;e correspond au
caract&egrave;re d'&eacute;chappement de coloration du code ; d&egrave;s lors, vous devez la pr&eacute;c&eacute;der d'une
barre oblique invers&eacute;e lorsque vous la sp&eacute;cifiez dans du code XML color&eacute;.
Espace blanc facultatif
\s*
Permet de reconna&icirc;tre z&eacute;ro ou plusieurs espaces vides ou les caract&egrave;res de nouvelle ligne.
Par exemple, &lt;!--\s*#include permet de reconna&icirc;tre des directives d'inclusion ASP, que
l'expression #include soit pr&eacute;c&eacute;d&eacute;e ou non d'espace blanc, car les deux cas sont valides.
Les caract&egrave;res g&eacute;n&eacute;riques espace blanc correspondent &agrave; toutes les combinaisons d'espace
blanc et de caract&egrave;res de nouvelle ligne.
Espace blanc obligatoire
\s+
Permet de reconna&icirc;tre un ou plusieurs espaces vides ou les caract&egrave;res de nouvelle ligne.
Par exemple, &lt;!--#include\s+virtual permet de reconna&icirc;tre des directives d'inclusion
ASP contenant toutes les combinaisons d'espace blanc entre les expressions #include et
virtual. Un espace blanc doit obligatoirement s&eacute;parer ces deux expressions, mais il peut
correspondre &agrave; toutes les combinaisons de caract&egrave;res d'espace blanc valides.
Les caract&egrave;res g&eacute;n&eacute;riques espace blanc correspondent &agrave; toutes les combinaisons d'espace
blanc et de caract&egrave;res de nouvelle ligne.
Caract&egrave;res d'&eacute;chappement
La liste ci-dessous r&eacute;pertorie les caract&egrave;res d'&eacute;chappement pris en charge dans Dreamweaver, les cha&icirc;nes permettant
de les sp&eacute;cifier et une description de leur utilisation.
Caract&egrave;re d'&eacute;chappement
Cha&icirc;ne
d'&eacute;chappem
ent
Description
Barre oblique invers&eacute;e
\\
La barre oblique invers&eacute;e (\) correspond au caract&egrave;re d'&eacute;chappement de coloration du code
; elle doit donc &ecirc;tre ignor&eacute;e pour &ecirc;tre sp&eacute;cifi&eacute;e dans une r&egrave;gle de coloration du code.
Espace blanc
\s
Ce caract&egrave;re d'&eacute;chappement correspond &agrave; tous les caract&egrave;res non visibles, &agrave; l'exception de
ceux correspondant au caract&egrave;re de nouvelle ligne, comme les espaces et les tabulations.
Les caract&egrave;res g&eacute;n&eacute;riques espace blanc facultatif et espace blanc obligatoire correspondent
&agrave; la fois aux caract&egrave;res d'espace blanc et &agrave; ceux de nouvelle ligne.
Nouvelle ligne
\n
Ce caract&egrave;re d'&eacute;chappement correspond aux caract&egrave;res de nouvelle ligne (&eacute;galement
appel&eacute;s sauts de ligne) et aux retours chariot.
Longueur maximale de cha&icirc;ne
La longueur maximale autoris&eacute;e pour les cha&icirc;nes de donn&eacute;es est de 100 caract&egrave;res. Par exemple, la balise blockEnd
suivante contient un caract&egrave;re g&eacute;n&eacute;rique.
&lt;blockEnd&gt;&lt;![CDATA[&lt;!--\s*#BeginEditable\s*&quot;\*&quot;\s*--&gt;]]&gt;&lt;/blockEnd&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
67
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
En partant du principe que les cha&icirc;nes de caract&egrave;re g&eacute;n&eacute;rique espace blanc facultatif (\s*) correspondent &agrave; un seul
espace, g&eacute;n&eacute;r&eacute; automatiquement par Dreamweaver, la cha&icirc;ne de donn&eacute;es comprend 26 caract&egrave;res, plus une cha&icirc;ne de
caract&egrave;re g&eacute;n&eacute;rique (\*) correspondant au nom.
&lt;!-- #BeginEditable &quot;\*&quot; --&gt;
Le nom de r&eacute;gion modifiable peut donc comporter jusqu'&agrave; 74 caract&egrave;res, c'est-&agrave;-dire 100 caract&egrave;res (longueur
maximale) moins 26.
Priorit&eacute; des mod&egrave;les
Dreamweaver applique la coloration de la syntaxe de texte en mode Code &agrave; l'aide de l'algorithme suivant :
1 Dreamweaver d&eacute;termine le mod&egrave;le de syntaxe initial en fonction du type de document du fichier actuel. Le type de
document du fichier est d&eacute;termin&eacute; en fonction de l'attribut scheme.documentType. Si aucun type n'est d&eacute;tect&eacute;,
le mod&egrave;le pour lequel scheme.documentType = &quot;Text&quot; est utilis&eacute;.
2 Les mod&egrave;les peuvent &ecirc;tre imbriqu&eacute;s s'ils comportent des paires blockStart…blockEnd. Tous les mod&egrave;les
pouvant &ecirc;tre imbriqu&eacute;s et pour lesquels l'extension du fichier actuel est r&eacute;pertori&eacute;e dans l'un des attributs
blockStart.doctypes sont activ&eacute;s pour le fichier actuel; les autres mod&egrave;les sont d&eacute;sactiv&eacute;s.
Remarque : Toutes les combinaisons blockStart/blockEnd doivent &ecirc;tre uniques.
Les mod&egrave;les peuvent s'imbriquer au sein d'un autre mod&egrave;le &agrave; condition que scheme.priority soit sup&eacute;rieure ou
&eacute;gale au mod&egrave;le ext&eacute;rieur. Si la priorit&eacute; est la m&ecirc;me, le mod&egrave;le s'imbrique uniquement au niveau du corps du
mod&egrave;le ext&eacute;rieur. Par exemple, le bloc &lt;script&gt;...&lt;/script&gt; peut uniquement s'imbriquer dans le bloc
&lt;html&gt;...&lt;/html&gt; contenant des balises l&eacute;gales ; il ne peut donc pas s'imbriquer au sein d'une balise, d'un attribut,
d'une cha&icirc;ne, d'un commentaire, etc.
Les mod&egrave;les dont la priorit&eacute; est sup&eacute;rieure au mod&egrave;le ext&eacute;rieur peuvent s'imbriquer &agrave; quasiment tous les niveaux
du mod&egrave;le ext&eacute;rieur. Par exemple, le bloc &lt;html&gt;...&lt;/html&gt; peut non seulement s'imbriquer au niveau du corps
du bloc &lt;%...%&gt;, mais &eacute;galement au sein d'une balise, d'un attribut, d'une cha&icirc;ne, d'un commentaire, etc.
Le niveau d'imbrication maximum est de 4.
3 Lorsqu'il recherche des cha&icirc;nes blockStart, Dreamweaver utilise toujours la correspondance la plus longue.
4 Une fois la cha&icirc;ne blockEnd atteinte pour le mod&egrave;le actuel, la coloration de syntaxe revient au niveau o&ugrave; la cha&icirc;ne
blockStart est d&eacute;tect&eacute;e. Par exemple, si un bloc &lt;%...%&gt; est d&eacute;tect&eacute; au sein d'une cha&icirc;ne HTML, la coloration
reprend avec la couleur de la cha&icirc;ne HTML.
Derni&egrave;re mise &agrave; jour le 22/6/2011
68
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Modification des mod&egrave;les
Vous pouvez modifier les styles d'un mod&egrave;le de coloration du code soit en modifiant le fichier de coloration du code
ou en s&eacute;lectionnant la cat&eacute;gorie Coloration du code dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences de Dreamweaver (voir
illustration ci-dessous) :
Les param&egrave;tres de couleur et de style des champs susceptibles d'appara&icirc;tre plusieurs fois (par exemple, stringStart)
doivent &ecirc;tre indiqu&eacute;s uniquement pour la premi&egrave;re balise. Si vous r&eacute;partissez les param&egrave;tres de couleur et de style sur
plusieurs balises et que vous les modifiez ult&eacute;rieurement dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, vous perdrez vos
donn&eacute;es.
Remarque : Adobe recommande de cr&eacute;er des copies de sauvegarde de tous les fichiers XML avant d'apporter vos
modifications. V&eacute;rifiez toutes les modifications apport&eacute;es manuellement avant de modifier les param&egrave;tres de style et de
couleur dans la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Si vous modifiez un fichier XML non valide dans la bo&icirc;te de dialogue
Pr&eacute;f&eacute;rences, vous perdrez vos donn&eacute;es.
Pour modifier les styles d'un mod&egrave;le dans la cat&eacute;gorie Coloration du code de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences, doublecliquez sur un type de document ou cliquez sur le bouton Modifier le mod&egrave;le de coloration ; la bo&icirc;te de dialogue
Modifier le mod&egrave;le de coloration s'affiche.
Pour modifier le style d'un &eacute;l&eacute;ment en particulier, s&eacute;lectionnez-le dans la liste Styles pour. Le volet Styles pour
r&eacute;pertorie les champs du mod&egrave;le modifi&eacute; ainsi que les mod&egrave;les susceptibles d'appara&icirc;tre sous forme de bloc au sein de
ce mod&egrave;le. Par exemple, si vous modifiez le mod&egrave;le HTML, les champs des blocs CSS et JavaScript apparaissent
&eacute;galement.
Derni&egrave;re mise &agrave; jour le 22/6/2011
69
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Les champs de mod&egrave;le r&eacute;pertori&eacute;s correspondent aux champs d&eacute;finis dans le fichier XML. La valeur de l'attribut
scheme.name pr&eacute;c&egrave;de chacun des champs r&eacute;pertori&eacute;s dans le volet Styles pour. Les champs sans nom ne sont pas
r&eacute;pertori&eacute;s.
Outre la coloration du code, le style ou le format d'un &eacute;l&eacute;ment d&eacute;signe la mise en caract&egrave;re gras, la mise en italique, le
soulignement et la couleur d'arri&egrave;re-plan. Une fois l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le volet Styles pour, vous pouvez
modifier toutes ces caract&eacute;ristiques de style.
La zone Aper&ccedil;u affiche un &eacute;chantillon de texte auquel s'appliquent les param&egrave;tres indiqu&eacute;s. L'&eacute;chantillon est d&eacute;fini
dans le param&egrave;tre sampleText du mod&egrave;le.
S&eacute;lectionnez un &eacute;l&eacute;ment dans la zone Aper&ccedil;u pour modifier la s&eacute;lection de la liste Style pour.
Si vous modifiez les param&egrave;tres d'un &eacute;l&eacute;ment d'un mod&egrave;le, Dreamweaver consigne la valeur dans le fichier de
coloration et remplace le param&egrave;tre d'origine. Lorsque vous cliquez sur OK, Dreamweaver actualise automatiquement
toutes les modifications de coloration du code.
Exemples de coloration du code
Les exemples de coloration du code ci-dessous illustrent les mod&egrave;les de coloration du code d'un document de style en
cascade et d'un document JavaScript. Par souci de concision, les listes de mots cl&eacute;s de l'exemple JavaScript sont
abr&eacute;g&eacute;es.
Coloration du code CSS
&lt;scheme name=&quot;CSS&quot; id=&quot;CSS&quot; doctypes=&quot;CSS&quot; priority=&quot;50&quot;&gt;
&lt;ignoreCase&gt;Yes&lt;/ignoreCase&gt;
&lt;ignoreTags&gt;Yes&lt;/ignoreTags&gt;
&lt;blockStart doctypes=&quot;ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL&quot; scheme=&quot;outerTag&quot;&gt;
&lt;![CDATA[&lt;style&gt;]]&gt;&lt;/blockStart&gt;
&lt;blockEnd&gt;&lt;![CDATA[&lt;/style&gt;]]&gt;&lt;/blockEnd&gt;
&lt;blockStart doctypes=&quot;ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL&quot; scheme=&quot;outerTag&quot;&gt;
&lt;![CDATA[&lt;style\s+\*&gt;]]&gt;&lt;/blockStart&gt;
&lt;blockEnd&gt;&lt;![CDATA[&lt;/style&gt;]]&gt;&lt;/blockEnd&gt;
&lt;commentStart name=&quot;Comment&quot; id=&quot;CodeColor_CSSComment&quot;&gt;&lt;![CDATA[ /*]]&gt;&lt;/commentStart&gt;
&lt;commentEnd&gt;&lt;![CDATA[*/]]&gt;&lt;/commentEnd&gt;
&lt;endOfLineComment&gt;&lt;![CDATA[&lt;!--]]&gt;&lt;/endOfLineComment&gt;
&lt;endOfLineComment&gt;&lt;![CDATA[--&gt;]]&gt;&lt;/endOfLineComment&gt;
&lt;stringStart name=&quot;String&quot; id=&quot;CodeColor_CSSString&quot;&gt;&lt;![CDATA[&quot;]]&gt;&lt;/stringStart&gt;
&lt;stringEnd&gt;&lt;![CDATA[&quot;]]&gt;&lt;/stringEnd&gt;
&lt;stringStart&gt;&lt;![CDATA[']]&gt;&lt;/stringStart&gt;
&lt;stringEnd&gt;&lt;![CDATA[']]&gt;&lt;/stringEnd&gt;
&lt;stringEsc&gt;&lt;![CDATA[\]]&gt;&lt;/stringEsc&gt;
&lt;cssSelector name=&quot;Selector&quot; id=&quot;CodeColor_CSSSelector&quot; /&gt;
&lt;cssProperty name=&quot;Property&quot; id=&quot;CodeColor_CSSProperty&quot; /&gt;
&lt;cssValue name=&quot;Value&quot; id=&quot;CodeColor_CSSValue&quot; /&gt;
&lt;sampleText doctypes=&quot;CSS&quot;&gt;&lt;![CDATA[/* Comment */
H2, .head2
{
font-family : 'Sans-Serif';
font-weight : bold;
color : #339999;
}]]&gt;
&lt;/sampleText&gt;
&lt;/scheme&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
70
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Exemple de texte CSS
L'exemple du mod&egrave;le CSS suivant illustre le mod&egrave;le de coloration du code CSS :
/* Comment */
H2, .head2
{
font-family : 'Sans-Serif';
font-weight : bold;
color : #339999;
}
Les lignes suivantes, extraites du fichier Colors.xml, fournissent les valeurs de couleur et de style affich&eacute;es dans
l'exemple et ont &eacute;t&eacute; assign&eacute;es par le mod&egrave;le de coloration du code :
&lt;syntaxColor id=&quot;CodeColor_CSSSelector&quot; text=&quot;#FF00FF&quot; /&gt;
&lt;syntaxColor id=&quot;CodeColor_CSSProperty&quot; text=&quot;#000099&quot; /&gt;
&lt;syntaxColor id=&quot;CodeColor_CSSValue&quot; text=&quot;#0000FF&quot; /&gt;
Coloration du code JavaScript
&lt;scheme name=&quot;JavaScript&quot; id=&quot;JavaScript&quot; doctypes=&quot;JavaScript&quot; priority=&quot;50&quot;&gt;
&lt;ignoreCase&gt;No&lt;/ignoreCase&gt;
&lt;ignoreTags&gt;Yes&lt;/ignoreTags&gt;
&lt;blockStart doctypes=&quot;ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL&quot; scheme=&quot;outerTag&quot;&gt;
&lt;![CDATA[&lt;script&gt;]]&gt;&lt;/blockStart&gt;
&lt;blockEnd&gt;&lt;![CDATA[&lt;/script&gt;]]&gt;&lt;/blockEnd&gt;
&lt;blockStart doctypes=&quot;ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL&quot; scheme=&quot;outerTag&quot;&gt;
&lt;![CDATA[&lt;script\s+\*&gt;]]&gt;&lt;/blockStart&gt;
&lt;blockEnd&gt;&lt;![CDATA[&lt;/script&gt;]]&gt;&lt;/blockEnd&gt;
&lt;commentStart name=&quot;Comment&quot; id=&quot;CodeColor_JavascriptComment&quot;&gt;
&lt;![CDATA[/*]]&gt;&lt;/commentStart&gt;
&lt;commentEnd&gt;&lt;![CDATA[*/]]&gt;&lt;/commentEnd&gt;
&lt;endOfLineComment&gt;&lt;![CDATA[//]]&gt;&lt;/endOfLineComment&gt;
&lt;endOfLineComment&gt;&lt;![CDATA[&lt;!--]]&gt;&lt;/endOfLineComment&gt;
&lt;endOfLineComment&gt;&lt;![CDATA[--&gt;]]&gt;&lt;/endOfLineComment&gt;
&lt;stringStart name=&quot;String&quot; id=&quot;CodeColor_JavascriptString&quot;&gt;
&lt;![CDATA[&quot;]]&gt;&lt;/stringStart&gt;
&lt;stringEnd&gt;&lt;![CDATA[&quot;]]&gt;&lt;/stringEnd&gt;
&lt;stringStart&gt;&lt;![CDATA[']]&gt;&lt;/stringStart&gt;
&lt;stringEnd&gt;&lt;![CDATA[']]&gt;&lt;/stringEnd&gt;
&lt;stringEsc&gt;&lt;![CDATA[\]]&gt;&lt;/stringEsc&gt;
&lt;brackets name=&quot;Bracket&quot; id=&quot;CodeColor_JavascriptBracket&quot;&gt;
&lt;![CDATA[{[()]}]]&gt;&lt;/brackets&gt;
&lt;operators name=&quot;Operator&quot; id=&quot;CodeColor_JavascriptOperator&quot;&gt;
&lt;![CDATA[+-*/%&lt;&gt;!?:=&amp;|^]]&gt;&lt;/operators&gt;
&lt;numbers name=&quot;Number&quot; id=&quot;CodeColor_JavascriptNumber&quot; /&gt;
&lt;regexp name=&quot;RegExp&quot; id=&quot;CodeColor_JavascriptRegexp&quot; delimiter=&quot;/&quot; escape=&quot;\\&quot;&gt;
&lt;searchPattern&gt;&lt;![CDATA[(\s*/\e*\\/]]&gt;&lt;/searchPattern&gt;
&lt;searchPattern&gt;&lt;![CDATA[=\s*/\e*\\/]]&gt;&lt;/searchPattern&gt;
&lt;/regexp&gt;
&lt;idChar1&gt;_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;/idChar1&gt;
&lt;idCharRest name=&quot;Identifier&quot; id=&quot;CodeColor_JavascriptIdentifier&quot;&gt;
_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&lt;/idCharRest&gt;
&lt;functionKeyword name=&quot;Function Keyword&quot; id=&quot;CodeColor_JavascriptFunction&quot;&gt;
function&lt;/functionKeyword&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
71
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;keywords name=&quot;Reserved Keywords&quot; id=&quot;CodeColor_JavascriptReserved&quot;&gt;
&lt;keyword&gt;break&lt;/keyword&gt;
. . .
&lt;/keywords&gt;
&lt;keywords name=&quot;Native Keywords&quot; id=&quot;CodeColor_JavascriptNative&quot;&gt;
&lt;keyword&gt;abs&lt;/keyword&gt;
. . .
&lt;/keywords&gt;
&lt;keywords id=&quot;CodeColor_JavascriptNumber&quot;&gt;
&lt;keyword&gt;Infinity&lt;/keyword&gt;
&lt;keyword&gt;Nan&lt;/keyword&gt;
&lt;/keywords&gt;
&lt;keywords name=&quot;Client Keywords&quot; id=&quot;CodeColor_JavascriptClient&quot;&gt;
&lt;keyword&gt;alert&lt;/keyword&gt;
. . .
&lt;/keywords&gt;
&lt;sampleText&gt;&lt;![CDATA[/* JavaScript */
function displayWords(arrayWords) {
for (i=0; i &lt; arrayWords.length(); i++) {
// inline comment
alert(&quot;Word &quot; + i + &quot; is &quot; + arrayWords[i]);
}
}
var tokens = new Array(&quot;Hello&quot;, &quot;world&quot;);
displayWords(tokens);
]]&gt;&lt;/sampleText&gt;
&lt;/scheme&gt;
Exemple de texte JavaScript
L'exemple du mod&egrave;le JavaScript suivant illustre le mod&egrave;le de coloration du code JavaScript :
/* JavaScript */ function displayWords(arrayWords) {
for (i=0; i &lt; arrayWords.length(); i++) {
// inline comment
alert(&quot;Word &quot; + i + &quot; is &quot; + arrayWords[i]);
}
}
var tokens = new Array(&quot;Hello&quot;, &quot;world&quot;);
displayWords(tokens);
Les lignes suivantes, extraites du fichier Colors.xml, fournissent les valeurs de couleur et de style affich&eacute;es dans
l'exemple et ont &eacute;t&eacute; assign&eacute;es par le mod&egrave;le de coloration du code :
&lt;syntaxColor
&lt;syntaxColor
&lt;syntaxColor
&lt;syntaxColor
&lt;syntaxColor
&lt;syntaxColor
id=&quot;CodeColor_JavascriptComment&quot; text=&quot;#999999&quot; italic=&quot;true&quot; /&gt;
id=&quot;CodeColor_JavascriptFunction&quot; text=&quot;#000000&quot; bold=&quot;true&quot; /&gt;
id=&quot;CodeColor_JavascriptBracket&quot; text=&quot;#000099&quot; bold=&quot;true&quot; /&gt;
id=&quot;CodeColor_JavascriptNumber&quot; text=&quot;#FF0000&quot; /&gt;
id=&quot;CodeColor_JavascriptClient&quot; text=&quot;#990099&quot; /&gt;
id=&quot;CodeColor_JavascriptNative&quot; text=&quot;#009999&quot; /&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
72
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
A propos de la validation du code
Lorsque vous ouvrez un document en mode Code, Dreamweaver v&eacute;rifie automatiquement la validit&eacute; des balises,
attributs, propri&eacute;t&eacute;s ou valeurs CSS en fonction des navigateurs cibles sp&eacute;cifi&eacute;s par l'utilisateur. Dreamweaver souligne
les erreurs d&eacute;tect&eacute;es par une ligne ondul&eacute;e de couleur rouge.
Dreamweaver dispose &eacute;galement d'une nouvelle fonctionnalit&eacute; de v&eacute;rification de la compatibilit&eacute; avec les navigateurs
(BCC) qui recherche les combinaisons de codes HTML et CSS et peut provoquer des probl&egrave;mes de rendu de
navigateur.
Les profils des navigateurs sont stock&eacute;s dans le dossier Browser Profile du dossier Configuration de Dreamweaver.
Chaque profil de navigateur se pr&eacute;sente sous la forme d'un fichier texte portant le nom du navigateur. Par exemple, le
profil du navigateur Internet Explorer version 6.0 correspond au fichier Internet_Explorer_6.0.txt. Pour prendre en
charge la v&eacute;rification des navigateurs cibles pour CSS, Dreamweaver stocke les informations de profil CSS d'un
navigateur dans un fichier XML dont le nom correspond au profil du navigateur, auquel a &eacute;t&eacute; ajout&eacute; le suffixe
_CSS.xml. Par exemple, le profil CSS du navigateur Internet Explorer 6.0 se trouve dans le fichier
Internet_Explorer_6.0_CSS.xml. Si vous souhaitez ignorer une erreur signal&eacute;e par Dreamweaver, vous pouvez
modifier le fichier de profil CSS.
Le fichier de profil CSS se compose de trois balises XML : css-support, property et value. Les sections ci-apr&egrave;s
fournissent une description de chacune de ces balises.
&lt;css-support&gt;
Description
Cette balise correspond au nœud racine d'un ensemble de balises property et value prises en charge par un
navigateur donn&eacute;.
Attributs
Aucun.
Contenu
Balises property et value.
Conteneur
Aucun.
Exemple
&lt;css-support&gt;
. . .
&lt;/css-support&gt;
&lt;property&gt;
Description
D&eacute;finit une propri&eacute;t&eacute; CSS prise en charge par un profil de navigateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
73
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
name, names, supportlevel, message
•
name=&quot;nom_propri&eacute;t&eacute;&quot; Nom de la propri&eacute;t&eacute; &agrave; prendre en charge.
•
names=&quot;nom_propri&eacute;t&eacute;, property_name,...&quot; Liste, d&eacute;limit&eacute;e par des virgules, des noms de propri&eacute;t&eacute;s &agrave; prendre en
charge.
L'attribut names peut &ecirc;tre consid&eacute;r&eacute; comme une forme abr&eacute;g&eacute;e. Par exemple, l'attribut names ci-dessous
correspond &agrave; une m&eacute;thode abr&eacute;g&eacute;e de d&eacute;finition de l'attribut name qui suit :
&lt;property names=&quot;foo,bar&quot;&gt;
&lt;value type=&quot;named&quot; name=&quot;top&quot;/&gt;
&lt;value type=&quot;named&quot; name=&quot;bottom&quot;/&gt;
&lt;/property&gt;
&lt;property name=&quot;foo&quot;&gt;
&lt;value type=&quot;named&quot; name=&quot;top&quot;/&gt;
&lt;value type=&quot;named&quot; name=&quot;bottom&quot;/&gt;
&lt;/property&gt;
&lt;property name=&quot;bar&quot;&gt;
&lt;value type=&quot;named&quot; name=&quot;top&quot;/&gt;
&lt;value type=&quot;named&quot; name=&quot;bottom&quot;/&gt;
&lt;/property&gt;
•
supportlevel=&quot;error&quot;, &quot;warning&quot;, &quot;info&quot;ou &quot;supported&quot; D&eacute;finit le niveau de prise en charge de la
propri&eacute;t&eacute;. Si aucune valeur n'est indiqu&eacute;e, la valeur attribu&eacute;e est &quot;supported&quot;. Si vous indiquez un niveau de prise
en charge diff&eacute;rent de &quot;supported&quot; et que vous ne sp&eacute;cifiez pas l'attribut message, Dreamweaver utilise le message
par d&eacute;faut, &laquo; La propri&eacute;t&eacute; CSS nom_propri&eacute;t&eacute; n'est pas prise en charge. &raquo;
•
message=&quot;cha&icirc;ne_message&quot; L'attribut message d&eacute;finit la cha&icirc;ne du message affich&eacute; dans Dreamweaver lorsqu'il
d&eacute;tecte la propri&eacute;t&eacute; d'un document. La cha&icirc;ne du message d&eacute;crit les limites ou les contraintes susceptibles
d'appara&icirc;tre en fonction de la valeur de la propri&eacute;t&eacute;.
Contenu
value
Conteneur
css-support
Exemple
&lt;property name=&quot;background-color&quot; supportLevel=&quot;supported&quot;&gt;
&lt;value&gt;
Description
D&eacute;finit une liste de valeurs prises en charge par la propri&eacute;t&eacute; actuelle.
Derni&egrave;re mise &agrave; jour le 22/6/2011
74
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Attributs
type, name, names, supportlevel, message
•
type=&quot;any&quot;, &quot;named&quot;, &quot;units&quot;, &quot;color&quot;, &quot;string&quot; ou &quot;function&quot; Indique le type de valeur. Si vous
sp&eacute;cifiez &quot;named&quot;, &quot;units&quot; ou &quot;color&quot;, l'attribut name ou names doit sp&eacute;cifier les identifiants de valeur
correspondant &agrave; cet &eacute;l&eacute;ment. La valeur &quot;units&quot; correspond &agrave; une valeur num&eacute;rique, suivie de l'une des valeurs
d'unit&eacute;s sp&eacute;cifi&eacute;es dans l'attribut name.
•
name=&quot;nom_valeur&quot; Identificateur de valeur CSS. Les espaces et la ponctuation, &agrave; l'exception du tiret (-), sont
interdits. Nom de l'une des valeurs valides pour la propri&eacute;t&eacute; CSS nomm&eacute;e dans le nœud de propri&eacute;t&eacute; parent. Ce
nom peut d&eacute;signer une valeur sp&eacute;cifique ou un sp&eacute;cificateur d'unit&eacute;.
•
names=&quot;nom1, nom2, . . .&quot;Sp&eacute;cifie une liste d'ID de valeur s&eacute;par&eacute;s par des virgules.
•
supportlevel=&quot;error&quot;, &quot;warning&quot;, &quot;info&quot;ou &quot;supported&quot; Indique le niveau de prise en charge de cette
valeur dans le navigateur. Si aucune valeur n'est indiqu&eacute;e, la valeur attribu&eacute;e est &quot;supported&quot;.
•
message=&quot;cha&icirc;ne_message&quot; L'attribut message d&eacute;finit la cha&icirc;ne du message affich&eacute; dans Dreamweaver lorsqu'il
d&eacute;tecte la valeur de propri&eacute;t&eacute; d'un document. Si vous ne sp&eacute;cifiez pas l'attribut message, Dreamweaver affiche la
cha&icirc;ne de message suivante : &laquo; nom_valeur n'est pas prise en charge &raquo;.
Contenu
Aucun.
Conteneur
property
Exemple
&lt;property name=&quot;margin&quot;&gt;
&lt;value type=&quot;units&quot; name=&quot;ex&quot; supportlevel=&quot;warning&quot;
message=&quot;The implementation of ex units is buggy in Safari 1.0.&quot;/&gt;
&lt;value type=&quot;units&quot; names=&quot;%,em,px,in,cm,mm,pt,pc&quot;/&gt;
&lt;value type=&quot;named&quot; name=&quot;auto&quot;/&gt;
&lt;value type=&quot;named&quot; name=&quot;inherit&quot;/&gt;
&lt;/property&gt;
Modification du formatage HTML par d&eacute;faut
La cat&eacute;gorie Format de code de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences permet de modifier les pr&eacute;f&eacute;rences g&eacute;n&eacute;rales de
formatage du code. L'&eacute;diteur de la biblioth&egrave;que de balises (Edition &gt; Biblioth&egrave;ques de balises) permet de modifier le
format de balises ou d'attributs sp&eacute;cifiques. Pour plus d'informations, voir Utilisation de Dreamweaver dans le menu
Aide de Dreamweaver.
Vous pouvez &eacute;galement modifier le formatage d'une balise en modifiant le fichier VTM correspondant &agrave; cette balise
(dans un sous-dossier du dossier Configuration Tag Libraries) ; il est toutefois pr&eacute;f&eacute;rable de modifier le formatage
directement dans l'application Dreamweaver.
Si vous ajoutez ou supprimez un fichier VTM, vous devez modifier le fichier TagLibraries.vtm ; Dreamweaver ignore
les fichiers VTM non r&eacute;pertori&eacute;s dans le fichier TagLibraries.vtm.
Remarque : Modifiez ce fichier dans un &eacute;diteur de texte et non dans Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
75
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
A propos du mode Fractionnement vertical
Le mode Fractionnement vertical permet l'affichage c&ocirc;te &agrave; c&ocirc;te des modes Code et Cr&eacute;ation ou Code et Mise en forme
du code. Les utilisateurs travaillant sur deux &eacute;crans peuvent utiliser cette fonctionnalit&eacute; pour afficher le code sur un
&eacute;cran tout en employant l'autre pour travailler en mode Cr&eacute;ation.
Le mode Fractionnement vertical permet &agrave; l'utilisateur :
• de choisir l'orientation des modes Code et Cr&eacute;ation (horizontale ou verticale) ;
• de basculer entre les orientations horizontale et verticale des modes Code et Cr&eacute;ation et Code fractionn&eacute;.
Lorsque vous red&eacute;marrez Dreamweaver et que vous ouvrez ou cr&eacute;ez un document, celui-ci s'affiche dans les modes
Code et Cr&eacute;ation selon la taille et l'orientation employ&eacute;es le plus r&eacute;cemment. La fonction
dreamweaver.setSplitViewOrientation() d&eacute;finit l'orientation et dreamweaver.setPrimaryView() d&eacute;finit le
mode d'affichage principal. Pour plus d'informations sur l'emploi de ces fonctions, voir &laquo; Fonctions du mode
Fractionnement vertical &raquo; dans le Guide des API de Dreamweaver.
A propos des fichiers apparent&eacute;s
La fonctionnalit&eacute; fichiers apparent&eacute;s permet &agrave; l'utilisateur d'acc&eacute;der aux fichiers auxiliaires et apparent&eacute;s qui sont
associ&eacute;s au fichier sur lequel il travaille. Les fichiers apparent&eacute;s peuvent &ecirc;tre des fichiers CSS, de script, SSI (inclusion
c&ocirc;t&eacute; serveur) ou XML.
Par exemple, si un fichier CSS est associ&eacute; au fichier principal, cette fonctionnalit&eacute; facilite l'affichage et la modification
de ce fichier CSS. L'utilisateur peut &eacute;galement visualiser le fichier principal tout en modifiant le fichier apparent&eacute;.
Fonctionnement des fichiers apparent&eacute;s
Les fichiers apparent&eacute;s facilitent les activit&eacute;s de modification de l'utilisateurs en l'aidant dans les t&acirc;ches suivantes :
• L'utilisateur peut visualiser les fichiers apparent&eacute;s et y acc&eacute;der tout en affichant le fichier principal. Lorsque vous
affichez une page poss&eacute;dant des fichiers apparent&eacute;s (par exemple un fichier CSS), vous pouvez voir les &eacute;l&eacute;ments
suivants :
• Page en mode Cr&eacute;ation d'un c&ocirc;t&eacute;
• Fichier apparent&eacute; de l'autre c&ocirc;t&eacute;
• La barre des fichiers apparent&eacute;s contient les documents influant sur la g&eacute;n&eacute;ration du code HTML parent.
L'utilisateur peut voir le code HTML source, le code HTML g&eacute;n&eacute;r&eacute; et les documents enfants de premier niveau.
• La s&eacute;lection d'un fichier apparent&eacute; dans la barre des fichiers apparent&eacute;s permet &agrave; l'utilisateur d'accomplir les
op&eacute;rations suivantes :
• Affichage et modification du fichier apparent&eacute; en mode Code
• Affichage de la page parente en mode Cr&eacute;ation
• La s&eacute;lection de contenu en mode Cr&eacute;ation et l'apport de modifications dans le fichier apparent&eacute; ne fait pas
dispara&icirc;tre la s&eacute;lection lorsque l'utilisateur actualise le mode Cr&eacute;ation.
• Si vous modifiez le code du fichier apparent&eacute;, vos modifications se r&eacute;percutent dans le mode Cr&eacute;ation.
Si un fichier est introuvable, un message vous en informe dans une barre situ&eacute;e en haut du cadre de la fen&ecirc;tre vide.
Derni&egrave;re mise &agrave; jour le 22/6/2011
76
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
Terminologie des fichiers apparent&eacute;s
Les termes suivants sont souvent utilis&eacute;s en association avec les fichiers apparent&eacute;s :
Terme
Description
Document de niveau sup&eacute;rieur
Tout document ouvert par l'utilisateur.
Document parent
Tout document de niveau sup&eacute;rieur rendu en
mode Cr&eacute;ation.
Document enfant de premier
niveau
Document enfant de niveau
inf&eacute;rieur
Fichier non apparent&eacute;
Tout document se situant un niveau en dessous
du document parent. Ces documents influent
sur la g&eacute;n&eacute;ration du code HTML, &agrave; l'exception de
CSS. Les fichiers CSS peuvent en contenir
d'autres ; c'est ensemble qu'ils d&eacute;terminent les
styles finalement appliqu&eacute;s &agrave; la page.
Tout document se situant &agrave; plus de deux niveaux
sous le document parent. Ces documents
influent sur la g&eacute;n&eacute;ration du code HTML.
Tout document n'influant pas sur la g&eacute;n&eacute;ration
de code HTML ou tout fichier qu'un utilisateur ne
modifie pas activement.
Exemple
•
HTML, dont .lbi, .dwt
•
CFML
•
PHP
•
Fichier de script sp&eacute;cifi&eacute; par &lt;SCRIPT src=&quot;file.js&quot;&gt;
•
Inclusion c&ocirc;t&eacute; serveur
•
CSS externe
•
Ensembles de donn&eacute;es XML et HTML Spry
•
El&eacute;ment de biblioth&egrave;que
•
&lt;iframe&gt; - source distante
•
Balise d'objet
•
PHP dans PHP
•
DTD
•
Mod&egrave;les
•
Fichiers d'image
•
Fichiers multim&eacute;dias
•
Fichiers li&eacute;s &agrave; l'ext&eacute;rieur par une balise &lt;a&gt;
Les fichiers apparent&eacute;s suivants sont pris en charge :
Type
Description
Niveau d'imbrication
Script c&ocirc;t&eacute; client
Tous les langages
1 (l'imbrication du script est impossible)
Inclusions c&ocirc;t&eacute; serveur Lorsque toutes les conditions d'extension suivantes sont
vraies :
•
Mod&egrave;le de serveur d&eacute;fini
•
Instruction SSI (c.-&agrave;-d. mod&egrave;le) d&eacute;finie
•
doctype DW d&eacute;fini
1
Exception : Les instructions de fichier inclus de style
Apache (&lt;!--#include ... --&gt;) dans les documents
HTML sont reconnues.
Ensemble de donn&eacute;es
Spry
CSS
1 (l'imbrication du script est impossible)
•
Tout le code CSS externe pour tous les types de m&eacute;dias Infini
•
DTSS
Derni&egrave;re mise &agrave; jour le 22/6/2011
77
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
API des fichiers apparent&eacute;s
Vous pouvez personnaliser le menu des fichiers apparent&eacute;s afin d'afficher les &eacute;l&eacute;ments suivants :
• Nom du fichier apparent&eacute;
• Code HTML source et code source g&eacute;n&eacute;r&eacute;
La fonction dreamweaver.openRelatedFile() affiche le fichier apparent&eacute; en mode Code et la fonction
dreamweaver.getActiveRelatedFilePath() affiche le chemin d'acc&egrave;s du fichier apparent&eacute; actuellement ouvert.
Pour plus d'informations sur l'emploi de ces API, voir &laquo; Fonctions des fichiers apparent&eacute;s &raquo; dans le Guide des API de
Dreamweaver.
A propos de l'affichage en direct
La fonctionnalit&eacute; d'affichage en direct facilite la pr&eacute;visualisation de vos pages Web de la fa&ccedil;on dont elles s'afficheraient
dans un navigateur, sans quitter Dreamweaver. L'utilisateur peut conserver un acc&egrave;s direct au code afin de le modifier.
Toute modification apport&eacute;e au code est visible instantan&eacute;ment. Cette fonctionnalit&eacute; permet &agrave; l'utilisateur de voir
instantan&eacute;ment la page Web modifi&eacute;e. Si l'utilisateur modifie des fichiers CSS, l'&eacute;tat actuel du fichier est conserv&eacute;, mais
les modifications CSS sont appliqu&eacute;es. L'utilisateur peut &eacute;galement interagir avec la page et voir des effets JavaScript
tels que le survol sans devoir passer de Dreamweaver &agrave; un navigateur Web.
L'affichage en direct emploie le plug-in syst&egrave;me Flash (%SYSTEM%/Macromed/Flash, /Library/Internet Plug-Ins/). Il
peut arriver qu'il se replie sur une version Firefox si la version syst&egrave;me du plug-in n'est pas disponible.
Si le plug-in est introuvable, une notification s'affiche dans la barre d'information. Le panneau CSS montre toujours le
code CSS pertinent pour ce qui est affich&eacute; en direct, m&ecirc;me si la source est g&eacute;n&eacute;r&eacute;e &agrave; partir d'un emplacement diff&eacute;rent.
L'utilisateur peut ajouter ou supprimer des feuilles de style. Toutefois, les autres modifications au code CSS int&eacute;gr&eacute; ou
au code CSS dans la balise &lt;head&gt; sont bloqu&eacute;es. Les r&egrave;gles dans le panneau CSS qui ne sont pas modifiables sont
marqu&eacute;es comme &eacute;tant en lecture seule.
Vous pouvez utiliser l'API de Dreamweaver aux fins suivantes :
• Obtention et d&eacute;finition du mode Cr&eacute;ation
• Obtention et d&eacute;finition du mode En direct &agrave; l'aide du serveur
• Obtention des valeurs par d&eacute;faut du mode En direct
• Obtention et d&eacute;finition des &eacute;l&eacute;ments d&eacute;pendants du mode En direct
• Consultation des param&egrave;tres du mode En direct
Pour plus d'informations sur ces API, voir &laquo; Fonctions du mode En direct &raquo; dans le Guide des API de Dreamweaver.
Exemple simple du mode En direct
Dans cet exemple, vous allez utiliser Dreamweaver pour cr&eacute;er une commande qui cr&eacute;e un navigateur simple lorsque
l'utilisateur clique sur cette commande dans le menu Commandes. Pour obtenir des informations plus sp&eacute;cifiques sur
la cr&eacute;ation de commandes avant d'appliquer cet exemple, consultez la section &laquo; Commandes &raquo; &agrave; la page 137 &agrave; la page
142. Dans Dreamweaver, ouvrez un nouveau fichier HTML de base (il s'agit de votre fichier de d&eacute;finition de
commande) et enregistrez-le sous le nom liveviewexample.htm. Votre fichier de d&eacute;finition de commande se pr&eacute;sente
comme suit :
Derni&egrave;re mise &agrave; jour le 22/6/2011
78
EXTENSION DE DREAMWEAVER
Personnalisation du mode Code
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0// dialog&quot;&gt; &lt;html
xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Browser Test&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var browserLoad = function(e)
{
var uri = document.getElementById(&quot;uri&quot;);
uri.value = e.currentBrowserLocation;
}
var promptToNavigate = function (e)
{
if( ! confirm(&quot; Is it ok to go from \n&quot; + e.currentBrowserLocation + &quot; to page \n &quot; +
e.requestedBrowserLocation ) )
{
e.preventDefault();
}
}
function initUI()
{
var browser = document.getElementById(&quot;browser&quot;);
browser.addEventListener(&quot;BrowserControlBeforeNavigation&quot;,
promptToNavigate, true);
browser.addEventListener(&quot;BrowserControlLoad&quot;, browserLoad, true);
browser.openURL(&quot;http://www.adobe.com&quot;);
}
function loadUri()
{
var uri = document.getElementById(&quot;uri&quot;);
var browser = document.getElementById(&quot;browser&quot;);
browser.openURL(uri.value);
}
function showSource(){
var browser = document.getElementById(&quot;browser&quot;);
alert(browser.getWindowObj().document.documentElement.outerHTML);
}
function commandButtons() {
return new Array( &quot;Close&quot;, &quot;window.close()&quot;,
&quot;Load URI&quot;, &quot;loadUri()&quot;,
&quot;Show Source&quot;, &quot;showSource()&quot;
);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;initUI()&quot;&gt;
&lt;form&gt;
&lt;p&gt;
&lt;label&gt;
&lt;input id=&quot;uri&quot; type=&quot;text&quot; style=&quot;width:500px&quot;&gt;
&lt;/label&gt;
&lt;/p&gt; &lt;mm:browsercontrol id=&quot;browser&quot; style=&quot;width:500px; height:300px;&quot;/&gt; &lt;/form&gt; &lt;/body&gt;
&lt;/html&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
79
Chapitre 4 : Extension de Dreamweaver
L'ensemble complet d'outils propos&eacute;s par Dreamweaver vous permet d'&eacute;tendre ou de personnaliser ses fonctionnalit&eacute;s.
Lorsque vous cr&eacute;ez une extension Dreamweaver, suivez la proc&eacute;dure d&eacute;crite dans la section &laquo; Cr&eacute;ation d'une
extension &raquo; &agrave; la page 2.
Les fonctionnalit&eacute;s suivantes de Dreamweaver permettent de cr&eacute;er des extensions :
• Analyseur HTML (&eacute;galement baptis&eacute; syst&egrave;me de rendu) permet de cr&eacute;er des interfaces utilisateur pour les
extensions. L'analyseur emploie des champs de formulaire, des &eacute;l&eacute;ments &agrave; positionnement absolu, des images et
d'autres &eacute;l&eacute;ments HTML. Dreamweaver dispose de son propre analyseur HTML.
• Une arborescence de dossiers qui organise et stocke les fichiers qui impl&eacute;mentent et configurent les &eacute;l&eacute;ments et
extensions de Dreamweaver.
• Une s&eacute;rie d'API (interfaces de programmation d'applications), qui donnent acc&egrave;s &agrave; la fonctionnalit&eacute; de
Dreamweaver au moyen du langage JavaScript.
• Un interpr&eacute;teur JavaScript, qui ex&eacute;cute les instructions de code JavaScript dans les fichiers d'extension.
Dreamweaver utilise l'interpr&eacute;teur Netscape JavaScript version 1.5. Pour plus d'informations sur les modifications
apport&eacute;es &agrave; cette version de l'interpr&eacute;teur par rapport aux versions ant&eacute;rieures, voir &laquo; Traitement de JavaScript par
Dreamweaver dans les extensions &raquo; &agrave; la page 84.
Types d'extensions Dreamweaver
La liste suivante d&eacute;crit les types d'extensions de Dreamweaver :
Insertion, objet de la barre Les extensions permettent de modifier la barre Insertion. Un objet sert g&eacute;n&eacute;ralement &agrave;
automatiser l'insertion de code dans un document. Il peut &eacute;galement contenir un formulaire qui regroupe les donn&eacute;es
fournies par les utilisateurs et un code JavaScript qui traite ces donn&eacute;es. Les fichiers d'objet r&eacute;sident dans le dossier
Configuration/Objects.
Commande Les extensions de commande peuvent se charger de la plupart des t&acirc;ches, avec ou sans l'intervention de
l'utilisateur. Les fichiers de commandes sont g&eacute;n&eacute;ralement d&eacute;marr&eacute;s &agrave; partir du menu Commandes ; ils peuvent l'&ecirc;tre
&eacute;galement depuis d'autres extensions. Les fichiers de commandes r&eacute;sident dans le dossier Configuration/Commands.
Commande de menu Les extensions de commande de menu d&eacute;veloppent l'API de commandes pour effectuer des
t&acirc;ches relatives &agrave; l'appel d'une commande depuis un menu. Les API des commandes de menu vous permettent
&eacute;galement de cr&eacute;er un sous-menu dynamique.
Barre d'outils Les extensions de barre d'outils permettent d'ajouter des &eacute;l&eacute;ments aux barres d'outils existantes ou de
cr&eacute;er de nouvelles barres d'outils dans l'interface utilisateur de Dreamweaver. Les nouvelles barres d'outils s'affichent
sous la barre d'outils par d&eacute;faut. Les fichiers de barre d'outils r&eacute;sident dans le dossier Configuration/Toolbars.
Rapport Les extensions de rapport peuvent ajouter des rapports personnalis&eacute;s sur le site ou modifier le jeu de rapports
pr&eacute;d&eacute;finis fournis avec Dreamweaver. Vous pouvez &eacute;galement utiliser l'API de fen&ecirc;tre R&eacute;sultats pour cr&eacute;er un rapport
autonome.
Biblioth&egrave;que et &eacute;diteur de balises Les extensions de biblioth&egrave;que et d'&eacute;diteur de balises fonctionnent avec les fichiers
de biblioth&egrave;que de balises associ&eacute;s. Les extensions de biblioth&egrave;que et d'&eacute;diteur de balises permettent de modifier les
attributs des bo&icirc;tes de dialogue de balises existantes, de cr&eacute;er de nouvelles bo&icirc;tes de dialogue de balises et d'ajouter des
Derni&egrave;re mise &agrave; jour le 22/6/2011
80
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
balises &agrave; la biblioth&egrave;que de balises. Les fichiers d'extension d'&eacute;diteur et de biblioth&egrave;ques de balises r&eacute;sident dans le
dossier Configuration/TagLibraries.
Inspecteur Propri&eacute;t&eacute;s Les extensions d'inspecteur Propri&eacute;t&eacute;s apparaissent dans le panneau d'inspecteur Propri&eacute;t&eacute;s. La
plupart des inspecteurs de Dreamweaver rel&egrave;vent du code principal du produit et ne sont donc pas modifiables. En
revanche, les fichiers d'inspecteurs Propri&eacute;t&eacute;s personnalis&eacute;s peuvent remplacer les interfaces d'inspecteurs Propri&eacute;t&eacute;s
int&eacute;gr&eacute;es de Dreamweaver ou en cr&eacute;er afin d'inspecter les balises personnalis&eacute;es. Les fichiers d'inspecteur r&eacute;sident dans
le dossier Configuration/Inspectors.
Panneau flottant Les extensions de panneau flottant permettent d'ins&eacute;rer des panneaux flottants dans l'interface
utilisateur de Dreamweaver. Les panneaux flottants peuvent interagir avec la s&eacute;lection, le document ou l'action en
cours. Ils peuvent &eacute;galement afficher des informations utiles. Les fichiers de panneau r&eacute;sident dans le dossier
Configuration/Floaters.
Comportement Les extensions de comportement permettent aux utilisateurs d'ajouter du code JavaScript dans leurs
documents. Le code JavaScript ex&eacute;cute une t&acirc;che sp&eacute;cifique en r&eacute;ponse &agrave; un &eacute;v&eacute;nement lorsque le document est
affich&eacute; dans un navigateur. Les extensions de comportement s'affichent dans le menu plus (+) du panneau
Comportements de Dreamweaver. Les fichiers de comportement r&eacute;sident dans le dossier
Configuration/Behaviors/Actions.
Comportements de serveur Les extensions de comportement de serveur permettent d'ajouter des blocs de code c&ocirc;t&eacute;
serveur (ASP ou ColdFusion) au document. Le code c&ocirc;t&eacute; serveur ex&eacute;cute des t&acirc;ches sur le serveur lorsque le document
est affich&eacute; dans un navigateur. Les extensions de comportement de serveur s'affichent dans le menu plus (+) du
panneau Comportements de serveur de Dreamweaver. Les fichiers de comportement de serveur r&eacute;sident dans le
dossier Configuration/ServerBehaviors.
Source de donn&eacute;es Les extensions de source de donn&eacute;es vous permettent d'&eacute;tablir une connexion avec des donn&eacute;es
dynamiques stock&eacute;es dans une base de donn&eacute;es. Les extensions de source de donn&eacute;es apparaissent dans le menu
plus (+) du panneau Liaisons. Les extensions de source de donn&eacute;es r&eacute;sident dans le dossier
Configuration/DataSources.
Format de serveur Les extensions de format de serveur vous permettent de d&eacute;finir la mise en forme des donn&eacute;es
dynamiques.
Composant Les extensions de composant permettent d'ajouter de nouveaux types de composants au panneau
Composants. Dreamweaver utilise le terme composant pour d&eacute;signer quelques-unes des strat&eacute;gies d'encapsulation les
plus populaires et les plus modernes, comme les composants ColdFusion (CFC).
Mod&egrave;le de serveur Les extensions de mod&egrave;le de serveur permettent de prendre en charge de nouveaux mod&egrave;les de
serveurs. Dreamweaver prend en charge les mod&egrave;les de serveurs les plus courants (ASP, JSP, ColdFusion, PHP et
ASP.NET). Les extensions de mod&egrave;le de serveur sont n&eacute;cessaires uniquement pour les solutions de serveur
personnalis&eacute;es, des langues diff&eacute;rentes ou un serveur personnalis&eacute;. Les fichiers de mod&egrave;le de serveur r&eacute;sident dans le
dossier Configuration/ServerModels.
Traducteur de donn&eacute;es Les extensions de traducteur de donn&eacute;es convertissent le code non HTML en code HTML qui
s'affiche ensuite dans le mode Cr&eacute;ation de la fen&ecirc;tre de document. Ces extensions bloquent &eacute;galement le code
non HTML pour emp&ecirc;cher toute analyse par Dreamweaver. Les fichiers de traducteur r&eacute;sident dans le dossier
Configuration/Translators.
Autres m&eacute;thodes d'extension pour Dreamweaver
Vous pouvez &eacute;galement &eacute;tendre les &eacute;l&eacute;ments suivants de Dreamweaver pour d&eacute;velopper ses capacit&eacute;s ou l'adapter &agrave;
votre utilisation.
Types de documents Les types de documents d&eacute;finissent le fonctionnement de Dreamweaver avec diff&eacute;rents mod&egrave;les
de serveur. Les informations relatives aux types de documents pour les mod&egrave;les de serveurs r&eacute;sident dans le dossier
Derni&egrave;re mise &agrave; jour le 22/6/2011
81
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
Configuration/DocumentTypes. Pour plus d'informations, voir &laquo; Types de documents extensibles dans
Dreamweaver &raquo; &agrave; la page 14.
Fragments de code Les fragments de code sont des blocs de code r&eacute;utilisables qui sont stock&eacute;s sous forme de fichiers
CSN dans le dossier Configuration/Snippets de Dreamweaver. Ils sont accessibles dans le panneau Fragments de code.
Vous pouvez cr&eacute;er de nouveaux fichiers de fragment de code et les installer dans le dossier Snippets afin qu'ils soient
disponibles.
Conseils de code Les conseils de code sont des menus qui vous &eacute;vitent de saisir tout le texte en proposant une liste de
cha&icirc;nes susceptibles de compl&eacute;ter la cha&icirc;ne que vous tapez. Si une des cha&icirc;nes du menu correspond &agrave; celle que vous
avez commenc&eacute; &agrave; entrer, vous pouvez la s&eacute;lectionner pour l'ins&eacute;rer &agrave; la place de la cha&icirc;ne dont vous aviez commenc&eacute;
la saisie. Des menus de conseils de code sont d&eacute;finis dans le fichier codehints.xml dans le dossier
Configuration/CodeHints. Vous pouvez en ajouter d'autres pour de nouvelles balises et fonctions que vous avez
d&eacute;finies.
Menus Les menus sont d&eacute;finis dans le fichier menus.xml du dossier Configuration/Menus. Vous pouvez ajouter de
nouveaux menus Dreamweaver pour vos extensions en ajoutant leurs balises de menu dans le fichier menus.xml. Pour
plus d'informations, voir &laquo; Menus et commandes de menu &raquo; &agrave; la page 148.
Extensions et dossiers de configuration
Les dossiers et les fichiers stock&eacute;s dans le dossier Configuration de Dreamweaver contiennent les extensions livr&eacute;es
avec Dreamweaver. Lorsque vous r&eacute;digez une extension, vous devez enregistrer les fichiers dans le dossier appropri&eacute;
afin que Dreamweaver puisse les reconna&icirc;tre. Ainsi, si vous cr&eacute;ez une extension d'inspecteur Propri&eacute;t&eacute;s, vous
enregistrez les fichiers dans le dossier Configuration/Inspectors. Si vous t&eacute;l&eacute;chargez puis installez une extension depuis
le site Web d'Adobe Exchange (www.adobe.com/go/exchange_fr), Extension Manager enregistre automatiquement
les fichiers d'extension dans les dossiers appropri&eacute;s.
Vous pouvez utiliser les fichiers du dossier Configuration de Dreamweaver comme exemple ; notez toutefois que ces
fichiers sont g&eacute;n&eacute;ralement plus complexes que l'extension typique disponible sur le site Web d'Adobe Exchange. Pour
plus d'informations sur le contenu respectif des sous-dossiers du dossier Configuration, voir le fichier
Configuration_ReadMe.htm.
Le dossier Configuration/Shared ne correspond &agrave; aucun type d'extension particulier. Il s'agit d'un lieu de stockage
central pour les fonctions utilitaires, les classes et les images utilis&eacute;es par plusieurs extensions. Les fichiers r&eacute;sidant dans
le dossier Configuration/Shared/Common sont cens&eacute;s &ecirc;tre utiles &agrave; un large &eacute;ventail d'extensions. Ces fichiers
constituent &agrave; la fois de bons exemples des techniques JavaScript et des utilitaires pratiques. Recherchez en priorit&eacute; dans
ces fichiers les fonctions ex&eacute;cutant des t&acirc;ches sp&eacute;cifiques, par exemple cr&eacute;er une r&eacute;f&eacute;rence DOM (mod&egrave;le d'objet de
document) valide pour un objet, v&eacute;rifier si la s&eacute;lection active se trouve &agrave; l'int&eacute;rieur d'une balise particuli&egrave;re, ignorer les
caract&egrave;res dans les cha&icirc;nes, etc. Il est pr&eacute;f&eacute;rable de cr&eacute;er un sous-dossier distinct dans le dossier
Configuration/Shared/Common, comme indiqu&eacute; ci-apr&egrave;s, lorsque vous cr&eacute;ez des fichiers communs afin de les
stocker.
Derni&egrave;re mise &agrave; jour le 22/6/2011
82
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
Structure de dossier Configuration/Shared/Common/Scripts
Pour plus d'informations sur le dossier Shared, voir &laquo; Dossier Shared &raquo; &agrave; la page 381.
Dossiers de configuration multi-utilisateur
Pour les syst&egrave;mes d'exploitation multi-utilisateur Windows XP, Windows 2000 et Macintosh OS X, Dreamweaver cr&eacute;e
un dossier de configuration distinct pour chaque utilisateur, en compl&eacute;ment du dossier Configuration de
Dreamweaver. Chaque fois que Dreamweaver ou qu'une extension JavaScript &eacute;crit dans le dossier Configuration,
Dreamweaver &eacute;crit automatiquement dans le dossier de configuration utilisateur. Ceci permet &agrave; chaque utilisateur de
d&eacute;finir ses param&egrave;tres de personnalisation de Dreamweaver sans modifier les param&egrave;tres d'autres utilisateurs. Pour
plus d'informations, voir &laquo; Personnalisation de Dreamweaver dans un environnement multi-utilisateur &raquo; &agrave; la page 11
et &laquo; API d'acc&egrave;s aux fichiers et de configuration multi-utilisateur &raquo; dans le Guide des API de Dreamweaver.
Ex&eacute;cution des scripts au d&eacute;marrage ou &agrave; la fermeture
Si vous placez un fichier de commandes dans le dossier Configuration/Startup, la commande s'ex&eacute;cute au d&eacute;marrage
de Dreamweaver. Les commandes de d&eacute;marrage se chargent avant le fichier menus.xml, avant les fichiers du dossier
ThirdPartyTags et avant les autres commandes, objets, comportements, inspecteurs, panneaux flottants ou
traducteurs. Par cons&eacute;quent, vous pouvez utiliser les commandes de d&eacute;marrage pour modifier le fichier menus.xml ou
d'autres fichiers d'extension. Vous pouvez &eacute;galement afficher des avertissements, inviter l'utilisateur &agrave; donner des
informations ou appeler la fonction dreamweaver.runCommand(). Toutefois, vous ne pouvez pas appeler une
commande qui n&eacute;cessite un DOM (Document Object Model) valide &agrave; partir du dossier Startup. Pour plus
d'informations sur le DOM Dreamweaver, voir &laquo; Mod&egrave;le d'objet de document (DOM) Dreamweaver &raquo; &agrave; la page 100.
Derni&egrave;re mise &agrave; jour le 22/6/2011
83
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
De m&ecirc;me, si vous placez un fichier de commandes dans le dossier Configuration/Shutdown, la commande s'ex&eacute;cute &agrave;
l'arr&ecirc;t de Dreamweaver. A partir des commandes de fermeture, vous pouvez appeler la fonction
dreamweaver.runCommand(), afficher des avertissements ou inviter l'utilisateur &agrave; entrer des informations, mais vous
ne pouvez pas arr&ecirc;ter le processus de fermeture.
Pour plus d'informations sur les commandes, voir &laquo; Commandes &raquo; &agrave; la page 137. Pour plus d'informations sur la
fonction dreamweaver.runCommand(), voir le Guide des API de Dreamweaver.
Rechargement d'extensions
Si vous modifiez une extension pendant que vous utilisez Dreamweaver, vous pouvez la charger &agrave; nouveau pour
appliquer la modification.
Rechargement d'extensions
1 Cliquez, tout en maintenant la touche CTRL (Windows) ou Option (Macintosh) enfonc&eacute;e, sur le menu Cat&eacute;gories
de la barre de titres du panneau Insertion.
Remarque : Cette option n'est pas visible en mode Onglets. Si vous &ecirc;tes en mode Onglets, cliquez &agrave; l'aide du bouton
droit de la souris sur le menu Panneau (coin sup&eacute;rieur gauche). Choisissez Afficher comme un menu, puis cliquez tout
en maintenant la touche CTRL enfonc&eacute;e sur Commun afin d'obtenir le menu contenant la commande Recharger
extensions.
2 Choisissez Recharger extensions.
Remarque : Dans le cadre d'un syst&egrave;me d'exploitation multi-utilisateur, vous devez modifier les copies des fichiers de
configuration contenues dans votre dossier de configuration utilisateur plut&ocirc;t que les fichiers Configuration principaux.
Pour plus d'informations, voir &laquo; Extensions et dossiers de configuration &raquo; &agrave; la page 81.
API d'extension
Les API d'extension vous fournissent les fonctions appel&eacute;es par Dreamweaver pour impl&eacute;menter chaque type
d'extension. Le corps de ces fonctions doit &ecirc;tre r&eacute;dig&eacute; conform&eacute;ment aux descriptions de chaque type d'extension. Il
faut &eacute;galement sp&eacute;cifier les valeurs renvoy&eacute;es attendues par Dreamweaver.
Si vous &ecirc;tes d&eacute;veloppeur et souhaitez travailler directement en langage de programmation C, vous disposez d'une API
d'extensibilit&eacute; C qui vous permet de cr&eacute;er des DLL (biblioth&egrave;ques de liens dynamiques). La fonctionnalit&eacute; fournie dans
ces API enveloppe vos DLL C de code JavaScript afin que votre extension puisse s'ex&eacute;cuter en toute transparence dans
Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
84
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
La documentation des API d'extension souligne ce qu'apporte chaque fonction quand Dreamweaver l'appelle et les
valeurs renvoy&eacute;es attendues par Dreamweaver.
Voir le Guide des API de Dreamweaver pour plus d'informations sur l'API d'utilitaire et l'API JavaScript, qui proposent
des fonctions permettant d'effectuer des t&acirc;ches sp&eacute;cifiques dans vos extensions.
Traitement de JavaScript par Dreamweaver dans les extensions
Dreamweaver v&eacute;rifie le dossier Configuration/type_extension au d&eacute;marrage. Si Dreamweaver y d&eacute;tecte un fichier
d'extension, il traite le code JavaScript selon la proc&eacute;dure suivante :
• Compilation de tous les &eacute;l&eacute;ments compris entre les balises d'ouverture et de fermeture SCRIPT
• Ex&eacute;cution du code situ&eacute; dans les balises SCRIPT ne faisant pas partie d'une d&eacute;claration de fonction
Remarque : Cette &eacute;tape s'impose pendant le d&eacute;marrage dans la mesure o&ugrave; certaines extensions peuvent n&eacute;cessiter
l'initialisation des variables globales.
Dans le cas des fichiers JavaScript externes sp&eacute;cifi&eacute;s dans les attributs SRC des balises SCRIPT, Dreamweaver se charge
des op&eacute;rations suivantes :
• lecture du fichier ;
• compilation du code ;
• ex&eacute;cution des proc&eacute;dures.
Remarque : Si du code JavaScript de votre fichier d'extension contient la cha&icirc;ne &quot;, l'interpr&eacute;teur JavaScript la lit comme
une balise script de fin et signale une erreur de litt&eacute;ral de cha&icirc;ne non termin&eacute;. Pour &eacute;viter ce probl&egrave;me, d&eacute;coupez la
cha&icirc;ne en plusieurs morceaux reli&eacute;s entre eux de la fa&ccedil;on suivante : &quot;&lt;' + '/SCRIPT&gt;&quot;.
Dreamweaver ex&eacute;cute le code contenu dans le gestionnaire d'&eacute;v&eacute;nements onLoad (s'il est pr&eacute;sent dans la balise body)
lorsque l'utilisateur choisit la commande ou l'action dans un menu pour les types d'extensions de commande ou de
comportement.
Dreamweaver ex&eacute;cute le code contenu dans le gestionnaire d'&eacute;v&eacute;nements onLoad dans la balise body si le corps du
document contient un formulaire pour les extensions d'objet.
Dreamweaver ignore le gestionnaire onLoad de la balise body dans les extensions suivantes :
• Traducteur de donn&eacute;es
• Inspecteur Propri&eacute;t&eacute;s
• Panneau flottant
Pour toutes les extensions, Dreamweaver ex&eacute;cute le code contenu dans d'autres gestionnaires d'&eacute;v&eacute;nements (par
exemple, onBlur=&quot;alert('Ceci est un champ obligatoire.')&quot;) lorsque l'utilisateur utilise les champs de
formulaire auxquels ils sont rattach&eacute;s.
Dreamweaver prend en charge l'utilisation de gestionnaires d'&eacute;v&eacute;nement dans des liens. Les gestionnaires
d'&eacute;v&eacute;nements des liens doivent respecter la syntaxe suivante :
&lt;a href=&quot;#&quot; onMouseDown=alert('hi')&gt;link text&lt;/a&gt;
Les plug-ins (r&eacute;gl&eacute;s sur play en permanence) sont pris en charge dans la balise BODY des extensions. L'instruction
document.write(), les applets Java et les contr&ocirc;les Microsoft ActiveX ne sont pas pris en charge dans les extensions.
Derni&egrave;re mise &agrave; jour le 22/6/2011
85
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
Affichage de l'aide
La fonction displayHelp(), qui fait partie de nombreuses API d'extension, entra&icirc;ne les deux actions suivantes de
Dreamweaver lorsque vous l'incluez dans votre extension :
• Ajout d'un bouton d'aide &agrave; l'interface ;
• Appel de displayHelp() lorsque l'utilisateur clique sur le bouton d'aide.
Vous devez r&eacute;diger le corps de la fonction displayHelp() pour afficher l'aide. La fa&ccedil;on dont vous codez la fonction
displayHelp() d&eacute;termine l'affichage de l'aide par votre extension. Vous pouvez demander &agrave; la fonction
dreamweaver.browseDocument() d'ouvrir un fichier dans un navigateur ou de d&eacute;finir une m&eacute;thode personnalis&eacute;e
d'affichage de l'aide, comme l'affichage de messages sur un autre &eacute;l&eacute;ment &agrave; positionnement absolu dans des fen&ecirc;tres
d'alerte.
L'exemple suivant utilise la fonction displayHelp() pour afficher l'aide en appelant
dreamweaver.browseDocument():
// The following instance of displayHelp() opens a browser to display a file
// that explains how to use the extension.
function displayHelp() {
var myHelpFile = dw.getConfigurationPath() + &quot;ExtensionsHelp/myExtHelp.htm&quot;;
dw.browseDocument(myHelpFile);
}
Localisation d'une extension
Utilisez les techniques suivantes pour faciliter la traduction de vos extensions dans d'autres langues.
• S&eacute;parez les extensions entre fichiers HTML et JavaScript. Les fichiers HTML peuvent &ecirc;tre dupliqu&eacute;s et localis&eacute;s,
alors que les fichiers JavaScript ne peuvent pas &ecirc;tre localis&eacute;s.
• Ne d&eacute;finissez pas de cha&icirc;nes dans les fichiers JavaScript (v&eacute;rifiez les alertes et le code de l'interface utilisateur). Vous
devez extraire toutes les cha&icirc;nes localisables en fichiers XML s&eacute;par&eacute;s dans le dossier Configuration/Strings de
Dreamweaver.
• N'ins&eacute;rez pas de code JavaScript dans les fichiers HTML except&eacute; pour les gestionnaires d'&eacute;v&eacute;nement n&eacute;cessaires.
Ceci &eacute;vite d'avoir &agrave; r&eacute;parer plusieurs fois une m&ecirc;me erreur pour chaque traduction une fois les fichiers HTML
r&eacute;pliqu&eacute;s et traduits dans d'autres langues.
Fichiers de cha&icirc;ne XML
Conservez toutes les cha&icirc;nes dans des fichiers XML dans le dossier Configuration/Strings de Dreamweaver. Si vous
installez plusieurs fichiers d'extension li&eacute;s, cela vous permet de partager toutes les cha&icirc;nes dans un seul fichier XML.
Le cas &eacute;ch&eacute;ant, cela vous permet &eacute;galement de faire r&eacute;f&eacute;rence &agrave; une m&ecirc;me cha&icirc;ne depuis des extensions C++ et
JavaScript.
Vous pouvez cr&eacute;er un fichier nomm&eacute; myExtensionStrings.xml. L'exemple suivant montre le format du fichier :
Derni&egrave;re mise &agrave; jour le 22/6/2011
86
EXTENSION DE DREAMWEAVER
Extension de Dreamweaver
&lt;strings&gt;
&lt;!-- errors for feature X --&gt;
&lt;string id=&quot;featureX/subProblemY&quot; value=&quot;There was a with X when you did Y. Try not to
do Y!&quot;/&gt;
&lt;string id=&quot;featureX/subProblemZ&quot; value=&quot;There was another problem with X, regarding Z.
Don't ever do Z!&quot;/&gt;
&lt;/strings&gt;
Vos fichiers JavaScript peuvent maintenant se r&eacute;f&eacute;rer &agrave; ces cha&icirc;nes traduisibles en appelant la fonction
dw.loadString(), ainsi que l'illustre l'exemple suivant :
function initializeUI()
{
...
if (problemYhasOccured)
{
alert(dw.loadString(&quot;featureX/subProblemY&quot;);
}
}
Vous pouvez utiliser des barres obliques (/), mais pas d'espaces dans vos identificateurs de cha&icirc;nes. Les barres obliques
vous permettent d'&eacute;tablir une hi&eacute;rarchie et d'inclure l'ensemble des cha&icirc;nes dans un fichier XML unique.
Remarque : Les fichiers commen&ccedil;ant par cc dans le dossier Configuration/Strings sont des fichiers Contribute. C'est le
cas, par exemple, du fichier ccSiteStrings.xml.
Cha&icirc;nes localisables avec valeurs int&eacute;gr&eacute;es
Certaines cha&icirc;nes d'affichage comportent des valeurs int&eacute;gr&eacute;es. Vous pouvez utiliser la fonction errMsg() pour
afficher ces cha&icirc;nes. La fonction errMsg(), similaire &agrave; la fonction printf() dans C, se trouve dans le fichier string.js
du dossier Configuration/Shared/MM/Scripts/CMN. Utilisez le signe % et la lettre s (les caract&egrave;res de l'espace r&eacute;serv&eacute;)
pour indiquer l'emplacement o&ugrave; les valeurs doivent appara&icirc;tre dans la cha&icirc;ne, puis transmettez la cha&icirc;ne et les variables
(en tant qu'arguments) &agrave; errMsg(). Par exemple :
&lt;string id=&quot;featureX/fileNotFoundInFolder&quot; value=&quot;File %s could not be found in folder %s.&quot;/&gt;
L'exemple suivant indique comment la cha&icirc;ne, ainsi que toute variable &agrave; imbriquer, est transmise &agrave; la fonction
alert().
if (fileMissing)
{
alert( errMsg(dw.loadString(&quot;featureX/fileNotFoundInFolder&quot;),fileName,
folderName) );
}
Utilisation d'Extension Manager
Si vous cr&eacute;ez des extensions destin&eacute;es &agrave; d'autres utilisateurs, il convient de les conditionner conform&eacute;ment aux
indications disponibles sur le site Web d'Adobe Exchange (www.adobe.com/go/exchange_fr), sous la rubrique Help &gt;
How to Create an Extension (Aide, Comment cr&eacute;er une extension). Apr&egrave;s avoir r&eacute;dig&eacute; puis test&eacute; une extension dans
Extension Manager, s&eacute;lectionnez Fichier &gt; Empaqueter une extension. Une fois l'extension conditionn&eacute;e, vous pouvez
l'envoyer sur Exchange &agrave; partir d'Extension Manager ; pour cela, s&eacute;lectionnez Fichier &gt; Envoyer une extension.
Adobe Extension Manager est livr&eacute; avec Dreamweaver. Vous trouverez des d&eacute;tails sur son utilisation dans ses fichiers
d'aide ou sur le site Web d'Adobe Exchange.
Derni&egrave;re mise &agrave; jour le 22/6/2011
87
Chapitre 5 : Interfaces utilisateur destin&eacute;es
aux extensions
La plupart des extensions sont con&ccedil;ues pour recevoir des informations de l'utilisateur par le biais d'une interface
utilisateur (UI). Ainsi, si vous cr&eacute;ez une extension d'inspecteur Propri&eacute;t&eacute;s associ&eacute;e &agrave; la balise marquee, vous devez
permettre &agrave; l'utilisateur de sp&eacute;cifier des attributs tels que la direction et la hauteur. Si vous envisagez de demander la
certification Adobe pour votre extension, veillez &agrave; suivre les consignes disponibles dans les fichiers de Extension
Manager sur le site Web d'Adobe Exchange (www.adobe.com/go/exchange_fr). Ces consignes n'ont pas pour objet de
limiter votre cr&eacute;ativit&eacute;, mais d'assurer le bon fonctionnement des extensions certifi&eacute;es dans l'interface utilisateur
d'Adobe Dreamweaver et de v&eacute;rifier que la conception de l'interface utilisateur de l'extension n'entrave pas sa
fonctionnalit&eacute;.
Instructions de conception d'une interface utilisateur
d'extension
En g&eacute;n&eacute;ral, une extension est cr&eacute;&eacute;e pour effectuer une t&acirc;che que l'utilisateur rencontre fr&eacute;quemment. Certaines parties
de la t&acirc;che &eacute;tant r&eacute;p&eacute;titives, une extension permet de les automatiser. Plusieurs &eacute;tapes de cette t&acirc;che ou attributs
sp&eacute;cifiques du code trait&eacute; par l'extension peuvent &ecirc;tre modifi&eacute;s. Pour recevoir les entr&eacute;es utilisateur de ces valeurs
variables, vous devez cr&eacute;er une interface utilisateur.
Vous pouvez par exemple cr&eacute;er une extension de mise &agrave; jour d'un catalogue de vente sur le Web. Les utilisateurs
doivent r&eacute;guli&egrave;rement modifier les valeurs des sources d'image, des descriptions d'articles et des prix. Bien que les
valeurs &eacute;voluent, les proc&eacute;dures d'extraction de ces derni&egrave;res et de mise en forme des informations &agrave; afficher sur le site
Web demeurent identiques. Une extension simple peut automatiser la mise en forme, tout en laissant aux utilisateurs
le soin d'entrer manuellement les valeurs actualis&eacute;es des sources d'image, des descriptions d'articles et des prix. Une
extension plus complexe peut extraire r&eacute;guli&egrave;rement ces valeurs d'une base de donn&eacute;es.
L'interface utilisateur de votre extension a pour objet de recevoir les informations entr&eacute;es par l'utilisateur. Ces
informations g&egrave;rent les aspects variables d'une t&acirc;che r&eacute;p&eacute;titive ex&eacute;cut&eacute;s par l'extension. Dreamweaver prend en charge
les &eacute;l&eacute;ments de formulaires HTML et JavaScript comme modules de base de la structure des commandes d'interface
utilisateur d'extension et affiche l'interface au moyen de son outil de rendu HTML. Ainsi, une interface utilisateur
d'extension peut se pr&eacute;senter sous la forme d'un simple fichier HTML contenant un tableau &agrave; deux colonnes, compos&eacute;
de textes descriptifs et de champs de saisie de formulaire.
Lorsque vous concevez une extension, vous devez d&eacute;terminer les variables requises et les &eacute;l&eacute;ments de formulaire
appropri&eacute;s &agrave; ces derni&egrave;res.
Veillez &agrave; tenir compte des observations suivantes pendant la conception d'une interface utilisateur d'extension :
• Pour attribuer un nom &agrave; votre extension, indiquez-le dans la balise title de votre fichier HTML. Dreamweaver
affiche ce nom dans la barre de titre Extension.
• Alignez &agrave; droite les &eacute;tiquettes de texte dans la partie gauche de l'interface utilisateur, et alignez &agrave; gauche les zones
de texte dans la partie droite. Cette disposition permet &agrave; l'utilisateur de rep&eacute;rer plus facilement le d&eacute;but d'une zone
de texte. La zone de texte peut &ecirc;tre suivie d'un texte concis, par exemple une explication ou une unit&eacute; de mesure.
• Alignez &agrave; gauche le libell&eacute; des cases &agrave; cocher et des boutons radio dans la partie droite de l'interface utilisateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
88
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
• Dans le cas de code lisible, attribuez un nom logique aux zones de texte. Si vous cr&eacute;ez votre interface utilisateur
d'extension &agrave; l'aide de Dreamweaver, vous pouvez utiliser l'inspecteur Propri&eacute;t&eacute;s ou Quick Tag Editor pour
nommer les champs.
Le sc&eacute;nario typique consiste, une fois l'interface utilisateur cr&eacute;&eacute;e, &agrave; v&eacute;rifier que le code de l'extension ex&eacute;cute
correctement les t&acirc;ches suivantes impliquant l'interface :
• R&eacute;cup&eacute;ration des valeurs des zones de texte
• D&eacute;finition des valeurs par d&eacute;faut des zones de texte ou collecte des valeurs &agrave; partir de la s&eacute;lection
• Application des modifications au document de l'utilisateur
Commande de rendu HTML de Dreamweaver
Jusqu'&agrave; la version 4, Dreamweaver restituait plus d'espace autour des commandes de formulaire que Microsoft Internet
Explorer et Netscape Navigator. Dreamweaver ayant recours &agrave; son moteur de rendu HTML pour afficher les interfaces
utilisateur d'extension, les commandes de formulaire de celles-ci sont plus spacieuses.
Dans les versions suivantes de Dreamweaver, le rendu des commandes de formulaire est devenu beaucoup plus proche
de celui des navigateurs. Pour b&eacute;n&eacute;ficier des am&eacute;liorations du proc&eacute;d&eacute; de rendu, il convient d'utiliser l'une des trois
nouvelles instructions DOCTYPE dans les fichiers d'extension, comme indiqu&eacute; dans les exemples suivants :
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//dialog&quot;&gt;
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//floater&quot;&gt;
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//pi&quot;&gt;
En r&egrave;gle g&eacute;n&eacute;rale, les instructions DOCTYPE doivent figurer sur la premi&egrave;re ligne d'un document. Toutefois, pour &eacute;viter
des conflits avec des directives sp&eacute;cifiques aux extensions, les instructions et directives DOCTYPE peuvent d&eacute;sormais
&ecirc;tre plac&eacute;es dans n'importe quel ordre, mais elles doivent figurer avant la balise HTML d'ouverture. Dans les versions
pr&eacute;c&eacute;dentes, les directives sp&eacute;cifiques aux extensions devaient se trouver sur la premi&egrave;re ligne d'un fichier. Par
exemple, le commentaire en haut d'un fichier d'inspecteur Propri&eacute;t&eacute;s, ou la directive MENU-LOCATION=NONE dans une
commande.
La nouvelle instruction DOCTYPE permet d'afficher vos extensions dans le mode Cr&eacute;ation de Dreamweaver. Vous
pouvez les voir telles qu'elles appara&icirc;tront lorsqu'un utilisateur les affichera.
Vous disposez de trois exemples d'utilisation du cas dialog dans les fichiers suivants, enregistr&eacute;s dans le dossier
Configuration/Commands : CFLoginWizard.htm, TeamAdminDlgDates.html et TeamAdminDlgDays.html.
Les exemples suivants montrent l'inspecteur Propri&eacute;t&eacute;s de base sans l'instruction DOCTYPE, qui am&eacute;liore le rendu des
commandes de formulaire, puis avec l'instruction DOCTYPE.
Derni&egrave;re mise &agrave; jour le 22/6/2011
89
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
Commandes d'interface utilisateur personnalis&eacute;es dans
les extensions
Outre les &eacute;l&eacute;ments de formulaire HTML standard, Dreamweaver prend en charge des commandes personnalis&eacute;es qui
facilitent la cr&eacute;ation d'interfaces flexibles et professionnelles.
Listes de s&eacute;lection modifiables
Les listes de s&eacute;lection modifiables (&eacute;galement appel&eacute;es des zones de liste modifiables) permettent d'associer la
fonctionnalit&eacute; d'une liste &agrave; celle d'une zone de texte.
Nombre d'interfaces utilisateur d'extension sont constitu&eacute;es de menus d&eacute;roulants d&eacute;finis &agrave; l'aide de la balise select.
Dans Dreamweaver, vous pouvez autoriser la modification de ces menus dans les extensions en ajoutant l'instruction
editable=&quot;true&quot; &agrave; la balise select. Pour d&eacute;finir une valeur par d&eacute;faut, il convient de d&eacute;finir l'attribut editText ainsi
que la valeur que vous voulez voir appara&icirc;tre dans la liste de s&eacute;lection.
L'exemple suivant illustre les param&egrave;tres d'une liste de s&eacute;lection modifiable :
&lt;select name=&quot;travelOptions&quot; style=&quot;width:250px&quot; editable=&quot;true&quot; editText=&quot;other
(please specify)&quot;&gt;
&lt;option value=&quot;plane&quot;&gt;plane&lt;/option&gt;
&lt;option value=&quot;car&quot;&gt;car&lt;/option&gt;
&lt;option value=&quot;bus&quot;&gt;bus&lt;/option&gt;
&lt;/select&gt;
Lorsque vous utilisez des listes de s&eacute;lection dans vos extensions, v&eacute;rifiez la pr&eacute;sence d'un attribut et, le cas &eacute;ch&eacute;ant, sa
valeur. En l'absence d'une valeur, la liste de s&eacute;lection renvoie la valeur par d&eacute;faut false, laquelle indique que la liste de
s&eacute;lection n'est pas modifiable.
Tout comme les listes de s&eacute;lection standard, non modifiables, les listes de s&eacute;lection modifiables poss&egrave;dent une
propri&eacute;t&eacute; selectedIndex (voir &laquo; Objets, propri&eacute;t&eacute;s et m&eacute;thodes du DOM Dreamweaver &raquo; &agrave; la page 101). Cette
propri&eacute;t&eacute; renvoie la valeur -1 lorsque la zone de texte est s&eacute;lectionn&eacute;e.
Pour lire la valeur d'une zone de texte modifiable active dans une extension, il suffit de lire la valeur de la
propri&eacute;t&eacute; editText. La propri&eacute;t&eacute; editText renvoie la cha&icirc;ne que l'utilisateur a entr&eacute;e dans la zone de texte modifiable
ou la valeur de l'attribut editText. Si aucun texte n'a &eacute;t&eacute; entr&eacute; et si aucune valeur n'a &eacute;t&eacute; pr&eacute;cis&eacute;e pour editText, elle
renvoie une cha&icirc;ne vide.
Dreamweaver ajoute les attributs personnalis&eacute;s suivants &agrave; la balise select afin de contr&ocirc;ler les menus d&eacute;roulants
modifiables :
Nom d'attribut
Description
Valeurs admises
editable
D&eacute;clare que le menu d&eacute;roulant contient une zone de texte
modifiable.
Une valeur bool&eacute;enne true ou false
editText
Conserve ou d&eacute;finit le texte dans une zone de texte modifiable.
Cha&icirc;ne d'une valeur quelconque
Remarque : Des listes de s&eacute;lection modifiables sont disponibles dans Dreamweaver.
L'exemple suivant cr&eacute;e une extension de commande contenant une liste de s&eacute;lection modifiable &agrave; l'aide de fonctions
JavaScript standard :
Cr&eacute;ation de l'exemple
1 Cr&eacute;ez un fichier vide dans un &eacute;diteur de texte.
Derni&egrave;re mise &agrave; jour le 22/6/2011
90
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
2 Entrez le code suivant :
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Editable Dropdown Test&lt;/title&gt;
&lt;script language=&quot;javascript&quot;&gt;
function getAlert()
{
var i=document.myForm.mySelect.selectedIndex;
if (i&gt;=0)
{
alert(&quot;Selected index: &quot; + i + &quot;\n&quot; + &quot;Selected text &quot; +
document.myForm.mySelect.options[i].text);
}
else
{
alert(&quot;Nothing is selected&quot; + &quot;\n&quot; + &quot;or you entered a value&quot;);
}
}
function commandButtons()
{
return new Array(&quot;OK&quot;, &quot;getAlert()&quot;, &quot;Cancel&quot;, &quot;window.close()&quot;);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div name=&quot;test&quot;&gt;
&lt;form name=&quot;myForm&quot;&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td colspan=&quot;2&quot;&gt;
&lt;h4&gt;Select your favorite&lt;/h4&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sport:&lt;/td&gt;
&lt;td&gt;
&lt;select name=&quot;mySelect&quot; editable=&quot;true&quot; style=&quot;width:150px&quot;
editText=&quot;Editable Text&quot;&gt;
&lt;option&gt; Baseball&lt;/option&gt;
&lt;option&gt; Football &lt;/option&gt;
&lt;option&gt; Soccer &lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom EditableSelectTest.htm dans le dossier Dreamweaver Configuration/Commands.
Test de l'exemple
1 Red&eacute;marrez Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
91
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
2 Choisissez Commandes &gt; EditableSelectTest.
Lorsque vous s&eacute;lectionnez une valeur dans la liste, un message d'avertissement affiche l'index de la valeur et le texte.
Si vous entrez une valeur, un message d'avertissement indique qu'aucun &eacute;l&eacute;ment n'est s&eacute;lectionn&eacute;.
Commandes de base de donn&eacute;es
Les commandes de base de donn&eacute;es simplifient l'affichage des hi&eacute;rarchies et champs de donn&eacute;es.
Dreamweaver vous permet d'&eacute;tendre la balise HTML select afin de cr&eacute;er une commande d'arborescence de base de
donn&eacute;es. Vous pouvez &eacute;galement ajouter une commande de grille de variables. La commande d'arborescence de base
de donn&eacute;es affiche le sch&eacute;ma des bases de donn&eacute;es et la commande de grille de variables affiche les informations
tabulaires.
La figure suivante pr&eacute;sente une bo&icirc;te de dialogue Jeu d'enregistrements avanc&eacute;e utilisant une commande
d'arborescence de base de donn&eacute;es et une commande de grille de variables :
Ajout d'une commande d'arborescence de base de donn&eacute;es
La commande d'arborescence de base de donn&eacute;es poss&egrave;de les attributs suivants :
Nom d'attribut
Description
name
Nom de la commande d'arborescence de base de donn&eacute;es
control.style
Largeur et hauteur mesur&eacute;es en pixels.
type
Type de commande.
connection
Nom de la connexion &agrave; la base de donn&eacute;es d&eacute;finie dans le Gestionnaire de connexions ; si aucun nom n'est
sp&eacute;cifi&eacute;, la commande est vide.
noexpandbuttons
Lorsque cet attribut est sp&eacute;cifi&eacute;, la commande d'arborescence ne dessine ni les indicateurs de
d&eacute;veloppement (Plus, +) ou de r&eacute;duction (Moins, -), ni les fl&egrave;ches correspondantes sur un ordinateur
Macintosh. Cet attribut est tr&egrave;s utile pour dessiner des commandes de liste &agrave; plusieurs colonnes.
showheaders
Lorsque cet attribut est d&eacute;fini, la commande d'arborescence affiche un en-t&ecirc;te en haut, recensant le nom
de chaque colonne.
Toutes les balises d'options plac&eacute;es dans la balise select sont ignor&eacute;es.
Pour ajouter une commande d'arborescence &agrave; une bo&icirc;te de dialogue, vous pouvez utiliser l'&eacute;chantillon de code suivant
en effectuant les substitutions appropri&eacute;es pour les variables cit&eacute;es :
Derni&egrave;re mise &agrave; jour le 22/6/2011
92
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
&lt;select name=&quot;DBTree&quot; style=&quot;width:400px;height:110px&quot; &not;
type=&quot;mmdatabasetree&quot; connection=&quot;connectionName&quot; noexpandbuttons showHeaders&gt;&lt;/select&gt;
La modification de l'attribut connection vous permet de r&eacute;cup&eacute;rer les donn&eacute;es s&eacute;lectionn&eacute;es et de les afficher dans
l'arborescence. Vous pouvez utiliser l'attribut DBTreeControl comme objet JavaScript d'enveloppement de la nouvelle
balise. Pour obtenir d'autres exemples, voir le fichier DBTreeControlClass.js du dossier
Configuration/Shared/Common/Scripts.
Ajout d'une commande de grille de variables
La commande de grille de variables poss&egrave;de les attributs suivants :
Nom d'attribut
Description
name
Nom de la commande de grille de variables.
Style
Largeur de la colonne, exprim&eacute;e en pixels.
type
Type de commande.
colonnes
Chaque colonne doit disposer d'un nom, s&eacute;par&eacute;e par une virgule.
columnWidth
Largeur de chaque colonne, s&eacute;par&eacute;e par une virgule. Les colonnes sont de largeur &eacute;gale si aucune largeur
n'est sp&eacute;cifi&eacute;e.
L'exemple suivant ajoute une commande de grille de variables &agrave; une bo&icirc;te de dialogue :
&lt;select name=&quot;ParamList&quot; style=&quot;width:515px;&quot; &not;
type=&quot;mmparameterlist columns&quot;=&quot;Name,SQL Data &not;
Type,Direction,Default Value,Run-time Value&quot; size=6&gt;&lt;/select&gt;
L'exemple suivant cr&eacute;e une commande de grille de variables de 500 pixels de large et comportant cinq colonnes de
largeur variable :
&lt;select
name=&quot;ParamList&quot;
style=&quot;width:500px;&quot;
type=&quot;mmparameterlist&quot;
columns=&quot;Name,SQL Data Type,Direction, Default Value,Run-time Value&quot;
columnWidth=&quot;100,25,11,&quot;
size=6&gt;
Cet exemple cr&eacute;e deux colonnes vierges de 182 pixels de large chacune. Le calcul est le suivant : le total des colonnes
d&eacute;finies est de 136. La largeur totale de la commande de grille de variables est de 500. L'espace restant une fois les trois
premi&egrave;res colonnes ins&eacute;r&eacute;es est 364. Il reste deux colonnes &agrave; ins&eacute;rer : 364 divis&eacute; par 2 est &eacute;gal &agrave; 182.
Cette commande de grille de variables comporte &eacute;galement un objet d'enveloppement JavaScript devant &ecirc;tre employ&eacute;
pour acc&eacute;der aux donn&eacute;es de la commande et les manipuler. L'impl&eacute;mentation de cet objet se trouve dans le fichier
GridControlClass.js du dossier Configuration/Shared/MM/Scripts/Class.
Commandes d'arborescence
Les commandes d'arborescence organisent les informations en nœuds extensibles et r&eacute;ductibles.
Derni&egrave;re mise &agrave; jour le 22/6/2011
93
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
La commande d'arborescence affiche les donn&eacute;es dans un format hi&eacute;rarchis&eacute; et permet aux utilisateurs d'&eacute;tendre et de
r&eacute;duire les nœuds de l'arborescence. La balise MM:TREECONTROL permet de cr&eacute;er des commandes d'arborescence pour
n'importe quel type d'informations. Contrairement &agrave; la commande d'arborescence de base de donn&eacute;es d&eacute;crite dans la
section &laquo; Ajout d'une commande d'arborescence de base de donn&eacute;es &raquo; &agrave; la page 91, aucune association &agrave; une base de
donn&eacute;es n'est requise. Dans Dreamweaver, l'Editeur de raccourcis clavier utilise la commande d'arborescence comme
repr&eacute;sent&eacute; dans la figure suivante :
Cr&eacute;ation d'une commande d'arborescence
La balise MM:TREECONTROL cr&eacute;e une commande d'arborescence et peut utiliser d'autres balises afin de compl&eacute;ter la
structure, comme indiqu&eacute; dans la liste suivante :
•
MM:TREECOLUMN est une balise facultative vide qui d&eacute;finit une colonne dans la commande d'arborescence.
•
MM:TREENODE est une balise facultative qui d&eacute;finit un nœud dans l'arborescence. Il s'agit d'une balise non vide qui
ne peut contenir que d'autres balises MM:TREENODE.
Les attributs des balises MM:TREECONTROL sont les suivants :
Nom d'attribut
Description
name
Nom de la commande d'arborescence.
size
Facultatif. Nombre de lignes visibles dans la commande; la valeur par d&eacute;faut est de 5 lignes.
theControl
Facultatif. Si le nombre de nœuds de l'attribut theControl est sup&eacute;rieur &agrave; la valeur de l'attribut size, des
barres de d&eacute;filement s'affichent.
multiples
Facultatif. Autorise plusieurs s&eacute;lections ; la valeur par d&eacute;faut est une s&eacute;lection unique.
Style
Facultatif. D&eacute;finition de style pour la hauteur et la largeur de la commande d'arborescence ; si cet attribut
est pr&eacute;cis&eacute;, il est pr&eacute;pond&eacute;rant sur l'attribut size.
noheaders
Facultatif. Indique que les en-t&ecirc;tes de la colonne doivent &ecirc;tre masqu&eacute;s.
Les attributs des balises MM:TREECOLUMN sont les suivants :
Derni&egrave;re mise &agrave; jour le 22/6/2011
94
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
Nom d'attribut
Description
name
Nom de la colonne.
value
Cha&icirc;ne qui doit s'afficher dans l'en-t&ecirc;te de la colonne.
width
Largeur de la colonne exprim&eacute;e en pixels (les pourcentages ne sont pas pris en charge ) ; la valeur par
d&eacute;faut est 100.
align
Facultatif. Indique l'alignement du texte de la colonne : &agrave; gauche, &agrave; droite ou centr&eacute; ; la valeur par d&eacute;faut
est &agrave; gauche.
state
Indique si la colonne est visible ou masqu&eacute;e.
Pour une meilleure visibilit&eacute;, les balises TREECOLUMN doivent suivre imm&eacute;diatement la balise MM:TREECONTROL,
comme indiqu&eacute; dans l'exemple suivant :
&lt;MM:TREECONTROL name=&quot;tree1&quot;&gt;
&lt;MM:TREECOLUMN name=&quot;Column1&quot; width=&quot;100&quot; state=&quot;visible&quot;&gt;
&lt;MM:TREECOLUMN name=&quot;Column2&quot; width=&quot;80&quot; state=&quot;visible&quot;&gt;
...
&lt;/MM:TREECONTROL&gt;
Les attributs MM:TREENODE sont d&eacute;crits dans le tableau suivant :
Nom d'attribut
Description
name
Nom du nœud.
value
Comporte le contenu du nœud donn&eacute;. Pour plusieurs colonnes, il s'agit d'une cha&icirc;ne d&eacute;limit&eacute;e par un trait
vertical. Pour d&eacute;finir une colonne vide, placez un seul caract&egrave;re d'espace avant le trait vertical (|).
state
Sp&eacute;cifie que le nœud est d&eacute;velopp&eacute; ou r&eacute;duit avec les cha&icirc;nes expanded ou collapsed.
selected
Vous pouvez s&eacute;lectionner plusieurs nœuds en d&eacute;finissant cet attribut sur plusieurs nœuds d'arborescence,
si cette derni&egrave;re comporte un attribut MULTIPLE.
icon
Facultatif. Index de l'ic&ocirc;ne int&eacute;gr&eacute;e &agrave; utiliser, en commen&ccedil;ant par 0 :
0 = aucune ic&ocirc;ne ; 1 = ic&ocirc;ne de document Dreamweaver ; 2 = ic&ocirc;ne multi-document
Par exemple, tous les nœuds de la commande d'arborescence suivante sont d&eacute;velopp&eacute;s :
&lt;mm:treecontrol name=&quot;test&quot; style=&quot;height:300px;width:300px&quot;&gt;
&lt;mm:treenode value=&quot;rootnode1&quot; state=&quot;expanded&quot;&gt;
&lt;mm:treenode value=&quot;node1&quot; state=&quot;expanded&quot;&gt;&lt;/mm:treenode&gt;
&lt;mm:treenode value=&quot;node3&quot; state=&quot;expanded&quot;&gt;&lt;/mm:treenode&gt;
&lt;/mm:treenode&gt;
&lt;mm:treenode value=&quot;rootnode2&quot;0state=&quot;expanded&quot;&gt;
&lt;mm:treenode value=&quot;node2&quot; state=&quot;expanded&quot;&gt;&lt;/mm:treenode&gt;
&lt;mm:treenode value=&quot;node4&quot; state=&quot;expanded&quot;&gt;&lt;/mm:treenode&gt;
&lt;/mm:treenode&gt;
&lt;/mm:treecontrol&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
95
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
Manipulation du contenu d'une commande d'arborescence
Les commandes et les nœuds d'arborescence sous-jacents sont impl&eacute;ment&eacute;s comme des balises HTML. Ils sont par
cons&eacute;quent analys&eacute;s par Dreamweaver et stock&eacute;s dans l'arborescence du document. Ces balises peuvent ensuite &ecirc;tre
manipul&eacute;es comme tout autre nœud de document. Pour plus d'informations sur les fonctions et m&eacute;thodes DOM, voir
&laquo; Mod&egrave;le d'objet de document (DOM) Dreamweaver &raquo; &agrave; la page 100.
Ajout d'un nœud Pour programmer l'ajout d'un nœud &agrave; une commande d'arborescence existante, d&eacute;finissez la
propri&eacute;t&eacute; innerHTML de la balise MM:TREECONTROL ou de l'une des balises MM:TREENODE existantes. La d&eacute;finition de la
balise inner HTML d'un nœud d'arborescence cr&eacute;e un nœud imbriqu&eacute;.
L'exemple suivant ajoute un nœud tout en haut de l'arborescence :
var tree = document.myTreeControl;
//add a top-level node to the bottom of the tree
tree.innerHTML = tree.innerHTML + '&lt;mm:treenode name=&quot;node3&quot; value=&quot;node3&quot;&gt;';
Ajout d'un nœud enfant Pour ajouter un nœud enfant au nœud s&eacute;lectionn&eacute;, d&eacute;finissez la propri&eacute;t&eacute; innerHTML du
nœud s&eacute;lectionn&eacute;.
L'exemple suivant ajoute un nœud enfant &agrave; un nœud parent s&eacute;lectionn&eacute; :
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
//deselect the node, so we can select the new one
selnode.removeAttribute(&quot;selected&quot;);
//add the new node to the top of the selected node's children
selNode.innerHTML = '&lt;mm:treenode name=&quot;item10&quot; value=&quot;New item11&quot; expanded selected&gt;' + &not;
selNode.innerHTML;
Suppression d'un nœud Pour supprimer le nœud s&eacute;lectionn&eacute; de la structure du document, utilisez la propri&eacute;t&eacute;
innerHTML ou outerHTML.
L'exemple suivant supprime le nœud parent s&eacute;lectionn&eacute; entier ainsi que ses nœuds enfants :
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
selNode.outerHTML = &quot;&quot;;
Ajout d'une commande de bouton couleur
Les commandes de bouton couleur permettent d'ajouter une interface de s&eacute;lecteur de couleurs &agrave; vos extensions.
Outre les types d'entr&eacute;es standard tels que le texte, la case &agrave; cocher et le bouton, Dreamweaver prend en charge
mmcolorbutton, un autre type d'entr&eacute;es pr&eacute;sent dans les extensions.
Si vous sp&eacute;cifiez &lt;input type=&quot;mmcolorbutton&quot;&gt; dans votre code, un s&eacute;lecteur de couleurs s'affiche dans l'interface
utilisateur. Vous pouvez d&eacute;finir la couleur par d&eacute;faut du s&eacute;lecteur en d&eacute;finissant un attribut de valeur dans la balise
d'entr&eacute;e. Si aucune valeur n'est sp&eacute;cifi&eacute;e, le s&eacute;lecteur de couleurs s'affiche par d&eacute;faut en gris, et la propri&eacute;t&eacute; value de
l'objet d'entr&eacute;e renvoie une cha&icirc;ne vide.
L'exemple suivant repr&eacute;sente une balise mmcolorbutton valide :
&lt;input type=&quot;mmcolorbutton&quot; name=&quot;colorbutton&quot; value=&quot;#FF0000&quot;&gt;
&lt;input type=&quot;mmcolorbutton&quot; name=&quot;colorbutton&quot; value=&quot;teal&quot;&gt;
Un bouton couleur comporte un &eacute;v&eacute;nement, onChange, qui est d&eacute;clench&eacute; lorsque la couleur est modifi&eacute;e.
Veillez &agrave; synchroniser une zone de texte avec un s&eacute;lecteur de couleurs. Les exemples suivants cr&eacute;ent une zone de texte
qui synchronise la couleur de la zone de texte avec celle du s&eacute;lecteur de couleurs :
Derni&egrave;re mise &agrave; jour le 22/6/2011
96
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
&lt;input type = &quot;mmcolorbutton&quot; name=&quot;fgcolorPicker&quot;
onChange=&quot;document.fgcolorText.value=this.value&quot;&gt;
&lt;input type = &quot;test&quot; name=&quot;fgcolorText&quot; onBlur=&quot;document.fgColorPicker.value=this.value&quot;&gt;
Dans cet exemple, l'utilisateur modifie la valeur de la zone de texte puis acc&egrave;de &agrave; un autre &eacute;l&eacute;ment en appuyant sur la
touche Tab ou en cliquant. Le s&eacute;lecteur de couleurs est ensuite mis &agrave; jour afin d'afficher la couleur sp&eacute;cifi&eacute;e dans la
zone de texte. Lorsque l'utilisateur s&eacute;lectionne une nouvelle couleur dans le s&eacute;lecteur, la zone de texte affiche la valeur
hexad&eacute;cimale de cette couleur.
Ajout de contenu Flash &agrave; Dreamweaver
Le contenu Flash (fichiers SWF) peut s'afficher dans l'interface de Dreamweaver comme partie d'un objet ou d'une
commande. Cette prise en charge de Flash est tr&egrave;s utile si vous cr&eacute;ez des extensions qui emploient des formulaires,
animations, ActionScript ou autre contenu Flash.
Pour r&eacute;sumer, vous permettez aux objets et commandes Dreamweaver d'afficher des bo&icirc;tes de dialogue (voir &laquo; Objets
de la barre Insertion &raquo; &agrave; la page 109 pour plus d'informations sur la cr&eacute;ation d'objets et &laquo; Commandes &raquo; &agrave; la page 137
pour plus d'informations sur les commandes) &agrave; l'aide de la balise form avec la balise object pour incorporer votre
contenu Flash dans une bo&icirc;te de dialogue Dreamweaver.
Exemple d'une bo&icirc;te de dialogue Flash simple
Dans cet exemple, vous allez utiliser Dreamweaver pour cr&eacute;er une commande. La commande cr&eacute;&eacute;e affiche un fichier
SWF nomm&eacute; myFlash.swf lorsque l'utilisateur clique sur la commande dans le menu Commandes. Pour obtenir des
informations plus sp&eacute;cifiques sur la cr&eacute;ation de commandes avant d'appliquer cet exemple, consultez la section
&laquo; Commandes &raquo; &agrave; la page 137.
Remarque : Cet exemple suppose qu'un fichier SWF nomm&eacute; myFlash.swf se trouve d&eacute;j&agrave; dans le dossier
Configuration/Commands du dossier d'installation de l'application Dreamweaver. Pour tester cet exemple avec votre
propre fichier SWF, enregistrez ce fichier SWF dans le dossier Commands de l'application et remplacez toutes les
occurrences de myFlash.swf par le nom de votre fichier.
Dans Dreamweaver, ouvrez un nouveau document HTML de base (ce document constituera votre fichier de d&eacute;finition
de commande). Entre les balises title d'ouverture et de fermeture, entrez My Flash Movie afin que le d&eacute;but de votre
page indique :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Flash Movie&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;/head&gt;
Maintenant, enregistrez le fichier sous le nom My Flash Movie.htm dans le dossier Configuration/Commands de
l'application (le fichier doit n&eacute;anmoins rester ouvert). Enregistrez le fichier de fa&ccedil;on &agrave; pouvoir int&eacute;grer votre fichier
SWF avec un chemin d'acc&egrave;s relatif ; dans le cas contraire, Dreamweaver emploie un chemin absolu.
Revenez au document HTML. Entre les balises body d'ouverture et de fermeture, ajoutez des balises form d'ouverture
et de fermeture. Ensuite, entre ces balises form, utilisez l'option de Insertion &gt; M&eacute;dias &gt; Flash pour ajouter votre fichier
SWF au fichier de d&eacute;finition de commande. Lorsque vous y &ecirc;tes invit&eacute;, s&eacute;lectionnez le fichier SWF dans le dossier
Commands, puis cliquez sur OK. Votre fichier de d&eacute;finition de commande doit maintenant &ecirc;tre semblable &agrave; l'exemple
suivant (les attributs width et height peuvent &ecirc;tre diff&eacute;rents, selon les propri&eacute;t&eacute;s de votre fichier SWF) :
Derni&egrave;re mise &agrave; jour le 22/6/2011
97
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Flash Movie&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;body&gt;
&lt;form&gt;
&lt;object id=&quot;FlashID&quot; classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; width=&quot;700&quot;
height=&quot;150&quot;&gt;
&lt;param name=&quot;movie&quot; value=&quot;myFlash.swf&quot;&gt;
&lt;!--[if !IE]&gt;--&gt;
&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;myFlash.swf&quot; width=&quot;700&quot;
height=&quot;150&quot;&gt;
&lt;!--&lt;![endif]--&gt;
&lt;param name=&quot;quality&quot; value=&quot;high&quot;/&gt;
&lt;param name=&quot;wmode&quot; value=&quot;opaque&quot; /&gt;
&lt;param name=&quot;swfversion&quot; value=&quot;8.0.35.0&quot; /&gt;
&lt;!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the
latest version of Flash Player. Delete it if you don't want users to see the prompt. --&gt;
&lt;param name=&quot;expressinstall&quot;
value=&quot;../../../../../ColdFusion8/wwwroot/lr/Scripts/expressInstall.swf&quot; /&gt;
&lt;!-- The browser displays the following alternative content for users with Flash Player
6.0 and older. --&gt;
&lt;div&gt;
&lt;h4&gt;Content on this page requires a newer version of Adobe Flash Player.&lt;/h4&gt;
&lt;p&gt;&lt;a href=&quot;http://www.adobe.com/go/getflashplayer&quot;&gt;&lt;img
src=&quot;http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif&quot; alt=&quot;Get
Adobe Flash player&quot; width=&quot;112&quot; height=&quot;33&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;!--[if !IE]&gt;--&gt;
&lt;/object&gt;
&lt;!--&lt;![endif]--&gt;
&lt;/object&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Enregistrez &agrave; nouveau le fichier. Ensuite, quittez et red&eacute;marrez Dreamweaver. S&eacute;lectionnez Commandes &gt; My Flash
Movie et votre fichier SWF s'affiche dans une bo&icirc;te de dialogue Dreamweaver, comme indiqu&eacute; dans la figure suivante :
Derni&egrave;re mise &agrave; jour le 22/6/2011
98
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
Cet exemple pr&eacute;sente une mise en oeuvre simple de la prise en charge des fichiers SWF dans Dreamweaver. Lorsque
vous serez familiaris&eacute; avec la cr&eacute;ation d'objets et de commandes, ou encore de formulaires plus compliqu&eacute;s, vous
pourrez int&eacute;grer des fichiers SWF dans vos extensions Dreamweaver pour une exp&eacute;rience utilisateur encore plus
dynamique. Pour plus d'informations, voir &laquo; Commandes &raquo; &agrave; la page 137, qui porte sur l'&eacute;criture d'une fonction
commandButtons() permettant d'ajouter des boutons &agrave; la bo&icirc;te de dialogue qui affiche vos fichiers SWF.
Int&eacute;gration de Photoshop et d'objets dynamiques
Adobe&reg; Dreamweaver CS5&reg; importe et manipule les fichiers Photoshop sous la forme d'objets dynamiques. Toute
modification apport&eacute;e &agrave; l'image d'origine &agrave; l'aide de Photoshop se r&eacute;percute imm&eacute;diatement dans Dreamweaver. Pour
plus d'information sur les API qui int&egrave;grent Photoshop &agrave; Dreamweaver, voir &laquo; Int&eacute;gration de Photoshop &raquo; dans le
Guide des API de Dreamweaver.
Exemple d'objet dynamique
Dans cet exemple, vous allez utiliser Dreamweaver pour cr&eacute;er une commande qui met &agrave; jour un fichier Photoshop
(PSD) lorsque l'utilisateur clique sur cette commande dans le menu Commandes. Pour permettre &agrave; cette commande
de fonctionner, veillez &agrave; placer une image Web d'objet dynamique sur votre page HTML. Pour obtenir des
informations plus sp&eacute;cifiques sur la cr&eacute;ation de commandes avant d'appliquer cet exemple, consultez la section
&laquo; Commandes &raquo; &agrave; la page 137.
Dans Dreamweaver, ouvrez un nouveau document HTML de base (ce document constituera votre fichier de d&eacute;finition
de commande). Votre fichier de d&eacute;finition de commande se pr&eacute;sente comme suit :
Derni&egrave;re mise &agrave; jour le 22/6/2011
99
EXTENSION DE DREAMWEAVER
Interfaces utilisateur destin&eacute;es aux extensions
&lt;html xmlns:MMStr ing=&quot;http://www.adobe.com /schemes/data/
string/&quot;&gt;
&lt;head&gt;
&lt;title&gt; Smart Objects API&lt;/ title &gt;
&lt;SC RIPT SRC=&quot;../Shared/Common/Scripts /dwscripts.js&quot;&gt;&lt;/SC RIPT&gt;
&lt;SCRIPT LANGUAGE=&quot;Javascript&quot;&gt;
function invokeSmartObjectJavaScriptAPICall() {
var selection = dw.getSelection();
if (!selection) {
alert(&quot;Err: No selection!&quot;);
return;
}
var node = dw.offsetsToNode(selection[0], selection[1]);
if (!node) {
alert(&quot;Err: No Node!&quot;);
return;
}
var imageSrc = node.getAttribute(&quot;src&quot;);
if (!imageSrc) {
alert(&quot;Err: No src attribute!&quot;);
return;
}
var fullPath = getFullPath(imageSrc);
if (!fullPath) {
alert(&quot;Err: No path!&quot;);
return;
}
//alert(fullPath);
alert(&quot;updateSmartObjectFromOriginal&quot;);
dw.updateSmartObjectFromOriginal(fullPath);
}
&lt;script&gt;
&lt;/head&gt;
&lt;body onload=&quot;invokeSmartObjectJavaScriptAPICall()&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;
Enregistrez le fichier sous le nom smartobjects.htm dans le dossier Configuration/Commands de l'application.
Lorsque vous y &ecirc;tes invit&eacute;, s&eacute;lectionnez le fichier SWF dans le dossier Commands, puis cliquez sur OK.
Derni&egrave;re mise &agrave; jour le 22/6/2011
100
Chapitre 6 : Mod&egrave;le d'objet de document
(DOM) Dreamweaver
Dans Adobe Dreamweaver, le mod&egrave;le d'objet de document (DOM) est une structure essentielle pour les cr&eacute;ateurs
d'extensions.
Un DOM d&eacute;finit la composition des documents cr&eacute;&eacute;s dans un langage de balisage. En repr&eacute;sentant les balises et
attributs sous forme sous forme d'objets et de propri&eacute;t&eacute;s, le DOM rend les documents et leurs composants accessibles
et exploitables par les langages de programmation.
A propos du DOM de Dreamweaver
La structure d'un document HTML est r&eacute;v&eacute;l&eacute;e par son arborescence. La racine est la balise html et les deux parties
principales sont les balises head et body. Parmi les ramifications de head figurent les balises title, style, script,
isindex, base, meta et link. Les ramifications de la balise body sont les suivantes :
• Titres (h1, h2, etc.)
• El&eacute;ments de niveau bloc (p, div, form, etc.)
• El&eacute;ments int&eacute;gr&eacute;s (br, img, etc.)
• Autres types d'&eacute;l&eacute;ments
Les &eacute;l&eacute;ments &eacute;mergeant de ces ramifications correspondent, entre autres, &agrave; des attributs tels que width, height, alt, etc.
Dans un DOM, la structure de l'arborescence est maintenue et pr&eacute;sent&eacute;e sous la forme d'une hi&eacute;rarchie de nœuds
parents et de nœuds enfants. Le nœud racine est orphelin, et les nœuds terminaux sont d&eacute;pourvus de nœuds enfants.
A chaque niveau de cette structure HTML, l'&eacute;l&eacute;ment HTML peut rev&ecirc;tir la forme d'un nœud dans JavaScript. Cette
structure vous permet ainsi d'acc&eacute;der au document et &agrave; tous les &eacute;l&eacute;ments qui le composent.
Dans JavaScript, vous pouvez faire r&eacute;f&eacute;rence &agrave; l'un des objets du document par nom ou par index. Par exemple,
supposons qu'un bouton Envoyer dont le nom ou l'ID est &laquo; myButton &raquo; soit le second &eacute;l&eacute;ment du premier formulaire
du document. Dans ce cas, les deux r&eacute;f&eacute;rences suivantes au bouton sont valides :
• Par nom, comme document.myForm.myButton
• Par index, comme document.forms[0].elements[1]
Les objets qui portent le m&ecirc;me nom, tels qu'un groupe d'options, sont r&eacute;duits sous forme de tableau. Vous pouvez
acc&eacute;der &agrave; un objet pr&eacute;cis du tableau en augmentant l'index, en prenant z&eacute;ro comme origine. Par exemple, la premi&egrave;re
option portant le nom &laquo; myRadioGroup &raquo; dans un formulaire nomm&eacute; &laquo; myForm &raquo; poss&egrave;de la r&eacute;f&eacute;rence
document.myForm.myRadioGroup[0].
Derni&egrave;re mise &agrave; jour le 22/6/2011
101
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Distinction entre les DOM de document utilisateur et
d'extension
Il convient de faire la diff&eacute;rence entre le DOM du document de l'utilisateur et le DOM de l'extension. Les informations
pr&eacute;sent&eacute;es dans cette rubrique s'appliquent aux deux types de documents Dreamweaver, mais la mani&egrave;re de r&eacute;f&eacute;rencer
chacun des DOM diff&egrave;re.
Si vous &ecirc;tes familier avec l'utilisation de JavaScript dans les navigateurs, vous pouvez d&eacute;signer les objets du document
par document (par exemple, document.forms[0]). Dans Dreamweaver, document se rapporte au fichier d'extension
; document.forms[0] se rapporte au premier formulaire dans l'UI d'extension. Pour r&eacute;f&eacute;rencer les objets dans le
document de l'utilisateur, vous devez toutefois appeler dw.getDocumentDOM(), dw.createDocument() ou toute
autre fonction qui renvoie un objet de document utilisateur.
Ainsi, pour d&eacute;signer la premi&egrave;re image du document actif, vous pouvez &eacute;crire dw.getDocumentDOM().images[0].
Vous pouvez &eacute;galement stocker l'objet de document dans une variable et vous y r&eacute;f&eacute;rer ult&eacute;rieurement, comme
indiqu&eacute; dans l'exemple suivant :
var dom = dw.getDocumentDOM();
var firstImg = dom.images[0];
firstImg.src = &quot;myImages.gif&quot;;
//get the dom of the current document
Ce type d'annotation est commun dans tous les fichiers du dossier Configuration, particuli&egrave;rement dans les fichiers de
commandes. Pour plus d'informations sur la m&eacute;thode dw.getDocumentDOM(), voir la fonction
dreamweaver.getDocumentDOM() dans le Guide des API de Dreamweaver.
DOM Dreamweaver
Le DOM Dreamweaver associe un sous-ensemble d'objets, de propri&eacute;t&eacute;s et de m&eacute;thodes du DOM Niveau 1 du World
Wide Web Consortium (W3C), combin&eacute;s &agrave; certaines propri&eacute;t&eacute;s du DOM de Microsoft Internet Explorer 4.0.
Objets, propri&eacute;t&eacute;s et m&eacute;thodes du DOM Dreamweaver
Le tableau suivant r&eacute;pertorie les objets, les propri&eacute;t&eacute;s, les m&eacute;thodes et les &eacute;v&eacute;nements pris en charge par le DOM
Dreamweaver. Certaines propri&eacute;t&eacute;s sont en lecture seule lorsqu'elles sont accessibles en tant que propri&eacute;t&eacute;s d'un objet
sp&eacute;cifique. Les propri&eacute;t&eacute;s en lecture seule, lorsqu'elles sont utilis&eacute;es dans le contexte recens&eacute;, sont marqu&eacute;es d'une puce
(•).
Derni&egrave;re mise &agrave; jour le 22/6/2011
102
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Objet
Propri&eacute;t&eacute;s
M&eacute;thodes
Ev&eacute;nements
window
navigator •
alert()
onResize
document •
confirm()
innerWidth •
escape()
innerHeight •
unescape()
screenX •
close()
screenY •
setTimeout()
clearTimeout()
setInterval()
clearInterval()
resizeTo()
navigator
platform •
Aucun
Aucun
document
forms • (tableau d'objets de
getElementsByTagName()
onLoad
formulaire)
getElementsByAttributeName()
images • (tableau d'objets image)
layers • (tableau d'objets LAYER,
ILAYER et d'&eacute;l&eacute;ments &agrave;
getElementById()
hasChildNodes()
positionnement absolu)
Objets child par nom •
nodeType •
parentNode •
childNodes •
previousSibling •
nextSibling •
documentElement •
body •
URL •
parentWindow •
toutes les
balises/tous les
&eacute;l&eacute;ments
nodeType •
getAttribute()
parentNode •
setAttribute()
childNodes •
removeAttribute()
tagName •
getElementsByTagName()
previousSibling •
getElementsByAttributeName()
nextSibling •
hasChildNodes()
attributs par nom
innerHTML
outerHTML
Derni&egrave;re mise &agrave; jour le 22/6/2011
103
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Objet
Propri&eacute;t&eacute;s
M&eacute;thodes
Ev&eacute;nements
form
Uniquement les m&eacute;thodes disponibles pour toutes Aucun
En compl&eacute;ment des propri&eacute;t&eacute;s
disponibles pour toutes les balises : les balises.
tags:elements • (tableau
d'objets button, checkbox,
password, radio, reset,
select, submit, text,
file, hidden, image et
textarea)
mmcolorbutton
Objets child par nom •
layer
En compl&eacute;ment des propri&eacute;t&eacute;s
Uniquement les m&eacute;thodes disponibles pour toutes Aucun
disponibles pour toutes les balises : les balises.
visibility
left
top
width
height
zIndex
image
En compl&eacute;ment des propri&eacute;t&eacute;s
Uniquement les m&eacute;thodes disponibles pour toutes onMouseOver
onMouseOut
disponibles pour toutes les balises : les balises.
onMouseDown
onMouseUp
src
button reset submit
En compl&eacute;ment des propri&eacute;t&eacute;s
En compl&eacute;ment des m&eacute;thodes disponibles pour
disponibles pour toutes les balises : toutes les balises :
form •
onClick
blur()
focus()
checkbox radio
En compl&eacute;ment des propri&eacute;t&eacute;s
En compl&eacute;ment des m&eacute;thodes disponibles pour
disponibles pour toutes les balises : toutes les balises :
checked •
onClick
blur()
form •
password text file
hidden image (field)
textarea
focus()
En compl&eacute;ment des propri&eacute;t&eacute;s
En compl&eacute;ment des m&eacute;thodes disponibles pour
disponibles pour toutes les balises : toutes les balises :
form •
blur()
value
focus()
onBlur onFocus
select()
select
En compl&eacute;ment des propri&eacute;t&eacute;s
En compl&eacute;ment des m&eacute;thodes disponibles pour
disponibles pour toutes les balises : toutes les balises :
form •
blur() (Windows uniquement)
options • (tableau d'objets
focus() (Windows uniquement)
onBlur (Windows
uniquement)
onChange onFocus
(Windows
uniquement)
d'option)
selectedIndex
option
En compl&eacute;ment des propri&eacute;t&eacute;s
Uniquement les m&eacute;thodes disponibles pour toutes Aucun
disponibles pour toutes les balises : les balises.
text
Derni&egrave;re mise &agrave; jour le 22/6/2011
104
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Objet
Propri&eacute;t&eacute;s
M&eacute;thodes
mmcolorbutton
En compl&eacute;ment des propri&eacute;t&eacute;s
Aucun
disponibles pour toutes les balises :
Ev&eacute;nements
onChange
name
value
array
boolean
Correspond &agrave; Netscape Navigator
4.0
Correspond &agrave; Netscape Navigator 4.0
Aucun
nodeType •
hasChildNodes()
Aucun
hasChildNodes()
Aucun
date
function
number
object
string
regexp
text
parentNode •
childNodes •
previousSibling •
nextSibling •
data
comment
nodeType •
parentNode •
childNodes •
previousSibling •
nextSibling •
data
NodeList
longueur •
item()
Aucun
NamedNodeMap
longueur •
item()
Aucun
Propri&eacute;t&eacute;s et m&eacute;thodes de l'objet document
Le tableau suivant d&eacute;crit en d&eacute;tail les propri&eacute;t&eacute;s et les m&eacute;thodes de l'objet document qui sont prises en charge par
Dreamweaver. Les propri&eacute;t&eacute;s en lecture seule sont marqu&eacute;es d'une puce (•).
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
nodeType •
Node.DOCUMENT_NODE
parentNode •
null
parentWindow •
L'objet JavaScript correspond &agrave; la fen&ecirc;tre parente du document.
Cette propri&eacute;t&eacute; est d&eacute;finie dans le DOM de Microsoft Internet
Explorer 4.0, mais ne fait pas partie du DOM de niveau 1 ou 2.
childNodes •
Une NodeList (liste de nœuds) comprend tous les enfants
imm&eacute;diats de l'objet document. En r&egrave;gle g&eacute;n&eacute;rale, le document
comporte un seul enfant : l'objet HTML.
Derni&egrave;re mise &agrave; jour le 22/6/2011
105
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
previousSibling •
null
nextSibling •
null
documentElement •
L'objet JavaScript correspond &agrave; la balise html. Cette propri&eacute;t&eacute; est
une forme courte permettant d'obtenir la valeur de
document.childNodes et d'extraire la balise HTML de la
NodeList.
body •
L'objet JavaScript correspond &agrave; la balise body. Cette propri&eacute;t&eacute; est
une forme courte permettant d'appeler
document.documentElement.childNodes et d'extraire la
balise body de la NodeList. Pour les documents de jeu de cadres,
cette propri&eacute;t&eacute; renvoie le nœud correspondant au jeu de cadres
situ&eacute; le plus &agrave; l'ext&eacute;rieur.
URL •
L'URL de type file:// du document ou, si le fichier n'a pas &eacute;t&eacute;
enregistr&eacute;, une cha&icirc;ne vide.
getElementsByTagName(tagName)
Une NodeList pouvant &ecirc;tre utilis&eacute;e pour parcourir les balises de
type tagName (par exemple, img, div, etc.).
Si l'argument tagName est &laquo; layer &raquo;, la fonction renvoie toutes les
balises LAYER et ILAYER et tous les &eacute;l&eacute;ments &agrave; positionnement
absolu.
Si l'argument tagName est &laquo; INPUT &raquo;, la fonction renvoie tous les
&eacute;l&eacute;ments du formulaire. Si un attribut de nom est sp&eacute;cifi&eacute; pour un
ou plusieurs objets tagName, il doit commencer par une lettre
conform&eacute;ment &agrave; la sp&eacute;cification HTML 4.01 ; &agrave; d&eacute;faut, la longueur
du tableau renvoy&eacute;e par cette fonction sera incorrecte.
Obtient le nœud d'&eacute;l&eacute;ment comportant l'id sp&eacute;cifi&eacute;. O&ugrave; id
d&eacute;signe une cha&icirc;ne contenant l'ID de l'&eacute;l&eacute;ment &agrave;
obtenir.
getElementsById(Id)
var dom = dw.getDocumentDOM(); var contObj =
dom.getElementById('content'); alert(&quot;The element
with the id 'content' is a &quot; + contObj.tagName);
getElementsByAttributeName(attrName)
Un objet NodeList qui permet de parcourir les &eacute;l&eacute;ments
comportant un attribut attrName (par exemple, tous les &eacute;l&eacute;ments
avec l'attribut &laquo; for &raquo;). Ne fait pas partie de DOM niveau 1 ou 2.
getElementById(id)
L'&eacute;l&eacute;ment HTML comportant l'ID sp&eacute;cifi&eacute;e.
hasChildNodes()
true
Propri&eacute;t&eacute;s et m&eacute;thodes du code HTML
Le tableau ci-dessous r&eacute;pertorie les propri&eacute;t&eacute;s et les m&eacute;thodes des &eacute;l&eacute;ments HTML dans Dreamweaver, ainsi que leurs
valeurs de retour ou leurs explications. Les propri&eacute;t&eacute;s en lecture seule sont marqu&eacute;es d'une puce (•).
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
nodeType •
Node.ELEMENT_NODE
parentNode •
Balise parente. S'il s'agit de la balise HTML, l'objet document est renvoy&eacute;.
childNodes •
Une NodeList (liste de nœuds) comprend tous les enfants imm&eacute;diats de la
balise.
previousSibling •
Le nœud fr&egrave;re situ&eacute; juste avant. Par exemple, dans un document HTML, l'objet
previousSibling de l'&eacute;l&eacute;ment body est l'&eacute;l&eacute;ment head.
Derni&egrave;re mise &agrave; jour le 22/6/2011
106
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
nextSibling •
Le nœud fr&egrave;re situ&eacute; juste apr&egrave;s. Par exemple, dans un document HTML, l'objet
nextSibling de l'&eacute;l&eacute;ment head est l'&eacute;l&eacute;ment body. Toute balise script,
style ou meta figurant dans la section head constituerait un nœud enfant de
l'&eacute;l&eacute;ment head.
tagName •
Le code HTML tagName de l'&eacute;l&eacute;ment, tel que IMG, A ou DIV. La valeur renvoy&eacute;e
est toujours en majuscules.
attrName
Cha&icirc;ne contenant la valeur de l'attribut de balise sp&eacute;cifi&eacute;. La balise attrName
ne peut pas &ecirc;tre utilis&eacute;e si l'attribut attrName est un mot r&eacute;serv&eacute; dans le
langage JavaScript (par exemple, class). Dans ce cas, utilisez
getAttribute() et setAttribute().
innerHTML
Le code source qui figure entre les balises de d&eacute;but et de fin. Par exemple, dans
le code &lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;, World!/&lt;p&gt;, p.innerHTML renvoie
&lt;b&gt;Hello&lt;/b&gt;, World!. Si vous &eacute;crivez dans cette propri&eacute;t&eacute;, l'arborescence
DOM est imm&eacute;diatement mise &agrave; jour de fa&ccedil;on &agrave; refl&eacute;ter la nouvelle structure du
document. Cette propri&eacute;t&eacute; est d&eacute;finie dans le DOM de Microsoft Internet
Explorer 4.0, mais ne fait pas partie du DOM de niveau 1 ou 2.
outerHTML
Code source de cette balise, y compris la balise elle-m&ecirc;me. Pour l'exemple de
code pr&eacute;c&eacute;dent, p.outerHTML renvoie &lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;, World!&lt;/p&gt;.
Si vous &eacute;crivez dans cette propri&eacute;t&eacute;, l'arborescence DOM est imm&eacute;diatement
mise &agrave; jour de fa&ccedil;on &agrave; refl&eacute;ter la nouvelle structure du document. Cette
propri&eacute;t&eacute; est d&eacute;finie dans le DOM de Microsoft Internet Explorer 4.0, mais ne
fait pas partie du DOM de niveau 1 ou 2.
getAttribute(attrName)
Valeur de l'attribut sp&eacute;cifi&eacute;, si celui-ci est sp&eacute;cifi&eacute; explicitement ; sinon, null.
getTranslatedAttribute(attrName)
Valeur traduite de l'attribut sp&eacute;cifi&eacute; ou la m&ecirc;me valeur que celle renvoy&eacute;e par
getAttribute() si la valeur de l'attribut n'est pas traduite. Cette propri&eacute;t&eacute;
n'est pas incluse dans le DOM Niveau 1 ; elle a &eacute;t&eacute; ajout&eacute;e &agrave; Dreamweaver 3
pour prendre en charge la traduction d'attributs.
setAttribute(attrName, attrValue)
Ne renvoie aucune valeur. D&eacute;finit l'attribut sp&eacute;cifi&eacute; sur l'exemple de valeur
sp&eacute;cifi&eacute;, img.setAttribute(&quot;src&quot;, &quot;image/roses.gif&quot;).
removeAttribute(attrName)
Ne renvoie aucune valeur. Supprime l'attribut d&eacute;fini et sa valeur du code HTML
de la balise.
getElementsByTagName(tagName)
Une NodeList pouvant &ecirc;tre utilis&eacute;e pour parcourir les balises enfants de type
tagName (par exemple, IMG, DIV, etc.).
Si l'argument tagName est &laquo; layer &raquo;, la fonction renvoie toutes les balises
LAYER et ILAYER et tous les &eacute;l&eacute;ments &agrave; positionnement absolu.
Si l'argument tagName est &laquo; input &raquo;, la fonction renvoie tous les &eacute;l&eacute;ments du
formulaire. Si un attribut de nom est sp&eacute;cifi&eacute; pour un ou plusieurs objets
tagName, il doit commencer par une lettre conform&eacute;ment &agrave; la sp&eacute;cification
HTML 4.01 ; &agrave; d&eacute;faut, la longueur du tableau renvoy&eacute;e par cette fonction sera
incorrecte.
getElementsByAttributeName(attrName)
Un objet NodeList qui permet de parcourir les &eacute;l&eacute;ments comportant un
attribut attrName (par exemple, tous les &eacute;l&eacute;ments avec l'attribut &laquo; for &raquo;). Ne
fait pas partie de DOM niveau 1 ou 2.
hasChildNodes()
Valeur bool&eacute;enne indiquant si la balise a des enfants.
hasTranslatedAttributes()
Valeur bool&eacute;enne indiquant si la balise a des attributs traduits. Cette propri&eacute;t&eacute;
n'est pas incluse dans le DOM Niveau 1 ; elle a &eacute;t&eacute; ajout&eacute;e &agrave; Dreamweaver 3
pour prendre en charge la traduction d'attributs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
107
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Propri&eacute;t&eacute;s et m&eacute;thodes des objets texte
Chaque bloc de texte contigu dans un document HTML (par exemple, le texte compris &agrave; l'int&eacute;rieur d'une balise p) est
repr&eacute;sent&eacute; par un objet JavaScript. Les objets texte n'ont jamais d'enfants. Le tableau suivant d&eacute;crit les propri&eacute;t&eacute;s et les
m&eacute;thodes d'objets texte emprunt&eacute;es au DOM Niveau 1 et employ&eacute;es dans Dreamweaver. Les propri&eacute;t&eacute;s en lecture
seule sont marqu&eacute;es d'une puce (•).
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
nodeType •
Node.TEXT_NODE
parentNode •
Balise parente
child Nodes •
Vide
previousSibling •
Le nœud fr&egrave;re situ&eacute; juste avant. Par exemple, dans le code &lt;p&gt;blah&lt;br /&gt;blah&lt;/p&gt;, la
balise &lt;p&gt; comporte trois nœuds enfant (nœud texte, nœud &eacute;l&eacute;ment, nœud texte). Le nœud
previousSibling du troisi&egrave;me enfant correspond &agrave; la balise &lt;br /&gt;; le nœud
previousSibling du premier enfant a la valeur null.
nextSibling •
Le nœud fr&egrave;re situ&eacute; juste apr&egrave;s. Par exemple, dans le code &lt;p&gt;blah&lt;br /&gt;blah&lt;/p&gt;, le
nœud nextSibling du premier enfant de la balise p est la balise &lt;br /&gt; ; le nœud
nextSibling du troisi&egrave;me enfant a la valeur null.
data
La cha&icirc;ne de texte r&eacute;elle. Les entit&eacute;s du texte sont repr&eacute;sent&eacute;es par des caract&egrave;res uniques
(par exemple, le texte Joseph &amp; I est renvoy&eacute; sous la forme Joseph &amp; I).
hasChildNodes()
false
Propri&eacute;t&eacute;s et m&eacute;thodes des objets de commentaire
Un objet JavaScript repr&eacute;sente chaque commentaire HTML. Le tableau suivant d&eacute;crit en d&eacute;tail les propri&eacute;t&eacute;s et les
m&eacute;thodes d'objets de commentaires emprunt&eacute;es au DOM Niveau 1 et employ&eacute;es dans Dreamweaver. Les propri&eacute;t&eacute;s
en lecture seule sont marqu&eacute;es d'une puce (•).
Propri&eacute;t&eacute; ou m&eacute;thode
Valeur renvoy&eacute;e
nodeType •
Node.COMMENT_NODE
parentNode •
Balise parente
childNodes •
Un tableau NodeList vide
previousSibling •
Le nœud fr&egrave;re situ&eacute; juste avant.
nextSibling •
Le nœud fr&egrave;re situ&eacute; juste apr&egrave;s.
data
Cha&icirc;ne de texte comprise entre les marqueurs de commentaires &lt;!-- et --&gt;)
hasChildNodes()
false
Objets dreamweaver et site
Dreamweaver impl&eacute;mente les objets standard accessibles au moyen du DOM et ajoute deux objets personnalis&eacute;s :
dreamweaver et site. Ces objets personnalis&eacute;s sont couramment utilis&eacute;s dans les API et pour la r&eacute;daction
d'extensions. Pour plus d'informations sur les m&eacute;thodes des objets dreamweaver et site, voir le Guide des API de
Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
108
EXTENSION DE DREAMWEAVER
Mod&egrave;le d'objet de document (DOM) Dreamweaver
Propri&eacute;t&eacute;s de l'objet dreamweaver
L'objet dreamweaver poss&egrave;de deux propri&eacute;t&eacute;s en lecture seule, comme indiqu&eacute; dans la liste suivante :
• La propri&eacute;t&eacute; appName prend la valeur &quot;Dreamweaver&quot;.
• La propri&eacute;t&eacute; appVersion prend une valeur ayant le format
&quot;versionNumber.releaseNumber.buildNumber[languageCode] (platform)&quot;.
Par exemple, la valeur de la propri&eacute;t&eacute; appVersion pour la version Windows su&eacute;doise de Dreamweaver est
&quot;8.0.XXXX [se] (Win32)&quot; ; pour la version Macintosh anglaise, il s'agit de &quot;8.0.XXXX [en] (MacPPC)&quot;.
Remarque : Vous trouverez la version et le num&eacute;ro de compilation en choisissant l'&eacute;l&eacute;ment de menu Aide &gt; A propos de.
Les propri&eacute;t&eacute;s appName et appVersion ont &eacute;t&eacute; impl&eacute;ment&eacute;es dans Dreamweaver 3 et ne sont pas disponibles dans les
versions ant&eacute;rieures de Dreamweaver.
Pour conna&icirc;tre la version sp&eacute;cifique de Dreamweaver, v&eacute;rifiez en premier lieu l'existence de appVersion. Ensuite,
pour le num&eacute;ro de version, proc&eacute;dez comme dans l'exemple suivant :
if (dreamweaver.appVersion &amp;&amp; dreamweaver.appVersion.indexOf('3.01') != -1){&not;
// execute code
}
L'objet dreamweaver comprend une propri&eacute;t&eacute; appel&eacute;e systemScript, qui vous permet de v&eacute;rifier la langue du
syst&egrave;me d'exploitation de l'utilisateur. Elle vous sera utile pour inclure dans le code de votre extension des sp&eacute;cificit&eacute;s
des syst&egrave;mes d'exploitation localis&eacute;s, comme indiqu&eacute; dans l'exemple suivant :
if (dreamweaver,systemScript &amp;&amp; (dreamweaver.systemScript.indexOf('ja')!=-1){&not;
SpecialCase }
La propri&eacute;t&eacute; systemScript renvoie les valeurs suivantes pour les syst&egrave;mes d'exploitation localis&eacute;s :
Langage
Valeur
Japonais
ja
Cor&eacute;en
ko
Chinois traditionnel
zh_tw
Chinois simplifi&eacute;
zh_cn
Les syst&egrave;mes d'exploitation localis&eacute;s dans les langues europ&eacute;ennes renvoient la valeur en.
Objet site
L'objet site n'a aucune propri&eacute;t&eacute;. Pour plus d'informations sur les m&eacute;thodes de l'objet site, voir le Guide des API de
Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
109
Chapitre 7 : Objets de la barre Insertion
Vous pouvez ajouter des &eacute;l&eacute;ments &agrave; la barre Insertion pour permettre aux utilisateurs d'effectuer automatiquement
certaines t&acirc;ches r&eacute;p&eacute;titives, voire cr&eacute;er des bo&icirc;tes de dialogue pour leur permettre de d&eacute;finir des attributs sp&eacute;cifiques.
Les objets sont stock&eacute;s dans le dossier Configuration/Objects du dossier de l'application Dreamweaver. Les sousdossiers du dossier Objects sont regroup&eacute;s en fonction de l'emplacement des objets dans la barre Insertion ; vous
pouvez les ouvrir pour visualiser la construction des objets actuels. Par exemple, vous pouvez ouvrir le fichier
Configuration/Objects/Common/Hyperlink.htm pour afficher le code correspondant au bouton permettant d'ins&eacute;rer
l'objet Hyperlien de la barre Insertion.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er un objet.
Chemin
Fichier
Description
Configuration/Objects/type_objet/
nom_objet.htm
Indique l'&eacute;l&eacute;ment &agrave; ins&eacute;rer dans le document.
Configuration/Objects/type_objet/
nom_objet.js
Contient les fonctions &agrave; ex&eacute;cuter.
Configuration/Objects/type_objet/
nom_objet.gif
Contient l'image qui s'affiche sur la barre Insertion.
Configuration/Objects
insertbar.xml
D&eacute;signe les objets qui s'affichent sur la barre Insertion,
ainsi que l'ordre d'affichage correspondant.
Fonctionnement des fichiers d'objet
Les objets ins&egrave;rent des cha&icirc;nes de code sp&eacute;cifiques dans le document d'un utilisateur. Les objets permettent &agrave;
l'utilisateur d'ajouter un contenu (images, &eacute;l&eacute;ments &agrave; positionnement absolu, tableaux, etc.) en cliquant sur des ic&ocirc;nes
ou en s&eacute;lectionnant des options du menu.
Les objets se composent des &eacute;l&eacute;ments suivants :
• Le fichier HTML d&eacute;finissant l'&eacute;l&eacute;ment ins&eacute;r&eacute; dans le document.
La section head d'un fichier d'objet contient des fonctions JavaScript (ou fait r&eacute;f&eacute;rence &agrave; des fichiers JavaScript
externes) qui traitent les saisies de formulaires depuis la section body et d&eacute;terminent le contenu qui est ajout&eacute; au
document de l'utilisateur. Le corps d'un fichier d'objet peut contenir un formulaire HTML qui accepte des
param&egrave;tres pour l'objet (par exemple, le nombre de lignes et de colonnes &agrave; ins&eacute;rer dans un tableau) et active une
bo&icirc;te de dialogue o&ugrave; les utilisateurs peuvent entrer des attributs.
Remarque : Les objets les plus simples contiennent uniquement le code HTML &agrave; ins&eacute;rer, sans les balises body et head.
Pour plus d’informations, consultez la section &laquo; Customizing Dreamweaver &raquo; (Personnalisation de Dreamweaver) du
centre de support d'Adobe.
• L'image figurant dans la barre Insertion (18 x 18 pixels).
• Additions au fichier insertbar.xml. Le fichier insertbar.xml d&eacute;finit l'endroit o&ugrave; appara&icirc;t l'objet dans la barre
Insertion.
Derni&egrave;re mise &agrave; jour le 22/6/2011
110
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Un utilisateur peut s&eacute;lectionner un objet en cliquant sur une ic&ocirc;ne de la barre Insertion ou en choisissant un
&eacute;l&eacute;ment dans le menu Insertion. Lorsqu'un utilisateur s&eacute;lectionne un objet, les &eacute;v&eacute;nements suivants se produisent :
1 Adobe Dreamweaver appelle la fonction canInsertObject() pour d&eacute;terminer s'il doit afficher une bo&icirc;te de
dialogue.
La balise form est recherch&eacute;e dans le fichier d'objet. Si un formulaire existe et que vous s&eacute;lectionnez l'option
Afficher la bo&icirc;te de dialogue lors de l'insertion d'un objet de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences g&eacute;n&eacute;rales,
Dreamweaver appelle la fonction windowDimensions(), si elle est d&eacute;finie. Dreamweaver appelle la fonction
pour d&eacute;terminer la taille de la bo&icirc;te de dialogue dans laquelle le formulaire doit &ecirc;tre affich&eacute;. Si le fichier d'objet
ne contient aucun formulaire, Dreamweaver n'affiche pas de bo&icirc;te de dialogue et ignore l'&eacute;tape 2.
2 Si Dreamweaver affiche une bo&icirc;te de dialogue &agrave; l'&eacute;tape 1, l'utilisateur saisit les param&egrave;tres de l'objet (tels que le
nombre de lignes et de colonnes d'un tableau) dans les champs de texte de la bo&icirc;te de dialogue, puis clique
sur OK.
3 Dreamweaver appelle la fonction objectTag() et ins&egrave;re la valeur renvoy&eacute;e correspondante dans le document
apr&egrave;s la s&eacute;lection en cours (celle-ci n'est pas remplac&eacute;e).
4 Si Dreamweaver ne trouve pas la fonction objectTag(), il recherche une fonction insertObject() et l'appelle.
Fichier de d&eacute;finition de la barre Insertion
Le fichier Configuration/Objects/insertbar.xml d&eacute;finit les propri&eacute;t&eacute;s de la barre Insertion. Ce fichier XML contient la
d&eacute;finition de chacun des objets, dans leur ordre d'apparition.
La premi&egrave;re fois qu'un utilisateur d&eacute;marre Dreamweaver, la barre Insertion s'affiche horizontalement au-dessus du
document. Sa visibilit&eacute; et sa position sont ensuite enregistr&eacute;es dans le Registre.
Hi&eacute;rarchie des balises du fichier Insertbar.xml
L'exemple ci-dessous affiche le format et la hi&eacute;rarchie des balises imbriqu&eacute;es du fichier insertbar.xml :
&lt;?xml version=&quot;1.0&quot; ?&gt;
&lt;!DOCTYPE insertbarset SYSTEM &quot;-//Adobe//DWExtension insertbar 10.0&quot;&gt;
&lt;insertbar xmlns:MMString=&quot;http://www.adobe.com/schemes/data/string/&quot;&gt;
&lt;category id=&quot;DW_Insertbar_Common&quot; MMString:name=&quot;insertbar/categorycommon&quot; folder=&quot;Common&quot;&gt;
&lt;button id=&quot;DW_Hyperlink&quot; image=&quot;Common\Hyperlink.png&quot;
MMString:name=&quot;insertbar/hyperlink&quot; file=&quot;Common\Hyperlink.htm&quot; /&gt;
&lt;button id=&quot;DW_Email&quot; image=&quot;Common\E-Mail Link.png&quot;
MMString:name=&quot;insertbar/email&quot; file=&quot;Common\E-Mail Link.htm&quot; /&gt;
&lt;separator /&gt;
&lt;menubutton id=&quot;DW_Images&quot; MMString:name=&quot;insertbar/images&quot;
image=&quot;Common\Image.png&quot;&gt;
&lt;button id=&quot;DW_Image&quot; image=&quot;Common\Image.png&quot;
MMString:name=&quot;insertbar/image&quot; file=&quot;Common\Image.htm&quot; /&gt;
...
&lt;/menubutton&gt;
&lt;separator /&gt;
&lt;button id=&quot;DW_TagChooser&quot; MMString:name=&quot;insertbar/tagChooser&quot;
image=&quot;Common\Tag Chooser.gif&quot; command=&quot;dw.showTagChooser()&quot;
codeOnly=&quot;TRUE&quot;/&gt;
&lt;/category&gt;
...
&lt;/insertbar&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
111
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Remarque : Les balises insertbar et category emploient les balises de fermeture &lt;/insertbar&gt; et &lt;/category&gt; pour
indiquer la fin de leur contenu. La fin des attributs et du contenu des balises button, checkbutton et separator est indiqu&eacute;e
par une barre oblique (/) ins&eacute;r&eacute;e avant le crochet de fermeture.
Balises de d&eacute;finition de la barre Insertion
Le fichier insertbar.xml contient les balises et les attributs suivants :
&lt;insertbar&gt;
Description
Cette balise d&eacute;signe le contenu du fichier de d&eacute;finition de la barre Insertion. La balise de fermeture &lt;/insertbar&gt;
indique la fin du contenu.
Attributs
Aucun.
Exemple
&lt;insertbar&gt;
&lt;category id=&quot;DW_Insertbar_Common&quot; folder=&quot;Common&quot;&gt;
&lt;button id=&quot;DW_Hyperlink&quot; image=&quot;Common\Hyperlink.gif&quot;
file=&quot;Common\Hyperlink.htm&quot;/&gt;0
...
&lt;/insertbar&gt;
&lt;category&gt;
Description
Cette balise d&eacute;finit une cat&eacute;gorie de la barre Insertion (par exemple, Commun, Formulaires ou HTML). La balise de
fermeture &lt;/category&gt; indique la fin du contenu.
Remarque : Par d&eacute;faut, la barre Insertion regroupe diff&eacute;rentes cat&eacute;gories (par exemple, Commun, Formulaires ou
HTML). Dans les versions pr&eacute;c&eacute;dentes de Dreamweaver, la barre Insertion se composait de diff&eacute;rents onglets. Les
utilisateurs peuvent d&eacute;finir leurs pr&eacute;f&eacute;rences quant &agrave; l'organisation des objets de la barre Insertion (par cat&eacute;gorie ou par
onglet). Si l'utilisateur choisit l'organisation par onglet, la balise category d&eacute;finit chacun d'eux.
Attributs
id, {folder}, {showIf}
Exemple
&lt;category id=&quot;DW_Insertbar_Common&quot; folder=&quot;Common&quot;&gt;
&lt;button id=&quot;DW_Hyperlink&quot; image=&quot;Common\Hyperlink.gif&quot;
file=&quot;Common\Hyperlink.htm&quot;/&gt;
&lt;/category&gt;
&lt;menubutton&gt;
Description
Cette balise d&eacute;finit un menu d&eacute;roulant dans la barre Insertion.
Derni&egrave;re mise &agrave; jour le 22/6/2011
112
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Attributs
id, image, {showIf}, {name}, {folder}
Exemple
&lt;menubutton
id=&quot;DW_ImageMenu&quot;
name=&quot;Images&quot;
image=&quot;Common\imagemenu.gif&quot;
folder=&quot;Images&quot;&gt;
&lt;button id=&quot;DW_Image&quot;
image=&quot;Common\Image.gif&quot;
enabled=&quot;&quot;
showIf=&quot;&quot;
file=&quot;Common\Image.htm&quot; /&gt;
&lt;/menubutton&gt;
&lt;button /&gt;
Description
Cette balise d&eacute;finit un bouton de la barre Insertion permettant &agrave; l'utilisateur d'ex&eacute;cuter le code sp&eacute;cifi&eacute; par les attributs
command ou file.
Attributs
id, image, name, {canDrag}, {showIf}, {enabled}, {command}, {file}, {tag}, {codeOnly}
Exemple
&lt;button id=&quot;DW_Object&quot;
image=&quot;Common\Object.gif&quot;
name=&quot;Object&quot;
enabled=&quot;true&quot;
showIf=&quot;&quot;
file=&quot;Common\Obect.htm&quot;
/&gt;
&lt;checkbutton /&gt;
Description
Ce type de bouton peut se voir attribuer l'&eacute;tat activ&eacute; ou d&eacute;sactiv&eacute;. Lorsque vous cliquez dessus, ce bouton appara&icirc;t en
surbrillance comme &eacute;tant enfonc&eacute;. Lorsqu'il est d&eacute;sactiv&eacute;, un bouton de type &laquo; checkbutton &raquo; appara&icirc;t &agrave; plat.
Dreamweaver poss&egrave;de des &eacute;tats Survol, Enfonc&eacute;, Survol et enfonc&eacute; et D&eacute;sactiv&eacute; et enfonc&eacute;. La commande doit faire en
sorte qu'un clic sur le bouton d'activation provoque un changement de son &eacute;tat.
Attributs
id, image, checked, {showIf}, {enabled}, {command}, {file}, {tag}, {name}, {codeOnly}
Exemple
&lt;checkbutton id=&quot;DW_StandardView&quot;
name = &quot;Standard View&quot;
image=&quot;Tools\Standard View.gif&quot;
checked=&quot;_View_Standard&quot;
command=&quot;dw.getDocumentDOM().setShowLayoutView(false)&quot;/&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
113
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;separator /&gt;
Description
Cette balise affiche une ligne verticale sur la barre Insertion.
Attributs
{showIf}
Exemple
&lt;separator showIf=&quot;_VIEW_CODE&quot;/&gt;
Attributs des balises de d&eacute;finition de la barre Insertion
La signification des attributs correspondant aux balises de d&eacute;finition de la barre Insertion est la suivante :
id=&quot;unique id&quot;
Description
L'attribut id correspond &agrave; l'identificateur des boutons affich&eacute;s dans la barre Insertion. Chaque &eacute;l&eacute;ment du fichier doit
poss&eacute;der un attribut id unique.
Exemple
id=&quot;DW_Anchor&quot;
image=&quot;image_path”
Description
Cet attribut indique le chemin d'acc&egrave;s, par rapport au dossier Configuration de Dreamweaver, du fichier de l'ic&ocirc;ne
affich&eacute;e dans la barre Insertion. Le format de cette ic&ocirc;ne doit figurer parmi les formats pris en charge par
Dreamweaver, mais il s'agit en principe d'un fichier au format GIF ou JPEG, d'une taille de 18x 18 pixels.
Exemple
image=&quot;Common/table.gif&quot;
canDrag=&quot;Boolean”
Description
Cet attribut sp&eacute;cifie si l'utilisateur a la possibilit&eacute; de faire glisser l'ic&ocirc;ne dans le code ou dans l'espace de travail pour
ins&eacute;rer l'objet correspondant dans le document. Si vous ne sp&eacute;cifiez pas cet attribut, la valeur par d&eacute;faut est true.
Exemple
canDrag=&quot;false&quot;
Derni&egrave;re mise &agrave; jour le 22/6/2011
114
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
showIf=&quot;enabler&quot;
Description
Cet attribut indique que ce bouton doit s'afficher dans la barre Insertion uniquement si la valeur de l'activateur
Dreamweaver d&eacute;sign&eacute; est r&eacute;gl&eacute;e sur true. Si vous ne sp&eacute;cifiez pas l'attribut showIf, le bouton s'affiche
syst&eacute;matiquement. Vous disposez des activateurs suivants : _SERVERMODEL_ASP, _SERVERMODEL_ASPNET,
_SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions d'Adobe ColdFusion),
_SERVERMODEL_CFML_UD4 (uniquement pour UltraDev version 4 d'Adobe ColdFusion), _SERVERMODEL_PHP,
_FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, et
_VIEW_STANDARD.
Pour sp&eacute;cifier plusieurs activateurs, s&eacute;parez-les par des virgules (chaque virgule signifie ET). Pour exclure des
activateurs (NOT), utilisez un point d'exclamation (!).
Exemple
Si vous souhaitez qu'un bouton apparaisse uniquement en mode Code dans une page ASP, d&eacute;finissez les activateurs
comme suit :
showIf=&quot;_VIEW_CODE, _SERVERMODEL_ASP&quot;
enabled=&quot;enabler&quot;
Description
Cet attribut indique que l'utilisateur peut acc&eacute;der &agrave; l'&eacute;l&eacute;ment si la valeur de DW_enabler est r&eacute;gl&eacute;e sur true. Si vous ne
sp&eacute;cifiez pas la fonction enabled, l'&eacute;l&eacute;ment est syst&eacute;matiquement activ&eacute; par d&eacute;faut. Vous disposez des activateurs
suivants : _SERVERMODEL_ASP,_SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes
les versions de ColdFusion), _SERVERMODEL_CFML_UD4 (uniquement pour UltraDev version 4 de ColdFusion),
_SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT,
_VIEW_EXPANDED_TABLES, et _VIEW_STANDARD.
Pour sp&eacute;cifier plusieurs activateurs, s&eacute;parez-les par des virgules (chaque virgule signifie ET). Pour exclure des
activateurs (NOT), utilisez un point d'exclamation (!).
Exemple
Pour que le bouton soit disponible en mode Code uniquement, indiquez :
enabled=&quot;_VIEW_CODE&quot;
Le bouton s'affiche alors en gris&eacute; dans les autres modes.
checked=&quot;enabler&quot;
Description
L'attribut checked est obligatoire si vous ins&eacute;rez la balise checkbutton.
L'&eacute;l&eacute;ment est activ&eacute; si la valeur de DW_enabler est d&eacute;finie sur true. Vous disposez des activateurs suivants :
_SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les
versions de ColdFusion), _SERVERMODEL_CFML_UD4 (uniquement pour UltraDev version 4 de ColdFusion),
_SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT,
_VIEW_EXPANDED_TABLES, et _VIEW_STANDARD.
Derni&egrave;re mise &agrave; jour le 22/6/2011
115
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Pour sp&eacute;cifier plusieurs activateurs, s&eacute;parez-les par des virgules (chaque virgule signifie ET). Pour exclure des
activateurs (NOT), utilisez un point d'exclamation (!).
Exemple
checked=&quot;_View_Layout&quot;
command=&quot;API_function&quot;
Description
Au lieu d'indiquer &agrave; Dreamweaver de se r&eacute;f&eacute;rer &agrave; un fichier HTML comportant le code &agrave; ins&eacute;rer, vous pouvez associer
une commande &agrave; cette balise. Lorsque l'utilisateur clique sur le bouton auquel se rapporte cette balise, Dreamweaver
effectue alors la commande sp&eacute;cifi&eacute;e.
Exemple
command=&quot;dw.showTagChooser()&quot;
file=&quot;file_path&quot;
Description
L'attribut file d&eacute;finit le chemin d'acc&egrave;s, par rapport au dossier Configuration de Dreamweaver, d'un fichier d'objet.
Dreamweaver d&eacute;rive l'infobulle de l'ic&ocirc;ne d'objet &agrave; partir du titre du fichier d'objet, sauf si vous sp&eacute;cifiez l'attribut name.
Exemple
file=&quot;Templates/Editable.htm&quot;
tag=&quot;editor&quot;
Description
Cet attribut ordonne &agrave; Dreamweaver d'appeler un &eacute;diteur de balises. En mode Code, si l'attribut tag est d&eacute;fini et que
l'utilisateur clique sur l'objet, Dreamweaver appelle la bo&icirc;te de dialogue Balise. En mode Code, si vous sp&eacute;cifiez les
attributs tag et command, Dreamweaver appelle l'&eacute;diteur de balises. En mode Cr&eacute;ation, si codeOnly=&quot;TRUE&quot; et que
l'attribut file n'est pas sp&eacute;cifi&eacute;, Dreamweaver active les modes Code et Cr&eacute;ation, place le focus dans la partie code et
appelle l'&eacute;diteur de balises.
Exemple
tag = &quot;form&quot;
name=&quot;tooltip_text
Description
L'attribut name d&eacute;finit l'infobulle qui s'affiche lorsque le curseur de la souris pointe sur l'objet concern&eacute;. Si vous
sp&eacute;cifiez un fichier d'objet sans sp&eacute;cifier l'attribut name, Dreamweaver utilise le nom du fichier comme infobulle.
Remarque : Si vous ne sp&eacute;cifiez pas l'attribut name, l'objet ne pourra pas &ecirc;tre regroup&eacute; dans la cat&eacute;gorie Favoris de
l'interface de la barre Insertion.
Certains objets de la barre Insertion utilisent une variante de l'attribut name comportant le pr&eacute;fixe MMString. Le
pr&eacute;fixe MMString indique une cha&icirc;ne localis&eacute;e ; ces valeurs sont d&eacute;crites dans &laquo; Localisation d'une extension &raquo; &agrave; la
page 85.
Derni&egrave;re mise &agrave; jour le 22/6/2011
116
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Exemple
name = &quot;cfoutput&quot;
Modification de la barre Insertion
Vous pouvez d&eacute;placer les objets d'une cat&eacute;gorie &agrave; une autre, renommer les diff&eacute;rentes cat&eacute;gories et supprimer de
mani&egrave;re d&eacute;finitive certains objets du panneau. Pour que vos modifications soient prises en compte et apparaissent
dans la barre Insertion, vous devez red&eacute;marrer Dreamweaver ou recharger les extensions. Pour plus d'informations
sur le rechargement des extensions, voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83.
D&eacute;placement ou copie d'un objet r&eacute;pertori&eacute; dans une cat&eacute;gorie de la barre Insertion vers une autre cat&eacute;gorie ou
vers un emplacement diff&eacute;rent de la m&ecirc;me cat&eacute;gorie
1 Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml).
2 Ouvrez le fichier insertbar.xml d'origine.
3 Recherchez la balise button repr&eacute;sentant l'objet &agrave; d&eacute;placer ou &agrave; copier. Par exemple, pour d&eacute;placer l'objet Image
de son emplacement au sein de la cat&eacute;gorie Commun, recherchez la balise button dont l'attribut id est
&quot;DW_Image&quot;.
4 Coupez ou copiez l'ensemble de la balise button.
5 Recherchez la balise category repr&eacute;sentant la cat&eacute;gorie dans laquelle vous souhaitez d&eacute;placer ou copier l'objet.
6 Recherchez l'emplacement de la cat&eacute;gorie dans lequel vous souhaitez faire appara&icirc;tre l'objet.
7 Collez la balise button.
8 Enregistrez le fichier insertbar.xml.
9 Rechargez les extensions.
Suppression d'un objet de la barre Insertion
1 Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml).
2 Ouvrez le fichier insertbar.xml d'origine.
3 Recherchez la balise button repr&eacute;sentant l'objet &agrave; supprimer.
4 Supprimez l'int&eacute;gralit&eacute; de la balise button.
5 Enregistrez le fichier insertbar.xml.
6 Sur votre disque, retirez les fichiers HTML, GIF et JavaScript du dossier dans lequel ils se trouvent pour les placer
dans un dossier non r&eacute;pertori&eacute; dans le fichier insertbar.xml. Par exemple, vous pouvez cr&eacute;er un nouveau dossier
dans le dossier Configuration/Objects pour y placer les fichiers de l'objet. Si vous &ecirc;tes certain de vouloir supprimer
cet objet, vous pouvez supprimer les fichiers de mani&egrave;re d&eacute;finitive. Il peut n&eacute;anmoins s'av&eacute;rer utile de conserver
une copie de sauvegarde de ces fichiers en vue de pouvoir les restaurer, le cas &eacute;ch&eacute;ant.
7 Rechargez les extensions.
Modification de l'ordre des cat&eacute;gories de la barre Insertion
1 Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml).
2 Ouvrez le fichier insertbar.xml d'origine.
3 Recherchez la balise category correspondant &agrave; la cat&eacute;gorie &agrave; d&eacute;placer, puis s&eacute;lectionnez-la ainsi que l'ensemble de
son contenu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
117
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
4 Coupez cette balise.
5 Collez la balise dans son nouvel emplacement. Veillez &agrave; ne pas coller la balise au sein d'une autre balise category.
6 Enregistrez le fichier insertbar.xml.
7 Rechargez les extensions.
Cr&eacute;ation d'une nouvelle cat&eacute;gorie
1 Enregistrez une copie de sauvegarde du fichier insertbar.xml (nommez-la par exemple insertbar.sauvegarde.xml).
2 Ouvrez le fichier insertbar.xml d'origine.
3 Cr&eacute;ez une balise category et indiquez le dossier par d&eacute;faut ainsi que l'ensemble des objets contenus dans cette
cat&eacute;gorie.
4 Pour plus d'informations sur la syntaxe des balises dans insertbar.xml, voir &laquo; Balises de d&eacute;finition de la barre
Insertion &raquo; &agrave; la page 111.
5 Enregistrez le fichier insertbar.xml.
6 Rechargez les extensions.
Ajout d'un nouvel objet dans la barre Insertion
Vous pouvez ajouter des objets &agrave; la barre Insertion. Pour que vos modifications soient prises en compte et apparaissent
dans la barre Insertion, vous devez red&eacute;marrer Dreamweaver ou recharger les extensions. Pour plus d'informations
sur le rechargement des extensions, voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83.
1 D&eacute;finissez la cha&icirc;ne sp&eacute;cifique de code destin&eacute;e au document de l'utilisateur par le biais de HTML et, en option,
JavaScript.
2 Identifiez ou cr&eacute;ez l'image (18 x 18 pixels) correspondant au bouton &agrave; int&eacute;grer &agrave; l'interface de Dreamweaver.
Si vous cr&eacute;ez une image de taille sup&eacute;rieure, Dreamweaver la redimensionne pour lui attribuer une taille de
18 x 18 pixels. Si vous ne cr&eacute;ez pas d'image pour un objet, une ic&ocirc;ne d'objet par d&eacute;faut repr&eacute;sent&eacute;e par un point
d'interrogation (?) appara&icirc;t dans la barre Insertion.
3 Ajoutez les nouveaux fichiers au dossier Configuration/Objects.
4 Modifiez le fichier insertbar.xml pour indiquer l'emplacement des nouveaux fichiers et sp&eacute;cifiez les attributs
(consultez la section &laquo; Fichier de d&eacute;finition de la barre Insertion &raquo; &agrave; la page 110) d&eacute;finissant l'aspect du bouton.
5 Red&eacute;marrez Dreamweaver ou rechargez les extensions.
Le nouvel objet appara&icirc;t dans la barre Insertion &agrave; l'emplacement indiqu&eacute;.
Remarque : M&ecirc;me si les fichiers d'objet peuvent &ecirc;tre stock&eacute;s dans des dossiers s&eacute;par&eacute;s, il est important que le nom de
chaque fichier soit unique. La fonction dom.insertObject(), par exemple, recherche les fichiers dans l'ensemble du
dossier Objects sans tenir compte des sous-dossiers (pour plus d'informations sur la fonction dom.insertObject(), voir
le Guide des API de Dreamweaver). Si le dossier Forms contient un fichier nomm&eacute; Button.htm et qu'un autre fichier
nomm&eacute; Button.htm se trouve &eacute;galement dans le dossier MyObjects, Dreamweaver ne parvient pas &agrave; les diff&eacute;rencier. S'il
existe deux instances du fichier Button.htm, dom.insertObject() affiche deux objets nomm&eacute;s Button ; il est d&egrave;s lors
difficile pour l'utilisateur de les diff&eacute;rencier.
Ajout d'objets au menu Insertion
Pour ajouter ou contr&ocirc;ler la position d'un objet du menu Insertion (ou de tout autre menu), modifiez le fichier
menus.xml. Ce fichier contr&ocirc;le l'int&eacute;gralit&eacute; de la structure de menus pour Dreamweaver. Pour plus d'informations sur
la modification du fichier menus.xml, voir &laquo; Menus et commandes de menu &raquo; &agrave; la page 148.
Derni&egrave;re mise &agrave; jour le 22/6/2011
118
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Si vous souhaitez distribuer l'extension &agrave; d'autres utilisateurs de Dreamweaver, voir &laquo; Utilisation d'Extension
Manager &raquo; &agrave; la page 86 pour en savoir plus sur le conditionnement des extensions.
Exemple simple d'insertion d'un objet
Cet exemple ajoute &agrave; la barre Insertion un objet permettant aux utilisateurs de rayer d'une ligne (barrer) le texte
s&eacute;lectionn&eacute; en cliquant sur un bouton. Cet objet s'utilise lors de l'insertion de commentaires concernant l'&eacute;dition d'un
document.
Cet exemple implique des manipulations du texte ; vous pouvez par cons&eacute;quent d&eacute;couvrir certains des objets existants
dans le menu d&eacute;roulant Texte de la cat&eacute;gorie HTML de la barre Insertion et vous en servir comme d'un mod&egrave;le. Par
exemple, vous pouvez examiner les fichiers d'objet Bold, Emphasis et Heading pour observer des fonctionnalit&eacute;s
similaires, dont le principe consiste &agrave; ins&eacute;rer une balise de part et d'autre du texte s&eacute;lectionn&eacute; dans Dreamweaver.
La proc&eacute;dure de cr&eacute;ation de l'objet Strikethrough est la suivante :
Cr&eacute;ation du fichier HTML
Le titre de l'objet est indiqu&eacute; entre les balises title d'ouverture et de fermeture. Vous sp&eacute;cifiez &eacute;galement le langage
de script JavaScript.
1 Cr&eacute;ez un document vierge.
2 Ajoutez le code suivant :
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Strikethrough&lt;/title&gt;
&lt;script language=&quot;javascript&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom Strikethrough.gif dans le dossier Configuration/Objects/Text.
Ajout de fonctions JavaScript
Dans cet exemple, les fonctions JavaScript d&eacute;finissent le comportement de l'objet Strikethrough et ins&egrave;rent le code
correspondant. Vous devez placer toutes les fonctions API dans la section head du fichier. Les fichiers d'objet existants,
par exemple, Configuration/Objects/Text/Em.htm, sont bas&eacute;s sur le m&ecirc;me mod&egrave;le de fonctions et de commentaires.
La premi&egrave;re fonction utilis&eacute;e par le fichier de d&eacute;finition d'objet est la fonction isDOMRequired(), qui indique si le
mode Cr&eacute;ation doit &ecirc;tre synchronis&eacute; avec le mode Code existant avant de poursuivre l'ex&eacute;cution. Cependant, l'objet
Superscript peut s'utiliser avec de nombreux autres objets en mode Code ; une synchronisation impos&eacute;e n'est donc pas
n&eacute;cessaire.
Ajout de la fonction isDOMRequired()
1 Dans la section head du fichier Strikethrough.htm, ajoutez la fonction ci-dessous entre les balises script
d'ouverture et de fermeture :
Derni&egrave;re mise &agrave; jour le 22/6/2011
119
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;script language=&quot;javascript&quot;&gt;
function isDOMRequired() {
// Return false, indicating that this object is available in Code view.
return false;
}
&lt;/script&gt;
2 Enregistrez le fichier.
Ensuite, indiquez si vous souhaitez utiliser la fonction objectTag() ou insertObject(). L'op&eacute;ration effectu&eacute;e par
l'objet Strikethrough consiste simplement &agrave; ins&eacute;rer la balise s de part et d'autre du texte s&eacute;lectionn&eacute;. Il ne remplit donc
pas les conditions n&eacute;cessaires &agrave; l'utilisation de la fonction insertObject() (voir &laquo; insertObject() &raquo; &agrave; la page 128).
Dans la fonction objectTag(), indiquez dw.getFocus() pour d&eacute;terminer si le mode actuel correspond au mode
Code. Si le mode Code est actif, la fonction ins&egrave;re la balise appropri&eacute;e (majuscule ou minuscule) de part et d'autre du
texte s&eacute;lectionn&eacute;. Si le mode Cr&eacute;ation est actif, la fonction utilise dom.applyCharacterMarkup() pour assigner le
format du texte s&eacute;lectionn&eacute;. Notez que cette fonction s'utilise uniquement avec les balises prises en charge (pour plus
d'informations, voir dom.applyCharacterMarkup() dans le Guide des API de Dreamweaver). Pour utiliser d'autres
balises ou op&eacute;rations, il sera peut-&ecirc;tre n&eacute;cessaire de faire appel &agrave; d'autres fonctions API. Une fois le format appliqu&eacute;
par Dreamweaver, le point d'insertion (curseur) r&eacute;appara&icirc;t dans le document, sans message ni invite pr&eacute;alable. La
proc&eacute;dure ci-dessous illustre la forme de la fonction objectTag() une fois ces informations renseign&eacute;es.
Ajout de la fonction objectTag()
1 Dans la section head du fichier Strikethrough.htm, ajoutez la fonction ci-dessous apr&egrave;s la fonction
isDOMRequired() :
function objectTag() {
// Determine if the user is in Code view.
var dom = dw.getDocumentDOM();
if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){
var upCaseTag = (dw.getPreferenceString(&quot;Source Format&quot;, &quot;Tags Upper Case&quot;, &quot;&quot;) ==
'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('&lt;S&gt;','&lt;/S&gt;');
}else{
dom.source.wrapSelection('&lt;s&gt;','&lt;/s&gt;');
}
// If the user is not in Code view, apply the formatting in Design view.
}else if (dw.getFocus() == 'document'){
dom.applyCharacterMarkup(&quot;s&quot;);
}
// Just return--don't do anything else.
return;
}
2 Enregistrez le fichier sous le nom Strikethrough.gif dans le dossier Configuration/Objects/Text.
Au lieu d'inclure les fonctions JavaScript dans la section head du fichier HTML, vous pouvez cr&eacute;er un fichier JavaScript
distinct. Cette organisation &agrave; part s'utilise notamment pour les objets contenant plusieurs fonctions ou des fonctions
susceptibles d'&ecirc;tre partag&eacute;es par d'autres objets.
S&eacute;paration du fichier de d&eacute;finition d'objet HTML des fonctions JavaScript de prise en charge
1 Cr&eacute;ez un document vierge.
2 Collez toutes les fonctions JavaScript dans le fichier.
Derni&egrave;re mise &agrave; jour le 22/6/2011
120
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
3 Supprimez ces fonctions du fichier Strikethrough.htm, puis ajoutez le nom du fichier JavaScript &agrave; l'attribut src de
la balise script, comme indiqu&eacute; dans l'exemple suivant :
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Strikethrough&lt;/title&gt;
&lt;script language=&quot;javascript&quot; src=&quot;Strikethrough.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
4 Enregistrez le fichier Strikethrough.htm.
5 Enregistrez le fichier qui contient &agrave; pr&eacute;sent les fonctions JavaScript sous le nom Strikethrough.js dans le dossier
Configuration/Objects/Text.
Cr&eacute;ation de l'image utilis&eacute;e dans la barre Insertion
1 Cr&eacute;ez une image GIF de 18x 18 pixels, ainsi que l'indique la figure suivante :
2 Enregistrez le fichier sous le nom Strikethrough.gif dans le dossier Configuration/Objects/Text.
Modification du fichier insertbar.xml
Vous devez &agrave; pr&eacute;sent modifier le fichier insertbar.xml file, afin que Dreamweaver puisse associer ces deux &eacute;l&eacute;ments &agrave;
l'interface de la barre Insertion.
Remarque : Avant de modifier le fichier insertbar.xml file, vous pouvez l'enregistrer sous l'extension insertbar.xml.bak
de mani&egrave;re &agrave; conserver une copie de sauvegarde.
Le code contenu dans le fichier insertbar.xml d&eacute;signe tous les objets figurant dans la barre Insertion.
• Chaque balise category du fichier XML cr&eacute;e une cat&eacute;gorie dans l'interface.
• Chaque balise menubutton cr&eacute;e un menu d&eacute;roulant dans la barre Insertion.
• Chaque balise button du fichier XML affiche une ic&ocirc;ne dans la barre Insertion et la relie au fichier HTML ou &agrave; la
fonction correspondants.
Ajout du nouvel objet &agrave; la barre Insertion
1 Recherchez la ligne suivante situ&eacute;e au d&eacute;but du fichier insertbar.xml :
&lt;category id=&quot;DW_Insertbar_Common&quot; MMString:name=&quot;insertbar/category/common&quot;
folder=&quot;Common&quot;&gt;
Cette ligne indique le d&eacute;but de la cat&eacute;gorie Commun de la barre Insertion.
2 Cr&eacute;ez une nouvelle ligne &agrave; la suite de la balise category, puis ins&eacute;rez la balise button en lui assignant les attributs
id, image et file correspondant &agrave; l'objet Strikethrough.
L'ID doit correspondre au nom unique du bouton. Conform&eacute;ment aux conventions de d&eacute;nomination, utilisez
DW_Text_Strikethrough pour cet objet. Les attributs image et file indiquent simplement &agrave; Dreamweaver
l'emplacement des fichiers en rapport avec l'objet, comme indiqu&eacute; ci-dessous :
Derni&egrave;re mise &agrave; jour le 22/6/2011
121
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;button id=&quot;DW_Text_Strikethrough&quot;
image=&quot;Text\Strikethrough.gif&quot;
file=&quot;Text\Strikethrough.htm&quot;/&gt;
3 Enregistrez le fichier insertbar.xml.
4 Rechargez les extensions (voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83).
Le nouvel objet s'affiche au d&eacute;but de la cat&eacute;gorie Commun de la barre Insertion.
Ajout d'une bo&icirc;te de dialogue
Vous pouvez ajouter un formulaire &agrave; votre objet de mani&egrave;re &agrave; ce que l'utilisateur puisse indiquer des commentaires
avant que Dreamweaver n'ins&egrave;re le code sp&eacute;cifi&eacute; (par exemple, l'objet Hyperlien n&eacute;cessite la saisie des valeurs texte,
lien, cible, index de cat&eacute;gorie, titre et cl&eacute; d'acc&egrave;s). Dans cet exemple, vous ajoutez un formulaire &agrave; l'objet Barr&eacute; cr&eacute;&eacute; dans
l'exemple pr&eacute;c&eacute;dent. Le formulaire entra&icirc;ne l'ouverture d'une bo&icirc;te de dialogue permettant &agrave; l'utilisateur de colorer le
texte en rouge et d'ajouter la balise Strikethrough.
Cet exemple suppose que vous avez d&eacute;j&agrave; cr&eacute;&eacute; un fichier JavaScript distinct nomm&eacute; Strikethrough.js.
Tout d'abord, dans le fichier Strikethrough.js, ajoutez la fonction appel&eacute;e par le formulaire si l'utilisateur modifie la
couleur du texte. Cette fonction est similaire &agrave; la fonction objectTag() de l'objet Strikethrough, mais elle est
facultative.
Cr&eacute;ation de la fonction
1 Apr&egrave;s la fonction objectTag() dans Strikethrough.js, cr&eacute;ez la fonction fontColorRed() en entrant le code
suivant :
function fontColorRed(){
var dom = dw.getDocumentDOM();
if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){
var upCaseTag = (dw.getPreferenceString(&quot;Source Format&quot;, &quot;Tags Upper Case&quot;, &quot;&quot;)
== 'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('&lt;FONT COLOR=&quot;#FF0000&quot;&gt;','&lt;/FONT&gt;');
}else{
dom.source.wrapSelection('&lt;font color=&quot;#FF0000&quot;&gt;','&lt;/font&gt;');
}
}else if (dw.getFocus() == 'document'){
dom.applyFontMarkup(&quot;color&quot;, &quot;#FF0000&quot;);
}
// Just return -- don't do anything else.
return;
}
Remarque : Comme dom.applyCharacterMarkup() ne g&egrave;re pas les modifications de couleur de police, vous devez
identifier la fonction API correspondant &agrave; ce type d'op&eacute;ration. Pour plus d'informations, voir
dom.applyFontMarkup() dans le Guide des API de Dreamweaver.
2 Enregistrez le fichier sous le nom Strikethrough.js.
Ensuite, ajoutez le formulaire au fichier Strikethrough.htm. Le formulaire illustr&eacute; dans l'exemple ci-dessous est une
simple case &agrave; cocher permettant d'appeler la fonction fontColorRed() lorsqu'elle est activ&eacute;e. La balise form permet
de d&eacute;finir votre formulaire, la balise table assure la d&eacute;finition de sa mise en forme (si vous n'effectuez pas cette &eacute;tape,
la taille de la bo&icirc;te de dialogue ou la disposition des champs risque d'&ecirc;tre incorrecte).
Derni&egrave;re mise &agrave; jour le 22/6/2011
122
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Ajout du formulaire
1 Ajoutez le code ci-dessous apr&egrave;s la balise body :
&lt;form&gt;
&lt;table border=&quot;0&quot; height=&quot;100&quot; width=&quot;100&quot;&gt;
&lt;tr valign=&quot;baseline&quot;&gt;
&lt;td align=&quot;left&quot; nowrap&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;red&quot; onClick=fontColorRed()&gt;Red text&lt;/input&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
2 Enregistrez le fichier sous le nom Strikethrough.htm.
3 Rechargez les extensions (voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83).
Test de la bo&icirc;te de dialogue
1 Activez la case &agrave; cocher Red Text.
2 Cliquez sur OK pour ex&eacute;cuter la fonction objectTag(), qui barre le texte :
Derni&egrave;re mise &agrave; jour le 22/6/2011
123
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Cr&eacute;ation d'un menu d&eacute;roulant dans la barre Insertion
La barre Insertion de Dreamweaver implique un nouveau mode d'organisation des objets. La barre Insertion prend
d&eacute;sormais en charge des menus d&eacute;roulants qui permettent d'organiser les objets dans des groupes de plus petite taille,
comme le montre l'illustration suivante.
L'exemple ci-dessous cr&eacute;e une nouvelle cat&eacute;gorie, Editorial, dans la barre Insertion, puis ajoute un menu d&eacute;roulant &agrave;
cette cat&eacute;gorie. Le menu d&eacute;roulant regroupe l'objet Strikethrough que vous avez d&eacute;j&agrave; cr&eacute;&eacute;, ainsi qu'un objet Blue Text
que vous allez cr&eacute;er. Les objets de la cat&eacute;gorie Editorial permettent aux utilisateurs :
• d'ajouter des commandes &eacute;ditoriaux dans un fichier ;
• de barrer le contenu qu'ils veulent supprimer ou de donner une couleur bleue au nouveau contenu.
Organisation des fichiers
1 Cr&eacute;ez le dossier Configuration/Objects/Editorial dans le dossier d'installation de Dreamweaver.
2 Copiez les fichiers correspondant &agrave; l'exemple d'objet Strikethrough cr&eacute;&eacute; plus haut dans le dossier Editorial
(Strikethrough.htm, Strikethrough.js et Strikethrough.gif).
Cr&eacute;ation de l'objet Blue Text
1 Cr&eacute;ez un formulaire HTML.
2 Ajoutez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
124
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Blue Text&lt;/title&gt;
&lt;script language=&quot;javascript&quot;&gt;
//--------------- API FUNCTIONS--------------function isDOMRequired() {
// Return false, indicating that this object is available in Code view.
return false;
}
function objectTag() {
// Manually wrap tags around selection.
var dom = dw.getDocumentDOM();
if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){
var upCaseTag = (dw.getPreferenceString(&quot;Source Format&quot;, &quot;Tags Upper Case&quot;, &quot;&quot;) ==
'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('&lt;FONT COLOR=&quot;#0000FF&quot;&gt;','&lt;/FONT&gt;');
}else{
dom.source.wrapSelection('&lt;font color=&quot;#0000FF&quot;&gt;','&lt;/font&gt;');
}
}else if (dw.getFocus() == 'document'){
dom.applyFontMarkup(&quot;color&quot;, &quot;#0000FF&quot;);
}
// Just return -- don't do anything else.
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom AddBlue.htm dans le dossier Editorial.
Vous pouvez maintenant cr&eacute;er une image pour l'objet Blue Text.
Cr&eacute;ation de l'image
1 Cr&eacute;ez un fichier GIF de 18x 18 pixels, similaire &agrave; la figure ci-dessous :
2 Enregistrez l'image sous le nom AddBlue.gif dans le dossier Editorial.
Modifiez ensuite le fichier insertbar.xml. Ce fichier d&eacute;finit les objets de la barre Insertion ainsi que leur emplacement.
Notez les nombreuses balises menubutton et leurs attributs dans les balises category ; ces balises menubutton
d&eacute;finissent chacun des menus d&eacute;roulants de la cat&eacute;gorie HTML. Dans les balises menubutton, chaque balise button
d&eacute;finit l'un des &eacute;l&eacute;ments du menu d&eacute;roulant.
Modification du fichier insertbar.xml
1 Recherchez la ligne de code suivante situ&eacute;e au d&eacute;but du fichier :
Derni&egrave;re mise &agrave; jour le 22/6/2011
125
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;insertbar xmlns:MMString=&quot;http://www.adobe.com/schemes/data/string/&quot;&gt;
La balise insertbar d&eacute;finit le d&eacute;but de chacun des &eacute;l&eacute;ments de la barre Insertion.
2 Apr&egrave;s cette ligne, ajoutez une nouvelle balise category pour la cat&eacute;gorie Editorial que vous voulez cr&eacute;er. Donnez-
lui un ID unique, un nom et des attributs de dossier, et ajoutez une balise category de fermeture, comme le montre
l'exemple suivant :
&lt;category id=&quot;DW_Insertbar_Editorial&quot; name=&quot;Editorial&quot; folder=&quot;Editorial&quot;&gt;
&lt;/category&gt;
3 Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir &laquo; Rechargement
d'extensions &raquo; &agrave; la page 83.
La cat&eacute;gorie Editorial appara&icirc;t dans la barre Insertion :
4 Entre les balises d'ouverture et de fermeture category, ajoutez le menu d&eacute;roulant en ins&eacute;rant la balise menubutton
ainsi que les attributs suivants, y compris un ID unique.
&lt;menubutton id=&quot;DW_Insertbar_Markup&quot; name=&quot;markup&quot; image=&quot;Editorial\Strikethrough.gif&quot;
folder=&quot;Editorial&quot;&gt;
Pour plus d'informations sur les attributs, voir &laquo; Attributs des balises de d&eacute;finition de la barre Insertion &raquo; &agrave; la
page 113.
5 Ajoutez les objets du nouveau menu d&eacute;roulant &agrave; l'aide de la balise button, comme suit :
&lt;button id=&quot;DW_Editorial_Strikethrough&quot; image=&quot;Editorial\Strikethrough.gif&quot;
file=&quot;Editorial\Strikethrough.htm&quot;/&gt;
6 A la suite de l'objet Strikethrough, ins&eacute;rez l'objet Blue Text, comme suit :
&lt;button id=&quot;DW_Blue_Text&quot; image=&quot;Editorial\AddBlue.gif name=&quot;Blue Text&quot;
file=&quot;Editorial\AddBlue.htm&quot;/&gt;
Remarque : La balise button ne poss&egrave;de pas de balise de fermeture s&eacute;par&eacute;e, elle se termine simplement par &quot;/&gt;&quot;.
7 Terminez l'insertion dans le menu d&eacute;roulant en sp&eacute;cifiant la balise de fermeture &lt;/menubutton&gt;.
Le code ci-dessous repr&eacute;sente l'ensemble de la cat&eacute;gorie regroupant le menu d&eacute;roulant et les deux objets :
Derni&egrave;re mise &agrave; jour le 22/6/2011
126
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
&lt;category id=&quot;DW_Insertbar_Editorial&quot; name=&quot;Editorial&quot; folder=&quot;Editorial&quot;&gt;
&lt;menubutton id=&quot;DW_Insertbar_Markup&quot; name=&quot;markup&quot;
image=&quot;Editorial\Strikethrough.gif&quot; folder=&quot;Editorial&quot;&gt;
&lt;button id=&quot;DW_Editorial_Strikethrough&quot;
image=&quot;Editorial\Strikethrough.gif&quot; file=&quot;Editorial\Strikethrough.htm&quot;/&gt;
&lt;button id=&quot;DW_Blue_Text&quot; image=&quot;Editorial\AddBlue.gif&quot; name=&quot;Blue Text&quot;
file=&quot;Editorial\AddBlue.htm&quot;/&gt;
&lt;/menubutton&gt;
&lt;/category&gt;
Test du nouveau menu d&eacute;roulant
1 Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir &laquo; Rechargement
d'extensions &raquo; &agrave; la page 83.
2 Cliquez sur le menu Editorial.
Le menu d&eacute;roulant ci-dessous s'affiche :
Fonction de l'API des objets
Cette section d&eacute;crit les fonctions de l'API des objets. Vous devez d&eacute;finir soit la fonction insertObject(), soit la
fonction objectTag(). Pour plus d'informations sur ces fonctions, voir &laquo; insertObject() &raquo; &agrave; la page 128. Les autres
fonctions sont facultatives.
canInsertObject()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction d&eacute;termine si la bo&icirc;te de dialogue de l'objet doit &ecirc;tre affich&eacute;e.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne.
Exemple
Le code ci-dessous indique &agrave; Dreamweaver de v&eacute;rifier la pr&eacute;sence d'une cha&icirc;ne sp&eacute;cifique dans un document avant de
permettre &agrave; l'utilisateur d'ins&eacute;rer l'objet s&eacute;lectionn&eacute; :
Derni&egrave;re mise &agrave; jour le 22/6/2011
127
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
function canInsertObject(){
var docStr = dw.getDocumentDOM().documentElement.outerHTML;
var patt = /hava/;
var found = ( docStr.search(patt) != -1 );
var insertionIsValid = true;
if (!found){
insertionIsValid = false;
alert(&quot;the document must contain a 'hava' string to use this object.&quot;);}
return insertionIsValid;}
displayHelp()
Description
Si vous d&eacute;finissez cette fonction, un bouton Aide appara&icirc;t sous les boutons OK et Annuler dans la bo&icirc;te de dialogue
Param&egrave;tres. Cette fonction est appel&eacute;e lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
L'exemple suivant permet d'afficher le fichier monObjetAide.htm dans un navigateur ; ce fichier explique l'utilisation
de l'extension :
function displayHelp(){
var myHelpFile = dw.getConfigurationPath() +
'/ExtensionsHelp/myObjectHelp.htm';
dw.browseDocument(myHelpFile);
}
isDOMRequired()
Description
Cette fonction d&eacute;termine si l'objet requiert un DOM valide pour fonctionner. Si cette fonction renvoie la valeur true
ou si la fonction n'est pas d&eacute;finie, Dreamweaver suppose que la commande n&eacute;cessite un DOM valide et synchronise
les modes Code et Cr&eacute;ation du document avant de l'ex&eacute;cuter. La synchronisation met &agrave; jour toutes les modifications
effectu&eacute;es en mode Affichage de code dans le mode Cr&eacute;ation.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver renvoie la valeur true si une commande n&eacute;cessite un DOM valide pour fonctionner, sinon false.
Derni&egrave;re mise &agrave; jour le 22/6/2011
128
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
insertObject()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction est obligatoire si la fonction objectTag() n'est pas d&eacute;finie. Elle est appel&eacute;e si l'utilisateur clique sur OK.
Elle ins&egrave;re du code dans le document de l'utilisateur et ferme la bo&icirc;te de dialogue ou affiche un message d'erreur sans
fermer la bo&icirc;te de dialogue. Il s'agit d'une fonction de substitution &agrave; la fonction objectTag(). Elle ne suppose pas que
l'utilisateur tape son texte au niveau du point d'insertion actuel et permet la validation des donn&eacute;es lorsque l'utilisateur
clique sur OK. Utilisez la fonction insertObject() dans l'une des conditions suivantes :
• Vous devez ins&eacute;rer un code &agrave; plusieurs endroits.
• Vous devez ins&eacute;rer un code &agrave; un endroit autre que le point d'insertion.
• Vous devez valider une entr&eacute;e avant d'ins&eacute;rer le code.
Si aucune de ces conditions ne s'applique, utilisez la fonction objectTag().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend soit une cha&icirc;ne contenant un message d'erreur, soit une cha&icirc;ne vide. Dans ce dernier cas, la bo&icirc;te
de dialogue de l'objet se ferme lorsque l'utilisateur clique sur OK. Sinon, Dreamweaver affiche le message d'erreur et
la bo&icirc;te de dialogue reste &agrave; l'&eacute;cran.
Activateur
canInsertObject()
Exemple
Dans l'exemple ci-dessous, la fonction insertObject() est utilis&eacute;e car une entr&eacute;e doit &ecirc;tre valid&eacute;e avant d'ins&eacute;rer le
code :
function insertObject() {
var theForm = document.forms[0];
var nameVal = theForm.firstField.value;
var passwordVal = theForm.secondField.value;
var errMsg = &quot;&quot;,
var isValid = true;
// ensure that field values are complete and valid
if (nameVal == &quot;&quot; || passwordVal == &quot;&quot;) {
errMsg = &quot;Complete all values or click Cancel.&quot;
} else if (nameVal.length &lt; 4 || passwordVal.length &lt; 6) {
errMsg = &quot;Your name must be at least four characters, and your password at
least six&quot;;
}
if (!errMsg) {
// do some document manipulation here. Exercise left to the reader
}
return errMsg;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
129
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
objectTag()
Description
Les fonctions objectTag() et insertObject() s'excluent mutuellement. Si elles sont toutes deux d&eacute;finies dans un
document, la fonction objectTag() est utilis&eacute;e. Pour plus d’informations, voir &laquo; insertObject() &raquo; &agrave; la page 128.
Cette fonction ins&egrave;re une cha&icirc;ne de code dans le document de l'utilisateur. Le renvoi d'une cha&icirc;ne vide ou d'une valeur
null (aussi appel&eacute;e &quot;return&quot;) signale &agrave; Dreamweaver qu'aucune action ne doit &ecirc;tre effectu&eacute;e.
Remarque : Dans ce cas, les modifications sont cens&eacute;es avoir &eacute;t&eacute; effectu&eacute;es manuellement avant l'instruction return;
aussi, ne rien faire dans ce cas n'&eacute;quivaut pas &agrave; cliquer sur Annuler.
Dans Dreamweaver, si le mode Code est actif et que la s&eacute;lection porte sur une plage (par opposition au point
d'insertion), cette derni&egrave;re est remplac&eacute;e par la cha&icirc;ne renvoy&eacute;e par la fonction objectTag(). La valeur est true,
m&ecirc;me si la fonction objectTag() renvoie une cha&icirc;ne vide ou ne renvoie rien. La fonction objectTag() renvoie une
cha&icirc;ne vide ou une valeur null car l'utilisateur a d&eacute;j&agrave; modifi&eacute; manuellement le document. Dans le cas contraire, des
guillemets doubles (&quot;&quot;) suppriment souvent les modifications en rempla&ccedil;ant la s&eacute;lection.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend la cha&icirc;ne &agrave; ins&eacute;rer dans le document de l'utilisateur.
Exemple
L'exemple suivant de la fonction objectTag() ins&egrave;re une combinaison OBJECT/EMBED pour un contr&ocirc;le ActiveX et
un plug-in sp&eacute;cifiques :
function objectTag() {
return '\n' +
'&lt;OBJECT CLASSID=&quot;clsid:166F1OOB-3A9R-11FB-8075444553540000&quot; \n'&not;
+ 'CODEBASE=&quot;http://www.mysite.com/product/cabs/&not;
myproduct.cab#version=1,0,0,0&quot; \n' + 'NAME=&quot;MyProductName&quot;&gt; \n' &not;
+ '&lt;PARAM NAME=&quot;SRC&quot; VALUE=&quot;&quot;&gt; \n' + '&lt;EMBED SRC=&quot;&quot; HEIGHT=&quot;&quot; &not;
WIDTH=&quot;&quot; NAME=&quot;MyProductName&quot;&gt; \n' + '&lt;/OBJECT&gt;'
}
windowDimensions()
Description
Cette fonction d&eacute;finit les dimensions pr&eacute;cises de la bo&icirc;te de dialogue Options. Si cette fonction n'est pas d&eacute;finie, les
dimensions de la fen&ecirc;tre sont calcul&eacute;es automatiquement.
Remarque : Ne d&eacute;finissez cette fonction que si vous souhaitez utiliser une bo&icirc;te de dialogue Options ayant des dimensions
sup&eacute;rieures &agrave; 640 x 480 pixels.
Arguments
platform
• La valeur de l'argument platform est soit &quot;macintosh&quot;, soit &quot;windows&quot;, selon la plate-forme utilis&eacute;e par
l'utilisateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
130
EXTENSION DE DREAMWEAVER
Objets de la barre Insertion
Valeurs renvoy&eacute;es
Dreamweaver renvoie une cha&icirc;ne au format &quot;widthInPixels,heightInPixels&quot;.
Les dimensions renvoy&eacute;es sont inf&eacute;rieures &agrave; la taille totale de la bo&icirc;te de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoy&eacute;es ne permettent pas de faire appara&icirc;tre toutes les options, des
barres de d&eacute;filement s'affichent.
Exemple
L'exemple suivant de la fonction windowDimensions() r&egrave;gle les dimensions de la bo&icirc;te de dialogue Param&egrave;tres sur
648x 520 pixels sous Windows et sur 660x 580 sur Macintosh :
function windowDimensions(platform){
var retval = &quot;&quot;
if (platform = = &quot;windows&quot;){
retval = &quot;648, 520&quot;;
}else{
retval = &quot;660, 580&quot;;
}
return retval;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
131
Chapitre 8 : API de v&eacute;rification des
probl&egrave;mes de compatibilit&eacute; du navigateur
Dans Adobe Dreamweaver, la fonctionnalit&eacute; BCC (v&eacute;rification de la compatibilit&eacute; du navigateur) permet de cr&eacute;er des
mises en forme de page qui fonctionnent bien (d'un point de vue esth&eacute;tique et fonctionnel) quel que soit le navigateur
en identifiant le code HTML et les feuilles CSS qui risquent de poser des probl&egrave;mes de compatibilit&eacute;. Cette
fonctionnalit&eacute; a recours &agrave; JavaScriptpour rechercher dans le document de l'utilisateur les combinaisons HTML et CSS
qui posent probl&egrave;me. Le code JavaScript est stock&eacute; dans les fichiers HTML de d&eacute;tection des probl&egrave;mes, qui doivent
&ecirc;tre enregistr&eacute;s dans le dossier Configuration/BrowserProfiles/Issues/ pour fonctionner correctement.
Proc&eacute;dure de d&eacute;tection
Lorsque l'utilisateur proc&egrave;de &agrave; une v&eacute;rification de compatibilit&eacute; pour la premi&egrave;re fois (ou lorsqu'il clique sur OK dans
la bo&icirc;te de dialogue relative aux navigateurs cible), les &eacute;v&eacute;nements suivants se produisent :
1 Dreamweaver lit les profils des navigateurs retenus dans le dossier Configuration/BrowserProfiles/.
2 Dreamweaver appelle la fonction getIssueID() pour tous les fichiers de probl&egrave;me qui figurent dans le dossier
Configuration/BrowserProfiles/Issues/ pour obtenir l'ID unique de ces fichiers.
3 Dreamweaver appelle la fonction getAffectedBrowserDisplayNames(), si d&eacute;finie, pour chaque fichier Issue.
4 Dreamweaver appelle la fonction getAffectedBrowserProfiles() pour chaque fichier Issue afin de d&eacute;terminer
si le ou les navigateurs s&eacute;lectionn&eacute;s sont concern&eacute;s.
5 Dreamweaver appelle la fonction getIssueName() pour chaque fichier Issue afin de d&eacute;terminer le nom &agrave; afficher
dans le panneau R&eacute;sultats lorsqu'un probl&egrave;me est d&eacute;tect&eacute;.
6 Dreamweaver appelle la fonction getIssueDescription pour chaque fichier Issue afin de d&eacute;terminer le texte &agrave;
afficher dans le volet droit du panneau R&eacute;sultats et dans l'infobulle lorsque le curseur de la souris survole un fichier
Issue en mode Code, en cas de probl&egrave;me d&eacute;tect&eacute;.
Les &eacute;v&eacute;nements suivants se produisent pour chaque navigateur s&eacute;lectionn&eacute; dans la bo&icirc;te de dialogue de configuration
BCC &agrave; l'issue de l'&eacute;tape 6 de la proc&eacute;dure pr&eacute;c&eacute;dente, et pour toutes les v&eacute;rifications de compatibilit&eacute; suivantes :
S&eacute;quence d'&eacute;v&eacute;nements
1 Dreamweaver analyse les styles qui s'appliquent au document actuel, qu'ils soient d&eacute;finis en ligne, dans l'en-t&ecirc;te, ou
dans une feuille de style externe, tel que le navigateur concern&eacute; les lirait.
2 Dreamweaver appelle la fonction findIssue() pour tous les fichiers Issue qui s'applique au navigateur concern&eacute;.
Exemple de fichiers de probl&egrave;mes
Les exemples suivants portent sur les fichiers ColAndColgroupCapturedByCaption.htm et
ColAndColgroupCapturedByCaption.js situ&eacute;s dans le dossier Configuration/BrowserProfiles/Issues/.
Derni&egrave;re mise &agrave; jour le 22/6/2011
132
EXTENSION DE DREAMWEAVER
API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
ColAndColgroupCapturedByCaption.htm
&lt;!DOCTYPE HTML SYSTEM &quot;-//
//DWExtension layout-engine 5.0//dialog&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Col and Colgroup Captured by Caption&lt;/title&gt;
&lt;script src=&quot;../../Shared/Common/Scripts/dwscripts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;issue_utils.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;ColAndColgroupCapturedByCaption.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
//--------------- LOCALIZEABLE GLOBALS-----------------var ISSUE_NAME = &quot;Col and Colgroup/Caption Conflict&quot;;
var ISSUE_DESC = &quot;If the caption tag is placed directly after the opening table tag as required
by the HTML 4.01 specification, any styles applied to col and colgroup tags in the same table
are ignored.&quot;;
//--------------- END LOCALIZEABLE--------------&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
ColAndColgroupCapturedByCaption.js
function findIssue(){
var DOM = dw.getDocumentDOM();
var issueNodes = new Array();
if (DOM){
// first see if there are any caption tags in the doc.
var captions = DOM.getElementsByTagName('caption');
// declare a mess of variables that we'll need in the
// for loop below.
var currCap = null, props = null, parentTable = null;
var colgroups = null, cols = null, allcol = null;
var property = &quot;&quot;, definedStyles = new Array();
// ok, now loop through all the captions, if any.
for (var i=0; i &lt; captions.length; i++){
currCap = captions[i];
parentTable = currCap.parentNode;
// the caption is only a problem if it's in the valid
// spot (i.e., the first child of the table)
if (currCap == parentTable.childNodes[0]){
// find all colgroup and col tags that are in the
// same table as the caption.
colgroups = parentTable.getElementsByTagName('colgroup');
cols = parentTable.getElementsByTagName('col');
allcol = colgroups.concat(cols);
for (var x=0; x &lt; allcol.length; x++){
Derni&egrave;re mise &agrave; jour le 22/6/2011
133
EXTENSION DE DREAMWEAVER
API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
// if styles are declared for any colgroup or col
// tag in this table, we have a problem node. don't
// bother looking further.
props = window.getDeclaredStyle(allcol[x]);
property = &quot;&quot;;
definedStyles.length = 0;
for (property in props) {
definedStyles.push(property);
}
if (definedStyles.length &gt; 0){
issueNodes.push(currCap);
break;
}
}
}
}
}
return issueNodes;
}
function getAffectedBrowserDisplayNames(){
return new Array(&quot;Safari 2.0&quot;);
}
function getAffectedBrowserProfiles(){
return new Array(&quot;Safari 2.0&quot;);
}
function getIssueID(){
return &quot;COL_AND_COLGROUP_CAPTURED_BY_CAPTION&quot;;
}
function getIssueName(){
return ISSUE_NAME;
}
function getIssueDescription(){
return ISSUE_DESC;
}
function getConfidenceLevel(){
//DETCON 4
return issueUtils.CONFIDENCE_HIGH;
}
Fonctions de l'API de v&eacute;rification des probl&egrave;mes
Toutes les fonctions de l'API de v&eacute;rification sont requises &agrave; l'exception de getAffectedBrowserDisplayNames().
Comme pour toutes les API d'extension, vous devez &eacute;crire le corps de chaque fonction et renvoyer une valeur
appropri&eacute;e &agrave; Dreamweaver. Pour plus d'informations sur les fonctions de v&eacute;rification de la compatibilit&eacute; du
navigateur, consultez la rubrique &laquo; Contenu de page &raquo; dans le Guide des API de Dreamweaver.
findIssue()
Disponibilit&eacute;
Dreamweaver CS3.
Derni&egrave;re mise &agrave; jour le 22/6/2011
134
EXTENSION DE DREAMWEAVER
API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
Description
Recherche dans le document les combinaisons de styles CSS et de code HTML susceptibles de provoquer un probl&egrave;me
de rendu dans un navigateur.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Un tableau de nœuds d'&eacute;l&eacute;ment qui identifient (ou repr&eacute;sentent) le probl&egrave;me. Dreamweaver s&eacute;lectionne ces nœuds
pendant que l'utilisateur navigue parmi les diff&eacute;rents probl&egrave;mes de compatibilit&eacute;.
Exemple
La fonction findIssue() suivante renvoie une liste de balises &lt;button&gt; auxquelles float: left ou float: right
a &eacute;t&eacute; appliqu&eacute; :
function findIssue(){
var DOM = dw.getDocumentDOM();
var issueNodes = new Array();
var buttons = DOM.getElementsByTagName('button');
var props = null;
for (var i=0; i &lt; buttons.length; i++){
props = window.getDeclaredStyle(buttons[i]);
if (props.cssFloat == &quot;left&quot; || props.cssFloat == &quot;right&quot;){
issueNodes.push(buttons[i]);
}
}
return issueNodes;
}
getAffectedBrowserProfiles()
Disponibilit&eacute;
Dreamweaver CS3.
Description
Fournit &agrave; Dreamweaver la liste des navigateurs posant probl&egrave;me.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Un tableau de noms de navigateurs, devant tous correspondre &agrave; la premi&egrave;re ligne d'un profil de navigateur correct
(voir les fichiers TXT dans le dossier Configuration/BrowserProfiles).
Exemple
function getAffectedBrowsers(){
return new Array(&quot;Microsoft Internet Explorer 5.0&quot;,
&quot;Microsoft Internet Explorer 5.5&quot;,
&quot;Microsoft Internet Explorer 6.0&quot;);
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
135
EXTENSION DE DREAMWEAVER
API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
getAffectedBrowserDisplayNames()
Disponibilit&eacute;
Dreamweaver CS3.
Description
Fournit &agrave; Dreamweaver la liste des navigateurs posant probl&egrave;me et visibles par les utilisateurs. Cette fonction est
facultative ; si elle n'est pas fournie, les noms de profil donn&eacute;s par getAffectedBrowserProfiles() sont utilis&eacute;s.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Un tableau de noms de navigateur. Ce tableau doit &ecirc;tre parall&egrave;le &agrave; celui qui a &eacute;t&eacute; renvoy&eacute; par
getAffectedBrowserProfiles().
Exemple
function getAffectedBrowsers(){
return new Array(&quot;IE/Win 5.0&quot;,
&quot;IE/Win 5.5&quot;,
&quot;IE/Win 6.0&quot;);
}
getIssueID()
Disponibilit&eacute;
Dreamweaver CS3.
Description
Fournit &agrave; Dreamweaver un ID unique pour le probl&egrave;me.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Cha&icirc;ne avec identificateur unique de probl&egrave;me.
Exemple
function getIssueID() {
return &quot;EXPANDING_BOX_PROBLEM&quot;;
}
getIssueName()
Disponibilit&eacute;
Dreamweaver CS3.
Derni&egrave;re mise &agrave; jour le 22/6/2011
136
EXTENSION DE DREAMWEAVER
API de v&eacute;rification des probl&egrave;mes de compatibilit&eacute; du navigateur
Description
Fournit &agrave; Dreamweaver le nom ou une br&egrave;ve description du probl&egrave;me.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Cha&icirc;ne contenant le nom ou une br&egrave;ve description du probl&egrave;me.
Exemple
function getIssueName(){
return &quot;The Expanding Box Problem&quot;;
}
getIssueDescription()
Disponibilit&eacute;
Dreamweaver CS3.
Description
Fournit &agrave; Dreamweaver une description d&eacute;taill&eacute;e du probl&egrave;me.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Cha&icirc;ne contenant le nom ou une br&egrave;ve description du probl&egrave;me.
Exemple
function getIssueDescription(){
return &quot;Fixed-dimension boxes will incorrectly expand to fit their
content instead of clipping content at the specified width
or height.&quot;;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
137
Chapitre 9 : Commandes
Les commandes d'Adobe Dreamweaver permettent d'ex&eacute;cuter presque n'importe quel type de modification dans le
document actif de l'utilisateur, dans d'autres documents ouverts ou dans tout document HTML situ&eacute; sur un disque
local. Les commandes peuvent ins&eacute;rer, supprimer ou r&eacute;organiser les balises et les attributs HTML, les commentaires
et le texte.
Les commandes sont des fichiers HTML. La section body d'un fichier de commandes peut contenir un formulaire
HTML acceptant des options pour la commande (par exemple, le tri des &eacute;l&eacute;ments d'un tableau et la colonne de
r&eacute;f&eacute;rence du tri). La balise head d'un fichier de commandes contient des fonctions JavaScript qui traitent les entr&eacute;es de
formulaire de la section body et contr&ocirc;lent les modifications apport&eacute;es au document de l'utilisateur.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er une commande.
Chemin
Fichier
Description
Configuration/Commands/
commandname.htm
D&eacute;signe l'interface utilisateur.
Configuration/Commands/
nom_commande.js
Contient les fonctions &agrave; ex&eacute;cuter.
Fonctionnement des commandes
Lorsque l'utilisateur clique sur un menu contenant une commande, les &eacute;v&eacute;nements suivants se produisent :
1 Dreamweaver appelle la fonction canAcceptCommand() pour d&eacute;terminer si l'option de menu doit &ecirc;tre d&eacute;sactiv&eacute;e.
Si la fonction canAcceptCommand() renvoie une valeur false, la commande est estomp&eacute;e dans le menu et la
proc&eacute;dure s'arr&ecirc;te. Si la fonction canAcceptCommand() renvoie une valeur true, la proc&eacute;dure peut se poursuivre.
2 L'utilisateur s&eacute;lectionne une commande dans le menu.
3 Dreamweaver appelle la fonction receiveArguments(), si elle est d&eacute;finie, dans le fichier de commandes de menu
s&eacute;lectionn&eacute; afin de permettre &agrave; la commande de traiter tous les arguments transmis depuis l'option de menu ou la
fonction dreamweaver.runCommand(). Pour plus d'informations sur la fonction dreamweaver.runCommand(),
voir le Guide des API de Dreamweaver.
4 Dreamweaver appelle la fonction commandButtons(), si elle est d&eacute;finie, pour identifier les boutons qui figurent
dans la partie droite de la bo&icirc;te de dialogue Options et le code qui doit &ecirc;tre ex&eacute;cut&eacute; lorsque l'utilisateur clique sur
ces boutons.
5 Dreamweaver recherche la balise form dans le fichier de commandes. S'il existe un formulaire, Dreamweaver
appelle la fonction windowDimensions(), qui redimensionne la bo&icirc;te de dialogue Options contenant les &eacute;l&eacute;ments
body du fichier. Si la fonction windowDimensions() n'est pas d&eacute;finie, Dreamweaver redimensionne
automatiquement la bo&icirc;te de dialogue.
6 Si la balise body du fichier de commandes contient le gestionnaire onLoad, Dreamweaver l'ex&eacute;cute (que la bo&icirc;te de
dialogue soit affich&eacute;e ou non). Si aucune bo&icirc;te de dialogue ne s'affiche, les &eacute;tapes restantes ne sont pas ex&eacute;cut&eacute;es.
7 L'utilisateur s&eacute;lectionne les options de la commande. Dreamweaver ex&eacute;cute les gestionnaires d'&eacute;v&eacute;nements associ&eacute;s
aux champs du formulaire au fur et &agrave; mesure que l'utilisateur les rencontre.
8 L'utilisateur clique sur l'un des boutons d&eacute;finis par la fonction commandButtons().
9 Dreamweaver ex&eacute;cute le code associ&eacute;. La bo&icirc;te de dialogue reste affich&eacute;e jusqu'&agrave; ce que l'un des scripts de la
commande appelle la fonction window.close().
Derni&egrave;re mise &agrave; jour le 22/6/2011
138
EXTENSION DE DREAMWEAVER
Commandes
Ajout de commandes au menu Commandes
Dreamweaver ajoute automatiquement tous les fichiers se trouvant dans le dossier Configuration/Commandes au bas
du menu Commandes. Pour emp&ecirc;cher qu'une commande ne s'affiche dans le menu Commandes, ins&eacute;rez le
commentaire suivant sur la premi&egrave;re ligne du fichier :
&lt;!-- MENU-LOCATION=NONE --&gt;
Lorsque cette ligne est pr&eacute;sente, Dreamweaver ne cr&eacute;e pas d'&eacute;l&eacute;ment de menu pour le fichier et vous devez appeler
dw.runCommand() pour ex&eacute;cuter la commande.
Exemple de commande simple
Cette extension simple ajoute un &eacute;l&eacute;ment dans le menu Commandes et vous permet de convertir le texte s&eacute;lectionn&eacute;
dans votre document en majuscules ou en minuscules. Lorsque vous cliquez sur l'&eacute;l&eacute;ment de menu, une interface &agrave;
trois boutons est activ&eacute;e et vous permet de soumettre votre choix.
Pour cr&eacute;er cette extension, vous devez cr&eacute;er l'interface utilisateur, &eacute;crire le code JavaScript et tester l'extension.
Cet exemple cr&eacute;e deux fichiers dans le dossier Commands : Change Case.htm, qui contient l'interface utilisateur, et
Change Case.js, qui contient le code JavaScript. Le cas &eacute;ch&eacute;ant, vous pouvez cr&eacute;er uniquement le fichier Change
Case.htm et ins&eacute;rer le code JavaScript dans la section head.
Cr&eacute;ation de l'interface utilisateur
L'interface utilisateur est un formulaire qui contient deux options, permettant &agrave; l'utilisateur de s&eacute;lectionner majuscules
ou minuscules.
1 Cr&eacute;ez un document vierge.
2 Ajoutez le code suivant dans le fichier pour cr&eacute;er le formulaire :
Derni&egrave;re mise &agrave; jour le 22/6/2011
139
EXTENSION DE DREAMWEAVER
Commandes
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//dialog&quot;&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;Title&gt;Make Uppercase or Lowercase&lt;/Title&gt;
&lt;SCRIPT SRC=&quot;Change Selection Case.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;form name=&quot;uorl&quot;&gt;
&lt;table border=&quot;0&quot;&gt;
&lt;!--DWLayoutTable--&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; nowrap&gt; &lt;p&gt;
&lt;label&gt;
&lt;input type=&quot;radio&quot; name=&quot;RadioGroup1&quot; value=&quot;uppercase&quot; checked&gt;
Uppercase&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
&lt;input type=&quot;radio&quot; name=&quot;RadioGroup1&quot; value=&quot;lowercase&quot;&gt;
Lowercase&lt;/label&gt;
&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
3 Enregistrez le fichier sous le nom Change Case.htm dans le dossier Configuration/Commands.
Le contenu de la balise Title, Make Uppercase or Lowercase (Majuscules et minuscules), s'affiche dans la barre en
haut de la bo&icirc;te de dialogue. Dans le formulaire, un tableau compos&eacute; de deux cellules contr&ocirc;le la mise en forme des
&eacute;l&eacute;ments. Les cellules contiennent deux options : Uppercase (Majuscules) et Lowercase(Minuscules). L'option
Uppercase poss&egrave;de l'attribut checked, ce qui en fait la s&eacute;lection par d&eacute;faut et fait en sorte que l'utilisateur doit
s&eacute;lectionner une des deux options ou annuler la commande.
Le formulaire doit s'apparenter &agrave; l'image suivante :
La fonction commandBUttons() ins&egrave;re les boutons OK et Annuler qui permettent &agrave; l'utilisateur de valider le choix ou
d'annuler l'op&eacute;ration. Pour plus d’informations, voir &laquo; commandButtons() &raquo; &agrave; la page 145.
Derni&egrave;re mise &agrave; jour le 22/6/2011
140
EXTENSION DE DREAMWEAVER
Commandes
Ecriture du code JavaScript
L'exemple suivant est compos&eacute; de deux fonctions API d'extension, canAcceptCommand() et commandButtons(),
appel&eacute;es par Dreamweaver, et d'une fonction d&eacute;finie par l'utilisateur, changeCase(), appel&eacute;e depuis la fonction
commandButtons().
Dans cet exemple, vous allez r&eacute;diger du code JavaScript pour ex&eacute;cuter les t&acirc;ches suivantes :
D&eacute;terminer si la commande doit &ecirc;tre activ&eacute;e ou estomp&eacute;e.
La premi&egrave;re t&acirc;che lors de la cr&eacute;ation d'une commande est de d&eacute;terminer les cas o&ugrave; l'&eacute;l&eacute;ment doit &ecirc;tre actif ou non.
Lorsque l'utilisateur clique sur le menu Commands, Dreamweaver appelle la fonction canAcceptCommand() pour
chaque &eacute;l&eacute;ment de menu afin de d&eacute;terminer si celui-ci doit &ecirc;tre activ&eacute;. Si canAcceptCommand() renvoie la valeur
true, Dreamweaver affiche le texte d'&eacute;l&eacute;ment de menu comme actif ou activ&eacute;. Si canAcceptCommand() renvoie la
valeur false, Dreamweaver estompe l'&eacute;l&eacute;ment de menu. Dans l'exemple suivant, l'&eacute;l&eacute;ment de menu est actif lorsque
l'utilisateur a s&eacute;lectionn&eacute; du texte dans le document.
1 Cr&eacute;ez un document vierge.
2 Ajoutez le code suivant :
function canAcceptCommand(){
var theDOM = dw.getDocumentDOM(); // Get the DOM of the current document
var theSel = theDOM.getSelection(); // Get start and end of selection
var theSelNode = theDOM.getSelectedNode(); // Get the selected node
var theChildren = theSelNode.childNodes; // Get children of selected node
return (theSel[0] != theSel[1] &amp;&amp; (theSelNode.nodeType == Node.TEXT_NODE&not;
|| theSelNode.hasChildNodes() &amp;&amp; (theChildren[0].nodeType == &not;
Node.TEXT_NODE)));
}
3 Enregistrez le fichier sous le nom Change Case.js dans le dossier Configuration/Commands.
Les premi&egrave;res lignes de la fonction canAcceptCommand() extraient le texte s&eacute;lectionn&eacute; en r&eacute;cup&eacute;rant le DOM du
document de l'utilisateur. La fonction getSelection() est alors appel&eacute;e sur l'objet de document. Ensuite, la fonction
r&eacute;cup&egrave;re le nœud qui contient le texte s&eacute;lectionn&eacute;, suivi par ses enfants, comme indiqu&eacute; dans le code suivant. Enfin, la
derni&egrave;re ligne v&eacute;rifie si la s&eacute;lection (ou son premier enfant) est constitu&eacute;e de texte et envoie en retour la valeur true
ou false.
La premi&egrave;re partie de l'instruction return (theSel[0] != theSel[1]) v&eacute;rifie si l'utilisateur a effectu&eacute; une s&eacute;lection
dans le document. La variable theSel est un tableau &agrave; deux entr&eacute;es maintenant les d&eacute;calages de d&eacute;but et de fin de la
s&eacute;lection dans le document. Si les deux valeurs ne sont pas &eacute;gales, du contenu a &eacute;t&eacute; s&eacute;lectionn&eacute;. Si les valeurs des deux
entr&eacute;es sont &eacute;gales, il y a juste un point d'insertion. Rien n'a &eacute;t&eacute; s&eacute;lectionn&eacute;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
141
EXTENSION DE DREAMWEAVER
Commandes
La partie suivante de l'instruction return (&amp;&amp; (theSelNode.nodeType == Node.TEXT_NODE) v&eacute;rifie que le nœud
s&eacute;lectionn&eacute; est constitu&eacute; de texte. Si c'est le cas, la fonction canAcceptCommand() renvoie la valeur true. Si nœud n'est
pas de type texte, le test se poursuit afin de v&eacute;rifier si le nœud a des enfants (|| theSelNode.hasChildNodes()) et
si le premier nœud enfant est de type texte (&amp;&amp; (theChildren[0].nodeType == Node.TEXT_NODE))). Si les deux
conditions sont r&eacute;unies (true), canAcceptCommand() renvoie la valeur true et Dreamweaver active l'&eacute;l&eacute;ment de menu
en bas du menu Commandes, comme indiqu&eacute; ci-dessous :
Derni&egrave;re mise &agrave; jour le 22/6/2011
142
EXTENSION DE DREAMWEAVER
Commandes
Dans le cas contraire, canAcceptCommand() renvoie la valeur false et Dreamweaver estompe l'&eacute;l&eacute;ment, comme
indiqu&eacute; ci-dessous :
Association de fonctions aux boutons OK et Annuler
Lorsque l'utilisateur clique sur le bouton OK ou Annuler, l'extension doit ex&eacute;cuter l'action appropri&eacute;e. Pour ce faire,
vous sp&eacute;cifiez la fonction JavaScript associ&eacute;e &agrave; un clic sur l'un des deux boutons.
1 Ouvrez le fichier Change Case.js dans le dossier Configuration/Commands.
2 En fin de fichier, ins&eacute;rez le code suivant :
function commandButtons() {
return new Array(&quot;OK&quot;, &quot;changeCase()&quot;, &quot;Cancel&quot;, &quot;window.close()&quot;);
}
3 Enregistrez le fichier.
La fonction commandButtons() entra&icirc;ne l'affichage des boutons OK et Annuler par Dreamweaver et indique &agrave; celuici la marche &agrave; suivre lorsque l'utilisateur clique sur ces boutons. La fonction commandButtons() indique &agrave;
Dreamweaver qu'il faut appeler changeCase() lorsque l'utilisateur clique sur OK et appeler window.close() lorsque
l'utilisateur clique sur Annuler.
Pour permettre &agrave; l'utilisateur de choisir entre majuscules et minuscules
Lorsque l'utilisateur clique sur un &eacute;l&eacute;ment de menu, l'extension n&eacute;cessite un m&eacute;canisme permettant &agrave; l'utilisateur de
choisir entre majuscules et minuscules. L'interface utilisateur fournit ce m&eacute;canisme en d&eacute;finissant deux boutons radio
permettant d'offrir ce choix &agrave; l'utilisateur.
1 Ouvrez le fichier Change Case.js.
2 En fin de fichier, ins&eacute;rez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
143
EXTENSION DE DREAMWEAVER
Commandes
function changeCase() {
var uorl;
// Check whether user requested uppercase or lowercase.
if (document.forms[0].elements[0].checked)
uorl = 'u';
else
uorl = 'l';
// Get the DOM.
var theDOM = dw.getDocumentDOM();
// Get the outerHTML of the HTML tag (the
// entire contents of the document).
var theDocEl = theDOM.documentElement;
var theWholeDoc = theDocEl.outerHTML;
// Get the node that contains the selection.
var theSelNode = theDOM.getSelectedNode();
// Get the children of the selected node.
var theChildren = theSelNode.childNodes;
var i = 0;
if (theSelNode.hasChildNodes()){
while (i &lt; theChildren.length){
if (theChildren[i].nodeType == Node.TEXT_NODE){
var selText = theChildren[i].data;
var theSel = theDOM.nodeToOffsets(theChildren[0]);
break;
}
++i;
}
}
else {
// Get the offsets of the selection
var theSel = theDOM.getSelection();
// Extract the selection
var selText = theWholeDoc.substring(theSel[0],theSel[1]);
}
if (uorl == 'u'){
theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) +
selText.toUpperCase() + theWholeDoc.substring(theSel[1]);
}
else {
theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) +
selText.toLowerCase() + theWholeDoc.substring(theSel[1]);
}
// Set the selection back to where it was when you started
theDOM.setSelection(theSel[0],theSel[1]);
window.close(); // close extension UI
}
3 Enregistrez le fichier sous le nom Change Case.js dans le dossier Configuration/Commands.
La fonction changeCase() est une fonction d&eacute;finie par l'utilisateur qui est appel&eacute;e par la fonction commandButtons()
lorsque l'utilisateur clique sur OK. Cette fonction modifie la casse du texte s&eacute;lectionn&eacute; (passage en majuscules ou
minuscules). L'interface utilisateur reposant sur des boutons radio, une s&eacute;lection sera obligatoirement effectu&eacute;e ; il
n'est pas n&eacute;cessaire de tester le cas o&ugrave; aucun choix n'est effectu&eacute; par l'utilisateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
144
EXTENSION DE DREAMWEAVER
Commandes
La fonction changeCase() teste en premier lieu la propri&eacute;t&eacute; document.forms[0].elements[0].checked. La
propri&eacute;t&eacute; document.forms[0].elements[0] se rapporte au premier &eacute;l&eacute;ment du premier formulaire de l'objet de
document actuel, &agrave; savoir l'interface utilisateur de l'extension. La propri&eacute;t&eacute; checked prend la valeur true si l'&eacute;l&eacute;ment
est activ&eacute;.Dans le cas contraire, il prend la valeur false. Dans l'interface, elements[0] se rapporte au premier
bouton radio, &agrave; savoir le bouton Majuscules. Un des boutons radio &eacute;tant forc&eacute;ment s&eacute;lectionn&eacute; lorsque l'utilisateur
clique sur OK, le code suppose que, si le choix n'est pas Majuscules, c'est Minuscules qui a &eacute;t&eacute; choisi. La fonction r&egrave;gle
la variable uorl sur u ou l pour stocker la r&eacute;ponse de l'utilisateur.
Le code restant dans la fonction r&eacute;cup&egrave;re le texte s&eacute;lectionn&eacute;, le convertit dans la casse s&eacute;lectionn&eacute;e et le copie de
nouveau &agrave; sa place dans le document.
Pour extraire le texte s&eacute;lectionn&eacute; pour le document de l'utilisateur, la fonction r&eacute;cup&egrave;re le DOM. Elle r&eacute;cup&egrave;re ensuite
l'&eacute;l&eacute;ment racine du document, &agrave; savoir la balise html. Le document entier est enfin extrait dans la variable
theWholeDoc.
Ensuite, changeCase() appelle la fonction getSelectedNode() pour modifier le nœud contenant le texte
s&eacute;lectionn&eacute;. Il r&eacute;cup&egrave;re &eacute;galement les nœuds enfants (theSelNode.childNodes) au cas o&ugrave; la s&eacute;lection serait une
balise contenant du texte, comme &lt;b&gt;text&lt;/b&gt;.
S'il y a des nœuds enfants, (hasChildNodes() renvoie la valeur true), la commande navigue de nœud en nœud &agrave; la
recherche d'un nœud constitu&eacute; de texte. Si un tel nœud est trouv&eacute;, le texte (theChildren[i].data) est stock&eacute; dans
selText et les d&eacute;calages du nœud textuel sont stock&eacute;s dans theSel.
S'il n'y a aucun nœud enfant, la commande appelle la fonction getSelection() et stocke les d&eacute;calages de d&eacute;but et de
fin de s&eacute;lection dans theSel. Il extrait ensuite la cha&icirc;ne entre ces deux d&eacute;calages et la conserve dans selText.
La fonction v&eacute;rifie alors la variable uorl pour d&eacute;terminer si l'utilisateur a s&eacute;lectionn&eacute; les majuscules. Si c'est le cas, la
fonction r&eacute;&eacute;crit le code HTML dans le document dans diff&eacute;rentes sections : tout d'abord, le d&eacute;but du document au
d&eacute;but de la s&eacute;lection, puis le texte s&eacute;lection&eacute;, converti en majuscules (selText.toUppercase()), et enfin la fin du
texte s&eacute;lectionn&eacute; &agrave; la fin du document.
Si l'utilisateur s&eacute;lectionne minuscules, la fonction effectue la m&ecirc;me op&eacute;ration mais appelle selText.toLowerCase()
pour convertir le texte s&eacute;lectionn&eacute; en minuscules.
Finalement, changeCase() r&eacute;initialise la s&eacute;lection et appelle window.close() pour fermer l'interface utilisateur.
Test de l'extension
Une fois les fichiers plac&eacute;s dans le dossier Commands, vous pouvez tester l'extension.
1 Red&eacute;marrez Dreamweaver ou rechargez les extensions. Pour plus d'informations sur le rechargement des
extensions, voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83.
L'entr&eacute;e Modifier la casse doit maintenant &ecirc;tre affich&eacute;e dans le menu Commandes.
2 Tapez du texte dans un document.
3 S&eacute;lectionnez le texte.
Remarque : La commande Modifier la casse est estomp&eacute;e tant que vous n'avez pas s&eacute;lectionn&eacute; de texte dans le
document.
4 S&eacute;lectionnez Modifier la casse dans le menu Commandes.
Le texte change de casse.
Derni&egrave;re mise &agrave; jour le 22/6/2011
145
EXTENSION DE DREAMWEAVER
Commandes
Fonctions de l'API des commandes
Les fonctions personnalis&eacute;es de l'API des commandes de menu ne sont pas obligatoires.
canAcceptCommand()
Description
Cette fonction indique si la commande est adapt&eacute;e &agrave; la s&eacute;lection en cours.
Remarque : Ne d&eacute;finissez la fonction canAcceptCommand() que s'il existe au moins un cas o&ugrave; elle renvoie la valeur
false. Si la fonction n'est pas d&eacute;finie, la commande est consid&eacute;r&eacute;e comme appropri&eacute;e. Ce processus entra&icirc;ne des gains
de temps et de performances.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver s'attend &agrave; recevoir la valeur true si la commande est appropri&eacute;e. Si la valeur est false, la commande
appara&icirc;t estomp&eacute;e dans le menu.
Exemple
Dans l'exemple suivant, la fonction canAcceptCommand() rend la commande disponible uniquement lorsque la
s&eacute;lection correspond &agrave; un tableau :
function canAcceptCommand(){
var retval=false;
var selObj=dw.getDocumentDOM.getSelectedNode();
return (selObj.nodeType == Node.ELEMENT_NODE &amp;&amp; &not;
selObj.tagName==&quot;TABLE&quot;);{
retval=true;
}
return retval;
}
commandButtons()
Description
Cette fonction d&eacute;finit les boutons devant figurer dans la bo&icirc;te de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas d&eacute;finie, aucun bouton n'appara&icirc;t et la section body du fichier de
commandes s'&eacute;tend de fa&ccedil;on &agrave; remplir la totalit&eacute; de la bo&icirc;te de dialogue.
Par d&eacute;faut, ces boutons s'affichent dans le haut de la bo&icirc;te de dialogue. Vous pouvez placer ces boutons dans le bas de
la bo&icirc;te de diualogue en d&eacute;finissant deux valeurs suppl&eacute;mentaires dans la fonction commandButtons().
Par d&eacute;faut, les boutons sont align&eacute;s &agrave; droite. La d&eacute;finition de la valeur PutButtonOnLeft entra&icirc;ne l'alignement des
boutons suivants &agrave; gauche sur la m&ecirc;me ligne.
Arguments
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
146
EXTENSION DE DREAMWEAVER
Commandes
Valeurs renvoy&eacute;es
Dreamweaver renvoie un tableau contenant un nombre pair d'&eacute;l&eacute;ments. Le premier &eacute;l&eacute;ment est une cha&icirc;ne contenant
le libell&eacute; du premier bouton. Le deuxi&egrave;me &eacute;l&eacute;ment est une cha&icirc;ne de code JavaScript d&eacute;finissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres &eacute;l&eacute;ments d&eacute;finissent les boutons suppl&eacute;mentaires de la
m&ecirc;me mani&egrave;re.
Exemple
L'exemple suivant de commandButtons() d&eacute;finit trois boutons : OK, Cancel et Help, plac&eacute;s dans le coin sup&eacute;rieur droit
(position par d&eacute;faut) de la bo&icirc;te de dialogue :
function commandButtons(){
return new Array(&quot;OK&quot; , &quot;doCommand()&quot; ,
&quot;Cancel&quot; , &quot;window.close()&quot; ,
&quot;Help&quot; , &quot;showHelp()&quot;);
}
Vous pouvez personnaliser le positionnement et l'alignement des boutons.
Exemple
L'exemple suivant de commandButtons() affiche les boutons dans le bas de la bo&icirc;te de dialogue. Lorsque la premi&egrave;re
valeur de la plage renvoy&eacute;es est PutButtonsOnBottom, vous pouvez d&eacute;finir la seconde valeur comme defaultButton,
avec le nom d'un des boutons. Ce bouton est s&eacute;lectionn&eacute; par d&eacute;faut et est utilis&eacute; lorsque l'utilisateur appuie sur la
touche Entr&eacute;e. Dans cet exemple, OKbutton est d&eacute;fini comme bouton par d&eacute;faut.
function commandButtons(){
return new Array(&quot;PutButtonsOnBottom&quot; , &quot;OkButton defaultButton&quot; ,
&quot;OK&quot; , &quot;doCommand()&quot; ,
&quot;Cancel&quot; , &quot;window.close()&quot; ,
&quot;Help&quot; , &quot;showHelp()&quot;);
}
Exemple
Dans l'exemple suivant, le bouton Help est align&eacute; &agrave; gauche &agrave; l'aide de PutButtonOnLeft.
function commandButtons(){
return new Array(&quot;PutButtonsOnBottom&quot;, &quot;OkButton defaultButton&quot;,
&quot;OK&quot;, &quot;doCommand()&quot;,
&quot;Cancel&quot;, &quot;window.close()&quot;,
&quot;PutButtonOnLeft&quot;,
&quot;Help&quot; , &quot;showHelp()&quot;);}
isDOMRequired()
Description
Cette fonction d&eacute;termine si la commande requiert un DOM valide pour fonctionner. Si cette fonction renvoie une
valeur true ou si la fonction n'est pas d&eacute;finie, Dreamweaver suppose que la commande n&eacute;cessite un DOM valide et
synchronise les modes Affichage de code et Cr&eacute;ation du document avant de l'ex&eacute;cuter. La synchronisation entra&icirc;ne la
mise &agrave; jour de toutes les modifications effectu&eacute;es en mode Affichage de code dans le mode Cr&eacute;ation.
Arguments
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
147
EXTENSION DE DREAMWEAVER
Commandes
Valeurs renvoy&eacute;es
Dreamweaver renvoie la valeur true si une commande n&eacute;cessite un DOM valide pour fonctionner, sinon false.
receiveArguments()
Description
Cette fonction traite tous les arguments provenant d'un &eacute;l&eacute;ment de menu ou de la fonction dw.runCommand().
Arguments
{arg1}, {arg2},...{argN}
• Si l'attribut arguments est d&eacute;fini pour une balise menuitem, la valeur de l'attribut est transmise &agrave; la fonction
receiveArguments() sous forme d'un ou plusieurs arguments. Les arguments peuvent &eacute;galement &ecirc;tre transmis &agrave;
une commande par la fonction dw.runCommand().
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
windowDimensions()
Description
Cette fonction d&eacute;finit les dimensions de la bo&icirc;te de dialogue des param&egrave;tres. Si cette fonction n'est pas d&eacute;finie, les
dimensions de la fen&ecirc;tre sont calcul&eacute;es automatiquement.
Remarque : Ne d&eacute;finissez cette fonction que si vous souhaitez utiliser une bo&icirc;te de dialogue Options ayant des dimensions
sup&eacute;rieures &agrave; 640 x 480 pixels.
Arguments
platform
• La valeur de l'argument platform est soit &quot;macintosh&quot;, soit &quot;windows&quot;, selon la plate-forme utilis&eacute;e par
l'utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver renvoie une cha&icirc;ne au format &quot;widthInPixels,heightInPixels&quot;.
Les dimensions renvoy&eacute;es sont inf&eacute;rieures &agrave; la taille totale de la bo&icirc;te de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoy&eacute;es ne permettent pas de faire appara&icirc;tre toutes les options, des
barres de d&eacute;filement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() d&eacute;finit les dimensions de la bo&icirc;te de dialogue des
param&egrave;tres &agrave; 648 x 520 pixels :
function windowDimensions(){
return &quot;648,520&quot;;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
148
Chapitre 10 : Menus et commandes de
menu
Adobe Dreamweaver cr&eacute;e les menus &agrave; partir de la structure d&eacute;finie dans le fichier menus.xml du dossier
Configuration/Menus de Dreamweaver. Vous pouvez r&eacute;organiser, renommer ou supprimer des commandes de menu
en modifiant le fichier menus.xml. Vous pouvez &eacute;galement ajouter, modifier et supprimer les raccourcis clavier de
commandes de menu. Toutefois, dans la plupart des cas, il est plus facile de modifier les raccourcis clavier &agrave; l'aide de
l'&eacute;diteur de raccourcis clavier (voir l'aide de Dreamweaver). Les modifications effectu&eacute;es dans les menus Dreamweaver
ne sont prises en compte qu'apr&egrave;s le red&eacute;marrage de Dreamweaver ou le rechargement des extensions.
Fichier menus.xml
Le fichier menus.xml contient une liste structur&eacute;e des barres de menus, menus, commandes de menu, s&eacute;parateurs,
listes de raccourcis et raccourcis clavier. Des balises XML d&eacute;crivent ces &eacute;l&eacute;ments ; vous pouvez les modifier dans un
&eacute;diteur de texte.
Remarque : Faites preuve de prudence lorsque vous modifiez les menus. Dreamweaver ignore les menus ou commandes
de menu comportant des erreurs de syntaxe XML.
Dans un syst&egrave;me d'exploitation multiutilisateurs, vous pouvez apporter dans Dreamweaver des modifications qui se
r&eacute;percutent sur menus.xml. Par exemple, vous pouvez modifier des raccourcis clavier &agrave; l'aide de l'&eacute;diteur de raccourcis
clavier. Dans un tel cas, Dreamweaver cr&eacute;e un fichier menus.xml dans votre dossier Configuration d'utilisateur. Pour
personnaliser menus.xml dans un syst&egrave;me d'exploitation multi-utilisateur, modifiez la copie du fichier dans votre
dossier de configuration utilisateur. Vous pouvez &eacute;galement copier le fichier menus.xml principal dans votre de
configuration utilisateur si Dreamweaver n'y a pas encore cr&eacute;&eacute; de version. Pour plus d'informations, voir &laquo; Dossiers de
configuration multi-utilisateur &raquo; &agrave; la page 82.
Si vous ouvrez le fichier menus.xml dans un &eacute;diteur XML, il se peut que des messages d'erreur concernant les
esperluettes (&amp;) du fichier menus.xml s'affichent. Nous vous recommandons de modifier le fichier menus.xml dans un
&eacute;diteur de texte ; &eacute;vitez de le modifier dans Dreamweaver. Pour toutes informations de base sur XML, voir l'aide de
Dreamweaver.
Remarque : Avant de modifier le fichier menus.xml ou tout autre fichier de configuration Dreamweaver, effectuez une
copie de sauvegarde. Si vous avez oubli&eacute; d'effectuer une copie de sauvegarde, vous pouvez remplacer menus.xml par une
copie du fichier menus.bak qui se trouve dans le dossier Configuration.
Une barre de menu (marqu&eacute;e par des balises menu bar d'ouverture et de fermeture) peut &ecirc;tre un menu ou un jeu de
menus. Par exemple, il existe une barre de menu principale, une barre de menu distincte pour le panneau Site (qui
n'appara&icirc;t que sous Windows et pas sur Macintosh), ainsi qu'une barre pour chaque menu contextuel. Chaque barre
de menus comporte un ou plusieurs menus indiqu&eacute;s par des balises menu. Chacun de ces menus comporte une ou
plusieurs commandes de menu, indiqu&eacute;es par des balises menuitem et d&eacute;finies par divers attributs. Un menu peut
&eacute;galement comporter des s&eacute;parateurs (indiqu&eacute;s par des balises separator) ainsi que des sous-menus.
Derni&egrave;re mise &agrave; jour le 22/6/2011
149
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Outre les raccourcis clavier principaux associ&eacute;s aux commandes de menu, Dreamweaver fournit des raccourcis
alternatifs et contextuels. Par exemple, CTRL+Y (Windows) ou Commande+Y (Macintosh) est le raccourci de la
fonction R&eacute;tablir. CTRL+MAJ+Z et Commande+MAJ+Z sont des raccourcis secondaires pour cette fonction R&eacute;tablir.
Ces raccourcis alternatifs et contextuels (ainsi que d'autres raccourcis ne pouvant pas &ecirc;tre repr&eacute;sent&eacute;s dans les balises
des commandes de menu) sont d&eacute;finis dans les listes de raccourcis du fichier menus.xml. Ces listes de raccourcis
(indiqu&eacute;es par des balises shortcutlist) comportent un ou plusieurs raccourcis indiqu&eacute;s par des balises shortcut.
Les sections ci-apr&egrave;s d&eacute;crivent la syntaxe des balises du fichier menus.xml. Les attributs facultatifs sont signal&eacute;s dans
la liste des attributs par des accolades ({}). Les attributs qui ne sont pas signal&eacute;s ainsi sont consid&eacute;r&eacute;s comme
obligatoires.
&lt;menubar&gt;
Description
Fournit des informations sur une barre de menus de la structure de menus de Dreamweaver.
Attributs
name, {app}, id, {platform}
•
name Nom de la barre de menus. Bien que l'attribut name soit obligatoire, vous pouvez lui assigner la valeur &quot;&quot;.
•
app Nom de l'application dans laquelle la barre de menus est disponible. Non utilis&eacute; actuellement.
•
id ID de menu de la barre de menus. Les ID de menu du fichier menus.xml doivent tous &ecirc;tre uniques.
•
platform Indique que la barre de menus ne doit appara&icirc;tre que sur la plate-forme sp&eacute;cifi&eacute;e. Les valeurs possibles
sont &quot;win&quot; et &quot;mac&quot;.
Contenu
Cette balise doit comporter une ou plusieurs balises menu.
Conteneur
Aucun.
Exemple
La barre de menus principale (fen&ecirc;tre de document) est d&eacute;finie par la balise menubar suivante :
&lt;menubar name=&quot;Main Window&quot; id=&quot;DWMainWindow&quot;&gt;
&lt;!-- menu tags here --&gt;
&lt;/menubar&gt;
&lt;menu&gt;
Description
Fournit des informations sur un menu ou un sous-menu de la structure de menus de Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
150
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Attributs
name, {app}, id, {platform}, {showIf}
•
name Nom du menu tel qu'il appara&icirc;t dans la barre de menus. Pour d&eacute;finir la cl&eacute; d'acc&egrave;s (mn&eacute;monique) du menu
sous Windows, ins&eacute;rez un trait de soulignement (_) avant la lettre d'acc&egrave;s. Sur Macintosh, le trait de soulignement
est supprim&eacute; automatiquement.
•
app Nom de l'application dans laquelle le menu est disponible. Non utilis&eacute; actuellement.
•
id ID du menu. Les ID de menu du fichier doivent tous &ecirc;tre uniques.
•
platform Indique que le menu ne doit appara&icirc;tre que sur la plate-forme sp&eacute;cifi&eacute;e. Les valeurs possibles sont &quot;win&quot;
et &quot;mac&quot;.
•
showIf Indique que le menu ne doit appara&icirc;tre que si l'activateur Dreamweaver sp&eacute;cifi&eacute; a la valeur true. Vous
disposez des activateurs suivants : _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP,
_SERVERMODEL_CFML (pour toutes les versions d'Adobe ColdFusion), _SERVERMODEL_CFML_UD4 (pour UltraDev
version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN,
_VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, et _VIEW_STANDARD. Vous pouvez sp&eacute;cifier plusieurs activateurs en
les s&eacute;parant par des virgules (chaque virgule signifie ET). Vous pouvez utiliser des points d'exclamation (&quot;!&quot;) &agrave;
titre d'exclusion. Ainsi, si vous souhaitez que le menu n'apparaisse qu'en mode Code dans une page ASP,
d&eacute;finissez les attributs de la fa&ccedil;on suivante : showIf=&quot;_VIEW_CODE, _SERVERMODEL_ASP&quot;.
Contenu
Cette balise peut contenir une ou plusieurs balises menuitem et separator. Elle peut &eacute;galement contenir d'autres
balises menu (pour cr&eacute;er des sous-menus) ainsi que des balises HTML comment standard.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise menubar.
Exemple
&lt;menu name=&quot;_File&quot; id=&quot;DWMenu_File&quot;&gt;
&lt;!-- menuitem, separator, menu, and comment tags here --&gt;
&lt;/menu&gt;
&lt;menuitem&gt;
Description
D&eacute;finit une commande de menu Dreamweaver.
Attributs
name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file}, {checked},
{dynamic}, {isdomrequired}, {showIf}
•
name Nom de la commande int&eacute;gr&eacute;e au menu. Un trait de soulignement indique que la lettre suivante est d&eacute;finie
comme cl&eacute; d'acc&egrave;s (mn&eacute;monique) de la commande (sous Windows uniquement).
•
id Permet &agrave; Dreamweaver d'identifier l'&eacute;l&eacute;ment. Cet ID doit &ecirc;tre unique dans l'ensemble de la structure de menus.
Si vous ajoutez de nouvelles commandes de menu au fichier menus.xml, indiquez le nom de votre entreprise ou
toute autre cha&icirc;ne unique comme pr&eacute;fixe aux ID des commandes de menu.
•
app Nom de l'application dans laquelle figure la commande de menu. Non utilis&eacute; actuellement.
Derni&egrave;re mise &agrave; jour le 22/6/2011
151
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
•
key Raccourci clavier de la commande, le cas &eacute;ch&eacute;ant. Utilisez les cha&icirc;nes suivantes pour sp&eacute;cifier les touches de
modification :
•
Cmd d&eacute;signe la touche Ctrl (Windows) ou Commande (Macintosh).
•
Alt et Opt d&eacute;signent la touche Alt (Windows) ou la touche Option (Macintosh). Ces cha&icirc;nes sont interchangeables.
•
Shift d&eacute;signe la touche Maj, quelle que soit la plate-forme utilis&eacute;e.
•
Ctrl d&eacute;signe la touche Ctrl, quelle que soit la plate-forme utilis&eacute;e.
• Lorsque plusieurs touches de modification sont assign&eacute;es &agrave; un raccourci, elles sont s&eacute;par&eacute;es par un signe Plus (+).
Par exemple, la cha&icirc;ne Cmd+Opt+5 dans l'attribut key signifie que l'utilisateur doit appuyer sur Ctrl+Alt+5
(Windows) ou Commande+Option+5 (Macintosh) afin d'ex&eacute;cuter la commande de menu.
• Les touches sp&eacute;ciales sont d&eacute;sign&eacute;es par leur nom : F1 &agrave; F12, Pg.
Suiv., Pg. Pr&eacute;c., Orig., Fin, Inser, Suppr,
Tab, Echap, Ret. Arr. et Espace. Vous pouvez &eacute;galement assigner les touches de modification aux touches
sp&eacute;ciales.
•
platform Indique la plate-forme sur laquelle appara&icirc;t l'&eacute;l&eacute;ment. Les valeurs valides sont &quot;win&quot; (Windows) ou &quot;mac&quot;
(Macintosh). Si vous ne sp&eacute;cifiez aucun attribut platform, la commande de menu appara&icirc;t sur les deux platesformes. Si vous souhaitez qu'une commande de menu ait un comportement sp&eacute;cifique en fonction de la plateforme, sp&eacute;cifiez deux commandes de menu avec un nom identique (mais des ID distincts) : l'une avec
platform=&quot;win&quot; et l'autre avec platform=&quot;mac&quot;.
•
enabled Fournit un code JavaScript (g&eacute;n&eacute;ralement un appel de fonction JavaScript) d&eacute;terminant si la commande
de menu est actuellement activ&eacute;e. Si la fonction renvoie la valeur false, la commande de menu est estomp&eacute;e. La
valeur par d&eacute;faut est &quot;true&quot;, mais il est pr&eacute;f&eacute;rable de sp&eacute;cifier syst&eacute;matiquement une valeur m&ecirc;me si la valeur est
&quot;true&quot;.
•
argumentsFournit des arguments que Dreamweaver transmet au code dans le fichier JavaScript indiqu&eacute; dans
l'attribut file. Ces arguments doivent &ecirc;tre entour&eacute;s d'apostrophes ('), &agrave; l'int&eacute;rieur de la cha&icirc;ne de valeur d'un
attribut d&eacute;limit&eacute;e par des guillemets doubles.
•
command Sp&eacute;cifie une expression JavaScript qui est ex&eacute;cut&eacute;e lorsque l'utilisateur s&eacute;lectionne l'&eacute;l&eacute;ment dans le menu.
Pour sp&eacute;cifier un code JavaScript complexe, utilisez un fichier JavaScript (indiqu&eacute; dans l'attribut file). Vous devez
sp&eacute;cifier l'attribut file ou command pour chaque commande de menu.
•
file Nom du fichier HTML contenant le code JavaScript qui contr&ocirc;le la commande de menu. Sp&eacute;cifiez le chemin
du fichier par rapport au dossier Configuration. Par exemple, pour la commande de menu Aide Bienvenue,
sp&eacute;cifiez l'attribut file=&quot;Commands/Welcome.htm&quot;. L'attribut file remplace les attributs command, enabled et
checked. Vous devez sp&eacute;cifier l'attribut file ou command pour chaque commande de menu. Pour plus
d'informations sur la cr&eacute;ation d'un fichier de commandes par l'interm&eacute;diaire du panneau Historique, voir l'aide de
Dreamweaver. Pour plus d'informations sur la r&eacute;daction des commandes JavaScript, voir &laquo; Commandes &raquo; &agrave; la
page 137.
•
checked Expression JavaScript d&eacute;terminant si une coche doit s'afficher en regard de la commande de menu dans
le menu; si la valeur de cette expression est &laquo; true &raquo;, la coche s'affiche.
•
dynamic Si cet attribut est sp&eacute;cifi&eacute;, il indique que la commande de menu doit &ecirc;tre d&eacute;termin&eacute;e dynamiquement par
un fichier HTML ; ce dernier contient un code JavaScript d&eacute;finissant le texte et l'&eacute;tat de la commande de menu. Si
vous sp&eacute;cifiez l'attribut dynamic pour une balise, vous devez &eacute;galement sp&eacute;cifier l'attribut file.
•
isdomrequired Indique s'il est n&eacute;cessaire de synchroniser les modes Cr&eacute;ation et Code avant d'ex&eacute;cuter le code
associ&eacute; &agrave; cette commande de menu. Les valeurs admises sont &quot;true&quot; (par d&eacute;faut) et &quot;false&quot;. Si vous d&eacute;finissez la
valeur &quot;false&quot;, les modifications apport&eacute;es au fichier par la commande de menu n'utilisent pas le DOM
Dreamweaver. Pour plus d'informations sur le DOM, voir &laquo; Mod&egrave;le d'objet de document (DOM) Dreamweaver &raquo;
&agrave; la page 100.
Derni&egrave;re mise &agrave; jour le 22/6/2011
152
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
•
showIf Indique que la commande de menu ne doit appara&icirc;tre que si la valeur de l'activateur Dreamweaver sp&eacute;cifi&eacute;
est true. Vous disposez des activateurs suivants : _SERVERMODEL_ASP, _SERVERMODEL_ASPNET,
_SERVERMODEL_JSP, _SERVERMODEL_CFML (pour toutes les versions d'Adobe ColdFusion),
_SERVERMODEL_CFML_UD4 (pour UltraDev version 4 de ColdFusion), _SERVERMODEL_PHP, _FILE_TEMPLATE,
_VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, et _VIEW_STANDARD. Vous pouvez
sp&eacute;cifier plusieurs activateurs en les s&eacute;parant par des virgules (chaque virgule signifie ET). Vous pouvez utiliser des
points d'exclamation (&quot;!&quot;) &agrave; titre d'exclusion. Ainsi, si vous souhaitez que la commande de menu apparaisse
en mode Code, mais pas sur une page ColdFusion, d&eacute;finissez l'attribut de la fa&ccedil;on suivante :
showIf=&quot;_VIEW_CODE, !_SERVERMODEL_CFML&quot;.
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise menu.
Exemple
&lt;menuitem name=&quot;_New&quot; key=&quot;Cmd+N&quot; enabled=&quot;true&quot; command=&quot;dw.createDocument()&quot;
id=&quot;DWMenu_File_New&quot; /&gt;
&lt;separator&gt;
Description
Indique qu'un s&eacute;parateur doit appara&icirc;tre &agrave; l'emplacement correspondant du menu.
Attributs
{app}
app Nom de l'application dans laquelle le s&eacute;parateur appara&icirc;t. Non utilis&eacute; actuellement.
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise menu.
Exemple
&lt;separator /&gt;
&lt;shortcutlist&gt;
Description
Sp&eacute;cifie une liste de raccourcis dans le fichier menus.xml.
Attributs
{app}, id, {platform}
•
app Nom de l'application dans laquelle la liste de raccourcis est disponible. Non utilis&eacute; actuellement.
Derni&egrave;re mise &agrave; jour le 22/6/2011
153
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
•
id ID de la liste de raccourcis. Cet ID doit &ecirc;tre identique &agrave; celui de la barre de menus (ou menu contextuel) de
Dreamweaver &agrave; laquelle les raccourcis sont associ&eacute;s. Les valeurs admises sont les suivantes : &quot;DWMainWindow&quot;,
&quot;DWMainSite&quot;, &quot;DWTimelineContext&quot; et &quot;DWHTMLContext&quot;.
•
platform Indique que la liste de raccourcis ne doit appara&icirc;tre que sur la plate-forme sp&eacute;cifi&eacute;e. Les valeurs possibles
sont &quot;win&quot; et &quot;mac&quot;.
Contenu
Une ou plusieurs balises shortcut peuvent &ecirc;tre imbriqu&eacute;es dans cette balise. Celle-ci peut &eacute;galement contenir une ou
plusieurs balises comment (dont la syntaxe est identique &agrave; celle des balises comment HTML).
Conteneur
Aucun.
Exemple
&lt;shortcutlist id=&quot;DWMainWindow&quot;&gt;
&lt;!-- shortcut and comment tags here --&gt;
&lt;/shortcutlist&gt;
&lt;shortcut&gt;
Description
Sp&eacute;cifie un raccourci clavier dans le fichier menus.xml.
Attributs
key, {app}, {platform}, {file}, {arguments}, {command}, id, {name}
•
key Combinaison de touches permettant d'activer le raccourci clavier. Pour plus d'informations sur la syntaxe, voir
&laquo; &lt;menuitem&gt; &raquo; &agrave; la page 150.
•
app Nom de l'application dans laquelle le raccourci est disponible. Non utilis&eacute; actuellement.
•
platform Indique que le raccourci ne fonctionne que sur la plate-forme sp&eacute;cifi&eacute;e. Les valeurs possibles sont &quot;win&quot;
et &quot;mac&quot;. Si vous ne d&eacute;finissez pas cet attribut, le raccourci fonctionne sur les deux plates-formes.
•
file Chemin d'acc&egrave;s au fichier contenant le code JavaScript ex&eacute;cut&eacute; par Dreamweaver lorsque le raccourci clavier
est utilis&eacute;. L'attribut file prime sur l'attribut command. Vous devez sp&eacute;cifier l'attribut file ou command pour
chaque raccourci.
•
arguments Fournit des arguments que Dreamweaver transmet au code dans le fichier JavaScript indiqu&eacute; dans
l'attribut file. Ces arguments doivent &ecirc;tre entour&eacute;s d'apostrophes ('), &agrave; l'int&eacute;rieur de la cha&icirc;ne de valeur d'un
attribut d&eacute;limit&eacute;e par des guillemets doubles.
•
command Code JavaScript ex&eacute;cut&eacute; par Dreamweaver lorsque le raccourci clavier est utilis&eacute;. Sp&eacute;cifiez l'attribut file
or command pour chaque raccourci.
•
id Identificateur unique d'un raccourci.
•
name Nom de la commande ex&eacute;cut&eacute;e par le raccourci clavier, bas&eacute; sur le mod&egrave;le des noms de commande de menu.
Par exemple, l'attribut name du raccourci F12 correspond &agrave; &quot;Aper&ccedil;u dans le navigateur principal&quot;.
Contenu
Aucun (balise vide).
Derni&egrave;re mise &agrave; jour le 22/6/2011
154
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise shortcutlist.
Exemple
&lt;shortcut key=&quot;Cmd+Shift+Z&quot; file=&quot;Menus/MM/Edit_Clipboard.htm&quot;
arguments=&quot;'redo'&quot; id=&quot;DWShortcuts_Edit_Redo&quot; /&gt;
&lt;tool&gt;
Description
Cette balise repr&eacute;sente un outil unique et contient tous les raccourcis associ&eacute;s &agrave; ce dernier sous la forme de sous-balises,
stock&eacute;es dans le fichier menus.xml.
Attributs
{name}, id
•
name Version localis&eacute;e du nom de l'outil.
•
id Identificateur d'outil interne qui d&eacute;signe l'outil auquel s'appliquent les raccourcis.
Contenu
Cette balise peut contenir une ou plusieurs balises activate, override ou action.
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise menu.
Exemple
&lt;tool name=&quot;Hand tool&quot; id=&quot;com.Macromedia.dreamweaver.tools.hand&quot;&gt;
&lt;!-- tool tags here --&gt;
&lt;/tool&gt;
&lt;action&gt;
Description
Contient la combinaison de touches et le code JavaScript &agrave; ex&eacute;cuter lorsque l'outil est actif et que l'utilisateur compose
la combinaison de touches.
Attributs
{name}, key, command, id
•
name Version localis&eacute;e de l'action.
•
key Combinaison de touches permettant d'ex&eacute;cuter l'action. Pour plus d'informations sur la syntaxe, voir
&laquo; &lt;menuitem&gt; &raquo; &agrave; la page 150.
•
command Instructions JavaScript &agrave; ex&eacute;cuter. Le format de cet attribut est identique &agrave; celui de l'attribut command de
&laquo; &lt;shortcut&gt; &raquo; &agrave; la page 153.
•
id Identificateur unique de l'action.
Derni&egrave;re mise &agrave; jour le 22/6/2011
155
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise tool.
Exemple
&lt;action name=&quot;Set magnification to 50%&quot; key=&quot;5&quot; command=&quot;dw.activeViewScale = 0.50&quot; id
=&quot;DWTools_Zoom_50&quot; /&gt;
&lt;activate&gt;
Description
Contient la combinaison de touches permettant d'activer l'outil.
Attributs
{name}, key, id
•
name Version localis&eacute;e de l'action.
•
key Combinaison de touches permettant d'activer l'outil. Pour plus d'informations sur la syntaxe, voir
&laquo; &lt;menuitem&gt; &raquo; &agrave; la page 150.
•
id Identificateur unique de l'action.
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise tool.
Exemple
&lt;activate name=&quot;Switch to Hand tool&quot; key=&quot;H&quot; id=&quot;DWTools_Hand_Active1&quot; /&gt;
&lt;override&gt;
Description
Contient la combinaison de touches permettant d'activer temporairement l'outil. S'il ex&eacute;cute un autre outil modal,
l'utilisateur peut appuyer sur cette touche et la maintenir enfonc&eacute;e pour basculer d'un outil &agrave; l'autre.
Attributs
{name}, key, id
•
name Version localis&eacute;e de l'action.
•
key Combinaison de touches permettant d'activer rapidement l'outil. Pour plus d'informations sur la syntaxe, voir
&laquo; &lt;menuitem&gt; &raquo; &agrave; la page 150.
•
id Identificateur unique de l'action.
Derni&egrave;re mise &agrave; jour le 22/6/2011
156
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Contenu
Aucun (balise vide).
Conteneur
Cette balise doit &ecirc;tre imbriqu&eacute;e dans une balise tool.
Exemple
&lt;override name=&quot;Quick switch to Hand tool&quot; key=&quot;Space&quot; id=&quot;DWTools_Hand_Override&quot; /&gt;
Modification des menus et des commandes de menu
En modifiant le fichier menus.xml, vous pouvez d&eacute;placer les commandes de menu au sein d'un menu ou d'un menu &agrave;
un autre. Vous pouvez &eacute;galement ajouter des s&eacute;parateurs dans les menus ou les supprimer et d&eacute;placer des menus au
sein d'une barre de menus ou d'une barre de menus &agrave; une autre.
En outre, vous pouvez ajouter des &eacute;l&eacute;ments dans les menus contextuels ou en retirer en appliquant la m&ecirc;me proc&eacute;dure
que pour les autres menus.
Pour plus d'informations, voir &laquo; Fichier menus.xml &raquo; &agrave; la page 148.
D&eacute;placement d'une commande de menu
1 Quittez Dreamweaver.
2 Effectuez une copie de sauvegarde du fichier menus.xml.
3 Ouvrez le fichier menus.xml dans un &eacute;diteur de texte comme BBEdit, Macromedia&reg; HomeSite&reg; ou Wordpad. Ne
l'ouvrez pas dans Dreamweaver.
4 Coupez une balise menuitem compl&egrave;te, depuis la cha&icirc;ne &lt;menuitem initiale jusqu'&agrave; la s&eacute;quence /&gt; finale.
5 Placez le point d'insertion &agrave; l'emplacement requis pour la commande de menu. Cet emplacement doit se situer entre
une balise menu et la balise /menu correspondante.
6 Collez la commande de menu &agrave; son nouvel emplacement.
Cr&eacute;ation d'un sous-menu lors du d&eacute;placement d'une commande de menu
1 Placez le point d'insertion dans un menu (entre une balise menu et la balise /menu correspondante).
2 Ins&eacute;rez une nouvelle balise menu et une balise /menu dans le menu.
3 Ajoutez les nouvelles commandes de menu dans le nouveau sous-menu.
Insertion d'un s&eacute;parateur entre deux commandes de menu
• Ins&eacute;rez une balise separator/ entre les deux balises menuitem.
Suppression d'un s&eacute;parateur existant
• Supprimez la ligne separator/ correspondante.
D&eacute;placement d’un menu
1 Quittez Dreamweaver.
2 Effectuez une copie de sauvegarde du fichier menus.xml.
Derni&egrave;re mise &agrave; jour le 22/6/2011
157
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
3 Ouvrez le fichier menus.xml dans un &eacute;diteur de texte comme BBEdit, HomeSite ou Wordpad. Ne l'ouvrez pas dans
Dreamweaver.
4 Coupez un menu ainsi que son contenu, depuis la balise d'ouverture menu jusqu'&agrave; la balise de fermeture /menu.
5 Placez le point d'insertion au nouvel emplacement du menu. Cet emplacement doit se situer entre une balise
menubar et la balise /menubar correspondante.
6 Copiez le menu &agrave; son nouvel emplacement.
Modification du nom d'un menu ou d'une commande de menu
Pour modifier le nom d'un menu ou d'une commande de menu, il suffit de modifier le fichier menus.xml.
1 Quittez Dreamweaver.
2 Effectuez une copie de sauvegarde du fichier menus.xml.
3 Ouvrez le fichier menus.xml dans un &eacute;diteur de texte comme HomeSite, BBEdit ou Wordpad. Ne l'ouvrez pas dans
Dreamweaver.
4 Si vous modifiez le nom d'une commande de menu, localisez la balise menuitem ad&eacute;quate, puis modifiez son
attribut name. Si vous modifiez le nom d'un menu, localisez la balise menu ad&eacute;quate, puis modifiez son attributname.
Dans tous les cas, ne modifiez pas l'attribut id.
5 Enregistrez, puis fermez le fichier menus.xml. Relancez Dreamweaver afin que les modifications soient prises en
compte.
Modification des raccourcis clavier
Si les raccourcis clavier par d&eacute;faut ne vous conviennent pas, vous pouvez les modifier, les supprimer ou en cr&eacute;er de
nouveaux. Pour ce faire, la solution la plus simple est d'utiliser l'Editeur de raccourcis clavier. Pour plus d'informations,
voir l'aide de Dreamweaver. Il est &eacute;galement possible de modifier les raccourcis clavier directement dans le fichier
menus.xml, mais les risques d'erreur sont plus &eacute;lev&eacute;s que si vous utilisez l'Editeur de raccourcis clavier.
1 Quittez Dreamweaver.
2 Effectuez une copie de sauvegarde du fichier menus.xml.
3 Ouvrez le fichier menus.xml dans un &eacute;diteur de texte comme BBEdit, HomeSite ou Wordpad. Ne l'ouvrez pas dans
Dreamweaver.
4 Consultez le tableau des raccourcis clavier (disponible &agrave; partir du centre de support de Dreamweaver sur
http://www.adobe.com/go/dreamweaver_support_fr) et choisissez un raccourci non utilis&eacute; ou que vous souhaitez
r&eacute;assigner.
Si vous r&eacute;assignez un raccourci clavier, reportez les modifications sur une copie imprim&eacute;e de la matrice pour vous
y r&eacute;f&eacute;rer ult&eacute;rieurement.
5 Lorsque vous r&eacute;assignez un raccourci clavier, localisez la commande de menu &agrave; laquelle il renvoie, puis supprimez
l'attribut key=&quot;shortcut&quot; de cette commande de menu.
6 Localisez la commande de menu &agrave; laquelle vous souhaitez assigner ou r&eacute;assigner le raccourci clavier.
7 Si un raccourci clavier est d&eacute;j&agrave; assign&eacute; &agrave; cette commande de menu, localisez l'attribut key dans la ligne. Si aucun
raccourci ne lui a &eacute;t&eacute; assign&eacute;, ajoutez l'attribut key=&quot;&quot; parmi les autres attributs au sein de la balise menuitem.
8 Entre les guillemets (&quot;) de l'attribut key, saisissez le nouveau raccourci clavier.
Si vous saisissez une combinaison de touches, s&eacute;parez ces derni&egrave;res par un signe Plus (+). Pour plus d'informations
sur les modificateurs, voir la description de la balise menuitem dans &laquo; &lt;menuitem&gt; &raquo; &agrave; la page 150.
Derni&egrave;re mise &agrave; jour le 22/6/2011
158
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Si le raccourci clavier est d&eacute;j&agrave; assign&eacute; &agrave; une autre commande de menu et que vous n'avez pas supprim&eacute; cette
assignation, le raccourci ne s'applique qu'&agrave; la premi&egrave;re commande &agrave; laquelle il est associ&eacute; dans le fichier menus.xml.
Remarque : Vous pouvez utiliser un m&ecirc;me raccourci clavier pour une commande de menu Windows et Macintosh.
9 Saisissez le nouveau raccourci &agrave; l'emplacement ad&eacute;quat de la matrice des raccourcis clavier.
Menus d&eacute;roulants et menus contextuels
Dreamweaver comporte des menus d&eacute;roulants ou contextuels dans un grand nombre de panneaux et de bo&icirc;tes de
dialogue. Certains menus contextuels sont d&eacute;finis dans le fichier menus.xml. Les autres sont d&eacute;finis dans divers fichiers
XML. Il vous est possible de cr&eacute;er, supprimer ou modifier des &eacute;l&eacute;ments de ces menus. Cependant, en r&egrave;gle g&eacute;n&eacute;rale, il
est pr&eacute;f&eacute;rable de cr&eacute;er une extension afin d'effectuer ces changements.
Les menus d&eacute;roulants et contextuels de Dreamweaver r&eacute;pertori&eacute;s ci-dessous sont d&eacute;finis dans des fichiers XML au
moyen de balises identiques &agrave; celles du fichier menus.xml :
• Sources de donn&eacute;es (menu d&eacute;roulant Plus (+) du panneau Liaisons) : d&eacute;finies dans les fichiers DataSources.xml
situ&eacute;s dans les sous-dossiers du dossier DataSources.
• Comportements de serveur (menu d&eacute;roulant Plus (+) du panneau Comportements de serveur) : d&eacute;finis dans les
fichiers ServerBehaviors.xml situ&eacute;s dans les sous-dossiers du dossier ServerBehaviors.
• Formats de serveur (menu d&eacute;roulant Plus (+) de la bo&icirc;te de dialogue Modifier la liste de formats) : d&eacute;finis dans les
fichiers ServerFormats.xml situ&eacute;s dans les sous-dossiers du dossier ServerFormats.
• Les &eacute;l&eacute;ments du menu d&eacute;roulant formats qui permettent une liaison dans le panneau Liaisons sont d&eacute;finis dans les
fichiers Formats.xml situ&eacute;s dans les sous-dossiers du dossier ServerFormats. Vous pouvez ajouter des entr&eacute;es &agrave; ce
menu &agrave; partir de Dreamweaver via la bo&icirc;te de dialogue d'ajout de format.
• Les commandes de menu de la bo&icirc;te de dialogue Editeur de la biblioth&egrave;que de balises sont d&eacute;finies dans le fichier
TagLibraries/TagImporters/TagImporters.xml.
• Les commandes de menu des param&egrave;tres de la bo&icirc;te de dialogue de g&eacute;n&eacute;ration de comportement, elle-m&ecirc;me
comprise dans le Cr&eacute;ateur de comportements de serveur, sont d&eacute;finies dans le fichier Shared/Controls/String
Menu/Controls.xml.
• Les &eacute;l&eacute;ments des menus contextuels associ&eacute;s aux composants ColdFusion sont d&eacute;finis dans
Components/ColdFusion/CFCs/CFCsMenus.xml.
• Les &eacute;l&eacute;ments des menus contextuels associ&eacute;s aux sources de donn&eacute;es ColdFusion sont d&eacute;finis dans
Components/ColdFusion/DataSources/DataSourcesMenus.xml.
• Les commandes des menus contextuels associ&eacute;es aux divers composants de serveur sont d&eacute;finies dans des fichiers
XML situ&eacute;s dans les sous-dossiers du dossier Components.
Commandes de menu
Les commandes de menu rendent les menus plus souples et plus dynamiques. Elles permettent d'ex&eacute;cuter
pratiquement n'importe quel type de modification dans le document actif, dans d'autres documents ouverts ou dans
tout document HTML situ&eacute; sur un disque local.
Derni&egrave;re mise &agrave; jour le 22/6/2011
159
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Les commandes de menu sont des fichiers HTML r&eacute;f&eacute;renc&eacute;s dans l'attribut file d'une balise menuitem du fichier
menus.xml. La section body d'un fichier de commandes de menu peut contenir un formulaire HTML destin&eacute; &agrave;
recevoir les options de la commande, par exemple la fa&ccedil;on de trier un tableau et selon quelle colonne. La section head
d'un fichier de commandes de menu contient des fonctions JavaScript. Ces fonctions traitent la saisie du formulaire &agrave;
partir de la section body et contr&ocirc;lent les modifications apport&eacute;es au document de l'utilisateur.
Les commandes de menu sont stock&eacute;es dans le dossier Configuration/Menus du dossier de l'application Dreamweaver.
Remarque : Sous Mac OS X 10.3, les commandes sont stock&eacute;es dans utilisateur/Library/Application
Support/Adobe/Dreamweaver 9/Commands/nomcommande.html.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er une commande de menu.
Chemin
Fichier
Description
Configuration/Menus/
menus.xml
Contient une liste structur&eacute;e des barres de menus, menus,
commandes de menu, s&eacute;parateurs, listes de raccourcis et
raccourcis clavier. Modifiez ce fichier pour ajouter de
nouveaux menus et commandes de menu.
Configuration/Menus/
nom_commande.htm
Contient les fonctions requises par la commande de menu.
Remarque : Si vous ajoutez des commandes de menu personnalis&eacute;es dans Dreamweaver, faites-le au plus haut niveau du
dossier Menus ou cr&eacute;ez un sous-dossier. Le dossier MM est r&eacute;serv&eacute; aux commandes de menu fournies avec Dreamweaver.
Modification du menu Commandes
Vous pouvez ajouter certains types de commandes au menu Commandes et les renommer sans avoir &agrave; modifier le
fichier menus.xml. Pour plus d'informations sur menus.xml, voir &laquo; Modification des menus et des commandes de
menu &raquo; &agrave; la page 156.
Remarque : Le mot &laquo; commande &raquo; a deux significations distinctes dans Dreamweaver. Au sens strict du terme, une
commande est un type d'extension particulier. Cependant, dans certains contextes, le terme &laquo; commande &raquo; correspond &agrave;
&eacute;l&eacute;ment de menu, c'est-&agrave;-dire tout &eacute;l&eacute;ment apparaissant dans un menu Dreamweaver, quelle que soit sa fonction ou son
fonctionnement.
Pour cr&eacute;er de nouvelles commandes plac&eacute;es automatiquement dans le menu Commandes, utilisez le panneau
Historique. Vous pouvez &eacute;galement utiliser Extension Manager pour installer de nouvelles extensions, notamment des
commandes. Pour plus d'informations, voir l'aide de Dreamweaver.
Pour r&eacute;organiser les &eacute;l&eacute;ments du menu Commandes ou pour d&eacute;placer des &eacute;l&eacute;ments d'un menu &agrave; un autre, il est
n&eacute;cessaire de modifier le fichier menus.xml.
Modification du nom d'une commande que vous avez cr&eacute;&eacute;e
1 Choisissez Commandes &gt; Modifier la liste des commandes.
Une bo&icirc;te de dialogue s'affiche, r&eacute;pertoriant toutes les commandes que vous pouvez renommer. Les commandes se
trouvant dans le menu Commandes par d&eacute;faut n'apparaissent pas dans cette liste et ne peuvent pas &ecirc;tre supprim&eacute;es
de cette mani&egrave;re.
2 S&eacute;lectionnez la commande que vous souhaitez renommer.
3 Indiquez son nouveau nom.
4 Cliquez sur Fermer.
Le nouveau nom appara&icirc;t dans le menu Commandes.
Derni&egrave;re mise &agrave; jour le 22/6/2011
160
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Suppression d'une commande que vous avez cr&eacute;&eacute;e
1 Choisissez Commandes &gt; Modifier la liste des commandes.
Une bo&icirc;te de dialogue s'affiche, r&eacute;pertoriant toutes les commandes que vous pouvez supprimer. Les commandes se
trouvant dans le menu Commandes par d&eacute;faut n'apparaissent pas dans cette liste et ne peuvent pas &ecirc;tre supprim&eacute;es
de cette mani&egrave;re.
2 S&eacute;lectionnez la commande que vous souhaitez supprimer.
3 Cliquez sur Supprimer, puis confirmez que vous voulez supprimer la commande.
La commande est supprim&eacute;e. La suppression d'une commande n'implique pas seulement la suppression de la
commande du menu : le fichier contenant le code de la commande est &eacute;galement supprim&eacute;. Cette proc&eacute;dure de
suppression doit donc &ecirc;tre utilis&eacute;e avec discernement. Si vous souhaitez supprimer une commande sans supprimer
le fichier, localisez le fichier sous Configuration/Commands, puis placez-le dans un autre dossier.
4 Cliquez sur Fermer.
Fonctionnement des commandes de menu
Lorsque l'utilisateur clique sur un menu avec un &eacute;l&eacute;ment contenant une commande de menu, les &eacute;v&eacute;nements suivants
se produisent :
1 Si l'une des balises menuitem du menu contient l'attribut dynamic, Dreamweaver appelle la fonction
getDynamicContent() dans le fichier de commandes de menu associ&eacute; afin de compl&eacute;ter le menu.
2 Dreamweaver appelle la fonction canAcceptCommand() dans chaque fichier de commandes de menu r&eacute;f&eacute;renc&eacute;
dans le menu pour v&eacute;rifier si la commande correspond &agrave; l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
• Si la fonction canAcceptCommand() renvoie la valeur false, l'&eacute;l&eacute;ment de menu appara&icirc;t gris&eacute;.
• Si la fonction canAcceptCommand() renvoie la valeur true ou si elle n'est pas d&eacute;finie, Dreamweaver appelle la
fonction isCommandChecked() pour d&eacute;terminer si l'&eacute;l&eacute;ment de menu doit &ecirc;tre coch&eacute;. Si la fonction
isCommandChecked() n'est pas d&eacute;finie, aucune coche n'appara&icirc;t.
3 Dreamweaver appelle la fonction setMenuText() pour d&eacute;terminer le texte devant s'afficher dans le menu.
Si la fonction setMenuText() n'est pas d&eacute;finie, Dreamweaver utilise le texte sp&eacute;cifi&eacute; dans la balise menuitem.
4 L'utilisateur s&eacute;lectionne un &eacute;l&eacute;ment dans le menu.
5 Dreamweaver appelle la fonction receiveArguments(), si elle est d&eacute;finie, dans le fichier de commandes de menu
s&eacute;lectionn&eacute; afin de permettre &agrave; la commande de traiter tous les arguments transmis depuis l'&eacute;l&eacute;ment de menu.
Remarque : S'il s'agit d'un &eacute;l&eacute;ment de menu dynamique, l'ID correspondant est le seul argument transmis.
6 Dreamweaver appelle la fonction commandButtons(), si elle est d&eacute;finie, pour identifier les boutons qui figurent
dans la partie droite de la bo&icirc;te de dialogue Options et le code qui doit &ecirc;tre ex&eacute;cut&eacute; lorsque l'utilisateur clique sur
ces boutons.
7 Dreamweaver recherche une balise form dans le fichier de commandes de menu.
• S'il existe un formulaire, Dreamweaver appelle la fonction windowDimensions() pour d&eacute;terminer la taille de la
bo&icirc;te de dialogue Options qui contient les &eacute;l&eacute;ments BODY du fichier.
• Si la fonction windowDimensions() n'est pas d&eacute;finie, Dreamweaver redimensionne automatiquement la bo&icirc;te
de dialogue.
8 Si la balise body du fichier de commandes de menu contient le gestionnaire onLoad, Dreamweaver ex&eacute;cute le code
associ&eacute; &agrave; ce gestionnaire (qu'une bo&icirc;te de dialogue soit affich&eacute;e ou non). Si aucune bo&icirc;te de dialogue ne s'affiche, les
&eacute;tapes restantes ne sont pas ex&eacute;cut&eacute;es.
Derni&egrave;re mise &agrave; jour le 22/6/2011
161
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
9 L'utilisateur s&eacute;lectionne des options dans la bo&icirc;te de dialogue. Dreamweaver ex&eacute;cute les gestionnaires d'&eacute;v&eacute;nements
associ&eacute;s aux champs du formulaire au fur et &agrave; mesure que l'utilisateur les rencontre.
10 L'utilisateur clique sur l'un des boutons d&eacute;finis par la fonction commandButtons().
11 Dreamweaver ex&eacute;cute le code associ&eacute; au bouton sur lequel l'utilisateur a cliqu&eacute;.
12 La bo&icirc;te de dialogue reste affich&eacute;e jusqu'&agrave; ce que l'un des scripts du fichier de commandes de menu appelle la
fonction window.close().
Exemple de commande de menu simple
Cet exemple de commande de menu simple explique le fonctionnement des commandes de menu Annuler et R&eacute;tablir.
La commande de menu Annuler permet &agrave; l'utilisateur d'annuler sa derni&egrave;re modification, la commande R&eacute;tablir
permet de r&eacute;tablir une modification pr&eacute;c&eacute;demment annul&eacute;e au moyen de Annuler.
Pour mettre en oeuvre cet exemple, cr&eacute;ez les commandes de menu, r&eacute;digez le code JavaScript et placez le fichier de
commandes dans le dossier Menu.
Cr&eacute;ation d'une commande de menu
Pour cr&eacute;er un menu nomm&eacute; MyMenu qui contient les commandes Undo (Annuler ) et Redo (R&eacute;tablir), ajoutez les
balises HTML de menu suivantes. Ajoutez ces balises apr&egrave;s la derni&egrave;re balise &lt;/menu&gt; de fermeture dans menus.xml.
&lt;menu name=&quot;MyMenu&quot; id=&quot;MyMenu_Edit&quot;&gt;
&lt;menuitem name=&quot;MyUndo&quot; key=&quot;Cmd+Z&quot; file=&quot;Menus/MyMenu.htm&quot; arguments=&quot;'undo'&quot;
id=&quot;MyMenu_Edit_Undo&quot; /&gt;
&lt;menuitem name=&quot;MyRedo&quot; key=&quot;Cmd+Y&quot; file=&quot;Menus/MyMenu.htm&quot; arguments=&quot;'redo'&quot;
id=&quot;MyMenu_Edit_Redo&quot; /&gt;
&lt;/menu&gt;
L'attribut key d&eacute;finit les raccourcis clavier que l'utilisateur peut utiliser pour appeler la commande de menu. L'attribut
file indique le nom du fichier de commandes ex&eacute;cut&eacute; par Dreamweaver lorsque ce dernier appelle la commande. La
valeur de l'attribut arguments d&eacute;finit les arguments transmis par Dreamweaver lorsque ce dernier appelle la fonction
receiveArguments().
La figure suivante repr&eacute;sente ces commandes de menu :
Code JavaScript pour le menu
Lorsque l'utilisateur s&eacute;lectionne Undo ou Redo dans le menu MyMenu, Dreamweaver appelle le fichier de commandes
MyMenu.htm sp&eacute;cifi&eacute; par l'attribut file de la balise menuitem. Cr&eacute;ez le fichier de commandes MonMenu.htm dans
le dossier Configuration/Menus de Dreamweaver et ajoutez les trois fonctions API des commandes de menu
(canAcceptCommand(), receiveArguments() et setMenuText()) afin de mettre en œuvre la logique associ&eacute;e aux
&eacute;l&eacute;ments de menu Annuler et R&eacute;tablir. Les sections ci-dessous d&eacute;crivent ces fonctions.
Derni&egrave;re mise &agrave; jour le 22/6/2011
162
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
canAcceptCommand()
Dreamweaver appelle la fonction canAcceptCommand() pour chaque &eacute;l&eacute;ment du menu MyMenu afin de d&eacute;terminer
s'il doit &ecirc;tre activ&eacute; ou d&eacute;sactiv&eacute;. Dans le fichier MyMenu.htm, la fonction canAcceptCommand() v&eacute;rifie la valeur de
l'argument arguments[0] afin de d&eacute;terminer si Dreamweaver traite un &eacute;l&eacute;ment de menu Redo ou Undo. Si l'argument
&quot;undo&quot; est d&eacute;fini, la fonction canAcceptCommand() appelle la fonction d'activateur dw.canUndo() et renvoie la
valeur renvoy&eacute;e (true ou false). De m&ecirc;me, si l'argument &quot;redo&quot; est d&eacute;fini, la fonction canAcceptCommand() appelle
la fonction d'activateur dw.canRedo() et renvoie sa valeur &agrave; Dreamweaver. Si la fonction canAcceptCommand()
renvoie la valeur false, Dreamweaver grise l'&eacute;l&eacute;ment de menu pour lequel la fonction a &eacute;t&eacute; appel&eacute;e. L'exemple suivant
d&eacute;crit le code de la fonction canAcceptCommand() :
function canAcceptCommand()
{
var selarray;
if (arguments.length != 1) return false;
var bResult = false;
var whatToDo = arguments[0];
if (whatToDo == &quot;undo&quot;)
{
bResult = dw.canUndo();
}
else if (whatToDo == &quot;redo&quot;)
{
bResult = dw.canRedo();
}
return bResult;
}
receiveArguments()
Dreamweaver appelle la fonction receiveArguments() pour traiter les arguments d&eacute;finis dans la balise menuitem.
Pour les &eacute;l&eacute;ments de menu Undo et Redo, la fonction receiveArguments() appelle soit la fonction dw.undo(), soit
la fonction dw.redo(), selon la valeur de l'argument arguments[0] (&quot;undo&quot; ou &quot;redo&quot; respectivement). La fonction
dw.undo() annule la derni&egrave;re action effectu&eacute;e par l'utilisateur dans la fen&ecirc;tre de document, la bo&icirc;te de dialogue ou le
panneau actif. La fonction dw.redo() r&eacute;tablit la derni&egrave;re op&eacute;ration annul&eacute;e.
Le code de la fonction receiveArguments() ressemble &agrave; ceci :
function receiveArguments()
{
if (arguments.length != 1) return;
var whatToDo = arguments[0];
if (whatToDo == &quot;undo&quot;)
{
dw.undo();
}
else if (whatToDo == &quot;redo&quot;)
{
dw.redo();
}
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
163
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Dans cette commande, la fonction receiveArguments() traite les arguments et ex&eacute;cute la commande. Des
commandes de menu plus complexes peuvent appeler des fonctions diff&eacute;rentes pour ex&eacute;cuter la commande. Par
exemple, le code suivant v&eacute;rifie si le premier argument est &quot;foo&quot; ; si c'est le cas, il appelle la fonction
doOperationX() et lui transmet le deuxi&egrave;me argument. Si le premier argument est &quot;bar&quot;, le code appelle la fonction
doOperationY() et lui transmet le deuxi&egrave;me argument. La fonction doOperationX() ou doOperationY() est
charg&eacute;e de l'ex&eacute;cution de la commande.
function receiveArguments(){
if (arguments.length != 2) return;
var whatToDo = arguments[0];
if (whatToDo == &quot;foo&quot;){
doOperationX(arguments[1]);
}else if (whatToDo == &quot;bar&quot;){
doOperationX(arguments[1]);
}
}
setMenuText()
Dreamweaver appelle la fonction setMenuText() pour d&eacute;terminer le texte de l'&eacute;l&eacute;ment de menu. Si la fonction
setMenuText() n'est pas d&eacute;finie, Dreamweaver utilise le texte sp&eacute;cifi&eacute; dans l'attribut name de la balise menuitem.
La fonction setMenuText() v&eacute;rifie la valeur de l'argument transmis par Dreamweaver (arguments[0]). Si la valeur
de cet argument est &quot;undo&quot;, Dreamweaver appelle la fonction dw.getUndoText() ; si sa valeur est &quot;redo&quot;,
Dreamweaver appelle la fonction dw.getRedoText(). La fonction dw.getUndoText() renvoie le texte sp&eacute;cifiant
l'op&eacute;ration que Dreamweaver doit annuler. Par exemple, si l'utilisateur utilise plusieurs fois la commande Redo, la
fonction dw.getUndoText() peut renvoyer le texte de menu &laquo; Undo Edit source &raquo;. De m&ecirc;me, la fonction
dw.getRedoText() renvoie le texte sp&eacute;cifiant l'op&eacute;ration que Dreamweaver doit r&eacute;tablir. Si l'utilisateur utilise
plusieurs fois la commande Undo, la fonction dw.RedoText() peut renvoyer le texte de menu &laquo; Redo Edit Source &raquo;.
Le code de la fonction setMenuText() ressemble &agrave; ceci :
function setMenuText()
{
if (arguments.length != 1) return &quot;&quot;;
var whatToDo = arguments[0];
if (whatToDo == &quot;undo&quot;)
return dw.getUndoText();
else if (whatToDo == &quot;redo&quot;)
return dw.getRedoText();
else return &quot;&quot;;
}
Enregistrement du fichier de commandes dans le dossier Menu
Pour mettre en œuvre les &eacute;l&eacute;ments de menu Annuler et R&eacute;tablir, vous devez enregistrer le fichier MyMenu.htm dans le
dossier Configuration/Menus de Dreamweaver ou dans un sous-dossier cr&eacute;&eacute; &agrave; cet effet. L'emplacement du fichier doit
correspondre &agrave; celui que vous avez sp&eacute;cifi&eacute; dans la balise menuitem. Pour que Dreamweaver puisse l'exploiter, vous
devez red&eacute;marrer Dreamweaver ou recharger les extensions. Pour plus d'informations sur le rechargement des
extensions, voir &laquo; Rechargement d'extensions &raquo; &agrave; la page 83.
Derni&egrave;re mise &agrave; jour le 22/6/2011
164
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Pour ex&eacute;cuter les commandes de menu, s&eacute;lectionnez l'&eacute;l&eacute;ment de menu lorsqu'il est activ&eacute;. Dreamweaver appelle alors
les fonctions dans le fichier de commandes, comme indiqu&eacute; dans la section &laquo; Fonctionnement des commandes de
menu &raquo; &agrave; la page 160.
Exemple de menu dynamique
Cet exemple d&eacute;crit la mise en œuvre du sous-menu Aper&ccedil;u dans le navigateur de Dreamweaver qui permet d'afficher
la liste des navigateurs disponibles. Cet exemple d&eacute;crit &eacute;galement l'ouverture du fichier en cours (ou des fichiers
s&eacute;lectionn&eacute;s dans le panneau Site) dans le navigateur sp&eacute;cifi&eacute; par l'utilisateur. En mettant ce menu dynamique en
oeuvre, vous cr&eacute;ez les &eacute;l&eacute;ments du menu dynamique et vous r&eacute;digez le code JavaScript.
Cr&eacute;ation d'&eacute;l&eacute;ments de menu dynamique
Les balises de menu du fichier menus.xml pr&eacute;sent&eacute;es ci-dessous d&eacute;finissent le sous-menu Aper&ccedil;u dans le navigateur
du menu Fichier :
&lt;menu name=&quot;_Preview in Browser&quot; id=&quot;DWMenu_File_PIB&quot;&gt;
&lt;menuitem dynamic name=&quot;No Browsers Selected&quot;
file=&quot;Menus/MM/PIB_Dynamic.htm&quot; arguments=&quot;'No Browsers'&quot;
id=&quot;DWMenu_File_PIB_Default&quot; /&gt;
&lt;separator /&gt;
&lt;menuitem name=&quot;_Edit Browser List...&quot; enabled=&quot;true&quot;
command=&quot;dw.editBrowserList()&quot; id=&quot;DWMenu_File_PIB_EditBrowserList&quot; /&gt;
&lt;/menu&gt;
La premi&egrave;re balise menuitem d&eacute;finit l'&eacute;l&eacute;ment de menu par d&eacute;faut Pas de navigateur s&eacute;lectionn&eacute;. Cet &eacute;l&eacute;ment appara&icirc;t
dans le sous-menu si vous n'avez sp&eacute;cifi&eacute; aucun navigateur pour l'&eacute;l&eacute;ment Aper&ccedil;u dans le navigateur dans la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences. Si vous avez sp&eacute;cifi&eacute; Microsoft Internet Explorer, le sous-menu est similaire &agrave; l'illustration cidessous :
L'attribut name du premier &eacute;l&eacute;ment de menu indique le fichier de commandes PIB_Dynamic.htm. Ce fichier contient
les lignes suivantes :
&lt;SCRIPT LANGUAGE=&quot;javascript&quot; SRC=&quot;PIB_Dynamic.js&quot;&gt;&lt;/SCRIPT&gt;
La balise script inclut le code JavaScript du fichier PIB_Dynamic.js, lequel contient le code JavaScript associ&eacute; au sousmenu Aper&ccedil;u dans le navigateur. Il est possible d'enregistrer ce code directement dans le fichier PIB_Dynamic.htm,
mais il est plus utile de l'enregistrer dans un fichier s&eacute;par&eacute;. Ceci permet en effet d'inclure le m&ecirc;me code dans un grand
nombre de commandes.
Code JavaScript pour l'&eacute;l&eacute;ment de menu dynamique
Etant donn&eacute; que la premi&egrave;re balise menuitem contient l'attribut dynamic, Dreamweaver appelle la fonction
getDynamicContent() du fichier PIB_Dynamic.js d&eacute;crite dans l'exemple suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
165
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
function getDynamicContent(itemID)
{
var browsers = null;
var PIB = null;
var i;
var j=0;
browsers = new Array();
PIB = dw.getBrowserList();
for (i=0; i&lt;PIB.length; i=i+2)
{
browsers[j] = new String(PIB[i]);
if (dw.getPrimaryBrowser() == PIB[i+1])
browsers[j] += &quot;\tF12&quot;;
else if (dw.getSecondaryBrowser() == PIB[i+1])
browsers[j] += &quot;\tCmd+F12&quot;;
browsers[j] += &quot;;id='&quot;+escQuotes(PIB[i])+&quot;'&quot;;
if (itemID == &quot;DWPopup_PIB_Default&quot;)
browsers[j] = MENU_strPreviewIn + browsers[j];
j = j+1;
}
return browsers;
}
La fonction getDynamicContent() appelle la fonction dw.getBrowserList() afin d'obtenir un tableau des noms de
navigateurs indiqu&eacute;s dans la section Aper&ccedil;u dans le navigateur de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Ce tableau contient
les noms de tous les navigateurs et les chemins d'acc&egrave;s aux fichiers ex&eacute;cutables. Ensuite, pour chaque &eacute;l&eacute;ment du
tableau (i=0; i&lt;PIB.length; i=i+2), la fonction getDynamicContents() place le nom du navigateur (PIB[i])
dans un second tableau appel&eacute; browsers (browsers[j] = new String(PIB[i]);). Si un navigateur a &eacute;t&eacute; d&eacute;sign&eacute;
comme navigateur principal ou secondaire, la fonction ajoute les noms des raccourcis clavier qui permettent de
l'appeler. La cha&icirc;ne &quot;;id=&quot; est ensuite ajout&eacute;e, suivie du nom du navigateur entre apostrophes (exemple:
;id='iexplore'). Si l'argument itemID est &quot;DWPopup_PIB_Default&quot;, la fonction fait pr&eacute;c&eacute;der l'&eacute;l&eacute;ment du tableau
de la cha&icirc;ne Preview in. Une fois qu'une entr&eacute;e a &eacute;t&eacute; cr&eacute;&eacute;e pour chaque navigateur r&eacute;pertori&eacute; dans la bo&icirc;te de
dialogue Pr&eacute;f&eacute;rences, la fonction getDynamicContent() renvoie les navigateurs du tableau vers Dreamweaver. Si
vous n'avez s&eacute;lectionn&eacute; aucun navigateur, la fonction renvoie la valeur null et Dreamweaver affiche Pas de navigateur
s&eacute;lectionn&eacute; dans le menu.
canAcceptCommand()
Dreamweaver appelle ensuite la fonction canAcceptCommand() pour chaque balise menuitem faisant r&eacute;f&eacute;rence &agrave; un
fichier de commandes avec l'attribut file. Si la fonction canAcceptCommand() renvoie la valeur false, l'&eacute;l&eacute;ment de
menu s'affiche en gris&eacute;. Si la fonction canAcceptCommand() renvoie la valeur true, Dreamweaver active l'&eacute;l&eacute;ment de
menu. Si la fonction renvoie true ou si elle n'est pas d&eacute;finie, Dreamweaver appelle la fonction isCommandChecked()
pour d&eacute;terminer si l'&eacute;l&eacute;ment de menu doit &ecirc;tre coch&eacute;. Si la fonction isCommandChecked() n'est pas d&eacute;finie, aucune
coche n'appara&icirc;t.
Derni&egrave;re mise &agrave; jour le 22/6/2011
166
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
function canAcceptCommand()
{
var PIB = dw.getBrowserList();
if (arguments[0] == 'primary' || arguments[0] == 'secondary')
return havePreviewTarget();
return havePreviewTarget() &amp;&amp; (PIB.length &gt; 0);
}
La fonction canAcceptCommand() du fichier PIB_Dynamic.js r&eacute;cup&egrave;re &agrave; nouveau la liste des navigateurs cr&eacute;&eacute;e dans
la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Elle v&eacute;rifie ensuite si le premier argument (arguments[0]) est principal ou
secondaire. Si tel est le cas, elle renvoie la valeur renvoy&eacute;e par la fonction havePreviewTarget(). Dans le cas
contraire, elle effectue des tests afin de v&eacute;rifier l'appel de la fonction havePreviewTarget()et de voir si des
navigateurs ont &eacute;t&eacute; sp&eacute;cifi&eacute;s ou non (PIB.length &gt; 0). Si les deux tests sont vrais (true), la fonction renvoie la valeur
true. Si au moins un test est faux (false), la fonction renvoie la valeur false.
havePreviewTarget()
La fonction havePreviewTarget() est d&eacute;finie par l'utilisateur et renvoie la valeur true si Dreamweaver dispose d'une
cible valide &agrave; afficher dans le navigateur. Ce peut &ecirc;tre un document ou un groupe de fichiers s&eacute;lectionn&eacute; dans le
panneau Site. La fonction havePreviewTarget() ressemble &agrave; l'exemple ci-dessous :
function havePreviewTarget()
{
var bHavePreviewTarget = false;
if (dw.getFocus(true) == 'site')
{
if (site.getFocus() == 'remote')
{
bHavePreviewTarget = site.getRemoteSelection().length &gt; 0 &amp;&amp;
site.canBrowseDocument();
}
else if (site.getFocus() != 'none')
{
var selFiles = site.getSelection();
if (selFiles.length &gt; 0)
{
var i;
bHavePreviewTarget = true;
for (i = 0; i &lt; selFiles.length; i++)
{
var selFile = selFiles[i];
// For server connections, the files will
// already be remote URLs.
if (selFile.indexOf(&quot;://&quot;) == (-1))
{
var urlPrefix = &quot;file:///&quot;;
var strTemp = selFile.substr(urlPrefix.length);
if (selFile.indexOf(urlPrefix) == -1)
Derni&egrave;re mise &agrave; jour le 22/6/2011
167
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
bHavePreviewTarget = false;
else if (strTemp.indexOf(&quot;/&quot;) == -1)
bHavePreviewTarget = false;
else if (!DWfile.exists(selFile))
bHavePreviewTarget = false;
else if (DWfile.getAttributes(selFile).indexOf(&quot;D&quot;) != -1)
bHavePreviewTarget = false;
}
else
{
bHavePreviewTarget = true;
}
}
}
}
}
else if (dw.getFocus() == 'document' ||
dw.getFocus() == 'textView' || dw.getFocus(&quot;true&quot;) == 'html' )
{
var dom = dw.getDocumentDOM('document');
if (dom != null)
{
var parseMode = dom.getParseMode();
if (parseMode == 'html' || parseMode == 'xml')
bHavePreviewTarget = true;
}
}
return bHavePreviewTarget;
}
La fonction havePreviewTarget() r&egrave;gle la valeur bHavePreviewTarget sur false comme valeur renvoy&eacute;e par
d&eacute;faut. Cette fonction effectue deux tests de base en appelant la fonction dw.getFocus() pour d&eacute;terminer quelle
partie de l'application est active. Lors du premier test, elle v&eacute;rifie que le panneau Site est actif (if (dw.getFocus(true) ==
'site')). Si ce n'est pas le cas, elle v&eacute;rifie, lors du second test, si un document (dw.getFocus() == 'document'), le mode
Texte (dw.getFocus() == 'textView') ou l'inspecteur de code (dw.getFocus(&quot;true&quot;) == 'html') est actif. Si aucun test n'est
vrai (true), la fonction renvoie la valeur false.
Si le panneau Site est actif, la fonction v&eacute;rifie si l'affichage est d&eacute;fini sur distant. Si c'est le cas, la fonction d&eacute;finit
bHavePreviewTarget sur true, s'il existe des fichiers distants (site.getRemoteSelection().length &gt; 0) et que vous
pouvez les ouvrir dans un navigateur (site.canBrowseDocument()). Si l'affichage n'est pas distant, et s'il n'est pas d&eacute;fini
sur Aucun, la fonction obtient une liste des fichiers s&eacute;lectionn&eacute;s (var selFiles = site.getSelection();) sous la forme d'URL
file:///.
La fonction effectue un test sur chaque &eacute;l&eacute;ment de la liste afin de v&eacute;rifier si la cha&icirc;ne de caract&egrave;res :// est pr&eacute;sente. Si
ce n'est pas le cas, le code effectue une s&eacute;rie de tests sur l'&eacute;l&eacute;ment de la liste. Si l'&eacute;l&eacute;ment ne se pr&eacute;sente pas sous la forme
d'une URL file:/// (if (selFile.indexOf(urlPrefix) == -1)), la valeur renvoy&eacute;e est false. Si le reste de la cha&icirc;ne
apparaissant apr&egrave;s le pr&eacute;fixe file:/// ne contient pas de barre oblique (/) (if (strTemp.indexOf(&quot;/&quot;) == -1)), la valeur
renvoy&eacute;e est d&eacute;finie sur false. Si le fichier n'existe pas (else if (!DWfile.exists(selFile))), la valeur renvoy&eacute;e est d&eacute;finie
sur false. Enfin, la fonction v&eacute;rifie si le fichier sp&eacute;cifi&eacute; est un dossier (else if
(DWfile.getAttributes(selFile).indexOf(&quot;D&quot;) != -1)). Si selfile est un dossier, la fonction renvoie la valeur false.
Autrement, si la cible est un fichier, la fonction d&eacute;finit bHavePreviewTarget sur la valeur true.
Derni&egrave;re mise &agrave; jour le 22/6/2011
168
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Si un document, le mode Texte ou l'inspecteur de code est actif (else if (dw.getFocus() == 'document' ||
dw.getFocus() == 'textView' || dw.getFocus(&quot;true&quot;) == 'html' )), la fonction obtient le DOM et v&eacute;rifie s'il s'agit d'un
document HTML ou XML. Si tel est le cas, la fonction d&eacute;finit bHavePreviewTarget sur true. Enfin, la fonction
renvoie la valeur stock&eacute;e dans bHavePreviewTarget.
receiveArguments()
Dreamweaver appelle la fonction receiveArguments() pour que la commande traite tous les arguments provenant
de l'&eacute;l&eacute;ment de menu. En ce qui concerne le menu Aper&ccedil;u dans le navigateur, la fonction receiveArguments()
appelle le navigateur s&eacute;lectionn&eacute; par l'utilisateur. La fonction receiveArguments() ressemble &agrave; ceci :
function receiveArguments()
{
var whichBrowser = arguments[0];
var theBrowser = null;
var i=0;
var browserList = null;
var result = false;
if (havePreviewTarget())
{
// Code to check if we were called from a shortcut key
if (whichBrowser == 'primary' || whichBrowser == 'secondary')
{
// get the path of the selected browser
if (whichBrowser == 'primary')
{
theBrowser = dw.getPrimaryBrowser();
}
else if (whichBrowser == 'secondary')
{
theBrowser = dw.getSecondaryBrowser();
}
// Match the path with the name of the corresponding browser
// that appears in the menu.
browserList = dw.getBrowserList();
while(i &lt; browserList.length)
{
if (browserList[i+1] == theBrowser)
theBrowser = browserList[i];
i+=2;
}
}
else
theBrowser = whichBrowser;
// Only launch the browser if we have a valid browser selected.
if (theBrowser != &quot;file:///&quot; &amp;&amp; typeof(theBrowser) != &quot;undefined&quot; &amp;&amp;
theBrowser.length &gt; 0)
{
if (dw.getFocus(true) == 'site')
{
// Only get the first item of the selection because
// browseDocument() can't take an array.
//dw.browseDocument(site.getSelection()[0],theBrowser);
site.browseDocument(theBrowser);
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
169
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
else
dw.browseDocument(dw.getDocumentPath('document'),theBrowser);
}
else
{
// Otherwise, F12 or Ctrl+F12 was pressed, ask if the user wants
// to specify a primary or secondary browser now.
if (whichBrowser == 'primary')
{
result = window.confirm(MSG_NoPrimaryBrowserDefined);
}
else if (whichBrowser == 'secondary')
{
result = window.confirm(MSG_NoSecondaryBrowserDefined);
}
// If the user clicked OK, show the prefs dialog with the browser panel.
if (result)
dw.showPreferencesDialog('browsers');
}
}
}
La fonction commence par r&eacute;gler la variable whichBrowser sur la valeur transmise par Dreamweaver, arguments[0].
Outre la d&eacute;finition d'autres valeurs par d&eacute;faut, la fonction r&egrave;gle &eacute;galement le renvoi sur la valeur par d&eacute;faut, false.
Une fois les variables initialis&eacute;es, la fonction receiveArguments() appelle la fonction d&eacute;finie par l'utilisateur
havePreviewTarget() et teste le r&eacute;sultat. Si le r&eacute;sultat du test est vrai (true), la fonction v&eacute;rifie si l'utilisateur a
s&eacute;lectionn&eacute; le navigateur principal ou secondaire. Dans ce cas, la fonction d&eacute;finit la variable theBrowser sur le chemin
du fichier ex&eacute;cutable qui lance le navigateur (dw.getPrimaryBrowser() ou dw.getSecondaryBrowser()). La
fonction effectue ensuite une boucle qui examine la liste des navigateurs renvoy&eacute;e par dw.getBrowsersList(). Si le
chemin vers un navigateur de la liste correspond au chemin vers le navigateur principal ou secondaire, la fonction
d&eacute;finit la variable theBrowser sur la valeur de correspondance dans browserList. La valeur contient le nom du
navigateur et le chemin vers le fichier ex&eacute;cutable qui lance le navigateur. Si havePreviewTarget() renvoie la valeur
false, la fonction d&eacute;finit la variable theBrowser sur la valeur de la variable whichBrowser.
La fonction receiveArguments() teste ensuite la variable theBrowser pour v&eacute;rifier qu'elle ne d&eacute;bute pas par un
chemin, qu'elle n'est pas &quot;non d&eacute;finie&quot; (&quot;undefined&quot;) et que sa taille est sup&eacute;rieure &agrave; 0. Si toutes ces conditions sont
remplies et que le panneau Site est actif, la fonction receiveArguments() appelle la fonction
site.browseDocument() pour qu'elle ouvre dans le navigateur s&eacute;lectionn&eacute; les fichiers s&eacute;lectionn&eacute;s dans le panneau
Site. Si le panneau Site n'est pas actif, la fonction receiveArguments() appelle la fonction dw.browseDocument() et
lui transmet le chemin du document actif et la valeur de la variable theBrowser, qui sp&eacute;cifie le nom du navigateur &agrave;
utiliser pour afficher le document.
Si l'utilisateur a appuy&eacute; sur des touches de raccourci (F12 ou Ctrl+F12) et qu'aucun navigateur principal ou secondaire
n'a &eacute;t&eacute; sp&eacute;cifi&eacute;, une bo&icirc;te de dialogue s'affiche pour l'avertir. Si l'utilisateur clique sur OK, la fonction appelle la fonction
dw.showPreferencesDialog() avec l'argument browsers pour que l'utilisateur puisse sp&eacute;cifier un navigateur &agrave; ce
stade.
Fonctions de l'API des commandes de menu
Les fonctions personnalis&eacute;es de l'API des commandes de menu ne sont pas obligatoires.
Derni&egrave;re mise &agrave; jour le 22/6/2011
170
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
canAcceptCommand()
Description
D&eacute;termine si l'&eacute;l&eacute;ment de menu doit &ecirc;tre actif ou gris&eacute;.
Arguments
{arg1}, {arg2},...{argN}}
S'il s'agit d'une option de menu dynamique, l'ID unique correspondant sp&eacute;cifi&eacute; dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est d&eacute;fini pour une balise menuitem,
la valeur de l'attribut est transmise &agrave; la fonction canAcceptCommand() (et aux fonctions &laquo; isCommandChecked() &raquo; &agrave;
la page 171, &laquo; receiveArguments() &raquo; &agrave; la page 172 et &laquo; setMenuText() &raquo; &agrave; la page 173) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux &eacute;l&eacute;ments de menu appelant la m&ecirc;me commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'&eacute;l&eacute;ment doit &ecirc;tre activ&eacute;, false dans les autres cas.
commandButtons()
Description
D&eacute;finit les boutons figurant dans la partie droite de la bo&icirc;te de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas d&eacute;finie, aucun bouton n'appara&icirc;t et la section body du fichier de
commandes de menu s'&eacute;tend de fa&ccedil;on &agrave; remplir la totalit&eacute; de la bo&icirc;te de dialogue.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver renvoie un tableau contenant un nombre pair d'&eacute;l&eacute;ments. Le premier &eacute;l&eacute;ment est une cha&icirc;ne contenant
le libell&eacute; du premier bouton. Le deuxi&egrave;me &eacute;l&eacute;ment est une cha&icirc;ne de code JavaScript d&eacute;finissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres &eacute;l&eacute;ments d&eacute;finissent les boutons suppl&eacute;mentaires de la
m&ecirc;me mani&egrave;re.
Exemple
Dans l'exemple suivant, la fonction commandButtons() d&eacute;finit les boutons OK, Cancel (Annuler) et Help (Aide).
function commandButtons(){
return new Array(&quot;OK&quot; , &quot;doCommand()&quot; , &quot;Cancel&quot; , &not;
&quot;window.close()&quot; , &quot;Help&quot; , &quot;showHelp()&quot;);
}
getDynamicContent()
Description
Extrait le contenu de la partie dynamique du menu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
171
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Arguments
menuID
L'argument menuID est la valeur de l'attribut id dans la balise menuitem associ&eacute;e &agrave; l'&eacute;l&eacute;ment de menu.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau de cha&icirc;nes, o&ugrave; chaque cha&icirc;ne contient le nom d'un &eacute;l&eacute;ment de menu et son ID unique,
s&eacute;par&eacute;s par un point-virgule. Si cette fonction renvoie la valeur null, aucune modification n'est apport&eacute;e au menu.
Exemple
Dans l'exemple suivant, la fonction getDynamicContent() renvoie un tableau de quatre &eacute;l&eacute;ments de menu (My Menu
Item 1, My Menu Item 2, My Menu Item 3 et My Menu Item 4) :
function getDynamicContent(){
var stringArray= new Array();
var i=0;
var numItems = 4;
for (i=0; i&lt;numItems;i++)
stringArray[i] = new String(&quot;My Menu Item &quot; + i + &quot;;&not;
id='My-MenuItem&quot; + i + &quot;'&quot;);
return stringArray;
}
isCommandChecked()
Description
D&eacute;termine si une coche doit appara&icirc;tre &agrave; c&ocirc;t&eacute; de l'&eacute;l&eacute;ment de menu.
Arguments
{arg1}, {arg2},...{argN}
S'il s'agit d'une option de menu dynamique, l'ID unique correspondant sp&eacute;cifi&eacute; dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est d&eacute;fini pour une balise menuitem,
la valeur de l'attribut est transmise &agrave; la fonction isCommandChecked() (et aux fonctions &laquo; canAcceptCommand() &raquo; &agrave;
la page 170, &laquo; receiveArguments() &raquo; &agrave; la page 172 et &laquo; setMenuText() &raquo; &agrave; la page 173) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux &eacute;l&eacute;ments de menu appelant la m&ecirc;me commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si une coche doit appara&icirc;tre en regarde de l'&eacute;l&eacute;ment de menu, false
dans le cas contraire.
Derni&egrave;re mise &agrave; jour le 22/6/2011
172
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Exemple
function isCommandChecked()
{
var bChecked = false;
var cssStyle = arguments[0];
if (dw.getDocumentDOM() == null)
return false;
if (cssStyle == &quot;(None)&quot;)
{
return dw.cssStylePalette.getSelectedStyle() == '';
}
else
{
return dw.cssStylePalette.getSelectedStyle() == cssStyle;
}
return bChecked;
}
receiveArguments()
Description
Traite tous les arguments transmis &agrave; partir d'un &eacute;l&eacute;ment du menu ou de la fonction dw.runCommand(). S'il s'agit d'une
option de menu dynamique, elle traite l'ID de l'option de menu dynamique.
Arguments
{arg1}, {arg2},...{argN}
S'il s'agit d'une option de menu dynamique, l'ID unique correspondant sp&eacute;cifi&eacute; dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est d&eacute;fini pour une balise menuitem,
la valeur de l'attribut est transmise &agrave; la fonction receiveArguments() (et aux fonctions &laquo; canAcceptCommand() &raquo; &agrave;
la page 170, &laquo; isCommandChecked() &raquo; &agrave; la page 171 et &laquo; setMenuText() &raquo; &agrave; la page 173) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux &eacute;l&eacute;ments de menu appelant la m&ecirc;me commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
function receiveArguments()
{
var styleName = arguments[0];
if (styleName == &quot;(None)&quot;)
dw.getDocumentDOM('document').applyCSSStyle('','');
else
dw.getDocumentDOM('document').applyCSSStyle('',styleName);
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
173
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
setMenuText()
Description
Sp&eacute;cifie le texte devant s'afficher dans le menu.
Remarque : N'utilisez pas cette fonction si vous utilisez &laquo; getDynamicContent() &raquo; &agrave; la page 170.
Arguments
{arg1}, {arg2},...{argN}
Si l'attribut arguments est d&eacute;fini pour une balise menuitem, la valeur de l'attribut est transmise &agrave; la fonction
setMenuText() (et aux fonctions &laquo; canAcceptCommand() &raquo; &agrave; la page 170, &laquo; isCommandChecked() &raquo; &agrave; la page 171 et
&laquo; receiveArguments() &raquo; &agrave; la page 172) sous forme d'un ou plusieurs arguments. L'attribut arguments permet de
distinguer deux &eacute;l&eacute;ments de menu appelant la m&ecirc;me commande de menu.
Valeurs renvoy&eacute;es
Dreamweaver attend la cha&icirc;ne devant appara&icirc;tre dans le menu.
Exemple
function setMenuText()
{
if (arguments.length != 1) return &quot;&quot;;
var whatToDo = arguments[0];
if (whatToDo == &quot;undo&quot;)
return dw.getUndoText();
else if (whatToDo == &quot;redo&quot;)
return dw.getRedoText();
else return &quot;&quot;;
}
windowDimensions()
Description
D&eacute;finit les dimensions de la bo&icirc;te de dialogue des param&egrave;tres. Si cette fonction n'est pas d&eacute;finie, les dimensions de la
fen&ecirc;tre sont calcul&eacute;es automatiquement.
Remarque : Ne d&eacute;finissez cette fonction que si vous souhaitez utiliser une bo&icirc;te de dialogue sup&eacute;rieure &agrave; 640 x 480pixels.
Arguments
platform
La valeur de l'argument platform est soit &quot;macintosh&quot;, soit &quot;windows&quot;, selon la plate-forme utilis&eacute;e par l'utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver renvoie une cha&icirc;ne au format &quot;widthInPixels,heightInPixels&quot;.
Les dimensions renvoy&eacute;es sont inf&eacute;rieures &agrave; la taille totale de la bo&icirc;te de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoy&eacute;es ne permettent pas de faire appara&icirc;tre toutes les options, des
barres de d&eacute;filement s'affichent.
Derni&egrave;re mise &agrave; jour le 22/6/2011
174
EXTENSION DE DREAMWEAVER
Menus et commandes de menu
Exemple
Dans l'exemple suivant, la fonction windowDimensions() d&eacute;finit les dimensions de la bo&icirc;te de dialogue des
param&egrave;tres &agrave; 648 x 520 pixels :
function windowDimensions(){
return &quot;648,520&quot;;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
175
Chapitre 11 : Barres d'outils
Pour cr&eacute;er une nouvelle barre d'outils dans Adobe Dreamweaver , il suffit de cr&eacute;er un fichier de d&eacute;finition de barre
d'outils et de placer ce fichier dans le dossier Configuration/Toolbars.
Le tableau ci-dessous r&eacute;pertorie les fichiers utilis&eacute;s pour cr&eacute;er une barre d'outils :
Chemin
Fichier
Description
Configuration/Toolbars/
toolbars.xml
Modifiez ce fichier pour changer le contenu de la barre
d'outils.
Configuration/Toolbars/
nouvelle_barre_outils.xml
Cr&eacute;ez ce fichier pour g&eacute;n&eacute;rer une barre d'outils.
Configuration/Toolbars/
fichier_image.gif
Image d'ic&ocirc;ne associ&eacute;e &agrave; l'&eacute;l&eacute;ment de barre d'outils.
Configuration/Commands/
MyCommand.htm
Fichier de commandes associ&eacute; &agrave; l'&eacute;l&eacute;ment de barre d'outils.
Fonctionnement des barres d'outils
Les barres d'outils sont d&eacute;finies par les fichiers XML et d'image localis&eacute;s dans le dossier Toolbars du dossier
Configuration principal de Dreamweaver. Les barres d'outils par d&eacute;faut de Dreamweaver sont stock&eacute;es dans le fichier
toolbars.xml du dossier Configuration/Toolbars. Au d&eacute;marrage, Dreamweaver charge tous les fichiers de barre d'outils
du dossier Toolbars. Pour ajouter une nouvelle barre d'outils, vous pouvez simplement copier le fichier correspondant
dans le dossier Toolbars, plut&ocirc;t que de modifier le fichier toolbars.xml original.
Les fichiers XML de barre d'outils d&eacute;finissent une ou plusieurs barres d'outils, ainsi que les &eacute;l&eacute;ments qui les composent.
Une barre d'outils est une liste d'&eacute;l&eacute;ments tels que des boutons, des zones de texte, des menus d&eacute;roulants, etc. Un
&eacute;l&eacute;ment de barre d'outils est un contr&ocirc;le auquel l'utilisateur peut acc&eacute;der.
Certains types de contr&ocirc;les de barre d'outils, tels que les boutons-poussoirs et les menus d&eacute;roulants, sont associ&eacute;s &agrave; une
ic&ocirc;ne. Les ic&ocirc;nes sont stock&eacute;es dans le sous-dossier images du dossier Toolbars. Elles sont g&eacute;n&eacute;ralement au format de
fichier GIF ou JPEG, mais tous les formats compatibles avec Dreamweaver sont accept&eacute;s. Les images des barres d'outils
Adobe sont stock&eacute;es dans le dossier Toolbars/images/MM.
Tout comme pour les menus, vous pouvez sp&eacute;cifier la fonction de chaque &eacute;l&eacute;ment de la barre d'outils en d&eacute;finissant
ses attributs ou par l'interm&eacute;diaire d'un fichier de commandes. Les fichiers de commandes des barres d'outils Adobe
sont stock&eacute;s dans le dossier Toolbars/MM.
L'API de barre d'outils est compatible avec l'API de commandes de menu. Les contr&ocirc;les de barre d'outils peuvent ainsi
r&eacute;utiliser les fichiers de commandes des menus.
Contrairement aux menus, les &eacute;l&eacute;ments de barre d'outils peuvent &ecirc;tre d&eacute;finis ind&eacute;pendamment des barres d'outils qui
les utilisent. Vous pouvez ainsi utiliser des &eacute;l&eacute;ments de barre d'outils dans plusieurs barres d'outils en appliquant la
balise itemref.
Lorsque Dreamweaver charge une barre d'outils pour la premi&egrave;re fois, sa visibilit&eacute; et sa position sont d&eacute;termin&eacute;es par
le fichier de d&eacute;finition de la barre d'outils. Par la suite, sa visibilit&eacute; et sa position sont enregistr&eacute;es et restaur&eacute;es &agrave; partir
du registre (Windows) ou du fichier de pr&eacute;f&eacute;rences de Dreamweaver (Macintosh).
Derni&egrave;re mise &agrave; jour le 22/6/2011
176
EXTENSION DE DREAMWEAVER
Barres d'outils
Comportement des barres d'outils
Sous Windows, les barres d'outils Dreamweaver se comportent, en g&eacute;n&eacute;ral, comme les barres d'outils standard du
syst&egrave;me. Les barres d'outils Dreamweaver pr&eacute;sentent toutefois les caract&eacute;ristiques suivantes :
• Vous pouvez les ancrer, les d&eacute;tacher et les repositionner par rapport aux autres barres d'outils en utilisant la
fonction de glisser-d&eacute;poser.
• Vous pouvez les ancrer horizontalement sur le bord sup&eacute;rieur ou inf&eacute;rieur la fen&ecirc;tre.
• La taille des barres d'outils ne change pas. La taille d'une barre d'&eacute;tat ne se r&eacute;duit pas lorsque le conteneur est r&eacute;duit
ou lorsque d'autres barres d'outils sont ajout&eacute;es.
• Vous pouvez afficher ou masquer les barres d'outils &agrave; partir du menu Affichage &gt; Barres d'outils.
• Les barres d'outils ne peuvent pas se chevaucher.
• Lorsque vous faites glisser une barre d'outils, seul son contour s'affiche.
Sur Macintosh, les barres d'outils sont toujours attach&eacute;es &agrave; la fen&ecirc;tre de document. Vous pouvez les afficher ou les
masquer &agrave; partir du menu, mais vous ne pouvez pas les faire glisser, les r&eacute;organiser ni les d&eacute;tacher.
Dans l'espace de travail de Dreamweaver, qui int&egrave;gre toutes les fen&ecirc;tres de documents de Dreamweaver dans un
unique cadre parent, vous pouvez sp&eacute;cifier si les barres d'outils doivent s'ancrer &agrave; l'espace de travail ou &agrave; la fen&ecirc;tre de
document.
Les barres d'outils ancr&eacute;es &agrave; l'espace de travail de Dreamweaver n'apparaissent qu'une seule fois. Elles fonctionnent
toujours sur le document au premier plan. Dans l'espace de travail de Dreamweaver, vous pouvez ancrer les barres
d'outils au-dessus, en dessous, &agrave; gauche ou &agrave; droite de la barre Insertion. Les barres d'outils ancr&eacute;es &agrave; l'espace de travail
de Dreamweaver ne sont pas automatiquement d&eacute;sactiv&eacute;es lorsque la fen&ecirc;tre de document est ferm&eacute;e. Les &eacute;l&eacute;ments de
la barre d'outils d&eacute;terminent s'ils doivent rester actifs lorsque aucun document n'est ouvert.
Lorsque les barres d'outils sont ancr&eacute;es sur la fen&ecirc;tre de document, une instance s'affichera pour chaque fen&ecirc;tre. La
barre d'outils attach&eacute;e &agrave; une fen&ecirc;tre de document est d&eacute;sactiv&eacute;e lorsque la fen&ecirc;tre dans laquelle elle est ancr&eacute;e n'est pas
la fen&ecirc;tre active. Les gestionnaires de mise &agrave; jour sont ex&eacute;cut&eacute;s d&egrave;s que leur fen&ecirc;tre devient la fen&ecirc;tre active.
Vous ne pouvez pas faire glisser les barres d'outils entre la fen&ecirc;tre de document et l'espace de travail de Dreamweaver.
Fonctionnement des commandes de la barre d'outils
Lorsque Dreamweaver dessine une barre d'outils, les &eacute;v&eacute;nements suivants se produisent :
1 Pour chaque &eacute;l&eacute;ment de contr&ocirc;le de la barre d'outils, Dreamweaver d&eacute;termine si l'attribut file existe.
2 Si l'attribut file existe, Dreamweaver appelle la fonction canAcceptCommand() pour d&eacute;finir si le contr&ocirc;le doit &ecirc;tre
activ&eacute; dans le contexte actuel du document.
Par exemple, dans la zone de texte Titre du document de la barre d'outils de Dreamweaver, la fonction
canAcceptCommand() v&eacute;rifie l'existence d'un DOM et si le document actif est un fichier HTML. Si ces deux
conditions sont v&eacute;rifi&eacute;es, la fonction renvoie la valeur true et Dreamweaver active la zone de texte dans la barre
d'outils.
3 Si l'attribut file existe, Dreamweaver ignore les attributs suivants, s'ils sont sp&eacute;cifi&eacute;s : checked, command,
DOMRequired, enabled, script, showif, update et value.
4 Si l'attribut file n'existe pas, Dreamweaver traite les attributs qui sont d&eacute;finis pour l'&eacute;l&eacute;ment de contr&ocirc;le de barre
d'outils : checked, command, DomRequired etc.
Pour plus d'informations sur les attributs de balises d'&eacute;l&eacute;ments sp&eacute;cifiques, voir &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo;
&agrave; la page 188.
Derni&egrave;re mise &agrave; jour le 22/6/2011
177
EXTENSION DE DREAMWEAVER
Barres d'outils
5 Dreamweaver appelle la fonction getCurrentValue() &agrave; chaque cycle de mise &agrave; jour, comme sp&eacute;cifi&eacute; par l'attribut
update, pour d&eacute;terminer la valeur de contr&ocirc;le &agrave; afficher.
6 L'utilisateur s&eacute;lectionne un &eacute;l&eacute;ment dans la barre d'outils.
7 Dreamweaver appelle la fonction receiveArguments() pour traiter les arguments sp&eacute;cifi&eacute;s par l'attribut
arguments de l'&eacute;l&eacute;ment de la barre d'outils.
Pour plus d'informations sur le r&ocirc;le des fonctions sp&eacute;cifiques dans l'API de commande de barre d'outils, voir
&laquo; Fonctions de l'API de commande de barre d'outils &raquo; &agrave; la page 193.
Fichier simple de commande de barre d'outils
Cet exemple simple impl&eacute;mente un &eacute;l&eacute;ment de zone de texte Titre comme indiqu&eacute; sur la barre d'outils Document de
Dreamweaver. L'&eacute;l&eacute;ment de zone de texte permet &agrave; l'utilisateur d'entrer un nom pour le document Dreamweaver en
cours. Proc&eacute;dez comme suit pour impl&eacute;menter cet exemple de barre d'outils :
Cr&eacute;ation de la zone de texte
Pour ajouter une barre d'outils dans Dreamweaver, vous placez le fichier XML contenant la d&eacute;finition de barre d'outils
dans le dossier Configuration de Dreamweaver.
L'illustration suivante pr&eacute;sente la zone de texte Title (titre) :
L'&eacute;l&eacute;ment de barre d'outils editcontrol suivant d&eacute;finit une zone de texte nomm&eacute;e Title :
&lt;EDITCONTROL ID=&quot;DW_SetTitle&quot;
label=&quot;Title: &quot;
tooltip=&quot;Document Title&quot;
width=&quot;150&quot;
file=&quot;Toolbars/MM/EditTitle.htm&quot;/&gt;
L'attribut tooltip entra&icirc;ne l'affichage dans Dreamweaver de la mention Title du document dans une infobulle lorsque
l'utilisateur positionne le curseur sur la zone de texte. L'attribut width d&eacute;finit la taille du champ en pixels. L'attribut
file pr&eacute;cise que le fichier EditTitle.htm contient les fonctions JavaScript qui agissent sur la zone de texte. Pour voir
la d&eacute;finition compl&egrave;te de la barre d'outils Document de Dreamweaver, voir la barre d'outils principale
(id=&quot;DW_Toolbar_Main&quot;) dans le fichier toolbars.xml.
Code JavaScript pour la zone de texte
Lorsque l'utilisateur agit sur la zone de texte, Dreamweaver invoque le fichier de commandes EditTitle.htm dans le
dossier Toolbars/MM. Ce fichier contient trois fonctions JavaScript qui agissent sur la zone de texte Titre. Ces
fonctions sont canAcceptCommand(), receiveArguments() et getCurrentValue().
canAcceptCommand(): active l'&eacute;l&eacute;ment de la barre d'outils
La fonction canAcceptCommand() se compose d'une ligne de code qui s'assure qu'un DOM (mod&egrave;le d'objet de
document) est disponible et que le document est analys&eacute; comme HTML. La fonction renvoie le r&eacute;sultat de ces tests. Si
les conditions renvoient la valeur true, Dreamweaver active l'&eacute;l&eacute;ment de zone de texte sur la barre d'outils. Si la
fonction renvoie la valeur false, Dreamweaver d&eacute;sactive l'&eacute;l&eacute;ment.
Derni&egrave;re mise &agrave; jour le 22/6/2011
178
EXTENSION DE DREAMWEAVER
Barres d'outils
La fonction se pr&eacute;sente comme suit :
function canAcceptCommand()
{
return (dw.getDocumentDOM() != null &amp;&amp; dw.getDocumentDOM().getParseMode() == 'html');
}
receiveArguments(): d&eacute;finit le titre
Dreamweaver appelle la fonction receiveArguments(), pr&eacute;sent&eacute;e dans l'exemple suivant, lorsque l'utilisateur entre
une valeur dans la zone de texte Title du document et appuie sur la touche Entr&eacute;e, ou s&eacute;lectionne une autre commande.
La fonction se pr&eacute;sente comme suit :
function receiveArguments(newTitle)
{
var dom = dw.getDocumentDOM();
if (dom)
dom.setTitle(newTitle);
}
Dreamweaver transmet newTitle, &agrave; savoir la valeur entr&eacute;e par l'utilisateur, &agrave; la fonction receiveArguments(). La
fonction receiveArguments() v&eacute;rifie imm&eacute;diatement s'il existe un DOM. Si c'est le cas, la fonction
receiveArguments() d&eacute;finit le titre du nouveau document en transmettant newTitle &agrave; la fonction
dom.setTitle().
getCurrentValue(): obtient le titre
Lorsqu'un cycle de mise &agrave; jour survient, selon la fr&eacute;quence par d&eacute;faut d&eacute;termin&eacute;e dans le gestionnaire d'&eacute;v&eacute;nements
onEdit, Dreamweaver appelle la fonction getCurrentValue() pour d&eacute;terminer la valeur &agrave; afficher pour le contr&ocirc;le.
La fr&eacute;quence de mise &agrave; jour par d&eacute;faut du gestionnaire d'&eacute;v&eacute;nements onEdit d&eacute;termine la fr&eacute;quence de mise &agrave; jour car
le contr&ocirc;le de zone de texte Title ne dispose pas d'attribut update.
Pour la zone de texte Title du document, la fonction getCurrentValue() suivante appelle la fonction
dom.getTitle() de l'interface de programmation d'application (API) JavaScript pour obtenir et renvoyer le titre en
cours.
La fonction se pr&eacute;sente comme suit :
function getCurrentValue()
{
var title = &quot;&quot;;
var dom = dw.getDocumentDOM();
if (dom)
title = dom.getTitle();
return title;
}
La fonction getTitle() renvoie la valeur Document sans nom, affich&eacute;e dans la zone de texte, en attendant que
l'utilisateur attribue un titre au document. Apr&egrave;s la saisie d'un titre par l'utilisateur, la fonction getTitle() renvoie
cette valeur et Dreamweaver l'affiche comme nouveau titre du document.
Pour voir le fichier HTML complet qui contient les fonctions JavaScript pour la zone de texte Title, voir le fichier
EditTitle.htm dans le dossier Toolbars/MM.
Le dossier MM est r&eacute;serv&eacute; aux fichiers Adobe. Cr&eacute;ez un nouveau dossier dans le dossier Toolbars afin d'y stocker votre
code JavaScript.
Derni&egrave;re mise &agrave; jour le 22/6/2011
179
EXTENSION DE DREAMWEAVER
Barres d'outils
Fichier de d&eacute;finition de la barre d'outils
Une barre d'outils est une simple liste de boutons radio, boutons-poussoirs, zones de texte et autres &eacute;l&eacute;ments de barre
d'outils, &eacute;ventuellement divis&eacute;e par des balises separator. Chaque &eacute;l&eacute;ment de barre d'outils peut &ecirc;tre une r&eacute;f&eacute;rence &agrave;
un &eacute;l&eacute;ment &agrave; l'aide de la balise itemref, une s&eacute;paration, &agrave; l'aide de la balise separator ou une d&eacute;finition compl&egrave;te
d'&eacute;l&eacute;ment de barre d'outils pour une case &agrave; cocher ou une zone de texte, comme d&eacute;crit, par exemple, dans &laquo; Balises
d'&eacute;l&eacute;ments de barre d'outils &raquo; &agrave; la page 183.
Tous les fichiers de d&eacute;finition de barre d'outils commencent par les d&eacute;clarations suivantes :
&lt;?xml version=&quot;1.0&quot; encoding=&quot;optional_encoding&quot;?&gt;
&lt;!DOCTYPE toolbarset SYSTEM &quot;-//Macromedia//DWExtension toolbar 5.0&quot;&gt;
Si l'encodage est ignor&eacute;, Dreamweaver utilise l'encodage par d&eacute;faut du syst&egrave;me d'exploitation.
Apr&egrave;s les d&eacute;clarations, le fichier se compose d'une seule balise toolbarset, qui peut contenir les balises suivantes :
toolbar, itemref, separator, include et itemtype, o&ugrave; itemtype vaut button, checkbutton, radiobutton,
menubutton, dropdown, combobox, editcontrol ou colorpicker. L'exemple suivant, un extrait abr&eacute;g&eacute; du fichier
toolbars.xml, repr&eacute;sente la hi&eacute;rarchie des balises dans le fichier de barre d'outils. Dans cet exemple, les attributs
d'&eacute;l&eacute;ments de barre d'outils qui sont d&eacute;crits dans les sections suivantes, sont remplac&eacute;s par des points de suspension
pour la description des attributs de l'&eacute;l&eacute;ment de barre d'outils.
&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;!DOCTYPE toolbarset SYSTEM &quot;-//Adobe//DWExtension toolbar 10.0&quot;&gt;
&lt;toolbarset&gt;
&lt;!-- main toolbar --&gt;
&lt;toolbar id=&quot;DW_Toolbar_Main&quot; label=&quot;Document&quot;&gt;
&lt;radiobutton id=&quot;DW_CodeView&quot; . . ./&gt;
&lt;radiobutton id=&quot;DW_SplitView&quot; . . ./&gt;
&lt;radiobutton id=&quot;DW_DesignView&quot; . . ./&gt;
&lt;separator/&gt;
&lt;checkbutton id=&quot;DW_LiveDebug&quot; . . ./&gt;
&lt;checkbutton id=&quot;DW_LiveDataView&quot; . . ./&gt;
&lt;separator/&gt;
&lt;editcontrol id=&quot;DW_SetTitle&quot; . . ./&gt;
&lt;menubutton id=&quot;DW_FileTransfer&quot; . . ./&gt;
&lt;menubutton id=&quot;DW_Preview&quot; . . ./&gt;
&lt;separator/&gt;
&lt;button id=&quot;DW_DocRefresh&quot; . . ./&gt;
&lt;button id=&quot;DW_Reference&quot; . . ./&gt;
&lt;menubutton id=&quot;DW_CodeNav&quot; . . ./&gt;
&lt;menubutton id=&quot;DW_ViewOptions&quot; . . ./&gt;
&lt;/toolbar&gt;
&lt;/toolbarset&gt;
Les descriptions de chaque balise de barre d'outils sont fournies ci-dessous.
&lt;toolbar&gt;
Description
D&eacute;finit une barre d'outils. Dreamweaver affiche les &eacute;l&eacute;ments et les s&eacute;parateurs de gauche &agrave; droite dans l'ordre sp&eacute;cifi&eacute;
et les met en forme automatiquement. Le fichier de barre d'outils ne sp&eacute;cifie pas l'espacement entre les &eacute;l&eacute;ments, mais
vous pouvez d&eacute;finir la largeur de certains types d'&eacute;l&eacute;ments.
Derni&egrave;re mise &agrave; jour le 22/6/2011
180
EXTENSION DE DREAMWEAVER
Barres d'outils
Attributs
id, label, {container}, {initiallyVisible}, {initialPosition}, {relativeTo}
•
id=&quot;unique_id&quot; Obligatoire. Une cha&icirc;ne d'identificateur doit &ecirc;tre unique dans un fichier ainsi que dans tous les
fichiers inclus dans ce fichier. Les fonctions API JavaScript qui manipulent une barre d'outils se r&eacute;f&egrave;rent &agrave; cette
derni&egrave;re par son ID. Pour plus d'informations sur ces fonctions, voir le Guide des API de Dreamweaver. Si deux
barres d'outils dans un m&ecirc;me fichier poss&egrave;dent le m&ecirc;me ID, Dreamweaver affiche un message d'erreur.
•
label=&quot;string&quot; Obligatoire. L'attribut label sp&eacute;cifie l'&eacute;tiquette, une cha&icirc;ne de caract&egrave;res que Dreamweaver
affiche pour l'utilisateur. L'&eacute;tiquette s'affiche dans le menu Affichage &gt; Barre d'outils et dans la barre de titre de la
barre d'outils lorsque celle-ci est flottante.
•
container=&quot;mainframe&quot; ou &quot;document&quot; La valeur par d&eacute;faut est &quot;mainframe&quot;. Indique la position d'ancrage de
la barre d'outils dans l'espace de travail de Dreamweaver sous Windows. Si le contenant indique &quot;mainframe&quot;, la
barre d'outils appara&icirc;t &agrave; l'ext&eacute;rieur de l'espace de travail et fonctionne sur le document au premier plan. Si le
contenant indique &quot;document&quot;, la barre d'outils appara&icirc;t dans chaque fen&ecirc;tre de document. Sur Macintosh, toutes
les barres d'outils s'affichent dans chaque fen&ecirc;tre de document.
•
initiallyVisible=&quot;true&quot; ou &quot;false&quot;. Cette balise indique si la barre d'outils doit &ecirc;tre visible la premi&egrave;re fois
que Dreamweaver la charge depuis le dossier Toolbars. Apr&egrave;s la premi&egrave;re fois, c'est l'utilisateur qui d&eacute;termine sa
visibilit&eacute;. Dreamweaver enregistre l'&eacute;tat actuel dans le registre syst&egrave;me (Windows) ou le fichier de pr&eacute;f&eacute;rences de
Dreamweaver (Macintosh) l'utilisateur quitte Dreamweaver. Dreamweaver r&eacute;tablit le r&eacute;glage depuis le registre ou
le fichier de pr&eacute;f&eacute;rences lorsqu'il red&eacute;marre. Vous pouvez manipuler la visibilit&eacute; de la barre d'outils en utilisant les
fonctions dom.getToolbarVisibility() et dom.setToolbarVisibility(), comme d&eacute;crit dans le Guide des
API de Dreamweaver. Si vous ne d&eacute;finissez pas une valeur pour l'attribut initiallyVisible, celui-ci adopte la
valeur true.
•
initialPosition=&quot;top&quot;, &quot;below&quot; ou &quot;floating&quot;. Indique la position initiale de la barre d'outils d&eacute;finie par
Dreamweaver, par rapport aux autres barres d'outils lors du premier chargement. Les valeurs possibles de
l'argument initialPosition sont d&eacute;crites dans la liste suivante :
•
top Il s'agit de la position par d&eacute;faut, de fa&ccedil;on &agrave; ce que la barre d'outils s'affiche en haut de la fen&ecirc;tre du document.
Si plusieurs barres d'outils sp&eacute;cifient top pour un type de fen&ecirc;tre donn&eacute;, elles apparaissent dans l'ordre de
chargement dans Dreamweaver. Cet ordre risque d'&ecirc;tre al&eacute;atoire si les barres d'outils sont localis&eacute;es dans des
fichiers s&eacute;par&eacute;s.
•
below La barre d'outils s'affiche au d&eacute;but de la ligne, juste sous la barre d'outils sp&eacute;cifi&eacute;e par l'attribut relativeTo.
Dreamweaver signale une erreur si la barre d'outils relativeTo est introuvable. Si plusieurs barres d'outils
sp&eacute;cifient below par rapport &agrave; la m&ecirc;me barre d'outils, elles apparaissent dans l'ordre de chargement dans
Dreamweaver. Cet ordre risque d'&ecirc;tre al&eacute;atoire si les barres d'outils sont localis&eacute;es dans des fichiers s&eacute;par&eacute;s.
•
floating La barre d'outils n'est pas ancr&eacute;e &agrave; la fen&ecirc;tre ; elle flotte au-dessus du document. Dreamweaver place
automatiquement la barre d'outils de sorte qu'elle soit d&eacute;cal&eacute;e par rapport aux autres barres d'outils flottantes. Sur
Macintosh, floating est trait&eacute; de la m&ecirc;me fa&ccedil;on que top.
Comme avec l'attribut initiallyVisible, l'attribut initialPosition s'applique uniquement lors du premier
chargement de la barre d'outils par Dreamweaver. Ensuite, la position de la barre d'outils est enregistr&eacute;e dans le
registre ou dans le fichier de pr&eacute;f&eacute;rences de Dreamweaver. Vous pouvez r&eacute;tablir la position de la barre d'outils en
utilisant la fonction dom.setToolbarPosition(). Pour plus d'informations sur la fonction
dom.setToolbarPosition(), voir le Guide des API de Dreamweaver.
Si vous ne sp&eacute;cifiez pas une valeur pour l'attribut initialPosition, Dreamweaver positionne la barre d'outils
selon l'ordre de chargement.
Derni&egrave;re mise &agrave; jour le 22/6/2011
181
EXTENSION DE DREAMWEAVER
Barres d'outils
•
relativeTo=&quot;id_barre_outils&quot; Cet attribut est requis si l'attribut initialPosition indique below. Dans les
autres cas, cet argument est ignor&eacute;. Indique l'ID de la barre d'outils en dessous de laquelle cette barre d'outils doit
&ecirc;tre plac&eacute;e.
Contenu
La balise toolbar comprend les balises include, itemref et separator ainsi que des d&eacute;finitions d'&eacute;l&eacute;ments
individuels tels que button, combobox, dropdown, etc. Pour obtenir une description des d&eacute;finitions d'&eacute;l&eacute;ments que
vous pouvez sp&eacute;cifier, voir &laquo; Balises d'&eacute;l&eacute;ments de barre d'outils &raquo; &agrave; la page 183.
Conteneur
La balise toolbarset.
Exemple
&lt;toolbar id=&quot;MyDWedit_toolbar&quot; label=&quot;Edit&quot;&gt;
&lt;include/&gt;
Description
Charge les &eacute;l&eacute;ments de barre d'outils depuis le fichier sp&eacute;cifi&eacute; avant de continuer &agrave; charger le fichier en cours. Les
&eacute;l&eacute;ments de barre d'outils d&eacute;finis dans le fichier inclus peuvent &ecirc;tre r&eacute;f&eacute;renc&eacute;s dans le fichier en cours. Si un fichier
tente plusieurs fois d'inclure un autre fichier, Dreamweaver affiche un message d'erreur et ignore la fonction include.
Les balises toolbar dans le fichier inclus sont ignor&eacute;es, mais les &eacute;l&eacute;ments dans ces barres d'outils restent disponibles
comme r&eacute;f&eacute;rences dans le fichier en cours.
Attributs
• Le chemin de fichier, relatif au dossier Toolbars, du fichier XML de la barre d'outils &agrave; inclure.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;include file=&quot;mine/editbar.xml&quot;/&gt;
&lt;itemtype/&gt;
Description
D&eacute;finit un &eacute;l&eacute;ment de barre d'outils. Les &eacute;l&eacute;ments de barre d'outils peuvent &ecirc;tre des boutons, des boutons radio, des
boutons-poussoirs, des zones de liste modifiables, des menus d&eacute;roulants, etc. Pour obtenir la liste des types d'&eacute;l&eacute;ments
de barre d'outils que vous pouvez d&eacute;finir, voir &laquo; Balises d'&eacute;l&eacute;ments de barre d'outils &raquo; &agrave; la page 183.
Attributs
Les attributs varient en fonction de l'&eacute;l&eacute;ment que vous d&eacute;finissez. Pour obtenir la liste des attributs que vous pouvez
sp&eacute;cifier pour les &eacute;l&eacute;ments de barre d'outils, voir &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Derni&egrave;re mise &agrave; jour le 22/6/2011
182
EXTENSION DE DREAMWEAVER
Barres d'outils
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;button id=&quot;strikeout_button&quot; .../&gt;
&lt;itemref/&gt;
Description
Fait r&eacute;f&eacute;rence &agrave; (et inclut dans la barre d'outils en cours) un &eacute;l&eacute;ment de barre d'outils d&eacute;fini dans une barre d'outils
pr&eacute;c&eacute;dente ou en dehors de toutes les barres d'outils.
Attributs
id, {showIf}
•
id=&quot;id_reference&quot; Obligatoire. Il doit s'agir de l'ID d'un &eacute;l&eacute;ment d&eacute;fini au pr&eacute;alable ou inclus dans le fichier.
Dreamweaver n'autorise pas les r&eacute;f&eacute;rences en aval. Si une balise d'&eacute;l&eacute;ment de barre d'outils fait r&eacute;f&eacute;rence &agrave; un ID
non d&eacute;fini, Dreamweaver affiche un message d'erreur et ignore la r&eacute;f&eacute;rence.
•
showIf=&quot;script&quot; Indique que cet &eacute;l&eacute;ment appara&icirc;t uniquement sur la barre d'outils si le script sp&eacute;cifi&eacute; renvoie la
valeur true. Par exemple, vous pouvez utiliser showIf pour afficher certains boutons dans une application donn&eacute;e
uniquement, ou lorsqu'une page est &eacute;crite en langage c&ocirc;t&eacute; serveur, tel que Adobe ColdFusion, ASP ou JSP. Si vous
ne sp&eacute;cifiez pas l'attribut showIf, l'&eacute;l&eacute;ment appara&icirc;t syst&eacute;matiquement. Dreamweaver v&eacute;rifie cette propri&eacute;t&eacute; &agrave;
chaque fois que l'activateur de l'&eacute;l&eacute;ment s'ex&eacute;cute, c'est-&agrave;-dire en fonction de la valeur de l'attribut update. Vous
devez utiliser cet attribut avec prudence. L'attribut peut &ecirc;tre utilis&eacute; dans la d&eacute;finition de l'&eacute;l&eacute;ment ou dans une
r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment depuis une barre d'outils. Si la d&eacute;finition et la r&eacute;f&eacute;rence sp&eacute;cifient toutes deux l'attribut
showIf, Dreamweaver affiche l'&eacute;l&eacute;ment uniquement si les deux conditions sont v&eacute;rifi&eacute;es. L'attribut showIf est
l'&eacute;quivalent de la fonction showIf() dans un fichier de commandes.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;itemref id=&quot;strikeout_button&quot;&gt;
&lt;separator/&gt;
Description
Ins&egrave;re un s&eacute;parateur &agrave; l'emplacement en cours dans la barre d'outils.
Derni&egrave;re mise &agrave; jour le 22/6/2011
183
EXTENSION DE DREAMWEAVER
Barres d'outils
Attributs
{showIf}
• L'attribut showif indique que le s&eacute;parateur ne doit appara&icirc;tre sur la barre d'outils que si le script donn&eacute; renvoie la
valeur true. Par exemple, vous pouvez utiliser l'attribut showIf pour afficher le s&eacute;parateur uniquement dans une
application donn&eacute;e ou uniquement lorsque la page contient un certain type de document. Si l'attribut showIf n'est
pas sp&eacute;cifi&eacute;, le s&eacute;parateur s'affiche syst&eacute;matiquement.
Contenu
Aucun.
Conteneur
La balise toolbar.
Exemple
&lt;separator/&gt;
Balises d'&eacute;l&eacute;ments de barre d'outils
Chaque type d'&eacute;l&eacute;ments de barre d'outils poss&egrave;de sa propre balise et son propre ensemble d'attributs obligatoires et
facultatifs. Vous pouvez d&eacute;finir des &eacute;l&eacute;ments toolbar &agrave; l'int&eacute;rieur ou &agrave; l'ext&eacute;rieur des barres d'outils. En g&eacute;n&eacute;ral, il est
pr&eacute;f&eacute;rable de les d&eacute;finir &agrave; l'ext&eacute;rieur et de les r&eacute;f&eacute;rencer &agrave; partir des barres d'outils &agrave; l'aide de la balise itemref.
Vous pouvez d&eacute;finir les types d'&eacute;l&eacute;ments suivants dans une barre d'outils.
&lt;button&gt;
Description
Ce bouton-poussoir ex&eacute;cute une commande sp&eacute;cifique lorsque vous cliquez dessus. Il ressemble au bouton R&eacute;f&eacute;rence
de la barre d'outils de Dreamweaver et se comporte comme tel.
Attributs
id, image, tooltip, command, {showIf}, {disabledImage}, {overImage}, {label}, {file},
{domRequired}, {enabled}, {update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Derni&egrave;re mise &agrave; jour le 22/6/2011
184
EXTENSION DE DREAMWEAVER
Barres d'outils
Exemple
&lt;BUTTON ID=&quot;DW_DocRefresh&quot;
image=&quot;Toolbars/images/MM/refresh.gif&quot;
disabledImage=&quot;Toolbars/images/MM/refresh_dis.gif&quot;
tooltip=&quot;Refresh Design View (F5)&quot;
enabled=&quot;((dw.getDocumentDOM() != null) &amp;&amp; (dw.getDocumentDOM().getView() != 'browse')
&amp;&amp; (!dw.getDocumentDOM().isDesignViewUpdated()))&quot;
command=&quot;dw.getDocumentDOM().synchronizeDocument()&quot;
update=&quot;onViewChange,onCodeViewSyncChange&quot;/&gt;
&lt;checkbutton&gt;
Description
Un bouton-poussoir est un bouton qui peut &ecirc;tre activ&eacute; ou d&eacute;sactiv&eacute; et qui ex&eacute;cute une commande sp&eacute;cifique lorsqu'il
est activ&eacute;. Lorsqu'il est activ&eacute;, il appara&icirc;t enfonc&eacute; et en surbrillance. Lorsqu'il est d&eacute;sactiv&eacute;, il appara&icirc;t plat.
Dreamweaver impl&eacute;mente les &eacute;tats suivants pour le bouton-poussoir : Survol, Enfonc&eacute;, Survol et enfonc&eacute; et D&eacute;sactiv&eacute;
et enfonc&eacute;. Le gestionnaire sp&eacute;cifi&eacute; par l'attribut checked ou par la fonction isCommandChecked() doit garantir que
le fait de cliquer sur ce bouton modifie son &eacute;tat.
Attributs
id, {showIf}, image, {disabledImage}, {overImage}, tooltip, {label}, {file}, {domRequired},
{enabled}, checked, {update}, command, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;CHECKBUTTON ID=&quot;DW_LiveDebug&quot;
image=&quot;Toolbars/images/MM/debugview.gif&quot;
disabledImage=&quot;Toolbars/images/MM/globe_dis.gif&quot;
tooltip=&quot;Live Debug&quot;
enabled=&quot;dw.canLiveDebug()&quot;
checked=&quot;dw.getDocumentDOM() != null &amp;&amp; dw.getDocumentDOM().getView() == 'browse'&quot;
command=&quot;dw.toggleLiveDebug()&quot;
showIf=&quot;dw.canLiveDebug()&quot;
update=&quot;onViewChange&quot;/&gt;
&lt;radiobutton&gt;
Description
Le bouton radio se comporte comme le bouton-poussoir, mais appara&icirc;t en relief lorsqu'il est d&eacute;sactiv&eacute;. Dreamweaver
impl&eacute;mente les &eacute;tats suivants pour le bouton radio : Survol, Enfonc&eacute;, Survol et enfonc&eacute; et D&eacute;sactiv&eacute; et enfonc&eacute;.
Dreamweaver n'impose pas l'exclusion mutuelle entre les boutons radio. Le gestionnaire sp&eacute;cifi&eacute; par l'attribut checked
ou par la fonction isCommandChecked() doit garantir que les &eacute;tats activ&eacute; et d&eacute;sactiv&eacute; des boutons radio sont
coh&eacute;rents.
Derni&egrave;re mise &agrave; jour le 22/6/2011
185
EXTENSION DE DREAMWEAVER
Barres d'outils
Les boutons radio fonctionnent comme les boutons des modes Code, Cr&eacute;ation et des boutons correspondants de la
barre d'outils de document de Dreamweaver.
Attributs
id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file},
{domRequired}, {enabled}, {update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;RADIOBUTTON ID=&quot;DW_CodeView&quot;
image=&quot;Toolbars/images/MM/codeView.gif&quot;
disabledImage=&quot;Toolbars/images/MM/codeView_dis.gif&quot;
tooltip=&quot;Show Code View&quot;
domRequired=&quot;false&quot;
enabled=&quot;dw.getDocumentDOM() != null&quot;
checked=&quot;dw.getDocumentDOM() != null &amp;&amp; dw.getDocumentDOM().getView() == 'code'&quot;
command=&quot;dw.getDocumentDOM().setView('code')&quot;
update=&quot;onViewChange&quot;/&gt;
&lt;menubutton&gt;
Description
Un bouton de menu est un bouton qui appelle le menu contextuel sp&eacute;cifi&eacute; par l'attribut menuid. Dreamweaver d&eacute;finit
les &eacute;tats Survol et Enfonc&eacute; pour les boutons de menu. Dreamweaver ne dessine pas la fl&egrave;che de menu, c'est-&agrave;-dire la
fl&egrave;che vers le bas qui indique que des &eacute;l&eacute;ments de menu sont joints au bouton. Vous devez l'inclure dans votre ic&ocirc;ne.
Les boutons Gestion de fichiers et Navigation dans le code sur la barre d'outils de document de Dreamweaver sont des
exemples de boutons de menu.
Attributs
id, image, tooltip, menuID, domRequired, enabled, {showIf}, {disabledImage}, {overImage},
{label}, {file}, {update}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Derni&egrave;re mise &agrave; jour le 22/6/2011
186
EXTENSION DE DREAMWEAVER
Barres d'outils
Exemple
&lt;MENUBUTTON ID=&quot;DW_CodeNav&quot;
image=&quot;Toolbars/images/MM/codenav.gif&quot;
disabledImage=&quot;Toolbars/images/MM/codenav_dis.gif&quot;
tooltip=&quot;Code Navigation&quot;
enabled=&quot;dw.getFocus() == 'textView' || dw.getFocus() == 'html'&quot;
menuID=&quot;DWCodeNavPopup&quot;
update=&quot;onViewChange&quot;/&gt;
&lt;dropdown&gt;
Description
Un menu d&eacute;roulant (ou contextuel) est un menu non modifiable qui ex&eacute;cute une commande sp&eacute;cifique attach&eacute;e &agrave; une
fonction JavaScript lorsque vous s&eacute;lectionnez une entr&eacute;e et que le menu se met &agrave; jour. Ce menu ressemble &agrave; l'option
Format de l'inspecteur Propri&eacute;t&eacute;s de texte et fonctionne de la m&ecirc;me mani&egrave;re, mais s'affiche en taille standard et non
en taille r&eacute;duite comme dans l'inspecteur Propri&eacute;t&eacute;s.
Attributs
id, tooltip, file, enabled, checked, value, command, {showIf}, {label}, {width},
{domRequired}, {update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;dropdown id=&quot;Font_Example&quot;
width=&quot;115&quot;
tooltip=&quot;Font&quot;
domRequired=&quot;false&quot;
file=&quot;Toolbars/mine/fontExample.htm&quot;
update=&quot;onSelChange&quot;/&gt;
&lt;combobox&gt;
Description
Une zone de liste est un menu d&eacute;roulant modifiable qui ex&eacute;cute une commande lorsque vous s&eacute;lectionnez une entr&eacute;e
ou que vous apportez une modification dans la zone de texte, puis changez la s&eacute;lection. Le menu ressemble &agrave; l'option
Police de l'inspecteur Propri&eacute;t&eacute;s de texte et fonctionne de la m&ecirc;me mani&egrave;re, mais s'affiche en taille standard et non en
taille r&eacute;duite comme dans l'inspecteur Propri&eacute;t&eacute;s.
Attributs
id, file, tooltip, enabled, value, command, {showiI}, {label}, {width}, {domRequired},
{update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Derni&egrave;re mise &agrave; jour le 22/6/2011
187
EXTENSION DE DREAMWEAVER
Barres d'outils
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;COMBOBOX ID=&quot;Address_URL&quot;
width=&quot;300&quot;
tooltip=&quot;Address&quot;
label=&quot;Address: &quot;
file=&quot;Toolbars/MM/AddressURL.htm&quot;
update=&quot;onBrowserPageBusyChange&quot;/&gt;
&lt;editcontrol&gt;
Description
Une zone de contr&ocirc;le d'&eacute;dition est une zone de texte modifiable qui ex&eacute;cute une commande lorsque vous apportez une
modification dans la zone de texte et changez la s&eacute;lection.
Attributs
id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled},
{update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;EDITCONTROL ID=&quot;DW_SetTitle&quot;
label=&quot;Title: &quot;
tooltip=&quot;Document Title&quot;
width=&quot;150&quot;
file=&quot;Toolbars/MM/EditTitle.htm&quot;/&gt;
&lt;colorpicker&gt;
Description
Un s&eacute;lecteur de couleur est un panneau de couleurs, sans zone de texte associ&eacute;e, qui ex&eacute;cute une commande lorsque
l'utilisateur s&eacute;lectionne une nouvelle couleur. Ce panneau ressemble au s&eacute;lecteur de couleur de l'inspecteur Propri&eacute;t&eacute;s
de Dreamweaver et se comporte de la m&ecirc;me mani&egrave;re. Vous pouvez choisir une autre ic&ocirc;ne pour remplacer l'ic&ocirc;ne par
d&eacute;faut.
Derni&egrave;re mise &agrave; jour le 22/6/2011
188
EXTENSION DE DREAMWEAVER
Barres d'outils
Attributs
id, tooltip, value, command, {showIf}, {image}, {disabledImage}, {overImage}, {label},
{colorRect}, {file}, {domRequired}, {enabled}, {update}, {arguments}
Vous trouverez une description de chaque attribut dans la section &laquo; Attributs des balises d'&eacute;l&eacute;ments &raquo; &agrave; la page 188.
Contenu
Aucun.
Conteneur
La balise toolbar ou toolbarset.
Exemple
&lt;colorpicker id=&quot;Color_Example&quot;
image=&quot;Toolbars/images/colorpickerIcon.gif&quot;
disabledImage=&quot;Toolbars/images/colorpickerIconD.gif&quot;
colorRect=&quot;0 12 16 16&quot;
tooltip=&quot;Text Color&quot;
domRequired=&quot;false&quot;
file=&quot;Toolbars/mine/colorExample.htm&quot;
update=&quot;onSelChange&quot;/&gt;
Attributs des balises d'&eacute;l&eacute;ments
Vous pouvez affecter des attributs et des commandes aux &eacute;l&eacute;ments de barres d'outils afin de d&eacute;terminer leur apparence
et leur comportement. Vous pouvez &eacute;galement inclure d'autres fichiers de barres d'outils et faire r&eacute;f&eacute;rence &agrave; des
&eacute;l&eacute;ments d&eacute;finis dans d'autres barres d'outils. Les attributs de balises d'&eacute;l&eacute;ments de barre d'outils ont les significations
suivantes :
id=&quot;unique_id&quot;
Obligatoire. L'attribut id est l'identificateur de l'&eacute;l&eacute;ment de barre d'outils. L'attribut id doit &ecirc;tre unique dans le fichier
en cours, ainsi que dans tous les fichiers inclus dans le fichier en cours. La balise itemref utilise l'id de l'&eacute;l&eacute;ment pour
indiquer et inclure un &eacute;l&eacute;ment dans une barre d'outils.
Exemple
&lt;button id=&quot;DW_DocRerefresh&quot; . . . &gt;
showIf=&quot;script&quot;
Facultatif. Cet attribut pr&eacute;cise que l'&eacute;l&eacute;ment s'affiche dans la barre d'outils uniquement si le script renvoie la valeur
true. Par exemple, vous pouvez utiliser l'attribut showIf pour afficher certains boutons uniquement lorsqu'une page
est &eacute;crite dans un certain type de langage c&ocirc;t&eacute; serveur, tel que Adobe ColdFusion, ASP ou JSP. Si vous ne sp&eacute;cifiez pas
l'attribut showIf, l'&eacute;l&eacute;ment appara&icirc;t syst&eacute;matiquement.
L'attribut showIf est v&eacute;rifi&eacute; &agrave; chaque fois que l'activateur de l'&eacute;l&eacute;ment s'ex&eacute;cute, c'est-&agrave;-dire en fonction de la valeur de
l'attribut update. Utilisez l'attribut showIf avec mod&eacute;ration.
Derni&egrave;re mise &agrave; jour le 22/6/2011
189
EXTENSION DE DREAMWEAVER
Barres d'outils
Vous pouvez sp&eacute;cifier l'attribut showIf dans la d&eacute;finition de l'&eacute;l&eacute;ment et dans une r&eacute;f&eacute;rence &agrave; l'&eacute;l&eacute;ment sur une balise
itemref. Si la d&eacute;finition et la r&eacute;f&eacute;rence sp&eacute;cifient l'attribut showIf, l'&eacute;l&eacute;ment s'affiche uniquement si les deux
conditions indiquent la valeur true. L'attribut showIf est l'&eacute;quivalent de la fonction showIf() dans un fichier de
commandes de barre d'outils. Si vous sp&eacute;cifiez l'attribut showIf et la fonction showif(), la fonction remplace
l'attribut.
Exemple
showIf=&quot;dw.canLiveDebug()&quot;
image=&quot;image_path&quot;
Cet attribut est obligatoire pour les boutons, les boutons-poussoirs, les boutons radio, les boutons de menu et de zone
de liste modifiable. L'attribut image est facultatif pour les s&eacute;lecteurs de couleurs, et est ignor&eacute; pour les autres types
d'&eacute;l&eacute;ments. L'attribut image sp&eacute;cifie le chemin, par rapport au dossier Configuration, du fichier de l'ic&ocirc;ne qui s'affiche
sur le bouton. En g&eacute;n&eacute;ral, le fichier de l'ic&ocirc;ne est au format GIF ou JPEG, mais tous les formats compatibles avec
Dreamweaver sont accept&eacute;s.
Si vous sp&eacute;cifiez une ic&ocirc;ne pour un s&eacute;lecteur de couleur, celle-ci le remplace enti&egrave;rement. Si l'attribut colorRect est
&eacute;galement d&eacute;fini, la couleur en cours s'affiche au-dessus de l'ic&ocirc;ne dans le rectangle sp&eacute;cifi&eacute;.
Exemple
image=&quot;Toolbars/images/MM/codenav.gif&quot;
disabledImage=&quot;image_path&quot;
Facultatif. Dreamweaver ignore l'attribut disabledImage des &eacute;l&eacute;ments autres que les boutons, les boutons-poussoirs,
les boutons radio, les boutons de menu, de s&eacute;lecteurs de couleurs et de zone de liste modifiable. Cet attribut sp&eacute;cifie le
chemin, par rapport au dossier Configuration, du fichier de l'ic&ocirc;ne que Dreamweaver affiche si le bouton est d&eacute;sactiv&eacute;.
Si vous ne sp&eacute;cifiez pas l'attribut disabledImage, Dreamweaver affiche l'image sp&eacute;cifi&eacute;e dans l'attribut image lorsque
le bouton est d&eacute;sactiv&eacute;.
Exemple
disabledImage=&quot;Toolbars/images/MM/codenav_dis.gif&quot;
overImage=&quot;image_path&quot;
Facultatif. Dreamweaver ignore l'attribut overImage des &eacute;l&eacute;ments autres que les boutons, les boutons-poussoirs, les
boutons radio, les boutons de menu, de s&eacute;lecteurs de couleurs et de zone de liste modifiable. Cet attribut sp&eacute;cifie le
chemin, par rapport au dossier Configuration, du fichier de l'ic&ocirc;ne que Dreamweaver affiche lorsque l'utilisateur
survole le bouton &agrave; l'aide de la souris. Si vous ne sp&eacute;cifiez pas l'attribut overImage, le bouton ne change pas lorsque
l'utilisateur le survole, mais Dreamweaver dessine un cercle autour du bouton.
Exemple
overImage=&quot;Toolbars/images/MM/codenav_ovr.gif&quot;
tooltip=&quot;tooltip string&quot;
Obligatoire. Cet attribut sp&eacute;cifie le texte d'identification ou infobulle qui appara&icirc;t lorsque le curseur de la souris survole
l'&eacute;l&eacute;ment de la barre d'outils.
Derni&egrave;re mise &agrave; jour le 22/6/2011
190
EXTENSION DE DREAMWEAVER
Barres d'outils
Exemple
tooltip=&quot;Code Navigation&quot;
label=&quot;label string&quot;
Facultatif. Cet attribut sp&eacute;cifie un libell&eacute; qui s'affiche &agrave; c&ocirc;t&eacute; de l'&eacute;l&eacute;ment. Dreamweaver n'ajoute pas automatiquement
un signe deux points aux libell&eacute;s. Les libell&eacute;s des &eacute;l&eacute;ments qui ne sont pas des boutons sont toujours plac&eacute;s &agrave; gauche
de l'&eacute;l&eacute;ment. Dreamweaver place les libell&eacute;s des boutons, boutons-poussoirs, boutons radio, boutons de menu et
boutons de liste &agrave; l'int&eacute;rieur du bouton, &agrave; droit de l'ic&ocirc;ne.
Exemple
label=&quot;Title: &quot;
width=&quot;number&quot;
Facultatif. Cet attribut ne s'applique qu'aux &eacute;l&eacute;ments de zone de texte, menu contextuel et zone de liste en sp&eacute;cifiant la
largeur de l'&eacute;l&eacute;ment en pixels. Si vous ne sp&eacute;cifiez pas l'attribut width, Dreamweaver utilise une largeur par d&eacute;faut
moyenne.
Exemple
width=&quot;150&quot;
menuID=&quot;menu_id&quot;
Cet attribut est obligatoire pour les boutons de menu et les boutons de liste, sauf si vous pr&eacute;cisez la fonction
getMenuID() dans un fichier de commande associ&eacute;. Dreamweaver ignore l'attribut menuID pour les autres types
d'&eacute;l&eacute;ments. Cet attribut sp&eacute;cifie l'ID de la barre de menu contenant le menu contextuel qui doit appara&icirc;tre lorsque
l'utilisateur clique sur le bouton, le bouton de menu ou de liste. L'ID provient de l'attribut ID d'une balise menubar dans
le fichier menus.xml.
Exemple
menuID=&quot;DWCodeNavPopup&quot;
colorRect=&quot;left top right bottom&quot;
L'attribut est facultatif pour les s&eacute;lecteurs de couleur qui disposent d'un attribut image. L'attribut colorRect est ignor&eacute;
pour tous les autres types d'&eacute;l&eacute;ments, ainsi que pour les s&eacute;lecteurs de couleurs qui ne sp&eacute;cifient pas une image. Si vous
sp&eacute;cifiez l'attribut colorRect, Dreamweaver affiche la couleur couramment s&eacute;lectionn&eacute;e dans le s&eacute;lecteur de couleur,
dans le rectangle, par rapport au c&ocirc;t&eacute; gauche ou sup&eacute;rieur de l'ic&ocirc;ne. Si vous ne sp&eacute;cifiez pas l'attribut colorRect,
Dreamweaver n'affiche pas la couleur couramment s&eacute;lectionn&eacute;e sur l'image.
Exemple
colorRect=&quot;0 12 16 16&quot;
Derni&egrave;re mise &agrave; jour le 22/6/2011
191
EXTENSION DE DREAMWEAVER
Barres d'outils
file=&quot;command_file_path&quot;
Obligatoire pour les menus d&eacute;roulants et les zones de liste modifiables. L'attribut file est facultatif pour les autres
types d'&eacute;l&eacute;ments. L'attribut file sp&eacute;cifie le chemin, par rapport au dossier Configuration, du fichier de commandes
contenant les fonctions JavaScript qui serviront &agrave; renseigner, mettre &agrave; jour et ex&eacute;cuter l'&eacute;l&eacute;ment. L'attribut file
remplace les attributs enabled, checked, value, update, domRequired, menuID, showIf et command. En g&eacute;n&eacute;ral, si
vous sp&eacute;cifiez un fichier de commandes avec l'attribut file, Dreamweaver ignore tous les attributs &eacute;quivalents
sp&eacute;cifi&eacute;s dans la balise. Pour plus d'informations sur les fichiers de commande, voir &laquo; Fonctions de l'API de commande
de barre d'outils &raquo; &agrave; la page 193.
Exemple
file=&quot;Toolbars/MM/EditTitle.htm&quot;
domRequired=&quot;true&quot; ou &quot;false&quot;
Facultatif. Comme avec les menus, l'attribut domRequired sp&eacute;cifie si le mode Cr&eacute;ation doit &ecirc;tre synchronis&eacute; avec le
mode Code avant que Dreamweaver n'ex&eacute;cute la commande associ&eacute;e. Si vous ne d&eacute;finissez pas cet attribut, il adopte
la valeur true. Cet attribut est l'&eacute;quivalent de la fonction isDOMRequired() dans un fichier de commandes de barre
d'outils.
Exemple
domRequired=&quot;false&quot;
enabled=&quot;script&quot;
Facultatif. Comme avec les menus, le script renvoie une valeur sp&eacute;cifiant si l'&eacute;l&eacute;ment est activ&eacute;. Si vous ne d&eacute;finissez
pas cet attribut, il adopte la valeur enabled. L'attribut enabled est l'&eacute;quivalent de la fonction canAcceptCommand()
dans un fichier de commandes de barre d'outils.
Exemple
enabled=&quot;dw.getFocus() =='textView' || dw.getFocus() == 'html'&quot;
checked=&quot;script&quot;
Cet attribut est obligatoire pour les boutons-poussoirs et les boutons radio. Dreamweaver ignore l'attribut checked
pour les autres types d'&eacute;l&eacute;ments. Comme avec les menus, le script renvoie une valeur sp&eacute;cifiant si l'&eacute;l&eacute;ment est activ&eacute;
ou pas. L'attribut checked est l'&eacute;quivalent de la fonction isCommandChecked() dans un fichier de commandes de
barre d'outils. Si vous ne d&eacute;finissez pas cet attribut, il adopte la valeur unchecked.
Exemple
checked=&quot;dw.getDocumentDOM() != null &amp;&amp; dw.getDocumentDOM().getView() == 'code'&quot;
value=&quot;script&quot;
Cet attribut est obligatoire pour les menus contextuels, les zones de liste modifiable, les zones de texte et les s&eacute;lecteurs
de couleurs. Dreamweaver ignore l'attribut value pour les autres types d'&eacute;l&eacute;ments.
Derni&egrave;re mise &agrave; jour le 22/6/2011
192
EXTENSION DE DREAMWEAVER
Barres d'outils
Pour d&eacute;terminer la valeur &agrave; afficher pour les menus d&eacute;roulants et les zones de liste modifiables, Dreamweaver appelle
d'abord la fonction isCommandchecked() pour chaque &eacute;l&eacute;ment dans le menu. Si la fonction isCommandchecked()
renvoie la valeur true pour un &eacute;l&eacute;ment, Dreamweaver affiche la valeur du premier. Si aucun &eacute;l&eacute;ment ne renvoie la
valeur true ou si la fonction isCommandChecked() n'est pas d&eacute;finie, Dreamweaver appelle la fonction
getCurrentValue() ou ex&eacute;cute le script sp&eacute;cifi&eacute; par l'attribut value. Si le contr&ocirc;le est une zone de liste modifiable,
Dreamweaver affiche la valeur renvoy&eacute;e. Si le contr&ocirc;le est un menu d&eacute;roulant, Dreamweaver ajoute temporairement
la valeur renvoy&eacute;e dans la liste et l'affiche.
Dans tous les autres cas, le script renvoie la valeur en cours &agrave; afficher. Pour les menus d&eacute;roulants ou les zones de liste
modifiables, cette valeur doit correspondre &agrave; l'un des &eacute;l&eacute;ments dans la liste du menu. Pour les zones de liste modifiables
et les zones de texte, la valeur peut correspondre &agrave; une cha&icirc;ne quelconque renvoy&eacute;e par le script. Pour les s&eacute;lecteurs de
couleurs, la valeur doit &ecirc;tre une couleur valide, mais Dreamweaver ne met pas ceci en vigueur.
L'attribut value est l'&eacute;quivalent de la fonction getCurrentValue() dans un fichier de commandes de barre d'outils.
update=&quot;update_frequency_list&quot;
Facultatif. Cet attribut sp&eacute;cifie la fr&eacute;quence d'ex&eacute;cution des gestionnaires des attributs enabled, checked, showif et
value pour mettre &agrave; jour l'&eacute;tat visible de l'&eacute;l&eacute;ment. L'attribut update est l'&eacute;quivalent de la fonction
receiveArguments() dans un fichier de commandes de barre d'outils.
Vous devez sp&eacute;cifier la fr&eacute;quence de la mise &agrave; jour des &eacute;l&eacute;ments de barre d'outils car ces &eacute;l&eacute;ments, contrairement aux
&eacute;l&eacute;ments de menu, sont toujours visibles. C'est pourquoi vous devez toujours s&eacute;lectionner la fr&eacute;quence la moins &eacute;lev&eacute;e
possible et vous assurer que les gestionnaires des attributs enabled, checked et value sont aussi simples que possible.
La liste suivante pr&eacute;sente les gestionnaires possibles pour la fonction update_frequency_list, dans l'ordre croissant de
fr&eacute;quence. Si vous ne d&eacute;finissez pas une valeur pour l'attribut update, la fr&eacute;quence de mise &agrave; jour prend la valeur
onEdit. Vous pouvez sp&eacute;cifier plusieurs fr&eacute;quences de mise &agrave; jour, s&eacute;par&eacute;es par des virgules. Les gestionnaires
s'ex&eacute;cutent sur l'un des &eacute;v&eacute;nements sp&eacute;cifi&eacute;s suivants :
•
•
onServerModelChange s'ex&eacute;cute lorsque le mod&egrave;le de serveur de la page en cours change.
onCodeViewSyncChange s'ex&eacute;cute lorsque le mode Code se synchronise ou se d&eacute;synchronise avec le mode
Cr&eacute;ation.
•
onViewChange s'ex&eacute;cute chaque fois que l'utilisateur bascule entre les modes Code et Cr&eacute;ation, ou entre les modes
Code et Cr&eacute;ation.
•
onEdit s'ex&eacute;cute chaque fois que le document est modifi&eacute; en mode Cr&eacute;ation. Les modifications apport&eacute;es en mode
Code ne d&eacute;clenchent pas cet &eacute;v&eacute;nement.
•
onSelChange s'ex&eacute;cute chaque fois que la s&eacute;lection est modifi&eacute;e en mode Cr&eacute;ation. Les modifications apport&eacute;es en
mode Code ne d&eacute;clenchent pas cet &eacute;v&eacute;nement.
•
onEveryIdle s'ex&eacute;cute r&eacute;guli&egrave;rement lorsque l'application est inactive. Ceci peut demander un certain temps car
les gestionnaires enabler/checked/showif/value sont ex&eacute;cut&eacute;s fr&eacute;quemment. Utilisez-la uniquement pour les
boutons dont l'&eacute;tat actif doit &ecirc;tre modifi&eacute; rapidement &agrave; des moments sp&eacute;cifiques.
Remarque : En r&eacute;alit&eacute;, dans tous ces cas, Dreamweaver ex&eacute;cute les gestionnaires apr&egrave;s l'&eacute;v&eacute;nement sp&eacute;cifi&eacute;, lorsque
l'application est au repos. L'ex&eacute;cution des gestionnaires apr&egrave;s chaque modification ou changement de s&eacute;lection n'est
pas garantie ; les gestionnaires s'ex&eacute;cutent d&egrave;s que possible apr&egrave;s une s&eacute;rie de modifications ou de changements de
s&eacute;lection. Par contre, les gestionnaires s'ex&eacute;cutent lorsque l'utilisateur clique sur un &eacute;l&eacute;ment de barre d'outils.
Exemple
update=&quot;onViewChange&quot;
Derni&egrave;re mise &agrave; jour le 22/6/2011
193
EXTENSION DE DREAMWEAVER
Barres d'outils
command=&quot;script&quot;
Cet attribut est obligatoire pour tous les &eacute;l&eacute;ments, &agrave; l'exception des boutons de menu. Dreamweaver ignore l'attribut
command pour les boutons de menu. Sp&eacute;cifie la fonction JavaScript &agrave; ex&eacute;cuter lorsque l'utilisateur effectue l'une des
op&eacute;rations suivantes :
• L'utilisateur clique sur un bouton.
• L'utilisateur s&eacute;lectionne un &eacute;l&eacute;ment dans un menu d&eacute;roulant ou dans une zone de liste.
• L'utilisateur appuie sur la touche Tab pour passer &agrave; une autre zone, appuie sur la touche Retour ou clique hors d'une
zone de texte ou de liste.
• L'utilisateur s&eacute;lectionne une couleur dans un s&eacute;lecteur de couleur.
L'attribut command est l'&eacute;quivalent de la fonction receiveArguments() dans un fichier de commandes de barre
d'outils.
Exemple
command=&quot;dw.toggleLiveDebug()&quot;
arguments=&quot;argument_list&quot;
Facultatif. Cet attribut sp&eacute;cifie la liste d'arguments, s&eacute;par&eacute;s par des virgules, pour transmettre la fonction
receiveArguments() &agrave; un fichier de commandes de barre d'outils. Si vous ne d&eacute;finissez pas l'attribut arguments,
Dreamweaver transmet l'ID de l'&eacute;l&eacute;ment de la barre d'outils. En outre, les menus contextuels, les zones de liste
modifiables, les zones de texte et les s&eacute;lecteurs de couleurs transmettent leur valeur en cours comme premier
argument, avant ceux sp&eacute;cifi&eacute;s par l'attribut arguments et avant l'ID de l'&eacute;l&eacute;ment si aucun argument n'est sp&eacute;cifi&eacute;.
Exemple
Dans une barre d'outils qui comporte les boutons Annuler et R&eacute;p&eacute;ter, chaque bouton appelle le fichier de commandes
de menu, Edit_Clipboard.htm, et transmet un argument sp&eacute;cifiant l'action, comme indiqu&eacute; dans l'exemple suivant :
&lt;button id=&quot;DW_Undo&quot;
image=&quot;Toolbars/images/MM/undo.gif&quot;
disabledImage=&quot;Toolbars/images/MM/undo_dis.gif&quot;
tooltip=&quot;Undo&quot;
file=&quot;Menus/MM/Edit_Clipboard.htm&quot;
arguments=&quot;'undo'&quot;
update=&quot;onEveryIdle&quot;/&gt;
&lt;button id=&quot;DW_Redo&quot;
image=&quot;Toolbars/images/MM/redo.gif&quot;
disabledImage=&quot;Toolbars/images/MM/redo_dis.gif&quot;
tooltip=&quot;Redo&quot;
file=&quot;Menus/MM/Edit_Clipboard.htm&quot;
arguments=&quot;'redo'&quot;
update=&quot;onEveryIdle&quot;/&gt;
Fonctions de l'API de commande de barre d'outils
Dans de nombreux cas o&ugrave; vous avez sp&eacute;cifi&eacute; un script pour un attribut, vous pouvez &eacute;galement impl&eacute;menter cet
attribut &agrave; l'aide d'une fonction JavaScript dans un fichier de commandes. Cette action est n&eacute;cessaire lorsque les
fonctions doivent accepter des arguments, comme dans le gestionnaire d'une zone de texte, et obligatoire pour les
menus d&eacute;roulants et les zones de liste modifiables.
Derni&egrave;re mise &agrave; jour le 22/6/2011
194
EXTENSION DE DREAMWEAVER
Barres d'outils
L'API du fichier de commandes pour les &eacute;l&eacute;ments de la barre d'outils est une extension de l'API du fichier de
commandes de menu ; vous pouvez ainsi r&eacute;utiliser les fichiers de commandes de menu en tant que fichiers de
commandes de barre d'outils en leur ajoutant des fonctions suppl&eacute;mentaires sp&eacute;cifiques aux barres d'outils.
canAcceptCommand()
Disponibilit&eacute;
Dreamweaver MX.
Description
D&eacute;termine si la barre d'outils est activ&eacute;e. La condition par d&eacute;faut d'un &eacute;l&eacute;ment &eacute;tant l'&eacute;tat activ&eacute;, vous n'avez pas besoin
de d&eacute;finir cette fonction, sauf si la valeur false est renvoy&eacute;e dans au moins un cas.
Arguments
Dans le cas des menus d&eacute;roulants, zones de liste modifiables, zones de texte et s&eacute;lecteurs de couleurs, le premier
argument est la valeur en cours dans le contr&ocirc;le. La fonction getDynamicContent() peut, &eacute;ventuellement, associer
des ID individuels aux &eacute;l&eacute;ments d'un menu d&eacute;roulant. Si l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le menu d&eacute;roulant dispose d'un
ID, Dreamweaver transmet cet ID &agrave; la fonction canAcceptCommand() au lieu de transmettre la valeur. En ce qui
concerne les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas &agrave; une entr&eacute;e dans le
menu d&eacute;roulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver effectue la comparaison avec le
menu d&eacute;roulant, sans respecter la casse, afin de d&eacute;terminer si le contenu de la zone de texte correspond &agrave; une entr&eacute;e
de la liste.
Si vous sp&eacute;cifiez l'attribut arguments pour cet &eacute;l&eacute;ment de la barre d'outils dans le fichier toolbars.xml, les arguments
sont transmis ensuite. Si vous n'avez pas d&eacute;fini l'attribut arguments, Dreamweaver transmet l'ID de l'&eacute;l&eacute;ment.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'&eacute;l&eacute;ment est activ&eacute;, false dans les autres cas.
Exemple
function canAcceptCommand()
{
return (dw.getDocumentDOM() != null);
}
getCurrentValue()
Disponibilit&eacute;
Dreamweaver MX.
Description
Renvoie la valeur actuelle &agrave; afficher dans l'&eacute;l&eacute;ment. Dreamweaver appelle la fonction getCurrentValue() pour les
menus d&eacute;roulants, les zones de liste modifiables, les zones de texte et les s&eacute;lecteurs de couleurs. Pour les menus
d&eacute;roulants, la valeur en cours doit repr&eacute;senter l'un des &eacute;l&eacute;ments dans le menu. Si ce n'est pas le cas, Dreamweaver
s&eacute;lectionne le premier &eacute;l&eacute;ment de la liste. Pour les zones de liste modifiables et les zones de texte, cette valeur peut
correspondre &agrave; une cha&icirc;ne quelconque renvoy&eacute;e par la fonction. Pour les s&eacute;lecteurs de couleurs, la valeur doit &ecirc;tre une
couleur valide, mais Dreamweaver ne met pas ceci en vigueur. Cette fonction est l'&eacute;quivalent de l'attribut value.
Derni&egrave;re mise &agrave; jour le 22/6/2011
195
EXTENSION DE DREAMWEAVER
Barres d'outils
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend l'affichage d'une cha&icirc;ne contenant la valeur en cours. Pour le s&eacute;lecteur de couleur, la cha&icirc;ne
contient la forme RVB de la couleur s&eacute;lectionn&eacute;e (par exemple #FFFFFF pour le blanc).
Exemple
function getCurrentValue()
{
var title = &quot;&quot;;
var dom = dw.getDocumentDOM();
if (dom)
title = dom.getTitle();
return title;
}
getDynamicContent()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction est obligatoire pour les menus d&eacute;roulants et les zones de liste modifiables. Comme pour les menus, cette
fonction renvoie un tableau de cha&icirc;nes pour renseigner le menu d&eacute;roulant. Chacune de ces cha&icirc;nes peut
&eacute;ventuellement se terminer par &quot;;id=id&quot;. Si un ID est sp&eacute;cifi&eacute;, Dreamweaver le transmet &agrave; la fonction
receiveArguments() au lieu de faire appara&icirc;tre la cha&icirc;ne dans le menu.
Le nom getDynamicContent() pr&ecirc;te &agrave; confusion car cette fonction doit &ecirc;tre utilis&eacute;e m&ecirc;me si la liste des entr&eacute;es dans
le menu est fixe. Par exemple, le fichier Text_Size.htm du dossier Configuration/Menus/MM n'est pas un menu
dynamique ; il est con&ccedil;u pour &ecirc;tre appel&eacute; depuis des &eacute;l&eacute;ments statiques d'un ensemble de menus. Toutefois, l'ajout
d'une fonction getDynamicContent() renvoyant une liste de tailles de police possibles permet d'utiliser le m&ecirc;me
fichier de commandes dans un menu d&eacute;roulant de barre d'outils. Les &eacute;l&eacute;ments de barre d'outils ignorent les caract&egrave;res
de soulignement dans les cha&icirc;nes des tableaux renvoy&eacute;s, pour vous permettre de r&eacute;utiliser les fichiers de commandes
de menu. Dans le fichier de commandes de menu, Dreamweaver ignore la fonction getDynamicContent(), car
l'&eacute;l&eacute;ment de menu n'est pas marqu&eacute; comme dynamique.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau de cha&icirc;nes pour renseigner le menu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
196
EXTENSION DE DREAMWEAVER
Barres d'outils
Exemple
function getDynamicContent()
{
var items = new Array;
var filename = dw.getConfigurationPath() + &quot;/Toolbars/MM/AddressList.xml&quot;;
var location = MMNotes.localURLToFilePath(filename);
if (DWfile.exists(location))
{
var addressData = DWfile.read(location);
var addressDOM = dw.getDocumentDOM(dw.getConfigurationPath() +
'/Shared/MM/Cache/empty.htm');
addressDOM.documentElement.outerHTML = addressData;
var addressNodes = addressDOM.getElementsByTagName(&quot;url&quot;);
if (addressNodes.length)
{
for (var i=0; i &lt; addressNodes.length ; i++ )
{
items[i] = addressNodes[i].address + &quot;;id='&quot; +
addressNodes[i].address + &quot;'&quot;;
}
}
}
return items;
getMenuID()
Disponibilit&eacute;
Dreamweaver MX.
Description
Uniquement valide pour les boutons de menu. Dreamweaver appelle la fonction getMenuID() pour obtenir l'ID du
menu devant appara&icirc;tre lorsque l'utilisateur clique sur le bouton.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne contenant un ID de menu, d&eacute;fini dans le fichier menus.xml.
Derni&egrave;re mise &agrave; jour le 22/6/2011
197
EXTENSION DE DREAMWEAVER
Barres d'outils
Exemple
function getMenuID()
{
var dom = dw.getDocumentDOM();
var menuID = '';
if (dom)
{
var view = dom.getView();
var focus = dw.getFocus();
if (view == 'design')
{
menuID = 'DWDesignOnlyOptionsPopup';
}
else if (view == 'split')
{
if (focus == 'textView')
{
menuID = 'DWSplitCodeOptionsPopup';
}
else
{
menuID = 'DWSplitDesignOptionsPopup';
}
}
else if (view == 'code')
{
menuID = 'DWCodeOnlyOptionsPopup';
}
else
{
menuID = 'DWBrowseOptionsPopup';
}
}
return menuID;
}
getUpdateFrequency()
Disponibilit&eacute;
Dreamweaver MX.
Description
Sp&eacute;cifie la fr&eacute;quence d'ex&eacute;cution des gestionnaires des attributs enabled, checked, showif et value pour mettre &agrave;
jour l'&eacute;tat visible de l'&eacute;l&eacute;ment.
Vous devez sp&eacute;cifier la fr&eacute;quence de la mise &agrave; jour des &eacute;l&eacute;ments de barre d'outils, car ces &eacute;l&eacute;ments, contrairement aux
&eacute;l&eacute;ments de menu, sont toujours visibles. C'est pourquoi vous devez toujours choisir la fr&eacute;quence la moins &eacute;lev&eacute;e
possible et vous assurer que les gestionnaires des attributs enabled, checked et value sont aussi simples que possible.
Cette fonction est l'&eacute;quivalent de l'attribut update dans un &eacute;l&eacute;ment de barre d'outils.
Arguments
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
198
EXTENSION DE DREAMWEAVER
Barres d'outils
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne contenant la liste des gestionnaires de mise &agrave; jour, s&eacute;par&eacute;s par des virgules. Vous
trouverez la liste compl&egrave;te des gestionnaires de mise &agrave; jour possibles dans la section
&laquo; update=&quot;update_frequency_list&quot; &raquo; &agrave; la page 192.
Exemple
function getUpdateFrequency()
{
return onSelChange&quot;;
}
isCommandChecked()
Disponibilit&eacute;
Dreamweaver MX.
Description
Renvoie une valeur indiquant si l'&eacute;l&eacute;ment est s&eacute;lectionn&eacute;. Dans le cas des boutons, l'attribut checked indique si le
bouton appara&icirc;t activ&eacute; ou enfonc&eacute;. La fonction isCommandChecked() est l'&eacute;quivalent de l'attribut checked dans une
balise d'&eacute;l&eacute;ment de barre d'outils.
Arguments
Dans le cas des menus d&eacute;roulants, zones de liste modifiables, zones de texte et s&eacute;lecteurs de couleurs, le premier
argument est la valeur en cours dans le contr&ocirc;le. La fonction getDynamicContent() peut, &eacute;ventuellement, associer
des ID individuels aux &eacute;l&eacute;ments d'un menu d&eacute;roulant. Si l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le menu dispose d'un ID,
Dreamweaver transmet cet ID &agrave; la fonction isCommandChecked() au lieu de transmettre la valeur. En ce qui concerne
les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas &agrave; une entr&eacute;e dans le menu
d&eacute;roulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de la zone de liste
avec celui du menu d&eacute;roulant, sans tenir compte des majuscules et des minuscules, pour v&eacute;rifier la correspondance des
&eacute;l&eacute;ments.
Si vous avez sp&eacute;cifi&eacute; l'attribut arguments pour cet &eacute;l&eacute;ment, les arguments sont transmis ensuite. Si vous ne d&eacute;finissez
pas l'attribut arguments, Dreamweaver transmet l'ID de l'&eacute;l&eacute;ment de la barre d'outils.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'&eacute;l&eacute;ment est activ&eacute;, false dans les autres cas.
Exemple
L'exemple suivant d&eacute;termine quel &eacute;l&eacute;ment, le cas &eacute;ch&eacute;ant, doit &ecirc;tre activ&eacute; dans un menu d&eacute;roulant contenant des
formats de paragraphe et des styles CSS :
Derni&egrave;re mise &agrave; jour le 22/6/2011
199
EXTENSION DE DREAMWEAVER
Barres d'outils
function isCommandChecked()
{
var bChecked = false;
var style = arguments[0];
var textFormat = dw.getDocumentDOM().getTextFormat();
if (dw.getDocumentDOM() == null)
bChecked = false;
if (style == &quot;(None)&quot;)
bChecked = (dw.cssStylePalette.getSelectedStyle() == '' || textFormat ==
&quot;&quot; || textFormat == &quot;P&quot; || textFormat == &quot;PRE&quot;);
else if (style == &quot;Heading 1&quot;)
bChecked =0(textFormat == &quot;h1&quot;);
else if (style == &quot;Heading 2&quot;)
bChecked =0(textFormat == &quot;h2&quot;);
else if (style == &quot;Heading 3&quot;)
bChecked =0(textFormat == &quot;h3&quot;);
else if (style == &quot;Heading 4&quot;)
bChecked =0(textFormat == &quot;h4&quot;);
else if (style == &quot;Heading 5&quot;)
bChecked =0(textFormat == &quot;h5&quot;);
else if (style == &quot;Heading 6&quot;)
bChecked =0(textFormat == &quot;h6&quot;);
else
bChecked = (dw.cssStylePalette.getSelectedStyle() == style);
return bChecked;
}
isDOMRequired()
Disponibilit&eacute;
Dreamweaver MX.
Description
Sp&eacute;cifie si la commande de barre d'outils n&eacute;cessite un DOM valide pour fonctionner. Si cette fonction renvoie la valeur
true ou si la fonction n'est pas d&eacute;finie, Dreamweaver suppose que la commande n&eacute;cessite un DOM valide et
synchronise les modes Code et Cr&eacute;ation du document avant de l'ex&eacute;cuter. Cette fonction est l'&eacute;quivalent de l'attribut
domRequired dans une balise d'&eacute;l&eacute;ment de barre d'outils.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si DOM est requis, false dans les autres cas.
Exemple
function isDOMRequired()
{
return false;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
200
EXTENSION DE DREAMWEAVER
Barres d'outils
receiveArguments()
Disponibilit&eacute;
Dreamweaver MX.
Description
Traite tous les arguments transmis depuis un &eacute;l&eacute;ment de barre d'outils. La fonction receiveArguments() est
l'&eacute;quivalent de l'attribut command dans une balise d'&eacute;l&eacute;ment de barre d'outils.
Arguments
Dans le cas des menus d&eacute;roulants, zones de liste modifiables, zones de texte et s&eacute;lecteurs de couleurs, le premier
argument est la valeur en cours dans le contr&ocirc;le. La fonction getDynamicContent() peut, &eacute;ventuellement, associer
des ID individuels aux &eacute;l&eacute;ments d'un menu d&eacute;roulant. Si l'&eacute;l&eacute;ment s&eacute;lectionn&eacute; dans le menu contextuel d&eacute;roulant
dispose d'un ID, Dreamweaver transmet cet ID &agrave; la fonction receiveArguments() au lieu de transmettre la valeur.
En ce qui concerne les zones de liste modifiables, si le contenu actuel de la zone de texte ne correspond pas &agrave; une entr&eacute;e
dans le menu d&eacute;roulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de
la zone de liste avec celui du menu d&eacute;roulant, sans tenir compte des majuscules et des minuscules, pour v&eacute;rifier la
correspondance des &eacute;l&eacute;ments.
Si vous avez sp&eacute;cifi&eacute; l'attribut arguments pour cet &eacute;l&eacute;ment, les arguments sont transmis ensuite. Si vous n'avez pas
d&eacute;fini l'attribut arguments, Dreamweaver transmet l'ID de l'&eacute;l&eacute;ment.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
function receiveArguments(newTitle)
{
var dom = dw.getDocumentDOM();
if (dom)
dom.setTitle(newTitle);
}
showIf()
Disponibilit&eacute;
Dreamweaver MX.
Description
Indique qu'un &eacute;l&eacute;ment appara&icirc;t sur la barre d'outils uniquement si la fonction renvoie la valeur true. Par exemple,
vous pouvez utiliser la fonction showIf() pour afficher certains boutons uniquement lorsque la page utilise un mod&egrave;le
de serveur donn&eacute;. Si vous ne d&eacute;finissez pas la fonction showif(), l'&eacute;l&eacute;ment s'affiche toujours. La fonction showIf()
est l'&eacute;quivalent de l'attribut showIf dans une balise d'&eacute;l&eacute;ment de barre d'outils.
La fonction showIf() est appel&eacute;e &agrave; chaque fois que l'activateur de l'&eacute;l&eacute;ment s'ex&eacute;cute ; c'est-&agrave;-dire, en fonction de la
valeur renvoy&eacute;e par la fonction getUpdateFrequency().
Arguments
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
201
EXTENSION DE DREAMWEAVER
Barres d'outils
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'&eacute;l&eacute;ment s'affiche, false dans les autres cas.
Exemple
function showif()
{
var retval = false;
var dom = dw.getDocumentDOM();
if(dom)
{
var view = dom.getView();
if(view == 'design')
{
retval = true;
}
}
return retval;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
202
Chapitre 12 : Rapports
Adobe Dreamweaver prend en charge deux types de rapports : les rapports de site et les rapports autonomes.
Rapports de site
Les API de rapports peuvent ajouter des rapports personnalis&eacute;s sur le site ou modifier le jeu de rapports pr&eacute;d&eacute;finis
fournis avec Dreamweaver. Vous ne pouvez acc&eacute;der aux rapports de site que par l'interm&eacute;diaire de la bo&icirc;te de dialogue
Rapports.
Les rapports de site sont localis&eacute;s dans le dossier Configuration/Reports de Dreamweaver. Ce dossier contient
plusieurs sous-dossiers repr&eacute;sentant les diff&eacute;rentes cat&eacute;gories de rapport, chaque rapport ne pouvant appartenir qu'&agrave;
une seule cat&eacute;gorie. Les noms de cat&eacute;gorie sont limit&eacute;s &agrave; 31 caract&egrave;res. Chaque sous-dossier peut contenir un fichier
nomm&eacute; _foldername.txt. Si ce fichier est pr&eacute;sent, Dreamweaver utilise son contenu comme nom de cat&eacute;gorie. S'il
n'existe pas, Dreamweaver utilise le nom du dossier.
Lorsque l'utilisateur s&eacute;lectionne plusieurs rapports de site dans la bo&icirc;te de dialogue Rapports, Dreamweaver place tous
les r&eacute;sultats dans la m&ecirc;me fen&ecirc;tre R&eacute;sultats, sous l'onglet Rapports du site du panneau R&eacute;sultats. Dreamweaver
remplace ces r&eacute;sultats d&egrave;s que l'utilisateur ex&eacute;cute un nouveau rapport de site.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er un rapport de site :
Chemin
Fichier
Description
Configuration/Reports/{type/}
reportname.js
Contient les fonctions requises pour g&eacute;n&eacute;rer le contenu
du rapport.
Configuration/Reports/{type/}
reportname.htm
Appelle les fichiers JavaScript appropri&eacute;s. D&eacute;finit
l'interface utilisateur (UI) de la bo&icirc;te de dialogue
Param&egrave;tres associ&eacute;e au rapport, le cas &eacute;ch&eacute;ant.
Configuration/Reports/
Reports.js
Fournit les fonctions communes utilis&eacute;es pour la
g&eacute;n&eacute;ration de rapports.
Fonctionnement des rapports de site
1 Pour acc&eacute;der aux rapports, choisissez Site &gt; Rapports. Dans la bo&icirc;te de dialogue qui s'affiche, s&eacute;lectionnez les
rapports &agrave; ex&eacute;cuter sur des cibles sp&eacute;cifiques.
2 S&eacute;lectionnez les fichiers pour lesquels effectuer les rapports &agrave; l'aide du menu Rapport sur. Ce menu contient les
commandes suivantes : Document actif, Site local en cours entier, Fichiers s&eacute;lectionn&eacute;s dans le site et Dossier.
Lorsque vous s&eacute;lectionnez la commande Dossier, un bouton Parcourir et un champ de texte s'affichent pour vous
permettre de choisir un dossier.
3 Vous pouvez personnaliser des rapports poss&eacute;dant des param&egrave;tres en cliquant sur le bouton Param&egrave;tres, puis en
saisissant des valeurs pour ces param&egrave;tres. Pour pouvoir d&eacute;finir vous-m&ecirc;me des param&egrave;tres, le rapport doit
contenir une bo&icirc;te de dialogue Param&egrave;tres. La d&eacute;finition de ces param&egrave;tres est facultative ; il n'est pas n&eacute;cessaire de
d&eacute;finir les param&egrave;tres de chaque rapport. Si un rapport ne poss&egrave;de pas de bo&icirc;te de dialogue Param&egrave;tres, le bouton
Param&egrave;tres est estomp&eacute; lorsque vous s&eacute;lectionnez le rapport dans la liste.
4 Une fois le rapport s&eacute;lectionn&eacute; et les param&egrave;tres d&eacute;finis, vous cliquez sur le bouton Ex&eacute;cuter.
Derni&egrave;re mise &agrave; jour le 22/6/2011
203
EXTENSION DE DREAMWEAVER
Rapports
Remarque : Si un rapport contient le gestionnaire preventFileActivity, Dreamweaver vous interdit d'ex&eacute;cuter
toute t&acirc;che associ&eacute;e aux fichiers pendant l'ex&eacute;cution du rapport.
Dreamweaver efface alors tous les &eacute;l&eacute;ments de l'onglet Rapports du site du panneau R&eacute;sultats. Dreamweaver appelle
la fonction beginReporting() dans chaque rapport avant le d&eacute;but du processus de g&eacute;n&eacute;ration de rapport. Si un
rapport renvoie la valeur false &agrave; partir de cette fonction, celle-ci est retir&eacute;e du processus de rapport.
5 Chaque fichier est transmis &agrave; chaque rapport s&eacute;lectionn&eacute; dans la bo&icirc;te de dialogue &agrave; l'aide de la fonction
processFile(). Si le rapport doit inclure des informations sur ce fichier dans la liste des r&eacute;sultats, la fonction
dw.resultsPalette.siteReports.addResultItem() doit &ecirc;tre appel&eacute;e. Le processus se poursuit jusqu'&agrave; ce que
tous les fichiers s&eacute;lectionn&eacute;s par l'utilisateur soient trait&eacute;s ou jusqu'&agrave; ce que l'utilisateur clique sur le bouton Arr&ecirc;ter
situ&eacute; au bas de la fen&ecirc;tre. Dreamweaver affiche le nom de chaque fichier en cours de traitement et le nombre de
fichiers restant &agrave; traiter.
6 Dreamweaver appelle la fonction endReporting() dans chaque rapport &agrave; la fin du traitement des fichiers et du
processus de rapport.
Exemple simple de rapport de site
L'exemple d'extension simple recense toutes les images r&eacute;f&eacute;renc&eacute;es dans un fichier sp&eacute;cifique, un site entier, des
fichiers s&eacute;lectionn&eacute;s ou un dossier et affiche le rapport dans l'onglet Rapports du site de la fen&ecirc;tre de r&eacute;sultats.
Pour cr&eacute;er cette extension, vous devez cr&eacute;er la d&eacute;finition du rapport et r&eacute;diger le code JavaScript.
Cet exemple cr&eacute;e deux fichiers dans le dossier HTML Reports : List images.htm, qui contient la d&eacute;finition du rapport,
et List Images.js, qui contient le code JavaScript sp&eacute;cifique &agrave; ce rapport. Vous r&eacute;f&eacute;rencez en outre le fichier Reports.js,
int&eacute;gr&eacute; &agrave; Dreamweaver.
Cr&eacute;ation de la d&eacute;finition du rapport
La d&eacute;finition du rapport sp&eacute;cifie le nom du rapport tel qu'il s'affiche dans la bo&icirc;te de dialogue Rapports, appelle tout
fichier JavaScript requis et d&eacute;finit l'interface utilisateur de la bo&icirc;te de dialogue Param&egrave;tres, le cas &eacute;ch&eacute;ant.
1 Cr&eacute;ez le fichier Configuration/Reports/HTML Reports/List Images.htm.
2 Ajoutez le code ci-dessous pour indiquer le nom du rapport qui s'affichera dans la bo&icirc;te de dialogue Rapports, dans
le titre de la page HTML.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;List Images&lt;/title&gt;
3 En fin de fichier, ajoutez la balise script et sp&eacute;cifiez le fichier Reports.js dans l'attribut src.
&lt;script src=&quot;../Reports.js&quot;&gt;&lt;/script&gt;
4 En fin de fichier, ajoutez une autre balise script et sp&eacute;cifiez le fichier List Images.js, que vous allez cr&eacute;er &agrave; l'&eacute;tape
suivante, dans l'attribut src.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;List Images&lt;/title&gt;
&lt;script src=&quot;../Reports.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;List Images.js&quot;&gt;&lt;/script&gt;
5 Fermez la balise head, ins&eacute;rez des balises body d'ouverture et de fermeture, puis fermez la balise html.
Derni&egrave;re mise &agrave; jour le 22/6/2011
204
EXTENSION DE DREAMWEAVER
Rapports
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
6 Enregistrez le fichier sous le nom List Images.js dans le dossier Configuration/Reports/HTML Reports.
Ecriture du code JavaScript
Dreamweaver propose le fichier Reports.js, &agrave; partir duquel vous pouvez appeler toute fonction. Vous devez cependant
cr&eacute;er &eacute;galement le fichier JavaScript contenant toute fonction sp&eacute;cifique &agrave; votre rapport de site personnalis&eacute;.
1 Cr&eacute;ez le fichier Configuration/Reports/HTML Reports/List Images.js et ins&eacute;rez le contenu ci-dessous :
// Function: configureSettings
// Description: Standard report API, used to initialize and load
//the default values. Does not initialize the UI.
//
function configureSettings() {
return false;
}
// Function: processFile
// Description: Report command API called during file processing.
//
function processFile (fileURL) {
if (!isHTMLType(fileURL)) //If the file isn't an HTML file
return;
//skip it.
var curDOM = dw.getDocumentDOM(fileURL);
// Variable for DOM
var tagList = curDOM.getElementsByTagName('img'); // Variable for img tags
var imgfilename; // Variable for file name specified in img tag
for (var i=0; i &lt; tagList.length; i++) { // For img tag list
imgfilename = tagList[i].getAttribute('src'); // Get image filename
if (imgfilename != null) { // If a filename is specified
// Print the appropriate icon, HTML filename,
// image filename, and line number
reportItem(REP_ITEM_CUSTOM, fileURL, imgfilename,
curDOM.nodeToSourceViewOffsets(tagList[i])); }
}
}
2 Enregistrez le fichier sous le nom List Images.js dans le dossier Configuration/Reports/HTML Reports.
Rapports autonomes
Vous pouvez utiliser l'API de fen&ecirc;tre R&eacute;sultats pour cr&eacute;er un rapport autonome. Les rapports autonomes sont des
commandes normales qui utilisent directement l'API de la fen&ecirc;tre des r&eacute;sultats plut&ocirc;t que l'API de rapports. Les
rapports autonomes sont accessibles de la m&ecirc;me mani&egrave;re que les autres commandes, &agrave; partir des menus ou d'une autre
commande.
Les rapports autonomes r&eacute;sident dans le dossier Configuration/Commands de Dreamweaver. Une commande
personnalis&eacute;e associ&eacute;e &agrave; un rapport autonome figure dans le menu Commandes.
Dreamweaver cr&eacute;e une nouvelle fen&ecirc;tre de r&eacute;sultats chaque fois que l'utilisateur ex&eacute;cute un nouveau rapport
autonome.
Derni&egrave;re mise &agrave; jour le 22/6/2011
205
EXTENSION DE DREAMWEAVER
Rapports
Chemin
Fichier
Description
Configuration/Commands
commandname.htm
D&eacute;finit l'interface utilisateur de la bo&icirc;te de dialogue qui
s'affiche lorsque vous s&eacute;lectionnez la commande et
contient le code JavaScript ou une r&eacute;f&eacute;rence au fichier
JavaScript qui ex&eacute;cute les actions requises pour g&eacute;n&eacute;rer le
rapport.
Configuration/Commands
commandname.js
G&eacute;n&egrave;re une fen&ecirc;tre de r&eacute;sultats et y ins&egrave;re le rapport.
Mode de fonctionnement des rapports autonomes
1 La commande personnalis&eacute;e, que vous cr&eacute;ez pour g&eacute;n&eacute;rer le rapport, ouvre une nouvelle fen&ecirc;tre de r&eacute;sultats en
appelant la fonction dw.createResultsWindow() et en stockant l'objet de r&eacute;sultats renvoy&eacute;s dans une variable de
fen&ecirc;tre. Les fonctions restantes du processus doivent &ecirc;tre appel&eacute;es en tant que m&eacute;thodes de cet objet.
2 La commande personnalis&eacute;e initialise le titre et le format de la fen&ecirc;tre R&eacute;sultats en appelant les fonctions
setTitle() et SetColumnWidths() en tant que m&eacute;thodes de l'objet de la fen&ecirc;tre R&eacute;sultats.
3 La commande peut commencer imm&eacute;diatement &agrave; ajouter des &eacute;l&eacute;ments dans la fen&ecirc;tre R&eacute;sultats en appelant la
fonction addItem() ou &agrave; it&eacute;rer une liste de fichiers en appelant les fonctions setFileList() et
startProcessing() en tant que m&eacute;thodes de l'objet de la fen&ecirc;tre R&eacute;sultats.
4 Lorsque la commande appelle resWin.startProcessing(), Dreamweaver appelle la fonction processFile()
pour chaque URL de fichier dans la liste. D&eacute;finissez la fonction processFile() dans la commande autonome. Elle
re&ccedil;oit l'URL de fichier comme seul argument. Utilisez la fonction setCallbackCommands() de l'objet de la fen&ecirc;tre
R&eacute;sultats si vous voulez que Dreamweaver appelle la fonction processFile() dans une autre commande.
5 Pour appeler la fonction addItem(), la fonction processFile() doit avoir acc&egrave;s &agrave; la fen&ecirc;tre de r&eacute;sultats cr&eacute;&eacute;e par
la commande autonome. La fonction processFile() peut &eacute;galement appeler la fonction stopProcessing() de
l'objet de la fen&ecirc;tre R&eacute;sultats pour arr&ecirc;ter le traitement des fichiers de la liste.
Exemple de rapport autonome simple
L'extension simple de rapport autonome recense les images r&eacute;f&eacute;renc&eacute;es dans un fichier sp&eacute;cifique et affiche le rapport
dans la fen&ecirc;tre de r&eacute;sultats.
Pour cr&eacute;er cette extension, vous devez cr&eacute;er l'interface utilisateur de la bo&icirc;te de dialogue et r&eacute;diger le code JavaScript.
Cet exemple cr&eacute;e deux fichiers dans le dossier Configuration/Commands : List images.htm, qui d&eacute;finit l'interface
utilisateur de la bo&icirc;te de dialogue qui s'affiche lorsque l'utilisateur choisir la commande personnalis&eacute;e, et Listimages.js,
qui contient le code JavaScript sp&eacute;cifique &agrave; ce rapport.
Cr&eacute;ation de l'interface utilisateur de la bo&icirc;te de dialogue
La section body du fichier HTML sp&eacute;cifie le contenu de la bo&icirc;te de dialogue qui s'affiche lorsque l'utilisateur
s&eacute;lectionne la commande personnalis&eacute;e et appelle tout fichier JavaScript requis.
1 Cr&eacute;ez le fichier Configuration/Commands/Listimages.htm.
2 Ins&eacute;rez le code ci-dessous dans le fichier Listimages.htm :
Derni&egrave;re mise &agrave; jour le 22/6/2011
206
EXTENSION DE DREAMWEAVER
Rapports
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Standalone report example&lt;/title&gt;
&lt;script src=&quot;Listimages.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div name=&quot;test&quot;&gt;
&lt;form name=&quot;myForm&quot;&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;Click OK to display the standalone report.&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
3 Enregistrez le fichier sous le nom Listimages.htm dans le dossier Configuration/Commands.
Ecriture du code JavaScript
Cr&eacute;ez le fichier JavaScript contenant les fonctions sp&eacute;cifiques &agrave; votre rapport autonome.
1 Cr&eacute;ez le fichier Listimages.js dans le dossier Configuration/Commands et ins&eacute;rez-y le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
207
EXTENSION DE DREAMWEAVER
Rapports
function stdaloneresultwin()
{
var curDOM = dw.getDocumentDOM(&quot;document&quot;);
var tagList = curDOM.getElementsByTagName('img');
var imgfilename;
var iOffset = 0;
var iLineNumber = 0;
var resWin = dw.createResultsWindow(&quot;Images in File&quot;, [&quot;Line&quot;, &quot;Image&quot;]);
for (var i=0; i &lt; tagList.length; i++)
{
// Get the name of the source file.
imgfilename = tagList[i].getAttribute('src');
// Get the character offset from the start of the file
// to the start of the img tag.
iOffset = curDOM.nodeToOffsets(curDOM.images[i]);
// Based on the offset, figure out what line in the file
// the img tag is on.
iLineNumber = curDOM.getLineFromOffset(iOffset[0]);
// As long as the src attribute specifies a file name,
if (imgfilename != null)
{ // display the line number, and image path.
resWin.addItem(resWin, &quot;0&quot;, &quot;Images in Current File&quot;, null, &not;
null, null, [iLineNumber, imgfilename]);
}
}
return;
}
// add buttons to dialog
function commandButtons()
{
return new Array(&quot;OK&quot;, &quot;stdaloneresultwin()&quot;, &quot;Cancel&quot;, &quot;window.close()&quot;);
}
2 Enregistrez le fichier sous le nom Listimages.js dans le dossier Configuration/Commands.
Fonctions de l'API de rapports
La fonction processFile() est la seule fonction obligatoire pour l'API de rapports. Toutes les autres fonctions sont
facultatives.
processFile()
Disponibilit&eacute;
Dreamweaver 4.
Derni&egrave;re mise &agrave; jour le 22/6/2011
208
EXTENSION DE DREAMWEAVER
Rapports
Description
Cette fonction est appel&eacute;e lorsqu'un fichier doit &ecirc;tre trait&eacute;. La commande Rapport doit traiter le fichier sans le modifier
et utiliser la fonction dw.ResultsPalette.SiteReports(), addResultItem() ou resWin.addItem() pour
renvoyer des informations sur ce fichier. Dreamweaver publie automatiquement le DOM de chaque fichier lorsque le
traitement est termin&eacute;.
Arguments
strFilePath
L'argument strFilePath est le nom et le chemin complet du fichier &agrave; traiter.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
beginReporting()
Disponibilit&eacute;
Dreamweaver 4.
Description
Cette fonction est appel&eacute;e au d&eacute;but du processus de rapport, avant l'ex&eacute;cution du rapport. Si la commande Rapport
renvoie la valeur false &agrave; partir de la fonction, la commande Rapport est exclue du processus de rapport.
Arguments
target
L'argument target est une cha&icirc;ne indiquant la cible de la session de rapport. Il peut s'agir d'une des valeurs suivantes :
&quot;CurrentDoc&quot;, &quot;CurrentSite&quot;, &quot;CurrentSiteSelection&quot; (pour les fichiers s&eacute;lectionn&eacute;s dans un site), ou
&quot;Folder:+ le chemin vers le dossier s&eacute;lectionn&eacute; par l'utilisateur&quot; (par exemple, &quot;Folder:c:temp&quot;).
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le rapport s'ex&eacute;cute correctement, et false si l'&eacute;l&eacute;ment target est
exclu de l'ex&eacute;cution du rapport.
endReporting()
Disponibilit&eacute;
Dreamweaver 4.
Description
Cette fonction est appel&eacute;e &agrave; la fin du processus de rapport.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Derni&egrave;re mise &agrave; jour le 22/6/2011
209
EXTENSION DE DREAMWEAVER
Rapports
commandButtons()
Disponibilit&eacute;
Dreamweaver 4.
Description
D&eacute;finit les boutons devant figurer dans la partie droite de la bo&icirc;te de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas d&eacute;finie, aucun bouton n'appara&icirc;t et la section body du fichier de
rapports s'&eacute;tend de fa&ccedil;on &agrave; remplir la totalit&eacute; de la bo&icirc;te de dialogue.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver renvoie un tableau contenant un nombre pair d'&eacute;l&eacute;ments. Le premier &eacute;l&eacute;ment est une cha&icirc;ne contenant
le libell&eacute; du premier bouton. Le deuxi&egrave;me &eacute;l&eacute;ment est une cha&icirc;ne de code JavaScript d&eacute;finissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres &eacute;l&eacute;ments d&eacute;finissent les boutons suppl&eacute;mentaires de la
m&ecirc;me mani&egrave;re.
Exemple
Dans l'exemple suivant, la fonction commandButtons() d&eacute;finit trois boutons : OK, Annuler et Aide.
function commandButtons(){
return new Array(&quot;OK&quot; , &quot;doCommand()&quot; , &quot;Cancel&quot; , &not;
&quot;window.close()&quot; , &quot;Help&quot; , &quot;showHelp()&quot;);
}
configureSettings()
Disponibilit&eacute;
Dreamweaver 4.
Description
D&eacute;termine si le bouton Param&egrave;tres du rapport doit &ecirc;tre activ&eacute; dans la bo&icirc;te de dialogue Rapports lorsqu'un rapport est
s&eacute;lectionn&eacute;.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le bouton Param&egrave;tres du rapport doit &ecirc;tre activ&eacute;, false dans les
autres cas.
windowDimensions()
Disponibilit&eacute;
Dreamweaver 4.
Derni&egrave;re mise &agrave; jour le 22/6/2011
210
EXTENSION DE DREAMWEAVER
Rapports
Description
D&eacute;finit les dimensions de la bo&icirc;te de dialogue des param&egrave;tres. Si cette fonction n'est pas d&eacute;finie, les dimensions de la
fen&ecirc;tre sont calcul&eacute;es automatiquement.
Remarque : Ne d&eacute;finissez cette fonction que si vous souhaitez utiliser une bo&icirc;te de dialogue Options ayant des dimensions
sup&eacute;rieures &agrave; 640 x 480 pixels.
Arguments
platform
La valeur de l'argument platform est soit &quot;macintosh&quot;, soit &quot;windows&quot;, selon la plate-forme utilis&eacute;e par l'utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver renvoie une cha&icirc;ne au format &quot;widthInPixels,heightInPixels&quot;.
Les dimensions renvoy&eacute;es sont inf&eacute;rieures &agrave; la taille totale de la bo&icirc;te de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoy&eacute;es ne permettent pas de faire appara&icirc;tre toutes les options, des
barres de d&eacute;filement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() d&eacute;finit les dimensions de la bo&icirc;te de dialogue Param&egrave;tres &agrave;
648 x 520 pixels :
function windowDimensions(){
return &quot;648,520&quot;;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
211
Chapitre 13 : Biblioth&egrave;ques et &eacute;diteurs de
balises
Dreamweaver enregistre les informations sur chaque balise, y compris leurs attributs, dans un groupe de sous-dossiers
localis&eacute;s dans le dossier Configuration/TagLibraries. Les fonctions de l'&eacute;diteur de balises et du s&eacute;lecteur de balises
utilisent les informations enregistr&eacute;es dans ces dossiers lors de la manipulation et de la modification des balises.
Dreamweaver comprend des &eacute;diteurs pour les langages suivants : HTML, ASP.NET, CFML, JRun et JSP. Vous pouvez
personnaliser ces &eacute;diteurs et en cr&eacute;er de nouveaux, ou ajouter de nouvelles balises aux biblioth&egrave;ques de balises.
Avant de vous lancer dans la cr&eacute;ation d'&eacute;diteurs de balises personnalis&eacute;s, vous devez comprendre la structure de la
biblioth&egrave;que de balises. Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er une biblioth&egrave;que de balises :
Chemin
Fichier
Description
Configuration/TagLibraries/
TagLibraries.vtm
Recense chaque balise install&eacute;e.
Configuration/TagLibraries/langage/
tag.vtm
Inclut des informations sur les balises, tels les attributs
correspondants, et indique si la balise est associ&eacute;e &agrave;
une balise de fermeture, ainsi que les r&egrave;gles de mise en
forme.
Configuration/TagLibraries/langage/
Fichier_image_balise.gif
Fichier facultatif &agrave; afficher dans l'inspecteur Propri&eacute;t&eacute;s.
Format de fichier biblioth&egrave;que de balises
La biblioth&egrave;que de balises est compos&eacute;e d'un fichier racine, du fichier TagLibraries.vtm, contenant la liste des balises
install&eacute;es, et d'un fichier VTML pour chaque balise dans la biblioth&egrave;que. Le fichier TagLibraries.vtm fonctionne
comme une table des mati&egrave;res et contient des pointeurs vers le fichier VTML de chaque balise. La figure suivante
indique comment Dreamweaver r&eacute;partit les fichiers VTML en fonction du langage de marquage :
Derni&egrave;re mise &agrave; jour le 22/6/2011
212
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Les utilisateurs de Macromedia HomeSite d'Adobe peuvent reconna&icirc;tre la structure des fichiers VTML, mais
Dreamweaver n'utilise pas ces fichiers de la m&ecirc;me mani&egrave;re que HomeSite. La diff&eacute;rence la plus importante est que
Dreamweaver contient son propre programme de rendu HTML pour l'affichage des interfaces utilisateur (UI) des
extensions, et n'utilise donc pas les fichiers Dreamweaver VTML dans le processus de rendu de l'interface utilisateur.
L'exemple suivant pr&eacute;sente la structure du fichier TagLibraries.vtm :
&lt;taglibraries&gt;
&lt;taglibrary name=&quot;Name of tag library&quot; doctypes=&quot;HTML,ASP-JS,ASP-VB&quot; tagchooser=&quot;relative
path to TagChooser.xml file&quot; id=&quot;DWTagLibrary_html&quot;&gt;
&lt;tagref name=&quot;tag name&quot; file=&quot;relative path to tag .vtm file&quot;/&gt;
&lt;/taglibrary&gt;
&lt;taglibrary name=&quot;CFML Tags&quot; doctypes=&quot;ColdFusion&quot; servermodel=&quot;Cold Fusion&quot;
tagchooser=&quot;cfml/TagChooser.xml&quot; id=&quot;DWTagLibrary_cfml&quot;&gt;
&lt;tagref name=&quot;cfabort&quot; file=&quot;cfml/cfabort.vtm&quot;/&gt;
&lt;/taglibrary&gt;
&lt;taglibrary name=&quot;ASP.NET Tags&quot; doctypes=&quot;ASP.NET_CSharp,ASP.NET_VB&quot; servermodel=&quot;ASPNet&quot;
prefix=&quot;&lt;asp:&quot; tagchooser=&quot;ASPNet/TagChooser.xml&quot; id=&quot;DWTagLibrary_aspnet&quot;&gt;
&lt;tagref name=&quot;dataset&quot; file=&quot;aspnet/dataset.vtm&quot; prefix=&quot;&lt;mm:dataset&quot;/&gt;
&lt;/taglibrary&gt;
&lt;/taglibraries&gt;
La balise taglibrary regroupe une ou plusieurs balises dans une biblioth&egrave;que de balises. Lorsque vous importez des
balises ou cr&eacute;ez un nouveau jeu de balises, vous pouvez les regrouper dans des biblioth&egrave;ques de balises. Souvent, un
regroupement taglibrary correspond &agrave; un ensemble de balises qui sont d&eacute;finies dans un fichier TLD de pages JSP
(JavaServer Pages), un fichier DTD (Document Type Definition) de format XML, un espace de nom ASP.Net ou dans
tout autre regroupement logique.
Le tableau suivant pr&eacute;sente les attributs taglibrary :
Attribut
Description
Obligatoire ou facultatif
taglibrary.name
Utilis&eacute; pour r&eacute;f&eacute;rencer la biblioth&egrave;que de balises dans l'interface
utilisateur.
Obligatoire
taglibrary.doctypes
Indique les types de documents pour lesquels cette biblioth&egrave;que Obligatoire
est active. Lorsque la biblioth&egrave;que est active, les balises de
biblioth&egrave;que s'affichent dans le menu contextuel Conseils de code.
Les biblioth&egrave;ques de balises ne peuvent pas toutes &ecirc;tre actives en
m&ecirc;me temps car des conflits de nom risquent de survenir (par
exemple, les fichiers HTML et WML ne sont pas compatibles).
taglibrary.prefix
Facultatif
Lorsqu'ils sont sp&eacute;cifi&eacute;s, les balises qui appartiennent &agrave; la
biblioth&egrave;que de balises prennent la forme taglibrary.prefix+
tagref.name. Par exemple, si taglibrary.prefix vaut
&quot;&lt;jrun:&quot; et si tagref.name vaut &quot;if&quot;, la balise prend la forme
&quot;&lt;jrun:if&quot;. Cet attribut peut &ecirc;tre ignor&eacute; pour une balise d&eacute;finie.
Derni&egrave;re mise &agrave; jour le 22/6/2011
213
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Attribut
Description
Obligatoire ou facultatif
taglibrary.servermodel
Si les balises dans la biblioth&egrave;que de balises s'ex&eacute;cutent sur un
Facultatif
serveur d'application, l'attribut servermodel identifie le mod&egrave;le
serveur de la balise. S'il s'agit de balises c&ocirc;t&eacute; client (et non de
balises c&ocirc;t&eacute; serveur), l'attribut servermodel est ignor&eacute;. L'attribut
servermodel est utilis&eacute; &eacute;galement pour v&eacute;rifier les navigateurs
cibles.
taglibrary.id
Cet attribut peut &ecirc;tre une cha&icirc;ne quelconque diff&eacute;rente des
attributs taglibrary.ID des autres biblioth&egrave;ques de balises du
fichier. Extension Manager utilise l'attribut ID afin de laisser aux
fichiers MXP la possibilit&eacute; d'ins&eacute;rer de nouveaux taglibrary et
fichiers tags dans le fichier TagLibraries.vtm.
Facultatif
taglibrary.tagchooser
Un chemin relatif au fichier TagChooser.xml associ&eacute; &agrave; cette
biblioth&egrave;que de balises.
Facultatif
Le tableau suivant pr&eacute;sente les attributs tagref :
Attribut
Description
Obligatoire ou facultatif
tagref.name
Utilis&eacute; pour r&eacute;f&eacute;rencer la balise dans l'interface utilisateur.
Obligatoire
tagref.prefix
Indique comment doit s'afficher la balise en mode Code. Lorsqu'il
est utilis&eacute;, l'attribut tagref.prefix d&eacute;termine le pr&eacute;fixe de la
balise en cours. Lorsqu'il est d&eacute;fini, il remplace la valeur sp&eacute;cifi&eacute;e
pour l'attribut taglibrary.prefix.
Facultatif
tagref.file
R&eacute;f&eacute;rence le fichier VTML de la balise.
Facultatif
L'attribut tagref.prefix pouvant remplacer la valeur de l'attribut taglibrary.prefix, la relation entre ces deux
attributs peut pr&ecirc;ter &agrave; confusion. Le tableau suivant montre la relation entre les attributs taglibrary.prefix et
tagref.prefix :
L'attribut taglibrary.prefix est-il
d&eacute;fini ?
L'attribut tagref.prefix est-il
d&eacute;fini ?
Pr&eacute;fixe de balise obtenu
Non
Non
'&lt;' + tagref.name
Oui
Non
taglibrary.prefix + tagref.name
Non
Oui
tagref.prefix
Oui
Oui
tagref.prefix
Pour d&eacute;finir les balises, Dreamweaver utilise une version modifi&eacute;e du format de fichier VTML. L'exemple suivant
pr&eacute;sente tous les &eacute;l&eacute;ments que Dreamweaver doit utiliser pour d&eacute;finir une balise individuelle :
Derni&egrave;re mise &agrave; jour le 22/6/2011
214
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
&lt;tag name=&quot;input&quot; bind=&quot;value&quot; casesensitive=&quot;no&quot; endtag=&quot;no&quot;&gt;
&lt;tagformat indentcontents=&quot;yes&quot; formatcontents=&quot;yes&quot; nlbeforetag nlbeforecontents=0
nlaftercontents=0 nlaftertag=1 /&gt;
&lt;tagdialog file = &quot;input.HTM&quot;/&gt;
&lt;attributes&gt;
&lt;attrib name=&quot;name&quot;/&gt;
&lt;attrib name=&quot;wrap&quot; type=&quot;Enumerated&quot;&gt;
&lt;attriboption value=&quot;off&quot;/&gt;
&lt;attriboption value=&quot;soft&quot;/&gt;
&lt;attriboption value=&quot;hard&quot;/&gt;
/attrib&gt;
&lt;attrib name=&quot;onFocus&quot; casesensitive=&quot;yes&quot;/&gt;
&lt;event name=&quot;onFocus&quot;/&gt;
&lt;/attributes&gt;
&lt;/tag&gt;
Le tableau suivant pr&eacute;sente les attributs de d&eacute;finition des balises :
Attribut
Description
Obligatoire ou facultatif
tag.bind
Utilis&eacute; par le panneau Liaisons de donn&eacute;es. Lorsque vous
s&eacute;lectionnez une balise de ce type, l'attribut bind indique
l'attribut par d&eacute;faut pour la liaison des donn&eacute;es.
Facultatif
tag.casesensitive
Indique si le nom de la balise doit respecter la casse. Si le nom Facultatif
de la balise doit respecter la casse, il est ins&eacute;r&eacute; dans le
document de l'utilisateur exactement comme sp&eacute;cifi&eacute; dans
la biblioth&egrave;que de balises. S'il n'est pas n&eacute;cessaire de
respecter la casse, le nom de la balise est ins&eacute;r&eacute; en utilisant la
casse par d&eacute;faut sp&eacute;cifi&eacute;e dans l'onglet Format de code de la
bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. Si vous ne sp&eacute;cifiez pas
l'attribut casesensitive, la balise ne distingue par les
majuscules des minuscules.
tag.endtag
Sp&eacute;cifie si la balise dispose d'une balise d'ouverture et d'une Facultatif
balise de fermeture. Par exemple, la balise input ne
comporte pas de balise de fermeture. Il n'existe pas de balise
/input correspondante. Si la balise de fermeture est
facultative, l'attribut ENDTAG doit &ecirc;tre d&eacute;fini sur Yes.
Sp&eacute;cifiez xml pour appliquer la syntaxe XML &agrave; une balise
vide. Par exemple, &lt;tag name=&quot;foo&quot; endtag=&quot;xml&quot;
tagtype=&quot;empty&quot;&gt; ins&egrave;re &lt;foo/&gt;.
tagformat
D&eacute;finit les r&egrave;gles de mise en forme de la balise. Dans les
versions ant&eacute;rieures &agrave; Dreamweaver MX, les r&egrave;gles de mise
en forme &eacute;taient enregistr&eacute;es dans le fichier
SourceFormat.txt.
Facultatif
tagformat.indentcontents
Indique si le contenu de cette balise doit &ecirc;tre mis en retrait.
Facultatif
tagformat.formatcontents
Indique si le contenu de cette balise doit &ecirc;tre analys&eacute;. Cet
Facultatif
attribut est d&eacute;fini sur No pour les balises telles que SCRIPT et
STYLE, dans lesquelles le contenu n'est pas du code HTML.
tagformat.nlbeforetag
Facultatif
Sp&eacute;cifie si un caract&egrave;re de nouvelle ligne doit &ecirc;tre inclus
avant cette balise. La valeur 0 signifie non et la valeur 1, oui.
tagformat.nlbeforecontents
Le nombre de caract&egrave;res de nouvelle ligne devant &ecirc;tre
ins&eacute;r&eacute;s avant le contenu de cette balise.
Facultatif
tagformat.nlaftercontents
Le nombre de caract&egrave;res de nouvelle ligne devant &ecirc;tre
ins&eacute;r&eacute;s apr&egrave;s le contenu de cette balise.
Facultatif
Derni&egrave;re mise &agrave; jour le 22/6/2011
215
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Attribut
Description
Obligatoire ou facultatif
tagformat.nlaftertag
Sp&eacute;cifie si un caract&egrave;re de nouvelle ligne doit &ecirc;tre inclus
apr&egrave;s cette balise. La valeur 0 signifie non et la valeur 1, oui.
Facultatif
attrib.name
Le nom de l'attribut, tel qu'il appara&icirc;t dans le code source.
Obligatoire
attrib.type
S'il n'est pas d&eacute;fini, l'attribut attrib.type est &quot;text&quot;. Ses Facultatif
valeurs peuvent &ecirc;tre les suivantes : TEXT (texte libre)
ENUMERATED (liste de valeurs &eacute;num&eacute;r&eacute;es) COLOR (valeur de
couleur : nom ou valeur hexad&eacute;cimale) FONT (nom ou famille
de polices) STYLE (attribut de styles CSS) CSSSTYLE (nom
de classe CSS) CSSID (ID de classe CSS) FILEPATH (chemin
d'acc&egrave;s complet &agrave; un fichier) DIRECTORY (chemin d'acc&egrave;s &agrave;
un dossier) FILENAME (nom de fichier seul) RELATIVEPATH
(repr&eacute;sentation relative du chemin d'acc&egrave;s) FLAG (attribut
ON/OFF qui ne contient aucune valeur).
attrib.casesensitive
Indique si le nom de l'attribut doit respecter la casse. Si
Facultatif
l'attribut CASESENSITIVE est absent, le nom de l'attribut ne
distingue pas les majuscules des minuscules.
Remarque : Dans les versions ant&eacute;rieures &agrave; Dreamweaver MX, les informations sur les balises sont enregistr&eacute;es dans le
fichier Configuration/TagAttributeList.txt.
S&eacute;lecteur de balises
Le s&eacute;lecteur de balises vous permet d'afficher les balises dans des groupes fonctionnels et d'acc&eacute;der rapidement aux
balises fr&eacute;quemment utilis&eacute;es. Pour ajouter une balise ou un groupe de balises dans le s&eacute;lecteur de balises, vous devez
d'abord l'ajouter dans la biblioth&egrave;que de balises. Vous pouvez effectuer cette op&eacute;ration &agrave; l'aide de la bo&icirc;te de dialogue
Editeur de la biblioth&egrave;que de balises ou en installant une extension Dreamweaver, empaquet&eacute;e dans un fichier MXP.
Fichiers Tagchooser.xml
Les fichiers Tagchooser.xml contiennent les m&eacute;tadonn&eacute;es utilis&eacute;es pour organiser les regroupements de balises qui
apparaissent dans le s&eacute;lecteur de balises. Chaque balise livr&eacute;e avec Dreamweaver est enregistr&eacute;e dans un regroupement
fonctionnel, et est disponible dans le s&eacute;lecteur de balises. Vous pouvez regrouper les balises existantes et cr&eacute;er des
groupes de nouvelles balises en modifiant les fichiers TagChooser.xml. Vous pouvez &eacute;galement personnaliser la
structure des balises en cr&eacute;ant des sous-cat&eacute;gories pour permettre aux utilisateurs d'acc&eacute;der facilement aux balises les
plus importantes pour leur travail.
Les fichiers TagLibraries.vtm prennent en charge l'utilisation de l'attribut taglibrary.tagchooser, qui pointe vers
les fichiers Tagchooser.xml. Si vous modifiez les fichiers Tagchooser.xml existants ou si vous en cr&eacute;ez de nouveaux,
l'attribut taglibrary.tagchooser doit pointer vers l'emplacement exact du s&eacute;lecteur de balises pour pouvoir
fonctionner correctement.
S'il n'existe pas d'attribut taglibrary.tagchooser, le s&eacute;lecteur de balises affiche l'arborescence d&eacute;finie dans le
TagLibraries.vtm.
Les fichiers TagChooser.xml r&eacute;sident dans le dossier Configuration/TagLibraries/Nom_biblioth&egrave;que_balises.
L'exemple suivant pr&eacute;sente la structure des fichiers TagChooser.xml :
Derni&egrave;re mise &agrave; jour le 22/6/2011
216
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
&lt;?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; standalone=&quot;yes&quot; ?&gt;
&lt;tclibrary name=&quot;Friendly name for library node&quot; desc='Description for incorporated
reference' reference=&quot;Language[,Topic[,Subtopic]]&quot;&gt;
&lt;category name=&quot;Friendly name for category node&quot; desc='Description for incorporated
reference' reference=&quot;Language[,Topic[,Subtopic]]&quot; id=&quot;Unique id&quot;&gt;
&lt;category name=&quot;Friendly name for subcategory node&quot; ICON=&quot;Relative path&quot;
desc='Description for incorporated reference' reference=&quot;Language,Topic[,Subtopic]&quot;
id=&quot;Unique id&quot;&gt;
&lt;element name=&quot;Friendly name for list item&quot; value='Value to pass to visual dialog
editors' desc='Description for incorporated reference'
reference=&quot;Language[,Topic[,Subtopic]]&quot; id=&quot;Unique id&quot;/&gt;
... more elements to display in the list view ...
&lt;/category&gt;
... more subcategories ...
&lt;/category&gt;
... more categories ...
&lt;/tclibrary&gt;
Le tableau suivant pr&eacute;sente les balises pouvant &ecirc;tre utilis&eacute;es dans les fichiers TagChooser.xml :
Balise
Description
Obligatoire ou facultatif
tclibrary
Balise ext&eacute;rieure qui encapsule cette structure de s&eacute;lecteur de balises de Obligatoire
la biblioth&egrave;que de balises.
tclibrary.name
Cette valeur s'affiche dans le nœud Arborescence.
Obligatoire
tclibrary.desc
Cette valeur est une cha&icirc;ne HTML qui s'affiche dans la section Infos sur
les balises de la bo&icirc;te de dialogue S&eacute;lecteur de balises. S'il n'existe pas
d'attribut desc, les informations Infos sur les balises proviennent du
panneau R&eacute;f&eacute;rence. Interchangeable avec tclibrary.reference.
Facultatif (desc et reference
s'excluent mutuellement)
tclibrary.reference
Cette valeur d&eacute;crit le langage, la rubrique et la sous-rubrique &agrave; afficher
dans la section Infos sur les balises de la bo&icirc;te de dialogue S&eacute;lecteur de
balises. Interchangeable avec tclibrary.desc.
Facultatif (desc et reference
s'excluent mutuellement)
La balise category repr&eacute;sente tous les autres nœuds dans l'arborescence sous le nœud de la balise tclibrary, comme
illustr&eacute; dans le tableau suivant :
Balise
Description
Obligatoire ou facultatif
category.name
Cette valeur s'affiche dans le nœud Arborescence.
Obligatoire
category.desc
Cette valeur est une cha&icirc;ne HTML qui s'affiche dans la section Infos sur
les balises de la bo&icirc;te de dialogue S&eacute;lecteur de balises. Si desc ou
reference attr n'est pas sp&eacute;cifi&eacute;, rien ne s'affiche dans la section
Infos sur les balises.
Facultatif (desc et reference
s'excluent mutuellement)
category.reference
Cette valeur d&eacute;crit le langage, la rubrique et la sous-rubrique &agrave; afficher
dans la section Infos sur les balises.
Facultatif (desc et reference
s'excluent mutuellement)
category.icon
Cette valeur est un chemin relatif vers un fichier GIF d'ic&ocirc;ne.
Facultatif
category.id
Toute cha&icirc;ne diff&eacute;rente des attributs category.id des autres
cat&eacute;gories dans ce fichier.
Obligatoire
Le tableau suivant r&eacute;pertorie les attributs de la balise element, qui repr&eacute;sente la balise &agrave; ins&eacute;rer :
Derni&egrave;re mise &agrave; jour le 22/6/2011
217
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Attribut
Description
Obligatoire ou facultatif
element.name
Cette valeur s'affiche comme un &eacute;l&eacute;ment de liste.
Obligatoire
element.value
Une valeur plac&eacute;e directement dans le code ou un param&egrave;tre qui est
transmis vers les bo&icirc;tes de dialogue visuelles.
Obligatoire
element.desc
Cette valeur est une cha&icirc;ne HTML et s'affiche dans le panneau R&eacute;f&eacute;rence
incorpor&eacute;. S'il n'est pas sp&eacute;cifi&eacute;, l'attribut reference affiche le contenu
de la r&eacute;f&eacute;rence dans le panneau R&eacute;f&eacute;rence incorpor&eacute;.
Facultatif (desc et reference
s'excluent mutuellement)
element.reference
Jusqu'&agrave; trois cha&icirc;nes, s&eacute;par&eacute;es par des virgules, d&eacute;crivant respectivement Facultatif (desc et reference
le langage, la rubrique et la sous-rubrique. Ces informations s'affichent
s'excluent mutuellement)
dans le panneau R&eacute;f&eacute;rence. La premi&egrave;re cha&icirc;ne est obligatoire. La
deuxi&egrave;me cha&icirc;ne est obligatoire pour la balise element seulement et
facultative pour les balises category et tclibrary. La troisi&egrave;me cha&icirc;ne
est facultative.
element.id
Toute cha&icirc;ne diff&eacute;rente des attributs element.id des autres &eacute;l&eacute;ments
dans ce fichier.
Facultatif
Exemple simple de cr&eacute;ation d'un &eacute;diteur de balise
Les exemples dans cette section utilisent cfweather, une balise Adobe ColdFusion con&ccedil;ue pour extraire la
temp&eacute;rature courante &agrave; partir d'une base de donn&eacute;es m&eacute;t&eacute;orologiques, et illustrent les &eacute;tapes n&eacute;cessaires &agrave; la cr&eacute;ation
d'un nouvel &eacute;diteur de balises.
Les attributs de la balise cfweather sont d&eacute;crits dans le tableau suivant :
Attribut
Description
zip
Un code postal de cinq chiffres
tempaturescale
L'&eacute;chelle de temp&eacute;rature (Celsius ou Fahrenheit)
Pour cr&eacute;er ce nouvel &eacute;diteur de balises, enregistrez la balise, cr&eacute;ez une d&eacute;finition de balise, cr&eacute;ez une interface
utilisateur de l'&eacute;diteur et ajoutez une balise au S&eacute;lecteur de balises.
Enregistrement de la balise dans la biblioth&egrave;que de balises
Afin que Dreamweaver puisse reconna&icirc;tre la nouvelle balise, celle-ci doit &ecirc;tre identifi&eacute;e dans le fichier
TagLibraries.vtm, localis&eacute; dans le dossier Configuration/TagLibraries. Toutefois, l'utilisateur peut se trouver sur une
plate-forme multiutilisateurs telles que Windows XP, Windows 2000, Windows NT ou Mac OS X. Dans ce cas, un
autre fichier TagLibraries.vtm se trouve dans le dossier Configuration de l'utilisateur. C'est ce fichier qui doit &ecirc;tre mis
&agrave; jour, car il s'agit de l'instance que Dreamweaver recherche et analyse.
L'emplacement du dossier Configuration varie selon la plate-forme utilisateur.
Sous Windows 2000 et Windows XP :
&lt;drive&gt;:\Documents and Settings\&lt;username&gt;\Application Data\Adobe\\xc2
Dreamweaver CS5\Configuration
Remarque : Sous Windows XP, il se peut que ce dossier se trouve dans un dossier cach&eacute;.
Sous Mac OS X :
Derni&egrave;re mise &agrave; jour le 22/6/2011
218
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
&lt;drive&gt;:Users:&lt;username&gt;:Library:Application Support:Adobe:&not;
Dreamweaver CS5:Configuration
Si Dreamweaver ne parvient pas &agrave; trouver le fichier TagLibraries.vtm dans le dossier Configuration de l'utilisateur, il
effectue une recherche dans le dossier Configuration de Dreamweaver.
Remarque : Sur une plate-forme multi-utilisateurs, si vous modifiez la copie du fichier TagLibraries.vtm qui se trouve
dans le dossier Configuration de Dreamweaver, Dreamweaver n'est pas inform&eacute; de ces modifications. Dreamweaver
analyse la copie du fichier TagLibraries.vtm dans le dossier Configuration de l'utilisateur, et pas celle qui se trouve dans
son propre dossier Configuration.
cfweather est une balise ColdFusion. Vous pouvez donc enregistrer la balise cfweather dans le groupe de
biblioth&egrave;que de balises correspondant qui existe d&eacute;j&agrave;.
1 Ouvrez le fichier TagLibraries.vtm dans l'&eacute;diteur de texte.
2 Faites d&eacute;filer les biblioth&egrave;ques de balises existantes jusqu'&agrave; localiser les balises CFML.
3 Ajoutez un &eacute;l&eacute;ment de r&eacute;f&eacute;rence de balise, comme indiqu&eacute; dans l'exemple suivant :
&lt;tagref name=&quot;cfweather&quot; file=&quot;cfml/cfweather.vtm&quot;/&gt;
4 Enregistrez le fichier.
La balise est maintenant enregistr&eacute;e dans la biblioth&egrave;que de balises et contient un pointeur vers le fichier de d&eacute;finition
de balise cfweather.vtm.
Cr&eacute;ation d'un fichier de d&eacute;finition de balise (VTML)
Lorsqu'un utilisateur s&eacute;lectionne une balise enregistr&eacute;e &agrave; l'aide du s&eacute;lecteur de balises ou d'un &eacute;diteur de balises,
Dreamweaver recherche un fichier VTML correspondant pour la d&eacute;finition de la balise.
1 Dans un &eacute;diteur de texte, cr&eacute;ez un fichier contenant les &eacute;l&eacute;ments suivants :
&lt;TAG NAME=&quot;cfweather&quot; endtag=&quot;no&quot;&gt;
&lt;TAGFORMAT NLBEFORETAG=&quot;1&quot; NLAFTERTAG=&quot;1&quot;/&gt;
&lt;TAGDIALOG FILE=&quot;cfweather.htm&quot;/&gt;
&lt;ATTRIBUTES&gt;
&lt;ATTRIB NAME=&quot;zip&quot; TYPE=&quot;TEXT&quot;/&gt;
&lt;ATTRIB NAME=&quot;tempaturescale&quot; TYPE=&quot;ENUMERATED&quot;&gt;
&lt;ATTRIBOPTION VALUE=&quot;Celsius&quot;/&gt;
&lt;ATTRIBOPTION VALUE=&quot;Fahrenheit&quot;/&gt;
&lt;/ATTRIB&gt;
&lt;/ATTRIBUTES&gt;
&lt;/TAG&gt;
2 Enregistrez le fichier cfweather.vtm dans le dossier Configuration/Taglibraries/CFML.
Le fichier de d&eacute;finition de balise permet &agrave; Dreamweaver d'ex&eacute;cuter les op&eacute;rations de code contextuel, de finalisation
de code et de mise en forme pour la balise cfweather.
Cr&eacute;ation d'une interface utilisateur d'&eacute;diteur de balises
1 Enregistrez le fichier cfweather.htm dans le dossier Configuration/Taglibraries/CFML :
Derni&egrave;re mise &agrave; jour le 22/6/2011
219
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//dialog&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CFWEATHER&lt;/title&gt;
&lt;script src=&quot;../../Shared/Common/Scripts/dwscripts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../Shared/Common/Scripts/ListControlClass.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../Shared/Common/Scripts/tagDialogsCmn.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
/************************* GLOBAL VARS **************************/
var TEMPATURESCALELIST;
// tempaurelist control (initialized in initializeUI())
var theUIObjects;
// array of UI objects used by common API functions
/****************************************************************/
// inspectTag() API function defined (required by all tag editors)
function inspectTag(tagNodeObj)
{
// call into a common library version of inspectTagCommon defined
// in tagDialogCmns.js (note that it's been included)
// For more information about this function, look at the comments
// for inspectTagCommon in tagDialogCmn.js
tagDialog.inspectTagCommon(tagNodeObj, theUIObjects);
}
function applyTag(tagNodeObj)
{
// call into a common library version of applyTagCommon defined
// in tagDialogCmns.js (note that it's been included)
// For more information about this function, look at the comments
// for applyTagCommon in tagDialogCmn.js
tagDialog.applyTagCommon(tagNodeObj, theUIObjects);
}
function initializeUI()
{
// define two arrays for the values and display captions for the list
control
var theTempatureScaleCap = new Array(&quot;celsius&quot;,&quot;fahrenheit&quot;);
var theTempatureScaleVal = new Array(&quot;celsius&quot;,&quot;fahrenheit&quot;);
// instantiate a new list control
TEMPATURESCALELIST = new ListControl(&quot;thetempaturescale&quot;);
// add the tempaturescalelist dropdown list control to the uiobjects
theUIObjects0= new Array(TEMPATURESCALELIST);
// call common populateDropDownList function defined in tagDialogCmn.js to
// populate the tempaturescale list control
tagDialog.populateDropDownList(TEMPATURESCALELIST, theTempatureScaleCap,
theTempatureScaleVal, 1);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;initializeUI()&quot;&gt;
&lt;div name=&quot;General&quot;&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
220
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
&lt;table border=&quot;0&quot; cellspacing=&quot;4&quot;&gt;
&lt;tr&gt;
&lt;td valign=&quot;baseline&quot; align=&quot;right&quot; nowrap=&quot;nowrap&quot;&gt;Zip Code: &lt;/td&gt;
&lt;td nowrap=&quot;nowrap&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;attr:cfargument:zip&quot; name=&quot;thezip&quot; attname=&quot;zip&quot;
style=&quot;width:100px&quot;0/&gt;&amp;nbsp;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td valign=&quot;baseline&quot; align=&quot;right&quot; nowrap=&quot;nowrap&quot;&gt;Type: &lt;/td&gt;
&lt;td nowrap=&quot;nowrap&quot;&gt;
&lt;select name=&quot;thetempaturescale&quot; id=&quot;attr:cfargument:tempaturescale&quot;
attname=&quot;tempaturescale&quot; editable=&quot;false&quot; style=&quot;width:200px&quot;&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Vous allez ensuite v&eacute;rifier le bon fonctionnement de l'&eacute;diteur de balises.
2 Lancez Dreamweaver.
3 Entrez cfweather en mode Code.
4 Cliquez &agrave; l'aide du bouton droit de la souris sur la balise.
5 S&eacute;lectionnez Modifier la balise cfweather dans le menu contextuel.
Si l'&eacute;diteur de balises d&eacute;marre, il a &eacute;t&eacute; cr&eacute;&eacute; correctement.
Ajout d'une balise au s&eacute;lecteur de balises
1 Modifiez le fichier TagChooser.xml dans le dossier Configuration/Taglibraries/CFML en ajoutant une nouvelle
cat&eacute;gorie appel&eacute;e Balises tierces, qui met en valeur la balise cfweather, comme indiqu&eacute; dans l'exemple suivant :
&lt;category name=&quot;Third Party Tags&quot; icon=&quot;icons/Elements.gif&quot; reference='CFML'&gt;
&lt;element name=&quot;cfweather&quot; value='cfweather zip=&quot;&quot; temperaturescale=&quot;fahrenheit&quot;&gt;' /&gt;
&lt;/category&gt;
Remarque : Sur les plates-formes multi-utilisateurs, le fichier Tagchooser.xml existe &eacute;galement dans le dossier
Configuration de l'utilisateur. Pour plus d'informations sur les plates-formes multi-utilisateurs, voir &laquo; Enregistrement
de la balise dans la biblioth&egrave;que de balises &raquo; &agrave; la page 217.
V&eacute;rifiez &agrave; pr&eacute;sent que la balise cfweather figure bien dans le s&eacute;lecteur de balises.
2 Choisissez Insertion &gt; Balise.
3 D&eacute;veloppez le groupe Balises CFML.
4 S&eacute;lectionnez le groupe Balises tierces qui s'affiche au bas du s&eacute;lecteur de balises. La balise cfweather s'affiche dans
la zone de liste sur la droite.
5 S&eacute;lectionnez cfweather, puis cliquez sur le bouton Ins&eacute;rer.
L'&eacute;diteur de balises doit appara&icirc;tre.
Derni&egrave;re mise &agrave; jour le 22/6/2011
221
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Fonctions de l'API de l'&eacute;diteur de balises
Afin de cr&eacute;er un nouvel &eacute;diteur de balises, vous devez fournir une impl&eacute;mentation pour les fonctions inspectTag(),
validateTag() et applyTag(). Vous trouverez un exemple d'impl&eacute;mentation dans la section &laquo; Cr&eacute;ation d'une
interface utilisateur d'&eacute;diteur de balises &raquo; &agrave; la page 218.
inspectTag()
Disponibilit&eacute;
Dreamweaver MX.
Description
La fonction est appel&eacute;e au premier affichage de l'&eacute;diteur de balises. La fonction re&ccedil;oit la balise modifi&eacute;e par l'utilisateur
comme un argument sous la forme d'un objet dom. La fonction extrait des valeurs d'attribut de la balise en cours
d'&eacute;dition et utilise ces valeurs pour initialiser les &eacute;l&eacute;ments de formulaire dans l'&eacute;diteur de balises.
Arguments
tag
• L'argument tag constitue le nœud DOM de la balise modifi&eacute;e.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
Supposons que l'utilisateur modifie la balise suivante :
&lt;crfweather zip = &quot;94065&quot;/&gt;
Si l'&eacute;diteur contient une zone de texte de modification de l'attribut zip, la fonction doit initialiser l'&eacute;l&eacute;ment de
formulaire pour permettre &agrave; l'utilisateur de consulter le code postal dans le champ de texte, plut&ocirc;t que de consulter le
champ vide.
Le code suivant ex&eacute;cute l'initialisation :
function inspectTag(tag)
{
document.forms[0].zip.value = tag.zip
}
validateTag()
Disponibilit&eacute;
Dreamweaver MX.
Description
Lorsqu'un utilisateur clique sur un nœud dans la commande d'arborescence ou sur OK, la fonction ex&eacute;cute la
validation des entr&eacute;es sur les &eacute;l&eacute;ments de formulaire HTML affich&eacute;s actuellement.
Derni&egrave;re mise &agrave; jour le 22/6/2011
222
EXTENSION DE DREAMWEAVER
Biblioth&egrave;ques et &eacute;diteurs de balises
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'entr&eacute;e pour les &eacute;l&eacute;ments de formulaire HTML est valide, false
si les valeurs d'entr&eacute;e ne sont pas valides.
Exemple
Lors de la cr&eacute;ation d'un tableau, l'utilisateur entre un nombre entier n&eacute;gatif pour le nombre de lignes. La fonction
validateTag() d&eacute;tecte l'entr&eacute;e non valide, affiche un message d'alerte et renvoie la valeur false.
applyTag()
Disponibilit&eacute;
Dreamweaver MX.
Description
Lorsque l'utilisateur clique sur OK, Dreamweaver appelle la fonction validateTag(). Si la fonction validateTag()
renvoie la valeur true, Dreamweaver appelle cette fonction et transmet l'objet dom repr&eacute;sentant la balise en cours de
modification. La fonction interpr&egrave;te les valeurs des &eacute;l&eacute;ments de formulaires et les enregistre dans l'objet dom.
Arguments
tag
• L'argument tag constitue le nœud DOM de la balise modifi&eacute;e.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
Reprenons l'exemple cfweather. Dans le code suivant, si l'utilisateur remplace le code postal 94065 par 53402, afin de
mettre &agrave; jour le document de l'utilisateur de sorte qu'il utilise le nouveau code postal, vous devez &eacute;galement mettre &agrave;
jour l'objet dom.
function applyTag(tag)
{
tag.zip = document.forms[0].zip.value
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
223
Chapitre 14 : Inspecteurs Propri&eacute;t&eacute;s
L'inspecteur Propri&eacute;t&eacute;s est probablement le panneau flottant le plus connu de l'interface L'inspecteur Propri&eacute;t&eacute;s est
indispensable pour d&eacute;finir, examiner et modifier le nom, la taille, l'apparence et d'autres attributs de la s&eacute;lection. Il sert
&eacute;galement &agrave; lancer des &eacute;diteurs internes et externes pour l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er un inspecteur Propri&eacute;t&eacute;s :
Chemin
Fichier
Description
Configuration/Inspectors/
Nom_inspecteur_propri&eacute;t&eacute;s.htm
D&eacute;finit l'interface utilisateur (UI) de l'inspecteur Propri&eacute;t&eacute;s.
Configuration/Inspectors/
Nom_inspecteur_propri&eacute;t&eacute;s.js
Contient les fonctions requises par l'inspecteur Propri&eacute;t&eacute;s.
Configuration/Inspectors/
Fichier_image_balise.gif
Fichier facultatif &agrave; afficher dans l'inspecteur Propri&eacute;t&eacute;s.
Fichiers d'inspecteur Propri&eacute;t&eacute;s
Dreamweaver int&egrave;gre plusieurs interfaces compatibles avec l'inspecteur Propri&eacute;t&eacute;s permettant de d&eacute;finir des
propri&eacute;t&eacute;s pour de nombreuses balises HTML standard. Comme ces inspecteurs int&eacute;gr&eacute;s font partie du code
Dreamweaver &eacute;l&eacute;mentaire, le dossier Configuration ne contient pas de fichiers d'inspecteur Propri&eacute;t&eacute;s
correspondants. Cependant, les fichiers d'inspecteur Propri&eacute;t&eacute;s personnalis&eacute;s permettent d'ignorer ces interfaces
int&eacute;gr&eacute;es ou d'en cr&eacute;er de nouvelles pour contr&ocirc;ler les balises personnalis&eacute;es. Les fichiers d'inspecteur Propri&eacute;t&eacute;s
personnalis&eacute;s r&eacute;sident dans le dossier Configuration/Inspectors du dossier de l'application Dreamweaver.
Le fichier HTML d'inspecteur Propri&eacute;t&eacute;s doit contenir un commentaire (en plus du commentaire doctype), juste
devant la balise HTML d'ouverture. Ce principe est illustr&eacute; dans l'exemple suivant :
&lt;!-- tag:serverModel:tagNameOrKeyword,priority:1to10,selection:&not; exactOrWithin,hline,vline,
serverModel--&gt;
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//pi&quot;&gt;
Ce commentaire comporte les &eacute;l&eacute;ments suivants :
• L'&eacute;l&eacute;ment serverModel indique que Dreamweaver ne doit charger cet inspecteur Propri&eacute;t&eacute;s que lorsque le mod&egrave;le
de serveur sp&eacute;cifi&eacute; est actif.
• L'&eacute;l&eacute;ment tagNameOrKeyword est la balise qui est inspect&eacute;e ou l'un des mots cl&eacute;s suivants : *COMMENT* (pour les
commentaires), *LOCKED* (pour les r&eacute;gions verrouill&eacute;es) ou *ASP* (pour les balises ASP).
• L'&eacute;l&eacute;ment 1to10 est la priorit&eacute; du fichier d'inspecteur Propri&eacute;t&eacute;s. 1 indique que cet inspecteur n'est utilis&eacute; que si
aucun autre ne peut inspecter la s&eacute;lection. 10 indique que cet inspecteur a priorit&eacute; sur tous les autres qui pourraient
inspecter la s&eacute;lection.
• L'&eacute;l&eacute;ment exactOrWithin indique si la s&eacute;lection peut &ecirc;tre contenue dans la balise (within) ou si elle doit contenir
exactement la balise (exact).
• L'&eacute;l&eacute;ment facultatif hline indique qu'une ligne grise horizontale doit appara&icirc;tre entre les moiti&eacute;s sup&eacute;rieure et
inf&eacute;rieure de l'inspecteur en mode &eacute;tendu.
• L'&eacute;l&eacute;ment facultatif vline indique qu'une ligne grise verticale doit appara&icirc;tre entre le champ de nom de balise et le
reste des propri&eacute;t&eacute;s dans l'inspecteur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
224
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
• L'&eacute;l&eacute;ment facultatif serverModel indique le mod&egrave;le de serveur de l'inspecteur Propri&eacute;t&eacute;s. Le mod&egrave;le de serveur de
l'inspecteur Propri&eacute;t&eacute;s doit &ecirc;tre identique &agrave; l'inspecteur Propri&eacute;t&eacute;s du document. Si ce n'est pas le cas, Dreamweaver
n'utilise pas l'inspecteur Propri&eacute;t&eacute;s pour afficher les propri&eacute;t&eacute;s de la s&eacute;lection actuelle. Supposons par exemple que
le mod&egrave;le de serveur d'un document soit Adobe ColdFusion. Celui de l'inspecteur Propri&eacute;t&eacute;s, par contre, est ASP.
Dans ce cas, Dreamweaver n'utilisera pas cet inspecteur Propri&eacute;t&eacute;s pour les s&eacute;lections dans le document.
Le commentaire suivant est appropri&eacute; pour un inspecteur con&ccedil;u pour inspecter la balise happy :
&lt;!-- tag:happy, priority:8,selection:exact,hline,vline,serverModel:ASP --&gt;
Dans certains cas, il est essentiel de pr&eacute;ciser que votre extension n'emploie que le rendu d'extensions de Dreamweaver
et pas le moteur de rendu pr&eacute;c&eacute;dent. Vous pouvez le faire en ins&eacute;rant la ligne suivante juste avant le commentaire de
la balise, comme le montre l'exemple suivant :
&lt;!--DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//pi&quot;--&gt;
La section body du fichier d'inspecteur Propri&eacute;t&eacute;s contient un formulaire HTML. Au lieu d'afficher le contenu du
formulaire dans une bo&icirc;te de dialogue, Dreamweaver utilise le formulaire pour d&eacute;finir les zones d'entr&eacute;e et la mise en
page de l'inspecteur Propri&eacute;t&eacute;s.
La section head d'un fichier d'inspecteur Propri&eacute;t&eacute;s contient des fonctions JavaScript ou une r&eacute;f&eacute;rence au(x) fichier(s)
JavaScript.
Fonctionnement des fichiers d'inspecteur Propri&eacute;t&eacute;s
Au d&eacute;marrage, Dreamweaver lit la premi&egrave;re ligne de chaque fichier HTM et HTML dans le dossier
Configuration/Inspectors, recherchant la cha&icirc;ne de commentaire qui d&eacute;finit le type, la priorit&eacute; et le type de s&eacute;lection
d'un inspecteur Propri&eacute;t&eacute;s. Les fichiers qui ne poss&egrave;dent pas ce commentaire en premi&egrave;re ligne sont ignor&eacute;s.
Lorsque l'utilisateur effectue une s&eacute;lection dans Dreamweaver ou d&eacute;place le point d'insertion vers un emplacement
diff&eacute;rent, les &eacute;v&eacute;nements suivants se produisent :
1 Dreamweaver recherche tout inspecteur poss&eacute;dant un type de s&eacute;lection within.
2 S'il n'existe aucun inspecteur within, Dreamweaver recherche l'arborescence du document &agrave; partir de la balise
actuellement s&eacute;lectionn&eacute;e pour v&eacute;rifier s'il existe des inspecteurs pour les autres balises entourant la s&eacute;lection. S'il
n'existe aucun inspecteur within, Dreamweaver recherche tous les inspecteurs poss&eacute;dant le type de s&eacute;lection
exact.
3 Pour la premi&egrave;re balise poss&eacute;dant un ou plusieurs inspecteurs, Dreamweaver appelle chaque fonction
canInspectSelection() de l'inspecteur. Si la fonction renvoie la valeur false, Dreamweaver ne consid&egrave;re plus
l'inspecteur comme un candidat pour inspecter cette s&eacute;lection.
4 S'il reste plusieurs inspecteurs potentiels apr&egrave;s avoir appel&eacute; la fonction canInspectSelection(), Dreamweaver
trie les inspecteurs restant en fonction de leur priorit&eacute;.
5 Si plusieurs inspecteurs potentiels ont le m&ecirc;me degr&eacute; de priorit&eacute;, Dreamweaver s&eacute;lectionne l'inspecteur suivant
l'ordre alphab&eacute;tique.
6 L'inspecteur choisi appara&icirc;t dans le panneau flottant Inspecteur Propri&eacute;t&eacute;s. Si le fichier d'inspecteur Propri&eacute;t&eacute;s
d&eacute;finit la fonction displayHelp(), une petite ic&ocirc;ne en forme de point d'interrogation (?) appara&icirc;t dans le coin
sup&eacute;rieur droit de l'inspecteur.
7 Dreamweaver appelle la fonction inspectSelection() pour r&eacute;unir des informations sur la s&eacute;lection en cours et
renseigner les champs de l'inspecteur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
225
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
8 Les gestionnaires d'&eacute;v&eacute;nements associ&eacute;s aux champs dans l'interface de l'inspecteur Propri&eacute;t&eacute;s s'ex&eacute;cutent au fur et
&agrave; mesure que l'utilisateur les rencontre. Par exemple, vous pouvez avoir un &eacute;v&eacute;nement onBlur qui appelle la
fonction setAttribute() pour d&eacute;finir un attribut selon la valeur saisie par l'utilisateur.
Exemple simple d'inspecteur Propri&eacute;t&eacute;s
L'inspecteur Propri&eacute;t&eacute;s suivant inspecte la balise marquee, r&eacute;serv&eacute;e &agrave; Microsoft Internet Explorer. L'exemple vous
permet de d&eacute;finir la valeur de l'attribut direction dans l'inspecteur Propri&eacute;t&eacute;s. Pour d&eacute;finir la valeur des autres
attributs de la balise marquee, servez-vous de cet exemple comme d'un mod&egrave;le.
Pour cr&eacute;er cette extension, vous devez cr&eacute;er l'interface utilisateur, &eacute;crire le code JavaScript, cr&eacute;er l'image et tester.
Cr&eacute;ation de l'interface utilisateur
Vous cr&eacute;ez un fichier HTML contenant un formulaire, qui s'affiche dans l'inspecteur Propri&eacute;t&eacute;s.
1 Cr&eacute;ez un document vierge.
2 Sur la premi&egrave;re ligne du fichier, ajoutez le commentaire suivant, qui identifie l'inspecteur Propri&eacute;t&eacute;s :
&lt;!-- tag:MARQUEE,priority:9,selection:exact,vline,hline --&gt;
3 Pour sp&eacute;cifier le titre du document et le fichier JavaScript &agrave; cr&eacute;er, ins&eacute;rez le code suivant apr&egrave;s le commentaire :
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Marquee Inspector&lt;/TITLE&gt;
&lt;SCRIPT src=&quot;marquee.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
4 Pour indiquer les &eacute;l&eacute;ments qui s'affichent dans l'inspecteur Propri&eacute;t&eacute;s, ins&eacute;rez le code suivant entre les balises body
d'ouverture et de fermeture :
Derni&egrave;re mise &agrave; jour le 22/6/2011
226
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
&lt;!-- Specify the image that will appear in the Property inspector --&gt;
&lt;SPAN ID=&quot;image&quot; STYLE=&quot;position:absolute; width:23px; height:17px; &not;
z-index:16; left: 3px; top: 2px&quot;&gt;
&lt;IMG SRC=&quot;marquee.png&quot; WIDTH=&quot;36&quot; HEIGHT=&quot;36&quot; NAME=&quot;marqueeImage&quot;&gt;
&lt;/SPAN&gt;
&lt;SPAN ID=&quot;label&quot; STYLE=&quot;position:absolute; width:23px; height:17px; &not;
z-index:16; left: 44px; top: 5px&quot;&gt;Marquee&lt;/SPAN&gt;
&lt;!-- If your form fields are in different AP elements, you must &not;
create a separate form inside each AP element and reference it as &not;
shown in the inspectSelection() and setInterjectionTag() functions. --&gt;
&lt;SPAN ID=&quot;topLayer&quot; STYLE=&quot;position:absolute; z-index:1; left: 125px; &not;
top: 3px; width: 431px; height: 32px&quot;&gt;
&lt;FORM NAME=&quot;topLayerForm&quot;&gt;
&lt;TABLE BORDER=&quot;0&quot; CELLPADDING=&quot;0&quot; CELLSPACING=&quot;0&quot;&gt;
&lt;TR&gt;
&lt;TD VALIGN=&quot;baseline&quot; ALIGN=&quot;right&quot;&gt;Direction:&lt;/TD&gt;
&lt;TD VALIGN=&quot;baseline&quot; ALIGN=&quot;right&quot;&gt;
&lt;SELECT NAME=&quot;marqDirection&quot; STYLE=&quot;width:86&quot;
onChange=&quot;setMarqueeTag()&quot;&gt;
&lt;OPTION VALUE=&quot;left&quot;&gt;Left&lt;/OPTION&gt;
&lt;OPTION VALUE=&quot;right&quot;&gt;Right&lt;/OPTION&gt;
&lt;/SELECT&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/FORM&gt;
&lt;/SPAN&gt;
5 Enregistrez le fichier sous le nom marquee.htm dans le dossier Configuration/Inspectors.
Ecriture du code JavaScript
Vous devez ajouter des fonctions JavaScript pour vous assurer qu'il sera possible d'inspecter la s&eacute;lection, pour inspecter
la s&eacute;lection et pour entrer les valeurs appropri&eacute;es depuis l'inspecteur Propri&eacute;t&eacute;s.
1 Cr&eacute;ez un document vierge.
2 Pour sp&eacute;cifier que l'inspecteur Propri&eacute;t&eacute;s s'affiche lorsque la s&eacute;lection contient la balise marquee, ajoutez la
fonction suivante :
function canInspectSelection(){
return true;
}
3 Pour actualiser la valeur de l'attribut direction qui s'affiche dans le champ de texte, ajoutez la fonction suivante
en fin de fichier :
Derni&egrave;re mise &agrave; jour le 22/6/2011
227
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
function inspectSelection(){
// Get the DOM of the current document.
var theDOM = dw.getDocumentDOM();
// Get the selected node.
var theObj = theDOM.getSelectedNode();
// Get the value of the DIRECTION attribute on the MARQUEE tag.
var theDirection = theObj.getAttribute('direction');
// Initialize a variable for the DIRECTION attribute to -1.
// This is used to store the menu index that corresponds to
// the value of the attribute.
// var typeIndex = -1;
var directionIndex = -1;
// If there was a DIRECTION attribute...
if (theDirection){
// If the value of DIRECTION is &quot;left&quot;, set typeIndex to 0.
if (theDirection.toLowerCase() == &quot;left&quot;){
directionIndex = 0;
// If the value of DIRECTION is &quot;right&quot;, set typeIndex to 1.
}else if (theDirection.toLowerCase() == &quot;right&quot;){
directionIndex = 1;
}
}
// If the value of the DIRECTION attribute was &quot;left&quot;
// or &quot;right&quot;, choose the corresponding
// option from the pop-up menu in the interface.
if (directionIndex != -1){
document.topLayer.document.topLayerForm.marqDirection.selectedIndex =&not;
directionIndex;
}
}
4 Pour extraire la s&eacute;lection actuelle et afficher dans la zone de texte de l'inspecteur Propri&eacute;t&eacute;s la valeur de l'attribut
direction, ajoutez la fonction suivante en fin de fichier :
function setMarqueeTag(){
// Get the DOM of the current document.
var theDOM = dw.getDocumentDOM();
// Get the selected node.
var theObj = theDOM.getSelectedNode();
// Get the index of the selected option in the pop-up menu
// in the interface.
var directionIndex = &not;
document.topLayer.document.topLayerForm.marqDirection.selectedIndex;
// Get the value of the selected option in the pop-up menu
// in the interface.
var theDirection = &not;
document.topLayer.document.topLayerForm.marqDirection.&not;
options[directionIndex].value;
// Set the value of the direction attribute to theDirection.
theObj.setAttribute('direction',theDirection);
}
5 Enregistrez le fichier sous le nom marquee.js dans le dossier Configuration/Inspectors.
Derni&egrave;re mise &agrave; jour le 22/6/2011
228
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
Cr&eacute;ation de l'image
Le cas &eacute;ch&eacute;ant, vous pouvez cr&eacute;er l'image qui s'affiche dans l'inspecteur Propri&eacute;t&eacute;s.
1 Cr&eacute;ez une image de 36 pixels de large sur 36 pixels de haut.
2 Enregistrez l'image sous le nom marquee.gif dans Configuration/Inspectors.
En r&egrave;gle g&eacute;n&eacute;rale, vous pouvez enregistrer les images associ&eacute;es aux inspecteurs Propri&eacute;t&eacute;s dans tout format pris en
charge par Dreamweaver.
Test de l'inspecteur Propri&eacute;t&eacute;s
Vous pouvez enfin tester l'inspecteur Propri&eacute;t&eacute;s.
1 Red&eacute;marrez Dreamweaver.
2 Cr&eacute;ez une page HTML ou ouvrez une page HTML existante.
3 Ajoutez le code suivant dans la section body de la page :
&lt;MARQUEE&gt;&lt;/MARQUEE&gt;
4 Affichez en surbrillance le texte que vous venez d'ajouter.
L'inspecteur Propri&eacute;t&eacute;s que vous avez cr&eacute;&eacute; pour la balise marquee appara&icirc;t.
5 Entrez la valeur de l'attribut direction dans l'inspecteur Propri&eacute;t&eacute;s.
La balise affich&eacute;e sur votre page est modifi&eacute;e ; elle inclut &agrave; pr&eacute;sent l'attribut direction et la valeur entr&eacute;e dans
l'inspecteur Propri&eacute;t&eacute;s.
Fonctions de l'API de l'inspecteur Propri&eacute;t&eacute;s
Deux des fonctions de l'API de l'inspecteur Propri&eacute;t&eacute;s (canInspectSelection() et inspectSelection()) sont
obligatoires.
canInspectSelection()
Description
D&eacute;termine si l'inspecteur Propri&eacute;t&eacute;s est appropri&eacute; pour la s&eacute;lection en cours.
Arguments
Aucun.
Remarque : Utilisez dom.getSelectedNode() pour obtenir la s&eacute;lection en cours en tant qu'objet JavaScript (pour plus
d'informations sur dom.getSelectedNode(), voir le Guide des API de Dreamweaver).
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'inspecteur peut inspecter la s&eacute;lection actuelle et false dans le
cas contraire.
Derni&egrave;re mise &agrave; jour le 22/6/2011
229
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
Exemple
L'instance suivante de la fonction canInspectSelection() renvoie la valeur true si la s&eacute;lection contient l'attribut
CLASSID et si la valeur de cet attribut est &quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; (l'ID de classe pour
Adobe Flash Player) :
function canInspectSelection(){3
var theDOM = dw.getDocumentDOM();
var theObj = theDOM.getSelectedNode();
return (theObj.nodeType == Node.ELEMENT_NODE &amp;&amp; &not;
theObj.hasAttribute(&quot;classid&quot;) &amp;&amp; &not;
theObj.getAttribute(&quot;classid&quot;).toLowerCase()== &not;
&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot;);
}
displayHelp()
Description
Si cette fonction est d&eacute;finie, une ic&ocirc;ne en forme de point d'interrogation (?) appara&icirc;t dans le coin sup&eacute;rieur droit de
l'inspecteur Propri&eacute;t&eacute;s. Cette fonction est appel&eacute;e lorsque l'utilisateur clique sur l'ic&ocirc;ne.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
L'occurrence suivante de displayHelp() ouvre un fichier dans une fen&ecirc;tre du navigateur. Ce fichier explique les
champs de l'inspecteur Propri&eacute;t&eacute;s :
function displayHelp(){
dw.browseDocument('http://www.hooha.com/dw/inspectors/inspHelp.html');
}
inspectSelection()
Description
Actualise le contenu des zones de texte en fonction des attributs de la s&eacute;lection en cours.
Arguments
maxOrMin
• L'argument maxOrMin est max ou min, selon que l'inspecteur Propri&eacute;t&eacute;s est en &eacute;tat d&eacute;velopp&eacute; ou compress&eacute;.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Derni&egrave;re mise &agrave; jour le 22/6/2011
230
EXTENSION DE DREAMWEAVER
Inspecteurs Propri&eacute;t&eacute;s
Exemple
L'occurrence suivante de la fonction inspectSelection() r&eacute;cup&egrave;re la valeur de l'attribut content et l'utilise pour
remplir un champ de formulaire appel&eacute; keywords :
function inspectSelection(){
var dom = dreamweaver.getDocumentDOM();
var theObj = dom.getSelectedNode();
document.forms[0].keywords.value = theObj.getAttribute(&quot;content&quot;);
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
231
Chapitre 15 : Panneaux flottants
Vous pouvez cr&eacute;er des panneaux flottants ou des inspecteurs sans &ecirc;tre soumis aux contraintes de taille et de disposition
des inspecteurs Propri&eacute;t&eacute;s.
Pour d&eacute;finir les propri&eacute;t&eacute;s de la s&eacute;lection actuelle, vous devez de pr&eacute;f&eacute;rence opter pour un inspecteur Propri&eacute;t&eacute;s
personnalis&eacute;. Toutefois, les panneaux flottants personnalis&eacute;s offrent davantage de place et de flexibilit&eacute; pour l'affichage
d'informations au sujet du document entier ou de s&eacute;lections multiples.
Vous pouvez cr&eacute;er et ajouter vos propres panneaux au menu Fen&ecirc;tre. Pour plus d'informations sur l'ajout d'&eacute;l&eacute;ments
au syst&egrave;me de menus, voir &laquo; Menus et commandes de menu &raquo; &agrave; la page 148.
Le tableau ci-dessous r&eacute;pertorie les fichiers utilis&eacute;s pour cr&eacute;er un panneau flottant :
Chemin
Fichier
Description
Configuration/Floaters/
nom_panneau.htm
Sp&eacute;cifie le texte qui s'affiche dans la barre de titre du panneau flottant,
d&eacute;finit ce dernier et contient les fonctions JavaScript requises.
Configuration/Menus/
menus.xml
Ajoute une commande &agrave; un menu.
Fonctionnement des fichiers de panneau flottant
Les fichiers de panneaux flottants personnalis&eacute;s sont des fichiers HTML qui r&eacute;sident dans le dossier
Configuration/Floaters du dossier de l'application La section body d'un fichier de panneau flottant contient un
formulaire HTML. Des gestionnaires d'&eacute;v&eacute;nements associ&eacute;s aux &eacute;l&eacute;ments du formulaire peuvent appeler un code
JavaScript pour effectuer des modifications arbitraires dans le document actif.
Dreamweaver poss&egrave;de plusieurs panneaux flottants int&eacute;gr&eacute;s accessibles depuis le menu Fen&ecirc;tre. Ces panneaux int&eacute;gr&eacute;s
font partie du code principal de Dreamweaver ; vous ne trouverez donc pas de fichier de panneau flottant leur
correspondant dans le dossier Configuration/Floaters.
Les panneaux flottants personnalis&eacute;s peuvent &ecirc;tre d&eacute;plac&eacute;s, redimensionn&eacute;s et leurs onglets combin&eacute;s, &agrave; l'instar des
panneaux flottants int&eacute;gr&eacute;s &agrave; Dreamweaver. Les panneaux flottants personnalis&eacute;s pr&eacute;sentent les diff&eacute;rences suivantes
par rapport aux panneaux flottants int&eacute;gr&eacute;s :
• Les panneaux flottants personnalis&eacute;s s'affichent en gris par d&eacute;faut. La d&eacute;finition de l'attribut bgcolor dans la balise
body n'a aucun effet.
• Tous les panneaux flottants s'affichent au-dessus de la fen&ecirc;tre de document ou flottent derri&egrave;re elle quand ils sont
inactifs. L'endroit o&ugrave; les panneaux flottants sont affich&eacute;s d&eacute;pend du r&eacute;glage de l'option Toutes autres palettes, d&eacute;fini
dans les Pr&eacute;f&eacute;rences de panneaux.
Les fichiers de panneau flottant diff&egrave;rent &eacute;galement des autres fichiers d'extension. Contrairement aux autres fichiers
d'extension, Dreamweaver ne charge pas de fichiers de panneau flottant en m&eacute;moire au d&eacute;marrage, sauf si les
panneaux flottants &eacute;taient affich&eacute;s la derni&egrave;re fois que Dreamweaver a &eacute;t&eacute; ferm&eacute;. Si les panneaux flottants ne sont pas
visibles lorsque Dreamweaver est ferm&eacute;, &eacute;tablissez une r&eacute;f&eacute;rence &agrave; partir d'une des fonctions suivantes pour charger
les fichiers qui d&eacute;finissent les panneaux.
•
dreamweaver.getFloaterVisibility()
•
dreamweaver.setFloaterVisibility()
Derni&egrave;re mise &agrave; jour le 22/6/2011
232
EXTENSION DE DREAMWEAVER
Panneaux flottants
•
dreamweaver.toggleFloater()
Pour plus d'informations sur ces fonctions, voir le Guide des API de Dreamweaver.
Lorsque l'un des fichiers du dossier Configuration appelle les fonctions dw.getFloaterVisibility(floaterName),
dw.setFloaterVisibility(floaterName) ou dw.toggleFloater(floaterName), les &eacute;v&eacute;nements suivants se
produisent :
1 Si l'argument ne correspond pas &agrave; l'un des noms de panneau flottant r&eacute;serv&eacute;s, Dreamweaver recherche dans le
dossier Configuration/Floaters un fichier nomm&eacute; floaterName.htm. Pour obtenir une liste compl&egrave;te des noms de
panneau flottant r&eacute;serv&eacute;s, voir la fonction dreamweaver.getFloaterVisibility() dans le Guide des API de
Dreamweaver. Si floaterName.htm est introuvable, Dreamweaver recherche floaterName.html. Si aucun fichier de
ce nom n'est trouv&eacute;, aucun autre &eacute;v&eacute;nement ne se produit.
2 Lorsque le fichier de panneau flottant est charg&eacute; pour la premi&egrave;re fois, la fonction initialPosition() est appel&eacute;e,
si elle a &eacute;t&eacute; d&eacute;finie, afin de d&eacute;terminer la position par d&eacute;faut du panneau flottant sur l'&eacute;cran. De m&ecirc;me, la fonction
initialTabs() est appel&eacute;e, si elle a &eacute;t&eacute; d&eacute;finie, afin de d&eacute;terminer le regroupement par d&eacute;faut des onglets du
panneau flottant.
3 Les fonctions selectionChanged() et documentEdited() sont appel&eacute;es, car il est suppos&eacute; que des modifications
ont &eacute;t&eacute; apport&eacute;es pendant que le panneau flottant &eacute;tait masqu&eacute;.
4 Lorsque le panneau flottant est visible, les &eacute;v&eacute;nements suivants se produisent :
• Lorsqu'un &eacute;l&eacute;ment diff&eacute;rent est s&eacute;lectionn&eacute;, la fonction selectionChanged() est appel&eacute;e, si elle est d&eacute;finie.
• Lorsque l'utilisateur modifie le document, la fonction documentEdited() est appel&eacute;e, si elle est d&eacute;finie.
• Les gestionnaires d'&eacute;v&eacute;nements associ&eacute;s aux champs dans l'interface de panneau flottant s'ex&eacute;cutent au fur et &agrave;
mesure que l'utilisateur les rencontre. Par exemple, un bouton associ&eacute; &agrave; un gestionnaire d'&eacute;v&eacute;nements onClick
ex&eacute;cutant dw.getDocumentDOM().body.innerHTML='' a pour effet, lorsque l'utilisateur clique dessus, de
supprimer tous les &eacute;l&eacute;ments situ&eacute;s entre les balises body de d&eacute;but et de fin dans le document.
Les panneaux flottants g&egrave;rent deux &eacute;v&eacute;nements sp&eacute;ciaux relatifs &agrave; la balise body : onShow() et onHide().
5 Lorsque l'utilisateur quitte Dreamweaver, la visibilit&eacute;, la position et le groupement d'onglets actuellement d&eacute;finis
pour le panneau flottant sont enregistr&eacute;s. Au d&eacute;marrage suivant, l'application Dreamweaver charge les fichiers de
panneau flottant correspondant &agrave; tous les panneaux flottants qui &eacute;taient affich&eacute;s au moment de la derni&egrave;re
fermeture de l'application. Elle affiche les panneaux flottants au m&ecirc;me endroit et avec le m&ecirc;me groupement
d'onglets.
Exemple de panneau flottant simple
Cet exemple implique la cr&eacute;ation de l'extension Script Editor, qui g&eacute;n&egrave;re un panneau flottant pour afficher le code
JavaScript inh&eacute;rent &agrave; un marqueur de script s&eacute;lectionn&eacute; en mode Cr&eacute;ation. L'&eacute;diteur de script affiche le code JavaScript
dans l'&eacute;l&eacute;ment textarea d'un formulaire HTML, d&eacute;fini dans un panneau flottant nomm&eacute; scriptlayer. Si vous
apportez des modifications au code s&eacute;lectionn&eacute; dans le panneau flottant, l'extension appelle la fonction
updateScript() pour enregistrer vos modifications. Si vous n'avez pas s&eacute;lectionn&eacute; de marqueur de script lorsque
vous invoquez l'&eacute;diteur de script, l'extension affiche (no script selected) dans un panneau flottant nomm&eacute;
blanklayer.
Pour cr&eacute;er cette extension, vous devez cr&eacute;er des panneaux flottants, r&eacute;diger du code JavaScript et cr&eacute;er un &eacute;l&eacute;ment de menu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
233
EXTENSION DE DREAMWEAVER
Panneaux flottants
Cr&eacute;ation des panneaux flottants
Le d&eacute;but du fichier HTML de cette extension comporte les informations d'en-t&ecirc;te de document standard et une balise
title qui inscrit les mots Script Editor dans la barre de titre des panneaux flottants.
Cr&eacute;ation de l'en-t&ecirc;te du fichier HTML
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
&lt;!doctype html public &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Script Editor&lt;/title&gt;
&lt;script language=&quot;JavaScript&quot;&gt;
L'extension d&eacute;finit deux panneaux flottants qui affichent soit le message (no script selected) si l'utilisateur n'a
pas s&eacute;lectionn&eacute; de marqueur de script ou le code JavaScript inh&eacute;rent &agrave; un marqueur de script s&eacute;lectionn&eacute;. Le code
suivant d&eacute;finit ces deux panneaux flottants, ou &eacute;l&eacute;ment PA (&agrave; positionnement absolu), nomm&eacute;s blanklayer et
scriptlayer :
Cr&eacute;ation des deux panneaux flottants
1 Ajoutez le code suivant apr&egrave;s l'en-t&ecirc;te dans le fichier HTML :
&lt;body&gt;
&lt;div id=&quot;blanklayer&quot; style=&quot;position:absolute; width:422px; &not;
height:181px; z-index:1; left: 8px; top: 11px; &not;
visibility: hidden&quot;&gt;
&lt;center&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
(no script selected)
&lt;/center&gt;
&lt;/div&gt;
&lt;div id=&quot;scriptlayer&quot; style=&quot;position:absolute; width:422px; &not;
height:181px; z-index:1; left: 8px; top: 11px; &not;
visibility: visible&quot;&gt;
&lt;form name=&quot;theForm&quot;&gt;
&lt;textarea name=&quot;scriptCode&quot; cols=&quot;80&quot; rows=&quot;20&quot; wrap=&quot;VIRTUAL&quot; &not;
onBlur=&quot;updateScript()&quot;&gt;&lt;/textarea&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
2 Enregistrez le fichier sous le nom scriptEditor.htm dans le dossier Configuration/Floaters.
Derni&egrave;re mise &agrave; jour le 22/6/2011
234
EXTENSION DE DREAMWEAVER
Panneaux flottants
Les deux balises div utilisent l'attribut style pour sp&eacute;cifier la position (absolute), la taille (width:422px et
height:181px) et le param&egrave;tre visibility par d&eacute;faut (visible) des panneaux flottants. Le panneau
blanklayer utilise l'attribut center ainsi qu'une s&eacute;rie de balises de saut de ligne (br) pour positionner le texte au
centre du panneau. Le panneau scriptlayer cr&eacute;e un formulaire contenant une balise textarea unique pour
afficher le code JavaScript s&eacute;lectionn&eacute;. La balise textarea sp&eacute;cifie &eacute;galement que, lorsque survient un &eacute;v&eacute;nement
onBlur indiquant une modification du code s&eacute;lectionn&eacute;, la fonction updateScript() est appel&eacute;e pour &eacute;crire &agrave;
nouveau le texte modifi&eacute; dans le document.
Ecriture du code JavaScript
Le code JavaScript pour l'&eacute;diteur de script consiste en un panneau flottant appel&eacute; par Dreamweaver,
selectionchanged(), et une fonction d&eacute;finie par l'utilisateur, updateScript().
selectionChanged(): avez-vous s&eacute;lectionn&eacute; un marqueur de script ?
La fonction selectionChanged() d&eacute;termine si un marqueur de script a &eacute;t&eacute; s&eacute;lectionn&eacute; en mode Cr&eacute;ation. Un
marqueur de script s'affiche en mode Cr&eacute;ation si une routine JavaScript est pr&eacute;sente dans la section body d'un
document et si Scripts est s&eacute;lectionn&eacute; dans la section El&eacute;ments invisibles de la bo&icirc;te de dialogue Pr&eacute;f&eacute;rences. La figure
suivante repr&eacute;sente une ic&ocirc;ne de marqueur de script :
La fonction selectionChanged() commence par appeler la fonction dw.getDocumentDOM() pour obtenir le DOM
(mod&egrave;le d'objet de document) du document de l'utilisateur. Elle appelle ensuite la fonction getSelectedNode() pour
voir si le nœud s&eacute;lectionn&eacute; pour ce document est un &eacute;l&eacute;ment, mais &eacute;galement une balise SCRIPT. Si ces deux conditions
sont r&eacute;unies, la fonction selectionChanged() rend visible le panneau flottant scripteditor et le charge avec le
code JavaScript inh&eacute;rent. Elle r&egrave;gle &eacute;galement la propri&eacute;t&eacute; visibility du panneau flottant blanklayer sur la valeur
hidden. La figure suivante repr&eacute;sente le panneau flottant scriptlayer avec le code JavaScript s&eacute;lectionn&eacute; :
Derni&egrave;re mise &agrave; jour le 22/6/2011
235
EXTENSION DE DREAMWEAVER
Panneaux flottants
Si le nœud s&eacute;lectionn&eacute; n'est pas un &eacute;l&eacute;ment ou qu'il ne s'agit pas d'une balise script, la fonction
selectionChanged() rend visible le panneau flottant blanklayer et cache le panneau scriptlayer. Le panneau
flottant blanklayer affiche le texte (no script selected), comme indiqu&eacute; par la figure suivante :
Ajout de la fonction selectionChanged()
1 Ouvrez le fichier scriptEditor.htm dans le dossier Configuration/Floaters.
2 Entrez le code suivant dans la section en-t&ecirc;te du fichier.
function selectionChanged(){
/* get the selected node */
var theDOM = dw.getDocumentDOM();
var theNode = theDOM.getSelectedNode();
/* check to see if the node is a script marker */
if (theNode.nodeType == Node.ELEMENT_NODE &amp;&amp; &not;
theNode.tagName == &quot;SCRIPT&quot;){
document.layers['scriptlayer'].visibility = 'visible';
document.layers['scriptlayer'].document.theForm.&not;
scriptCode.value = theNode.innerHTML;
document.layers['blanklayer'].visibility = 'hidden';
}else{
document.layers['scriptlayer'].visibility = 'hidden';
document.layers['blanklayer'].visibility = 'visible';
}
}
3 Enregistrez le fichier.
updateScript(): &eacute;criture des modifications
La fonction updateScript() &eacute;crit &agrave; nouveau le script s&eacute;lectionn&eacute; lorsqu'un &eacute;v&eacute;nement onBlur survient dans la zone
textarea du panneau scriptlayer. L'&eacute;l&eacute;ment de formulaire textarea contient le code JavaScript et l'&eacute;v&eacute;nement
onBlur se produit lorsque textarea n'est plus la zone s&eacute;lectionn&eacute;e.
1 Ouvrez le fichier scriptEditor.htm dans le dossier Configuration/Floaters.
2 Entrez le code suivant dans la section en-t&ecirc;te du fichier.
Derni&egrave;re mise &agrave; jour le 22/6/2011
236
EXTENSION DE DREAMWEAVER
Panneaux flottants
/* update the document with any changes made by
the user in the textarea */
function updateScript(){
var theDOM = dw.getDocumentDOM();
var theNode = theDOM.getSelectedNode();
theNode.innerHTML = document.layers['scriptlayer'].document.&not;
theForm.scriptCode.value;
}
&lt;/script&gt;
&lt;/head&gt;
3 Enregistrez le fichier.
Cr&eacute;ation d'un &eacute;l&eacute;ment de menu
Il ne suffit pas d'enregistrer le code d'&eacute;diteur de script dans le dossier Configuration/Floaters. Vous devez &eacute;galement
appeler la fonction dw.setFloaterVisibility('scriptEditor',true) ou la fonction
dw.toggleFloater('scriptEditor') pour charger et rendre visible le panneau flottant. L'emplacement le plus
logique pour invoquer l'&eacute;diteur de script est le menu Fen&ecirc;tre, d&eacute;fini dans le fichier menus.xml. Vous devez cr&eacute;er la
balise menuitem, qui g&eacute;n&egrave;re une entr&eacute;e pour l'extension d'&eacute;diteur de script dans le menu Fen&ecirc;tre, comme indiqu&eacute; dans
la figure suivante :
Si vous s&eacute;lectionnez un marqueur de script en mode Cr&eacute;ation pour le document en cours, puis que vous s&eacute;lectionnez
l'&eacute;l&eacute;ment de menu d'&eacute;diteur de script, le panneau flottant d'&eacute;diteur de script est appel&eacute; et le code JavaScript inh&eacute;rent
au marqueur de script s'affiche. Si vous s&eacute;lectionnez l'&eacute;l&eacute;ment de menu lorsque aucun marqueur de script n'a &eacute;t&eacute;
s&eacute;lectionn&eacute;, le panneau blanklayer contenant le texte (no script selected) s'affiche.
1 Ouvrez le fichier menus.xml, qui r&eacute;side dans le dossier Configuration/Menus.
2 Localisez la balise d&eacute;butant par &lt;menuitem name=&quot;Tile _Vertically&quot; et placez le point d'insertion apr&egrave;s le
symbole /&gt; de fermeture de la balise.
3 Ins&eacute;rez le code suivant sur une nouvelle ligne :
&lt;menuitem name=&quot;Script Editor&quot; enabled=&quot;true&quot; &not;
command=&quot;dw.toggleFloater('scriptEditor')&quot;&not;
checked=&quot;dw.getFloaterVisibility('scriptEditor')&quot; /&gt;
4 Enregistrez le fichier.
Fonctions de l'API du panneau flottant
Toutes les fonctions personnalis&eacute;es de l'API de panneau flottant sont facultatives.
Derni&egrave;re mise &agrave; jour le 22/6/2011
237
EXTENSION DE DREAMWEAVER
Panneaux flottants
Certaines fonctions de cette section ne fonctionnent que sous Windows. Leur description indique si tel est le cas.
displayHelp()
Description
Si cette fonction est d&eacute;finie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la bo&icirc;te de dialogue. Cette
fonction est appel&eacute;e lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
// the following instance of displayHelp() opens
// in a browser a file that explains how to use
// the extension.
function displayHelp(){
var myHelpFile = dw.getConfigurationPath() +
'/ExtensionsHelp/superDuperHelp.htm';
dw.browseDocument(myHelpFile);
}
documentEdited()
Description
Cette fonction est appel&eacute;e lorsque le panneau flottant s'affiche et une fois que la s&eacute;rie de modifications en cours est
termin&eacute;e, ce qui signifie que plusieurs modifications peuvent &ecirc;tre effectu&eacute;es avant que cette fonction ne soit appel&eacute;e.
Cette fonction ne doit &ecirc;tre d&eacute;finie que si le panneau flottant doit assurer le suivi des modifications apport&eacute;es au
document.
Remarque : Ne d&eacute;finissez la fonction documentEdited() que si vous en avez besoin, car elle a un impact sur les
performances.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
Dans l'exemple suivant, la fonction documentEdited() recherche des &eacute;l&eacute;ments PA dans le document et met &agrave; jour un
champ de texte affichant le nombre d'&eacute;l&eacute;ments PA du document :
Derni&egrave;re mise &agrave; jour le 22/6/2011
238
EXTENSION DE DREAMWEAVER
Panneaux flottants
function documentEdited(){
/* create a list of all the AP elements in the document */
var theDOM = dw.getDocumentDOM();
var layersInDoc = theDOM.getElementsByTagName(&quot;layer&quot;);
var layerCount = layersInDoc.length;
/* update the numOfLayers field with the new layercount */
document.theForm.numOfLayers.value = layerCount;
}
getDockingSide()
Disponibilit&eacute;
Dreamweaver MX.
Description
Indique o&ugrave; vous pouvez ancrer les panneaux flottants. Cette fonction renvoie une cha&icirc;ne contenant une combinaison
des mots left, right, top et bottom (&agrave; savoir, &agrave; gauche, &agrave; droite, en haut et en bas). Vous pouvez ancrer le panneau
flottant sur le c&ocirc;t&eacute; indiqu&eacute; dans la cha&icirc;ne. Si aucune indication n'appara&icirc;t, vous ne pouvez pas ancrer de panneau
flottant.
Cette fonction vous permet d'interdire l'ancrage de certains panneaux sur un c&ocirc;t&eacute; sp&eacute;cifique de l'espace de travail de
Dreamweaver ou sur un autre panneau.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne contenant les mots left, right, top ou bottom, ou une combinaison de ces mots
indiquant o&ugrave; il peut ancrer le panneau flottant.
Exemple
getDockingSide()
{
return dock_side = &quot;left top&quot;;
}
initialPosition()
Description
D&eacute;termine la position initiale du panneau flottant lorsqu'il est appel&eacute; pour la premi&egrave;re fois. Si cette fonction n'est pas
d&eacute;finie, la position par d&eacute;faut est le centre de l'&eacute;cran.
Arguments
platform
• L'argument platform a la valeur &quot;Mac&quot; ou &quot;Win&quot;, selon la plate-forme de l'utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne au format &quot;leftPosInPixels,topPosInPixels&quot;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
239
EXTENSION DE DREAMWEAVER
Panneaux flottants
Exemple
Dans l'exemple suivant, la fonction initialPosition() sp&eacute;cifie que lorsque le panneau flottant s'affiche pour la
premi&egrave;re fois, il doit se trouver &agrave; 420 pixels du c&ocirc;t&eacute; gauche de l'&eacute;cran et &agrave; 20 pixels du haut de l'&eacute;cran sous Windows
ou &agrave; 390 pixels du c&ocirc;t&eacute; gauche et &agrave; 20 pixels du haut de l'&eacute;cran sur Macintosh :
function initialPosition(platform){
var initPos = &quot;420,20&quot;;
if (platform == &quot;macintosh&quot;){
initPos = &quot;390,20&quot;;
}
return initPos;
}
initialTabs()
Description
D&eacute;termine les autres panneaux flottants dont les onglets sont combin&eacute;s &agrave; ceux de ce panneau, lorsqu'il s'affiche pour
la premi&egrave;re fois. Si l'un des panneaux flottants r&eacute;pertori&eacute;s s'est affich&eacute; pr&eacute;c&eacute;demment, il n'est pas inclus dans le
groupement d'onglets. Pour que les onglets de deux panneaux flottants personnalis&eacute;s soient combin&eacute;s, chacun d'eux
doit r&eacute;f&eacute;rencer l'autre dans sa fonction initialTabs().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne au format &quot;floaterName1,floaterName2,...floaterNameN&quot;.
Exemple
Dans l'exemple suivant, la fonction initialTabs() sp&eacute;cifie que lorsque le panneau flottant s'affiche pour la premi&egrave;re
fois, ses onglets doivent &ecirc;tre combin&eacute;s &agrave; ceux du panneau flottant scriptEditor :
function initialTabs(){
return &quot;scriptEditor&quot;;
}
isATarget()
Disponibilit&eacute;
Dreamweaver MX (sous Windows uniquement)
Description
D&eacute;termine si d'autres panneaux peuvent s'ancrer &agrave; ce panneau flottant. Si la fonction isATarget() n'est pas sp&eacute;cifi&eacute;e,
Dreamweaver emp&ecirc;che les autres panneaux de s'ancrer &agrave; celui-ci. Dreamweaver appelle cette fonction lorsque
l'utilisateur essaie de combiner ce panneau avec d'autres.
Arguments
Aucun.
Derni&egrave;re mise &agrave; jour le 22/6/2011
240
EXTENSION DE DREAMWEAVER
Panneaux flottants
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si d'autres panneaux flottants peuvent s'accrocher &agrave; celui-ci et false
dans le cas contraire.
Exemple
isATarget()
{
return true;
}
isAvailableInCodeView()
Description
D&eacute;termine si le panneau flottant doit &ecirc;tre activ&eacute; lorsque le mode Code est s&eacute;lectionn&eacute;. Si cette fonction n'est pas
d&eacute;finie, le panneau flottant est d&eacute;sactiv&eacute; en mode Code.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le panneau flottant doit &ecirc;tre activ&eacute; en mode Code, false dans le
cas contraire.
isResizable()
Disponibilit&eacute;
Dreamweaver 4.
Description
D&eacute;termine si l'utilisateur peut redimensionner le panneau flottant. Si cette fonction n'est pas d&eacute;finie, ou si elle renvoie
la valeur true, l'utilisateur peut redimensionner le panneau flottant. Si la fonction renvoie la valeur false, l'utilisateur
ne peut pas redimensionner le panneau flottant.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si l'utilisateur peut redimensionner le panneau flottant et false
dans le cas contraire.
Exemple
Dans l'exemple suivant, l'utilisateur ne peut pas redimensionner le panneau flottant :
function isResizable()
{
return false;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
241
EXTENSION DE DREAMWEAVER
Panneaux flottants
selectionChanged()
Description
Appel&eacute;e lorsque le panneau flottant s'affiche et &agrave; chaque changement de s&eacute;lection (lorsqu'un nouveau document
devient actif ou lorsque le point d'insertion passe &agrave; un nouvel emplacement dans le document actif). Cette fonction ne
doit &ecirc;tre d&eacute;finie que si le panneau flottant doit assurer le suivi de la s&eacute;lection.
Remarque : Ne d&eacute;finissez la fonction selectionChanged() que si vous en avez absolument besoin, car elle a un impact
sur les performances.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
Dans l'exemple suivant, la fonction selectionChanged() affiche un &eacute;l&eacute;ment PA diff&eacute;rent dans le panneau flottant
selon que la s&eacute;lection est un marqueur de script. Si la s&eacute;lection est un marqueur de script, Dreamweaver rend l'&eacute;l&eacute;ment
PA de scriptlayer visible. Sinon, Dreamweaver rend l'&eacute;l&eacute;ment PA de blanklayer visible.
function selectionChanged(){
/* get the selected node */
var theDOM = dw.getDocumentDOM();
var theNode = theDOM.getSelectedNode();
/* check to see if the node is a script marker */
if (theNode.nodeType == Node.ELEMENT_NODE &amp;&amp; &not;
theNode.tagName == &quot;SCRIPT&quot;){
document.layers['blanklayer'].visibility = 'hidden';
document.layers['scriptlayer'].visibility = 'visible';}
else{
document.layers['scriptlayer'].visibility = 'hidden';
document.layers['blanklayer'].visibility = 'visible';
}
}
A propos des performances
La d&eacute;claration des fonctions selectionChanged() ou documentEdited() dans vos panneaux flottants personnalis&eacute;s
risque d'avoir des r&eacute;percussions n&eacute;gatives sur les performances de Dreamweaver. Cela est d&ucirc; au fait que les fonctions
documentEdited() et selectionChanged() sont appel&eacute;es apr&egrave;s chaque frappe d'une touche et chaque clic de la
souris si Dreamweaver est rest&eacute; inactif plus d'un dixi&egrave;me de seconde. Il est important de tester votre panneau flottant
avec divers sc&eacute;narios, en utilisant des documents volumineux (100 Ko ou plus de code HTML) autant que possible.
Afin d'&eacute;viter les p&eacute;nalit&eacute;s de performances, utilisez la fonction setTimeout(). Comme dans les navigateurs, la
fonction setTimeout() emploie deux arguments : le code JavaScript devant &ecirc;tre appel&eacute; et le d&eacute;lai d'attente avant cet
appel en millisecondes.
La m&eacute;thode setTimeout() vous permet d'introduire dans votre traitement des pauses au cours desquelles l'utilisateur
peut poursuivre son interaction avec l'application. Vous devez incorporer ces pauses de fa&ccedil;on explicite &eacute;tant donn&eacute;
que l'&eacute;cran se fige pendant le traitement des scripts et, par cons&eacute;quent, vous emp&ecirc;che d'effectuer d'autres modifications
(et de mettre &agrave; jour l'interface ou le panneau flottant).
Derni&egrave;re mise &agrave; jour le 22/6/2011
242
EXTENSION DE DREAMWEAVER
Panneaux flottants
L'exemple suivant correspond &agrave; un panneau flottant qui affiche des informations sur chacun des &eacute;l&eacute;ments PA du
document. Il utilise la m&eacute;thode setTimeout() pour faire une pause d'une demi-seconde apr&egrave;s le traitement de chaque
&eacute;l&eacute;ment AP.
/* create a flag that specifies whether an edit is being processed, and set it to false.*/
document.running = false;
/* this function called when document is edited */
function documentEdited(){
/* create a list of all the AP elements to be processed */
var dom = dw.getDocumentDOM();
document.layers = dom.getElementsByTagName(&quot;layer&quot;);
document.numLayers = document.layers.length;
document.numProcessed = 0;
/* set a timer to call processLayer(); if we didn't get
* to finish processing the previous edit, then the timer
* is already set. */
if (document.running = false){
setTimeout(&quot;processLayer()&quot;, 500);
}
/* set the processing flag to true */
document.running = true;
}
/* process one AP element*/
function processLayer(){
/* display information for the next unprocessed AP element.
displayLayer() is a function you would write to
perform the &quot;magic&quot;.0*/
displayLayer(document.layers[document.numProcessed]);
/* if there's more work to do, set a timeout to process
* the next layer.0.If we're finished, set the document.running
* flag to false. */
document.numProcessed = document.numProcessed + 1;
if (document.numProcessed &lt; document.numLayers){
setTimeout(&quot;processLayer()&quot;, 500);
}else{
document.running = false;
}
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
243
Chapitre 16 : Comportements
Le terme comportement d&eacute;signe la combinaison d'un &eacute;v&eacute;nement et d'une action. Par exemple, onClick, onLoad et
onSubmit sont des &eacute;v&eacute;nements. V&eacute;rifier le plug-in, Atteindre l'URL et Permuter une image sont pour leur part des
actions. Le navigateur d&eacute;termine quels &eacute;l&eacute;ments HTML acceptent quels &eacute;v&eacute;nements. Les fichiers r&eacute;pertoriant les
&eacute;v&eacute;nements que chaque navigateur prend en charge sont stock&eacute;s dans le dossier Configuration/Behaviors/Events du
dossier de l'application Adobe Dreamweaver
La section body d'un fichier Action contient g&eacute;n&eacute;ralement un formulaire HTML. Ce formulaire accepte les param&egrave;tres
de l'action (par exemple, des param&egrave;tres qui indiquent quels &eacute;l&eacute;ments &agrave; positionnement absolu doivent &ecirc;tre affich&eacute;s
ou masqu&eacute;s). La section head d'un fichier Action contient des fonctions JavaScript qui traitent l'entr&eacute;e de formulaire
depuis le contenu de la section body. Elles contr&ocirc;lent &eacute;galement les fonctions, arguments et gestionnaires d'&eacute;v&eacute;nement
qui sont ins&eacute;r&eacute;s dans le document d'un utilisateur.
Vous pouvez r&eacute;diger des actions de comportement pour partager des fonctions avec d'autres utilisateurs ou ins&eacute;rer &agrave;
plusieurs reprises une m&ecirc;me fonction JavaScript. Veillez &agrave; modifier les param&egrave;tres &agrave; chaque fois.
Remarque : Vous ne pouvez pas utiliser les comportements pour ins&eacute;rer directement des fonctions VBScript. Vous pouvez
toutefois ajouter indirectement une fonction VBScript en modifiant le mod&egrave;le d'objet de document (DOM) dans la
fonction applyBehavior().
Le tableau ci-dessous &eacute;num&egrave;re les fichiers utilis&eacute;s pour cr&eacute;er des actions de comportement :
Chemin
Fichier
Description
Configuration/Behaviors/Actions/
action_comportement.htm
La section body du fichier contient un formulaire HTML destin&eacute;
aux param&egrave;tres de l'action. La section head du fichier contient
les fonctions JavaScript.
Remarque : Pour plus d'informations sur les comportements de serveur qui offrent une fonctionnalit&eacute; d'application Web,
consultez la section &laquo; Comportements de serveur &raquo; &agrave; la page 256.
Fonctionnement des comportements
Lorsqu'un utilisateur s&eacute;lectionne un &eacute;l&eacute;ment HTML dans un document Dreamweaver et clique sur le bouton Plus (+)
dans le panneau Comportements, les &eacute;v&eacute;nements suivants se produisent :
1 Dreamweaver appelle la fonction canAcceptBehavior() dans chaque fichier d'action pour v&eacute;rifier si l'action est
adapt&eacute;e au document ou &agrave; l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Si cette fonction renvoie la valeur false, Dreamweaver estompe l'action dans le menu d&eacute;roulant des actions. Par
exemple, l'action Contr&ocirc;ler Shockwave ou Flash est estomp&eacute;e lorsque le document de l'utilisateur ne contient pas
de fichiers SWF. Si la valeur renvoy&eacute;e est une liste d'&eacute;v&eacute;nements, Dreamweaver les compare un &agrave; un aux
&eacute;v&eacute;nements valides de l'&eacute;l&eacute;ment HTML actuellement s&eacute;lectionn&eacute; et du navigateur cible jusqu'&agrave; ce qu'une
correspondance soit trouv&eacute;e. Dreamweaver ajoute au menu d&eacute;roulant Ev&eacute;nements l'&eacute;v&eacute;nement correspondant,
extrait de la fonction canAcceptBehavior() en t&ecirc;te de liste. Si aucune correspondance n'est &eacute;tablie, l'&eacute;v&eacute;nement
associ&eacute; par d&eacute;faut &agrave; l'&eacute;l&eacute;ment HTML (marqu&eacute; d'un ast&eacute;risque [*]) dans le fichier d'&eacute;v&eacute;nements) est plac&eacute; en t&ecirc;te de
liste. Les autres &eacute;v&eacute;nements du menu sont assembl&eacute;s &agrave; partir du fichier d'&eacute;v&eacute;nements.
2 L'utilisateur s&eacute;lectionne une action dans le menu d&eacute;roulant des actions.
Derni&egrave;re mise &agrave; jour le 22/6/2011
244
EXTENSION DE DREAMWEAVER
Comportements
3 Dreamweaver appelle la fonction windowDimensions() pour d&eacute;terminer la taille de la bo&icirc;te de dialogue des
param&egrave;tres. Si la fonction windowDimensions() n'est pas d&eacute;finie, la taille est d&eacute;termin&eacute;e automatiquement.
Une bo&icirc;te de dialogue s'affiche toujours, les boutons OK et Annuler figurant sur le c&ocirc;t&eacute; droit, quel que soit le
contenu de l'&eacute;l&eacute;ment body.
4 Dreamweaver affiche une bo&icirc;te de dialogue contenant les &eacute;l&eacute;ments BODY du fichier d'action. Si la balise body du
fichier d'action contient un gestionnaire onLoad, Dreamweaver l'ex&eacute;cute.
5 L'utilisateur entre les param&egrave;tres de l'action. Dreamweaver ex&eacute;cute les gestionnaires d'&eacute;v&eacute;nements associ&eacute;s aux
champs du formulaire au fur et &agrave; mesure que l'utilisateur les rencontre.
6 L'utilisateur clique sur OK.
7 Dreamweaver appelle les fonctions behaviorFunction() et applyBehavior() dans le fichier d'action
s&eacute;lectionn&eacute;. Ces fonctions renvoient des cha&icirc;nes qui sont ins&eacute;r&eacute;es dans le document de l'utilisateur.
8 Si l'utilisateur double-clique sur l'action dans la colonne Actions, Dreamweaver rouvre la bo&icirc;te de dialogue des
param&egrave;tres et ex&eacute;cute le gestionnaire onLoad. Dreamweaver appelle alors la fonction inspectBehavior() dans
le fichier d'action s&eacute;lectionn&eacute;, ce qui a pour effet de renseigner les champs &agrave; l'aide des donn&eacute;es que l'utilisateur a
entr&eacute;es pr&eacute;c&eacute;demment.
Insertion de fonctions multiples dans le fichier de l'utilisateur
Les actions peuvent ins&eacute;rer plusieurs fonctions (la fonction de comportement principale et un nombre illimit&eacute; de
fonctions d'assistance) dans la section head. Plusieurs comportements peuvent m&ecirc;me partager des fonctions
d'assistance, &agrave; condition que les fonctions soient d&eacute;finies exactement de la m&ecirc;me fa&ccedil;on dans chaque fichier d'action.
Une fa&ccedil;on de garantir que les fonctions partag&eacute;es sont identiques consiste &agrave; stocker chaque fonction d'assistance dans
un fichier JavaScript externe et &agrave; ins&eacute;rer ce dernier dans les fichiers d'action appropri&eacute;s &agrave; l'aide de &lt;SCRIPT
SRC=&quot;externalFile.js&quot;&gt;.
Lorsque l'utilisateur supprime un comportement, Dreamweaver tente de supprimer toutes les fonctions d'assistance
inutilis&eacute;es associ&eacute;es &agrave; ce comportement. Si d'autres comportements utilisent une fonction d'assistance, celle-ci n'est
pas supprim&eacute;e. En raison de l'extr&ecirc;me prudence de l'algorithme de suppression des fonctions d'assistance,
Dreamweaver peut occasionnellement laisser une fonction inutilis&eacute;e dans le document de l'utilisateur.
Traitement des actions exigeant une valeur en retour
Il peut arriver qu'un gestionnaire d'&eacute;v&eacute;nements exige une valeur renvoy&eacute;e (par exemple,
onMouseOver=&quot;window.status='This is a link'; return true&quot;). Toutefois, si Dreamweaver ins&egrave;re l'action
&quot;return behaviorName(args)&quot; dans le gestionnaire d'&eacute;v&eacute;nements, les comportements figurant plus loin dans la
liste sont ignor&eacute;s.
Pour contourner cette limitation, affectez la valeur de retour souhait&eacute;e &agrave; la variable document.MM_returnValue, dans
la cha&icirc;ne renvoy&eacute;e par la fonction behaviorFunction(). Ce param&eacute;trage entra&icirc;ne l'insertion par Dreamweaver de
return document.MM_returnValue &agrave; la fin de la liste des actions du gestionnaire d'&eacute;v&eacute;nements. Pour consulter un
exemple d'utilisation de la variable MM_returnValue, voir le fichier Validate Form.js, qui r&eacute;side dans le dossier
Configuration/Behaviors/Actions au sein du dossier de l'application Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
245
EXTENSION DE DREAMWEAVER
Comportements
Exemple de comportement simple
Pour mieux comprendre le fonctionnement des comportements et la fa&ccedil;on de le cr&eacute;er, il peut &ecirc;tre utile d'examiner un
exemple. Le dossier Configuration/Behaviors/Actions, qui r&eacute;side au sein du dossier de l'application Dreamweaver,
contient des exemples. La plupart d'entre eux sont cependant tr&egrave;s complexes. Cet exemple est plus simple, vous
permettant ainsi de vous familiariser avec la cr&eacute;ation de comportements. Le fichier d'action le plus simple pour
commencer est Call JavaScript.htm (avec son homologue, Call JavaScript.js, qui contient toutes les fonctions
JavaScript).
Pour cr&eacute;er le comportement, cr&eacute;ez une extension, cr&eacute;ez les fichiers HTML &agrave; consulter, puis testez le comportement.
Cr&eacute;ation de l'extension de comportement
Le code suivant pr&eacute;sente un exemple relativement simple. Le code v&eacute;rifie la marque du navigateur. Le code ouvre une
page si le navigateur est Netscape Navigator et une autre s'il s'agit de Microsoft Internet Explorer. Ce code peut
facilement &ecirc;tre &eacute;tendu pour v&eacute;rifier d'autres types de navigateurs (tels qu'Opera et WebTV) et modifi&eacute; pour ex&eacute;cuter
d'autres actions que l'action d'atteindre des URL.
1 Cr&eacute;ez un document vierge.
2 Ins&eacute;rez le code suivant dans le fichier :
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//dialog&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;behavior &quot;Check Browser Brand&quot;&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html&quot;&gt;
&lt;script language=&quot;JavaScript&quot;&gt;
// The function that will be inserted into the
// HEAD of the user's document
function checkBrowserBrand(netscapeURL,explorerURL) {
if (navigator.appName == &quot;Netscape&quot;) {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == &quot;Microsoft Internet Explorer&quot;) {
if (explorerURL) location.href = explorerURL;
}
}
//******************* API **********************
function canAcceptBehavior(){
return true;
}
// Return the name of the function to be inserted into
// the HEAD of the user's document
function behaviorFunction(){
return &quot;checkBrowserBrand&quot;;
}
// Create the function call that will be inserted
// with the event handler
function applyBehavior() {
var nsURL = escape(document.theForm.nsURL.value);
var ieURL = escape(document.theForm.ieURL.value);
Derni&egrave;re mise &agrave; jour le 22/6/2011
246
EXTENSION DE DREAMWEAVER
Comportements
if (nsURL &amp;&amp; ieURL) {
return &quot;checkBrowserBrand(\'&quot; + nsURL + &quot;\',\'&quot; + ieURL + &quot;\')&quot;;
}else{
return &quot;Please enter URLs in both fields.&quot;
}
}
// Extract the arguments from the function call
// in the event handler and repopulate the
// parameters form
function inspectBehavior(fnCall){
var argArray = getTokens(fnCall, &quot;()',&quot;);
var nsURL = unescape(argArray[1]);
var ieURL = unescape(argArray[2]);
document.theForm.nsURL.value = nsURL;
document.theForm.ieURL.value = ieURL;
}
//***************** LOCAL FUNCTIONS ******************
// Put the pointer in the first text field
// and select the contents, if any
function initializeUI(){
document.theForm.nsURL.focus();
document.theForm.nsURL.select();
}
// Let the user browse to the Navigator and
// IE URLs
function browseForURLs(whichButton){
var theURL = dreamweaver.browseForFileURL();
if (whichButton == &quot;nsURL&quot;){
document.theForm.nsURL.value = theURL;
}else{
document.theForm.ieURL.value = theURL;
}
}
//*************** END OF JAVASCRIPT *****************
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
247
EXTENSION DE DREAMWEAVER
Comportements
&lt;form method=&quot;post&quot; action=&quot;&quot; name=&quot;theForm&quot;&gt;
&lt;table border=&quot;0&quot; cellpadding=&quot;8&quot;&gt;
&lt;tr&gt;
&lt;td nowrap=&quot;nowrap&quot;&gt;&amp;nbsp;&amp;nbsp;Go to this URL if the browser is &not;
Netscape Navigator:&lt;br&gt;
&lt;input type=&quot;text&quot; name=&quot;nsURL&quot; size=&quot;50&quot; value=&quot;&quot;&gt; &amp;nbsp;
&lt;input type=&quot;button&quot; name=&quot;nsBrowse&quot; value=&quot;Browse...&quot; &not;
onClick=&quot;browseForURLs('nsURL')&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td nowrap=&quot;nowrap&quot;&gt;&amp;nbsp;&amp;nbsp;Go to this URL is the browser is &not;
Microsoft Internet Explorer:&lt;br&gt;
&lt;input type=&quot;text&quot; name=&quot;ieURL&quot; size=&quot;50&quot; value=&quot;&quot;&gt; &amp;nbsp;
&lt;input type=&quot;button&quot; name=&quot;ieBrowse&quot; value=&quot;Browse...&quot; &not;
onClick=&quot;browseForURLs('ieURL')&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom Configuration/Behaviors/Actions/BrowserDependentURL.htm.
Cr&eacute;ation des fichiers HTML &agrave; consulter (supprim&eacute;)
Cr&eacute;ez les fichiers HTML &agrave; consulter, selon que votre navigateur correspond &agrave; Internet Explorer ou Netscape
Navigator.
1 Cr&eacute;ez un fichier poss&eacute;dant le contenu suivant :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;title&gt;Internet Explorer Only&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
This is the page to go to if you are using Internet Explorer.
&lt;/body&gt;
&lt;/html&gt;
2 Enregistrez le fichier sous le nom iecontent.htm sur votre ordinateur.
3 Cr&eacute;ez un autre fichier poss&eacute;dant le contenu suivant :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;title&gt;Netscape Navigator content&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
This is the page to go to if you are using Netscape Navigator.
&lt;/body&gt;
&lt;/html&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
248
EXTENSION DE DREAMWEAVER
Comportements
4 Enregistrez le fichier sous le nom netscapecontent.htm dans le m&ecirc;me dossier que le fichier iecontent.htm.
5 Red&eacute;marrez Dreamweaver.
6 Cr&eacute;ez un fichier HTML poss&eacute;dant le contenu suivant :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;title&gt;Which browser&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
7 Enregistrez le fichier sous le nom whichbrowser.htm dans le m&ecirc;me dossier que le fichier iecontent.htm.
8 Cliquez sur le bouton Plus (+) du panneau Comportements et s&eacute;lectionnez le comportement Check Browser Band
(V&eacute;rifier type de navigateur).
9 Cliquez sur le bouton Parcourir &agrave; c&ocirc;t&eacute; de l'option Aller &agrave; l'URL, puis s&eacute;lectionnez le fichier netscapecontent.htm si
le navigateur est Netscape Navigator. Si le navigateur est Internet Explorer, s&eacute;lectionnez le fichier iecontent.htm.
10 Cliquez sur OK.
Dreamweaver ajoute le code JavaScript sp&eacute;cifi&eacute; au fichier whichbrowser.htm. Ce dernier se pr&eacute;sente alors comme suit :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
&lt;title&gt;Which browser&lt;/title&gt;
&lt;script language=&quot;JavaScript&quot; type=&quot;text/JavaScript&quot;&gt;
&lt;!-function checkBrowserBrand(netscapeURL,explorerURL) {
if (navigator.appName == &quot;Netscape&quot;) {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == &quot;Microsoft Internet Explorer&quot;) {
if (explorerURL) location.href = explorerURL;
}
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad=&quot;checkBrowserBrand('netscaptecontent.htm','iecontent.htm')&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;
Test du comportement
1 Affichez le fichier whichbrowser.htm dans votre navigateur.
2 Le fichier qui s'affiche (iecontent.htm ou netscapecontent.htm) varie selon le navigateur utilis&eacute;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
249
EXTENSION DE DREAMWEAVER
Comportements
Fonction de l'API des comportements
Deux fonctions d'API de comportements sont obligatoires : applyBehavior() et behaviorFunction(); les autres
sont facultatives.
applyBehavior()
Description
Cette fonction ins&egrave;re, dans le document de l'utilisateur, un gestionnaire d'&eacute;v&eacute;nements qui appelle la fonction ins&eacute;r&eacute;e
par la fonction behaviorFunction(). La fonction applyBehavior() peut &eacute;galement ex&eacute;cuter d'autres modifications
dans le document de l'utilisateur, mais elle ne doit pas supprimer l'objet auquel le comportement est appliqu&eacute; ou qui
re&ccedil;oit l'action.
Lorsque vous &eacute;crivez la fonction applyBehavior(), vous devez d&eacute;terminer comment modifier le document de
l'utilisateur. Par exemple, vous pouvez d&eacute;cider d'ins&eacute;rer du code entre les balises de script dans le corps du document.
Pour ce faire, utilisez les API de modification de DOM.
Arguments
uniqueName
Cet argument est un identifiant unique parmi toutes les instances de tous les comportements du document de
l'utilisateur. Son format est functionNameInteger, o&ugrave; functionName correspond au nom de la fonction ins&eacute;r&eacute;e par
behaviorFunction(). Cet argument peut &ecirc;tre utile si vous ins&eacute;rez une balise dans le document de l'utilisateur et
souhaitez affecter une valeur unique &agrave; son attribut NAME.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne contenant l'appel de fonction qui doit &ecirc;tre ins&eacute;r&eacute; dans le document de l'utilisateur,
g&eacute;n&eacute;ralement apr&egrave;s acceptation des param&egrave;tres entr&eacute;s par l'utilisateur. Si la fonction applyBehavior() d&eacute;termine que
l'utilisateur a effectu&eacute; une entr&eacute;e non valide, la fonction peut renvoyer une cha&icirc;ne d'erreur au lieu de l'appel de
fonction. Dreamweaver ne signale aucune erreur si la cha&icirc;ne est vide (return &quot;&quot;;), mais si la cha&icirc;ne n'est pas vide et
qu'elle n'est pas non plus un appel de fonction, Dreamweaver affiche une bo&icirc;te de dialogue contenant le texte : Invalid
Input supplied for this behavior: et la cha&icirc;ne renvoy&eacute;e depuis appplyBehavior(). Si la valeur renvoy&eacute;e est null
(return;), Dreamweaver indique qu'une erreur s'est produite mais sans fournir plus de d&eacute;tails.
Remarque : Les guillemets (&quot;&quot;) contenus dans la cha&icirc;ne renvoy&eacute;e doivent &ecirc;tre pr&eacute;c&eacute;d&eacute;s d'une barre oblique invers&eacute;e (\)
afin d'&eacute;viter que l'interpr&eacute;teur JavaScript ne signale des erreurs.
Exemple
Dans l'exemple suivant, la fonction applyBehavior() renvoie un appel &agrave; la fonction MM_openBrWindow() et
transmet les param&egrave;tres fournis par l'utilisateur (hauteur et largeur de la fen&ecirc;tre; affichage des barres de d&eacute;filement,
une barre d'outils, une barre d'emplacement et d'autres fonctions; URL devant s'ouvrir dans la fen&ecirc;tre) :
Derni&egrave;re mise &agrave; jour le 22/6/2011
250
EXTENSION DE DREAMWEAVER
Comportements
function applyBehavior() {
var i,theURL,theName,arrayIndex = 0;
var argArray = new Array(); //use array to produce correct &not;
number of commas w/o spaces
var checkBoxNames = new Array(&quot;toolbar&quot;,&quot;location&quot;,&not;
&quot;status&quot;,&quot;menubar&quot;,&quot;scrollbars&quot;,&quot;resizable&quot;);
for (i=0; i&lt;checkBoxNames.length; i++) {
theCheckBox = eval(&quot;document.theForm.&quot; + checkBoxNames[i]);
if (theCheckBox.checked) argArray[arrayIndex++] = (checkBoxNames[i] + &quot;=yes&quot;);
}
if (document.theForm.width.value)
argArray[arrayIndex++] = (&quot;width=&quot; + document.theForm.width.value);
if (document.theForm.height.value)
argArray[arrayIndex++] = (&quot;height=&quot; + document.theForm.height.value);
theURL = escape(document.theForm.URL.value);
theName = document.theForm.winName.value;
return &quot;MM_openBrWindow('&quot;+theURL+&quot;','&quot;+theName+&quot;','&quot;+argArray.join()+&quot;')&quot;;
}
behaviorFunction()
Description
Cette fonction ins&egrave;re une ou plusieurs fonctions (plac&eacute;es entre les balises suivantes, si elles n'existent pas encore) dans
la section head du document utilisateur :
&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;&lt;/SCRIPT&gt;
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend soit une cha&icirc;ne contenant les fonctions JavaScript, soit une cha&icirc;ne contenant les noms des
fonctions &agrave; ins&eacute;rer dans le document de l'utilisateur. Cette valeur doit &ecirc;tre chaque fois identique (elle ne peut pas
d&eacute;pendre des donn&eacute;es entr&eacute;es par l'utilisateur). Les fonctions sont ins&eacute;r&eacute;es une seule fois, quel que soit le nombre de
fois que l'action est appliqu&eacute;e aux &eacute;l&eacute;ments du document.
Remarque : Les guillemets (&quot;&quot;) contenus dans la cha&icirc;ne renvoy&eacute;e doivent &ecirc;tre pr&eacute;c&eacute;d&eacute;s d'une barre oblique invers&eacute;e (\)
afin d'&eacute;viter que l'interpr&eacute;teur JavaScript ne signale des erreurs.
Exemple
L'instance suivante de la fonction behaviorFunction() renvoie la fonction MM_popupMsg() :
function behaviorFunction(){
return &quot;&quot;+
&quot;function MM_popupMsg(theMsg) { //v1.0\n&quot;+
&quot;alert(theMsg);\n&quot;+
&quot;}&quot;;
}
Le code suivant est &eacute;quivalent &agrave; la d&eacute;claration de fonction behaviorFunction() pr&eacute;c&eacute;dente et correspond &agrave; la
m&eacute;thode utilis&eacute;e pour d&eacute;clarer la fonction behaviorFunction() dans tous les comportements int&eacute;gr&eacute;s &agrave;
Dreamweaver :
Derni&egrave;re mise &agrave; jour le 22/6/2011
251
EXTENSION DE DREAMWEAVER
Comportements
function MM_popupMsg(theMsg){ //v1.0
alert(theMsg);
}
function behaviorFunction(){
return &quot;MM_popupMsg&quot;;
}
canAcceptBehavior()
Description
Cette fonction indique si l'action est autoris&eacute;e pour l'&eacute;l&eacute;ment HTML s&eacute;lectionn&eacute; et d&eacute;finit l'&eacute;v&eacute;nement par d&eacute;faut qui
doit la d&eacute;clencher. Elle peut &eacute;galement rechercher la pr&eacute;sence de certains objets (tels que des fichiers SWF) dans le
document de l'utilisateur et interdire l'action si ces objets sont absents.
Arguments
HTMLElement
L'argument est l'&eacute;l&eacute;ment HTML s&eacute;lectionn&eacute;.
Valeurs renvoy&eacute;es
Dreamweaver renvoie l'une des valeurs suivantes :
• La valeur true si l'action est autoris&eacute;e mais n'est associ&eacute;e &agrave; aucun &eacute;v&eacute;nement pr&eacute;f&eacute;r&eacute;.
• Une liste des &eacute;v&eacute;nements pr&eacute;f&eacute;r&eacute;s (par ordre d&eacute;croissant de pr&eacute;f&eacute;rence) de cette action. La d&eacute;finition d'&eacute;v&eacute;nements
pr&eacute;f&eacute;r&eacute;s remplace l'&eacute;v&eacute;nement par d&eacute;faut (signal&eacute; par un ast&eacute;risque [*] dans le fichier d'&eacute;v&eacute;nements) de l'objet
s&eacute;lectionn&eacute;. Reportez-vous &agrave; l'&eacute;tape 1 de la section &laquo; Fonctionnement des comportements &raquo; &agrave; la page 243.
• La valeur false si l'action n'est pas autoris&eacute;e.
Si la fonction canAcceptBehavior() renvoie la valeur false, l'action est estomp&eacute;e dans le menu contextuel
Actions du panneau Comportements.
Exemple
Dans l'exemple suivant, la fonction canAcceptBehavior() renvoie une liste des &eacute;v&eacute;nements pr&eacute;f&eacute;r&eacute;s pour le
comportement si le document contient des images nomm&eacute;es :
function canAcceptBehavior(){
var theDOM = dreamweaver.getDocumentDOM();
// Get an array of all images in the document
var allImages = theDOM.getElementsByTagName('IMG');
if (allImages.length &gt; 0){
return &quot;onMouseOver, onClick, onMouseDown&quot;;
}else{
return false;
}
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
252
EXTENSION DE DREAMWEAVER
Comportements
displayHelp()
Description
Si cette fonction est d&eacute;finie, un bouton Aide appara&icirc;t sous les boutons OK et Annuler dans la bo&icirc;te de dialogue des
param&egrave;tres. Cette fonction est appel&eacute;e lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
// the following instance of displayHelp() opens
// in a browser a file that explains how to use
// the extension.
function displayHelp(){
var myHelpFile = dw.getConfigurationPath() +
'/ExtensionsHelp/superDuperHelp.htm';
dw.browseDocument(myHelpFile);
}
deleteBehavior()
Description
Cette fonction annule toute modification effectu&eacute;e par la fonction applyBehavior().
Remarque : Dreamweaver supprime automatiquement la d&eacute;claration de fonction et le gestionnaire d'&eacute;v&eacute;nements
associ&eacute;s &agrave; un comportement lorsque l'utilisateur supprime ce comportement dans le panneau Comportements. Vous ne
devez d&eacute;finir la fonction deleteBehavior() que si la fonction applyBehavior() a effectu&eacute; des modifications
suppl&eacute;mentaires dans le document de l'utilisateur (telle une insertion debalise).
Arguments
applyBehaviorString
Cet argument correspond &agrave; la cha&icirc;ne renvoy&eacute;e par la fonction applyBehavior().
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
identifyBehaviorArguments()
Description
Cette fonction associe les arguments d'un appel de fonction de comportement &agrave; des liens de navigation, fichiers
d&eacute;pendants, URL, r&eacute;f&eacute;rences de style Netscape 4.0 ou noms d'objet, de sorte que les URL utilis&eacute;es dans les
comportements puissent &ecirc;tre mises &agrave; jour si l'utilisateur enregistre le document &agrave; un autre emplacement et pour que
les fichiers r&eacute;f&eacute;renc&eacute;s puissent s'afficher dans la carte du site et &ecirc;tre consid&eacute;r&eacute;s comme des fichiers d&eacute;pendants afin de
pouvoir &ecirc;tre t&eacute;l&eacute;charg&eacute;s vers et depuis un serveur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
253
EXTENSION DE DREAMWEAVER
Comportements
Arguments
theFunctionCall
Cet argument correspond &agrave; la cha&icirc;ne renvoy&eacute;e par la fonction applyBehavior().
Valeurs renvoy&eacute;es
Dreamweaver renvoie une cha&icirc;ne contenant une liste des types d'arguments de l'appel de fonction s&eacute;par&eacute;s par des
virgules. La longueur de la liste doit &ecirc;tre &eacute;gale au nombre d'arguments transmis lors de l'appel de fonction. Les types
d'argument doivent correspondre &agrave; l'un des types suivants :
• Le type d'argument nav indique que l'argument est une URL de navigation et qu'il doit donc &ecirc;tre affich&eacute; dans la
carte du site.
• Le type d'argument dep indique que l'argument est une URL de fichier d&eacute;pendant et qu'il doit donc &ecirc;tre inclus avec
tous les autres fichiers d&eacute;pendants lorsqu'un document contenant ce comportement est t&eacute;l&eacute;charg&eacute; depuis ou vers
un serveur.
• Le type d'argument URL indique que l'argument est &agrave; la fois une URL de navigation et une URL d&eacute;pendante (ou une
URL de type inconnu), et qu'il doit donc &ecirc;tre affich&eacute; dans la carte du site et consid&eacute;r&eacute; comme un fichier d&eacute;pendant
lors du t&eacute;l&eacute;chargement depuis ou vers un serveur.
• Le type d'argument NS4.0ref indique que l'argument est une r&eacute;f&eacute;rence &agrave; un objet de style Netscape Navigator 4.0.
• Le type d'argument IE4.0ref indique que l'argument est une r&eacute;f&eacute;rence &agrave; un objet de style DOM 4.0 d'Internet
Explorer.
• Le type d'argument objName indique que l'argument est un nom d'objet simple, tel qu'il est sp&eacute;cifi&eacute; dans l'attribut
NAME de l'objet. Ce type a &eacute;t&eacute; ajout&eacute; &agrave; Dreamweaver 3.
• Le type d'argument other indique que l'argument n'appartient &agrave; aucun des types ci-dessus.
Exemple
Cet exemple simple de fonction identifyBehaviorArguments() fonctionne avec l'action de comportement Ouvrir
une fen&ecirc;tre du navigateur qui renvoie une fonction comportant toujours trois arguments (l'URL &agrave; ouvrir, le nom de la
nouvelle fen&ecirc;tre et la liste des propri&eacute;t&eacute;s de la fen&ecirc;tre) :
function identifyBehaviorArguments(fnCallStr) {
return &quot;URL,other,other&quot;;
}
Une version plus complexe de la fonction identifyBehaviorArguments() est n&eacute;cessaire pour les fonctions de
comportement qui g&egrave;rent un nombre variable d'arguments (telles qu'Afficher-Masquer les calques). Pour cet exemple
de version de la fonction identifyBehaviorArguments(), il existe un nombre minimum d'arguments et les
arguments suppl&eacute;mentaires se pr&eacute;sentent toujours en groupes dont la taille est un multiple de ce nombre minimum.
En d'autres termes, une fonction dont le nombre d'arguments minimum est 4 peut avoir 4, 8 ou 12 arguments, mais
elle n'en aura jamais 10 :
Derni&egrave;re mise &agrave; jour le 22/6/2011
254
EXTENSION DE DREAMWEAVER
Comportements
function identifyBehaviorArguments(fnCallStr) {
var listOfArgTypes;
var itemArray = dreamweaver.getTokens(fnCallStr, '(),');
// The array of items returned by getTokens() includes the
// function name, so the number of *arguments* in the array
// is the length of the array minus one. Divide by 4 to get the
// number of groups of arguments.
var numArgGroups = ((itemArray.length - 1)/4);
// For each group of arguments
for (i=0; i &lt; numArgGroups; i++){
// Add a comma and &quot;NS4.0ref,IE4.0ref,other,dep&quot; (because this
// hypothetical behavior function has a minimum of four
// arguments the Netscape object reference, the IE object
// reference, a dependent URL, and perhaps a property value
// such as &quot;show&quot; or &quot;hide&quot;) to the existing list of argument
// types, or if no list yet exists, add only
// &quot;NS4.0ref,IE4.0ref,other,dep&quot;
var listOfArgTypes += ((listOfArgTypes)?&quot;,&quot;:&quot;&quot;) + &not;
&quot;NS4.0ref,IE4.0ref,other,dep&quot;;
}
}
inspectBehavior()
Description
Cette fonction recherche dans l'appel de fonction un comportement d&eacute;j&agrave; appliqu&eacute; au document de l'utilisateur et
d&eacute;finit les valeurs des options de la bo&icirc;te de dialogue des param&egrave;tres en cons&eacute;quence. Si la fonction
inspectBehavior() n'est pas d&eacute;finie, les valeurs par d&eacute;faut des options s'affichent.
Remarque : La fonction inspectBehavior() doit uniquement utiliser les informations qui lui sont transmises via
l'argument applyBehaviorString. N'essayez pas d'obtenir d'autres informations sur le document de l'utilisateur (par
exemple, en utilisant la fonction dreamweaver.getDocumentDOM()) dans cette fonction.
Arguments
applyBehaviorString
Cet argument correspond &agrave; la cha&icirc;ne renvoy&eacute;e par la fonction applyBehavior().
Remarque : Si l'&eacute;l&eacute;ment HTML contient du code similaire &agrave; 'onClick=&quot;someBehavior(); return
document.MM_returnValue;&quot;' et que vous ajoutez un nouveau comportement extrait du menu des comportements,
Dreamweaver appelle inspectBehavior() d&egrave;s que l'interface utilisateur du nouveau comportement appara&icirc;t et
transmet le param&egrave;tre sous forme de cha&icirc;ne vide. De ce fait, v&eacute;rifiez le param&egrave;tre applyBehaviorString, illustr&eacute; dans
l'exemple ci-dessous :
function inspectBehavior(enteredStr){
if(enteredStr){
//do your work here
}
}
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Derni&egrave;re mise &agrave; jour le 22/6/2011
255
EXTENSION DE DREAMWEAVER
Comportements
Exemple
L'exemple suivant de fonction inspectBehavior(), extrait du fichier Display Status Message.htm, renseigne le
champ Message de la bo&icirc;te de dialogue des param&egrave;tres avec le message que l'utilisateur a s&eacute;lectionn&eacute; lors de la premi&egrave;re
application du comportement :
function inspectBehavior(msgStr){
var startStr = msgStr.indexOf(&quot;'&quot;) + 1;
var endStr = msgStr.lastIndexOf(&quot;'&quot;);
if (startStr &gt; 0 &amp;&amp; endStr &gt; startStr) {
document.theForm.message.value = &not;
unescQuotes(msgStr.substring(startStr,endStr));
}
}
Remarque : Pour plus d'informations sur la fonction unescQuotes(), voir le fichier dwscripts.js du dossier
Configuration/Shared/Common/Scripts/CMN.
windowDimensions()
Description
Cette fonction d&eacute;finit les dimensions de la bo&icirc;te de dialogue des param&egrave;tres. Si cette fonction n'est pas d&eacute;finie, les
dimensions de la fen&ecirc;tre sont calcul&eacute;es automatiquement.
Remarque : Ne d&eacute;finissez cette fonction que si vous souhaitez utiliser une bo&icirc;te de dialogue de param&egrave;tres ayant des
dimensions sup&eacute;rieures &agrave; 640x 480 pixels.
Arguments
platform
La valeur de l'argument platform est soit macintosh, soit windows, selon la plate-forme utilis&eacute;e par l'utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne au format widthInPixels,heightInPixels.
Les dimensions renvoy&eacute;es sont inf&eacute;rieures &agrave; la taille totale de la bo&icirc;te de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoy&eacute;es ne permettent pas de faire appara&icirc;tre toutes les options, des
barres de d&eacute;filement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() d&eacute;finit les dimensions de la bo&icirc;te de dialogue des
param&egrave;tres &agrave; 648x 520pixels :
function windowDimensions(){
return &quot;648,520&quot;;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
256
Chapitre 17 : Comportements de serveur
Adobe&reg; Dreamweaver&reg; permet aux utilisateurs d'ajouter des comportements de serveur &agrave; leurs documents afin
d'ex&eacute;cuter des t&acirc;ches c&ocirc;t&eacute; serveur, par exemple :
• Filtrer des enregistrements en fonction de crit&egrave;res utilisateur
• Parcourir des enregistrements
• Lier des listes de r&eacute;sultats &agrave; des pages d'informations d&eacute;taill&eacute;es
• Ins&eacute;rer des enregistrements dans un jeu de r&eacute;sultats
Lorsque vous utilisez Dreamweaver, il arrive que vous deviez ins&eacute;rer le m&ecirc;me code d'ex&eacute;cution &agrave; plusieurs reprises
dans les documents. Dans de tels cas, vous pouvez cr&eacute;er une extension afin d'automatiser la proc&eacute;dure de mise &agrave; jour
du document &agrave; l'aide des blocs de code fr&eacute;quemment utilis&eacute;s. Consultez la section &laquo; Ajout de comportements de
serveur personnalis&eacute;s &raquo; du guide Prise en main de Dreamweaver pour plus de d&eacute;tails sur l'utilisation de l'interface de
l'outil Cr&eacute;ateur de comportements de serveur pour cr&eacute;er des comportements de serveur personnalis&eacute;s. Lisez ensuite le
chapitre relatif aux comportements de serveur pour des d&eacute;tails sur l'utilisation de fichiers prenant en charge les
comportements de serveur et les fonctions interagissant avec les comportements de serveur existants. Pour plus
d'informations sur chaque fonction, voir &laquo; Fonctions relatives aux comportements de serveur &raquo; et Fonctions
d'Extension Data Manager &raquo; dans le Guide des API de Dreamweaver. Dreamweaver prend actuellement en charge les
extensions de comportement de serveur qui ajoutent du code d'ex&eacute;cution pour les mod&egrave;les de serveurs suivants :
ASP/JavaScript, ASP/VBScript, ColdFusion et PHP/MySQL.
Terminologie des comportements de serveur
Les termes suivants sont souvent utilis&eacute;s en association avec les comportements de serveur :
Extension de comportements de serveur L'extension de comportements de serveur est l'interface entre le code c&ocirc;t&eacute;
serveur et Dreamweaver. Une extension de comportements de serveur est compos&eacute;e d'un code JavaScript, d'un code
HTML et d'un code EDML (Extension Data Markup Language) qui est du code XML cr&eacute;&eacute; sp&eacute;cifiquement pour les
donn&eacute;es d'extension. Des fichiers d'exemple, organis&eacute;s en fonction du type de serveur utilis&eacute;, sont localis&eacute;s dans le
dossier Configuration/ServerBehaviors, &agrave; l'int&eacute;rieur de votre dossier d'installation. Lorsque vous r&eacute;digez un script
destin&eacute; &agrave; une extension, vous devez utiliser la fonction dwscripts.applySB() pour demander &agrave; Dreamweaver de lire
les fichiers EDML, d'extraire les composants de votre extension et d'ins&eacute;rer les blocs de code requis dans le document
de l'utilisateur.
Instance de comportement de serveur L'ajout par Dreamweaver de blocs de code au document utilisateur constitue
une instance de comportement de serveur. La plupart des comportements de serveur pouvant &ecirc;tre appliqu&eacute;s plusieurs
fois, les instances peuvent &ecirc;tre multiples. Chaque instance de comportement de serveur est r&eacute;pertori&eacute;e dans le panneau
Comportements de serveur de l'interface Dreamweaver.
Code d'ex&eacute;cution Ensemble des blocs de code ajout&eacute;s &agrave; un document lorsqu'un comportement de serveur est
appliqu&eacute;. Ces blocs de code sont d'ordinaire un code c&ocirc;t&eacute; serveur, par exemple, un script ASP compris entre des balises
&lt;% ... %&gt;.
Participants L'extension de comportements de serveur ins&egrave;re des blocs de code dans le document utilisateur. Un bloc
de code est un bloc de script unique et continu, tel qu'une balise c&ocirc;t&eacute; serveur, une balise HTML, voire un attribut qui
ajoute une fonctionnalit&eacute; c&ocirc;t&eacute; serveur &agrave; une page Web. Un fichier EDML d&eacute;signe chaque bloc de code par le terme de
&laquo; participant &raquo;. Tous les participants relatifs &agrave; un comportement de serveur donn&eacute; forment un groupe de participants.
Derni&egrave;re mise &agrave; jour le 22/6/2011
257
EXTENSION DE DREAMWEAVER
Comportements de serveur
Remarque : Pour plus d'informations sur les fichiers Participant et Groupe, ainsi que sur la fa&ccedil;on dont les fichiers EDML
de Dreamweaver sont structur&eacute;s, voir &laquo; Extension Data Markup Language (EDML) &raquo; &agrave; la page 257.
Architecture de Dreamweaver
Lorsque vous utilisez l'outil Cr&eacute;ateur de comportements de serveur pour cr&eacute;er une extension sp&eacute;cifique Dreamweaver,
Dreamweaver g&eacute;n&egrave;re plusieurs fichiers (fichiers de script EDML et HTML) qui prennent en charge l'insertion du code
de comportement de serveur dans un document Dreamweaver (certains comportements r&eacute;f&eacute;rencent &eacute;galement les
fichiers JavaScript pour une fonctionnalit&eacute; optimale). L'architecture simplifie votre impl&eacute;mentation de l'API et s&eacute;pare
votre code d'ex&eacute;cution de la m&eacute;thode d'application de Dreamweaver. Cette rubrique explique comment modifier ces
fichiers.
Dossiers et fichiers de comportements de serveur
L'interface utilisateur pour chaque comportement de serveur r&eacute;side dans le dossier
Configuration/ServerBehaviors/ServerModelName, o&ugrave; ServerModelName correspond &agrave; l'un des types de serveur
suivants : ASP_Js (JavaScript), ASP_Vbs (VBScript), ColdFusion, PHP_MySQL ou Shared (impl&eacute;mentations intermod&egrave;les de serveur).
Extension Data Markup Language (EDML)
Dreamweaver g&eacute;n&egrave;re deux fichiers EDML lorsque vous utilisez l'outil Cr&eacute;ateur de comportements de serveur : un
fichier Groupe EDML et un fichier Participant EDML correspondant aux noms indiqu&eacute;s dans le Cr&eacute;ateur de
comportements de serveur. Le fichier Groupe d&eacute;finit les participants appropri&eacute;s, qui repr&eacute;sentent des blocs de code,
et les groupes d&eacute;finissent les participants devant &ecirc;tre combin&eacute;s pour former un comportement de serveur individuel.
Fichiers Groupe
En g&eacute;n&eacute;ral, les fichiers Groupe contiennent une liste de participants et les fichiers Participant comportent toutes les
donn&eacute;es sur le code sp&eacute;cifiques au mod&egrave;le de serveur. Les fichiers Participant peuvent &ecirc;tre utilis&eacute;s par plusieurs
extensions pour permettre &agrave; plusieurs fichiers Groupe de r&eacute;f&eacute;rencer le m&ecirc;me fichier Participant.
L'exemple suivant pr&eacute;sente une vue de haut niveau du fichier EDML du groupe de comportements de serveur. Vous
trouverez une liste compl&egrave;te des &eacute;l&eacute;ments et attributs dans la section &laquo; Balises de fichiers EDML Groupe &raquo; &agrave; la
page 270.
&lt;group serverBehavior=&quot;Go To Detail Page.htm&quot; dataSource=&quot;Recordset.htm&quot;&gt;
&lt;groupParticipants selectParticipant=&quot;goToDetailPage_attr&quot;&gt;
&lt;groupParticipant name=&quot;moveTo_declareParam&quot;0partType=&quot;member&quot;/&gt;
&lt;groupParticipant name=&quot;moveTo_keepParams&quot;0partType=&quot;member&quot;/&gt;
&lt;groupParticipant name=&quot;goToDetailPage_attr&quot; partType=&quot;identifier&quot; /&gt;
&lt;/groupParticipants&gt;
&lt;/group&gt;
Dans la balise de bloc groupParticipants, chaque balise groupParticipant indique le fichier Participant EDML
contenant le bloc de code &agrave; utiliser. La valeur de l'attribut name est le nom du fichier Participant moins l'extension
.edml (par exemple, l'attribut moveTo_declareParam).
Derni&egrave;re mise &agrave; jour le 22/6/2011
258
EXTENSION DE DREAMWEAVER
Comportements de serveur
Fichiers Participant
Un participant repr&eacute;sente un bloc de code unique sur la page, tel une balise de serveur, une balise HTML ou un
attribut. Pour pouvoir &ecirc;tre utilis&eacute; par un auteur Dreamweaver, le fichier Participant doit figurer dans le fichier Groupe.
Plusieurs groupes de fichiers peuvent utiliser un seul fichier Participant.
Par exemple, le fichier moveTo_declareParam.edml contient le code suivant :
&lt;participant&gt;
&lt;quickSearch&gt;&lt;![CDATA[MM_paramName]]&gt;&lt;/quickSearch&gt;
&lt;insertText location=&quot;aboveHTML+80&quot;&gt;
&lt;![CDATA[
&lt;% var MM_paramName = &quot;&quot;; %&gt;
]]&gt;
&lt;/insertText&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern&gt;&lt;![CDATA[/var\s*MM_paramName/]]&gt;&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
&lt;/participant&gt;
Pour ajouter un comportement de serveur &agrave; un document, Dreamweaver a besoin d'informations d&eacute;taill&eacute;es,
notamment l'endroit o&ugrave; ins&eacute;rer le code, l'aspect du code et les param&egrave;tres remplac&eacute;s par l'auteur ou par les donn&eacute;es &agrave;
l'ex&eacute;cution. C'est ce que chaque fichier EDML Participant d&eacute;crit pour chaque bloc de code. Plus particuli&egrave;rement, le
fichier Participant d&eacute;crit les donn&eacute;es suivantes :
• Ce code et l'emplacement de l'instance unique sont d&eacute;finis par les param&egrave;tres de la balise insertText, comme
illustr&eacute; dans l'exemple suivant :
&lt;insertText location=&quot;aboveHTML+80&quot;&gt;
• Comment reconna&icirc;tre les instances d&eacute;j&agrave; sur la page qui sont d&eacute;finies par la balise searchPatterns, comme illustr&eacute;
dans l'exemple suivant :
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern&gt;&lt;![CDATA[/var\s*MM_paramName/]]&gt;&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Dans la balise du bloc searchPatterns, chaque balise searchPattern contient un mod&egrave;le utilis&eacute; pour rechercher
des instances de code d'ex&eacute;cution et pour extraire des param&egrave;tres sp&eacute;cifiques. Pour plus d'informations, voir
&laquo; Techniques de comportements de serveur &raquo; &agrave; la page 294.
Fichier Script
Chaque comportement de serveur dispose &eacute;galement d'un fichier HTML contenant les fonctions et les liens relatifs aux
scripts qui g&egrave;rent l'int&eacute;gration du code de comportement de serveur &agrave; l'interface Dreamweaver. Les fonctions pouvant
&ecirc;tre modifi&eacute;es sont trait&eacute;es dans la section &laquo; Fonctions d'impl&eacute;mentation des comportements de serveur &raquo; &agrave; la
page 266.
Exemple de comportement de serveur simple
L'exemple suivant illustre le processus de cr&eacute;ation d'un nouveau comportement de serveur et vous permet de voir et
de g&eacute;rer les fichiers g&eacute;n&eacute;r&eacute;s par Dreamweaver. Pour plus d'informations sur l'utilisation de l'interface du Cr&eacute;ateur de
comportements de serveur, voir Ajout de comportements de serveur personnalis&eacute;s dans Prise en main de
Dreamweaver. L'exemple affiche &laquo; Hello World &raquo; depuis le serveur ASP. Le comportement &laquo; Hello World &raquo; contient
un seul participant (une simple balise ASP) et rien n'est modifi&eacute;, ni ajout&eacute; sur la page.
Derni&egrave;re mise &agrave; jour le 22/6/2011
259
EXTENSION DE DREAMWEAVER
Comportements de serveur
Pour cr&eacute;er le comportement, vous devez cr&eacute;er le document de page dynamique, d&eacute;finir le nouveau comportement de
serveur puis d&eacute;finir le code &agrave; ins&eacute;rer.
Cr&eacute;ation du document contenant des pages dynamiques
1 Dans Dreamweaver, choisissez Fichier &gt; Nouveau.
2 Dans la bo&icirc;te de dialogue Nouveau document, choisissez Cat&eacute;gorie : Page dynamique puis Page dynamique : ASP
JavaScript.
3 Cliquez sur Cr&eacute;er.
D&eacute;finition du nouveau comportement de serveur
Remarque : Si le panneau Comportements de serveur n'est ni ouvert, ni visible, choisissez Fen&ecirc;tre &gt; Comportements de
serveur.
1 Dans le panneau Comportements de serveur, s&eacute;lectionnez le bouton Plus (+) et l'option Nouveau comportement
de serveur.
2 Dans la bo&icirc;te de dialogue Nouveau comportement de serveur, choisissez Type de document : ASP JavaScript et
entre &laquo; Hello World &raquo; comme nom. Ne cochez pas la case &laquo; Copier un comportement de serveur existant &raquo;.
3 Cliquez sur OK.
D&eacute;finition du code &agrave; ins&eacute;rer
1 S&eacute;lectionnez le bouton Plus (+) pour l'option Blocs de code &agrave; ins&eacute;rer.
2 Dans la bo&icirc;te de dialogue Cr&eacute;er un nouveau bloc de code, entrez Hello_World_block1 (Dreamweaver entre cette
information automatiquement dans certains cas).
3 Cliquez sur OK.
4 Dans le champ de texte Bloc de code, entrez &lt;% Response.Write(“Hello World”) %&gt;.
5 Dans le menu d&eacute;roulant Ins&eacute;rer code, s&eacute;lectionnez Relatif &agrave; la s&eacute;lection pour permettre &agrave; l'utilisateur de contr&ocirc;ler
l'emplacement du code dans le document.
6 Dans le menu d&eacute;roulant Position relative, s&eacute;lectionnez Apr&egrave;s la s&eacute;lection.
7 Cliquez sur OK.
Dans le panneau Comportements de serveur, vous constatez que le menu Plus (+) contient le nouveau comportement
de serveur dans la liste d&eacute;roulante. Dans le dossier d'installation de vos fichiers Dreamweaver, le dossier
Configuration/ServerBehaviors/ASP_Js contient d&eacute;sormais les trois fichiers suivants :
• Le fichier Groupe : Hello World.edml
• Le fichier Participant : Hello World_block1.edml
• Un fichier de script : Hello World.htm
Remarque : Si vous travaillez dans un environnement multi-utilisateur, ces fichiers s'affichent dans votre dossier
Application Data.
Derni&egrave;re mise &agrave; jour le 22/6/2011
260
EXTENSION DE DREAMWEAVER
Comportements de serveur
Sc&eacute;narios dans lesquels les fonctions de l'API de
comportement de serveur sont appel&eacute;es
Les fonctions de l'API de comportement de serveur sont appel&eacute;es dans les situations suivantes :
• La fonction findServerBehaviors() est appel&eacute;e &agrave; l'ouverture du document et &agrave; chaque fois qu'un participant est
modifi&eacute;. Elle recherche des instances du comportement de serveur dans le document utilisateur. Pour chaque
instance trouv&eacute;e, la fonction findServerBehaviors() cr&eacute;e un objet JavaScript et lui associe des informations
d'&eacute;tat &agrave; l'aide de propri&eacute;t&eacute;s JavaScript.
• Lorsqu'elle est mise en œuvre, Dreamweaver appelle la fonction analyzeServerBehavior() pour chaque
comportement trouv&eacute; dans le document utilisateur apr&egrave;s que toutes les fonctions findServerBehaviors() ont
&eacute;t&eacute; appel&eacute;es.
Lorsque la fonction findServerBehaviors() cr&eacute;e un objet de comportement, elle d&eacute;finit normalement les quatre
propri&eacute;t&eacute;s (incomplete, participants, selectedNode et title). Cependant, il est parfois plus facile de retarder
la configuration de certaines des propri&eacute;t&eacute;s jusqu'&agrave; ce que tous les autres comportements de serveur aient trouv&eacute;
des instances d'eux-m&ecirc;mes. Par exemple, le comportement D&eacute;placer vers l'enregistrement suivant poss&egrave;de deux
participants : un objet link et un objet recordset. Plut&ocirc;t que de rechercher l'objet du jeu d'enregistrements dans sa
fonction findServerBehaviors(), attendez que la fonction findServerBehaviors() du comportement du jeu
d'enregistrements soit ex&eacute;cut&eacute;e, car le jeu d'enregistrements recherche toutes ses propres instances.
Lorsque la fonction analyzeServerBehavior() du comportement D&eacute;placer vers l'enregistrement suivant est
appel&eacute;e, un tableau lui est transmis, contenant tous les objets de comportement de serveur du document. La
fonction peut rechercher l'objet de jeu d'enregistrements dans le tableau.
En cours d'analyse, il arrive que plusieurs comportements identifient une seule balise dans le document utilisateur
comme &eacute;tant une instance de ce comportement. Supposons, par exemple, que la fonction
findServerBehaviors() pour le comportement Attribut dynamique d&eacute;tecte une instance du comportement
Attribut dynamique associ&eacute;e &agrave; une balise input dans le document utilisateur. Simultan&eacute;ment, la fonction
findServerBehaviors() pour le comportement Champ de texte dynamique peut analyser la m&ecirc;me balise input
et d&eacute;tecter une instance du comportement Champ de texte dynamique. Le panneau Comportements de serveur
affiche alors le bloc Attribut dynamique et le comportement Champ de texte dynamique. Pour corriger ce
probl&egrave;me, utilisez les fonctions analyzeServerBehavior() pour supprimer tous les comportements de serveur
redondants sauf un.
Pour supprimer un comportement de serveur, une fonction analyzeServerBehavior() peut d&eacute;finir la propri&eacute;t&eacute;
deleted dudit comportement sur la valeur true. Si la propri&eacute;t&eacute; deleted a toujours la valeur true lorsque
Dreamweaver finit d'appeler les fonctions analyzeServerBehavior(), le comportement dispara&icirc;t de la liste.
• Lorsque l'utilisateur clique sur le bouton Plus (+) du panneau Comportements de serveur, le menu contextuel
s'affiche.
Pour d&eacute;terminer le contenu du menu, Dreamweaver recherche d'abord un fichier ServerBehaviors.xml dans le
m&ecirc;me r&eacute;pertoire que celui des comportements. ServerBehaviors.xml fait r&eacute;f&eacute;rence aux fichiers HTML devant
appara&icirc;tre dans le menu.
Si le fichier HTML r&eacute;f&eacute;renc&eacute; contient une balise de titre (title), le contenu de cette balise s'affiche dans le menu. Par
exemple, si le fichier ServerBehaviors/ASP_Js/GetRecords.htm contient la balise &lt;title&gt;Get More
Records&lt;/title&gt;, le texte Get More Records s'affiche dans le menu.
Si le fichier ne contient pas de balise de titre, c'est le nom du fichier qui appara&icirc;t dans le menu. Par exemple, si
GetRecords.htm ne contient pas de balise de titre, la mention GetRecords s'affiche dans le menu.
Derni&egrave;re mise &agrave; jour le 22/6/2011
261
EXTENSION DE DREAMWEAVER
Comportements de serveur
S'il n'y a pas de fichier ServerBehaviors.xml ou si le r&eacute;pertoire contient un ou plusieurs fichiers HTML non
mentionn&eacute;s dans ServerBehaviors.xml, Dreamweaver recherche une balise title dans chaque fichier et fait figurer
dans le menu le nom de cette balise ou celui du fichier.
Si vous ne voulez pas qu'un fichier du r&eacute;pertoire ServerBehaviors s'affiche dans le menu, ajoutez l'instruction
suivante sur la premi&egrave;re ligne du fichier HTML :
&lt;!-- MENU-LOCATION=NONE --&gt;
• La fonction canApplyServerBehavior() est appel&eacute;e lorsque l'utilisateur s&eacute;lectionne un &eacute;l&eacute;ment dans le menu. Si
cette fonction renvoie une valeur true, une bo&icirc;te de dialogue s'affiche. Lorsque l'utilisateur clique sur OK, la
fonction applyServerBehavior() est appel&eacute;e.
• Si l'utilisateur double-clique sur un comportement de serveur existant pour le modifier, Dreamweaver affiche la
bo&icirc;te de dialogue, ex&eacute;cute le gestionnaire onLoad sur la balise body (si elle existe), puis appelle la fonction
inspectServerBehavior(). La fonction inspectServerBehavior() renseigne les &eacute;l&eacute;ments du formulaire avec
les valeurs de l'argument actuel. Lorsque l'utilisateur clique sur OK, Dreamweaver appelle &agrave; nouveau la fonction
applyServerBehavior().
• Si l'utilisateur clique sur le bouton moins (-), la fonction deleteServerBehavior() est appel&eacute;e. La fonction
deleteServerBehavior() supprime les comportements correspondants du document.
• Lorsque l'utilisateur s&eacute;lectionne un comportement de serveur et utilise les commandes Couper ou Copier,
Dreamweaver transmet l'objet repr&eacute;sentant le comportement de serveur &agrave; sa fonction copyServerBehavior(). La
fonction copyServerBehavior() ajoute &agrave; l'objet de comportement les autres propri&eacute;t&eacute;s n&eacute;cessaires &agrave; son collage
ult&eacute;rieur.
Une fois la fonction copyServerBehavior() renvoy&eacute;e, Dreamweaver convertit l'objet de comportement en un
formulaire qui peut &ecirc;tre plac&eacute; dans le Presse-papiers. Pendant la conversion de l'objet, Dreamweaver supprime
toutes les propri&eacute;t&eacute;s faisant r&eacute;f&eacute;rence &agrave; des objets ; toute propri&eacute;t&eacute; de l'objet autre qu'un nombre, un op&eacute;rateur
bool&eacute;en ou une cha&icirc;ne est perdue.
Lorsque l'utilisateur appuie sur la commande Coller, Dreamweaver d&eacute;compresse le contenu du Presse-papiers et
g&eacute;n&egrave;re un nouvel objet de comportement de serveur. Ce nouvel objet est identique &agrave; l'original, sauf qu'il ne contient
aucune propri&eacute;t&eacute; faisant r&eacute;f&eacute;rence &agrave; des objets. Dreamweaver transmet le nouvel objet de comportement &agrave; la
fonction pasteServerBehavior(). La fonction pasteServerBehavior() ajoute le comportement au document
utilisateur. Une fois la fonction pasteServerBehavior() renvoy&eacute;e, Dreamweaver appelle les fonctions
findServerBehaviors() pour obtenir la nouvelle liste des comportements de serveur pr&eacute;sents dans le document
utilisateur.
Les utilisateurs peuvent copier et coller des comportements d'un document &agrave; un autre. Pour &eacute;changer des
informations, les fonctions copyServerBehavior() et pasteServerBehavior() doivent se baser uniquement
sur les propri&eacute;t&eacute;s de l'objet de comportement.
API de comportement de serveur
Les fonctions suivantes sont les API que vous pouvez utiliser pour g&eacute;rer des comportements de serveur.
analyzeServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Derni&egrave;re mise &agrave; jour le 22/6/2011
262
EXTENSION DE DREAMWEAVER
Comportements de serveur
Description
Cette fonction permet aux comportements de serveur de d&eacute;finir les propri&eacute;t&eacute;s incomplete et deleted.
Une fois la fonction findServerBehaviors() appel&eacute;e pour tous les comportements de serveur sur la page, un tableau
de tous les comportements s'affiche dans le document utilisateur. Pour chaque objet JavaScript pr&eacute;sent dans le tableau,
la fonction analyzeServerBehavior() est appel&eacute;e. Par exemple, pour le comportement Texte dynamique,
Dreamweaver appelle la fonction analyzeServerBehavior() dans le fichier DynamicText.htm (ou DynamicText.js).
La fonction analyzeServerBehavior() a notamment pour but de terminer la d&eacute;finition de toutes les propri&eacute;t&eacute;s
(incomplete, participants, selectedNode et title) sur l'objet de comportement. Il est parfois plus facile
d'ex&eacute;cuter cette t&acirc;che apr&egrave;s que la fonction findServerBehaviors() a g&eacute;n&eacute;r&eacute; une liste exhaustive des
comportements de serveur pr&eacute;sents dans le document utilisateur.
L'autre but de la fonction analyzeServerBehavior() est de rechercher si plusieurs comportements se r&eacute;f&egrave;rent &agrave; la
m&ecirc;me balise dans le document utilisateur. Dans ce cas, la propri&eacute;t&eacute; deleted est utilis&eacute;e pour supprimer du tableau
tous les comportements sauf un.
Supposons que les comportements de serveur Recordset1, DynamicText1 et DynamicText2 se trouvent sur une page.
Les deux comportements de serveur DynamicText requi&egrave;rent Recordset1 pour exister sur la page. Une fois les
comportements de serveur d&eacute;tect&eacute;s par le biais de la fonction findServerBehaviors(), Dreamweaver appelle la
fonction analyzeServerBehavior() pour les trois comportements de serveur. Lorsque la fonction
analyzeServerBehavior() est appel&eacute;e pour DynamicText1, elle inspecte le tableau de tous les objets de
comportement de serveur pr&eacute;sents sur la page, &agrave; la recherche de celui qui appartient &agrave; Recordset1. Si elle ne trouve pas
l'objet de comportement de serveur qui appartient &agrave; Recordset1, la propri&eacute;t&eacute; incomplete est affect&eacute;e de la valeur true
et un point d'exclamation est affich&eacute; dans le panneau Comportements de serveur, indiquant &agrave; l'utilisateur qu'il y a un
probl&egrave;me. De m&ecirc;me, lorsque la fonction analyzeServerBehavior() est appel&eacute;e pour DynamicText2, elle recherche
l'objet appartenant &agrave; Recordset1. Comme Recordset1 ne d&eacute;pend d'aucun autre comportement de serveur, il n'a pas
besoin de d&eacute;finir la fonction analyzeServerBehavior() dans cet exemple.
Arguments
serverBehavior, {serverBehaviorArray}
• L'argument serverBehavior est un objet JavaScript repr&eacute;sentant le comportement &agrave; analyser.
• L'argument {serverBehaviorArray} est un tableau d'objets JavaScript repr&eacute;sentant l'ensemble des
comportements de serveur trouv&eacute;s sur une page.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
applyServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction consulte les valeurs des &eacute;l&eacute;ments de formulaire dans la bo&icirc;te de dialogue et ajoute le comportement au
document utilisateur. Dreamweaver appelle cette fonction lorsque l'utilisateur clique sur dans la bo&icirc;te de dialogue
Comportements de serveur. Si la fonction est ex&eacute;cut&eacute;e avec succ&egrave;s, la bo&icirc;te de dialogue Comportements de serveur est
ferm&eacute;e. Si elle &eacute;choue, la bo&icirc;te de dialogue Comportements de serveur reste ouverte et un message d'erreur s'affiche &agrave;
l'&eacute;cran. Cette fonction peut modifier le document d'un utilisateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
263
EXTENSION DE DREAMWEAVER
Comportements de serveur
Pour plus d’informations, voir &laquo; dwscripts.applySB() &raquo; &agrave; la page 267.
Arguments
serverBehavior
serverBehavior est un objet JavaScript repr&eacute;sentant le comportement de serveur ; il est n&eacute;cessaire de modifier un
comportement existant. S'il s'agit d'un nouveau comportement, l'argument est null.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne vide en cas de succ&egrave;s ou un message d'erreur en cas d'&eacute;chec.
canApplyServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction d&eacute;termine si un comportement peut &ecirc;tre appliqu&eacute;. Dreamweaver appelle cette fonction avant d'afficher
la bo&icirc;te de dialogue Comportements de serveur. Si la fonction renvoie la valeur true, la bo&icirc;te de dialogue
Comportements de serveur s'affiche. Si la fonction renvoie la valeur false, la bo&icirc;te de dialogue Comportements de
serveur ne s'affiche pas et la tentative d'ajout d'un comportement de serveur est interrompue.
Arguments
serverBehavior
serverBehavior est un objet JavaScript repr&eacute;sentant le comportement ; il est n&eacute;cessaire de modifier un comportement
existant. S'il s'agit d'un nouveau comportement, l'argument est null.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le comportement peut &ecirc;tre appliqu&eacute;, false dans les autres cas.
copyServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
L'utilisation de la fonction copyServerBehavior() est facultative. Cette fonction permet aux utilisateurs de copier
des instances du comportement de serveur sp&eacute;cifi&eacute;. Dans l'exemple suivant, cette fonction est utilis&eacute;e pour les jeux
d'enregistrements. Lorsqu'un utilisateur s&eacute;lectionne un jeu d'enregistrements dans les panneaux Comportements de
serveur ou Liaisons de donn&eacute;es, l'utilisation de la commande Copier copie le comportement dans le Presse-papiers,
tandis que la commande Couper le supprime de ce dernier. Les commandes Copier et Couper n'ont aucun effet sur les
comportements de serveur qui ne mettent pas en œuvre cette fonction. Pour plus d'informations, voir &laquo; Sc&eacute;narios dans
lesquels les fonctions de l'API de comportement de serveur sont appel&eacute;es &raquo; &agrave; la page 260.
Derni&egrave;re mise &agrave; jour le 22/6/2011
264
EXTENSION DE DREAMWEAVER
Comportements de serveur
Pour &eacute;changer des informations, les fonctions copyServerBehavior() et pasteServerBehavior() doivent
uniquement se baser sur les propri&eacute;t&eacute;s de l'objet de comportement capables d'&ecirc;tre converties en cha&icirc;nes. Le Pressepapiers ne contient que du texte brut ; il est, pour cette raison, n&eacute;cessaire de r&eacute;soudre les nœuds participant dans le
document et d'enregistrer le texte brut qui en r&eacute;sulte dans une propri&eacute;t&eacute; secondaire.
Remarque : Il est &eacute;galement important de mettre en œuvre la fonction pasteServerBehavior() pour permettre &agrave;
l'utilisateur de coller le comportement dans un document Dreamweaver.
Arguments
serverBehavior
• serverBehavior est un objet JavaScript repr&eacute;sentant le comportement.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le comportement est copi&eacute; dans le Presse-papiers, false dans les
autres cas.
deleteServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Supprime le comportement du document de l'utilisateur. Elle est appel&eacute;e lorsque l'utilisateur clique sur le bouton
moins (-) du panneau Comportements de serveur. Cette fonction peut modifier le document d'un utilisateur.
Pour plus d’informations, voir &laquo; dwscripts.deleteSB() &raquo; &agrave; la page 268.
Arguments
serverBehavior
• serverBehavior est un objet JavaScript repr&eacute;sentant le comportement.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
displayHelp()
Description
Si cette fonction est d&eacute;finie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la bo&icirc;te de dialogue. Cette
fonction est appel&eacute;e lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Derni&egrave;re mise &agrave; jour le 22/6/2011
265
EXTENSION DE DREAMWEAVER
Comportements de serveur
Exemple
// the following instance of displayHelp() opens
// in a browser a file that explains how to use
// the extension.
function displayHelp(){
var myHelpFile = dw.getConfigurationPath() +
'/ExtensionsHelp/superDuperHelp.htm';
dw.browseDocument(myHelpFile);
}
findServerBehaviors()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction parcourt le document utilisateur &agrave; la recherche d'instances d'elle-m&ecirc;me. Pour chaque instance trouv&eacute;e,
la fonction findServerBehaviors() cr&eacute;e un objet JavaScript et lui associe des informations d'&eacute;tat en tant que
propri&eacute;t&eacute;s JavaScript de l'objet.
Les quatre propri&eacute;t&eacute;s obligatoires sont incomplete, participants, title et selectedNode. Vous pouvez d&eacute;finir
d'autres propri&eacute;t&eacute;s en fonction de vos besoins.
Pour plus d'informations, voir &laquo; dwscripts.findSBs() &raquo; &agrave; la page 266 et dreamweaver.getParticipants() dans le
Guide des API de Dreamweaver.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets JavaScript ; la longueur du tableau correspond au nombre d'instances du
comportement trouv&eacute;es dans la page.
inspectServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction d&eacute;termine les param&egrave;tres de la bo&icirc;te de dialogue Comportements de serveur en fonction de l'objet de
comportement sp&eacute;cifi&eacute;. Dreamweaver appelle la fonction inspectServerBehavior() lorsqu'un utilisateur ouvre une
bo&icirc;te de dialogue de comportement de serveur. Dreamweaver appelle cette fonction uniquement lorsque l'utilisateur
modifie un comportement existant.
Arguments
serverBehavior
L'argument serverBehavior est un objet JavaScript repr&eacute;sentant le comportement de serveur. Il s'agit du m&ecirc;me objet
que celui renvoy&eacute; parfindServerBehaviors().
Derni&egrave;re mise &agrave; jour le 22/6/2011
266
EXTENSION DE DREAMWEAVER
Comportements de serveur
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
pasteServerBehavior()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Si cette fonction est impl&eacute;ment&eacute;e, les utilisateurs peuvent coller des instances du comportement de serveur sp&eacute;cifi&eacute; &agrave;
l'aide de la fonction pasteServerBehavior(). Lorsque l'utilisateur colle le comportement de serveur, Dreamweaver
organise le contenu du Presse-papiers et g&eacute;n&egrave;re un nouvel objet de comportement. Ce nouvel objet est identique &agrave;
l'original, sauf qu'il ne contient aucune propri&eacute;t&eacute; de pointeur. Dreamweaver transmet le nouvel objet de
comportement &agrave; la fonction pasteServerBehavior(). La fonction pasteServerBehavior() se base sur les
propri&eacute;t&eacute;s de l'objet de comportement pour d&eacute;terminer ce qui doit &ecirc;tre ajout&eacute; au document utilisateur. La fonction
pasteServerBehavior() ajoute ensuite le comportement au document utilisateur. Une fois la fonction
pasteServerBehavior() renvoy&eacute;e, Dreamweaver appelle la fonction findServerBehaviors() pour obtenir la
nouvelle liste des comportements de serveur pr&eacute;sents dans le document utilisateur.
L'utilisation de la fonction pasteServerBehavior() est facultative. Pour plus d'informations, voir &laquo; Sc&eacute;narios dans
lesquels les fonctions de l'API de comportement de serveur sont appel&eacute;es &raquo; &agrave; la page 260.
Remarque : Si vous impl&eacute;mentez cette fonction, vous devez &eacute;galement impl&eacute;menter la fonction copyServerBehavior().
Arguments
comportement
L'objet JavaScript behavior repr&eacute;sente le comportement.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le comportement est coll&eacute; depuis le Presse-papiers, false dans
les autres cas.
Fonctions d'impl&eacute;mentation des comportements de
serveur
Vous pouvez ajouter ou modifier ces fonctions dans les fichiers de script HTML, ou dans les fichiers JavaScript
r&eacute;pertori&eacute;s dans le fichier de script HTML.
dwscripts.findSBs()
Disponibilit&eacute;
Dreamweaver MX (cette fonction remplace la fonction findSBs() des versions pr&eacute;c&eacute;dentes de Dreamweaver).
Derni&egrave;re mise &agrave; jour le 22/6/2011
267
EXTENSION DE DREAMWEAVER
Comportements de serveur
Description
Cette fonction recherche toutes les instances d'un comportement de serveur sur la page en cours, ainsi que tous les
participants. Elle d&eacute;finit le titre, le type, les tableaux des participants, des poids et des types, la valeur selectedNode
et l'indicateur &laquo; incomplete &raquo;. Elle cr&eacute;e &eacute;galement un objet de param&egrave;tre contenant un tableau de propri&eacute;t&eacute;s
d&eacute;finissables par l'utilisateur (le jeu d'enregistrements, le nom et le nom d'une colonne, par exemple). Vous pouvez
renvoyer ce tableau depuis la fonction findServerBehaviors().
Arguments
serverBehaviorTitle
L'argument serverBehaviorTitle est une cha&icirc;ne de titre facultative utilis&eacute;e si aucun titre n'est sp&eacute;cifi&eacute; dans le titre
EDML, utile pour la localisation.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets JavaScript, avec les propri&eacute;t&eacute;s requises d&eacute;finies. Cette fonction renvoie un
tableau vide si aucun comportement de serveur n'appara&icirc;t sur la page.
Exemple
L'exemple suivant recherche dans le document utilisateur en cours toutes les instances d'un comportement de serveur
particulier :
function findServerBehaviors() {
allMySBs = dwscripts.findSBs();
return allMySBs;
}
dwscripts.applySB()
Disponibilit&eacute;
Dreamweaver MX (cette fonction remplace la fonction applySB() des versions pr&eacute;c&eacute;dentes de Dreamweaver).
Description
Cette fonction ins&egrave;re ou met &agrave; jour le code d'ex&eacute;cution du comportement de serveur. Si l'argument sbObj a une valeur
null, la fonction ins&egrave;re un nouveau code d'ex&eacute;cution ; dans le cas contraire, elle met &agrave; jour le code d'ex&eacute;cution existant
indiqu&eacute; par l'objet sbObj. D&eacute;finissez les param&egrave;tres utilisateur sous la forme de propri&eacute;t&eacute;s sur un objet JavaScript, puis
transmettez-les en tant que paramObj. Ils doivent correspondre &agrave; tous les arguments d&eacute;clar&eacute;s sous la forme
@@paramName@@ dans le texte d'insertion XML.
Arguments
paramObj, sbObj
• L'argument paramObj est l'objet contenant les param&egrave;tres utilisateur.
• L'argument sbObj est l'objet du comportement de serveur pr&eacute;c&eacute;dent si vous mettez &agrave; jour un comportement de
serveur existant, sinon null.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si le comportement est ajout&eacute; au document de l'utilisateur, false
dans les autres cas.
Derni&egrave;re mise &agrave; jour le 22/6/2011
268
EXTENSION DE DREAMWEAVER
Comportements de serveur
Exemple
Dans l'exemple suivant, ins&eacute;rez dans l'objet paramObj les entr&eacute;es utilisateur et appelez la fonction
dwscripts.applySB() en transmettant les donn&eacute;es et votre comportement de serveur, sbObj :
function applyServerBehaviors(sbObj) {
// get all UI values here...
paramObj = new Object();
paramObj.rs= rsName.value;
paramObj.col = colName.value;
paramObj.url = urlPath.value;
paramObj.form__tag = formObj;
dwscripts.applySB(paramObj, sbObj);
}
dwscripts.deleteSB()
Disponibilit&eacute;
Dreamweaver MX (cette fonction remplace la fonction deleteSB() des versions pr&eacute;c&eacute;dentes de Dreamweaver).
Description
Cette fonction supprime tous les participants de l'instance du comportement de serveur sbObj. Le participant dans
son ensemble est supprim&eacute;, &agrave; moins que le fichier EDML n'indique des instructions de suppression sp&eacute;ciales &agrave; l'aide
de la balise delete. Les participants appartenant &agrave; plusieurs instances de comportement de serveur (comptage de
r&eacute;f&eacute;rence &gt; 1) ne sont pas supprim&eacute;s.
Arguments
sbObj
• L'argument sbObj est l'instance de l'objet du comportement de serveur &agrave; supprimer du document utilisateur.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
L'exemple suivant illustre la suppression de tous les participants du comportement de serveur sbObj, hormis ceux qui
sont prot&eacute;g&eacute;s par la balise delete du fichier EDML.
function deleteServerBehavior(sbObj) {
dwscripts.deleteSB(sbObj);
}
Fichiers EDML
Vous devez respecter les conventions de codage Dreamweaver lorsque vous modifiez un fichier. Faites tr&egrave;s attention
&agrave; la d&eacute;pendance d'un &eacute;l&eacute;ment par rapport &agrave; un autre. Par exemple, si vous mettez &agrave; jour les balises que vous ins&eacute;rez, il
est possible que vous deviez &eacute;galement mettre &agrave; jour les mod&egrave;les de recherche.
Remarque : Les fichiers EDML ont &eacute;t&eacute; ajout&eacute;s avec Dreamweaver MX. Si vous travaillez avec des comportements de
serveur existants, voir les versions pr&eacute;c&eacute;dentes des manuels Extension de Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
269
EXTENSION DE DREAMWEAVER
Comportements de serveur
Expressions r&eacute;guli&egrave;res
Vous devez conna&icirc;tre les expressions r&eacute;guli&egrave;res impl&eacute;ment&eacute;es dans JavaScript 1.5. Vous devez &eacute;galement savoir &agrave; quel
moment il convient de les utiliser dans les fichiers EDML de comportements de serveur. Par exemple, les expressions
r&eacute;guli&egrave;res ne peuvent pas &ecirc;tre utilis&eacute;es dans les valeurs quickSearch. En revanche, elles sont employ&eacute;es dans le
contenu de la balise searchPattern pour la recherche et l'extraction de donn&eacute;es.
Les expressions r&eacute;guli&egrave;res d&eacute;crivent des cha&icirc;nes de texte en utilisant des caract&egrave;res qui ont une signification sp&eacute;ciale
(m&eacute;tacaract&egrave;res) pour repr&eacute;senter le texte, le d&eacute;composer et le traiter selon des r&egrave;gles pr&eacute;d&eacute;finies. Les expressions
r&eacute;guli&egrave;res sont des outils d'analyse et de traitement puissants car elles fournissent une m&eacute;thode g&eacute;n&eacute;rique de
repr&eacute;sentation d'un mod&egrave;le.
Tout bon manuel de r&eacute;f&eacute;rence sur JavaScript 1.5 comporte une section ou un chapitre consacr&eacute; aux expressions
r&eacute;guli&egrave;res. Dans cette section, nous examinons la fa&ccedil;on dont les fichiers EDML de comportements de serveur
Dreamweaver utilisent les expressions r&eacute;guli&egrave;res pour rechercher des arguments dans votre code d'ex&eacute;cution et pour
extraire leurs valeurs. Chaque fois qu'un utilisateur modifie un comportement de serveur, les valeurs des arguments
doivent &ecirc;tre extraites des instances du code d'ex&eacute;cution. Utilisez des expressions r&eacute;guli&egrave;res pour la proc&eacute;dure
d'extraction.
Vous devez conna&icirc;tre quelques m&eacute;tacaract&egrave;res et m&eacute;tas&eacute;quences (regroupements de caract&egrave;res sp&eacute;ciaux) utiles dans
les fichiers EDML de comportements de serveur, comme ceux d&eacute;crits dans le tableau suivant :
Expression r&eacute;guli&egrave;re
Description
\
Arr&ecirc;ter le mode caract&egrave;res sp&eacute;ciaux. Par exemple: \. r&eacute;tablit le m&eacute;tacaract&egrave;re &agrave; un point litt&eacute;ral, \/ r&eacute;tablit la barre
oblique &agrave; son sens litt&eacute;ral et \) r&eacute;tablit la parenth&egrave;se &agrave; son sens litt&eacute;ral.
/ ... /i
Ne pas tenir compte de la casse lors de la recherche d'une m&eacute;tas&eacute;quence.
( ...)
Cr&eacute;er une sous-expression entre parenth&egrave;ses dans la m&eacute;tas&eacute;quence.
\s*
Rechercher des espaces blancs.
La balise EDML &lt;searchPatterns whereToSearch=&quot;directive&quot;&gt; indique qu'une recherche doit &ecirc;tre effectu&eacute;e
dans le code d'ex&eacute;cution. Chaque sous-balise &lt;searchPattern&gt;...&lt;/searchPattern&gt; d&eacute;finit un mod&egrave;le dans le
code d'ex&eacute;cution devant &ecirc;tre identifi&eacute;. L'exemple Redirect If Empty contient deux mod&egrave;les.
Dans l'exemple suivant, pour extraire des valeurs d'arguments de &lt;% if (@@rs@@.EOF)
Response.Redirect(&quot;@@new__url@@&quot;); %&gt;, r&eacute;digez une expression r&eacute;guli&egrave;re qui identifie les cha&icirc;nes rs et
new__url :
&lt;searchPattern paramNames=&quot;rs,new__url&quot;&gt;
/if d ((\w+)\.EOF\) Response\.Redirect\(&quot;([^\r\n]*)&quot;\)/i
&lt;/searchPattern&gt;
Ce processus effectue une recherche dans le document de l'utilisateur et, si une correspondance est trouv&eacute;e, les valeurs
d'argument sont extraites. La premi&egrave;re sous-expression entre parenth&egrave;ses (\w+) extrait la valeur de rs. La deuxi&egrave;me
sous-expression ([^\r\n]*) extrait la valeur de new_url.
Remarque : La s&eacute;quence de caract&egrave;res &quot;[^\r\n]*&quot; correspond &agrave; tout caract&egrave;re sauf &agrave; un saut de ligne, sur les plates-formes
Macintosh et Windows.
Derni&egrave;re mise &agrave; jour le 22/6/2011
270
EXTENSION DE DREAMWEAVER
Comportements de serveur
Structure EDML
Vous devez utiliser un nom de fichier unique pour identifier votre groupe de comportements de serveur. Si un fichier
Participant associ&eacute; n'est utilis&eacute; que par un fichier Groupe, vous devez donner &agrave; votre fichier Participant un nom
correspondant &agrave; celui du groupe. Cette convention permet au fichier Groupe de comportements de serveur
updateRecord.edml de fonctionner avec le fichier Participant updateRecord_init.edml. Lorsque les fichiers
Participant sont destin&eacute;s au partage entre plusieurs groupes de comportements de serveur, vous devez leur donner un
nom descriptif et unique.
Remarque : L'espace de nom EDML &eacute;tant partag&eacute; ind&eacute;pendamment de la structure de dossier, assurez-vous d'utiliser des
noms de fichiers uniques. Les noms de fichiers ne doivent pas comporter plus de 31 caract&egrave;res (y compris l'extension
.edml) en raison des limitations Macintosh.
Le code d'ex&eacute;cution de votre comportement de serveur r&eacute;side &agrave; l'int&eacute;rieur de fichiers EDML. Le programme d'analyse
EDML ne doit confondre aucun de vos codes d'ex&eacute;cution avec les balises EDML. C'est pourquoi la balise CDATA doit
envelopper votre code d'ex&eacute;cution. La balise CDATA repr&eacute;sente des donn&eacute;es de caract&egrave;re et correspond &agrave; tout texte
autre qu'une balise EDML. Lorsque vous utilisez la balise CDATA, le programme d'analyse EDML n'essaie pas de
l'interpr&eacute;ter en tant que balise, mais l'assimile plut&ocirc;t &agrave; un bloc de texte brut. Les blocs marqu&eacute;s par la balise CDATA
commencent par &lt;![CDATA[ et se terminent par ]]&gt;.
Si vous ins&eacute;rez le texte Hello, World, vous pouvez sp&eacute;cifier ais&eacute;ment votre EDML comme suit :
&lt;insertText&gt;Hello, World&lt;/insertText&gt;
Cependant, si vous ins&eacute;rez un texte comportant des balises, tel &lt;img src='foo.gif'&gt;, cela peut &ecirc;tre source de
confusion pour le programme d'analyse EDML. Dans ce cas, incorporez votre texte dans la construction CDATA comme
indiqu&eacute; dans l'exemple suivant :
&lt;insertText&gt;&lt;![CDATA[&lt;img src='foo.gif'&gt;]]&gt;&lt;/insertText&gt;
Le code d'ex&eacute;cution ASP est envelopp&eacute; par la balise CDATA tag, comme illustr&eacute; dans l'exemple suivant :
&lt;![CDATA[
&lt;% if (@@rs@@.EOF) Response.Redirect(&quot;@@new__url@@&quot;); %&gt;
]]
En raison de la balise CDATA, les balises &lt;%= %&gt;, ainsi que tout contenu interne, ne sont pas trait&eacute;es. Au lieu de cela,
le gestionnaire de donn&eacute;es d'extension (EDM) re&ccedil;oit le texte non interpr&eacute;t&eacute;, comme indiqu&eacute; dans l'exemple suivant :
&lt;% if (Recordset1.EOF) Response.Redirect(&quot;http://www.Adobe.com&quot;); %&gt;
Dans les d&eacute;finitions EDML suivantes, les emplacements o&ugrave; la balise CDATA est recommand&eacute;e sont indiqu&eacute;s dans les
exemples.
Balises de fichiers EDML Groupe
Ces balises et attributs sont valides dans les fichiers Groupe EDML.
&lt;group&gt;
Description
Cette balise contient toutes les sp&eacute;cifications relatives &agrave; un groupe de participants.
Derni&egrave;re mise &agrave; jour le 22/6/2011
271
EXTENSION DE DREAMWEAVER
Comportements de serveur
Parent
Aucun.
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de &lt;group&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise group.
version
Description
Cet attribut d&eacute;finit le traitement de comportement de serveur de Dreamweaver cible du comportement de serveur
actif. Pour Dreamweaver CS3, le num&eacute;ro de version est 9. Si aucune version n'est pr&eacute;cis&eacute;e, Dreamweaver suppose qu'il
s'agit de la version 7. Pour cette version de Dreamweaver, l'attribut de version est r&eacute;gl&eacute; sur 9,0 pour tous les groupes et
participants g&eacute;n&eacute;r&eacute;s par le Cr&eacute;ateur de comportements de serveur. La version de groupe de cet attribut est sans effet
pour l'instant.
Parent
group
Type
Attribut.
Obligatoire
Non.
serverBehavior
Description
L'attribut serverBehavior indique le comportement de serveur qui peut utiliser le groupe. Lorsque l'une des cha&icirc;nes
quickSearch du participant du groupe est trouv&eacute;e dans le document, le comportement de serveur indiqu&eacute; par
l'attribut serverBehavior demande &agrave; Dreamweaver d'appeler la fonction findServerBehaviors().
Dans certains cas, si plusieurs groupes sont associ&eacute;s &agrave; un seul et m&ecirc;me comportement de serveur, ce dernier doit
d&eacute;terminer le groupe qu'il veut utiliser.
Parent
group
Type
Attribut.
Derni&egrave;re mise &agrave; jour le 22/6/2011
272
EXTENSION DE DREAMWEAVER
Comportements de serveur
Obligatoire
Non.
Valeur
La valeur est le nom exact (sans chemin) d'un fichier HTML de comportement de serveur dans un dossier
Configuration/ServerBehaviors, comme indiqu&eacute; dans l'exemple suivant :
&lt;group serverBehavior=&quot;redirectIfEmpty.htm&quot;&gt;
dataSource
Description
Cette fonction avanc&eacute;e prend en charge les nouvelles sources de donn&eacute;es qui peuvent &ecirc;tre ajout&eacute;es &agrave; Dreamweaver.
Les versions d'un comportement de serveur peuvent diff&eacute;rer, selon la source de donn&eacute;es utilis&eacute;e. Par exemple, le
comportement de serveur R&eacute;gion r&eacute;p&eacute;t&eacute;e est con&ccedil;u pour la source de donn&eacute;es Recordset.htm standard. Si
Dreamweaver est d&eacute;velopp&eacute; afin de prendre en charge un nouveau type de source de donn&eacute;es (un objet COM, par
exemple), vous pouvez configurer dataSource=&quot;COM.htm&quot; dans un fichier Groupe avec une impl&eacute;mentation
diff&eacute;rente de R&eacute;gion r&eacute;p&eacute;t&eacute;e. Le comportement de serveur R&eacute;gion r&eacute;p&eacute;t&eacute;e applique alors la nouvelle impl&eacute;mentation
de R&eacute;gion r&eacute;p&eacute;t&eacute;e si la nouvelle source de donn&eacute;es est s&eacute;lectionn&eacute;e.
Parent
group
Type
Attribut.
Obligatoire
Non.
Valeur
Le nom exact d'un fichier source de donn&eacute;es d'un dossier Configuration/DataSources, comme indiqu&eacute; dans l'exemple
suivant :
&lt;group serverBehavior=&quot;Repeat Region.htm&quot; dataSource=&quot;myCOMdataSource.htm&quot;&gt;
Ce groupe d&eacute;finit une nouvelle impl&eacute;mentation du comportement de serveur R&eacute;gion r&eacute;p&eacute;t&eacute;e &agrave; utiliser si la source de
donn&eacute;es COM est utilis&eacute;e. Dans la fonction applyServerBehaviors(), vous pouvez indiquer que ce groupe doit &ecirc;tre
appliqu&eacute; en d&eacute;finissant la propri&eacute;t&eacute; MM_dataSource sur l'objet de param&egrave;tre, comme indiqu&eacute; dans l'exemple suivant :
function applyServerBehavior(ssRec) {
var paramObj = new Object();
paramObj.rs = getComObjectName();
paramObj.MM_dataSource = &quot;myCOMdataSource.htm&quot;;
dwscripts.applySB(paramObj, sbObj);
}
subType
Description
Cette fonction avanc&eacute;e prend en charge plusieurs impl&eacute;mentations d'un comportement de serveur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
273
EXTENSION DE DREAMWEAVER
Comportements de serveur
Les versions d'un comportement de serveur peuvent diff&eacute;rer, selon la s&eacute;lection de l'utilisateur. Lorsqu'un
comportement de serveur est appliqu&eacute; mais que plusieurs fichiers Groupe sont appropri&eacute;s, le fichier Groupe correct
peut &ecirc;tre s&eacute;lectionn&eacute; par transmission d'une valeur subType. Le groupe ayant cette valeur subType sp&eacute;cifique est
appliqu&eacute;.
Parent
group
Type
Attribut.
Obligatoire
Non.
Valeur
La valeur est une cha&icirc;ne unique d&eacute;terminant le groupe &agrave; appliquer, comme indiqu&eacute; dans l'exemple suivant :
&lt;group serverBehavior=&quot;myServerBehavior.htm&quot; subType=&quot;longVersion&quot;&gt;
Cet attribut de groupe d&eacute;finit la version longue du sous-type myServerBehavior. Il existe &eacute;galement une version avec
l'attribut subType=&quot;shortVersion&quot;. Dans la fonction applyServerBehaviors(), vous pouvez indiquer quel
groupe doit &ecirc;tre appliqu&eacute; en d&eacute;finissant la propri&eacute;t&eacute; MM_subType sur l'objet de param&egrave;tre, comme indiqu&eacute; dans
l'exemple suivant :
function applyServerBehavior(ssRec) {
var paramObj = new Object();
if (longVersionChecked) {
paramObj.MM_subType = &quot;longVersion&quot;;
} else {
paramObj.MM_subType = &quot;shortVersion&quot;;
}
dwscripts.applySB(paramObj, sbObj);
}
&lt;title&gt;
Description
Cette cha&icirc;ne s'affiche dans le panneau Comportements de serveur pour chaque instance de comportement de serveur
trouv&eacute;e dans le document actif.
Parent
group
Type
Balise de bloc.
Obligatoire
Non.
Derni&egrave;re mise &agrave; jour le 22/6/2011
274
EXTENSION DE DREAMWEAVER
Comportements de serveur
Valeur
La valeur est une cha&icirc;ne de texte brut pouvant comporter des noms d'argument pour rendre chaque instance unique,
comme indiqu&eacute; dans l'exemple suivant :
&lt;title&gt;Redirect If Empty (@@recordsetName@@)&lt;/title&gt;
&lt;groupParticipants&gt;
Description
Cette balise contient un tableau de d&eacute;clarations groupParticipant.
Parent
group
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de &lt;groupParticipants&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise groupParticipants.
selectParticipant
Description
Indique quel participant doit &ecirc;tre s&eacute;lectionn&eacute; et mis en surbrillance dans le document lorsqu'une instance est
s&eacute;lectionn&eacute;e dans le panneau Comportements de serveur. Les instances de comportements de serveur &eacute;num&eacute;r&eacute;es dans
ce panneau &eacute;tant class&eacute;es en fonction du participant s&eacute;lectionn&eacute;, vous devez d&eacute;finir l'attribut selectParticipant
m&ecirc;me si le participant n'est pas visible.
Parent
groupParticipants
Type
Attribut.
Obligatoire
Non.
Valeur
La valeur participantName est le nom exact (moins l'extension .edml) d'un seul fichier Participant r&eacute;f&eacute;renc&eacute; comme
un participant Groupe, comme indiqu&eacute; dans l'exemple suivant. Pour plus d’informations, voir &laquo; name &raquo; &agrave; la page 275.
&lt;groupParticipants selectParticipant=&quot;redirectIfEmpty_link&quot;&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
275
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;groupParticipant&gt;
Description
Cette balise repr&eacute;sente l'inclusion d'un participant unique dans le groupe.
Parent
groupParticipants
Type
Balise.
Obligatoire
Oui (au moins un).
Attributs de &lt;groupParticipant&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise groupParticipant.
name
Description
Cet attribut d&eacute;signe un participant particulier &agrave; inclure dans le groupe. L'attribut name figurant dans la balise
groupParticipant doit &ecirc;tre le m&ecirc;me que le nom de fichier du participant (sans l'extension .edml).
Parent
groupParticipant
Type
Attribut.
Obligatoire
Oui.
Valeur
La valeur est le nom exact (sans l'extension .edml) d'un fichier Participant quelconque, comme indiqu&eacute; dans l'exemple
suivant :
&lt;groupParticipant name=&quot;redirectIfEmpty_init&quot;&gt;
Cet exemple fait r&eacute;f&eacute;rence au fichier redirectIfEmpty_init.edml.
partType
Description
Cet attribut indique le type de participant.
Parent
groupParticipant
Derni&egrave;re mise &agrave; jour le 22/6/2011
276
EXTENSION DE DREAMWEAVER
Comportements de serveur
Type
Attribut.
Obligatoire
Non.
Valeurs
identifier, member, option, multiple, data
• La valeur identifier est un participant qui identifie le groupe entier. Si ce participant est trouv&eacute; dans le document,
le groupe est consid&eacute;r&eacute; comme existant. Il s'agit de la valeur par d&eacute;faut si l'attribut partType n'est pas sp&eacute;cifi&eacute;.
• La valeur member est un membre normal d'un groupe. Si trouv&eacute; seul, il n'identifie pas un groupe. S'il n'est pas
trouv&eacute; dans un groupe, le groupe est jug&eacute; incomplet.
• La valeur option indique que le participant est facultatif. S'il n'est pas trouv&eacute;, le groupe est quand m&ecirc;me jug&eacute; complet
et aucun indicateur &laquo; incomplete &raquo; n'est affich&eacute; dans le panneau Comportements de serveur.
• La valeur multiple indique que le participant est facultatif et que plusieurs de ses copies peuvent &ecirc;tre associ&eacute;es au
comportement de serveur. Aucun des arguments uniques &agrave; ce participant ne sera utilis&eacute; lors du regroupement de
participants car ils peuvent avoir des valeurs diff&eacute;rentes.
• La valeur data est un participant non standard utilis&eacute; par les programmeurs en tant que r&eacute;f&eacute;rentiel des donn&eacute;es de
groupe suppl&eacute;mentaires. Elle n'est prise en compte par rien d'autre.
Fichiers EDML Participant
Ces balises et attributs sont valides dans les fichiers EDML Participant.
&lt;participant&gt;
Description
Cette balise contient toutes les sp&eacute;cifications d'un participant unique.
Parent
Aucun.
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de &lt;participant&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise participant.
Derni&egrave;re mise &agrave; jour le 22/6/2011
277
EXTENSION DE DREAMWEAVER
Comportements de serveur
version
Description
Cet attribut d&eacute;finit le traitement de comportement de serveur de Dreamweaver cible du comportement de serveur
actif. Pour Dreamweaver CS3, le num&eacute;ro de version est 9. Si aucune version n'est pr&eacute;cis&eacute;e, Dreamweaver suppose qu'il
s'agit de la version 7. Pour cette version de Dreamweaver, l'attribut de version est r&eacute;gl&eacute; sur 0,0 pour tous les groupes et
participants g&eacute;n&eacute;r&eacute;s par le Cr&eacute;ateur de comportements de serveur.
Remarque : L'attribut de version participant annule l'attribut de version groupe si ceux-ci sont diff&eacute;rents. N&eacute;anmoins, le
fichier participant utilisera uniquement l'attribut de version groupe si le participant n'en sp&eacute;cifie aucun.
Pour les fichiers Participant, cet attribut d&eacute;termine s'il faut effectuer la fusion de blocs de code. Pour les participants
qui ne disposent pas de cet attribut (ou si l'attribut est d&eacute;fini sur la version 4 ou pr&eacute;c&eacute;dente), les blocs de code ins&eacute;r&eacute;s
ne sont pas fusionn&eacute;s avec les autres blocs de code sur la page. Les participants dont l'attribut est d&eacute;fini sur version 5
ou plus, sont fusionn&eacute;s avec les autres blocs de code sur la page, lorsque possible. Notez que la fusion de blocs de code
s'effectue uniquement pour les participants au-dessus et en dessous de la balise HTML.
Parent
participant
Type
Attribut.
Obligatoire
Non.
&lt;quickSearch&gt;
Description
Cette balise est une simple cha&icirc;ne de recherche utilis&eacute;e pour am&eacute;liorer les performances. Il ne peut pas s'agir d'une
expression r&eacute;guli&egrave;re. Si la cha&icirc;ne est trouv&eacute;e dans le document actif, les autres mod&egrave;les de recherche sont appel&eacute;s pour
rechercher des instances sp&eacute;cifiques. La cha&icirc;ne peut &ecirc;tre vide pour toujours utiliser le mod&egrave;le de recherche.
Parent
participant
Type
Balise de bloc.
Obligatoire
Non.
Valeur
La valeur searchString, cha&icirc;ne litt&eacute;rale qui existe sur la page si le participant existe. La cha&icirc;ne doit &ecirc;tre la plus unique
possible afin d'am&eacute;liorer les performances, mais elle ne doit pas n&eacute;cessairement &ecirc;tre unique. Bien que cette cha&icirc;ne ne
soit pas sensible &agrave; la casse, prenez garde aux espaces non essentiels qui peuvent &ecirc;tre modifi&eacute;s par l'utilisateur, comme
indiqu&eacute; dans l'exemple suivant :
&lt;quickSearch&gt;Response.Redirect&lt;/quickSearch&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
278
EXTENSION DE DREAMWEAVER
Comportements de serveur
Si la balise quickSearch est vide, elle est consid&eacute;r&eacute;e comme correspondante et des recherches plus pr&eacute;cises utilisent
les expressions r&eacute;guli&egrave;res d&eacute;finies dans les balises searchPattern. Cela peut &ecirc;tre utile lorsqu'une simple cha&icirc;ne ne
peut pas &ecirc;tre utilis&eacute;e pour exprimer un mod&egrave;le de recherche fiable et que des expressions r&eacute;guli&egrave;res sont obligatoires.
&lt;insertText&gt;
Description
Cette balise donne des indications sur ce qui doit &ecirc;tre ins&eacute;r&eacute; dans le document et &agrave; quel endroit. Elle contient le texte
&agrave; ins&eacute;rer. Les parties du texte qui sont personnalis&eacute;es doivent &ecirc;tre indiqu&eacute;es &agrave; l'aide du format @@parameterName@@.
Dans certains cas, par exemple pour un participant traducteur uniquement, vous n'avez probablement pas besoin de
cette balise.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
Valeur
La valeur est le texte &agrave; ins&eacute;rer dans le document. Si des parties du texte doivent &ecirc;tre personnalis&eacute;es, elles peuvent &ecirc;tre
transmises ult&eacute;rieurement en tant que param&egrave;tres. Les arguments doivent &ecirc;tre incorpor&eacute;s entre deux signes (@@). Ce
texte pouvant interf&eacute;rer avec la structure EDML, il doit utiliser la construction CDATA, comme indiqu&eacute; dans l'exemple
suivant :
&lt;insertText location=&quot;aboveHTML&quot;&gt;
&lt;![CDATA[&lt;%= @@recordset@@).cursorType %&gt;]]&gt;
&lt;/insertText&gt;
Lorsque le texte est ins&eacute;r&eacute;, l'argument @@recordset@@ est remplac&eacute; par un nom de jeu d'enregistrements fourni par
l'utilisateur. Pour plus d'informations sur les blocs de code conditionnels et r&eacute;p&eacute;titifs, consultez le chapitre &laquo; Ajout de
comportements de serveur personnalis&eacute;s &raquo; dans Prise en main de Dreamweaver.
Attributs de &lt;insertText&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise insertText.
location
Description
Cet attribut indique o&ugrave; le texte participant doit &ecirc;tre ins&eacute;r&eacute;. L'emplacement d'insertion &eacute;tant relatif &agrave; l'attribut
whereToSearch de la balise searchPatterns, veillez &agrave; d&eacute;finir ces deux param&egrave;tres soigneusement (voir
&laquo; whereToSearch &raquo; &agrave; la page 281).
Parent
insertText
Derni&egrave;re mise &agrave; jour le 22/6/2011
279
EXTENSION DE DREAMWEAVER
Comportements de serveur
Type
Attribut.
Obligatoire
Oui.
Valeurs
aboveHTML[+weight], belowHTML[+weight], beforeSelection, replaceSelection, wrapSelection, afterSelection,
beforeNode, replaceNode, afterNode, firstChildOfNode, lastChildOfNode, nodeAttribute[+attribute]
• La valeur aboveHTML[+] ins&egrave;re le texte au-dessus de la balise HTML (appropri&eacute;e pour le code serveur uniquement).
Le poids peut &ecirc;tre un nombre entier compris entre 1 et 99 et est utilis&eacute; pour pr&eacute;server l'ordre relatif entre les
diff&eacute;rents participants. Par convention, les jeux d'enregistrements ont un poids de 50. Si un participant fait
r&eacute;f&eacute;rence &agrave; des variables de jeu d'enregistrements, il doit par cons&eacute;quent &ecirc;tre affect&eacute; d'un poids plus &eacute;lev&eacute; (par
exemple, 60) de fa&ccedil;on &agrave; ce que le code soit ins&eacute;r&eacute; au-dessous du jeu d'enregistrements, comme indiqu&eacute; dans
l'exemple suivant :
&lt;insert location=&quot;aboveHTML+60&quot;&gt;
Si aucun poids n'est indiqu&eacute;, un poids de 100 est attribu&eacute; en interne et ajout&eacute; au-dessous de tous les participants de
poids sp&eacute;cifique, comme indiqu&eacute; dans l'exemple suivant :
&lt;insert location=&quot;aboveHTML&quot;&gt;
• La valeur belowHTML[+weight] est similaire &agrave; l'emplacement aboveHTML, si ce n'est que les participants sont
ajout&eacute;s au-dessous de la balise /HTML de fermeture.
• La valeur beforeSelection ins&egrave;re le texte avant le point d'insertion ou la s&eacute;lection actuelle. S'il n'y a pas de s&eacute;lection,
il est ins&eacute;r&eacute; &agrave; la fin de la balise body.
• La valeur replaceSelection remplace la s&eacute;lection actuelle par le texte. S'il n'y a pas de s&eacute;lection, il est ins&eacute;r&eacute; &agrave; la fin de
la balise body.
• La valeur wrapSelection &eacute;quilibre la s&eacute;lection actuelle, ins&egrave;re une balise de bloc avant la s&eacute;lection et ajoute la balise
de fin appropri&eacute;e apr&egrave;s la s&eacute;lection.
• La valeur afterSelection ins&egrave;re le texte apr&egrave;s la s&eacute;lection actuelle ou le point d'insertion. S'il n'y a pas de s&eacute;lection, il
est ins&eacute;r&eacute; &agrave; la fin de la balise body.
• La valeur beforeNode ins&egrave;re le texte avant un nœud (emplacement sp&eacute;cifique dans le DOM). Lorsqu'une fonction
telle que dwscripts.applySB() est appel&eacute;e pour effectuer l'insertion, le pointeur de nœud doit &ecirc;tre transmis en
tant que param&egrave;tre de paramObj. Le nom de ce param&egrave;tre d&eacute;finissable par l'utilisateur doit &ecirc;tre sp&eacute;cifi&eacute; par
l'attribut nodeParamName (voir la section &laquo; nodeParamName &raquo; &agrave; la page 280).
En r&eacute;sum&eacute;, si votre emplacement comporte le mot node, veillez &agrave; d&eacute;clarer la balise nodeParamName.
• La valeur replaceNode remplace un nœud par le texte.
• La valeur afterNode ins&egrave;re le texte apr&egrave;s un nœud.
• La valeur firstChildOfNode ins&egrave;re le texte en tant que premier enfant d'une balise de bloc. Par exemple, pour ins&eacute;rer
un &eacute;l&eacute;ment au d&eacute;but d'une balise FORM.
• firstChildOfNode ins&egrave;re le texte en tant que dernier enfant d'une balise de bloc. Par exemple, si vous souhaitez
ins&eacute;rer du code &agrave; la fin d'une balise FORM, (utile pour l'ajout de champs de formulaire masqu&eacute;s).
• nodeAttribute[+attribute] d&eacute;finit un attribut d'un nœud de balise. Si l'attribut n'existe pas d&eacute;j&agrave;, cette valeur le cr&eacute;e.
Derni&egrave;re mise &agrave; jour le 22/6/2011
280
EXTENSION DE DREAMWEAVER
Comportements de serveur
Par exemple, utilisez &lt;insert location=&quot;nodeAttribute+ACTION&quot; nodeParamName=&quot;form&quot;&gt; pour d&eacute;finir
l'attribut ACTION d'un formulaire. Cette variante convertit la balise FORM de l'utilisateur de &lt;form&gt; en &lt;form
action=&quot;myText&quot;&gt;.
Si vous ne sp&eacute;cifiez pas d'attribut, l'emplacement nodeAttribute provoque l'ajout direct du texte &agrave; la balise ouverte.
Par exemple, utilisez insert location=&quot;nodeAttribute&quot; pour ajouter un attribut facultatif &agrave; une balise. Vous
pouvez proc&eacute;der ainsi pour convertir la balise INPUT d'un utilisateur de &lt;input type=&quot;checkbox&quot;&gt; en &lt;input
type=&quot;checkbox&quot; &lt;%if(foo)Reponse.Write(&quot;CHECKED&quot;)%&gt;&gt; .
Remarque : Pour la valeur d'attribut location=&quot;nodeAttribute&quot;, le dernier mod&egrave;le de recherche d&eacute;termine les points
de d&eacute;but et de fin de l'attribut. Veillez &agrave; ce que le dernier mod&egrave;le trouve l'instruction enti&egrave;re.
nodeParamName
Description
Cet attribut est uniquement utilis&eacute; pour les emplacements d'insertion relatifs &agrave; un nœud. Il indique le nom du
param&egrave;tre utilis&eacute; pour transmettre le nœud au moment de l'insertion.
Parent
insertText
Type
Attribut.
Obligatoire
Cet attribut est uniquement requis si l'emplacement d'insertion contient le mot node.
Valeur
La valeur tagtype_Tag est un nom sp&eacute;cifi&eacute; par l'utilisateur pour le param&egrave;tre de nœud qui est transmis avec l'objet de
param&egrave;tre &agrave; la fonction dwscripts.applySB(). Par exemple, si vous ins&eacute;rez du texte dans un formulaire, vous pouvez
utiliser un param&egrave;tre form_tag. Dans votre fonction applyServerBehavior() de comportement de serveur, vous
pouvez utiliser le param&egrave;tre form_tag pour indiquer le formulaire pr&eacute;cis &agrave; mettre &agrave; jour, comme indiqu&eacute; dans
l'exemple suivant :
function applyServerBehavior(ssRec) {
var paramObj = new Object();
paramObj.rs = getRecordsetName();
paramObj.form_tag = getFormNode();
dwscripts.applySB(paramObj, sbObj);
}
Dans votre fichier EDML, vous pouvez sp&eacute;cifier le param&egrave;tre de nœud form_tag, comme indiqu&eacute; dans l'exemple
suivant :
&lt;insertText location=&quot;lastChildOfNode&quot; nodeParamName=&quot;form_tag&quot;&gt;
&lt;![CDATA[&lt;input type=&quot;hidden&quot; name=&quot;MY_DATA&quot;&gt;]]&gt;
&lt;/insertText&gt;
Le texte est ins&eacute;r&eacute; en tant que valeur lastChildOfNode et le nœud sp&eacute;cifique est transmis &agrave; l'aide de la propri&eacute;t&eacute;
form_tag de l'objet de param&egrave;tre.
Derni&egrave;re mise &agrave; jour le 22/6/2011
281
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;searchPatterns&gt;
Description
Cette balise donne des indications sur la fa&ccedil;on de rechercher le texte du participant dans le document et contient une
liste de mod&egrave;les utilis&eacute;s lors de la recherche d'un participant. Si plusieurs mod&egrave;les de recherche sont d&eacute;finis, ils doivent
tous &ecirc;tre trouv&eacute;s dans le texte analys&eacute; (les mod&egrave;les de recherche ont une relation AND logique), &agrave; moins qu'ils ne
soient marqu&eacute;s comme facultatifs &agrave; l'aide de l'indicateur isOptional.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
Attributs de &lt;searchPatterns&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise searchPatterns.
whereToSearch
Description
Cet attribut indique o&ugrave; rechercher le texte du participant. Il est relatif &agrave; l'emplacement d'insertion, veillez donc &agrave; d&eacute;finir
ces deux param&egrave;tres soigneusement (voir &laquo; location &raquo; &agrave; la page 278).
Parent
searchPatterns
Type
Attribut.
Obligatoire
Oui.
Valeurs
directive, tag+tagName, tag+*, comment, text
• La valeur directive recherche toutes les directives de serveur (balises sp&eacute;cifiques au serveur). Pour ASP et JSP, cela
signifie une recherche dans tous les blocs de script &lt;% ... %&gt;.
Remarque : La recherche n'est pas effectu&eacute;e dans les attributs de balise, m&ecirc;me s'ils contiennent des directives.
• La valeur tag+tagName effectue une recherche dans le contenu de la balise donn&eacute;e, comme indiqu&eacute; dans l'exemple
suivant :
&lt;searchPatterns whereToSearch=&quot;tag+FORM&quot;&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
282
EXTENSION DE DREAMWEAVER
Comportements de serveur
Cet exemple n'effectue de recherche que dans les balises de formulaire. Par d&eacute;faut, la recherche est effectu&eacute;e dans
tout le nœud outerHTML. Pour les balises INPUT, indiquez le type apr&egrave;s une barre oblique (/). Dans l'exemple
suivant, utilisez ce code pour effectuer une recherche dans tous les boutons d'envoi :
&lt;searchPatterns whereToSearch=&quot;tag+INPUT/SUBMIT&quot;&gt;.
• La valeur tag+* effectue une recherche dans le contenu de n'importe quelle balise, comme indiqu&eacute; dans l'exemple
suivant :
&lt;searchPatterns whereToSearch=&quot;tag+*&quot;&gt;
Cet exemple effectue une recherche dans toutes les balises.
• La valeur comment limite la recherche aux commentaires HTML &lt;!
...&gt;, comme indiqu&eacute; dans l'exemple suivant :
&lt;searchPatterns whereToSearch=&quot;comment&quot;&gt;
Cet exemple recherche des balises telles que &lt;!-- mes commentaires ici --&gt;.
• La valeur text limite la recherche aux sections de texte brut, comme indiqu&eacute; dans l'exemple suivant :
&lt;searchPatterns whereToSearch=&quot;text&quot;&gt;
&lt;searchPattern&gt;XYZ&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Cet exemple recherche un nœud de texte contenant le texte XYZ.
&lt;searchPattern&gt;
Description
Cette balise est un mod&egrave;le qui identifie le texte participant et en extrait chaque valeur de param&egrave;tre. Chaque sousexpression de param&egrave;tre doit &ecirc;tre mise entre parenth&egrave;ses ().
Vous pouvez avoir des mod&egrave;les sans param&egrave;tres (utilis&eacute;s pour identifier le texte participant), des mod&egrave;les avec un
param&egrave;tre ou des mod&egrave;les avec plusieurs param&egrave;tres. Tous les mod&egrave;les obligatoires doivent &ecirc;tre trouv&eacute;s et chaque
param&egrave;tre doit &ecirc;tre nomm&eacute; et trouv&eacute; exactement une fois.
Pour plus d'informations sur l'utilisation de la balise searchPattern, voir &laquo; Recherche des comportements de
serveur &raquo; &agrave; la page 294.
Parent
searchPatterns
Type
Balise de bloc.
Obligatoire
Oui.
Valeurs
searchString, /regularExpression/, &lt;empty&gt;
• La valeur searchString est une simple cha&icirc;ne de recherche, sensible &agrave; la casse. Elle ne peut pas &ecirc;tre utilis&eacute;e pour
l'extraction de param&egrave;tres.
• La valeur /regularExpression/ est un mod&egrave;le de recherche d'expression r&eacute;guli&egrave;re.
Derni&egrave;re mise &agrave; jour le 22/6/2011
283
EXTENSION DE DREAMWEAVER
Comportements de serveur
• La valeur &lt;empty&gt; est utilis&eacute;e si aucun mod&egrave;le n'est sp&eacute;cifi&eacute;. Dans ce cas, il est toujours consid&eacute;r&eacute; qu'il y a
correspondance et la valeur enti&egrave;re est affect&eacute;e au premier param&egrave;tre.
Dans l'exemple suivant, pour identifier le texte participant &lt;%=RS1.Field.Items(&quot;author_id&quot;)%&gt;, vous pouvez
d&eacute;finir un mod&egrave;le simple, suivi d'un mod&egrave;le pr&eacute;cis extrayant &eacute;galement les deux valeurs de param&egrave;tre :
&lt;searchPattern&gt;Field.Items&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;rs,col&quot;&gt;
&lt;![CDATA[
/&lt;%=\s*(\w+)\.Field\.Items\(&quot;(\w+)&quot;\)/
]]&gt;
&lt;/searchPattern&gt;
Dans cet exemple, une correspondance pr&eacute;cise est &eacute;tablie avec le mod&egrave;le. La valeur de la premi&egrave;re sous-expression
(\w+) est affect&eacute;e au param&egrave;tre &quot;rs&quot; et celle de la deuxi&egrave;me sous-expression (\w+) au param&egrave;tre &quot;col&quot;.
Remarque : Les expressions r&eacute;guli&egrave;res doivent imp&eacute;rativement commencer et se terminer par une barre oblique (/).
Sinon, elles sont utilis&eacute;es en tant que recherches de cha&icirc;ne litt&eacute;rale. Les expressions r&eacute;guli&egrave;res peuvent &ecirc;tre suivies du
modificateur d'expression r&eacute;guli&egrave;re i pour indiquer la non-sensibilit&eacute; &agrave; la casse (comme dans /pattern/i). Par exemple,
VBScript n'est pas sensible &agrave; la casse et doit donc utiliser /pattern/i. JavaScript est sensible &agrave; la casse et doit utiliser
/pattern/.
Si vous d&eacute;sirez affecter le contenu entier de l'emplacement de recherche limit&eacute;e &agrave; un param&egrave;tre, n'indiquez aucun
mod&egrave;le, comme indiqu&eacute; dans l'exemple suivant :
&lt;searchPatterns whereToSearch=&quot;tag+OPTION&quot;&gt;
&lt;searchPattern&gt;MY_OPTION_NAME&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;optionLabel&quot; limitSearch=&quot;innerOnly&quot;&gt;
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Cet exemple r&egrave;gle le param&egrave;tre optionLabel sur le contenu complet de innerHTML d'une balise OPTION.
Attributs de &lt;searchPattern&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise searchPattern.
paramNames
Description
Cet attribut est une liste s&eacute;par&eacute;e &agrave; l'aide de virgules des noms de param&egrave;tre dont les valeurs sont extraites. Ces
param&egrave;tres sont affect&eacute;s dans l'ordre de la sous-expression. Vous pouvez affecter des param&egrave;tres uniques ou utiliser
une liste s&eacute;par&eacute;e par virgule pour affecter plusieurs param&egrave;tres. Si d'autres expressions entre parenth&egrave;ses sont utilis&eacute;es
mais n'indiquent pas de param&egrave;tres, des virgules suppl&eacute;mentaires peuvent &ecirc;tre utilis&eacute;es en tant qu'espaces r&eacute;serv&eacute;s
dans la liste des noms de param&egrave;tres.
Les noms de param&egrave;tres doivent correspondre &agrave; ceux sp&eacute;cifi&eacute;s dans le texte d'insertion et dans les param&egrave;tres de mise
&agrave; jour.
Parent
searchPattern
Type
Attribut.
Derni&egrave;re mise &agrave; jour le 22/6/2011
284
EXTENSION DE DREAMWEAVER
Comportements de serveur
Obligatoire
Oui.
Valeurs
paramName1, paramName2, ...
Chaque nom de param&egrave;tre doit &ecirc;tre le nom exact d'un param&egrave;tre utilis&eacute; dans le texte d'insertion. Par exemple, si le
texte d'insertion contient @@p1@@, vous devez d&eacute;finir exactement un param&egrave;tre avec ce nom :
&lt;searchPattern paramNames=&quot;p1&quot;&gt;patterns&lt;/searchPattern&gt;
Pour extraire plusieurs param&egrave;tres utilisant un seul mod&egrave;le, utilisez une liste de noms de param&egrave;tre s&eacute;par&eacute;s par des
virgules, dans l'ordre dans lequel les sous-expressions apparaissent dans le mod&egrave;le. Supposons que l'exemple suivant
indique votre mod&egrave;le de recherche :
&lt;searchPattern paramName=&quot;p1,,p2&quot;&gt;/(\w+)_(BIG|SMALL)_(\w+)/&lt;/searchPattern&gt;
Il y a deux param&egrave;tres (s&eacute;par&eacute;s par du texte) &agrave; extraire. Dans le texte &lt;%=a_BIG_b %&gt;, la premi&egrave;re sous-expression du
mod&egrave;le de recherche correspond &agrave; a, donc p1=&quot;a&quot;. La deuxi&egrave;me sous-expression est ignor&eacute;e (remarquez le ,, dans
la valeur paramName). La troisi&egrave;me sous-expression correspond &agrave; b, donc p2=&quot;b&quot;.
limitSearch
Description
Cet attribut limite la recherche &agrave; une partie de la balise whereToSearch.
Parent
searchPattern
Type
Attribut.
Obligatoire
Non.
Valeurs
all, attribute+attribName, tagOnly, innerOnly
• La valeur all (valeur par d&eacute;faut) effectue une recherche dans la balise enti&egrave;re qui est sp&eacute;cifi&eacute;e dans l'attribut
whereToSearch.
• La valeur attribute+attribName effectue la recherche dans la seule valeur de l'attribut sp&eacute;cifi&eacute;, comme indiqu&eacute; dans
l'exemple suivant :
&lt;searchPatterns whereToSearch=&quot;tag+FORM&quot;&gt;
&lt;searchPattern limitSearch=&quot;attribute+ACTION&quot;&gt;
/MY_PATTERN/
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Cet exemple indique que la recherche doit se limiter &agrave; la seule valeur de l'attribut ACTION des balises FORM. Si cet
attribut n'est pas d&eacute;fini, la balise est ignor&eacute;e.
• La valeur tagOnly effectue la recherche dans la seule balise ext&eacute;rieure et ignore la balise innerHTML. Cette valeur est
valide uniquement lorsque whereToSearch est une balise.
Derni&egrave;re mise &agrave; jour le 22/6/2011
285
EXTENSION DE DREAMWEAVER
Comportements de serveur
• La valeur innerOnly effectue la recherche dans la seule balise innerHTML et ignore la balise ext&eacute;rieure. Cette valeur
est valide uniquement lorsque whereToSearch est une balise.
isOptional
Description
Cet attribut est un indicateur signifiant que le mod&egrave;le de recherche n'est pas obligatoire pour trouver le participant.
Cela est utile pour les participants plus complexes pouvant avoir des param&egrave;tres non essentiels &agrave; extraire. Vous pouvez
cr&eacute;er des mod&egrave;les servant &agrave; identifier de fa&ccedil;on distincte un participant et avoir des mod&egrave;les facultatifs pour l'extraction
de param&egrave;tres non essentiels.
Parent
searchPattern
Type
Attribut.
Obligatoire
Non.
Valeurs
true, false
• La valeur est true si le searchPattern n'est pas indispensable &agrave; l'identification du participant.
• La valeur est false (valeur par d&eacute;faut) si la balise searchPattern est requise.
Consid&eacute;rez par exemple la cha&icirc;ne de jeux d'enregistrements simple suivante :
&lt;%
var Recordset1 = Server.CreateObject(&quot;ADODB.Recordset&quot;);
Recordset1.ActiveConnection = &quot;dsn=andescoffee;&quot;;
Recordset1.Source = &quot;SELECT * FROM PressReleases&quot;;
Recordset1.CursorType = 3;
Recordset1.Open();
%&gt;
Les mod&egrave;les de recherche doivent identifier le participant et extraire plusieurs param&egrave;tres. Cependant, si un param&egrave;tre
tel que cursorType n'est pas trouv&eacute;, il doit toujours &ecirc;tre consid&eacute;r&eacute; comme un jeu d'enregistrements. Le param&egrave;tre
cursor est facultatif. Dans l'EDML, les mod&egrave;les de recherche peuvent ressembler &agrave; l'exemple suivant :
&lt;searchPattern paramNames=&quot;rs&quot;&gt;/var (\w+) = Server.CreateObject/
&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;src&quot;&gt;/ActiveConnection = &quot;([^\r\n]*)&quot;/&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;conn&quot;&gt;/Source = &quot;([^\r\n]*)&quot;/&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;cursor&quot; isOptional=&quot;true&quot;&gt;/CursorType = (\d+)/
&lt;/searchPattern&gt;
Les trois premiers mod&egrave;les sont obligatoires pour identifier le jeu d'enregistrements. Si le dernier param&egrave;tre n'est pas
trouv&eacute;, le jeu d'enregistrements est quand m&ecirc;me identifi&eacute;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
286
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;updatePatterns&gt;
Description
Cette fonction facultative avanc&eacute;e permet des mises &agrave; jour pr&eacute;cises du participant. Sans cette balise, le participant est
automatiquement mis &agrave; jour par remplacement du texte participant entier &agrave; chaque fois. Si vous sp&eacute;cifiez une balise
updatePatterns, elle doit contenir des mod&egrave;les pr&eacute;cis pour trouver et remplacer chaque param&egrave;tre du participant.
Cette balise peut s'av&eacute;rer utile si l'utilisateur apporte des modifications au texte. Seules les parties du texte qui ont
besoin d'&ecirc;tre modifi&eacute;es seront mises &agrave; jour avec pr&eacute;cision.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
&lt;updatePattern&gt;
Description
Cette balise est un type d'expression r&eacute;guli&egrave;re sp&eacute;cifique permettant des mises &agrave; jour pr&eacute;cises du texte du participant.
Il doit y avoir au moins une d&eacute;finition de mod&egrave;le de mise &agrave; jour pour chaque param&egrave;tre unique d&eacute;clar&eacute; dans le texte
d'insertion (de la forme @@paramName@@).
Parent
updatePatterns
Type
Balise de bloc.
Obligatoire
Oui (au moins une, si vous d&eacute;clarez la balise updatePatterns).
Valeurs
La valeur est une expression r&eacute;guli&egrave;re trouvant un param&egrave;tre plac&eacute; entre deux sous-expressions entre parenth&egrave;ses,
dans le formulaire /(pre-pattern)parameter-pattern(post-pattern)/. Vous devez d&eacute;finir au moins un mod&egrave;le de mise &agrave;
jour pour chaque @@paramName@@ unique dans votre texte d'insertion. L'exemple suivant indique &agrave; quoi peut
ressembler votre texte d'insertion :
&lt;insertText location=&quot;afterSelection&quot;&gt;
&lt;![CDATA[&lt;%= @@rs@@.Field.Items(&quot;@@col@@&quot;) %&gt;]]&gt;
&lt;/insertText&gt;
Une instance particuli&egrave;re du texte d'insertion sur une page peut ressembler &agrave; l'exemple suivant :
&lt;%= RS1.Field.Items(&quot;author_id&quot;) %&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
287
EXTENSION DE DREAMWEAVER
Comportements de serveur
Il y a deux param&egrave;tres, rs et col. Pour mettre &agrave; jour ce texte une fois qu'il est ins&eacute;r&eacute; sur la page, vous avez besoin de
deux d&eacute;finitions de mod&egrave;le de mise &agrave; jour :
&lt;updatePattern paramName=&quot;rs&quot; &gt;
/(\b)\w+(\.Field\.Items)/
&lt;/updatePattern&gt;
&lt;updatePattern paramName=&quot;col&quot;&gt;
/(\bItems\(&quot;)\w+(&quot;\))/
&lt;/updatePattern&gt;
Les parenth&egrave;ses litt&eacute;rales, ainsi que d'autres caract&egrave;res d'expressions r&eacute;guli&egrave;res sp&eacute;ciaux, n'ont pas &eacute;t&eacute; pris en compte
en raison de la barre oblique inverse les pr&eacute;c&eacute;dant (\). L'expression du milieu, d&eacute;finie comme \w+, est mise &agrave; jour avec
la derni&egrave;re valeur transmise pour les param&egrave;tres rs et col, respectivement. Les valeurs RS1 et author_id peuvent &ecirc;tre
mises &agrave; jour avec de nouvelles valeurs de fa&ccedil;on pr&eacute;cise.
Plusieurs instances du m&ecirc;me mod&egrave;le peuvent &ecirc;tre mises &agrave; jour en m&ecirc;me temps en utilisant l'indicateur global
d'expression r&eacute;guli&egrave;re g apr&egrave;s la barre oblique de fermeture (par exemple, dans /pattern/g).
Si le texte du participant est long et complexe, vous devrez utiliser plusieurs mod&egrave;les pour mettre &agrave; jour un seul
param&egrave;tre, comme indiqu&eacute; dans l'exemple suivant :
&lt;% ...
Recordset1.CursorType = 0;
Recordset1.CursorLocation = 2;
Recordset1.LockType = 3;
%&gt;
Pour mettre &agrave; jour le nom du jeu d'enregistrements dans les trois positions, vous devez disposer de trois mod&egrave;les de
mise &agrave; jour pour un seul param&egrave;tre, comme indiqu&eacute; dans l'exemple suivant :
&lt;updatePattern paramName=&quot;rs&quot;&gt;
/(\b)\w+(\.CursorType)/
&lt;/updatePattern&gt;
&lt;updatePattern paramName=&quot;rs&quot;&gt;
/(\b)\w+(\.CursorLocation)/
&lt;/updatePattern&gt;
&lt;updatePattern paramName=&quot;rs&quot;&gt;
/(\b)\w+(\.LockType)/
&lt;/updatePattern&gt;
Vous pouvez maintenant transmettre une nouvelle valeur pour le jeu d'enregistrements, qui est mis &agrave; jour avec
pr&eacute;cision &agrave; trois emplacements.
Attributs de &lt;updatePattern&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise updatePattern.
paramName
Description
Cet attribut indique le nom du param&egrave;tre dont la valeur est utilis&eacute;e pour mettre &agrave; jour le participant. Ce param&egrave;tre doit
correspondre &agrave; ceux sp&eacute;cifi&eacute;s dans le texte d'insertion et dans les param&egrave;tres de recherche.
Parent
updatePattern
Derni&egrave;re mise &agrave; jour le 22/6/2011
288
EXTENSION DE DREAMWEAVER
Comportements de serveur
Type
Attribut.
Obligatoire
Oui.
Valeurs
La valeur est le nom exact d'un param&egrave;tre utilis&eacute; dans le texte d'insertion. Dans l'exemple suivant, si le texte d'insertion
contient une valeur @@rs@@, vous devez avoir un param&egrave;tre du nom :
&lt;updatePattern paramName=&quot;rs&quot;&gt;pattern&lt;/updatePattern&gt;
&lt;delete&gt;
Description
Cette balise est une fonction facultative avanc&eacute;e qui vous permet de contr&ocirc;ler comment un participant est supprim&eacute;.
Sans cette balise, vous devez effacer le participant enti&egrave;rement pour le supprimer, mais seulement si aucun
comportement de serveur n'y fait r&eacute;f&eacute;rence. En d&eacute;finissant une balise delete, vous pouvez sp&eacute;cifier qu'il ne doit jamais
&ecirc;tre supprim&eacute; ou que seules certaines parties doivent l'&ecirc;tre.
Parent
implementation
Type
Balise.
Obligatoire
Non.
Attributs de &lt;delete&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise delete.
deleteType
Description
Cet attribut indique le type de suppression &agrave; effectuer. Il poss&egrave;de diff&eacute;rentes significations, selon que le participant est
une directive, une balise ou un attribut. Par d&eacute;faut, le participant entier est supprim&eacute;.
Parent
delete
Type
Attribut.
Obligatoire
Non.
Derni&egrave;re mise &agrave; jour le 22/6/2011
289
EXTENSION DE DREAMWEAVER
Comportements de serveur
Valeurs
all, none, tagOnly, innerOnly, attribute+attribName, attribute+*
• La valeur all (valeur par d&eacute;faut) supprime la directive ou la balise enti&egrave;re. Pour les attributs, elle supprime la
d&eacute;finition enti&egrave;re.
• La valeur none n'est jamais automatiquement supprim&eacute;e.
• La valeur tagOnly supprime uniquement la balise ext&eacute;rieure mais laisse le contenu de la balise innerHTML intact.
Pour les attributs, elle supprime &eacute;galement la balise ext&eacute;rieure s'il s'agit d'une balise de bloc. Sans signification pour
les directives.
• La valeur innerOnly supprime uniquement le contenu (la balise innerHTML) lorsqu'elle est appliqu&eacute;e &agrave; des balises.
Pour les attributs, elle supprime uniquement la valeur. Sans signification pour les directives.
• La valeur attribute+attribName supprime uniquement l'attribut sp&eacute;cifi&eacute; lorsqu'elle est appliqu&eacute;e &agrave; des balises. Sans
signification pour les directives et les attributs.
• La valeur attribute+* supprime tous les attributs des balises. Sans signification pour les directives et les attributs.
Si votre comportement de serveur convertit le texte s&eacute;lectionn&eacute; en lien, vous pouvez supprimer le lien en supprimant
la balise ext&eacute;rieure uniquement, comme indiqu&eacute; dans l'exemple suivant :
&lt;delete deleteType=&quot;tagOnly&quot;/&gt;
Cet exemple convertit un participant de lien de &lt;A HREF=&quot;...&quot;&gt;HELLO&lt;/A&gt; en HELLO.
&lt;translator&gt;
Description
Cette balise donne des informations pour la traduction d'un participant de fa&ccedil;on &agrave; ce qu'elle puisse &ecirc;tre rendue
diff&eacute;remment et puisse avoir un inspecteur Propri&eacute;t&eacute;s personnalis&eacute;.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
&lt;searchPatterns&gt;
Description
Cette balise permet &agrave; Dreamweaver de trouver les instances sp&eacute;cifi&eacute;es dans un document. Si plusieurs mod&egrave;les de
recherche sont d&eacute;finis, ils doivent tous &ecirc;tre trouv&eacute;s dans le texte analys&eacute; (les mod&egrave;les de recherche ont une relation
AND logique), &agrave; moins qu'ils ne soient marqu&eacute;s comme facultatifs &agrave; l'aide de l'indicateur isOptional.
Parent
translator
Derni&egrave;re mise &agrave; jour le 22/6/2011
290
EXTENSION DE DREAMWEAVER
Comportements de serveur
Type
Balise de bloc.
Obligatoire
Oui.
&lt;translations&gt;
Description
Cette balise contient une liste d'instructions de traduction, chacune indiquant o&ugrave; rechercher le participant et ce qu'il
convient d'en faire.
Parent
translator
Type
Balise de bloc.
Obligatoire
Non.
&lt;translation&gt;
Description
Cette balise contient une instruction de traduction unique indiquant l'emplacement du participant, quel type de
traduction effectuer et par quoi remplacer le texte du participant.
Parent
translations
Type
Balise de bloc.
Obligatoire
Non.
Attributs de &lt;translation&gt;
Les &eacute;l&eacute;ments suivants sont des attributs valides de la balise translation.
whereToSearch
Description
Cet attribut indique o&ugrave; rechercher le texte, par rapport &agrave; l'emplacement d'insertion. Veillez donc &agrave; d&eacute;finir
soigneusement chaque emplacement (voir &laquo; location &raquo; &agrave; la page 278).
Derni&egrave;re mise &agrave; jour le 22/6/2011
291
EXTENSION DE DREAMWEAVER
Comportements de serveur
Parent
translation
Type
Attribut.
Obligatoire
Oui.
limitSearch
Description
Cet attribut limite la recherche &agrave; une partie de la balise whereToSearch.
Parent
translation
Type
Attribut.
Obligatoire
Non.
translationType
Description
Cet attribut indique le type de traduction &agrave; r&eacute;aliser. Ces types sont pr&eacute;d&eacute;finis et donnent &agrave; la traduction une
fonctionnalit&eacute; pr&eacute;cise. Par exemple, si vous sp&eacute;cifiez dynamic data, toute donn&eacute;e traduite doit se comporter comme
une donn&eacute;e dynamique Dreamweaver ; c'est-&agrave;-dire ressembler &agrave; un espace r&eacute;serv&eacute; de donn&eacute;es dynamiques dans le
mode de mise en page (notation entre accolades, { }, avec couleur d'arri&egrave;re-plan dynamique) et figurer dans le panneau
Comportements de serveur.
Parent
translation
Type
Attribut.
Obligatoire
Oui.
Valeurs
dynamic data, dynamic image, dynamic source, tabbed region start, tabbed region end, custom
• Cette valeur dynamic data indique que les directives traduites ressemblent &agrave; des donn&eacute;es dynamiques
Dreamweaver et se comportent de la m&ecirc;me fa&ccedil;on, comme indiqu&eacute; dans l'exemple suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
292
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;translation whereToSearch=&quot;tag+IMAGE&quot;
limitSearch=&quot;attribute+SRC&quot;
translationType=&quot;dynamic data&quot;&gt;
• La valeur dynamic image indique que les attributs traduits doivent ressembler &agrave; des images dynamiques
Dreamweaver et se comporter de la m&ecirc;me fa&ccedil;on, comme indiqu&eacute; dans l'exemple suivant :
&lt;translation whereToSearch=&quot;IMAGE+SRC&quot;
translationType=&quot;dynamic image&quot;&gt;
• La valeur dynamic source indique que les directives traduites doivent se comporter comme des sources dynamiques
Dreamweaver, comme indiqu&eacute; dans l'exemple suivant :
&lt;translation whereToSearch=&quot;directive&quot;
translationType=&quot;dynamic source&quot;&gt;
• La valeur tabbed
region start indique que les balises CFLOOP traduites d&eacute;finissent le d&eacute;but d'un contour tabul&eacute;,
comme indiqu&eacute; dans l'exemple suivant :
&lt;translation whereToSearch=&quot;CFLOOP&quot;
translationType=&quot;tabbed region start&quot;&gt;
• La valeur tabbed
region start indique que les balises /CFLOOP traduites d&eacute;finissent le d&eacute;but d'un contour tabul&eacute;,
comme indiqu&eacute; dans l'exemple suivant :
&lt;translation whereToSearch=&quot;CFLOOP&quot;
translationType=&quot;tabbed region end&quot;&gt;
• La valeur custom est le cas par d&eacute;faut, dans lequel aucune fonctionnalit&eacute; Dreamweaver interne n'est ajout&eacute;e &agrave; la
traduction. Il est courant de l'utiliser lors de la sp&eacute;cification d'une balise &agrave; ins&eacute;rer pour un inspecteur Propri&eacute;t&eacute;s
personnalis&eacute;, comme indiqu&eacute; dans l'exemple suivant :
&lt;translation whereToSearch=&quot;directive&quot;
translationType=&quot;custom&quot;&gt;
&lt;openTag&gt;
Description
Cette balise facultative peut &ecirc;tre ins&eacute;r&eacute;e au d&eacute;but de la section de traduction. Cette balise permet &agrave; d'autres extensions,
par exemple les inspecteurs Propri&eacute;t&eacute;s personnalis&eacute;s, de trouver la traduction.
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
Valeurs
La valeur tagName est un nom de balise valide. Il doit &ecirc;tre unique pour emp&ecirc;cher les conflits avec les types de balise
connus. Par exemple, si vous sp&eacute;cifiez &lt;openTag&gt;MM_DYNAMIC_CONTENT&lt;/openTag&gt; les donn&eacute;es dynamiques sont
traduites dans la balise MM_DYNAMIC_CONTENT.
Derni&egrave;re mise &agrave; jour le 22/6/2011
293
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;attributes&gt;
Description
Cette balise contient une liste d'attributs &agrave; ajouter &agrave; la balise traduite sp&eacute;cifi&eacute;e dans openTag. Sinon, si la balise
openTag n'est pas d&eacute;finie et que la balise searchPattern sp&eacute;cifie tag, cette balise contient une liste d'attributs traduits
&agrave; ajouter &agrave; la balise trouv&eacute;e.
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
&lt;attribute&gt;
Description
Cette balise sp&eacute;cifie un attribut unique (ou un attribut traduit) &agrave; ajouter &agrave; la balise traduite.
Parent
attributes
Type
Balise de bloc.
Obligatoire
Oui (au moins un).
Valeurs
La sp&eacute;cification attributeName=&quot;attributeValue&quot; d&eacute;finit un attribut sur une valeur. Le nom d'attribut est g&eacute;n&eacute;ralement
fixe et la valeur contient des r&eacute;f&eacute;rences de param&egrave;tres extraites par les mod&egrave;les de param&egrave;tres, comme indiqu&eacute; dans
l'exemple suivant :
&lt;attribute&gt;SOURCE=&quot;@@rs@@&quot;&lt;/attribute&gt;
&lt;attribute&gt;BINDING=&quot;@@col@@&quot;&lt;/attribute&gt;
ou
&lt;attribute&gt;
mmTranslatedValueDynValue=&quot;VALUE={@@rs@@.@@col@@}&quot;
&lt;/attribute&gt;
&lt;display&gt;
Description
Cette balise est une cha&icirc;ne d'affichage facultative devant &ecirc;tre ins&eacute;r&eacute;e dans la traduction.
Derni&egrave;re mise &agrave; jour le 22/6/2011
294
EXTENSION DE DREAMWEAVER
Comportements de serveur
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
Valeurs
Cette valeur displayString se r&eacute;f&egrave;re &agrave; toute cha&icirc;ne contenant du texte et du HTML. Peut comporter des r&eacute;f&eacute;rences de
param&egrave;tres extraites par les mod&egrave;les de param&egrave;tres. Par exemple, &lt;display&gt;{@@rs@@.@@col@@}&lt;/display&gt;
entra&icirc;ne le rendu de la traduction sous la forme {myRecordset.myCol}.
&lt;closeTag&gt;
Description
Cette balise facultative doit &ecirc;tre ins&eacute;r&eacute;e &agrave; la fin de la section traduite. Cette balise permet &agrave; certaines autres extensions,
par exemple les inspecteurs Propri&eacute;t&eacute;s personnalis&eacute;s, de trouver la traduction.
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
Valeurs
La valeur tagName est un nom de balise valide ; elle doit correspondre &agrave; une balise de traduction openTag.
Exemple
Si vous sp&eacute;cifiez la valeur &lt;closeTag&gt;MM_DYNAMIC_CONTENT&lt;/closeTag&gt;, les donn&eacute;es dynamiques sont traduites
pour terminer avec la balise /MM_DYNAMIC_CONTENT.
Techniques de comportements de serveur
Cette section explique les techniques courantes et avanc&eacute;es qui sont utilis&eacute;es pour cr&eacute;er et modifier les comportements
de serveur. La plupart des suggestions requi&egrave;rent des param&egrave;tres sp&eacute;cifiques dans les fichiers EDML.
Recherche des comportements de serveur
Vous pouvez trouver des comportements de serveur &agrave; l'aide des fonctions suivantes :
• Ecriture de mod&egrave;les de recherche
Derni&egrave;re mise &agrave; jour le 22/6/2011
295
EXTENSION DE DREAMWEAVER
Comportements de serveur
• Utilisation de mod&egrave;les de recherche facultatifs
Ecriture de mod&egrave;les de recherche
Pour mettre &agrave; jour ou supprimer des comportements de serveur, vous devez fournir &agrave; Dreamweaver les moyens de
trouver chaque instance dans un document. Pour cela, une balise quickSearch et au moins une balise
searchPattern, contenue dans la balise searchPatterns, sont requises.
La balise quickSearch doit &ecirc;tre une cha&icirc;ne et non une expression r&eacute;guli&egrave;re, indiquant l'existence du comportement
de serveur sur la page. Elle ne respecte pas la casse. Elle doit &ecirc;tre courte et unique et doit &eacute;viter les espaces et d'autres
sections que l'utilisateur peut modifier. L'exemple suivant montre un participant compos&eacute; de la simple balise ASP
JavaScript :
&lt;% if (Recordset1.EOF) Response.Redirect(&quot;some_url_here&quot;) %&gt;
Dans l'exemple suivant, la cha&icirc;ne quickSearch v&eacute;rifie la pr&eacute;sence de la balise suivante :
&lt;quickSearch&gt;Response.Redirect&lt;/quickSearch&gt;
Pour des raisons de performances, le processus de recherche des instances de comportement de serveur commence par
le mod&egrave;le quickSearch. Si cette cha&icirc;ne figure dans le document et que le participant identifie un comportement de
serveur (dans le fichier groupe, partType=&quot;identifier&quot; pour ce participant), les fichiers associ&eacute;s sont alors charg&eacute;s
et la fonction findServerBehaviors() est appel&eacute;e. A d&eacute;faut de cha&icirc;nes fiables &agrave; rechercher dans le participant (ou
pour des raisons de d&eacute;bogage), vous pouvez laisser la cha&icirc;ne quickSearch vide, comme indiqu&eacute; dans l'exemple
suivant :
&lt;quickSearch&gt;&lt;/quickSearch&gt;
Dans cet exemple, le comportement de serveur est toujours charg&eacute; et la recherche du document ex&eacute;cut&eacute;e.
La balise searchPattern est ensuite utilis&eacute;e pour analyser le document plus minutieusement que la balise
quickSearch et pour extraire des valeurs de param&egrave;tre du code du participant. Les mod&egrave;les de recherche sp&eacute;cifient
l'emplacement de la recherche (l'attribut whereToSearch) et exploitent une s&eacute;rie de balises searchPattern contenant
des mod&egrave;les sp&eacute;cifiques. Ces mod&egrave;les peuvent utiliser de simples cha&icirc;nes ou des expressions r&eacute;guli&egrave;res. Le code de
l'exemple pr&eacute;c&eacute;dent est une directive ASP, &agrave; savoir la sp&eacute;cification whereToSearch=&quot;directive&quot; et une expression
r&eacute;guli&egrave;re identifie la directive et extrait les param&egrave;tres, comme indiqu&eacute; dans l'exemple suivant :
&lt;quickSearch&gt;Response.Write&lt;/quickSearch&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern paramNames=&quot;rs,new__url&quot;&gt;
/if\s*\((\w+)\.EOF\)\s*Response\.Redirect\(&quot;([^\r\n]*)&quot;\)/i
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
La cha&icirc;ne de recherche est d&eacute;finie sous la forme d'une expression r&eacute;guli&egrave;re en la faisant d&eacute;buter et se terminer par une
barre oblique (/). Un i suit la barre oblique, ce qui indique qu'elle n'est pas sensible &agrave; la casse. Dans l'expression
r&eacute;guli&egrave;re, les caract&egrave;res sp&eacute;ciaux, tels que les parenth&egrave;ses (), points (.), etc. sont sp&eacute;cifi&eacute;s en les faisant pr&eacute;c&eacute;der d'une
barre oblique inverse (\). Les deux param&egrave;tres rs et new_url sont extraits de la cha&icirc;ne &agrave; l'aide de sous-expressions
entre parenth&egrave;ses (les param&egrave;tres doivent &ecirc;tre entre parenth&egrave;ses). Dans cet exemple, ils sont indiqu&eacute;s par (\w+) et
([^\r\n]*). Ces valeurs correspondent aux valeurs d'expression r&eacute;guli&egrave;re que $1 et $2 renvoient normalement.
Mod&egrave;les de recherche facultatifs
Il peut parfois &ecirc;tre n&eacute;cessaire d'identifier un participant, m&ecirc;me si certains param&egrave;tres sont introuvables. Le participant
stocke quelques informations facultatives telles qu'un num&eacute;ro de t&eacute;l&eacute;phone. Pour cet exemple, vous pouvez utiliser le
code ASP suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
296
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;% //address block
LNAME = &quot;joe&quot;;
FNAME = &quot;smith&quot;;
PHONE = &quot;123-4567&quot;;
%&gt;
Vous pouvez utiliser les mod&egrave;les de recherche suivants :
&lt;quickSearch&gt;address&lt;/quickSearch&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern paramNames=&quot;lname&quot;&gt;/LNAME\s*=\s*&quot;([^\r\n]*)&quot;/i&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;fname&quot;&gt;/FNAME\s*=\s*&quot;([^\r\n]*)&quot;/i&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;phone&quot;&gt;/PHONE\s*=\s*&quot;([^\r\n]*)&quot;/i&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Dans l'exemple pr&eacute;c&eacute;dent, le num&eacute;ro de t&eacute;l&eacute;phone doit &ecirc;tre sp&eacute;cifi&eacute;. Cependant, vous pouvez rendre le num&eacute;ro de
t&eacute;l&eacute;phone facultatif en ajoutant l'attribut isOptional, comme indiqu&eacute; dans l'exemple suivant :
&lt;quickSearch&gt;address&lt;/quickSearch&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern paramNames=&quot;lname&quot;&gt;/LNAME\s*=\s*&quot;([^\r\n]*)&quot;/i&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;fname&quot;&gt;/FNAME\s*=\s*&quot;([^\r\n]*)&quot;/i&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;phone&quot; isOptional=&quot;true&quot;&gt;/PHONE\s*=\s*&quot;([^\r\n]*)&quot;/i&not;
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Le participant est maintenant reconnu, m&ecirc;me si le num&eacute;ro de t&eacute;l&eacute;phone n'est pas trouv&eacute;.
M&eacute;thode de mise en correspondances des participants
Si un comportement de serveur comporte plusieurs participants, ils doivent &ecirc;tre identifi&eacute;s dans le document utilisateur
et mis en correspondance. Si l'utilisateur applique plusieurs instances du comportement de serveur &agrave; un document,
chaque groupe de participants doit &ecirc;tre mis en correspondance en cons&eacute;quence. Pour que la mise en correspondance
des participants s'effectue correctement, modifiez ou ajoutez des param&egrave;tres, puis cr&eacute;ez des participants qui soient
identifiables de fa&ccedil;on unique.
La mise en correspondance n&eacute;cessite quelques r&egrave;gles : les participants sont mis en correspondance si l'ensemble des
param&egrave;tres portant le m&ecirc;me nom ont la m&ecirc;me valeur. Au-dessus et en dessous de la balise html ne peut figurer qu'une
seule instance d'un participant, avec un jeu donn&eacute; de valeurs de param&egrave;tre. Entre les balises html.../html,
Dreamweaver met les participants en correspondance en fonction de leur position par rapport &agrave; la s&eacute;lection ou aux
nœuds communs utilis&eacute;s pour l'insertion.
Les participants sans param&egrave;tres sont automatiquement retenus, comme le montre cet exemple d'un comportement
de serveur avec un fichier groupe :
&lt;group serverBehavior=&quot;test.htm&quot;&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;groupParticipants&gt;
&lt;groupParticipant name=&quot;test_p1&quot; partType=&quot;identifier&quot; /&gt;
&lt;groupParticipant name=&quot;test_p2&quot; partType=&quot;identifier&quot; /&gt;
&lt;/groupParticipants&gt;
&lt;/group&gt;
L'exemple suivant ins&egrave;re deux participants simples au-dessus de la balise html :
&lt;% //test_p1 %&gt;
&lt;% //test_p2 %&gt;
&lt;html&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
297
EXTENSION DE DREAMWEAVER
Comportements de serveur
Ces participants sont localis&eacute;s et mis en correspondance, et le mot Test s'affiche une fois dans le panneau
Comportements de serveur. Si vous ajoutez de nouveau ce comportement de serveur, rien n'est ajout&eacute; &eacute;tant donn&eacute; que
les participants existent d&eacute;j&agrave;.
Si les param&egrave;tres des participants sont uniques, de multiples instances peuvent &ecirc;tre ins&eacute;r&eacute;es au-dessus de la balise
html. Par exemple, en ajoutant un param&egrave;tre de nom au participant, un utilisateur peut saisir un nom unique dans la
bo&icirc;te de dialogue du comportement de serveur Test. Si l'utilisateur saisit le nom aaa, les participants suivants sont
ins&eacute;r&eacute;s :
Si vous ajoutez de nouveau le comportement de serveur et saisissez un autre nom, soit bbb, le document se pr&eacute;sente
comme suit :
&lt;% //test_p1 name=&quot;aaa&quot; %&gt;
&lt;% //test_p2 name=&quot;aaa&quot; %&gt;
&lt;html&gt;
Deux instances du mot Test sont r&eacute;pertori&eacute;es dans le panneau Comportements de serveur. Si l'utilisateur tente
d'ajouter une troisi&egrave;me instance &agrave; la page et qu'il la nomme aaa, rien n'est ajout&eacute; &eacute;tant donn&eacute; qu'elle existe d&eacute;j&agrave;.
Dans la balise html, le processus de mise en correspondance peut &eacute;galement avoir recours &agrave; des informations de
position. Dans l'exemple suivant, vous avez deux participants, l'un ajout&eacute; avant la s&eacute;lection et l'autre apr&egrave;s, comme
suit :
&lt;% if (expression) { //mySBName %&gt;
S&eacute;lection al&eacute;atoire HTML ici :
&lt;% } //end mySBName %&gt;
Ces deux participants ne sont pourvus d'aucun param&egrave;tre et sont donc regroup&eacute;s. Il est toutefois possible d'ajouter une
autre instance de ce comportement de serveur ailleurs dans le code HTML, comme indiqu&eacute; dans l'exemple suivant :
&lt;% if (expression) { //mySBName %&gt;
S&eacute;lection al&eacute;atoire HTML ici :
&lt;% } //end mySBName %&gt;
Autre code HTML ici :
&lt;% if (expression) { //mySBName %&gt;
Autre s&eacute;lection HTML ici :
&lt;% } //end mySBName %&gt;
A pr&eacute;sent, les deux instances de chaque participant sont identiques, ce qui est permis dans le code HTML, et
Dreamweaver les met en correspondance selon l'ordre dans lequel elles apparaissent dans le document.
Voici un exemple type d'un probl&egrave;me de mise en correspondance et des solutions possibles pour l'&eacute;viter. Vous pouvez
cr&eacute;er un participant capable de calculer la taxe de certaines donn&eacute;es dynamiques et d'afficher le r&eacute;sultat &agrave; la s&eacute;lection.
&lt;% total = Recordset1.Fields.Item(&quot;itemPrice&quot;).Value * 1.0825 %&gt;
&lt;html&gt;
&lt;body&gt;
The total (with taxes) is $&lt;%=total%&gt;
&lt;/body&gt;
&lt;/html&gt;
Les deux participants sont mis en correspondance car ils n'ont aucun param&egrave;tre en commun. Toutefois, si vous ajoutez
une deuxi&egrave;me instance de ce comportement de serveur, vous devez avoir le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
298
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;% total = Recordset1.Fields.Item(&quot;itemPrice&quot;).Value * 1.0825 %&gt;
&lt;% total = Recordset1.Fields.Item(&quot;salePrice&quot;).Value * 1.0825 %&gt;
&lt;html&gt;
&lt;body&gt;
The total0(with taxes) is $&lt;%=total%&gt;
Sale price (with taxes) is $&lt;%=total%&gt;
&lt;/body&gt;
&lt;/html&gt;
Ce comportement de serveur ne fonctionne plus correctement, car un seul param&egrave;tre est nomm&eacute; total. Pour
r&eacute;soudre le probl&egrave;me, v&eacute;rifiez qu'il existe bien un param&egrave;tre dont la valeur est unique et qui peut &ecirc;tre utilis&eacute; pour
mettre en correspondance les participants. Dans l'exemple suivant, vous pouvez faire en sorte que le nom de la variable
total soit unique en utilisant le nom de la colonne :
&lt;% itemPrice_total = Recordset1.Fields.Item(&quot;itemPrice&quot;).Value * 1.0825 %&gt;
&lt;% salePrice_total = Recordset1.Fields.Item(&quot;salePrice&quot;).Value * 1.0825 %&gt;
&lt;html&gt;
&lt;body&gt;
The total0(with taxes) is $&lt;%=itemPrice_total%&gt;
Sale price (with taxes) is $&lt;%=salePrice_total%&gt;
&lt;/body&gt;
&lt;/html&gt;
A pr&eacute;sent, les mod&egrave;les de recherche peuvent identifier de fa&ccedil;on unique les participants et les mettre en
correspondance.
R&eacute;solution du mod&egrave;le de recherche
Dreamweaver prend en charge les actions suivantes en utilisant la fonctionnalit&eacute; searchPatterns du participant :
• d&eacute;pendance du transfert de fichier,
• mise &agrave; jour des chemins de fichier pour toutes les r&eacute;f&eacute;rences de fichier (tels que les chemins des fichiers inclus).
Lors de la cr&eacute;ation de mod&egrave;les de serveur, Dreamweaver g&eacute;n&egrave;re des listes de mod&egrave;les en recherchant les attributs
paramNames sp&eacute;ciaux dans tous les participants. Pour rechercher des URL servant &agrave; v&eacute;rifier la d&eacute;pendance de fichiers
et corriger le nom de chemin, Dreamweaver utilise les balises searchPattern qui contiennent des attributs
paramNames avec l'extension _url. Vous pouvez sp&eacute;cifier plusieurs URL dans une m&ecirc;me balise searchPattern.
Pour chaque balise searchPattern de traducteur comportant une valeur d'attribut paramNames avec l'extension
_includeUrl, Dreamweaver MX utilise cette balise searchPattern pour traduire les instructions de fichier inclus de
la page. Dreamweaver utilise un suffixe diff&eacute;rent pour identifier les URL de fichier inclus, car toutes les r&eacute;f&eacute;rences URL
ne sont pas traduites. De m&ecirc;me, une seule URL peut &ecirc;tre traduite comme fichier inclus.
Pour r&eacute;soudre une balise searchPatterns, Dreamweaver utilise l'algorithme suivant :
1 Recherche de l'attribut whereToSearch dans la balise searchPatterns.
2 Si la valeur de l'attribut commence par tag+, le reste de la cha&icirc;ne est consid&eacute;r&eacute; comme le nom de la balise (les
espaces ne sont pas accept&eacute;s dans les noms de balise).
3 Recherche de l'attribut limitSearch dans la balise searchPattern.
4 Si la valeur de l'attribut commence par attribute+, le reste de la cha&icirc;ne est consid&eacute;r&eacute; comme le nom de l'attribut
(les espaces ne sont pas accept&eacute;s dans les noms d'attribut).
Derni&egrave;re mise &agrave; jour le 22/6/2011
299
EXTENSION DE DREAMWEAVER
Comportements de serveur
Si ces quatre &eacute;tapes se d&eacute;roulent sans anomalie, Dreamweaver suppose qu'il s'agit d'une combinaison balise/attribut.
Sinon, Dreamweaver recherche les balises searchPattern contenant un attribut paramName qui comporte un suffixe
_url et une expression r&eacute;guli&egrave;re d&eacute;finie. Pour plus d'informations sur les expressions r&eacute;guli&egrave;res, consultez la section
&laquo; Expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 269.
L'exemple suivant de balise searchPatterns ne contient pas de mod&egrave;le de recherche car il combine une balise
(cfinclude) avec un attribut (template) pour isoler l'URL et v&eacute;rifier la d&eacute;pendance de fichier, la correction de
chemin, etc. :
&lt;searchPatterns whereToSearch=&quot;tag+cfinclude&quot;&gt;
&lt;searchPattern paramNames=&quot;include_url&quot; limitSearch=&quot;attribute+template&quot; /&gt;
&lt;/searchPatterns&gt;
La combinaison balise/attribut (voir l'exemple pr&eacute;c&eacute;dent) ne s'applique pas &agrave; la traduction, car Dreamweaver traduit
directement en texte dans le calque JavaScript. La v&eacute;rification de d&eacute;pendance de fichier, la correction de chemin, etc.
s'effectuent dans le calque C. Dans le calque C, Dreamweaver partage le document en interne en directives (texte
direct) et en balises (structur&eacute;es en une arborescence efficace).
Mise &agrave; jour des comportements de serveur
Vous pouvez mettre &agrave; jour les comportements de serveur &agrave; l'aide des fonctions suivantes :
• Mise &agrave; jour par remplacement
• Mise &agrave; jour de pr&eacute;cision
Mise &agrave; jour par remplacement
Par d&eacute;faut, aucune balise &lt;updatePatterns&gt; ne figure dans les fichiers EDML participants et les instances du
participant sont mises &agrave; jour dans le document par un remplacement complet. Lorsqu'un utilisateur modifie un
comportement de serveur existant et clique sur OK, tout participant contenant un param&egrave;tre dont la valeur a chang&eacute;
est supprim&eacute;. Le participant est ensuite r&eacute;ins&eacute;r&eacute; avec la m&ecirc;me valeur au m&ecirc;me endroit.
Si l'utilisateur personnalise le code du participant dans le document, le participant peut ne plus &ecirc;tre reconnu si les
mod&egrave;les de recherche recherchent l'ancien code. Les mod&egrave;les de recherche plus courts permettent &agrave; l'utilisateur de
personnaliser le code de participant dans son document. Toutefois, la mise &agrave; jour de l'instance de comportement de
serveur peut entra&icirc;ner le remplacement du participant, qui perd les modifications personnalis&eacute;es.
Mise &agrave; jour de pr&eacute;cision
Dans certains cas, il peut &ecirc;tre pr&eacute;f&eacute;rable de laisser l'utilisateur personnaliser le code du participant apr&egrave;s insertion dans
le document. Pour ce faire, il suffit de limiter les mod&egrave;les de recherche et de fournir des mod&egrave;les de mise &agrave; jour dans
le fichier EDML. Apr&egrave;s avoir ajout&eacute; le participant &agrave; la page, le comportement de serveur n'en modifie que certaines
parties. L'exemple suivant indique un simple participant dot&eacute; de deux param&egrave;tres :
&lt;% if (Recordset1.EOF) Response.Redirect(&quot;some_url_here&quot;) %&gt;
Dans cet exemple, les mod&egrave;les de recherche peuvent se pr&eacute;senter comme suit :
&lt;quickSearch&gt;Response.Write&lt;/quickSearch&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern paramNames=&quot;rs,new__url&quot;&gt;
/if\s*\((\w+)\.EOF\)\s*Response\.Redirect\(&quot;([^\r\n]*)&quot;\)/i
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Le cas &eacute;ch&eacute;ant, l'utilisateur peut ajouter un autre test &agrave; une instance particuli&egrave;re de ce code, comme indiqu&eacute; dans
l'exemple suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
300
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;% if (Recordset1.EOF || x &gt; 2) Response.Redirect(&quot;some_url_here&quot;) %&gt;
Les mod&egrave;les de recherche &eacute;chouent, car ils recherchent une parenth&egrave;se apr&egrave;s le param&egrave;tre EOF. Pour rendre les
mod&egrave;les de recherche plus flexibles, vous pouvez les raccourcir en les partageant, comme indiqu&eacute; dans l'exemple
suivant :
&lt;quickSearch&gt;Response.Write&lt;/quickSearch&gt;
&lt;searchPatterns whereToSearch=&quot;directive&quot;&gt;
&lt;searchPattern paramNames=&quot;rs&quot;&gt;/(\w+)\.EOF/&lt;/searchPattern&gt;
&lt;searchPattern paramNames=&quot;new__url&quot;&gt;
/if\s*\([^\r\n]*\)\s*Response\.Redirect\(&quot;([^\r\n]*)&quot;/i
&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
Ces mod&egrave;les de recherche raccourcis &eacute;tant souples, l'utilisateur peut effectuer des ajouts au code. Toutefois, si le
comportement de serveur modifie l'URL, lorsque l'utilisateur clique sur OK, le participant est remplac&eacute; et les
personnalisations sont perdues. Pour une mise &agrave; jour plus pr&eacute;cise, ajoutez une balise updatePatterns contenant un
mod&egrave;le pour la mise &agrave; jour de chaque param&egrave;tre :
&lt;updatePatterns&gt;
&lt;updatePattern paramNames=&quot;rs&quot;&gt;/(\b)\w+(\.EOF)/\&lt;/updatePattern&gt;
&lt;updatePattern paramNames=&quot;new__url&quot;&gt;
/(Response\.Redirect\(&quot;)[^\r\n]*(&quot;)/i
&lt;/updatePattern&gt;
&lt;/updatePatterns&gt;
Dans les mod&egrave;les de mise &agrave; jour, les parenth&egrave;ses sont invers&eacute;es et plac&eacute;es autour du texte avant et apr&egrave;s le param&egrave;tre.
Pour les mod&egrave;les de recherche, utilisez le param&egrave;tre textBeforeParam(param)textAfterParam. Pour les mod&egrave;les
de mise &agrave; jour, utilisez le param&egrave;tre (textBeforeParam)param(textAfterParam). Tout le texte qui se trouve entre
les deux sous-expressions entre parenth&egrave;ses sera remplac&eacute; par la nouvelle valeur du param&egrave;tre.
Suppression de comportements de serveur
Vous pouvez supprimer des comportements de serveur &agrave; l'aide des fonctions suivantes :
• Suppression par d&eacute;faut et comptes de d&eacute;pendance
• Utilisation de conseils pour limiter la suppression des participants
Suppression par d&eacute;faut et comptes de d&eacute;pendance
L'utilisateur peut supprimer une instance qu'il a s&eacute;lectionn&eacute;e dans le panneau Comportements de serveur en cliquant
sur le bouton moins (-) ou en appuyant sur Suppr. Tous les participants sont &eacute;limin&eacute;s, hormis ceux qui sont partag&eacute;s
par d'autres comportements de serveur. En particulier, si plusieurs comportements de serveur ont un pointeur de
participant reli&eacute; au m&ecirc;me nœud, le nœud n'est pas supprim&eacute;.
Par d&eacute;faut, vous supprimez les participants en &eacute;liminant une balise enti&egrave;re. Si l'emplacement d'insertion correspond &agrave;
&quot;wrapSelection&quot;, seule la balise ext&eacute;rieure est supprim&eacute;e. La d&eacute;claration d'attribut dans son ensemble est supprim&eacute;e.
L'exemple suivant suppose un participant sur l'attribut ACTION d'une balise form :
&lt;form action=&quot;&lt;% my_participant %&gt;&quot;&gt;
Apr&egrave;s suppression de l'attribut, seul form demeure.
Utilisation de conseils pour limiter la suppression des participants
Pour limiter le mode de s&eacute;lection des participants, ajoutez une balise delete au fichier EDML. L'exemple suivant
montre un participant correspondant &agrave; l'attribut href d'un lien :
Derni&egrave;re mise &agrave; jour le 22/6/2011
301
EXTENSION DE DREAMWEAVER
Comportements de serveur
&lt;a href=&quot;&lt;%=MY_URL%&gt;&quot;&gt;Link Text&lt;/a&gt;
Lorsque ce participant d'attribut est supprim&eacute;, la balise devient &lt;a&gt;Link Text&lt;/a&gt;, qui n'appara&icirc;t plus sous forme de
lien dans Dreamweaver. Il est pr&eacute;f&eacute;rable de ne supprimer que la valeur d'attribut. La suppression s'effectue en ajoutant
la balise suivante au fichier EDML du participant :
&lt;delete deleteType=&quot;innerOnly&quot;/&gt;
Une autre approche consiste &agrave; supprimer la balise enti&egrave;re en tapant &lt;delete deleteType=&quot;tagOnly&quot;/&gt; pour
supprimer l'attribut. Le texte r&eacute;sultant est Link Text.
Fichiers JavaScript externes Share-in-memory
Si plusieurs fichiers HTML font r&eacute;f&eacute;rence &agrave; un fichier JavaScript particulier, Dreamweaver charge JavaScript dans un
emplacement central &agrave; partir duquel les fichiers HTML peuvent partager la m&ecirc;me source JavaScript. Ces fichiers
contiennent la directive suivante :
//SHARE-IN-MEMORY=true
Si un fichier JavaScript contient la directive SHARE-IN-MEMORY et qu'un fichier HTML y fait r&eacute;f&eacute;rence (&agrave; l'aide de la
balise SCRIPT avec l'attribut SRC), Dreamweaver le charge dans un emplacement centralis&eacute; afin que le code soit, par la
suite, implicitement inclus dans tous les fichiers HTML.
Remarque : Les fichiers JavaScript charg&eacute;s &agrave; cet emplacement centralis&eacute; partageant la m&eacute;moire, ils ne peuvent dupliquer
aucune d&eacute;claration. Un conflit de noms risque de se produire s'il y a d&eacute;finition simultan&eacute;e d'une m&ecirc;me variable ou
fonction &agrave; la fois dans votre fichier charg&eacute; dans la m&eacute;moire commune et dans un autre fichier JavaScript. Par cons&eacute;quent,
prenez en compte ces fichiers et leur convention d'attribution de nom lorsque vous r&eacute;digez des fichiers JavaScript.
Derni&egrave;re mise &agrave; jour le 22/6/2011
302
Chapitre 18 : Sources de donn&eacute;es
Les fichiers de source de donn&eacute;es sont stock&eacute;s dans le dossier Configuration/DataSources/nom_mod&egrave;le_serveur.
Dreamweaver prend actuellement en charge les mod&egrave;les de serveurs suivants : ASP.NET/C#, ASP.NET/VisualBasic,
ASP/JavaScript, ASP/VBScript, Adobe ColdFusion, JSP et PHP/MySQL. Le sous-dossier de chaque mod&egrave;le contient
des fichiers HTML et EDML associ&eacute;s aux sources de donn&eacute;es de ce mod&egrave;le de serveur.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er une source de donn&eacute;es.
Chemin
Fichier
Description
Configuration/DataSources/Nom_mod&egrave;le_serveur
Nom_source_donn&eacute;es.htm
Indique le nom de la source de donn&eacute;es et
l'emplacement o&ugrave; r&eacute;sident les fichiers
JavaScript de prise en charge.
Configuration/DataSources/Nom_mod&egrave;le_serveur
Nom_source_donn&eacute;es.edml
D&eacute;finit le code ins&eacute;r&eacute; par Dreamweaver
dans le document pour d&eacute;signer la valeur
de la source de donn&eacute;es.
Configuration/DataSources/Nom_mod&egrave;le_serveur
Nom_source_donn&eacute;es.js
Contient les fonctions JavaScript requises
pour ajouter, ins&eacute;rer et supprimer le code
appropri&eacute; dans un document.
Fonctionnement des sources de donn&eacute;es
Dans Dreamweaver, l'ajout de donn&eacute;es dynamiques se fait &agrave; partir du panneau Liaisons. Les objets de donn&eacute;es
dynamiques affich&eacute;s dans le menu Plus (+) sont bas&eacute;s sur le mod&egrave;le de serveur sp&eacute;cifi&eacute; pour la page. Par exemple, les
utilisateurs peuvent ins&eacute;rer des jeux d'enregistrements, des commandes, des variables de demande, des variables de
session et des variables d'application pour les applications ASP. Pour plus d'informations, voir la fonction
dreamweaver.dbi.getDataSources() dans le Guide des API de Dreamweaver.
Les &eacute;tapes suivantes d&eacute;crivent les processus mis en jeu lors de l'ajout de donn&eacute;es dynamiques :
1 Lorsque vous cliquez sur le menu Plus (+) du panneau Liaisons, un menu d&eacute;roulant s'affiche.
Pour d&eacute;terminer le contenu du menu, Dreamweaver commence par rechercher un fichier DataSources.xml dans le
m&ecirc;me dossier que les sources de donn&eacute;es (Configuration/DataSources/ASP_Js/DataSources.xml, par exemple). Le
fichier DataSources.xml d&eacute;crit le contenu du menu d&eacute;roulant ; il contient les r&eacute;f&eacute;rences des fichiers HTML devant
figurer dans le menu d&eacute;roulant.
Dreamweaver recherche une balise de titre dans chaque fichier HTML r&eacute;f&eacute;renc&eacute;. Si le fichier contient une balise de
titre, le contenu de celle-ci est affich&eacute; dans le menu. Si le fichier ne contient pas de balise de titre, c'est le nom du
fichier qui appara&icirc;t dans le menu.
Lorsque Dreamweaver a termin&eacute; la lecture du fichier DataSources.xml, il recherche, dans le reste du dossier,
d'autres &eacute;l&eacute;ments qui devraient figurer dans le menu. Il fait de m&ecirc;me si le fichier DataSources.xml n'existe pas. S'il
s'av&egrave;re que le dossier principal contient des fichiers qui ne figurent pas dans le menu, Dreamweaver les y ajoute. Si
des sous-dossiers contiennent des fichiers qui ne figurent pas dans le menu, Dreamweaver cr&eacute;e un sous-menu et les
y ajoute.
2 Lorsque l'utilisateur s&eacute;lectionne un &eacute;l&eacute;ment dans le menu Plus (+), Dreamweaver appelle la fonction
addDynamicSource(). La source des donn&eacute;es est ainsi ajout&eacute;e au document de l'utilisateur.
Derni&egrave;re mise &agrave; jour le 22/6/2011
303
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
3 Dreamweaver passe en revue tous les fichiers du dossier sp&eacute;cifique au mod&egrave;le de serveur utilis&eacute;, en appelant la
fonction findDynamicSources() dans chaque fichier. Pour chaque valeur du tableau retourn&eacute;, Dreamweaver
appelle la fonction generateDynamicSourceBindings() dans le m&ecirc;me fichier. Ce faisant, il obtient une nouvelle
liste de tous les champs de chaque source de donn&eacute;es pour le document de l'utilisateur. Ces champs sont pr&eacute;sent&eacute;s
&agrave; l'utilisateur sous la forme d'une commande d'arborescence dans la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou
Texte dynamique, ou encore dans le panneau Liaisons. L'arborescence des sources de donn&eacute;es d'un document ASP
peut se pr&eacute;senter comme dans l'exemple suivant :
Recordset (Recordset1)
ColumnOneInRecordset
ColumnTwoInRecordset
Recordset (Recordset2)
ColumnOfRecordset
Request
NameOfRequestVariable
NameOfAnotherRequestVariable
Session
NameOfSessionVariable
4 Si l'utilisateur double-clique sur le nom d'une source de donn&eacute;es dans le panneau Liaisons, Dreamweaver appelle
la fonction editDynamicSource() de fa&ccedil;on &agrave; traiter les modifications dans l'arborescence.
5 Si l'utilisateur clique sur le bouton Moins (-), Dreamweaver obtient la s&eacute;lection de nœud actuel depuis
l'arborescence et la transf&egrave;re &agrave; la fonction deleteDynamicSource(). Cette fonction supprime le code ajout&eacute;
auparavant &agrave; l'aide de la fonction addDynamicSource(). S'il n'est pas possible de supprimer la s&eacute;lection en cours,
la fonction renvoie un message d'erreur. Apr&egrave;s le retour de la fonction deleteDynamicSource(), Dreamweaver
actualise l'arborescence des sources de donn&eacute;es en appelant les fonctions findDynamicSources() et
generateDynamicSourceBindings().
6 Si l'utilisateur s&eacute;lectionne une source de donn&eacute;es puis clique sur OK dans la bo&icirc;te de dialogue Donn&eacute;es dynamiques
ou Texte dynamique, Dreamweaver appelle la fonction generateDynamicDataRef(). Il fait de m&ecirc;me lorsque
l'utilisateur clique sur Ins&eacute;rer ou Lier dans le panneau Liaisons. La valeur retourn&eacute;e est ins&eacute;r&eacute;e dans le document
au niveau du point d'insertion.
7 Si l'utilisateur modifie un objet de donn&eacute;es dynamiques &agrave; l'aide de la bo&icirc;te de dialogue Donn&eacute;es dynamiques, la
s&eacute;lection dans l'arborescence de source de donn&eacute;es doit &ecirc;tre initialis&eacute;e en fonction de l'objet. Il en va de m&ecirc;me si
l'utilisateur modifie un objet de donn&eacute;es dynamiques &agrave; l'aide de la bo&icirc;te de dialogue Texte dynamique. Pour
initialiser le contr&ocirc;le d'arborescence, Dreamweaver examine chaque fichier dans le dossier de mod&egrave;le de serveur
appropri&eacute;, par exemple Configuration/DataSources/ASP_Js. Dreamweaver analyse chaque fichier en appelant
l'impl&eacute;mentation de la fonction inspectDynamicDataRef().
Dreamweaver appelle la fonction inspectDynamicDataRef() pour que l'objet de donn&eacute;es dynamiques soit
reconverti, &agrave; partir du code du document de l'utilisateur, en un &eacute;l&eacute;ment de l'arborescence (cette proc&eacute;dure est en
fait invers&eacute;e par rapport &agrave; celle produite lorsque la fonction generateDynamicDataRef() est appel&eacute;e). Si la
fonction inspectDynamicDataRef() renvoie un tableau contenant deux &eacute;l&eacute;ments, Dreamweaver fournit des
rep&egrave;res visuels pour l'&eacute;l&eacute;ment d'arborescence li&eacute; &agrave; la s&eacute;lection actuelle.
8 A chaque fois que l'utilisateur modifie la s&eacute;lection, Dreamweaver appelle la fonction inspectDynamicDataRef().
Dreamweaver tente ainsi de d&eacute;terminer si la nouvelle s&eacute;lection est un texte dynamique ou une balise avec un
attribut dynamique. S'il s'agit de texte dynamique, Dreamweaver affiche les liaisons de la s&eacute;lection en cours dans le
panneau Liaisons.
Derni&egrave;re mise &agrave; jour le 22/6/2011
304
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
9 Il est possible de modifier le format de donn&eacute;es d'un objet de texte dynamique ou d'un attribut dynamique que
l'utilisateur a d&eacute;j&agrave; ajout&eacute; &agrave; la page. Pour ce faire, utilisez la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou Texte
dynamique, ou le panneau Liaisons. Lorsque le format change, Dreamweaver appelle la fonction
generateDynamicDataRef() afin d'obtenir la cha&icirc;ne &agrave; ins&eacute;rer dans le document de l'utilisateur. Il transf&egrave;re
ensuite cette cha&icirc;ne &agrave; la fonction formatDynamicDataRef() (voir &laquo; formatDynamicDataRef() &raquo; &agrave; la page 320). La
cha&icirc;ne renvoy&eacute;e par la fonction formatDynamicDataRef() est ins&eacute;r&eacute;e dans le document de l'utilisateur.
Exemple simple de source de donn&eacute;es
Cette extension ajoute une source de donn&eacute;es personnalis&eacute;e au panneau Liaisons pour les documents Adobe
ColdFusion. Les utilisateurs peuvent sp&eacute;cifier la variable de leur choix pour la source de donn&eacute;es.
Cet exemple permet de cr&eacute;er une source de donn&eacute;es intitul&eacute;e MyDatasource. Cette source de donn&eacute;es comprend un
fichier JavaScript MyDatasource.js, un fichier MyDatasource_DataRef.edml et les fichiers de commandes
MyDatasource_Variable requis pour g&eacute;n&eacute;rer une bo&icirc;te de dialogue dans laquelle les utilisateurs entrent le nom d'une
variable sp&eacute;cifique. L'exemple MyDatasource est bas&eacute; sur l'impl&eacute;mentation des sources de donn&eacute;es Cookie Variable et
URL Variable. Les fichiers associ&eacute;s &agrave; ces sources de donn&eacute;es r&eacute;sident dans le dossier
Configuration/DataSources/ColdFusion.
Pour cr&eacute;er cette source de donn&eacute;es, cr&eacute;ez un fichier de d&eacute;finition, un fichier EDML, un fichier JavaScript et les fichiers
de commande de prise en charge, puis testez la nouvelle source de donn&eacute;es.
Cr&eacute;ation du fichier de d&eacute;finition de source de donn&eacute;es
Ce fichier indique &agrave; Dreamweaver le nom de la source de donn&eacute;es tel qu'il s'affichera dans le menu Plus (+) du panneau
Liaisons. Il indique &eacute;galement &agrave; Dreamweaver o&ugrave; se trouvent les fichiers JavaScript de prise en charge de
l'impl&eacute;mentation de sources de donn&eacute;es.
Lorsqu'un utilisateur clique sur le menu Plus (+) du panneau Liaisons, Dreamweaver effectue des recherches dans le
dossier DataSources associ&eacute; au mod&egrave;le de serveur actuel pour regrouper l'ensemble des sources de donn&eacute;es d&eacute;finies
dans les fichiers HTML (HTM) du dossier. Pour rendre une nouvelle source de donn&eacute;es accessible aux utilisateurs,
vous devez cr&eacute;er un fichier de d&eacute;finition de source de donn&eacute;es qui fournit le nom de la source de donn&eacute;es &agrave; l'aide de
la balise title et l'emplacement des fichiers JavaScript de prise en charge &agrave; l'aide de la balise script.
En outre, plusieurs fichiers de prise en charge sont n&eacute;cessaires pour l'impl&eacute;mentation de cette source de donn&eacute;es. En
g&eacute;n&eacute;ral, il n'est pas n&eacute;cessaire d'utiliser les fonctions de ces fichiers de prise en charge, mais ces derni&egrave;res se r&eacute;v&egrave;lent
souvent utiles (voire n&eacute;cessaires dans cet exemple). Par exemple, le fichier dwscriptsServer.js contient la fonction
dwscripts.stripCFOutputTags() utilis&eacute;e pour l'impl&eacute;mentation de cette source de donn&eacute;es. A l'aide du fichier
DataSourceClass.js, vous cr&eacute;ez une instance de la classe DataSource &agrave; utiliser comme valeur de retour pour la fonction
findDynamicSources().
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
305
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;MyDatasource&lt;/TITLE&gt;
&lt;SCRIPT SRC=&quot;../../Shared/Common/Scripts/dwscripts.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;SCRIPT SRC=&quot;../../Shared/Common/Scripts/dwscriptsServer.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;SCRIPT SRC=&quot;../../Shared/Common/Scripts/DataSourceClass.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;SCRIPT SRC=&quot;MyDatasource.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/HTML&gt;
3 Enregistrez le fichier sous le nom MyDatasource.htm dans le dossier Configuration/DataSources/ColdFusion.
Cr&eacute;ation du fichier EDML
Le fichier EDML d&eacute;finit le code ins&eacute;r&eacute; par Dreamweaver dans le document pour d&eacute;signer la valeur de la source de
donn&eacute;es. Pour plus d'informations sur les fichiers EDML, voir &laquo; Comportements de serveur &raquo; &agrave; la page 256. Lorsqu'un
utilisateur ajoute une valeur particuli&egrave;re &agrave; un document &agrave; partir d'une source de donn&eacute;es, Dreamweaver ins&egrave;re le code
qui sera converti dans la valeur r&eacute;elle lors de l'ex&eacute;cution. Le fichier EDML participant d&eacute;finit le code du document
(pour plus d'informations, voir &laquo; Fichiers EDML Participant &raquo; &agrave; la page 276).
Pour la variable MyDatasource, Dreamweaver doit ins&eacute;rer le code ColdFusion
&lt;cfoutput&gt;#MyXML.variable#&lt;/cfoutput&gt;, o&ugrave; variable est la valeur que l'utilisateur attend de la source de
donn&eacute;es.
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
&lt;participant&gt;
&lt;quickSearch&gt;&lt;![CDATA[#]]&gt;&lt;/quickSearch&gt;
&lt;insertText location=&quot;replaceSelection&quot;&gt;&lt;![CDATA[&lt;cfoutput&gt;#MyDatasource.
@@bindingName@@#&lt;/cfoutput&gt;]]&gt;&lt;/insertText&gt;
&lt;searchPatterns whereToSearch=&quot;tag+cfoutput&quot;&gt;
&lt;searchPattern paramNames=&quot;sourceName,bindingName&quot;&gt;&lt;![CDATA[/#(?:\s*\w+\s*\()?
(MyDatasource)\.(\w+)\b[^#]*#/i]]&gt;&lt;/searchPattern&gt;
&lt;/searchPatterns&gt;
&lt;/participant&gt;
3 Enregistrez le fichier sous le nom MyDatasource_DataRef.edml dans le dossier
Configuration/DataSources/ColdFusion.
Cr&eacute;ation du fichier JavaScript qui impl&eacute;mente les fonctions API de sources de
donn&eacute;es
Apr&egrave;s avoir d&eacute;fini le nom de la source de donn&eacute;es, le nom des fichiers de script de prise en charge et le code du
document de travail Dreamweaver, vous devez sp&eacute;cifier les fonctions JavaScript afin que Dreamweaver permette &agrave;
l'utilisateur d'ajouter, d'ins&eacute;rer et de supprimer le code n&eacute;cessaire dans un document.
En vous basant sur la construction de la source de donn&eacute;es Cookie Variable, vous pouvez mettre en œuvre la source
de donn&eacute;es MyXML, comme illustr&eacute; dans l'exemple ci-dessous. La commande MyDatasource_Variable utilis&eacute;e dans
la fonction addDynamicSource() est d&eacute;finie dans la section &laquo; Cr&eacute;ation des fichiers de commande de prise en charge
pour les entr&eacute;es utilisateur &raquo; &agrave; la page 308.
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
306
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
//************** GLOBALS VARS *****************
var MyDatasource_FILENAME = &quot;REQ_D.gif&quot;;
var DATASOURCELEAF_FILENAME = &quot;DSL_D.gif&quot;;
//****************** API **********************
function addDynamicSource()
{
MM.retVal = &quot;&quot;;
MM.MyDatasourceContents = &quot;&quot;;
dw.popupCommand(&quot;MyDatasource_Variable&quot;);
if (MM.retVal == &quot;OK&quot;)
{
var theResponse = MM.MyDatasourceContents;
if (theResponse.length)
{
var siteURL = dw.getSiteRoot();
if (siteURL.length)
{
dwscripts.addListValueToNote(siteURL, &quot;MyDatasource&quot;, theResponse);
}
else
{
alert(MM.MSG_DefineSite);
}
}
else
{
alert(MM.MSG_DefineMyDatasource);
}
}
}
function findDynamicSources()
{
var retList = new Array();
var siteURL = dw.getSiteRoot()
if (siteURL.length)
{
var bindingsArray = dwscripts.getListValuesFromNote(siteURL, &quot;MyDatasource&quot;);
if (bindingsArray.length &gt; 0)
{
// Here you create an instance of the DataSource class as defined in the
// DataSourceClass.js file to store the return values.
retList.push(new DataSource(&quot;MyDatasource&quot;,
MyDatasource_FILENAME,
false,
&quot;MyDatasource.htm&quot;))
}
}
return retList;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
307
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
function generateDynamicSourceBindings(sourceName)
{
var retVal = new Array();
var siteURL = dw.getSiteRoot();
// For localized object name...
if (sourceName != &quot;MyDatasource&quot;)
{
sourceName = &quot;MyDatasource&quot;;
}
if (siteURL.length)
{
var bindingsArray = dwscripts.getListValuesFromNote(siteURL, sourceName);
retVal = getDataSourceBindingList(bindingsArray,
DATASOURCELEAF_FILENAME,
true,
&quot;MyDatasource.htm&quot;);
}
return retVal;
}
function generateDynamicDataRef(sourceName, bindingName, dropObject)
{
var paramObj = new Object();
paramObj.bindingName = bindingName;
var retStr = extPart.getInsertString(&quot;&quot;, &quot;MyDatasource_DataRef&quot;, paramObj);
// We need to strip the cfoutput tags if we are inserting into a CFOUTPUT tag
// or binding to the attributes of a ColdFusion tag. So, we use the
// dwscripts.canStripCfOutputTags() function from dwscriptsServer.js
if (dwscripts.canStripCfOutputTags(dropObject, true))
{
retStr = dwscripts.stripCFOutputTags(retStr, true);
}
return retStr;
}
function inspectDynamicDataRef(expression)
{
var retArray = new Array();
if(expression.length)
{
var params = extPart.findInString(&quot;MyDatasource_DataRef&quot;, expression);
if (params)
{
retArray[0] = params.sourceName;
retArray[1] = params.bindingName;
Derni&egrave;re mise &agrave; jour le 22/6/2011
308
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
}
}
return retArray;
}
function deleteDynamicSource(sourceName, bindingName)
{
var siteURL = dw.getSiteRoot();
if (siteURL.length)
{
//For localized object name
if (sourceName != &quot;MyDatasource&quot;)
{
sourceName = &quot;MyDatasource&quot;;
}
dwscripts.deleteListValueFromNote(siteURL, sourceName, bindingName);
}
}
3 Enregistrez le fichier sous le nom MyDatasource.js dans le dossier Configuration/DataSources/ColdFusion.
Cr&eacute;ation des fichiers de commande de prise en charge pour les entr&eacute;es
utilisateur
La fonction addDynamicSource() contient la commande dw.popupCommand(&quot;MyDatasource_Variable&quot;), qui
ouvre une bo&icirc;te de dialogue dans laquelle l'utilisateur entre un nom sp&eacute;cifique de variable. Vous devez cependant cr&eacute;er
la bo&icirc;te de dialogue pour la variable MyDatasource.
Pour fournir une bo&icirc;te de dialogue pour l'utilisateur, cr&eacute;ez un nouveau jeu de fichiers de commandes : un fichier de
d&eacute;finition de commandes en HTML et un en JavaScript (pour plus d'informations sur les fichiers de commandes, voir
&laquo; Fonctionnement des commandes &raquo; &agrave; la page 137).
Le fichier de d&eacute;finition de commande indique &agrave; Dreamweaver l'emplacement des fichiers JavaScript de prise en charge
du d&eacute;ploiement. Le fichier de d&eacute;finition indique &eacute;galement le formulaire de la bo&icirc;te de dialogue que l'utilisateur voit.
Le fichier JavaScript de prise en charge d&eacute;termine les boutons de la bo&icirc;te de dialogue et indique comment affecter les
donn&eacute;es saisies par l'utilisateur &agrave; partir de la bo&icirc;te de dialogue.
Cr&eacute;ation du fichier de d&eacute;finition de commande
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
309
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
&lt;!DOCTYPE HTML SYSTEM &quot;-//Adobe//DWExtension layout-engine 10.0//dialog&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;MyDatasource Variable&lt;/title&gt;
&lt;script src=&quot;MyDatasource_Variable.js&quot;&gt;&lt;/script&gt;
&lt;SCRIPT SRC=&quot;../Shared/MM/Scripts/CMN/displayHelp.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;SCRIPT SRC=&quot;../Shared/MM/Scripts/CMN/string.js&quot;&gt;&lt;/SCRIPT&gt;
&lt;link href=&quot;../fields.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;div ALIGN=&quot;center&quot;&gt;
&lt;table border=&quot;0&quot; cellpadding=&quot;2&quot; cellspacing=&quot;4&quot;&gt;
&lt;tr&gt;
&lt;td align=&quot;right&quot; valign=&quot;baseline&quot; nowrap&gt;Name:&lt;/td&gt;
&lt;td valign=&quot;baseline&quot; nowrap&gt;
&lt;input name=&quot;theName&quot; type=&quot;text&quot; class=&quot;medTField&quot;&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier dans le dossier Configuration/Commands sous le nom MyDatasource_Variable.htm.
Remarque : Le fichier MyDatasource_Variable.js correspond au fichier de mise en œuvre cr&eacute;&eacute; dans le cadre de la
proc&eacute;dure suivante.
Cr&eacute;ation du fichier JavaScript de prise en charge
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
//******************* API **********************
function commandButtons(){
return new Array(MM.BTN_OK,&quot;okClicked()&quot;,MM.BTN_Cancel,&quot;window.close()&quot;);
}
//***************** LOCAL FUNCTIONS******************
function okClicked(){
var nameObj = document.forms[0].theName;
if (nameObj.value) {
if (IsValidVarName(nameObj.value)) {
MM.MyDatasourceContents = nameObj.value;
MM.retVal = &quot;OK&quot;;
window.close();
} else {
alert(nameObj.value + &quot; &quot; + MM.MSG_InvalidParamName);
}
} else {
alert(MM.MSG_NoName);
}
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
310
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
3 Enregistrez le fichier dans le dossier Configuration/Commands sous le nom MyDatasource_Variable.js.
Test de la nouvelle source de donn&eacute;es
Vous pouvez maintenant ouvrir Dreamweaver (ou le red&eacute;marrer s'il est d&eacute;j&agrave; utilis&eacute;) et ouvrir un fichier ColdFusion
ou en cr&eacute;er un nouveau.
1 Placez le pointeur sur le document, cliquez sur le menu Plus (+) du panneau Liaisons pour afficher l'ensemble des
sources de donn&eacute;es disponibles. MyDatasource doit s'afficher en fin de liste.
2 Cliquez sur l'option de source de donn&eacute;es MyDatasource pour afficher la bo&icirc;te de dialogue MyDatasource_Variable
que vous avez cr&eacute;&eacute;e :
3 Saisissez une valeur dans la bo&icirc;te de dialogue, puis appuyez sur OK.
Le panneau Liaisons affiche la source de donn&eacute;es dans une arborescence comprenant la variable de la bo&icirc;te de
dialogue sous le nom de la source de donn&eacute;es :
4 Faites glisser la variable dans votre document ; Dreamweaver se charge d'ins&eacute;rer le code appropri&eacute; &agrave; partir du fichier
EDML :
Derni&egrave;re mise &agrave; jour le 22/6/2011
311
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
Fonctions de l'API des sources de donn&eacute;es
Les fonctions de l'API de sources de donn&eacute;es vous permettent de trouver, ajouter, modifier et supprimer des sources
de donn&eacute;es ainsi que de g&eacute;n&eacute;rer et inspecter des objets de donn&eacute;es dynamiques.
addDynamicSource()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction ajoute une source de donn&eacute;es dynamiques. Comme cette fonction est impl&eacute;ment&eacute;e dans chaque fichier
de source de donn&eacute;es, Dreamweaver appelle l'impl&eacute;mentation appropri&eacute;e de la fonction addDynamicSource() d&egrave;s
qu'une source de donn&eacute;es est s&eacute;lectionn&eacute;e dans le menu Plus (+).
Par exemple, pour les jeux d'enregistrements ou les commandes, Dreamweaver appelle la fonction
dw.serverBehaviorInspector.popupServerBehavior(), qui ins&egrave;re un nouveau comportement de serveur dans
le document. Pour les variables de demande, de session et d'application, Dreamweaver affiche une bo&icirc;te de dialogue
HTML/JavaScript permettant de recueillir le nom de la variable ; le comportement stocke ce nom en vue d'une
utilisation ult&eacute;rieure.
Une fois la fonction addDynamicSource() renvoy&eacute;e, Dreamweaver efface le contenu de l'arborescence de la source de
donn&eacute;es et appelle les fonctions findDynamicSources() et generateDynamicSourceBindings() pour remplir de
nouveau l'arborescence.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
deleteDynamicSource()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Dreamweaver appelle cette fonction lorsqu'un utilisateur s&eacute;lectionne une source de donn&eacute;es dans l'arborescence avant
de cliquer sur le bouton Moins (-).
Par exemple, dans Dreamweaver, si un jeu d'enregistrements ou une commande sont s&eacute;lectionn&eacute;s, la fonction
deleteDynamicSource() appelle la fonction dw.serverBehaviorInspector.deleteServerBehavior(). Si la
s&eacute;lection est une variable de requ&ecirc;te, de session ou d'application, la fonction se souvient que la variable a &eacute;t&eacute; supprim&eacute;e
et ne l'affiche plus. Une fois la fonction deleteDynamicSource() renvoy&eacute;e, Dreamweaver efface le contenu de
l'arborescence des sources de donn&eacute;es et appelle les fonctions findDynamicSources() et
generateDynamicSourceBindings() pour obtenir une nouvelle liste de toutes les sources de donn&eacute;es associ&eacute;es au
document de l'utilisateur.
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau sup&eacute;rieur auquel le nœud enfant est associ&eacute;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
312
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
• L'argument bindingName est le nom du nœud enfant.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
displayHelp()
Description
Si cette fonction est d&eacute;finie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la bo&icirc;te de dialogue. Cette
fonction est appel&eacute;e lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
// The following instance of displayHelp() opens
// a file (in a browser) that explains how to use
// the extension.
function displayHelp(){
var myHelpFile = dw.getConfigurationPath() +
'/ExtensionsHelp/superDuperHelp.htm';
dw.browseDocument(myHelpFile);
}
editDynamicSource()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction est appel&eacute;e lorsque l'utilisateur clique deux fois sur le nom d'une source de donn&eacute;es dans le panneau
Liaisons pour la modifier. Impl&eacute;menter cette fonction vous permet de traiter les modifications utilisateur au sein de
l'arborescence. Sinon, le comportement de serveur correspondant &agrave; la source de donn&eacute;es est automatiquement appel&eacute;.
Le d&eacute;veloppeur d'extensions peut utiliser cette fonction pour remplacer l'impl&eacute;mentation par d&eacute;faut des
comportements de serveur et cr&eacute;er un gestionnaire personnalis&eacute;.
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau sup&eacute;rieur auquel le nœud enfant est associ&eacute;.
• L'argument bindingName est le nom du nœud enfant.
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne : true si la fonction a trait&eacute; la modification et false dans le cas contraire.
Derni&egrave;re mise &agrave; jour le 22/6/2011
313
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
findDynamicSources()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction renvoie les nœuds de niveau sup&eacute;rieur de l'arborescence des sources de donn&eacute;es qui s'affichent dans la
bo&icirc;te de dialogue Donn&eacute;es dynamiques ou Texte dynamique, ou encore dans le panneau Liaisons. La fonction
findDynamicSources() est impl&eacute;ment&eacute;e dans chaque fichier de source de donn&eacute;es. En actualisant l'arborescence,
Dreamweaver parcourt tous les fichiers du dossier DataSources et appelle la fonction findDynamicSources() dans
chacun d'eux.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets JavaScript dans lequel chaque objet peut comporter cinq propri&eacute;t&eacute;s, d&eacute;crites
dans la liste suivante :
• La propri&eacute;t&eacute; title correspond au libell&eacute; qui appara&icirc;t &agrave; droite de l'ic&ocirc;ne de chaque nœud parent. La propri&eacute;t&eacute;
title est toujours obligatoire.
• La propri&eacute;t&eacute; imageFile est le chemin d'un fichier contenant une ic&ocirc;ne (image GIF) repr&eacute;sentant le nœud parent
dans la commande d'arborescence affich&eacute;e dans la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou Texte dynamique, ou
encore dans le panneau Liaisons. Cette propri&eacute;t&eacute; est obligatoire.
• La propri&eacute;t&eacute; allowDelete est facultative. Si cette propri&eacute;t&eacute; est r&eacute;gl&eacute;e sur false, lorsque l'utilisateur clique sur ce
nœud dans le panneau Liaisons, le bouton Moins (-) est d&eacute;sactiv&eacute;. Si elle est r&eacute;gl&eacute;e sur true, le bouton Moins (-)
est activ&eacute;. Si la propri&eacute;t&eacute; n'est pas d&eacute;finie, elle prend par d&eacute;faut la valeur true.
• La propri&eacute;t&eacute; dataSource est le nom du fichier dans lequel la fonction findDynamicSources() est d&eacute;finie. Par
exemple, la fonction findDynamicSources() dans le fichier Session.htm, situ&eacute; dans le dossier
Configuration/DataSources/ASP_Js, d&eacute;finit la propri&eacute;t&eacute; dataSource sur session.htm. Cette propri&eacute;t&eacute; est
obligatoire.
• La propri&eacute;t&eacute; name est le nom du comportement de serveur associ&eacute; &agrave; la source de donn&eacute;es, s'il existe. Certaines
sources de donn&eacute;es, telles que des jeux d'enregistrements, sont associ&eacute;es &agrave; des comportements de serveur. Lorsque
vous cr&eacute;ez un jeu d'enregistrements et que vous lui attribuez le nom rsAuthors, l'attribut name doit avoir pour
valeur rsAuthors. La propri&eacute;t&eacute; name est toujours d&eacute;finie, mais il peut s'agir d'une cha&icirc;ne vide (&quot;&quot;) si aucun
comportement de serveur n'est associ&eacute; &agrave; la source de donn&eacute;es (tel qu'une variable de session).
Remarque : Une classe JavaScript d&eacute;finissant ces propri&eacute;t&eacute;s existe dans le fichier DataSourceClass.js. Ce dernier se trouve
dans le dossier Configuration/Shared/Common/Scripts.
generateDynamicDataRef()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction g&eacute;n&egrave;re l'objet de donn&eacute;es dynamiques pour un nœud enfant.
Derni&egrave;re mise &agrave; jour le 22/6/2011
314
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau sup&eacute;rieur associ&eacute; au nœud enfant.
• L'argument bindingName est le nom du nœud enfant &agrave; partir duquel vous souhaitez g&eacute;n&eacute;rer un objet de donn&eacute;es
dynamiques.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne qui peut &ecirc;tre transmise pour formatage &agrave; la fonction formatDynamicDataRef()
avant d'&ecirc;tre ins&eacute;r&eacute;e dans le document d'un utilisateur.
generateDynamicSourceBindings()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction renvoie le nœud enfant d'un nœud de niveau sup&eacute;rieur.
Arguments
sourceName
• L'argument sourceName est le nom du nœud de niveau sup&eacute;rieur dont vous voulez renvoyer les nœuds enfants.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets JavaScript dans lequel chaque objet peut comporter quatre propri&eacute;t&eacute;s,
d&eacute;crites dans la liste suivante :
• La propri&eacute;t&eacute; title correspond &agrave; l'&eacute;tiquette qui appara&icirc;t &agrave; droite de l'ic&ocirc;ne de chaque nœud parent. Cette propri&eacute;t&eacute;
est obligatoire.
• La propri&eacute;t&eacute; allowDelete est facultative. Si cette propri&eacute;t&eacute; est r&eacute;gl&eacute;e sur la valeur false, lorsque l'utilisateur clique
sur ce nœud dans le panneau Liaisons, le bouton Moins (-) appara&icirc;t d&eacute;sactiv&eacute;. Si elle est r&eacute;gl&eacute;e sur la valeur true,
le bouton Moins (-) est activ&eacute;. Si la propri&eacute;t&eacute; n'est pas d&eacute;finie, elle prend par d&eacute;faut la valeur true.
• La propri&eacute;t&eacute; dataSource est le nom du fichier dans lequel la fonction findDynamicSources() est d&eacute;finie. Par
exemple, la fonction findDynamicSources() dans le fichier Session.htm, situ&eacute; dans le dossier
Configuration/DataSources/ASP_Js, d&eacute;finit la propri&eacute;t&eacute; dataSource sur session.htm. Cette propri&eacute;t&eacute; est
obligatoire.
• La propri&eacute;t&eacute; name est le nom du comportement de serveur associ&eacute; &agrave; la source de donn&eacute;es, s'il existe. Cette propri&eacute;t&eacute;
est obligatoire. Certaines sources de donn&eacute;es, telles que des jeux d'enregistrements, sont associ&eacute;es &agrave; des
comportements de serveur. Lorsque vous cr&eacute;ez un jeu d'enregistrements et que vous lui attribuez le nom
rsAuthors, la propri&eacute;t&eacute; name doit avoir pour valeur rsAuthors. D'autres sources de donn&eacute;es, telles que les
variables de session, ne sont pas associ&eacute;es &agrave; un comportement de serveur. Leur propri&eacute;t&eacute; name doit correspondre
&agrave; une cha&icirc;ne vide (&quot;&quot;).
Remarque : Une classe JavaScript d&eacute;finissant ces propri&eacute;t&eacute;s existe dans le fichier DataSourceClass.js. Ce dernier se trouve
dans le dossier Configuration/Shared/Common/Scripts.
Derni&egrave;re mise &agrave; jour le 22/6/2011
315
EXTENSION DE DREAMWEAVER
Sources de donn&eacute;es
inspectDynamicDataRef()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction d&eacute;termine le nœud correspondant dans l'arborescence de sources de donn&eacute;es depuis un objet de
donn&eacute;es dynamiques. La fonction inspectDynamicDataRef() extrait la cha&icirc;ne transmise par Dreamweaver et la
compare &agrave; celle renvoy&eacute;e par generateDynamicDataRef() pour chaque nœud de l'arborescence. En cas de
correspondance, la fonction inspectDynamicDataRef() indique quel nœud de l'arborescence correspond &agrave; la cha&icirc;ne
transmise. La fonction identifie le nœud au moyen d'un tableau contenant deux &eacute;l&eacute;ments. Le premier &eacute;l&eacute;ment est le
nom du nœud parent et le second celui du nœud enfant. Si aucune correspondance n'est trouv&eacute;e, la fonction
inspectDynamicDataRef() renvoie un tableau vide.
Chaque impl&eacute;mentation de la fonction inspectDynamicDataRef() ne recherche que les correspondances de son
propre type d'objet. Par exemple, l'impl&eacute;mentation de la fonction inspectDynamicDataRef() pour les jeux
d'enregistrements ne trouve une correspondance que si la cha&icirc;ne transmise correspond &agrave; un nœud de jeu
d'enregistrements dans l'arborescence.
Arguments
string
• L'argument string est l'objet de donn&eacute;es dynamiques.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau de deux &eacute;l&eacute;ments (nom du parent et nom de l'enfant) pour le nœud correspondant ;
il renvoie la valeur null en l'absence de correspondance.
Derni&egrave;re mise &agrave; jour le 22/6/2011
316
Chapitre 19 : Formats de serveur
La section &laquo; Sources de donn&eacute;es &raquo; &agrave; la page 302 explique comment Adobe Dreamweaver ins&egrave;re des donn&eacute;es
dynamiques dans le document de l'utilisateur en ajoutant une expression de serveur &agrave; l'endroit appropri&eacute;. Lorsqu'un
visiteur demande le document de l'utilisateur &agrave; partir du serveur Web, l'expression est convertie en une valeur de base
de donn&eacute;es, en contenu d'une variable de requ&ecirc;te ou en toute autre valeur dynamique. Les formats de serveur de
Dreamweaver permettent de formater la valeur dynamique pour la pr&eacute;senter au visiteur.
Fonctionnement du formatage de donn&eacute;es
Les utilisateurs de Dreamweaver peuvent mettre leurs donn&eacute;es en forme &agrave; l'aide de formats pr&eacute;d&eacute;finis. Ils peuvent
aussi cr&eacute;er des formats &agrave; partir de types pr&eacute;d&eacute;finis ou de types qu'ils ont cr&eacute;&eacute;s eux-m&ecirc;mes.
L'utilisateur peut formater les donn&eacute;es dynamiques de plusieurs fa&ccedil;ons. Pour formater les donn&eacute;es avant de les ins&eacute;rer
dans un document HTML, utilisez le menu Format. Il se trouve dans la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou
Texte dynamique, ou dans le panneau Liaisons. Pour cr&eacute;er un format, choisissez la commande Modifier la liste de
formats dans le menu Format, puis choisissez un type de format dans le menu Plus (+). Le menu Plus (+) contient une
liste de types de format. Les types de format sont des cat&eacute;gories de format de base (Devise, Date/Heure, Casse, etc.). Ils
regroupent tous les param&egrave;tres communs &agrave; une cat&eacute;gorie et facilitent la cr&eacute;ation de formats.
Vous pouvez par exemple les utiliser pour cr&eacute;er un format de devise. Le formatage des devises consiste &agrave; convertir un
nombre en une cha&icirc;ne et &agrave; ins&eacute;rer des virgules et un symbole de devise (le signe du dollar, $, par exemple). Le type de
donn&eacute;es de format Devise regroupe tous les param&egrave;tres communs et vous demande une valeur pour chacun d'eux.
La rubrique API de format de serveur &eacute;tudie l'API qui formate les donn&eacute;es dynamiques que renvoient les fonctions
d&eacute;crites dans la section &laquo; Sources de donn&eacute;es &raquo; &agrave; la page 302. Les donn&eacute;es dynamiques sont format&eacute;es &agrave; l'aide d'une
combinaison des fonctions d&eacute;crites dans les deux rubriques.
Tous les fichiers de format r&eacute;sident dans le dossier Configuration/ServerFormats/Mod&egrave;le_serveur_actuel. Chaque
sous-dossier contient un fichier XML et plusieurs fichiers HTML.
Le fichier Formats.xml d&eacute;crit tous les choix du menu Format. Dreamweaver ajoute automatiquement les options
Modifier la liste de formats et Aucun.
Le dossier contient &eacute;galement un fichier HTML pour chaque type de format install&eacute;, dont Casse d'alphabet,
Devise, Date/Heure, Math, Nombre, Pourcentage, Simple et Rogner.
Remarque : Le format Devise n'est pas disponible pour les mod&egrave;les de serveur PHP.
Fichier Formats.xml
Le fichier Formats.xml contient une balise format pour chaque &eacute;l&eacute;ment du menu Format. Chaque balise format
contient les attributs obligatoires suivants :
• L'attribut file=fileName repr&eacute;sente le fichier HTML du type de format concern&eacute;, tel que &laquo;
• L'attribut title=string repr&eacute;sente la cha&icirc;ne qui appara&icirc;t dans le menu Format, telle que &laquo;
d&eacute;faut &raquo;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
Devise &raquo;.
Devise- valeur par
317
EXTENSION DE DREAMWEAVER
Formats de serveur
• L'attribut expression=regexp repr&eacute;sente une expression r&eacute;guli&egrave;re correspondant aux objets de donn&eacute;es
dynamiques qui utilisent ce format. L'expression d&eacute;termine le format actuellement appliqu&eacute; &agrave; l'objet de donn&eacute;es
dynamiques. Par exemple, l'expression correspondant au format &laquo; Devise - valeur par d&eacute;faut &raquo; serait
&quot;&lt;%\s*=\s*FormatCurrency\(.*, -1, -2, -2,-2\)\s*%&gt;|&lt;%\s*=\s*DoCurrency\(.*, -1, -2, -2, 2\)\s*%&gt;&quot;. La valeur de l'attribut expression doit &ecirc;tre unique parmi toutes les balises format du fichier. Elle doit
&ecirc;tre suffisamment pr&eacute;cise pour garantir que seules les instances de ce format correspondent &agrave; l'expression.
• L'attribut visibility=[hidden
| visible] indique si la valeur est affich&eacute;e dans le menu Format. Si la valeur de
l'attribut visibility est hidden (masqu&eacute;), le format ne s'affiche pas dans le menu Format.
La balise format peut &eacute;ventuellement contenir des attributs suppl&eacute;mentaires ayant un nom arbitraire.
Certaines fonctions de formatage de donn&eacute;es n&eacute;cessitent un argument, format, qui est un objet JavaScript. Cet objet
est le nœud correspondant &agrave; la balise format dans le fichier Formats.xml. L'objet a une propri&eacute;t&eacute; JavaScript pour
chaque attribut de la balise format correspondante.
L'exemple suivant illustre la balise format associ&eacute;e &agrave; la cha&icirc;ne &laquo; Devise - valeur par d&eacute;faut &raquo; :
&lt;format file=&quot;Currency&quot; title=&quot;Currency - default&quot; &not;
expression=&quot;&lt;%\s*=\s*FormatCurrency\(.*, -1, -2, -2, -2\)\s*%&gt;|&not;
&lt;%\s*=\s*DoCurrency\(.*, -1, -2, -2, -2\)\s*%&gt;&quot;
NumDigitsAfterDecimal=-1 IncludeLeadingDigit=-2 &not;
UseParensForNegativeNumbers=-2 GroupDigits=-2/&gt;
Le type de ce format correspond &agrave; Currency. La cha&icirc;ne &laquo; Devise - valeur par d&eacute;faut &raquo; s'affiche dans le menu
Format. L'expression &lt;%\s*=\s*FormatCurrency\(.*, -1, -2, -2,-2\)\s*%&gt;|&lt;%\s*=\s*DoCurrency\(.*, 1, -2, -2, -2\)\s*%&gt; trouve des occurrences de ce format dans le document de l'utilisateur.
Les param&egrave;tres NumDigitsAfterDecimal, IncludeLeadingDigit, UseParensForNegativeNumbers et
GroupDigits concernent le format Devise et ne sont pas obligatoires. Ces param&egrave;tres s'affichent dans la bo&icirc;te de
dialogue Param&egrave;tres du type de format Devise. Cette bo&icirc;te de dialogue appara&icirc;t chaque fois qu'un utilisateur choisit
le type de format Devise dans le menu Plus (+) de la bo&icirc;te de dialogue Modifier la liste de formats. Les valeurs
indiqu&eacute;es pour ces param&egrave;tres sont utilis&eacute;es pour d&eacute;finir le nouveau format.
Le menu Plus (+) de la bo&icirc;te de dialogue Modifier la liste de formats
Si vous ne voulez pas qu'un fichier du dossier ServerFormats apparaisse dans le menu Plus (+) de la bo&icirc;te de dialogue
Modifier la liste de formats, ajoutez l'instruction suivante de mani&egrave;re &agrave; ce qu'elle figure sur la premi&egrave;re ligne du
fichier HTML :
&lt;!-- MENU-LOCATION=NONE --&gt;
Pour d&eacute;terminer le contenu du menu, Dreamweaver commence par rechercher un fichier ServerFormats.xml dans le
m&ecirc;me dossier que les formats de donn&eacute;es (par exemple, Configuration/ServerFormats/ASP/). Le fichier
ServerFormats.xml d&eacute;crit le contenu du menu Plus (+) de la bo&icirc;te de dialogue Modifier la liste de formats. Il contient
des r&eacute;f&eacute;rences aux fichiers HTML r&eacute;pertori&eacute;s dans le menu.
Dreamweaver recherche une balise title dans chaque fichier HTML r&eacute;f&eacute;renc&eacute;. Si le fichier contient une balise de
titre, le contenu de celle-ci est affich&eacute; dans le menu. Si le fichier ne contient pas de balise de titre, c'est le nom du fichier
qui appara&icirc;t dans le menu.
Une fois qu'il a fini de rechercher le fichier ou si ce fichier n'existe pas, Dreamweaver analyse le reste du dossier pour
v&eacute;rifier s'il contient d'autres &eacute;l&eacute;ments devant appara&icirc;tre dans le menu. S'il s'av&egrave;re que le dossier principal contient des
fichiers qui ne figurent pas dans le menu, Dreamweaver les y ajoute. Si des sous-dossiers contiennent des fichiers qui
ne figurent pas d&eacute;j&agrave; dans le menu, Dreamweaver cr&eacute;e un sous-menu et les y ajoute.
Derni&egrave;re mise &agrave; jour le 22/6/2011
318
EXTENSION DE DREAMWEAVER
Formats de serveur
Sc&eacute;narios dans lesquels les fonctions de formatage des
donn&eacute;es sont appel&eacute;es
Les fonctions de formatage de donn&eacute;es sont appel&eacute;es dans les cas suivants :
• Dans la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou Texte dynamique, l'utilisateur choisit un nœud dans
l'arborescence des sources de donn&eacute;es et un format dans le menu Format. Une fois le format choisi, Dreamweaver
appelle la fonction generateDynamicDataRef() et transmet la valeur de renvoi de la fonction
generateDynamicDataRef() &agrave; la fonction formatDynamicDataRef(). La valeur renvoy&eacute;e par la fonction
formatDynamicDataRef() s'affiche dans le param&egrave;tre Code de la bo&icirc;te de dialogue. Lorsque l'utilisateur clique sur
OK, la cha&icirc;ne de code est ins&eacute;r&eacute;e dans le document de l'utilisateur. Dreamweaver appelle ensuite la fonction
applyFormat() pour ins&eacute;rer une d&eacute;claration de fonction. Pour plus d’informations, voir
&laquo; generateDynamicDataRef() &raquo; &agrave; la page 313. Un processus similaire a lieu lorsque l'utilisateur utilise le panneau
Liaisons.
• L'utilisateur change le format ou efface l'&eacute;l&eacute;ment de donn&eacute;es dynamiques. La fonction deleteFormat() est alors
appel&eacute;e. Cette fonction deleteFormat() supprime les scripts correspondants du document.
• Lorsque l'utilisateur clique sur le bouton Plus (+) de la bo&icirc;te de dialogue Modifier la liste de formats, Dreamweaver
affiche un menu contenant tous les types de format pour le mod&egrave;le de serveur utilis&eacute;. Chaque type de format
correspond &agrave; un fichier du dossier Configuration\ServerFormats\Mod&egrave;le_serveur_actuel.
Si l'utilisateur choisit, dans le menu Plus (+), un format qui n&eacute;cessite un param&egrave;tre sp&eacute;cifi&eacute; par l'utilisateur,
Dreamweaver ex&eacute;cute le gestionnaire onLoad sur la balise body, puis ouvre la bo&icirc;te de dialogue Param&egrave;tres, qui
affiche les param&egrave;tres de ce type de format. Dans cette bo&icirc;te de dialogue, l'utilisateur choisit les param&egrave;tres du
format et clique sur OK. Dreamweaver appelle alors la fonction applyFormatDefinition().
Si le format s&eacute;lectionn&eacute; n'a pas besoin d'afficher de bo&icirc;te de dialogue Param&egrave;tres, Dreamweaver appelle la fonction
applyFormatDefinition() lorsque l'utilisateur choisit le type de format dans le menu Plus (+).
• Par la suite, si l'utilisateur modifie le format (en le s&eacute;lectionnant dans la bo&icirc;te de dialogue Modifier la liste de
formats et en cliquant sur le bouton Modifier), Dreamweaver appelle la fonction inspectFormatDefinition()
avant d'afficher la bo&icirc;te de dialogue Param&egrave;tres, de fa&ccedil;on &agrave; ce que les commandes de formulaire puissent &ecirc;tre
initialis&eacute;es sur les valeurs correctes.
Fonctions de l'API des formats de serveur
L'API de formats de serveur est compos&eacute;e des fonctions de formatage de donn&eacute;es suivantes.
applyFormat()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Derni&egrave;re mise &agrave; jour le 22/6/2011
319
EXTENSION DE DREAMWEAVER
Formats de serveur
Description
Cette fonction permet de modifier un document en lui ajoutant une d&eacute;claration de fonction de format. Lorsqu'un
utilisateur choisit un format dans la zone Format de la bo&icirc;te de dialogue Donn&eacute;es dynamique ou Texte dynamique, ou
dans le panneau Liaisons, Dreamweaver apporte deux modifications au document de l'utilisateur. Il ajoute la fonction
de format appropri&eacute;e devant la balise HTML (si elle ne s'y trouve pas d&eacute;j&agrave;) et il modifie l'objet de donn&eacute;es dynamiques
de fa&ccedil;on &agrave; appeler la fonction de format appropri&eacute;e.
Dreamweaver ajoute la d&eacute;claration de fonction en appelant la fonction JavaScript applyFormat() dans le fichier de
format des donn&eacute;es. Il modifie l'objet de donn&eacute;es dynamique en appelant la fonction formatDynamicDataRef().
La fonction applyFormat() doit utiliser le DOM (Document Object Model, Mod&egrave;le d'objet de document) pour
ajouter des d&eacute;clarations de fonction au d&eacute;but du document de l'utilisateur. Par exemple, si l'utilisateur s&eacute;lectionne
Devise - Valeur par d&eacute;faut, la fonction ajoute la d&eacute;claration de fonction Currency.
Arguments
format
• L'argument format est un objet JavaScript qui d&eacute;crit le format &agrave; appliquer. Cet objet JavaScript constitue le nœud
correspondant &agrave; la balise format dans le fichier Formats.xml. L'objet a une propri&eacute;t&eacute; JavaScript pour chaque
attribut de la balise format correspondante.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
applyFormatDefinition()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Applique les changements &agrave; un format cr&eacute;&eacute; &agrave; partir de la bo&icirc;te de dialogue Modifier le format.
Les utilisateurs peuvent cr&eacute;er, modifier ou supprimer des formats &agrave; partir de la bo&icirc;te de dialogue Modifier la liste de
formats. Cette fonction est appel&eacute;e pour appliquer toutes les modifications apport&eacute;es &agrave; un format. Elle peut &eacute;galement
d&eacute;finir d'autres propri&eacute;t&eacute;s, nomm&eacute;es arbitrairement, pour l'objet. Chaque propri&eacute;t&eacute; est stock&eacute;e en tant qu'attribut de
la balise format dans le fichier Formats.xml.
Arguments
format
• L'argument format correspond &agrave; l'objet format JavaScript. Cette fonction doit faire de la propri&eacute;t&eacute; expression de
l'objet JavaScript l'expression r&eacute;guli&egrave;re du format. Elle peut &eacute;galement d&eacute;finir d'autres propri&eacute;t&eacute;s, nomm&eacute;es
arbitrairement, pour l'objet. Chaque propri&eacute;t&eacute; est stock&eacute;e en tant qu'attribut de la balise format.
Valeurs renvoy&eacute;es
Dreamweaver attend l'objet de format, si la fonction est correctement appliqu&eacute;e. En cas d'erreur, une cha&icirc;ne d'erreur
est renvoy&eacute;e. Si une cha&icirc;ne vide est renvoy&eacute;e, le formulaire est ferm&eacute; mais le nouveau format n'est pas cr&eacute;&eacute;, ce qui
revient &agrave; annuler l'op&eacute;ration.
Derni&egrave;re mise &agrave; jour le 22/6/2011
320
EXTENSION DE DREAMWEAVER
Formats de serveur
deleteFormat()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Supprime la d&eacute;claration de fonction du format au d&eacute;but du document de l'utilisateur.
Lorsque l'utilisateur modifie le format d'un objet de donn&eacute;es dynamiques (dans les bo&icirc;tes de dialogue Donn&eacute;es
dynamiques ou Texte dynamique ou dans le panneau Liaisons) ou supprime un objet de donn&eacute;es dynamiques format&eacute;,
Dreamweaver supprime la d&eacute;claration de fonction au d&eacute;but du document, ainsi que l'appel de la fonction de l'objet de
donn&eacute;es dynamiques en appelant la fonction deleteFormat().
Utilisez le DOM avec la fonction deleteFormat() pour supprimer la d&eacute;claration de fonction au d&eacute;but du document
ouvert.
Arguments
format
L'argument format est un objet JavaScript qui d&eacute;crit le format &agrave; supprimer. Cet objet JavaScript constitue le nœud
correspondant &agrave; la balise format dans le fichier Formats.xml.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
formatDynamicDataRef()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Ajoute &agrave; l'objet de donn&eacute;es dynamiques l'appel de la fonction de format. Lorsqu'un utilisateur choisit un format dans
la zone Format de la bo&icirc;te de dialogue Donn&eacute;es dynamique ou Texte dynamique, ou dans le panneau Liaisons,
Dreamweaver apporte deux modifications au document de l'utilisateur. Il ajoute la fonction de format appropri&eacute;e
devant la balise HTML (si elle ne s'y trouve pas d&eacute;j&agrave;) et il modifie l'objet de donn&eacute;es dynamiques de fa&ccedil;on &agrave; appeler la
fonction de format appropri&eacute;e.
Dreamweaver ajoute la d&eacute;claration de fonction en appelant la fonction JavaScript applyFormat() dans le fichier de
format des donn&eacute;es. Il modifie l'objet de donn&eacute;es dynamique en appelant la fonction formatDynamicDataRef().
La fonction formatDynamicDataRef() est appel&eacute;e lorsque l'utilisateur s&eacute;lectionne un format du champ de texte
Format de la bo&icirc;te de dialogue Donn&eacute;es dynamiques ou Texte dynamique ou du panneau Liaisons. Elle ne modifie pas
le document de l'utilisateur.
Arguments
dynamicDataObject, format
• L'argument dynamicDataObject est une cha&icirc;ne contenant l'objet de donn&eacute;es dynamiques.
Derni&egrave;re mise &agrave; jour le 22/6/2011
321
EXTENSION DE DREAMWEAVER
Formats de serveur
• L'argument format est un objet JavaScript qui d&eacute;crit le format &agrave; appliquer. Cet objet JavaScript constitue le nœud
correspondant &agrave; la balise format dans le fichier Formats.xml. L'objet a une propri&eacute;t&eacute; JavaScript pour chaque
attribut de la balise format correspondante.
Valeurs renvoy&eacute;es
Dreamweaver attend la nouvelle valeur de l'objet de donn&eacute;es dynamiques.
Si une erreur a lieu, la fonction affiche un message d'avertissement dans certaines conditions. Si la fonction renvoie
une cha&icirc;ne vide, le champ Format prend la valeur Aucun.
inspectFormatDefinition()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Initialise les commandes de formulaire lorsqu'un utilisateur modifie un format existant dans la bo&icirc;te de dialogue
Modifier la liste de formats.
Arguments
format
L'argument format est un objet JavaScript qui d&eacute;crit le format &agrave; appliquer. Cet objet JavaScript constitue le nœud
correspondant &agrave; la balise format dans le fichier Formats.xml. L'objet a une propri&eacute;t&eacute; JavaScript pour chaque attribut
de la balise format correspondante.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Derni&egrave;re mise &agrave; jour le 22/6/2011
322
Chapitre 20 : Composants
Adobe Dreamweaver g&egrave;re la cr&eacute;ation de la plupart des types de composants les plus populaires. Dreamweaver vous
permet en outre de d&eacute;velopper les types de composants int&eacute;gr&eacute;s au panneau Composants.
A propos des notions de base des composants
Les programmeurs ont recours &agrave; diff&eacute;rentes strat&eacute;gies pour encapsuler leurs travaux. L'encapsulation correspond &agrave; la
cr&eacute;ation d'une entit&eacute; dans une bo&icirc;te noire virtuelle. Pour l'utiliser, il n'est pas n&eacute;cessaire de comprendre son
fonctionnement. Il est par contre essentiel de savoir de quelles informations elle a besoin pour fonctionner et quelles
informations elle produira &agrave; la fin d'une t&acirc;che. Un programmeur cr&eacute;e par exemple un programme destin&eacute; &agrave; extraire
des informations d'une base de donn&eacute;es d'employ&eacute;s. Toute personne, y compris d'autres programmes, peut alors
utiliser ce programme pour interroger la base de donn&eacute;es. Le programme est ainsi r&eacute;utilisable.
L'exp&eacute;rience prouve que les programmes bien organis&eacute;s qui font appel &agrave; l'encapsulation sont plus faciles &agrave; g&eacute;rer, &agrave;
am&eacute;liorer et &agrave; r&eacute;utiliser. Les diff&eacute;rentes technologies offrent aux programmeurs diff&eacute;rentes fa&ccedil;ons d'effectuer
l'encapsulation, et ces strat&eacute;gies portent diff&eacute;rents noms : fonctions, modules, etc. Dreamweaver utilise le terme
composant pour d&eacute;signer quelques-unes des strat&eacute;gies d'encapsulation les plus populaires et les plus modernes, comme
les composants Adobe ColdFusion (CFC). Lorsque les utilisateurs cr&eacute;ent des applications Web dans Dreamweaver, le
panneau Composants les aide &agrave; utiliser les CFC.
Les composants provenant de technologies r&eacute;centes (comme les services Web, JavaBeans ou les CFC) sont capables de
s'autod&eacute;crire. En r&egrave;gle g&eacute;n&eacute;rale, des informations relatives au composant sont imbriqu&eacute;es dans les fichiers qui le
constituent. La capacit&eacute; d'un composant &agrave; publier ou partager ces informations porte le nom d'introspection. Ainsi, un
programme comme Dreamweaver peut demander &agrave; un composant la liste des fonctions qu'il expose. Les fonctions
expos&eacute;es sont les fonctions qui peuvent &ecirc;tre charg&eacute;es &agrave; partir d'un autre programme. En fonction de la technologie
utilis&eacute;e, un composant peut r&eacute;v&eacute;ler d'autres informations &agrave; son sujet.
Extension du panneau Composants
Pour utiliser une strat&eacute;gie de composants qui n'est pas repr&eacute;sent&eacute;e dans le panneau Composants actuel, d&eacute;veloppez la
logique du panneau Composants. Le panneau pourra ainsi prendre en charge de nouveaux types de composants.
Pour ajouter un nouveau composant au panneau Composants de Dreamweaver, recherchez les composants
disponibles (dans l'environnement de l'utilisateur). Demandez ensuite des descriptions de chaque composant (ou
filtrez-les si elles sont r&eacute;dig&eacute;es &agrave; l'aide de fichiers ASCII).
La fa&ccedil;on pr&eacute;cise dont l'emplacement et les d&eacute;tails des composants sont extraits d&eacute;pend des technologies. Elle peut
&eacute;galement varier selon le mod&egrave;le de serveur (ASP.NET, JSP/J2EE, ColdFusion ou autre). Ainsi, le code JavaScript que
vous r&eacute;digez pour d&eacute;velopper le panneau Composants d&eacute;pend de la technologie du composant &agrave; ajouter. Les fonctions
d&eacute;crites dans cette section doivent vous aider &agrave; obtenir les informations qui doivent figurer dans le panneau
Composants. Vous devez par ailleurs r&eacute;diger par vos propres soins la majeure partie de la logique servant &agrave; rechercher
les composants et &agrave; les analyser. Ces op&eacute;rations comprennent l'interrogation de la structure interne du composant et
la mise &agrave; disposition de ses champs, m&eacute;thodes et propri&eacute;t&eacute;s par l'interm&eacute;diaire de Dreamweaver.
Derni&egrave;re mise &agrave; jour le 22/6/2011
323
EXTENSION DE DREAMWEAVER
Composants
Enfin, les mod&egrave;les de serveur comme ASP.NET, JSP/J2EE ou ColdFusion tendent &agrave; prendre en charge certains types
seulement de composants. Par exemple, ASP.NET prend en charge les services Web mais pas les JavaBeans. Adobe
ColdFusion prend &eacute;galement en charge les services Web et les CFC. Lorsque vous ajoutez un type de composant au
panneau Composants, il doit &ecirc;tre sp&eacute;cifique au mod&egrave;le de serveur. Ainsi, si un utilisateur Dreamweaver travaille sur
un site ColdFusion, les composants CF s'affichent dans le menu d&eacute;roulant du panneau Composants.
Dans certains cas, pour pouvoir modifier des fichiers, il est n&eacute;cessaire de r&eacute;diger du code JavaScript appelant certaines
fonctions li&eacute;es aux composants.
Personnalisation du panneau Composants
Le panneau Composants de Dreamweaver permet aux utilisateurs de charger et d'utiliser des composants. Il r&eacute;pertorie
tous les types de composants disponibles et compatibles avec chaque mod&egrave;le de serveur activ&eacute;. Par exemple, les CFC
ne peuvent fonctionner que sur une page Adobe ColdFusion et ne s'affichent que dans le mod&egrave;le de serveur Adobe
ColdFusion du panneau Composants.
Vous pouvez ajouter des types de composants au panneau Composants en cr&eacute;ant une extension. Pour ajouter un
nouveau type de composant au panneau Composants, vous devez ex&eacute;cuter plusieurs &eacute;tapes g&eacute;n&eacute;rales :
1 Ajoutez le composant &agrave; la liste des types de composants disponibles associ&eacute;e aux mod&egrave;les de serveur appropri&eacute;s.
2 Ajoutez des instructions pour la configuration du composant dans le panneau Composants ou dans une bo&icirc;te de
dialogue (en fonction de l'extension pour laquelle ces op&eacute;rations sont effectu&eacute;es). Les instructions sont &eacute;galement
baptis&eacute;es &laquo; &eacute;tapes de configuration &raquo; et se pr&eacute;sentent sous la forme d'&eacute;tapes num&eacute;rot&eacute;es interactives. Assurez-vous
que chaque &eacute;tape ex&eacute;cut&eacute;e par l'utilisateur est coch&eacute;e.
3 Recensez les composants associ&eacute;s au type de composant d&eacute;fini sur l'ordinateur de l'utilisateur ou sur le site actuel
uniquement.
4 Cr&eacute;ez un composant lorsque l'utilisateur clique sur le bouton Plus (+) dans le panneau Composants.
En outre, vous pouvez permettre &agrave; l'utilisateur de modifier un composant ou de le supprimer.
Personnalisation des fichiers du panneau Composants
Le dossier Configuration/Components contient un sous-dossier pour chaque mod&egrave;le de serveur impl&eacute;ment&eacute;. Les
fichiers de composant sont stock&eacute;s dans le dossier Configuration/Components/mod&egrave;le-serveur/TypeComposant.
Vous pouvez ajouter d'autres mod&egrave;les de serveur et extensions de serveur compatibles (pour plus d'informations, voir
&laquo; Mod&egrave;les de serveur &raquo; &agrave; la page 335 et &laquo; Comportements de serveur &raquo; &agrave; la page 256).
Pour cr&eacute;er un composant personnalis&eacute; fonctionnant dans le panneau Composants :
1 Cr&eacute;ez un fichier HTML identifiant les emplacements des fichiers JavaScript et d'images de prise en charge.
2 Ecrivez le code JavaScript permettant d'activer le composant.
3 Cr&eacute;ez ou identifiez des fichiers d'image GIF repr&eacute;sentant le composant dans le panneau Composants.
Pour que le type de composant puisse s'afficher dans une vue de commande d'arborescence, cr&eacute;ez les fichiers facultatifs
associ&eacute;s et compl&eacute;tez la commande d'arborescence.
Vous pouvez configurer le type de composant pour qu'il fonctionne &agrave; trois niveaux : page Web seule, ensemble de
pages Web ou site entier. Le code JavaScript doit inclure la logique de persistance du composant pour permettre son
auto-enregistrement entre les sessions et son chargement &agrave; chaque d&eacute;but de session.
Derni&egrave;re mise &agrave; jour le 22/6/2011
324
EXTENSION DE DREAMWEAVER
Composants
Ajout d'un nouveau composant de service LDAP (lightweight directory access
protocol)
1 En prenant pour mod&egrave;le les fichiers de types de composants existants (par exemple, les fichiers du dossier
d'application Configuration/Components/Common/WebServices), cr&eacute;ez tous les fichiers n&eacute;cessaires ainsi que les
fichiers facultatifs, pour afficher le nouveau type de composant dans le panneau Composants de Dreamweaver,
comme indiqu&eacute; dans le tableau suivant :
Nom de fichier
Description
Obligatoire ou facultatif
*.htm
Fichier d'extension qui identifie les autres fichiers de prise en charge JavaScript et
GIF.
Obligatoire
*.js
Fichier d'extension qui impl&eacute;mente le rappel de l'API des composants.
Obligatoire
*.gif
Image qui appara&icirc;t dans le menu d&eacute;roulant Composants.
Obligatoire
*Menus.xml
Lieu de stockage des m&eacute;tadonn&eacute;es qui d&eacute;finissent la structure du panneau
Composants. Bien que le composant WebServices commun n'utilise pas ce fichier,
vous pouvez prendre comme exemple le fichier WebServicesMenus.xml du dossier
d'application Components/ColdFusion/WebServices.
Facultatif
*.gif
Images de barre d'outils, qui peuvent &ecirc;tre activ&eacute;es ou d&eacute;sactiv&eacute;es, comme le
montre l'exemple suivant : ToolBarImageUp.gif ToolBarImageDown.gif
Facultatif
ToolBarImageDisabled.gif
Ou des images de nœuds d'arborescence.
Remarque : Utilisez le m&ecirc;me pr&eacute;fixe pour tous les fichiers se rapportant au m&ecirc;me composant, afin que chaque fichier
et son composant soient facilement identifiables.
2 R&eacute;digez le code JavaScript destin&eacute; &agrave; impl&eacute;menter le nouveau composant de serveur.
Le fichier d'extension (HTM) d&eacute;finit les emplacements du code JavaScript dans la balise SCRIPT. Ces fichiers
JavaScript peuvent r&eacute;sider dans le dossier Shared, dans le m&ecirc;me dossier que le fichier d'extension ou dans le dossier
Common du code s'appliquant aux mod&egrave;les de serveurs multiples.
Par exemple, le fichier WebServices.htm du dossier Configuration/Components/Common/WebServices/ contient la
ligne :
&lt;SCRIPT SRC=&quot;../../Common/WebServices/WebServicesCommon.js&quot;&gt;&lt;/SCRIPT&gt;
Pour plus d'informations sur les fonctions d'API du panneau Composants disponibles, voir &laquo; Fonctions de l'API du
panneau Composants &raquo; &agrave; la page 325.
Lorsque vous ajoutez un service, vous pouvez utiliser le panneau Composants pour consulter les m&eacute;ta-informations
existantes et vous en servir directement lorsque vous cr&eacute;ez l'extension. Dreamweaver vous permet de consulter les
composants ajout&eacute;s et d'afficher les nœuds dans l'arborescence des composants. Le panneau Composants prend en charge
les fonctionnalit&eacute;s de glisser-d&eacute;placer et les raccourcis clavier en mode Code.
Propri&eacute;t&eacute;s de la commande d'arborescence
Utilisez la propri&eacute;t&eacute; ComponentRec pour compl&eacute;ter une commande d'arborescence du panneau Composants et faire
en sorte qu'elle apparaisse &agrave; l'emplacement appropri&eacute; dans le panneau. Chaque nœud d'une commande d'arborescence
doit comporter les propri&eacute;t&eacute;s suivantes :
Derni&egrave;re mise &agrave; jour le 22/6/2011
325
EXTENSION DE DREAMWEAVER
Composants
Nom de la propri&eacute;t&eacute;
Description
Obligatoire ou facultatif
name
Nom de l'&eacute;l&eacute;ment de nœud dans l'arborescence.
Obligatoire
image
Ic&ocirc;ne de l'&eacute;l&eacute;ment de nœud dans l'arborescence. Si elle n'est pas
sp&eacute;cifi&eacute;e, une ic&ocirc;ne par d&eacute;faut est utilis&eacute;e.
Facultatif
hasChildren
R&eacute;pond aux clics sur les boutons Plus (+) et Moins (-) du contr&ocirc;le
d'arborescence en chargeant les enfants. Vous pouvez travailler dans
une arborescence qui n'est pas remplie &agrave; l'avance.
Obligatoire
toolTipText
Texte de l'infobulle associ&eacute;e &agrave; l'&eacute;l&eacute;ment de nœud dans l'arborescence. Facultatif
isCodeViewDraggable
D&eacute;termine s'il est possible de glisser-d&eacute;placer l'&eacute;l&eacute;ment vers le mode
Code.
Facultatif
isDesignViewDraggable
D&eacute;termine s'il est possible de glisser-d&eacute;placer l'&eacute;l&eacute;ment vers le mode
Cr&eacute;ation.
Facultatif
Par exemple, les enfants du nœud WebServicesClass suivant sont des m&eacute;thodes Web :
this.name = &quot;TrafficLocatorWebService&quot;;
this.image = &quot;Components/Common/WebServices/WebServices.gif&quot;;
this.hasChildren = true;
this.toolTipText = &quot;TrafficLocatorWebService&quot;;
this.isCodeViewDraggable = true;
// the following allows of enabling/disabling of the button that appears
// above the Component Tree
this.allowDelete = true;
this.isDesignViewDraggable = false;
Fonctions de l'API du panneau Composants
Cette section d&eacute;crit les fonctions API permettant de remplir le panneau Composants.
getComponentChildren()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie une liste d'objets ComponentRec enfant pour l'objet ComponentRec parent actif. Pour charger
les &eacute;l&eacute;ments du niveau racine de l'arborescence, cette fonction doit lire ses m&eacute;tadonn&eacute;es dans son stock existant.
Arguments
{parentComponentRec}
L'argument parentComponentRec est l'objet componentRec du parent. Si cet argument n'est pas d&eacute;fini, Dreamweaver
attend une liste d'objets ComponentRec pour le nœud racine.
Valeurs renvoy&eacute;es
Tableau d'objets ComponentRec.
Derni&egrave;re mise &agrave; jour le 22/6/2011
326
EXTENSION DE DREAMWEAVER
Composants
Exemple
Voir la fonction getComponentChildren(componentRec) dans le fichier WebServices.js du dossier
Configuration/Components/Common/WebServices.
getContextMenuId()
Disponibilit&eacute;
Dreamweaver MX.
Description
Renvoie l'ID du menu contextuel correspondant au type de composant. Chaque type de composant peut &ecirc;tre associ&eacute;
&agrave; un menu contextuel. Les menus d&eacute;roulants du menu contextuel sont d&eacute;finis dans le fichier
ComponentNameMenus.xml. Ils fonctionnent de la m&ecirc;me fa&ccedil;on que le fichier menu.xml. Une cha&icirc;ne de menu peut
&ecirc;tre statique ou dynamique. Les raccourcis clavier (touches d'acc&egrave;s rapide) sont pris en charge.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Cha&icirc;ne d&eacute;finissant l'ID du menu contextuel.
Exemple
L'exemple suivant d&eacute;finit le menu Options pour le panneau Composants des CFC associ&eacute;s au mod&egrave;le de serveur Adobe
ColdFusion, ainsi que les raccourcis clavier du menu :
function getContextMenuId()
{
return &quot;DWCFCsContext&quot;;
}
La section WWebServicesContext du menu est d&eacute;finie dans le fichier
Configuration/Components/ColdFusion/CFCs/CFCsMenus.xml comme suit :
Derni&egrave;re mise &agrave; jour le 22/6/2011
327
EXTENSION DE DREAMWEAVER
Composants
&lt;menubar xmlns:MMString=&quot;http://www.macromedia.com/schemes/dat/string/&quot; name=&quot;&quot;
id=&quot;DWCFCsContext&quot;&gt;
&lt;menu MMString:name=&quot;Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs/menu/name&quot;
id=&quot;DWContext_CFCs&quot;&gt;
&lt;menuitem
MMString:name=&quot;Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_createNewCFC/menuitem
/name&quot; domRequired=&quot;false&quot; enabled=&quot;true&quot; command=&quot;createCFC()&quot;
id=&quot;DWContext_CFCs_createNewCFC&quot; /&gt;
&lt;menuitem
MMString:name=&quot;Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_editCode/menuitem/nam
e&quot; domRequired=&quot;false&quot; enabled=&quot;canGetSelectedCFC()&quot; command=&quot;editCFC();&quot;
id=&quot;DWContext_CFCs_editCode&quot; /&gt;
&lt;separator/&gt;
&lt;menuitem
MMString:name=&quot;Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_getDetails/menuitem/n
ame&quot; domRequired=&quot;false&quot; enabled=&quot;canGetDetails()&quot; command=&quot;getDetails()&quot;
id=&quot;DWContext_CFCs_getDetails&quot; /&gt;
&lt;menuitem
MMString:name=&quot;Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_getDescription/menuit
em/name&quot; domRequired=&quot;false&quot; enabled=&quot;canGetSelectedCFC()&quot; command=&quot;getDescription()&quot;
id=&quot;DWContext_CFCs_getDescription&quot; /&gt;
&lt;separator/&gt;
&lt;menuitem
MMString:name=&quot;Components/ASP_NET_Csharp/Connections/ConnectionsMenus_xml/DWShortcuts_Server
Component_Insert/menuitem/name&quot; domRequired=&quot;false&quot; enabled=&quot;insertCFCEnabled();&quot;
command=&quot;clickedInsertCFC();&quot; id=&quot;DWShortcuts_ServerComponent_Insert&quot; /&gt;
&lt;/menu&gt;
&lt;/menubar&gt;
getCodeViewDropCode()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction obtient le code qui est tir&eacute;, coup&eacute; ou copi&eacute; dans le mode Code &agrave; partir du panneau Composants.
Arguments
componentRec
• L'argument componentRec
est un objet.
Valeurs renvoy&eacute;es
Cha&icirc;ne contenant le code de ce composant.
Exemple
L'exemple suivant identifie le code d'un composant Adobe ColdFusion (CFC) :
Derni&egrave;re mise &agrave; jour le 22/6/2011
328
EXTENSION DE DREAMWEAVER
Composants
function getCodeVi e wDropCode(compone nt
Rec )
{
var codeToDrop=&quot;&quot;;
if (componentRec)
{
if (componentRec.objectType == &quot;Connection&quot;)
{
v ar connPart = new Participant(&quot;d at asource_tag&quot;);
var paramObj = new Obje ct( );
paramObj.datasource = componentRec.name;
codeToDrop = con nPart.getInsertString(paramObj, &quot;aboveHTML&quot;);}
el se if ((componentRec.objectType == &quot;Column&quot;)| |
(componentRec.objectType == &quot;Paramete r &quot;))
{
c odeToDrop = componentRec.dropcode;
}
e ls e{
codeToDrop = co mponentRec.name;
}
}
return codeToDrop;
}
getSetupSteps()
Disponibilit&eacute;
Dreamweaver MX.
Description
Dreamweaver appelle cette fonction si setupStepsCompleted() renvoie z&eacute;ro ou un nombre entier positif. Cette
fonction contr&ocirc;le les instructions de configuration c&ocirc;t&eacute; serveur, qui peuvent &ecirc;tre impl&eacute;ment&eacute;es &agrave; l'aide d'extensions
bas&eacute;es sur une bo&icirc;te de dialogue modale et sur des composants de serveur.
Cette fonction renvoie un tableau des cha&icirc;nes que Dreamweaver affiche soit dans la bo&icirc;te de dialogue des &eacute;tapes de
configuration, soit dans le panneau Composants, selon le type d'extension.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Tableau de n+1 cha&icirc;nes, n correspondant au nombre d'&eacute;tapes, comme d&eacute;crit dans la liste ci-dessous :
• Le titre qui appara&icirc;t au-dessus de la liste des &eacute;tapes de configuration.
• Pour chaque &eacute;tape, le texte des instructions, qui peut comprendre un balisage HTML, d&egrave;s lors qu'il est valide au sein
d'une balise li.
Vous pouvez inclure des liens (balises a) dans la liste des &eacute;tapes en utilisant la syntaxe ci-dessous :
&lt;a href=&quot;#&quot; onMouseDown=&quot;handler&quot;&gt;Blue Underlined Text&lt;/a&gt;
La valeur &quot;handler&quot; peut &ecirc;tre remplac&eacute;e par l'une des cha&icirc;nes suivantes ou toute expression JavaScript telle que
&quot;dw.browseDocument('http://www.adobe.com')&quot; :
•
&quot;Event:SetCurSite&quot; ouvre une bo&icirc;te de dialogue pour d&eacute;finir le site courant.
Derni&egrave;re mise &agrave; jour le 22/6/2011
329
EXTENSION DE DREAMWEAVER
Composants
•
&quot;Event:CreateSite&quot; ouvre une bo&icirc;te de dialogue pour cr&eacute;er un nouveau site.
•
&quot;Event:SetDocType&quot; ouvre une bo&icirc;te de dialogue pour modifier le type de document de l'utilisateur.
• Un gestionnaire &quot;Event:CreateConnection&quot; ouvre une bo&icirc;te de dialogue pour cr&eacute;er une nouvelle connexion &agrave;
une base de donn&eacute;es.
• Un gestionnaire &quot;Event:SetRDSPassword&quot; ouvre une bo&icirc;te de dialogue pour d&eacute;finir le nom d'utilisateur et le mot
de passe du service RDS (Remote Development Service) (Adobe ColdFusion uniquement).
• Un gestionnaire &quot;Event:CreateCFDataSource&quot; ouvre l'administrateur Adobe ColdFusion dans un navigateur.
Exemple
L'exemple suivant d&eacute;finit quatre &eacute;tapes pour les composants Adobe ColdFusion et fournit un lien hypertexte &agrave; la
quatri&egrave;me &eacute;tape pour que l'utilisateur puisse entrer son nom d'utilisateur et son mot de passe RDS :
function getSetupSteps()
{
var doSDK = false;
dom = dw.getDocumentDOM();
if (dom &amp;&amp; dom.serverModel)
{
var aServerModelName = dom.serverModel.getDisplayName();
}
else
{
var aServerModelName = site.getServerDisplayNameForSite();
}
if (aServerModelName.length)
{
if(aServerModelName != &quot;ColdFusion&quot;)
{
if(needsSDKInstalled != null)
{
doSDK = needsSDKInstalled();
}
}
}
var someSteps = new Array();
someSteps.push(MM.MSG_WebService_InstructionsTitle);
someSteps.push(MM.MSG_Dynamic_InstructionsStep1);
someSteps.push(MM.MSG_Dynamic_InstructionsStep2);
if(doSDK == true)
{
someSteps.push(MM.MSG_WebService_InstructionsStep3);
}
someSteps.push(MM.MSG_WebService_InstructionsStep4);
return someSteps;
}
setupStepsCompleted()
Disponibilit&eacute;
Dreamweaver MX.
Derni&egrave;re mise &agrave; jour le 22/6/2011
330
EXTENSION DE DREAMWEAVER
Composants
Description
Dreamweaver appelle cette fonction avant que l'onglet Composants ne devienne visible. Dreamweaver appelle ensuite
la fonction getSetupSteps() si la fonction setupStepsCompleted() renvoie z&eacute;ro ou un entier positif.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Entier repr&eacute;sentant le nombre d'&eacute;tapes de configuration d&eacute;j&agrave; effectu&eacute;es par l'utilisateur, comme d&eacute;crit dans la liste
suivante :
• La valeur z&eacute;ro ou un nombre entier positif indique le nombre d'&eacute;tapes d&eacute;j&agrave; effectu&eacute;es.
• La valeur -1 indique que toutes les &eacute;tapes de configuration n&eacute;cessaires ont &eacute;t&eacute; effectu&eacute;es ; la liste d'instructions n'est
donc pas affich&eacute;e.
handleDesignViewDrop()
Disponibilit&eacute;
Dreamweaver MX.
Description
G&egrave;re l'op&eacute;ration de d&eacute;placement lorsque l'utilisateur fait glisser un tableau ou un mode du panneau Bases de donn&eacute;es
ou un composant du panneau Composants vers le mode Cr&eacute;ation.
Arguments
componentRec
• L'argument componentRec est un objet qui comporte les propri&eacute;t&eacute;s suivantes :
• La propri&eacute;t&eacute; name correspond au nom de l'&eacute;l&eacute;ment de nœud dans l'arborescence.
• La propri&eacute;t&eacute;
image est une ic&ocirc;ne facultative pour l'&eacute;l&eacute;ment de nœud dans l'arborescence. Si cette ic&ocirc;ne est omise,
Dreamweaver MX utilise une ic&ocirc;ne par d&eacute;faut.
• La propri&eacute;t&eacute; hasChildren est une valeur bool&eacute;enne qui indique si l'&eacute;l&eacute;ment de nœud d'arborescence peut &ecirc;tre
d&eacute;velopp&eacute; : si elle a la valeur true, Dreamweaver MX affiche les boutons Plus (+) et Moins (-) pour cet &eacute;l&eacute;ment
; si elle a la valeur false, l'&eacute;l&eacute;ment ne peut pas &ecirc;tre d&eacute;velopp&eacute;.
• La propri&eacute;t&eacute; toolTipText est le texte facultatif de l'infobulle associ&eacute;e &agrave; l'&eacute;l&eacute;ment de nœud dans l'arborescence.
• La propri&eacute;t&eacute; isCodeViewDraggable est une valeur bool&eacute;enne qui indique s'il est possible de glisser-d&eacute;placer
l'&eacute;l&eacute;ment de nœud dans l'arborescence vers le mode Code.
• La propri&eacute;t&eacute; isDesignViewDraggable est une valeur bool&eacute;enne qui indique s'il est possible de glisser-d&eacute;placer
l'&eacute;l&eacute;ment de nœud dans l'arborescence vers le mode Cr&eacute;ation.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne qui indique si l'op&eacute;ration de d&eacute;placement a r&eacute;ussi : true en cas de r&eacute;ussite et false en cas d'&eacute;chec.
Exemple
L'exemple suivant d&eacute;termine si le composant est un tableau ou un mode et renvoie la valeur bHandled appropri&eacute;e :
Derni&egrave;re mise &agrave; jour le 22/6/2011
331
EXTENSION DE DREAMWEAVER
Composants
function handleDesignViewDrop(componentRec)
{
var bHandled = false;
if (componentRec)
{
if ((componentRec.objectType == &quot;Table&quot;)||
(componentRec.objectType == &quot;View&quot;))
{
alert(&quot;popup Recordset Server Behavior&quot;);
bHandled = true;
}
}
return bHandled;
}
handleDoubleClick()
Disponibilit&eacute;
Dreamweaver MX.
Description
Lorsque l'utilisateur double-clique sur un nœud de l'arborescence, le gestionnaire d'&eacute;v&eacute;nements est appel&eacute; pour que
l'utilisateur puisse apporter des modifications. Cette fonction est facultative. Elle peut renvoyer la valeur false, ce qui
indique que le gestionnaire d'&eacute;v&eacute;nements n'est pas d&eacute;fini. Dans ce cas, le fait de double-cliquer d&eacute;clenche le
comportement par d&eacute;faut, &agrave; savoir le d&eacute;veloppement ou la r&eacute;duction des nœuds de l'arborescence.
Arguments
componentRec
• L'argument componentRec est un objet qui comporte les propri&eacute;t&eacute;s suivantes :
• La propri&eacute;t&eacute;
name est le nom de l'&eacute;l&eacute;ment de nœud dans l'arborescence.
• La propri&eacute;t&eacute;
image est une ic&ocirc;ne facultative pour l'&eacute;l&eacute;ment de nœud dans l'arborescence. Si cette ic&ocirc;ne est omise,
Dreamweaver utilise une ic&ocirc;ne par d&eacute;faut.
• La propri&eacute;t&eacute; hasChildren est une valeur bool&eacute;enne qui indique si l'&eacute;l&eacute;ment de nœud d'arborescence peut &ecirc;tre
d&eacute;velopp&eacute; : si elle a la valeur true, Dreamweaver affiche les boutons Plus (+) et Moins (-) pour cet &eacute;l&eacute;ment ; si
elle a la valeur false, l'&eacute;l&eacute;ment ne peut pas &ecirc;tre d&eacute;velopp&eacute;.
• La propri&eacute;t&eacute; toolTipText est un texte d'infobulle facultatif pour l'&eacute;l&eacute;ment de nœud dans l'arborescence.
• La propri&eacute;t&eacute; isCodeViewDraggable est une valeur bool&eacute;enne qui indique s'il est possible de glisser-d&eacute;placer
l'&eacute;l&eacute;ment de nœud dans l'arborescence vers le mode Code.
• La propri&eacute;t&eacute; isDesignViewDraggable est une valeur bool&eacute;enne qui indique s'il est possible de glisser-d&eacute;placer
l'&eacute;l&eacute;ment de nœud dans l'arborescence vers le mode Cr&eacute;ation.
Valeurs renvoy&eacute;es
Aucune.
Exemple
Dans l'exemple suivant, l'extension est &agrave; m&ecirc;me de g&eacute;rer un double-clic sur l'&eacute;l&eacute;ment de nœud dans l'arborescence ; si
la valeur false est renvoy&eacute;e, le comportement par d&eacute;faut consiste &agrave; d&eacute;velopper/r&eacute;duire les nœuds.
Derni&egrave;re mise &agrave; jour le 22/6/2011
332
EXTENSION DE DREAMWEAVER
Composants
function handleDoubleClick(componentRec)
{
var selectedObj = dw.serverComponentsPalette.getSelectedNode();
if(dwscripts.IS_WIN)
{
if (selectedObj &amp;&amp; selectedObj.wsRec &amp;&amp; selectedObj.wsRec[ProxyGeneratorNamePropName])
{
if (selectedObj.objectType == &quot;Root&quot;)
{
editWebService();
return true;
}
else if (selectedObj.objectType == &quot;MissingProxyGen&quot;)
{
displayMissingProxyGenMessage(componentRec);
editWebService();
return true;
}
}
}
return false;
}
toolbarControls()
Disponibilit&eacute;
Dreamweaver MX.
Description
Chaque type de composant renvoie une liste d'objets toolBarButtonRec repr&eacute;sentant les ic&ocirc;nes de la barre d'outils,
de gauche &agrave; droite. Chaque objet toolBarButtonRec contient les propri&eacute;t&eacute;s suivantes :
Nom de la propri&eacute;t&eacute;
Description
image
Chemin d'acc&egrave;s au fichier d'image.
disabledImage
(Facultatif) Recherche de chemin d'acc&egrave;s &agrave; l'image d&eacute;sactiv&eacute;e correspondant au bouton de la barre d'outils.
pressedImage
(Facultatif) Recherche de chemin d'acc&egrave;s &agrave; l'image correspondant au bouton enfonc&eacute; dans la barre d'outils.
toolTipText
Infobulle du bouton dans la barre d'outils.
toolStyle
Gauche ou droite.
Derni&egrave;re mise &agrave; jour le 22/6/2011
333
EXTENSION DE DREAMWEAVER
Composants
Nom de la propri&eacute;t&eacute;
Description
enabled
Code JavaScript qui renvoie une valeur bool&eacute;enne (true ou false). Les activateurs sont appel&eacute;s si les conditions
suivantes sont remplies :
•
La fonction dreamweaver.serverComponents.refresh() est appel&eacute;e.
•
La s&eacute;lection dans l'arborescence change.
•
Le mod&egrave;le de serveur change.
command
Code JavaScript &agrave; ex&eacute;cuter. Le gestionnaire de commande peut utiliser la fonction dreamweaver.
serverComponents.refresh() pour actualiser les composants.
menuId
ID de menu unique du bouton du menu d&eacute;roulant lorsque l'utilisateur clique sur le bouton. Lorsque cet ID est d&eacute;fini,
il remplace le gestionnaire de commande. En d'autres termes, le bouton peut &ecirc;tre soit associ&eacute; &agrave; une commande,
soit &agrave; un bouton ayant un menu d&eacute;roulant associ&eacute;, mais pas aux deux &agrave; la fois.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Tableau des boutons de barre d'outils, de gauche &agrave; droite.
Exemple
Dans l'exemple suivant, des propri&eacute;t&eacute;s sont attribu&eacute;es aux boutons de la barre d'outils :
function toolbarControls()
{
var toolBarBtnArray = new Array();
dom = dw.getDocumentDOM();
var plusButton = new ToolbarControlRec();
var aServerModelName = null;
if (dom &amp;&amp; dom.serverModel)
{
aServerModelName = dom.serverModel.getDisplayName();
}
else
{
//look in the site for potential server model
aServerModelName = site.getServerDisplayNameForSite();
}
if (aServerModelName.length)
{
if(aServerModelName == &quot;ColdFusion&quot;)
{
plusButton.image
= PLUS_BUTTON_UP;
plusButton.pressedImage
= PLUS_BUTTON_DOWN;
plusButton.disabledImage
= PLUS_BUTTON_UP;
plusButton.toolStyle
= &quot;left&quot;;
plusButton.toolTipText
= MM.MSG_WebServicesAddToolTipText;
plusButton.enabled
= &quot;dwscripts.IS_WIN&quot;;
plusButton.command
= &quot;invokeWebService()&quot;;
}
else
{
plusButton.image
= PLUSDROPBUTTONUP;
Derni&egrave;re mise &agrave; jour le 22/6/2011
334
EXTENSION DE DREAMWEAVER
Composants
plusButton.pressedImage
plusButton.disabledImage
plusButton.toolStyle
plusButton.toolTipText
plusButton.enabled
plusButton.menuId
=
=
=
=
=
=
PLUSDROPBUTTONDOWN;
PLUSDROPBUTTONUP;
&quot;left&quot;;
MM.MSG_WebServicesAddToolTipText;
&quot;dwscripts.IS_WIN&quot;;
&quot;DWWebServicesChoosersContext&quot;;
}
toolBarBtnArray.push(plusButton);
var minusButton
= new ToolbarControlRec();
minusButton.image
= MINUSBUTTONUP;
minusButton.pressedImage
= MINUSBUTTONDOWN;
minusButton.disabledImage = MINUSBUTTONDISABLED;
minusButton.toolStyle
= &quot;left&quot;;
minusButton.toolTipText
= MM.MSG_WebServicesDeleteToolTipText;
minusButton.command
= &quot;clickedDelete()&quot;;
minusButton.enabled = &quot;(dw.serverComponentsPalette.getSelectedNode() != null &amp;&amp;
dw.serverComponentsPalette.getSelectedNode() &amp;&amp;
((dw.serverComponentsPalette.getSelectedNode().objectType=='Root') ||
(dw.serverComponentsPalette.getSelectedNode().objectType == 'Error') ||
(dw.serverComponentsPalette.getSelectedNode().objectType ==
'MissingProxyGen')))&quot;;
toolBarBtnArray.push(minusButton);
if(aServerModelName != null &amp;&amp; aServerModelName.indexOf(&quot;.NET&quot;) &gt;= 0)
{
var deployWServiceButton
= new ToolbarControlRec();
deployWServiceButton.image
= DEPLOYSUPPORTBUTTONUP;
deployWServiceButton.pressedImage = DEPLOYSUPPORTBUTTONDOWN;
deployWServiceButton.disabledImage = DEPLOYSUPPORTBUTTONUP;
deployWServiceButton.toolStyle
= &quot;right&quot;;
deployWServiceButton.toolTipText
= MM.MSG_WebServicesDeployToolTipText;
deployWServiceButton.command = &quot;site.showTestingServerBinDeployDialog()&quot;;
deployWServiceButton.enabled = true;
toolBarBtnArray.push(deployWServiceButton);
}
//add the rebuild proxy button for windows only.
//bug 45552:
if(navigator.platform.charAt(0) !=&quot;M&quot;)
{
var proxyButton
= new ToolbarControlRec();
proxyButton.image
= PROXYBUTTONUP;
proxyButton.pressedImage
= PROXYBUTTONDOWN;
proxyButton.disabledImage = PROXYBUTTONDISABLED;
proxyButton.toolStyle
= &quot;right&quot;;
proxyButton.toolTipText
= MM.MSG_WebServicesRegenToolTipText;
proxyButton.command
= &quot;reGenerateProxy()&quot;;
proxyButton.enabled
= &quot;enableRegenerateProxyButton()&quot;;
toolBarBtnArray.push(proxyButton);
}
}
return toolBarBtnArray;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
335
Chapitre 21 : Mod&egrave;les de serveur
Les mod&egrave;les de serveur sont les technologies qui permettent d'ex&eacute;cuter des scripts sur un serveur. Lorsqu'ils d&eacute;finissent
un nouveau site, les utilisateurs peuvent indiquer le mod&egrave;le de serveur qu'ils souhaitent utiliser au niveau du site et au
niveau du document. Ce mod&egrave;le de serveur g&egrave;re tous les &eacute;l&eacute;ments dynamiques que l'utilisateur ajoute au document.
Les fichiers de configuration des mod&egrave;les de serveur sont stock&eacute;s dans le dossier Configuration/ServerModels. Chaque
mod&egrave;le de serveur dispose, au sein de ce dossier, d'un fichier HTML particulier qui impl&eacute;mente l'ensemble des
fonctions requises.
Personnalisation des mod&egrave;les de serveur
Vous pouvez personnaliser certaines des fonctionnalit&eacute;s d'un mod&egrave;le de serveur en utilisant les fonctions disponibles
dans l'API des mod&egrave;les de serveur.
Lorsqu'ils d&eacute;marrent Adobe Dreamweaver pour la premi&egrave;re fois, les nouveaux utilisateurs sont invit&eacute;s &agrave; indiquer les
mod&egrave;les de serveur qu'ils souhaitent utiliser. Pour les cas o&ugrave; l'utilisateur n'indique aucun mod&egrave;le de serveur, vous
pouvez cr&eacute;er une bo&icirc;te de dialogue dynamique l'invitant &agrave; suivre les &eacute;tapes n&eacute;cessaires. Cette bo&icirc;te de dialogue
appara&icirc;tra lorsque l'utilisateur essaiera d'ins&eacute;rer un objet de serveur. Pour plus d'informations sur la cr&eacute;ation de cette
bo&icirc;te de dialogue, voir les fonctions &laquo; getSetupSteps() &raquo; &agrave; la page 328 et &laquo; setupStepsCompleted() &raquo; &agrave; la page 329.
Vous pouvez d&eacute;cider de cr&eacute;er un mod&egrave;le de serveur sp&eacute;cialis&eacute;. Adobe vous conseille de cr&eacute;er un mod&egrave;le de serveur
enti&egrave;rement nouveau plut&ocirc;t que de modifier l'un de ceux fournis avec Dreamweaver. Pour plus d'informations sur la
cr&eacute;ation de nouveaux types de documents pris en charge par un mod&egrave;le de serveur, voir &laquo; Types de documents
extensibles dans Dreamweaver &raquo; &agrave; la page 14.
Lorsque vous cr&eacute;ez un mod&egrave;le de serveur, vous devez impl&eacute;menter la fonction canRecognizeDocument() dans votre
fichier de mod&egrave;le de serveur. Cette fonction indique &agrave; Dreamweaver le niveau de priorit&eacute; qu'il doit attribuer au mod&egrave;le
de serveur en mati&egrave;re de gestion des extensions de fichier lorsque plusieurs mod&egrave;les de serveur revendiquent une
extension pr&eacute;cise.
Fonctions de l'API des mod&egrave;les de serveur
Cette section d&eacute;crit les fonctions qui permettent de configurer les mod&egrave;les de serveur pour Dreamweaver.
canRecognizeDocument()
Disponibilit&eacute;
Dreamweaver MX.
Description
Lors de l'ouverture d'un document (et lorsque plusieurs mod&egrave;les de serveur revendiquent une extension de fichier),
Dreamweaver appelle cette fonction pour chacun des mod&egrave;les de serveur associ&eacute;s &agrave; l'extension afin de voir si l'une des
fonctions peut &eacute;tablir que le document lui appartient. Si plusieurs mod&egrave;les de serveur revendiquent l'extension de
fichier, Dreamweaver accorde la priorit&eacute; &agrave; celui renvoyant le nombre entier le plus &eacute;lev&eacute;.
Derni&egrave;re mise &agrave; jour le 22/6/2011
336
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
Remarque : Dans la mesure o&ugrave; tous les mod&egrave;les de serveur de Dreamweaver renvoient la valeur 1, les mod&egrave;les de serveur
tiers peuvent avoir la priorit&eacute; au niveau d'une extension de fichier.
Arguments
dom
L'argument dom correspond &agrave; l'objet de document Adobe, renvoy&eacute; par la fonction
dreamweaver.getDocumentDOM().
Valeurs renvoy&eacute;es
Dreamweaver attend un nombre entier indiquant la priorit&eacute; que vous accordez au mod&egrave;le de serveur pour l'extension
de fichier. Cette fonction doit renvoyer la valeur -1 si le mod&egrave;le de serveur ne revendique pas l'extension de fichier;
dans les autres cas de figure, elle doit renvoyer une valeur sup&eacute;rieure &agrave; z&eacute;ro.
Exemple
Dans l'exemple suivant, si l'utilisateur ouvre un document JavaScript pour le mod&egrave;le de serveur en cours, le code
renvoie la valeur 2. Cette valeur permet au mod&egrave;le de serveur courant d'&ecirc;tre prioritaire sur le mod&egrave;le de serveur par
d&eacute;faut de Dreamweaver.
var retVal = -1;
var langRE = /@\s*language\s*=\s*(\&quot;|\')?javascript(\&quot;|\')?/i;
// Search for the string language=&quot;javascript&quot;
var oHTML = dom.documentElement.outerHTML;
if (oHTML.search(langRE) &gt; -1)
retVal = 2;
return retVal;
getFileExtensions()
Disponibilit&eacute;
Dreamweaver UltraDev 1, d&eacute;conseill&eacute;e dans Dreamweaver MX.
Description
Renvoie les extensions de fichier compatibles avec un mod&egrave;le de serveur. Par exemple, le mod&egrave;le de serveur ASP prend
en charge les extensions de fichier.asp et.htm. Cette fonction renvoie un tableau de cha&icirc;nes ; Dreamweaver utilise ces
cha&icirc;nes pour compl&eacute;ter la liste Extension de page par d&eacute;faut figurant dans la cat&eacute;gorie Serveur d'application de la bo&icirc;te
de dialogue D&eacute;finition du site.
Remarque : La liste Extension de page par d&eacute;faut n'existe que dans Dreamweaver version 4 ou ant&eacute;rieure. Dans
Dreamweaver MX et les versions ult&eacute;rieures, la bo&icirc;te de dialogue D&eacute;finition du site ne r&eacute;pertorie pas les param&egrave;tres
relatifs aux extensions de fichier. Au lieu de cela, Dreamweaver lit le fichier Extensions.txt et analyse l'&eacute;l&eacute;ment dans le
fichier mmDocumentTypes.xml. Pour plus d'informations sur ces deux fichiers et l'&eacute;l&eacute;ment documenttype, voir &laquo; Types
de documents extensibles dans Dreamweaver &raquo; &agrave; la page 14.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau de cha&icirc;nes repr&eacute;sentant les extensions de fichier autoris&eacute;es.
Derni&egrave;re mise &agrave; jour le 22/6/2011
337
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
getLanguageSignatures()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie un objet qui d&eacute;crit la m&eacute;thode et les signatures de tableau utilis&eacute;es par le langage de script. La
fonction getLanguageSignatures() permet d'associer des mappages de signatures g&eacute;n&eacute;riques &agrave; des mappages
sp&eacute;cifiques au langage pour les &eacute;l&eacute;ments suivants :
• Fonction
• Constructeurs
• Code de d&eacute;p&ocirc;t (valeurs renvoy&eacute;es)
• Tableaux
• Exceptions
• Mappages des types de donn&eacute;es pour les types de donn&eacute;es primitifs
La fonction getLanguageSignatures() renvoie une table de mappage des d&eacute;clarations de signature. Les
d&eacute;veloppeurs d'extensions peuvent se servir de cette table de mappage pour produire des blocs de code sp&eacute;cifiques au
langage que Dreamweaver place dans la page (en se basant sur le mod&egrave;le de serveur adapt&eacute; &agrave; la page) lorsqu'un
utilisateur effectue un glisser-d&eacute;placer sur une m&eacute;thode relative &agrave; des services Web, par exemple.
Pour obtenir des exemples de r&eacute;daction de cette fonction, voir les fichiers d'impl&eacute;mentation HTML des mod&egrave;les de
serveur JSP et ASP.Net. Les fichiers d'impl&eacute;mentation des mod&egrave;les de serveur se trouvent dans le dossier
Configuration/ServerModels.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un objet d&eacute;finissant les signatures du langage de script. Cet objet doit mapper les signatures
g&eacute;n&eacute;riques &agrave; celles sp&eacute;cifiques au langage.
getServerExtension()
Disponibilit&eacute;
Dreamweaver UltraDev 4, d&eacute;conseill&eacute;e dans Dreamweaver MX.
Description
Cette fonction renvoie l'extension par d&eacute;faut des fichiers exploitant le mod&egrave;le de serveur en cours. L'objet
serverModel est d&eacute;fini sur le mod&egrave;le de serveur du site s&eacute;lectionn&eacute; si aucun document utilisateur n'est s&eacute;lectionn&eacute;.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne repr&eacute;sentant les extensions de fichier prises en charge.
Derni&egrave;re mise &agrave; jour le 22/6/2011
338
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
getServerInfo()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie un objet JavaScript accessible depuis le code JavaScript, par appel de la fonction
dom.serverModel.getServerInfo(). Par ailleurs, serverName, serverLanguage et serverVersion sont des
propri&eacute;t&eacute;s sp&eacute;cifiques, &eacute;galement accessibles au moyen des fonctions JavaScript suivantes :
dom.serverModel.getServerName()
dom.serverModel.getServerLanguage()
dom.serverModel.getServerVersion()
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un objet contenant les propri&eacute;t&eacute;s du mod&egrave;le de serveur.
Exemple
var obj = new Object();
obj.serverName = &quot;ASP&quot;;
obj.serverLanguage = &quot;JavaScript&quot;;
obj.serverVersion = &quot;2.0&quot;;
...
return obj;
getServerLanguages()
Disponibilit&eacute;
Dreamweaver UltraDev 1, d&eacute;conseill&eacute;e dans Dreamweaver MX.
Description
Cette fonction renvoie les langages de script pris en charge d'un mod&egrave;le de serveur avec un tableau de cha&icirc;nes.
Dreamweaver utilise ces cha&icirc;nes pour compl&eacute;ter la liste Langage de script par d&eacute;faut figurant dans la cat&eacute;gorie Serveur
d'application de la bo&icirc;te de dialogue D&eacute;finition du site.
Remarque : La liste Langage de script par d&eacute;faut existe uniquement dans Dreamweaver 4 et les ant&eacute;rieures. Dans
Dreamweaver MX et les versions ult&eacute;rieures, la bo&icirc;te de dialogue D&eacute;finition du site ne r&eacute;pertorie pas les langages de script
pris en charge et la fonction getServerLanguages() n'est pas utilis&eacute;e. La raison pour laquelle la version MX de
Dreamweaver n'utilise pas cette fonction est que chaque mod&egrave;le de serveur ne dispose dans cette version du programme
que d'un seul langage de serveur.
Dans les versions ant&eacute;rieures de Dreamweaver, un mod&egrave;le de serveur pouvait prendre en charge plusieurs langages de
script ; le mod&egrave;le de serveur ASP, par exemple, prend en charge JavaScript et VBScript.
Si vous souhaitez qu'un fichier du dossier ServerFormats s'applique uniquement &agrave; un langage de script sp&eacute;cifique,
ajoutez l'instruction suivante de mani&egrave;re &agrave; ce qu'elle figure sur la premi&egrave;re ligne du fichier HTML :
&lt;!-- SCRIPTING-LANGUAGE=XXX --&gt;
Derni&egrave;re mise &agrave; jour le 22/6/2011
339
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
Dans cet exemple, XXX repr&eacute;sente le langage de script. Cette instruction g&eacute;n&egrave;re l'apparition du comportement de
serveur dans le menu Plus (+) du panneau Comportements de serveur uniquement lorsque le langage de script
s&eacute;lectionn&eacute; est XXX.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau de cha&icirc;nes repr&eacute;sentant les langages de script pris en charge.
getServerModelExtDataNameUD4()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie le nom de l'impl&eacute;mentation du mod&egrave;le de serveur que Dreamweaver doit utiliser lorsqu'il
acc&egrave;de &agrave; des fichiers de donn&eacute;es d'extension UltraDev4, qui r&eacute;sident dans le dossier Configurations/ExtensionData.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne, telle que &quot;ASP/JavaScript&quot;.
getServerModelDelimiters()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie les d&eacute;limiteurs de scripts que le serveur d'application utilise et indique si chaque d&eacute;limiteur peut
participer &agrave; la fusion des blocs de code. Vous pouvez acc&eacute;der &agrave; la valeur renvoy&eacute;e depuis le code JavaScript, en appelant
la fonction dom.serverModel.getDelimiters().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets dans lequel chaque objet comporte les trois propri&eacute;t&eacute;s suivantes :
• La propri&eacute;t&eacute; startPattern est une expression r&eacute;guli&egrave;re qui correspond au d&eacute;limiteur d'ouverture du script (tel que &lt;%).
• La propri&eacute;t&eacute; endPattern est une expression r&eacute;guli&egrave;re qui correspond au d&eacute;limiteur de fermeture du script (tel que %&gt;).
• La propri&eacute;t&eacute; participateInMerge est une valeur bool&eacute;enne qui indique si le contenu entour&eacute; des d&eacute;limiteurs utilis&eacute;s
doit (true) ou non (false) prendre part &agrave; la fusion de blocs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
340
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
getServerModelDisplayName()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie le nom qui doit s'afficher dans l'interface utilisateur pour le mod&egrave;le de serveur. Vous pouvez
acc&eacute;der &agrave; cette valeur depuis le code JavaScript, en appelant la fonction dom.serverModel.getDisplayName().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne, telle que &quot;ASP JavaScript&quot;.
getServerModelFolderName()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie le nom du dossier &agrave; utiliser pour le mod&egrave;le de serveur dans le dossier Configuration. Vous
pouvez acc&eacute;der &agrave; cette valeur depuis le code JavaScript, en appelant la fonction
dom.serverModel.getFolderName().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend une cha&icirc;ne, telle que &quot;ASP_JS&quot;.
getServerSupportsCharset()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction renvoie une valeur true si le serveur en cours prend en charge le jeu de caract&egrave;res sp&eacute;cifi&eacute;. Dans
JavaScript, vous pouvez d&eacute;terminer si le mod&egrave;le de serveur prend en charge un jeu de caract&egrave;res donn&eacute; en appelant la
fonction dom.serverModel.getServerSupportsCharset().
Arguments
metaCharSetString
L'argument metaCharSetString est une cha&icirc;ne qui stocke la valeur de l'attribut &quot;charset=&quot; des documents.
Derni&egrave;re mise &agrave; jour le 22/6/2011
341
EXTENSION DE DREAMWEAVER
Mod&egrave;les de serveur
Valeurs renvoy&eacute;es
Dreamweaver attend une valeur bool&eacute;enne.
getVersionArray()
Disponibilit&eacute;
Dreamweaver UltraDev 1, d&eacute;conseill&eacute;e dans Dreamweaver MX.
Description
Cette fonction extrait le mappage de technologies de serveur et de num&eacute;ros de version. Cette fonction est appel&eacute;e par
dom.serverModel.getServerVersion().
Arguments
Aucun.
Valeurs renvoy&eacute;es
Dreamweaver attend un tableau d'objets de version, chacun &eacute;tant dot&eacute; d'un nom et d'une valeur, comme indiqu&eacute; dans
les exemples suivants :
•
ASP version 2.0
•
ADODB version 2.1
Derni&egrave;re mise &agrave; jour le 22/6/2011
342
Chapitre 22 : Traducteurs de donn&eacute;es
Les traducteurs de donn&eacute;es traduisent les marques sp&eacute;cialis&eacute;es en code qu'Adobe Dreamweaver peut lire et afficher.
Parmi les marques sp&eacute;cialis&eacute;es, citons les inclusions c&ocirc;t&eacute; serveur, les instructions JavaScript conditionnelles ou
d'autres codes comme PHP3, JSP, CFML ou ASP. Dans Dreamweaver, vous pouvez traduire des attributs au sein de
balises ainsi que des balises enti&egrave;res ou des blocs de code. Tous les traducteurs de donn&eacute;es (blocs/balises ou attributs)
sont des fichiers HTML.
Il peut arriver que la traduction de donn&eacute;es implique des op&eacute;rations complexes qui ne peuvent pas &ecirc;tre ex&eacute;cut&eacute;es &agrave;
l'aide de JavaScript ou qui peuvent l'&ecirc;tre de mani&egrave;re plus efficace en C. C'est notamment le cas des balises ou des blocs
de code entiers. Si vous connaissez bien C ou C++, consultez &eacute;galement le guide &laquo; Extensions C &raquo; &agrave; la page 361.
Le tableau ci-dessous recense les fichiers utilis&eacute;s pour cr&eacute;er un traducteur de donn&eacute;es.
Chemin
Fichier
Description
Configuration/ThirdPartyTags/
langage.xml
Contient des informations sur les balises dans le langage de
marquage.
Configuration/ThirdPartyTags/
langage.gif
Ic&ocirc;nes des balises dans le langage.
Configuration/Translators/
langage.htm
Contient des fonctions JavaScript associ&eacute;es au traducteur de
donn&eacute;es.
Fonctionnement des traducteurs de donn&eacute;es
Dreamweaver traite tous les fichiers de traducteur de la m&ecirc;me fa&ccedil;on, qu'ils convertissent des balises enti&egrave;res ou
uniquement des attributs. Au d&eacute;marrage, Dreamweaver lit tous les fichiers du dossier Configuration/Translators et
appelle la fonction getTranslatorInfo() afin d'obtenir des informations au sujet du traducteur. Dreamweaver
ignore tous les fichiers dans lesquels la fonction getTranslatorInfo() est absente ou qui contiennent une erreur
emp&ecirc;chant de la d&eacute;finir.
Remarque : Pour &eacute;viter que des erreurs JavaScript n'affectent le d&eacute;marrage, les erreurs d&eacute;tect&eacute;es dans un fichier de
traducteur ne sont signal&eacute;es qu'apr&egrave;s le chargement de tous les traducteurs. Pour plus d'informations sur le d&eacute;bogage de
traducteurs, voir &laquo; Recherche de bogues dans le traducteur &raquo; &agrave; la page 349.
Dreamweaver appelle &eacute;galement la fonction translateMarkup() dans tous les fichiers de traducteur appropri&eacute;s
(comme indiqu&eacute; dans les pr&eacute;f&eacute;rences de traduction) chaque fois que l'utilisateur ajoute un nouveau contenu ou
modifie un contenu existant qui requiert une traduction. Dreamweaver appelle la fonction translateMarkup()
lorsque l'utilisateur effectue l'une des op&eacute;rations suivantes :
• Ouverture d'un fichier dans Dreamweaver
• Retour au mode Cr&eacute;ation apr&egrave;s avoir effectu&eacute; des modifications dans le panneau HTML ou le mode Code
• Modification des propri&eacute;t&eacute;s d'un objet dans le document actif
• Insertion d'un objet (&agrave; l'aide de la barre ou du menu Insertion)
• Actualisation du document actif apr&egrave;s sa modification dans une autre application
• Application d'un mod&egrave;le au document
• Collage ou d&eacute;placement d'un contenu vers ou &agrave; l'int&eacute;rieur de la fen&ecirc;tre de document
Derni&egrave;re mise &agrave; jour le 22/6/2011
343
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
• Enregistrement des modifications dans un fichier d&eacute;pendant
• Appel d'une commande, d'un comportement, d'un comportement de serveur, d'un inspecteur Propri&eacute;t&eacute;s ou de
toute autre extension qui d&eacute;finit la propri&eacute;t&eacute; innerHTML ou outerHTML d'un objet de balise ou la propri&eacute;t&eacute; data
d'un objet de commentaire
• S&eacute;lection de Fichier &gt; Convertir &gt; Format compatible avec les navigateurs 3.0
• S&eacute;lection de Modifier &gt; Convertir &gt; Conversion des tableaux en divs PA
• S&eacute;lection de Modifier &gt; Convertir &gt; Convertir les divs PA en tableaux
• Modification d'une balise ou d'un attribut dans Quick Tag Editor, suivie de l'activation de la touche de tabulation
ou Entr&eacute;e
D&eacute;termination du type de traducteur &agrave; utiliser
Tous les traducteurs doivent contenir les fonctions getTranslatorInfo() et translateMarkup() et doivent r&eacute;sider
dans le dossier Configuration/Translators. Ils se distinguent toutefois par le type de code qu'ils ins&egrave;rent dans le
document de l'utilisateur et par la fa&ccedil;on dont ce code doit &ecirc;tre contr&ocirc;l&eacute;, comme indiqu&eacute; dans la liste suivante :
• Pour traduire de petites parties de balises serveur qui d&eacute;terminent des valeurs d'attribut ou ajoutent
conditionnellement des attributs &agrave; une balise HTML standard, vous devez &eacute;crire un traducteur d'attributs. Les
balises HTML standard contenant des attributs traduits peuvent &ecirc;tre contr&ocirc;l&eacute;es &agrave; l'aide des inspecteurs Propri&eacute;t&eacute;s
int&eacute;gr&eacute;s &agrave; Dreamweaver. Il n'est pas n&eacute;cessaire d'&eacute;crire un inspecteur Propri&eacute;t&eacute;s personnalis&eacute; (voir &laquo; Ajout d'un
attribut traduit &agrave; une balise &raquo; &agrave; la page 343).
• Pour traduire une balise enti&egrave;re (une inclusion c&ocirc;t&eacute; serveur, par exemple) ou un bloc de code (JavaScript,
ColdFusion, PHP ou tout autre script), vous devez &eacute;crire un traducteur de blocs/balises. Le code g&eacute;n&eacute;r&eacute; par un
traducteur de blocs/balises ne peut pas &ecirc;tre contr&ocirc;l&eacute; &agrave; l'aide des inspecteurs Propri&eacute;t&eacute;s int&eacute;gr&eacute;s &agrave; Dreamweaver.
Vous devez r&eacute;diger un inspecteur personnalis&eacute; pour le contenu traduit si vous souhaitez que les utilisateurs
puissent modifier les propri&eacute;t&eacute;s du code d'origine (voir &laquo; Verrouillage des balises ou des blocs de code traduits &raquo; &agrave;
la page 345).
Ajout d'un attribut traduit &agrave; une balise
La traduction des attributs est li&eacute;e &agrave; la capacit&eacute; de l'analyseur Dreamweaver &agrave; ignorer le balisage de serveur. Par d&eacute;faut,
Dreamweaver ignore d&eacute;j&agrave; les types de balisage de serveur les plus courants (tels que ASP, CFML et PHP) ; si vous
utilisez un balisage de serveur dont les marqueurs de d&eacute;but et de fin sont diff&eacute;rents, vous devez modifier la base de
donn&eacute;es de balises tierces pour assurer le bon fonctionnement de votre traducteur. Pour plus d'informations sur la
fa&ccedil;on de modifier la base de donn&eacute;es de balises propri&eacute;taires, voir &laquo; Personnalisation de Dreamweaver &raquo; dans
Utilisation de Dreamweaver.
Lorsque Dreamweaver g&egrave;re la conservation du balisage de serveur d'origine, le traducteur g&eacute;n&egrave;re une valeur d'attribut
valide qui s'affiche dans la fen&ecirc;tre de document. Si vous utilisez un balisage de serveur uniquement pour des attributs
qui n'ont pas d'effet visible pour l'utilisateur, vous n'avez pas besoin de traducteur.
Le traducteur cr&eacute;e une valeur d'attribut ayant un effet visible dans la fen&ecirc;tre de document en ajoutant un attribut
sp&eacute;cial, mmTranslatedValue, &agrave; la balise qui contient le balisage de serveur. L'attribut mmTranslatedValue et sa valeur
ne sont ni visibles dans le panneau HTML ou en mode Code, ni enregistr&eacute;s avec le document.
Derni&egrave;re mise &agrave; jour le 22/6/2011
344
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
L'attribut mmTranslatedValue doit &ecirc;tre unique &agrave; l'int&eacute;rieur de la balise. S'il est probable que le traducteur devra
traduire plusieurs attributs dans une m&ecirc;me balise, ajoutez-lui une routine qui ajoute des num&eacute;ros &agrave; l'attribut
mmTranslatedValue (par exemple, mmTranslatedValue1, mmTranslatedValue2, etc.).
La valeur de l'attribut mmTranslatedValue doit &ecirc;tre une cha&icirc;ne cod&eacute;e en URL contenant au moins une paire
attribut/valeur valide. Cela signifie que mmTranslatedValue=&quot;src=%22open.jpg%22&quot; est une traduction valide pour
src=&quot;&lt;? if (dayType == weekday) then open.jpg else closed.jpg&quot; ?&gt; et &lt;? if (dayType == weekday)
then src=&quot;open.jpg&quot; else src=&quot;closed.jpg&quot; ?&gt;. Comme mmTranslatedValue=&quot;%22open.jpg%22&quot; ne
contient que la valeur, et pas l'attribut, il n'est valide pour aucun des exemples.
Traduction de plusieurs attributs &agrave; la fois
L'attribut mmTranslatedValue peut contenir plusieurs paires attribut/valeur valides. Examinez le code non traduit
suivant :
&lt;img &lt;? if (dayType==weekday) then src=&quot;open.jpg&quot; width=&quot;320&quot; height=&quot;100&quot; else
src=&quot;closed.jpg&quot; width=&quot;100&quot; height=&quot;320&quot; ?&gt; alt=&quot;We're open 24 hours a day from
12:01am Monday until 11:59pm Friday&quot;&gt;
L'exemple suivant indique comment se pr&eacute;sente le balisage apr&egrave;s traduction :
&lt;img &lt;? if (dayType==weekday) then src=&quot;open.jpg&quot; width=&quot;320&quot; height=&quot;100&quot; else
src=&quot;closed.jpg&quot; width=&quot;100&quot; height=&quot;320&quot; ?&gt;
mmTranslatedValue=&quot;src=%22open.jpg%22 width=%22320%22 height=%22100%22&quot;
alt=&quot;We're open 24 hours a day from 12:01am Monday until 11:59pm Friday&quot;&gt;
Les espaces entre les paires attribut/valeur dans l'attribut mmTranslatedValue ne sont pas cod&eacute;s. Etant donn&eacute; que
Dreamweaver recherche ces espaces lorsqu'il essaie de restituer la valeur traduite, chaque paire attribut/valeur de
l'attribut mmTranslatedValue doit &ecirc;tre cod&eacute;e s&eacute;par&eacute;ment, puis toutes les paires doivent &ecirc;tre de nouveau regroup&eacute;es
pour former l'ensemble de l'attribut mmTranslatedValue. Vous trouverez un exemple de ce processus dans la section
&laquo; Exemple de traducteur d'attributs simple &raquo; &agrave; la page 350.
Inspection des attributs traduits
Les attributs traduits ne n&eacute;cessitent pas de verrou, ce qui facilite l'inspection des balises qui les contiennent.
Lorsqu'un balisage de serveur stipule un attribut unique qui est repr&eacute;sent&eacute; dans un inspecteur Propri&eacute;t&eacute;s,
Dreamweaver l'affiche dans l'inspecteur Propri&eacute;t&eacute;s.
Le balisage s'affiche, qu'il soit associ&eacute; ou non &agrave; un traducteur. Le traducteur s'ex&eacute;cute chaque fois que l'utilisateur
modifie le balisage de serveur indiqu&eacute; dans l'inspecteur Propri&eacute;t&eacute;s.
Lorsque le balisage de serveur contr&ocirc;le plusieurs attributs dans une balise, il n'appara&icirc;t pas dans l'inspecteur Propri&eacute;t&eacute;s.
Toutefois, l'&eacute;clair indique qu'il existe un balisage traduit pour l'&eacute;l&eacute;ment s&eacute;lectionn&eacute;.
Remarque : L'ic&ocirc;ne en forme d'&eacute;clair n'appara&icirc;t pas lorsque du texte ou des cellules, des lignes ou des colonnes de tableau
sont s&eacute;lectionn&eacute;s. La traduction continue si l'utilisateur modifie le balisage de serveur dans le panneau et s'il existe un
traducteur qui traite ce type de balisage.
Les zones de texte de l'inspecteur Propri&eacute;t&eacute;s sont modifiables. Les utilisateurs peuvent entrer des valeurs pour les
attributs contr&ocirc;l&eacute;s par le balisage de serveur. Il en r&eacute;sulte des attributs en double. Si une valeur traduite et une valeur
ordinaire sont toutes deux d&eacute;finies pour un attribut pr&eacute;cis, Dreamweaver affiche la valeur traduite dans la fen&ecirc;tre
Document, d&eacute;cide si votre traducteur recherche les attributs en double et les supprime.
Derni&egrave;re mise &agrave; jour le 22/6/2011
345
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
Verrouillage des balises ou des blocs de code traduits
En r&egrave;gle g&eacute;n&eacute;rale, vous attendez d'un traducteur qu'il modifie le balisage de fa&ccedil;on &agrave; ce que Dreamweaver puisse
l'afficher, mais vous souhaitez sauvegarder celui d'origine, et non les modifications. Dans un tel cas, Dreamweaver
fournit des balises XML sp&eacute;ciales pour envelopper le contenu traduit et se reporter au code d'origine.
Lorsque vous utilisez ces balises XML, le contenu des attributs d'origine est reproduit en mode Code. Si vous
enregistrez le fichier, le balisage d'origine non traduit est &eacute;crit dans le fichier. Le contenu non traduit est ce qui appara&icirc;t
en mode Code.
La syntaxe des balises XML est indiqu&eacute;e dans l'exemple suivant :
&lt;MM:BeginLock translatorClass=&quot;translatorClass&quot; &not;
type=&quot;tagNameOrType&quot; depFiles=&quot;dependentFilesList&quot; &not;
orig=&quot;encodedOriginalMarkup&quot;&gt;
Translated content
&lt;MM:EndLock&gt;
Dans cet exemple, les valeurs ont la signification suivante :
• La valeur translatorClass correspond &agrave; l'identificateur unique pour le traducteur. C'est la premi&egrave;re cha&icirc;ne du
tableau que renvoie la fonction getTranslatorInfo().
• La valeur tagNameOrType est une cha&icirc;ne qui identifie le type de balisage (ou le nom de balise associ&eacute;) du contenu
verrouill&eacute;. Cette cha&icirc;ne ne peut contenir que des caract&egrave;res alphanum&eacute;riques, des traits d'union (-) ou des
caract&egrave;res de soulignement (_). Vous pouvez v&eacute;rifier cette valeur dans la fonction canInspectSelection() d'un
inspecteur Propri&eacute;t&eacute;s personnalis&eacute; pour d&eacute;terminer si cet inspecteur est adapt&eacute; au contenu. Pour plus
d'informations, voir &laquo; Cr&eacute;ation d'inspecteurs Propri&eacute;t&eacute;s pour du contenu verrouill&eacute; &raquo; &agrave; la page 346. Un contenu
verrouill&eacute; ne peut pas &ecirc;tre contr&ocirc;l&eacute; par les inspecteurs Propri&eacute;t&eacute;s int&eacute;gr&eacute;s de Dreamweaver. Par exemple, la
sp&eacute;cification de type=&quot;IMG&quot; n'entra&icirc;ne pas l'affichage de l'inspecteur d'images.
• La valeur dependentFilesList est une cha&icirc;ne qui contient une liste de fichiers s&eacute;par&eacute;s par des virgules dont d&eacute;pend
le balisage verrouill&eacute;. Les fichiers sont r&eacute;f&eacute;renc&eacute;s sous la forme d'URL relatives au document de l'utilisateur. Si
l'utilisateur met &agrave; jour l'un des fichiers de la liste dependentFilesList, Dreamweaver retraduit automatiquement le
contenu dans le document comportant cette liste.
• La valeur encodedOriginalMarkup est une cha&icirc;ne qui contient le balisage d'origine non traduit et cod&eacute; &agrave; l'aide d'un
extrait de code URL (utilisez %22 pour &quot;, %3C pour &lt;, %3E pour &gt; et %25 pour %). La fa&ccedil;on la plus rapide de coder
une cha&icirc;ne en URL consiste &agrave; utiliser la m&eacute;thode escape(). Par exemple, si myString est &eacute;gal &agrave; '&lt;img
src=&quot;foo.gif&quot;&gt;', escape(myString) renvoie %3Cimg%20src=%22foo.gif%22%3E.
L'exemple suivant montre la partie de code verrouill&eacute;e pouvant &ecirc;tre g&eacute;n&eacute;r&eacute;e &agrave; partir de la traduction de l'inclusion c&ocirc;t&eacute;
serveur &lt;!--#include virtual=&quot;/footer.html&quot; --&gt; :
Derni&egrave;re mise &agrave; jour le 22/6/2011
346
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
&lt;MM:BeginLock translatorClass=&quot;MM_SSI&quot; type=&quot;ssi&quot; &not;
depFiles=&quot;C:\sites\webdev\footer.html&quot; orig=&quot;%3C!--#include &not;
virtual=%22/footer.html%22%20--%3E&quot;&gt;
&lt;!-- begin footer --&gt;
&lt;CENTER&gt;
&lt;HR SIZE=1 NOSHADE WIDTH=100%&gt;
&lt;BR&gt;
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/&quot;&gt;home&lt;/A&gt;]
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/products/&quot;&gt;products&lt;/A&gt;]
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/services/&quot;&gt;services&lt;/A&gt;]
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/support/&quot;&gt;support&lt;/A&gt;]
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/company/&quot;&gt;about us&lt;/A&gt;]
[&lt;A TARGET=&quot;_top&quot; HREF=&quot;/help/&quot;&gt;help&lt;/A&gt;]
&lt;/CENTER&gt;
&lt;!-- end footer --&gt;
&lt;MM:EndLock&gt;
La cr&eacute;ation d'un traducteur qui verrouille du code dans une balise script risque de provoquer un &eacute;chec. Par exemple,
consid&eacute;rons le code suivant :
&lt;script language=&quot;javascript&quot;&gt;
&lt;!-function foo() {
alert('&lt;bean:message key=&quot;show.message&quot;/&gt;');
}
// --&gt;
&lt;/script&gt;
Cr&eacute;ez ensuite un traducteur pour la balise bean:message. Dans ce cas, le traducteur &eacute;choue, car vous cr&eacute;ez une section
MM:BeginLock au sein d'une autre section MM:BeginLock. Une solution de contournement consiste &agrave; cr&eacute;er une
enveloppe JSP autour de la balise bean:message qui utilise plusieurs balises JSP standard, telles que &lt;%=
My_lookup.lookup(&quot;show.message&quot;) %&gt;. Dans ce cas, le traducteur ignore ce code et la traduction aboutit.
Cr&eacute;ation d'inspecteurs Propri&eacute;t&eacute;s pour du contenu
verrouill&eacute;
Une fois que vous avez cr&eacute;&eacute; un traducteur, vous devez cr&eacute;er un inspecteur Propri&eacute;t&eacute;s pour le contenu afin de permettre
&agrave; l'utilisateur d'en modifier les propri&eacute;t&eacute;s (le fichier &agrave; inclure ou l'une des conditions d'une instruction conditionnelle,
par exemple). Le contr&ocirc;le d'un contenu traduit pose un probl&egrave;me particulier pour les raisons suivantes :
• L'utilisateur peut d&eacute;cider de modifier les propri&eacute;t&eacute;s du contenu traduit. Dans ce cas, ces modifications doivent &ecirc;tre
r&eacute;percut&eacute;es dans le contenu non traduit.
• Le DOM (mod&egrave;le d'objet de document) contient le contenu traduit (ce qui signifie que les balises lock et les balises
qu'elles englobent sont des nœuds du DOM), mais la propri&eacute;t&eacute; outerHTML de l'objet documentElement ainsi que
les fonctions dreamweaver.getSelection() et dreamweaver.nodeToOffsets() agissent sur la source non
traduite.
• Les balises que vous contr&ocirc;lez sont diff&eacute;rentes avant et apr&egrave;s la traduction.
Un commentaire de l'inspecteur Propri&eacute;t&eacute;s pour la balise HAPPY non traduite peut ressembler, par exemple, au code
suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
347
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
&lt;!-- tag:HAPPY,priority:5,selection:exact,hline,vline, attrName:xxx,&not; attrValue:yyy --&gt;
Par contre, un commentaire de ce m&ecirc;me inspecteur Propri&eacute;t&eacute;s pour la balise HAPPY traduite ressemblerait au code
suivant :
&lt;!-- tag:*LOCKED*,priority:5,selection:within,hline,vline --&gt;
La fonction canInspectSelection() de l'inspecteur Propri&eacute;t&eacute;s HAPPY non traduit est simple. Le type selection
correspondant &agrave; exact, elle peut renvoyer la valeur true sans autre analyse. Pour l'inspecteur Propri&eacute;t&eacute;s de la balise
HAPPY traduite, cette fonction est plus complexe. Le mot cl&eacute; *LOCKED* indique que l'inspecteur est appropri&eacute;
lorsque la s&eacute;lection se trouve &agrave; l'int&eacute;rieur d'une r&eacute;gion verrouill&eacute;e, mais comme un document peut comporter
plusieurs r&eacute;gions verrouill&eacute;es, des v&eacute;rifications suppl&eacute;mentaires sont n&eacute;cessaires pour d&eacute;terminer si l'inspecteur
correspond &agrave; cette r&eacute;gion pr&eacute;cise.
Le contr&ocirc;le d'un contenu traduit pr&eacute;sente un probl&egrave;me suppl&eacute;mentaire. Lorsque vous appelez la fonction
dom.getSelection(), les valeurs renvoy&eacute;es par d&eacute;faut sont des d&eacute;calages dans la source non traduite. Pour
&eacute;tendre la s&eacute;lection de fa&ccedil;on &agrave; s&eacute;lectionner uniquement la r&eacute;gion verrouill&eacute;e, utilisez la m&eacute;thode suivante :
var currentDOM = dw.getDocumentDOM();
var offsets = currentDOM.getSelection();
var theSelection = currentDOM.offsetsToNode(offsets[0],offsets[0]+1);
L'utilisation de offsets[0]+1 comme deuxi&egrave;me argument permet de vous assurer que vous restez dans les limites
de la balise de verrouillage de d&eacute;but lorsque vous traduisez les d&eacute;calages d'octets en nœud. Si vous utilisez
offsets[1] comme deuxi&egrave;me argument, vous risquez de s&eacute;lectionner le nœud situ&eacute; au-dessus du verrou.
Une fois la s&eacute;lection effectu&eacute;e et apr&egrave;s vous &ecirc;tre assur&eacute; que nodeType est r&eacute;gl&eacute; sur node.ELEMENT_NODE), vous
pouvez contr&ocirc;ler l'attribut type pour v&eacute;rifier que la r&eacute;gion verrouill&eacute;e correspond &agrave; cet inspecteur Propri&eacute;t&eacute;s,
comme indiqu&eacute; dans l'exemple suivant :
if (theSelection.nodeType == node.ELEMENT_NODE &amp;&amp; &not;
theSelection.getAttribute('type') == 'happy'){
return true;
}else{
return false
}
Pour renseigner les zones de texte de l'inspecteur Propri&eacute;t&eacute;s pour la balise traduite, vous devez analyser la valeur de
l'attribut orig. Par exemple, si le code non traduit est &lt;HAPPY TIME=&quot;22&quot;&gt; et que l'inspecteur Propri&eacute;t&eacute;s contient
une zone de texte Time, vous devez extraire la valeur de l'attribut TIME de la cha&icirc;ne orig :
Derni&egrave;re mise &agrave; jour le 22/6/2011
348
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
function inspectSelection() {
var currentDOM = dw.getDocumentDOM();
var currSelection = currentDOM.getSelection();
var theObj = currentDOM.offsetsToNode(curSelection[0],curSelection[0]+1);
if (theObj.nodeType != Node.ELEMENT_NODE) {
return;
}
// To convert the encoded characters back to their
// original values, use the unescape() method.
var origAtt = unescape(theObj.getAttribute(&quot;ORIG&quot;));
// Convert the string to lowercase for processing
var origAttLC = origAtt.toLowerCase();
var timeStart = origAttLC.indexOf('time=&quot;');
var timeEnd = origAttLC.indexOf('&quot;',timeStart+6);
var timeValue = origAtt.substring(timeStart+6,timeEnd);
document.layers['timelayer'].document.timeForm.timefield.value = timeValue;
}
Apr&egrave;s avoir analys&eacute; l'attribut orig en vue de renseigner les zones de texte de l'inspecteur Propri&eacute;t&eacute;s pour la balise
traduite, vous devrez probablement d&eacute;finir la valeur de l'attribut orig si l'utilisateur modifie la valeur de l'une des
zones. Il existe certaines restrictions quant aux modifications que vous pouvez effectuer dans une r&eacute;gion
verrouill&eacute;e. Vous pouvez contourner ce probl&egrave;me en modifiant le balisage d'origine puis en proc&eacute;dant &agrave; une
nouvelle traduction.
L'inspecteur Propri&eacute;t&eacute;s des SSI traduites (fichier ssi_translated.js du dossier Configuration/Inspectors) d&eacute;montre
cette technique avec sa fonction setComment(). Au lieu de r&eacute;&eacute;crire l'attribut orig, l'inspecteur assemble un
nouveau commentaire de SSI. Il ins&egrave;re ce commentaire dans le document, rempla&ccedil;ant l'ancien en r&eacute;&eacute;crivant le
contenu du document, ce qui g&eacute;n&egrave;re un nouvel attribut orig. Le code suivant r&eacute;sume cette technique :
// Assemble the new include comment. radioStr and URL are
// variables defined earlier in the code.
newInc = &quot;&lt;!--#include &quot; + radioStr + &quot;=&quot; + '&quot;' + URL + '&quot;' + &quot; --&gt;&quot;;
// Get the contents of the document.
var entireDocObj = dreamweaver.getDocumentDOM();
var docSrc = entireDocObj.documentElement.outerHTML;
// Store everything up to the SSI comment and everything after
// the SSI comment in the beforeSelStr and afterSelStr variables.
var beforeSelStr = docSrc.substring(0, curSelection[0] );
var afterSelStr= docSrc.substring(curSelection[1]);
// Assemble the new contents of the document.
docSrc = beforeSelStr + newInc + afterSelStr;
// Set the outerHTML of the HTML tag (represented by
// the documentElement object) to the new contents,
// and then set the selection back to the locked region
// surrounding the SSI comment.
entireDocObj.documentElement.outerHTML = docSrc;
entireDocObj.setSelection(curSelection[0], curSelection[0]+1);
Derni&egrave;re mise &agrave; jour le 22/6/2011
349
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
Recherche de bogues dans le traducteur
Si la fonction translateMarkup() contient certains types d'erreur, le traducteur se charge correctement, mais il
&eacute;choue sans afficher de message d'erreur si vous essayer de l'appeler. Bien que cette panne discr&egrave;te emp&ecirc;che
Dreamweaver de devenir instable, elle peut ralentir le d&eacute;veloppement, surtout lorsque vous devez rechercher une
erreur de syntaxe mineure dans plusieurs lignes de code.
Si l'ex&eacute;cution du traducteur &eacute;choue, une m&eacute;thode de d&eacute;bogage efficace consiste &agrave; convertir le traducteur en
commande, en proc&eacute;dant comme suit :
1 Copiez tout le contenu du fichier du traducteur dans un nouveau document, puis enregistrez-le dans le sous-dossier
Configuration/Commands du dossier de l'application Dreamweaver.
2 Au d&eacute;but du document, entre les balises SCRIPT, ajoutez la fonction suivante :
function commandButtons(){
return new Array( &quot;OK&quot;,&quot;translateMarkup(dreamweaver.&not;
getDocumentPath('document'), dreamweaver.getSiteRoot(), &not;
dreamweaver.getDocumentDOM().documentElement.outerHTML); &not;
window.close()&quot;, &quot;Cancel&quot;, &quot;window.close()&quot;);
}
3 A la fin de la fonction translateMarkup(), appliquez un commentaire &agrave; la ligne
returnsuivieParUneValeurQuelconque et remplacez-la par
dreamweaver.getDocumentDOM().documentElement.outerHTML = suivieParUneValeurQuelconque,
comme indiqu&eacute; dans l'exemple suivant :
// return theCode;
dreamweaver.getDocumentDOM().documentElement.outerHTML = theCode;
}
/* end of translateMarkup() */
4 Dans la balise body du document, ajoutez un formulaire sans zones de texte :
&lt;body&gt;
&lt;form&gt;
Hello.
&lt;/form&gt;
&lt;/body&gt;
5 Red&eacute;marrez Dreamweaver, puis s&eacute;lectionnez la commande relative &agrave; votre traducteur dans le menu Commandes.
Lorsque vous cliquez sur OK, la fonction translateMarkup() est appel&eacute;e et simule une traduction.
Si aucun message d'erreur ne s'affiche et que la traduction continue d'&eacute;chouer, il est probable que votre code
contienne une erreur de logique.
6 Ajoutez des instructions alert() &agrave; des points strat&eacute;giques de la fonction translateMarkup() de fa&ccedil;on &agrave; vous
assurer que vous touchez les ramifications appropri&eacute;es et &agrave; v&eacute;rifier les valeurs des variables et des propri&eacute;t&eacute;s &agrave; des
points diff&eacute;rents :
for (var i=0; i&lt; foo.length; i++){
alert(&quot;we're at the top of foo.length array, and the value of i is &quot; + i);
/* rest of loop */
}
7 Une fois les instructions alert() ajout&eacute;es, choisissez votre commande dans le menu Commandes, cliquez sur
Annuler, puis choisissez-la de nouveau. Cette op&eacute;ration recharge le fichier de commandes en int&eacute;grant vos
modifications.
Derni&egrave;re mise &agrave; jour le 22/6/2011
350
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
Exemple de traducteur d'attributs simple
Pour mieux comprendre le principe de la traduction d'attributs, il peut &ecirc;tre utile d'examiner un exemple. Le traducteur
suivant est un balisage Poco (Pound Conditional), une syntaxe quelque peu similaire &agrave; ASP ou PHP.
Pour cr&eacute;er le traducteur d'attribut, cr&eacute;ez une balise tagspec, une ic&ocirc;ne et un traducteur d'attribut.
Cr&eacute;ation de la balise tagspec
La premi&egrave;re &eacute;tape pour assurer le bon fonctionnement de ce traducteur consiste &agrave; cr&eacute;er une balise tagspec pour le
balisage Poco afin d'&eacute;viter que Dreamweaver n'analyse les instructions Poco non traduites.
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
&lt;tagspec tag_name=&quot;poco&quot; start_string=&quot;&lt;#&quot; end_string=&quot;#&gt;&quot; &not;
detect_in_attribute=&quot;true&quot; icon=&quot;poco.gif&quot; icon_width=&quot;17&quot; &not;
icon_height=&quot;15&quot;&gt;&lt;/tagspec&gt;
3 Enregistrez le fichier sous le nom poco.xml dans le dossier Configuration/ThirdPartyTags.
Pour obtenir un exemple de cr&eacute;ation de la balise tagspec, consultez le fichier Tags.xml dans le dossier
Configuration/ThirdPartyTags.
Cr&eacute;ation de l'ic&ocirc;ne
Cr&eacute;ez ensuite l'ic&ocirc;ne associ&eacute;e aux balises Poco.
1 Cr&eacute;ez un fichier d'image de 18 x 18 pixels pour l'ic&ocirc;ne des balises Poco.
2 Enregistrez le fichier sous le nom poco.gif dans le dossier Configuration/ThirdPartyTags.
Cr&eacute;ation du traducteur d'attributs
Cr&eacute;ez un fichier HTML contenant les fonctions requises pour le traducteur d'attributs.
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
351
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Conditional Translator&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=&quot;&gt;
&lt;script language=&quot;JavaScript&quot;&gt;
/*************************************************************
* This translator handles the following statement syntaxes: *
* &lt;# if (condition) then foo else bar #&gt;
*
* &lt;# if (condition) then att=&quot;foo&quot; else att=&quot;bar&quot; #&gt;
*
* &lt;# if (condition) then att1=&quot;foo&quot; att2=&quot;jinkies&quot;
*
* att3=&quot;jeepers&quot; else att1=&quot;bar&quot; att2=&quot;zoinks&quot; #&gt;
*
*
*
* It does not handle statements with no else clause.
*
*************************************************************/
var count = 1;
function translateMarkup(docNameStr, siteRootStr, inStr){
var count = 1;
// Counter to ensure unique mmTranslatedValues
var outStr = inStr;
// String that will be manipulated
var spacer = &quot;&quot;;
// String to manage space between encoded attributes
var start = inStr.indexOf('&lt;# if');
// 1st instance of Pound Conditional code
// Declared but not initalized //
var attAndValue;
// Boolean indicating whether the attribute is part of
// the conditional statement
var trueStart;
// The beginning of the true case
var falseStart;
// The beginning of the false case
var trueValue;
// The HTML that would render in the true case
var attName;
// The name of the attribute that is being
// set conditionally.
var equalSign;
// The position of the equal sign just to the
// left of the &lt;#, if there is one
var transAtt;
// The entire translated attribute
var transValue;
// The value that must be URL-encoded
var back3FromStart;
// Three characters back from the start position
// (used to find equal sign to the left of &lt;#
var tokens;
// An array of all the attributes set in the true case
var end;
// The end of the current conditional statement.
// As long as there's still a &lt;# conditional that hasn't been
// translated.
while (start != -1){
back3FromStart = start-3;
Derni&egrave;re mise &agrave; jour le 22/6/2011
352
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
end = outStr.indexOf(' #&gt;',start);
equalSign = outStr.indexOf('=&quot;&lt;# if',back3FromStart);
attAndValue = (equalSign != -1)?false:true;
trueStart = outStr.indexOf('then', start);
falseStart = outStr.indexOf(' else', start);
trueValue = outStr.substring(trueStart+5, falseStart);
tokens = dreamweaver.getTokens(trueValue,' ');
//
//
//
//
if
If attAndValue is false, find out what attribute you're
translating by backing up from the equal sign to the
first space. The substring between the space and the
equal sign is the attribute.
(!attAndValue){
for (var i=equalSign; i &gt; 0; i--){
if (outStr.charAt(i) == &quot; &quot;){
attName = outStr.substring(i+1,equalSign);
break;
}
}
transValue = attName + '=&quot;' + trueValue + '&quot;';
transAtt = ' mmTranslatedValue' + count + '=&quot;' + &not;
escape(transValue) + '&quot;';
outStr = outStr.substring(0,end+4) + transAtt + &not;
outStr.substring(end+4);
// If attAndValue is true, and tokens is greater than
// 1, then trueValue is a series of attribute/value
// pairs, not just one. In that case, each attribute/value
// pair must be encoded separately and then added back
// together to make the translated value.
}else if (tokens.length &gt; 1){
transAtt = ' mmTranslatedValue' + count + '=&quot;'
for (var j=0; j &lt; tokens.length; j++){
tokens[j] = escape(tokens[j]);
if (j&gt;0){
spacer=&quot; &quot;;
}
transAtt += spacer + tokens[j];
}
transAtt += '&quot;';
outStr = outStr.substring(0,end+3) + transAtt + &not;
outStr.substring(end+3)
// If attAndValue is true and tokens is not greater
// than 1, then trueValue is a single attribute/value pair.
// This is the simplest case, where all that is necessary is
// to encode trueValue.
}else{
transValue = trueValue;
transAtt = ' mmTranslatedValue' + count + '=&quot;' + &not;
escape(transValue) + '&quot;';
outStr = outStr.substring(0,end+3) + transAtt + &not;
outStr.substring(end+3);
}
// Increment the counter so that the next instance
// of mmTranslatedValue will have a unique name, and
// then find the next &lt;# conditional in the code.
count++;
Derni&egrave;re mise &agrave; jour le 22/6/2011
353
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
start = outStr.indexOf('&lt;# if',end);
}
// Return the translated string.
return outStr
}
function getTranslatorInfo(){
returnArray = new Array(7);
returnArray[0] = &quot;Pound_Conditional&quot;;
returnArray[1] = &quot;Pound Conditional Translator&quot;;
returnArray[2] = &quot;2&quot;;
returnArray[3] = &quot;html&quot;;
returnArray[4] = &quot;htm&quot;;
returnArray[5] = &quot;1&quot;;
returnArray[6] = &quot;&lt;#&quot;;
returnArray[7] = &quot;byString&quot;;
returnArray[8] = &quot;50&quot;;
return returnArray
//
//
//
//
//
//
//
//
The
The
The
The
The
The
The
translatorClass
title
number of extensions
first extension
second extension
number of expressions
first expression
//
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom poco.htm dans le dossier Configuration/Translators.
Exemple de traducteur de blocs/balises simple
Pour vous aider &agrave; comprendre la traduction, examinez un traducteur enti&egrave;rement &eacute;crit en JavaScript, qui n'utilise de
biblioth&egrave;que C pour aucune fonctionnalit&eacute;. Le traducteur suivant serait plus efficace s'il &eacute;tait &eacute;crit en C, mais sa version
JavaScript est plus simple et constitue de ce fait un exemple id&eacute;al pour illustrer le fonctionnement des traducteurs.
Comme la plupart des traducteurs, celui-ci est con&ccedil;u pour &eacute;muler le comportement d'un serveur. Supposons que votre
serveur Web soit configur&eacute; pour remplacer la balise KENT par la photo d'un technicien diff&eacute;rent selon le jour de la
semaine, l'heure de la journ&eacute;e ou la plate-forme de l'utilisateur. Le traducteur ex&eacute;cute la m&ecirc;me op&eacute;ration, mais
uniquement localement.
Cr&eacute;ation du traducteur de blocs/balises
1 Cr&eacute;ez un document vierge.
2 Entrez le code suivant :
Derni&egrave;re mise &agrave; jour le 22/6/2011
354
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Kent Tag Translator&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=&quot;&gt;
&lt;script language=&quot;JavaScript&quot;&gt;
/**********************************************************
* The getTranslatorInfo() function provides information *
* about the translator, including its class and name,
*
* the types of documents that are likely to contain the *
* markup to be translated, the regular expressions that *
* a document containing the markup to be translated
*
* would match (whether the translator should run on all *
* files, no files, in files with the specified
*
* extensions, or in files matching the specified
*
* expressions).
*
**********************************************************/
function getTranslatorInfo(){
//Create a new array with 6 slots in it
returnArray = new Array(6);
returnArray[0] = &quot;DREAMWEAVER_TEAM&quot;;
returnArray[1] = &quot;Kent Tags&quot;;
returnArray[2] = &quot;0&quot;;
returnArray[3] = &quot;1&quot;;
returnArray[4] = &quot;&lt;kent&quot;;
returnArray[5] = &quot;byExpression&quot;;
return returnArray;
//
//
//
//
//
//
The translatorClass
The title
The number of extensions
The number of expressions
Expression
run if the file contains &quot;&lt;kent&quot;
}
/**************************************************************************
* The translateMarkup() function performs the actual translation.
*
* In this translator, the translateMarkup() function is written
*
* entirely in JavaScript (that is, it does not rely on a C library) -*
* and it's also extremely inefficient. It's a simple example, however,
*
* which is good for learning.
*
***************************************************************************/
function translateMarkup(docNameStr, siteRootStr, inStr){
var outStr = &quot;&quot;;
// The string to be returned after translation
var start = inStr.indexOf('&lt;kent&gt;'); // The first position of the KENT tag
// in the document.
var replCode = replaceKentTag();
// Calls the replaceKentTag() function
// to get the code that will replace KENT.
var outStr = &quot;&quot;;
// The string to be returned after translation
//If the document does not contain any content, terminate the translation.
if ( inStr.length &lt;= 0 ){
return &quot;&quot;;
}
// As long as start, which is equal to the location in inStr of the
// KENT tag, is not equal to -1 (that is, as long as there is another
// KENT tag in the document)
while (start != -1){
// Copy everything up to the start of the KENT tag.
// This is very important, as translators should never change
// anything other than the markup that is to be translated.
outStr = inStr.substring(0, start);
// Replace the KENT tag with the translated HTML, wrapped in special
Derni&egrave;re mise &agrave; jour le 22/6/2011
355
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
// locking tags. For more information on the repacement operation, see
// the comments in the replaceKentTag() function.
outStr = outStr + replCode;
// Copy everything after the KENT tag.
outStr = outStr + inStr.substring(start+6);
// Use the string you just created for the next trip through
// the document. This is the most inefficient part of all.
inStr = outStr;
start = inStr.indexOf('&lt;kent&gt;');
}
// When there are no more KENT tags in the document, return outStr.
return outStr;
}
/**************************************************************
* The replaceKentTag() function assembles the HTML that will *
* replace the KENT tag and the special locking tags that will *
* surround the HTML. It calls the getImage() function to
*
* determine the SRC of the IMG tag.
*
**************************************************************/
function replaceKentTag(){
// The image to display.
var image = getImage();
// The location of the image on the local disk.
var depFiles = dreamweaver.getSiteRoot() + image;
// The IMG tag that will be inserted between the lock tags.
var imgTag = '&lt;IMG SRC=&quot;/' + image + '&quot; WIDTH=&quot;320&quot; HEIGHT=&quot;240&quot; ALT=&quot;Kent&quot;&gt;\n';
// 1st part of the opening lock tag. The remainder of the tag is assembled
below.
var start = '&lt;MM:BeginLock translatorClass=&quot;DREAMWEAVER_TEAM&quot; type=&quot;kent&quot;';
// The closing lock tag.
var end = '&lt;MM:EndLock&gt;';
//Assemble the lock tags and the replacement HTML.
var replCode = start + ' depFiles=&quot;' + depFiles + '&quot;';
replCode = replCode + ' orig=&quot;%3Ckent%3E&quot;&gt;\n';
replCode = replCode + imgTag;
replCode = replCode + end;
return replCode;
}
/******************************************************************
* The getImage() function determines which image to display
*
* based on the day of the week, the time of day and the
*
* user's platform. The day and time are figured based on UTC
*
* time (Greenwich Mean Time) minus 8 hours, which gives
*
* Pacific Standard Time (PST). No allowance is made for Daylight *
* Savings Time in this routine.
*
******************************************************************/
function getImage(){
var today = new Date();
// Today's date &amp; time.
var day = today.getUTCDay();
// Day of the week in the GMT time zone.
// 0=Sunday, 1=Monday, and so on.
Derni&egrave;re mise &agrave; jour le 22/6/2011
356
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
var hour = today.getUTCHours();
// The current hour in GMT, based on the
// 24-hour clock.
var SFhour = hour - 8;
// The time in San Francisco, based on the
// 24-hour clock.
var platform = navigator.platform;
// User's platform. All Windows computers
// are identified by Dreamweaver as &quot;Win32&quot;,
// all Macs as &quot;MacPPC&quot;.
var imageRef;
// The image reference to be returned.
// If SFhour is negative, you have two adjustments to make.
// First, subtract one from the day count because it is already the wee
// hours of the next day in GMT. Second, add SFhour to 24 to
// give a valid hour in the 24-hour clock.
if (SFhour &lt; 0){
day = day - 1;
// The day count back one would make it negative, and it's Saturday,
// so set the count to 6.
if (day &lt; 0){
day = 6;
}
SFhour = SFhour + 24;
}
// Now determine which photo to show based on whether it's a work day or a
// weekend; what time it is; and, if it's a time and day when Kent is
// working, what platform the user is on.
//If it's not Sunday
if (day != 0){
//And it's between 10am and noon, inclusive
if (SFhour &gt;= 10 &amp;&amp; SFhour &lt;= 12){
imageRef = &quot;images/kent_tiredAndIrritated.jpg&quot;;
//Or else it's between 1pm and 3pm, inclusive
}else if (SFhour &gt;= 13 &amp;&amp; SFhour &lt;= 15){
imageRef =&quot;images/kent_hungry.jpg&quot;;
//Or else it's between 4pm and 5pm, inclusive
}else if (SFhour &gt;= 16 &amp;&amp; SFhour &lt;= 17){
//If user is on Mac, show Kent working on Mac
if (platform == &quot;MacPPC&quot;){
imageRef = &quot;images/kent_gettingStartedOnMac.jpg&quot;;
//If user is on Win, show Kent working on Win
}else{
imageRef = &quot;images/kent_gettingStartedOnWin.jpg&quot;;
}
//Or else it's after 6pm but before the stroke of midnight
}else if (SFhour &gt;= 18){
//If it's Saturday
if (day == 6){
imageRef = &quot;images/kent_dancing.jpg&quot;;
//If it's not Saturday, check the user's platform
}else if (platform == &quot;MacPPC&quot;){
imageRef = &quot;images/kent_hardAtWorkOnMac.jpg&quot;;
Derni&egrave;re mise &agrave; jour le 22/6/2011
357
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
}else{
imageRef = &quot;images/kent_hardAtWorkOnWin.jpg&quot;;
}
}else{
imageRef = &quot;images/kent_sleeping.jpg&quot;;
}
//If it's after midnight and before 10am, or anytime on Sunday
}else{
imageRef = &quot;images/kent_sleeping.jpg&quot;;
}
return imageRef;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
3 Enregistrez le fichier sous le nom kent.htm dans le dossier Configuration/Translators.
Fonctions de l'API du traducteur de donn&eacute;es
Cette section d&eacute;crit les fonctions utilis&eacute;es pour d&eacute;finir les traducteurs de Dreamweaver.
getTranslatorInfo()
Description
Cette fonction affiche des informations sur le traducteur et sur les fichiers qu'il peut affecter.
Arguments
Aucun.
Valeurs renvoy&eacute;es
Tableau de cha&icirc;nes. Les &eacute;l&eacute;ments du tableau doivent appara&icirc;tre dans l'ordre suivant :
1 La cha&icirc;ne translatorClass identifie le traducteur de fa&ccedil;on unique. Cette cha&icirc;ne doit commencer par une lettre et
contenir uniquement des caract&egrave;res alphanum&eacute;riques, des traits d'union (-) et des caract&egrave;res de soulignement (_).
2 La cha&icirc;ne title d&eacute;crit le traducteur en 40 caract&egrave;res maximum.
3 La cha&icirc;ne nExtensions indique le nombre d'extensions de fichier qui suivent. Si nExtensions est &eacute;gal &agrave; z&eacute;ro, le
traducteur peut s'ex&eacute;cuter sur n'importe quel fichier. Si nExtensions est &eacute;gal &agrave; z&eacute;ro, nRegExps est l'&eacute;l&eacute;ment suivant
dans le tableau.
4 La cha&icirc;ne extension indique une extension de fichier (&quot;htm&quot; ou &quot;SHTML&quot;, par exemple) compatible avec ce
traducteur. Cette cha&icirc;ne ne distingue pas les majuscules des minuscules et ne doit pas commencer par un point. Le
tableau doit contenir le m&ecirc;me nombre d'&eacute;l&eacute;ments extension que celui sp&eacute;cifi&eacute; dans nExtensions.
5 La cha&icirc;ne nRegExps indique le nombre d'expressions r&eacute;guli&egrave;res qui suivent. Si nRegExps est &eacute;gal &agrave; z&eacute;ro, runDefault
est l'&eacute;l&eacute;ment suivant dans le tableau.
Derni&egrave;re mise &agrave; jour le 22/6/2011
358
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
6 La cha&icirc;ne regExps indique une expression r&eacute;guli&egrave;re que vous pouvez v&eacute;rifier. Le tableau doit contenir le m&ecirc;me
nombre d'&eacute;l&eacute;ments regExps que celui sp&eacute;cifi&eacute; dans nRegExps, et au moins l'un des &eacute;l&eacute;ments regExps doit
correspondre &agrave; une partie du code source du document pour que le traducteur puisse traiter un fichier.
7 La cha&icirc;ne runDefault indique le moment d'ex&eacute;cution du traducteur. La liste suivante indique les valeurs de cha&icirc;ne
possibles :
Cha&icirc;ne
D&eacute;finition
&quot;allFiles&quot;
Le traducteur s'ex&eacute;cute syst&eacute;matiquement.
&quot;noFiles&quot;
Le traducteur ne s'ex&eacute;cute jamais.
&quot;byExtension&quot;
Le traducteur s'ex&eacute;cute lorsque les fichiers sont dot&eacute;s de l'une des extensions sp&eacute;cifi&eacute;es.
&quot;byExpression&quot;
Le traducteur s'ex&eacute;cute lorsque le document contient une correspondance pour l'une des expressions
r&eacute;guli&egrave;res sp&eacute;cifi&eacute;es.
&quot;bystring&quot;
Le traducteur s'ex&eacute;cute lorsque le document contient une correspondance pour l'une des cha&icirc;nes sp&eacute;cifi&eacute;es.
Remarque : Si vous d&eacute;finissez runDefault sur &quot;byExtension&quot; sans sp&eacute;cifier d'extension (voir l'&eacute;tape 4), l'effet
produit est le m&ecirc;me que celui obtenu avec la valeur &quot;allFiles&quot;. Si vous d&eacute;finissez runDefault sur
&quot;byExpression&quot; sans sp&eacute;cifier d'expression (voir l'&eacute;tape 6), l'effet produit est le m&ecirc;me que celui obtenu avec la valeur
&quot;noFiles&quot;.
8 La cha&icirc;ne priority indique la priorit&eacute; par d&eacute;faut pour l'ex&eacute;cution de ce traducteur. Cette priorit&eacute; est un nombre
compris entre 0 et 100. Si vous ne d&eacute;finissez pas de priorit&eacute;, sa valeur par d&eacute;faut est 100. La priorit&eacute; maximale est
0 et la priorit&eacute; minimale, 100. Lorsque plusieurs traducteurs s'appliquent &agrave; un document, ce param&egrave;tre d&eacute;termine
l'ordre dans lequel ils sont appliqu&eacute;s. La priorit&eacute; la plus haute est appliqu&eacute;e en premier. Lorsque plusieurs
traducteurs ont la m&ecirc;me priorit&eacute;, ils sont appliqu&eacute;s dans l'ordre alphab&eacute;tique par translatorClass.
Exemple
Dans l'exemple suivant, la fonction getTranslatorInfo() fournit des informations relatives &agrave; un traducteur pour les
inclusions c&ocirc;t&eacute; serveur :
function getTranslatorInfo(){
var transArray = new Array(11);
transArray[0] = &quot;SSI&quot;;
transArray[1] = &quot;Server-Side Includes&quot;;
transArray[2] = &quot;4&quot;;
transArray[3] = &quot;htm&quot;;
transArray[4] = &quot;stm&quot;;
transArray[5] = &quot;html&quot;;
transArray[6] = &quot;shtml&quot;;
transArray[7] = &quot;2&quot;;
transArray[8] = &quot;&lt;!--#include file&quot;;
transArray[9] = &quot;&lt;!--#include virtual&quot;;
transArray[10] = &quot;byExtension&quot;;
transArray[11] = &quot;50&quot;;
return transArray;
}
translateDOM()
Disponibilit&eacute;
Dreamweaver CS3.
Derni&egrave;re mise &agrave; jour le 22/6/2011
359
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
Description
Dreamweaver effectue deux passes de traduction. La premi&egrave;re porte sur tous les traducteurs et appelle les fonctions
translateMarkup(). Une fois ces fonctions appel&eacute;es, la deuxi&egrave;me passe appelle les fonctions translateDOM(). La
valeur dom qui est transmise correspond &agrave; la valeur dom &agrave; traduire. Les seules modifications qui sont autoris&eacute;es pendant
la deuxi&egrave;me passe sont celles qui portent sur les attributs traduits.
Arguments
dom, sourceStr
• Argument dom.
• L'argument sourceStr est identique &agrave; la cha&icirc;ne transmise par translateMarkup. Elle est fournie pour r&eacute;f&eacute;rence,
mais l'op&eacute;ration de traduction doit se faire int&eacute;gralement sur l'argument dom et non pas sourceStr.
Valeurs renvoy&eacute;es
Dreamweaver ne renvoie rien.
Exemple
translateDOM( dom, sourceStr );
// Ne renvoie rien
L'occurrence suivante de la fonction translateDOM() masque la balise avec l'ID div1 dans le document.
function translateDOM(dom, sourceStr){
var div1 = dom.getAttributeById(&quot;div1&quot;);
if (div1){
div1.style.display = &quot;none&quot;;
}
}
translateMarkup()
Description
Cette fonction effectue la traduction.
Arguments
docName, siteRoot, docContent
• L'argument docName est une cha&icirc;ne qui contient l'URL de type file:// du document &agrave; traduire.
• L'argument siteRoot est une cha&icirc;ne qui contient l'URL de type file:// de la racine du site o&ugrave; se trouve le document &agrave;
traduire. Si le document se trouve en dehors d'un site, cette cha&icirc;ne peut &ecirc;tre vide.
• L'argument docContent est une cha&icirc;ne qui indique le contenu du document.
Valeurs renvoy&eacute;es
Soit une cha&icirc;ne qui contient le document traduit, soit une cha&icirc;ne vide si rien n'est traduit.
Exemple
L'instance suivante de la fonction translateMarkup() appelle la fonction C translateASP() contenue dans une
DLL (Windows) ou dans une biblioth&egrave;que de code (Macintosh) appel&eacute;e ASPTrans :
Derni&egrave;re mise &agrave; jour le 22/6/2011
360
EXTENSION DE DREAMWEAVER
Traducteurs de donn&eacute;es
function translateMarkup(docName, siteRoot, docContent){
var translatedString = &quot;&quot;;
if (docContent.length &gt; 0){
translatedString = ASPTrans.translateASP(docName, siteRoot, &not;
docContent);
}
return translatedString;
}
Pour consulter un exemple int&eacute;gralement en JavaScript, voir &laquo; Exemple de traducteur d'attributs simple &raquo; &agrave; la page 350
ou &laquo; Exemple de traducteur de blocs/balises simple &raquo; &agrave; la page 353.
liveDataTranslateMarkup()
Disponibilit&eacute;
Dreamweaver UltraDev 1.
Description
Cette fonction traduit les documents lorsque l'utilisateur utilise la fen&ecirc;tre Live Data. Lorsque l'utilisateur s&eacute;lectionne
la commande Affichage &gt; Live Data ou clique sur le bouton Actualiser, Dreamweaver appelle la fonction
liveDataTranslateMarkup() au lieu de la fonction translateMarkup().
Arguments
docName, siteRoot, docContent
• L'argument docName est une cha&icirc;ne qui contient l'URL de type file:// du document &agrave; traduire.
• L'argument siteRoot est une cha&icirc;ne qui contient l'URL de type file:// de la racine du site o&ugrave; se trouve le document &agrave;
traduire. Si le document se trouve en dehors d'un site, cette cha&icirc;ne peut &ecirc;tre vide.
• L'argument docContent est une cha&icirc;ne qui indique le contenu du document.
Valeurs renvoy&eacute;es
Soit une cha&icirc;ne qui contient le document traduit, soit une cha&icirc;ne vide si rien n'est traduit.
Exemple
L'instance suivante de la fonction liveDataTranslateMarkup() appelle la fonction C translateASP() contenue
dans une DLL (Windows) ou dans une biblioth&egrave;que de code (Macintosh) appel&eacute;e ASPTrans :
function liveDataTranslateMarkup(docName, siteRoot, docContent){
var translatedString = &quot;&quot;;
if (docContent.length &gt; 0){
translatedString = ASPTrans.translateASP(docName, siteRoot, docContent);
}
return translatedString;
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
361
Chapitre 23 : Extensions C
Les extensions C vous permettent d'impl&eacute;menter des fichiers d'extension Adobe Dreamweaver en combinant du code
JavaScript et votre propre code C. Cr&eacute;ez des fonctions en langage C, int&eacute;grez-les &agrave; une DLL ou &agrave; une biblioth&egrave;que
partag&eacute;e, enregistrez la biblioth&egrave;que dans le sous-dossier Configuration/JSExtensions du dossier de l'application
Dreamweaver, puis appelez ces fonctions &agrave; partir de JavaScript &agrave; l'aide de l'interpr&eacute;teur JavaScript int&eacute;gr&eacute; &agrave;
Dreamweaver.
Supposons, par exemple, que vous souhaitiez d&eacute;finir un objet Dreamweaver permettant d'ins&eacute;rer dans le document
actif le contenu d'un fichier sp&eacute;cifi&eacute; par l'utilisateur. Etant donn&eacute; que le code JavaScript c&ocirc;t&eacute; client ne prend pas en
charge les E/S de fichier, vous devez cr&eacute;er une fonction en C pour fournir cette fonctionnalit&eacute;.
Int&eacute;gration des fonctions C
Vous pouvez utiliser le codeHTML et JavaScript ci-dessous pour cr&eacute;er un objet simple d'insertion du texte d'un fichier.
La fonction objectTag() appelle la fonction C readContentsOfFile(), stock&eacute;e dans une biblioth&egrave;que appel&eacute;e
maBiblioth&egrave;que.
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;SCRIPT&gt;
function objectTag() {
fileName = document.forms[0].myFile.value;
return myLibrary.readContentsOfFile(fileName);
}
&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;FORM&gt;
Enter the name of the file to be inserted:
&lt;INPUT TYPE=&quot;file&quot; NAME=&quot;myFile&quot;&gt;
&lt;/FORM&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
La fonction readContentsOfFile() accepte une liste d'arguments de l'utilisateur, extrait l'argument de nom de
fichier, lit le contenu du fichier et le renvoie. Pour plus d'informations sur les structures de donn&eacute;es JavaScript et les
fonctions figurant dans la fonction readContentsOfFile(), consultez la section &laquo; Extensions C et interpr&eacute;teur
JavaScript &raquo; &agrave; la page 363.
Derni&egrave;re mise &agrave; jour le 22/6/2011
362
EXTENSION DE DREAMWEAVER
Extensions C
JSBool
readContentsOfFile(JSContext *cx, JSObject *obj, unsigned int &not;
argc, jsval *argv, jsval *rval)
{
char *fileName, *fileContents;
JSBool success;
unsigned int length;
/* Make sure caller passed in exactly one argument. If not,
* then tell the interpreter to abort script execution.*/
if (argc != 1){
JS_ReportError(cx, &quot;Wrong number of arguments&quot;, 0);
return JS_FALSE;
}
/* Convert the argument to a string */
fileName = JS_ValueToString(cx, argv[0], &amp;length);
if (fileName == NULL){
JS_ReportError(cx, &quot;The argument must be a string&quot;, 0);
return JS_FALSE;
}
/* Use the string (the file name) to open and read a file */
fileContents = exerciseLeftToTheReader(fileName);
/* Store file contents in rval, which is the return value passed
* back to the caller */
success = JS_StringToValue(cx, fileContents, 0, *rval);
free(fileContents);
/* Return true to continue or false to abort the script */
return success;
}
Pour vous assurer que la fonction readContentsOfFile() s'ex&eacute;cute correctement et ne provoque pas d'erreur
JavaScript, vous devez enregistrer la fonction avec l'interpr&eacute;teur JavaScript en ajoutant une fonction MM_Init() &agrave; votre
biblioth&egrave;que. Lorsque Dreamweaver charge la biblioth&egrave;que au d&eacute;marrage, il appelle la fonction MM_Init() pour
obtenir les trois informations suivantes :
• le nom JavaScript de la fonction ;
• un pointeur vers la fonction ;
• le nombre d'arguments attendus par la fonction.
L'exemple suivant illustre la fonction MM_Init() associ&eacute;e &agrave; la biblioth&egrave;que maBiblioth&egrave;que:
void
MM_Init()
{
JS_DefineFunction(&quot;readContentsOfFile&quot;, readContentsOfFile, 1);
}
Votre biblioth&egrave;que doit inclure exactement une instance de la macro suivante :
/* MM_STATE is a macro that expands to some definitions that are
* needed to interact with Dreamweaver. This macro must
* be defined exactly once in your library. */
MM_STATE
Derni&egrave;re mise &agrave; jour le 22/6/2011
363
EXTENSION DE DREAMWEAVER
Extensions C
Remarque : La biblioth&egrave;que peut &ecirc;tre impl&eacute;ment&eacute;e en C ou en C++, mais le fichier qui contient la fonction MM_Init()
et la macro MM_STATE doivent &ecirc;tre impl&eacute;ment&eacute;s en C. En effet, le compilateur C++ modifie les noms de fonction, ce qui
rend impossible la d&eacute;tection de la fonction MM_Init() par Dreamweaver.
Extensions C et interpr&eacute;teur JavaScript
Dans votre biblioth&egrave;que, le code C doit interagir avec l'interpr&eacute;teur JavaScript de Dreamweaver &agrave; trois moments
distincts :
• Au d&eacute;marrage, pour enregistrer les fonctions de la biblioth&egrave;que
• Lorsque la fonction est appel&eacute;e, pour analyser les arguments que JavaScript transmet &agrave; C
• Avant le retour de la fonction, pour compresser la valeur renvoy&eacute;e
Pour accomplir ces t&acirc;ches, l'interpr&eacute;teur d&eacute;finit plusieurs types de donn&eacute;es et affiche une API. Les d&eacute;finitions des types
de donn&eacute;es et des fonctions r&eacute;pertori&eacute;es dans cette section apparaissent dans le fichier mm_jsapi.h. Pour que votre
biblioth&egrave;que fonctionne correctement, vous devez inclure le fichier mm_jsapi.h et la ligne suivante au d&eacute;but de tous
les fichiers de votre biblioth&egrave;que :
#include &quot;mm_jsapi.h&quot;
L'inclusion du fichier mm_jsapi.h a pour effet d'inclure, &agrave; son tour, le fichier mm_jsapi_environment.h, qui d&eacute;finit la
structure MM_Environment.
Types de donn&eacute;es
L'interpr&eacute;teur JavaScript d&eacute;finit les types de donn&eacute;es suivants.
typedef struct JSContext JSContext
Un pointeur sur ce type de donn&eacute;es opaque est transmis &agrave; la fonction de niveau C. Certaines des fonctions de l'API
utilisent ce pointeur comme argument.
typedef struct JSObject JSObject
Un pointeur sur ce type de donn&eacute;es opaque est transmis &agrave; la fonction de niveau C. Ce type de donn&eacute;es repr&eacute;sente un
objet pouvant correspondre &agrave; un objet de tableau ou tout autre type d'objet.
typedef struct JSVal JSVal
Une structure de donn&eacute;es opaque pouvant contenir un nombre entier ou un pointeur vers un nombre &agrave; virgule
flottante, une cha&icirc;ne ou un objet. Certaines des fonctions de l'API permettent de lire les valeurs des arguments de
fonction &agrave; partir du contenu d'une structure JSVal et d'autres permettent d'&eacute;crire la valeur renvoy&eacute;e par la fonction en
r&eacute;digeant une structure JSVal.
typedef enum { JS_FALSE = 0, JS_TRUE = 1 } JSBool
Type de donn&eacute;es simple qui stocke une valeur bool&eacute;enne.
Derni&egrave;re mise &agrave; jour le 22/6/2011
364
EXTENSION DE DREAMWEAVER
Extensions C
API d'extension C
L'API d'extension C se compose des fonctions suivantes :
typedef JSBool (*JSNative)(JSContext *cx, JSObject *obj, unsigned int argc,
jsval *argv, jsval *rval)
Description
Cette signature de fonction d&eacute;crit les impl&eacute;mentations C des fonctions JavaScript dans les situations suivantes :
• cx est un pointeur vers une structure JSContext opaque qui doit &ecirc;tre transmis &agrave; certaines fonctions de l'API
JavaScript. Cette variable contient le contexte d’ex&eacute;cution de l’interpr&eacute;teur.
• obj est un pointeur vers l'objet dans le contexte duquel le script s'ex&eacute;cute. Pendant l'ex&eacute;cution du script, le mot cl&eacute;
this d&eacute;signe cet objet.
• argc correspond au nombre d'arguments transmis &agrave; la fonction.
• Le pointeur argv pointe sur un tableau de structures jsval. La longueur du tableau correspond au nombre
d’&eacute;l&eacute;ments d&eacute;fini par argc.
• Le pointeur rval pointe sur une structure jsval. La valeur renvoy&eacute;e par la fonction doit &ecirc;tre &eacute;crite dans *rval.
La fonction renvoie la valeur JS_TRUE si elle s’ex&eacute;cute correctement, et JS_FALSE dans le cas contraire. Si la fonction
renvoie la valeur JS_FALSE, l'ex&eacute;cution du script en cours s'arr&ecirc;te et un message d'erreur appara&icirc;t.
JSBool JS_DefineFunction()
Description
Cette fonction enregistre une fonction C avec l'interpr&eacute;teur JavaScript dans Dreamweaver. Une fois que la fonction
JS_DefineFunction() a enregistr&eacute; la fonction C sp&eacute;cifi&eacute;e dans l'argument call, vous pouvez l'appeler dans un script
JavaScript en utilisant le nom sp&eacute;cifi&eacute; dans l'argument name. L'argument name fait la distinction entre majuscules et
minuscules.
En r&egrave;gle g&eacute;n&eacute;rale, cette fonction est appel&eacute;e depuis la fonction MM_Init(), que Dreamweaver appelle au d&eacute;marrage.
Arguments
char *name, JSNativecall, unsigned int nargs
• name est le nom de la fonction tel qu'il appara&icirc;t dans JavaScript.
• call est un pointeur vers une fonction C. La fonction doit accepter les m&ecirc;mes arguments que readContentsOfFile
et renvoyer une valeur JSBool qui indique si son ex&eacute;cution a r&eacute;ussi ou pas.
• nargs est le nombre d'arguments que la fonction doit recevoir.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Derni&egrave;re mise &agrave; jour le 22/6/2011
365
EXTENSION DE DREAMWEAVER
Extensions C
char *JS_ValueToString()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en cha&icirc;ne (si possible) et
renvoie la valeur convertie &agrave; l'appelant.
Remarque : Ne modifiez pas le pointeur de tampon renvoy&eacute;. Il pourrait endommager les structures de donn&eacute;es de
l'interpr&eacute;teur JavaScript. Pour modifier la cha&icirc;ne, copiez ses caract&egrave;res dans un autre tampon et cr&eacute;ez une nouvelle cha&icirc;ne
JavaScript.
Arguments
JSContext *cx, JSVal v, unsigned integer *pLength
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis &agrave; la fonction JavaScript.
• L'argument v est la structure JSVal &agrave; partir de laquelle Dreamweaver extrait la cha&icirc;ne.
• L’argument *pLength est un pointeur vers un entier non sign&eacute;. Cette fonction d&eacute;finit *plength sur la longueur de
la cha&icirc;ne (en octets).
Valeurs renvoy&eacute;es
Un pointeur vers une cha&icirc;ne termin&eacute;e par un octet nul en cas de succ&egrave;s, ou la valeur null en cas d’&eacute;chec. La routine
d'appel ne doit pas lib&eacute;rer cette cha&icirc;ne lorsqu'elle a termin&eacute;.
JSBool JS_ValueToInteger()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en nombre entier (si
possible) et renvoie la valeur convertie &agrave; l'appelant.
Arguments
JSContext *cx, JSVal v, long *lp
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• L’argument v est la structure JSVal dont l’entier doit &ecirc;tre extrait.
• lp est un pointeur vers un nombre entier de 4 octets. Cette fonction stocke la valeur convertie dans *lp.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_ValueToDouble()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en un double (si possible)
et renvoie la valeur convertie &agrave; l'appelant.
Derni&egrave;re mise &agrave; jour le 22/6/2011
366
EXTENSION DE DREAMWEAVER
Extensions C
Arguments
JSContext *cx, JSVal v, double *dp
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• L’argument v est la structure JSValdont le double doit &ecirc;tre extrait.
• dp est un pointeur vers un r&eacute;el double de 8 octets. Cette fonction stocke la valeur convertie dans *dp.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_ValueToBoolean()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en valeur bool&eacute;enne (si
possible) et renvoie la valeur convertie &agrave; l'appelant.
Arguments
JSContext *cx, JSVal v, JSBool *bp
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• L’argument v est la structure JSVal dont la valeur bool&eacute;enne doit &ecirc;tre extraite.
• bp est un pointeur vers une valeur bool&eacute;enne JSBool. Cette fonction stocke la valeur convertie dans *bp.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_ValueToObject()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en objet (si possible) et
renvoie la valeur convertie &agrave; l'appelant. Si l'objet correspond &agrave; un tableau, utilisez JS_GetArrayLength() et
JS_GetElement() pour lire son contenu.
Arguments
JSContext *cx, JSVal v, JSObject **op
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• L’argument v est la structure JSValdont l’objet doit &ecirc;tre extrait.
• op est un pointeur vers un pointeur JSObject. Cette fonction stocke la valeur convertie dans *op.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Derni&egrave;re mise &agrave; jour le 22/6/2011
367
EXTENSION DE DREAMWEAVER
Extensions C
JS_ValueToUCString()
Description
Cette fonction extrait un argument de fonction &agrave; partir d'une structure JSVal, le convertit en cha&icirc;ne (si possible) et
renvoie la valeur convertie &agrave; l'appelant.
Remarque : Ne modifiez pas le pointeur de tampon renvoy&eacute;. Il pourrait endommager les structures de donn&eacute;es de
l'interpr&eacute;teur JavaScript. Pour modifier la cha&icirc;ne, copiez ses caract&egrave;res dans un autre tampon et cr&eacute;ez une nouvelle cha&icirc;ne
JavaScript.
Arguments
JSContext *cx, JSVal v, unsigned int *pLength
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis &agrave; la fonction JavaScript.
• L'argument v est la structure JSVal &agrave; partir de laquelle Dreamweaver extrait la cha&icirc;ne.
• L’argument *pLength est un pointeur vers un entier non sign&eacute;. Cette fonction d&eacute;finit *plength sur la longueur de
la cha&icirc;ne (en octets).
Valeurs renvoy&eacute;es
Un pointeur vers une cha&icirc;ne UTF-8 termin&eacute;e par un octet nul en cas de succ&egrave;s, ou la valeur null en cas d’&eacute;chec. La
routine d'appel ne doit pas lib&eacute;rer cette cha&icirc;ne lorsqu'elle a termin&eacute;.
JSBool JS_StringToValue()
Description
Cette fonction stocke la valeur renvoy&eacute;e d'une cha&icirc;ne dans une structure JSVal. Elle alloue un nouvel objet de cha&icirc;ne
JavaScript.
Arguments
JSContext *cx, JSVal *bytes, size_t sz, JSVal*vp
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis &agrave; la fonction JavaScript.
• L’argument bytes est la cha&icirc;ne &agrave; stocker dans la structure JSVal. La cha&icirc;ne &eacute;tant copi&eacute;e, l'appelant doit la lib&eacute;rer
lorsqu'elle n'est plus n&eacute;cessaire. Si la taille de la cha&icirc;ne n’est pas sp&eacute;cifi&eacute;e (voir l’argument sz), la cha&icirc;ne doit
se terminer par un octet de valeur nulle.
•
sz indique la taille de la cha&icirc;ne en octets. Si la valeur de sz est 0, la longueur de la cha&icirc;ne termin&eacute;e
par un octet de valeur nulle est calcul&eacute;e automatiquement.
• L’argument *vp est un pointeur sur la structure JSVal dans laquelle le contenu de la cha&icirc;ne doit &ecirc;tre copi&eacute;.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Derni&egrave;re mise &agrave; jour le 22/6/2011
368
EXTENSION DE DREAMWEAVER
Extensions C
JSBool JS_UCStringToValue()
Description
Cette fonction stocke la valeur renvoy&eacute;e d'une cha&icirc;ne dans une structure JSVal. Elle alloue un nouvel objet de cha&icirc;ne
JavaScript.
Arguments
JSContext *cx , JSVal *bytes, size_tsz, JSVal *vp
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis &agrave; la fonction JavaScript.
• L’argument *bytes est la cha&icirc;ne &agrave; stocker dans la structure JSVal. La cha&icirc;ne &eacute;tant copi&eacute;e, l'appelant doit la lib&eacute;rer
lorsqu'elle n'est plus n&eacute;cessaire. Si la taille de la cha&icirc;ne n’est pas sp&eacute;cifi&eacute;e (voir l’argument sz), la cha&icirc;ne doit
se terminer par un octet de valeur nulle.
•
sz indique la taille de la cha&icirc;ne en octets. Si la valeur de sz est 0, la longueur de la cha&icirc;ne termin&eacute;e
par un octet de valeur nulle est calcul&eacute;e automatiquement.
• L’argument *vp est un pointeur sur la structure JSVal dans laquelle le contenu de la cha&icirc;ne doit &ecirc;tre copi&eacute;.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec
Remarque : La m&eacute;thode JS_UCStringToValue() est &agrave; tous &eacute;gards identique &agrave; JSBool JS_StringToValue(), &agrave; ceci
pr&egrave;s qu'elle renvoie une cha&icirc;ne UTF-8.
JSBool JS_DoubleToValue()
Description
Cette fonction stocke la valeur renvoy&eacute;e d'un nombre &agrave; virgule flottante dans une structure JSVal.
Arguments
JSContext *cx, double dv, JSVal *vp
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• dv est un nombre &agrave; virgule flottante de 8 octets.
• L’argument vp est un pointeur vers la structure JSVal dans laquelle le contenu du double doit &ecirc;tre copi&eacute;.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSVal JS_BooleanToValue()
Description
Cette fonction stocke dans une structure JSVal la valeur bool&eacute;enne renvoy&eacute;e.
Arguments
JSBool bv
• L'argument bv est une valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Derni&egrave;re mise &agrave; jour le 22/6/2011
369
EXTENSION DE DREAMWEAVER
Extensions C
Valeurs renvoy&eacute;es
Structure JSVal qui contient la valeur bool&eacute;enne que vous avez transmise &agrave; la fonction en tant qu'argument.
JSVal JS_IntegerToValue()
Description
Cette fonction convertit une valeur d'entier long en structure JSVal.
Arguments
lv
L'argument lv est un entier long que vous souhaitez convertir en structure JSVal.
Valeurs renvoy&eacute;es
Structure JSVal qui contient le nombre entier que vous avez transmis &agrave; la fonction en tant qu'argument.
JSVal JS_ObjectToValue()
Description
Cette fonction stocke la valeur renvoy&eacute;e d'un objet dans une structure JSVal. Utilise la fonction JS_
NewArrayObject() pour cr&eacute;er un objet de tableau et utilise JS_SetElement() pour en d&eacute;finir le contenu.
Arguments
JSObject *obj
obj est un pointeur vers l'objet JSObject que vous voulez convertir en structure JSVal.
Valeurs renvoy&eacute;es
Structure JSVal qui contient l'objet que vous avez transmis &agrave; la fonction en tant qu'argument.
char *JS_ObjectType()
Description
A partir d'une r&eacute;f&eacute;rence d'objet, la fonction JS_ObjectType() renvoie le nom de la classe de l'objet. Ainsi, s'il s'agit
d'un objet DOM, la fonction renvoie &quot;Document&quot;. S'il s'agit d'un nœud dans le document, elle renvoie &quot;Element&quot;. Pour
un objet tableau, la fonction renvoie &quot;Array&quot;.
Remarque : Ne modifiez pas le pointeur tampon renvoy&eacute;, car cela pourrait endommager les structures des donn&eacute;es de
l'interpr&eacute;teur JavaScript.
Arguments
JSObject *obj
En principe, cet argument est transmis et converti &agrave; l'aide de JS_ValueToObject().
Valeurs renvoy&eacute;es
Un pointeur sur une cha&icirc;ne termin&eacute;e par un octet nul. L'appelant ne doit pas lib&eacute;rer cette cha&icirc;ne une fois l'op&eacute;ration
effectu&eacute;e.
Derni&egrave;re mise &agrave; jour le 22/6/2011
370
EXTENSION DE DREAMWEAVER
Extensions C
JSObject *JS_NewArrayObject()
Description
Cette fonction cr&eacute;e un nouvel objet contenant un tableau d'arguments JSVal.
Arguments
JSContext *cx, unsigned int length, JSVal *v
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• length correspond au nombre d'&eacute;l&eacute;ments que le tableau peut contenir.
• L’argument v est un pointeur facultatif vers les structures jsval &agrave; stocker dans le tableau. Si la valeur renvoy&eacute;e est
diff&eacute;rente de null, v correspond &agrave; un tableau contenant des &eacute;l&eacute;ments length. Si la valeur renvoy&eacute;e est null, le
contenu initial de l’objet tableau est non d&eacute;fini (undefined). Il peut &ecirc;tre d&eacute;fini &agrave; l’aide de la fonction
JS_SetElement().
Valeurs renvoy&eacute;es
Un pointeur vers un nouvel objet de tableau (array) ou la valeur null en cas d'&eacute;chec de l'ex&eacute;cution de la fonction.
long JS_GetArrayLength()
Description
A partir d'un pointeur vers un objet de tableau, extrait le nombre d'&eacute;l&eacute;ments contenus dans le tableau.
Arguments
JSContext *cx, JSObject*obj
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
Valeurs renvoy&eacute;es
Le nombre d’&eacute;l&eacute;ments du tableau, ou -1 en cas d’&eacute;chec.
JSBool JS_GetElement()
Description
Cette fonction lit un seul &eacute;l&eacute;ment d'un objet de tableau.
Arguments
JSContext *cx, JSObject *obj, unsigned int index, JSVal *v
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
• index est un index des nombres entiers du tableau. Le premier &eacute;l&eacute;ment est l'index 0, le dernier &eacute;l&eacute;ment est l'index
(length - 1).
• v est un pointeur vers une structure jsval dans laquelle sera copi&eacute; le contenu de la structure JSVal figurant dans
le tableau.
Derni&egrave;re mise &agrave; jour le 22/6/2011
371
EXTENSION DE DREAMWEAVER
Extensions C
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_SetElement()
Description
Cette fonction &eacute;crit un seul &eacute;l&eacute;ment d'un objet de tableau.
Arguments
JSContext *cx, JSObject *obj, unsigned int index, JSVal *v
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
• index est un index des nombres entiers du tableau. Le premier &eacute;l&eacute;ment est l'index 0, le dernier &eacute;l&eacute;ment est l'index
(length - 1).
• v est un pointeur vers une structure JSVal dont le contenu doit &ecirc;tre copi&eacute; dans la structure JSVal du tableau.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_ExecuteScript()
Description
Cette fonction compile et ex&eacute;cute une cha&icirc;ne JavaScript. Si le script renvoie une valeur, celle-ci appara&icirc;t dans *rval.
Arguments
JSContext *cx, JSObject *obj, char *script, unsigned intsz, JSVal *rval
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• obj est un pointeur vers l'objet dans le contexte duquel le script s'ex&eacute;cute. Pendant l'ex&eacute;cution du script, le mot cl&eacute;
this d&eacute;signe cet objet. En g&eacute;n&eacute;ral, il s'agit du pointeur JSObject qui a &eacute;t&eacute; transmis &agrave; la fonction JavaScript.
• script est une cha&icirc;ne qui contient le code JavaScript. Si la taille de la cha&icirc;ne n'est pas sp&eacute;cifi&eacute;e (voir l'argument sz),
la cha&icirc;ne doit se terminer par un 0.
• sz indique la taille de la cha&icirc;ne en octets. Si sz a pour valeur 0, la longueur de la cha&icirc;ne se terminant par 0 est calcul&eacute;e
automatiquement.
• rval est un pointeur vers une seule structure JSVal. La valeur renvoy&eacute;e pour la fonction est stock&eacute;e dans *rval.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
JSBool JS_ReportError()
Description
Cette fonction d&eacute;crit la cause d'une erreur de script. Appelez cette fonction avant de renvoyer la valeur JS_FALSE pour
une erreur de script, pour donner &agrave; utilisateur la raison de l'&eacute;chec du script (par exemple wrong number of arguments).
Derni&egrave;re mise &agrave; jour le 22/6/2011
372
EXTENSION DE DREAMWEAVER
Extensions C
Arguments
JSContext *cx, char *error, size_t sz
• cx est le pointeur JSContext opaque transmis &agrave; la fonction JavaScript.
• error est une cha&icirc;ne qui contient le message d'erreur. La cha&icirc;ne est copi&eacute;e de fa&ccedil;on &agrave; ce que l'appelant puisse la
lib&eacute;rer lorsqu'elle ne sera plus n&eacute;cessaire. Si la taille de la cha&icirc;ne n'est pas sp&eacute;cifi&eacute;e (voir l'argument sz), la cha&icirc;ne
doit se terminer par un 0.
• sz indique la taille de la cha&icirc;ne en octets. Si la valeur de sz est 0, la longueur de la cha&icirc;ne termin&eacute;e par un octet de
valeur nulle est automatiquement calcul&eacute;e.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
API de configuration multi-utilisateur et d'acc&egrave;s aux
fichiers
Adobe recommande de toujours utiliser l'API de configuration multi-utilisateur et d'acc&egrave;s aux fichiers pour acc&eacute;der
au syst&egrave;me de fichiers par l'interm&eacute;diaire d'extensions C. Pour les fichiers autres que les fichiers de configuration, les
fonctions acc&egrave;dent directement au fichier ou dossier sp&eacute;cifi&eacute;.
Dreamweaver prend en charge les configurations multi-utilisateur pour les syst&egrave;mes Windows XP, Windows 2000 et
Mac OS X.
Dreamweaver est g&eacute;n&eacute;ralement install&eacute; dans un dossier &agrave; acc&egrave;s restreint, tel que C:\Program Folders sous Windows.
De ce fait, seuls les utilisateurs disposant de droits d'acc&egrave;s de type administrateur peuvent modifier le dossier
Configuration de Dreamweaver. Pour permettre aux utilisateurs travaillant dans des environnements multi-utilisateur
de cr&eacute;er et de g&eacute;rer des configurations distinctes, Dreamweaver cr&eacute;e un dossier de configuration s&eacute;par&eacute; pour chacun
d'entre eux. Chaque fois que Dreamweaver ou une extension JavaScript &eacute;crit dans le dossier Configuration de
Dreamweaver, Dreamweaver &eacute;crit automatiquement dans le dossier Configuration de l'utilisateur &agrave; la place. Ainsi,
Dreamweaver permet &agrave; chaque utilisateur de personnaliser les param&egrave;tres de configuration respectifs, sans aucune
incidence sur les configurations personnalis&eacute;es des autres utilisateurs.
Dreamweaver cr&eacute;e le dossier Configuration de l'utilisateur &agrave; un emplacement dans lequel l'utilisateur dispose de tous
les droits d'acc&egrave;s en lecture/&eacute;criture. L'emplacement du dossier Configuration varie selon la plate-forme utilisateur.
Sous Windows 2000 et Windows XP :
&lt;drive&gt;:\Documents and Settings\&lt;username&gt;\Application Data\Adobe\\
Dreamweaver CS5\Configuration
Remarque : Sous Windows XP, il se peut que ce dossier se trouve dans un dossier cach&eacute;.
Sous MacOS X :
&lt;drive&gt;:Users:&lt;username&gt;:Library:Application Support:Adobe:Dreamweaver CS5:Configuration
Derni&egrave;re mise &agrave; jour le 22/6/2011
373
EXTENSION DE DREAMWEAVER
Extensions C
Il est fr&eacute;quent que les extensions JavaScript soient amen&eacute;es &agrave; ouvrir des fichiers et &agrave; &eacute;crire dans le dossier
Configuration. Elles peuvent acc&eacute;der au syst&egrave;me de fichiers en utilisant DWFile ou MMNotes, ou en transmettant une
URL &agrave; la fonction dreamweaver.getDocumentDOM(). En g&eacute;n&eacute;ral, lorsqu'une extension acc&egrave;de au syst&egrave;me de fichiers
dans un dossier de configuration, elle utilise la fonction dw.getConfigurationPath() et ajoute le nom du fichier, ou
elle obtient le chemin d'acc&egrave;s en se reportant &agrave; l'&eacute;l&eacute;ment dom.URL d'un document ouvert et en ajoutant le nom du
fichier. Une extension peut &eacute;galement obtenir le chemin d'acc&egrave;s en se reportant &agrave; l'&eacute;l&eacute;ment dom.URL et en extrayant le
nom du fichier. La fonction dw.getConfigurationPath() et l'&eacute;l&eacute;ment dom.URL renvoient toujours une URL du
dossier Configuration de Dreamweaver, m&ecirc;me si le document se trouve dans le dossier Configuration de l'utilisateur.
Chaque fois qu'une extension JavaScript ouvre un fichier dans le dossier Configuration de Dreamweaver, ce dernier
interrompt l'acc&egrave;s et v&eacute;rifie d'abord le dossier Configuration de l'utilisateur. Si une extension JavaScript enregistre des
donn&eacute;es sur disque dans le dossier Configuration de Dreamweaver via DWFile ou MMNotes, Dreamweaver intercepte
l'appel. Il le renvoie ensuite vers le dossier Configuration de l'utilisateur.
Par exemple, sous Windows 2000 ou Windows XP, si l'utilisateur demande file:///C|/Program Files/Adobe/Adobe
Dreamweaver CS5/Configuration/Objects/Common/Table.htm, Dreamweaver recherche le fichier Table.htm file
dans le dossier C:\Documents and Settings\nom d'utilisateur\adobe\Dreamweaver
CS5\Configuration\Objects\Common et, si ce fichier existe, c'est celui-ci qu'il emploie.
Les extensions C, ou les biblioth&egrave;ques partag&eacute;es, doivent utiliser l'API de configuration multi-utilisateur et d'acc&egrave;s aux
fichiers pour lire et &eacute;crire dans le dossier Configuration de Dreamweaver. L'utilisation de l'API d'acc&egrave;s aux fichiers et
de configuration multi-utilisateur permet &agrave; Dreamweaver de lire et d'&eacute;crire dans le dossier Configuration de
l'utilisateur. Elle &eacute;vite en outre que les op&eacute;rations sur les fichiers n'&eacute;chouent en raison d'autorisations d'acc&egrave;s
insuffisantes. Si les fichiers dans le dossier Configuration de Dreamweaver auquel acc&egrave;de votre extension C sont cr&eacute;&eacute;s
dans JavaScript avec des manipulations DWFile, MMNotes ou DOM, utilisez l'API de configuration multiutilisateur
et d'acc&egrave;s aux fichiers. Il se peut que ces fichiers se trouvent dans le dossier Configuration de l'utilisateur.
Remarque : La plupart des extensions JavaScript ne requi&egrave;rent aucune modification pour pouvoir &eacute;crire dans le dossier
Configuration de l'utilisateur. Seules les biblioth&egrave;ques C partag&eacute;es qui &eacute;crivent dans le dossier Configuration doivent &ecirc;tre
mises &agrave; jour afin d'utiliser les fonctions de l'API de configuration multi-utilisateur et d'acc&egrave;s aux fichiers.
Lorsque vous supprimez un fichier du dossier Configuration de Dreamweaver, Dreamweaver ajoute une entr&eacute;e vers
un fichier de masque. Cette entr&eacute;e est ajout&eacute;e afin d'indiquer quels fichiers du dossier Configuration ne doivent pas
&ecirc;tre visibles dans l'interface utilisateur. Un fichier ou dossier masqu&eacute; n'existera pas pour Dreamweaver, m&ecirc;me s'il peut
exister physiquement dans le dossier.
Supposons par exemple que vous ayez utilis&eacute; la corbeille du panneau Fragments de code pour supprimer un dossier
appel&eacute; javascript et un fichier appel&eacute; onepixelborder.csn. Dans ce cas, Dreamweaver &eacute;crit un fichier nomm&eacute;
mm_deleted_files.xml dans le dossier Configuration de l'utilisateur, ressemblant &agrave; ceci :
&lt;?xml version = &quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;deleteditems&gt;
&lt;item name=&quot;snippets/javascript/&quot; /&gt;
&lt;item name=&quot;snippets/html/onepixelborder.csn&quot; /&gt;
&lt;/deleteditems&gt;
Lorsque Dreamweaver remplit le panneau Fragments de code, il lit tous les fichiers qui se trouvent dans le dossier
Configuration/Snippets de l'utilisateur. Il lit &eacute;galement tous les fichiers du dossier Configuration/Snippets de
Dreamweaver, &agrave; l'exception du dossier Configuration/Snippets/javascript et du fichier
Configuration/Snippets/html/onepixelborder.csn. La liste de fichiers ainsi trouv&eacute;s est ajout&eacute;e au panneau Fragments
de code.
Derni&egrave;re mise &agrave; jour le 22/6/2011
374
EXTENSION DE DREAMWEAVER
Extensions C
Si une extension C appelle la fonction MM_ConfigFileExists() de l'URL file:///c|Program Files/Adobe
/Adobe Dreamweaver CS5/Configuration/Snippets/javascript/onepixelborder.csn, cette derni&egrave;re renvoie
la valeur false. De m&ecirc;me, si une extension JavaScript essaie d'appeler la fonction dw.getDocumentDom
(&quot;file:///c|Program Files/Adobe/Adobe Dreamweaver
CS5/Configuration/Snippets/javascript/onepixelborder.csn&quot;), la valeur renvoy&eacute;e est null.
Modifiez le fichier mm_deleted_files.xml pour emp&ecirc;cher d'afficher des fichiers dans l'interface utilisateur, tels que des
objets ou un contenu pr&ecirc;t &agrave; l'emploi dans une nouvelle bo&icirc;te de dialogue. Vous pouvez appeler la fonction
MM_DeleteConfigfile() pour ajouter des chemins de fichier au fichier mm_deleted_files.xml.
JS_Object MM_GetConfigFolderList()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction extrait une liste r&eacute;pertoriant les dossiers ou les fichiers (ou les deux &agrave; la fois) du dossier sp&eacute;cifi&eacute;. Si vous
sp&eacute;cifiez un dossier Configuration, la fonction obtient la liste des dossiers qui existent dans le dossier Configuration
de l'utilisateur ainsi que dans celui de Dreamweaver, apr&egrave;s filtrage par mm_deleted_files.xml.
Arguments
char *fileURL, char *constraints
• char *fileUrl est un pointeur vers une cha&icirc;ne qui nomme le dossier dont vous souhaitez obtenir le contenu. La
cha&icirc;ne doit se pr&eacute;senter sous la forme d'une URL de fichier (file://). Cette cha&icirc;ne peut comporter les caract&egrave;res
g&eacute;n&eacute;riques suivants : ast&eacute;risques (*) et points d'interrogation (?). Utilisez les ast&eacute;risques (*) pour repr&eacute;senter un ou
plusieurs caract&egrave;res ind&eacute;termin&eacute;s et les points d'interrogation (?) pour repr&eacute;senter un seul caract&egrave;re ind&eacute;termin&eacute;.
• L'argument char *contstraints peut &ecirc;tre files ou directories ou encore une valeur null. Si vous pr&eacute;cisez null,
la fonction MM_GetConfigFolderList() renvoie des fichiers et des dossiers.
Valeurs renvoy&eacute;es
JSObject est un tableau qui contient la liste des fichiers ou des dossiers figurant soit dans le dossier Configuration de
l'utilisateur, soit dans le dossier Configuration de Dreamweaver, apr&egrave;s filtrage par le fichier mm_deleted_files.xml.
Exemples
JSObject *jsobj_array;
jsobj_array = MM_GetConfigFolderList(&quot;file:///&not;
c|/Program Files/Adobe/Adobe Dreamweaver CS3/Configuration&quot;, &quot;directories&quot; );
JSBool MM_ConfigFileExists()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction v&eacute;rifie si le fichier sp&eacute;cifi&eacute; existe. S'il s'agit d'un fichier dans un dossier de configuration, la fonction
recherche le fichier dans le dossier Configuration de l'utilisateur ou celui de Dreamweaver. Elle v&eacute;rifie &eacute;galement si le
nom du fichier est r&eacute;pertori&eacute; dans le fichier mm_deleted_files.xml. Si tel est le cas, la fonction renvoie la valeur false.
Derni&egrave;re mise &agrave; jour le 22/6/2011
375
EXTENSION DE DREAMWEAVER
Extensions C
Arguments
char *fileUrl
char *fileUrl est un pointeur vers une cha&icirc;ne qui nomme le fichier souhait&eacute;, sous la forme d'une URL de type file://.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Exemple
char *dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt&quot;;
int fileno = 0;
if(MM_ConfigFileExists(dwConfig))
{
fileno = MM_OpenConfigFile(dwConfig, &quot;read&quot;);
}
int MM_OpenConfigFile()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction ouvre le fichier et renvoie son identificateur dans le syst&egrave;me d'exploitation. Vous pouvez utiliser cet
identificateur dans des appels &agrave; des fonctions de fichiers syst&egrave;me. Vous devez fermer l'identificateur de fichier en
appelant la fonction _close.
S'il s'agit d'un fichier de configuration, la fonction le recherche soit dans le dossier Configuration de l'utilisateur, soit
dans le dossier Configuration de Dreamweaver. Si vous ouvrez le fichier de configuration &agrave; des fins d'&eacute;criture, la
fonction cr&eacute;e le fichier dans le dossier de configuration de l'utilisateur, m&ecirc;me s'il existe dans le dossier Configuration
de Dreamweaver.
Remarque : Si vous souhaitez commencer par lire le fichier, ouvrez-le en mode &quot;read&quot;. Lorsque vous souhaitez &eacute;crire
dans le fichier, fermez l'identificateur de lecture et rouvrez le fichier en mode &quot;write&quot; ou &quot;append&quot;.
Arguments
char *fileURL, char *mode
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le fichier en cours d'ouverture, exprim&eacute; sous la forme
d'une URL de fichier (file://). S'il indique un chemin d'acc&egrave;s dans le dossier Configuration de Dreamweaver, la
fonction MM_OpenConfigFile() commence par d&eacute;terminer le chemin d'acc&egrave;s avant d'ouvrir le fichier.
• char *mode pointe vers une cha&icirc;ne qui indique la fa&ccedil;on dont vous souhaitez ouvrir le fichier. Vous avez le choix
entre null, &quot;read&quot;, &quot;write&quot; et &quot;append&quot;. Si vous sp&eacute;cifiez &quot;write&quot; et que le fichier n'existe pas, la fonction
MM_OpenconfigFile() le cr&eacute;e. Si vous sp&eacute;cifiez &quot;write&quot;, la fonction MM_OpenConfigFile() ouvre le fichier en
mode de partage exclusif. Si vous sp&eacute;cifiez &quot;read&quot;, MM_OpenConfigFile() ouvre le fichier en mode de partage non
exclusif.
Si vous ouvrez le fichier en mode &quot;write&quot;, toutes les donn&eacute;es existant dans le fichier sont tronqu&eacute;es avant que les
nouvelles donn&eacute;es ne soient &eacute;crites. Si vous ouvrez le fichier en mode &quot;append&quot;, toutes les nouvelles donn&eacute;es sont
ajout&eacute;es &agrave; la fin du fichier.
Derni&egrave;re mise &agrave; jour le 22/6/2011
376
EXTENSION DE DREAMWEAVER
Extensions C
Valeurs renvoy&eacute;es
Nombre entier repr&eacute;sentant l'identificateur du fichier dans le syst&egrave;me d'exploitation. Renvoie la valeur -1 si le fichier
est introuvable ou n'existe pas.
Exemple
char *dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt&quot;;
int = fileno;
if(MM_ConfigFileExists(dwConfig))
{
fileno = MM_OpenConfigFile(dwConfig, &quot;read&quot;);
}
JSBool MM_GetConfigFileAttributes()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction trouve le fichier et en renvoie les attributs. Vous pouvez d&eacute;finir tous les arguments, sauf fileURL, sur
null si vous n'avez pas besoin de leur valeur.
Arguments
char *fileURL, unsigned long *attrs, unsigned long *filesize, unsigned long *modtime, unsigned long *createtime
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le fichier dont vous voulez les arguments. Vous devez
fournir cet argument sous forme de fichier (file:// URL). Si fileURL indique un chemin d'acc&egrave;s dans le dossier
Configuration de Dreamweaver, la fonction MM_GetConfigFileAttributes() commence par d&eacute;terminer le
chemin d'acc&egrave;s &agrave; utiliser avant d'ouvrir le fichier.
• L'argument unsigned long *attrs repr&eacute;sente l'adresse d'un nombre entier contenant les bits d'attribut renvoy&eacute;s (voir
&laquo; JSBool MM_SetConfigFileAttributes() &raquo; &agrave; la page 377 pour la liste des attributs disponibles).
• unsigned long *filesize est l'adresse d'un entier dans lequel la fonction renvoie la taille du fichier enoctets.
• unsigned long *modtime est l'adresse d'un entier dans lequel la fonction renvoie l'heure &agrave; laquelle le fichier a &eacute;t&eacute;
modifi&eacute; pour la derni&egrave;re fois. Cette heure correspond &agrave; la valeur horaire du syst&egrave;me d'exploitation. Pour plus
d'informations sur la valeur horaire du syst&egrave;me d'exploitation, voir DWfile.getModificationDate() dans le
Guide des API de Dreamweaver.
• unsigned long *createtime est l'adresse d'un entier dans lequel la fonction renvoie l'heure &agrave; laquelle le fichier a &eacute;t&eacute;
cr&eacute;&eacute;. Cette heure correspond &agrave; la valeur horaire du syst&egrave;me d'exploitation. Pour plus d'informations sur la valeur
horaire du syst&egrave;me d'exploitation, voir DWfile.getCreationDate() dans le Guide des API de Dreamweaver.
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec. Renvoie la valeur
JS_FALSE si le fichier n'existe pas ou si une erreur se produit pendant l'obtention des attributs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
377
EXTENSION DE DREAMWEAVER
Extensions C
Exemple
char dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt&quot;;
unsigned long attrs;
unsigned long filesize;
unsigned long modtime;
unsigned long createtime;
MM_GetConfigAttributes(dwConfig, &amp;attrs, &amp;filesize, &amp;modtime, &amp;createtime);
JSBool MM_SetConfigFileAttributes()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction applique les attributs que vous sp&eacute;cifiez pour le fichier, s'ils diff&egrave;rent des attributs actuels.
Si l'URL de fichier sp&eacute;cifi&eacute;e d&eacute;crit un chemin d'acc&egrave;s au dossier Configuration de Dreamweaver, cette fonction
commence par copier le fichier dans le dossier Configuration de l'utilisateur avant d'appliquer les attributs. Si les
attributs sont identiques aux attributs actuels du fichier, ce dernier n'est pas copi&eacute;.
Arguments
char *fileURL, unsigned long attrs
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le fichier dont vous souhaitez d&eacute;finir les attributs,
exprim&eacute; sous la forme d'une URL de fichier (file://).
• unsigned long attrs sp&eacute;cifie les bits d'attribut &agrave; appliquer au fichier. Vous pouvez utiliser l'op&eacute;rateur logique OR dans
les constantes suivantes pour d&eacute;finir les attributs :
MM_FILEATTR_NORMAL
MM_FILEATTR_RDONLY
MM_FILEATTR_HIDDEN
MM_FILEATTR_SYSTEM
MM_FILEATTR_SUBDIR
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec. Renvoie JS_FALSE si le
fichier n'existe pas ou s'il va &ecirc;tre supprim&eacute;.
Exemple
char *dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt&quot;;
unsigned long attrs;
attrs = (MM_FILEATTR_NORMAL | MM_FILEATTR_RDONLY);
int fileno = 0;
if(MM_SetConfigFileAttrs(dwConfig, attrs))
{
fileno = MM_OpenConfigFile(dwConfig);
}
Derni&egrave;re mise &agrave; jour le 22/6/2011
378
EXTENSION DE DREAMWEAVER
Extensions C
JSBool MM_CreateConfigFolder()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction cr&eacute;e un dossier &agrave; l'emplacement sp&eacute;cifi&eacute;.
Si l'argument fileURL indique un dossier dans le dossier Configuration de Dreamweaver, la fonction cr&eacute;e le dossier
dans le dossier Configuration de l'utilisateur. Si fileURL n'indique pas un sous-dossier du dossier Configuration de
Dreamweaver, la fonction cr&eacute;e le dossier ainsi que tous ses dossiers parents dans le chemin d'acc&egrave;s, si ceux-ci n'existent
pas d&eacute;j&agrave;.
Arguments
char *fileURL
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le dossier de configuration &agrave; cr&eacute;er, exprim&eacute; sous la forme
d'une URL de fichier (file://).
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Exemple
char *dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 &shy;
/Configuration/Extensions.txt&quot;;
MM_CreateConfigFolder(dwConfig);
JSBool MM_RemoveConfigFolder()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction supprime le dossier, ainsi que ses fichiers et sous-dossiers. Si le sous-dossier r&eacute;side dans le dossier
Configuration de Dreamweaver, elle marque le dossier pour suppression dans le fichier mm_deleted_files.xml.
Arguments
char *fileURL
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le dossier &agrave; supprimer, exprim&eacute; sous la forme d'une URL
de fichier (file://).
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Exemple
char *dwConfig = &quot;file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 &shy;
/Configuration/Objects&quot;;
MM_RemoveConfigFolder(dwConfig);
Derni&egrave;re mise &agrave; jour le 22/6/2011
379
EXTENSION DE DREAMWEAVER
Extensions C
JSBool MM_DeleteConfigFile()
Disponibilit&eacute;
Dreamweaver MX.
Description
Cette fonction supprime le fichier le cas &eacute;ch&eacute;ant. Si le fichier r&eacute;side &agrave; un niveau inf&eacute;rieur au dossier Configuration de
Dreamweaver, la fonction marque le fichier pour suppression dans le fichier mm_deleted_files.xml.
Si l'argument fileURL n'indique pas de dossier dans le dossier Configuration de Dreamweaver, la fonction supprime le
fichier sp&eacute;cifi&eacute;.
Arguments
char *fileURL
• char *fileURL est un pointeur vers une cha&icirc;ne qui nomme le dossier de configuration &agrave; supprimer, exprim&eacute; sous la
forme d'une URL de fichier (file://).
Valeurs renvoy&eacute;es
Valeur bool&eacute;enne : JS_TRUE indique le succ&egrave;s de l'op&eacute;ration ; JS_FALSE indique son &eacute;chec.
Exemple
char dwConfig = &quot;file:///c:|Program Files/Adobe/Adobe Dreamweaver CS3
/Configuration/Objects/insertbar.xml&quot;;
MM_DeleteConfigFile(dwConfig);
Appel d'une fonction C &agrave; partir de JavaScript
A pr&eacute;sent que vous savez comment fonctionnent les extensionsC dans Dreamweaver et que vous connaissez les
fonctions et les types de donn&eacute;es sur lesquels elles reposent, vous allez apprendre &agrave; construire une biblioth&egrave;que et &agrave;
appeler une fonction.
L'exemple qui suit n&eacute;cessite les cinq fichiers suivants situ&eacute;s dans le dossier de l'application Dreamweaver
Tutorial_assets/Extending sous forme d'archives, pour les plates-formes Macintosh et Windows :
• Le fichier d'en-t&ecirc;te mm_jsapi.h comprend des d&eacute;finitions des types de donn&eacute;es et de fonctions qui sont d&eacute;crites
dans la section &laquo; Extensions C et interpr&eacute;teur JavaScript &raquo; &agrave; la page 363.
• Le fichier mm_jsapi_environment.h d&eacute;finit la structure MM_Environment.h.
• Le fichier MMInfo.h fournit un acc&egrave;s &agrave; l'API de Design Notes.
• Le fichier d'exemple Sample.c d&eacute;finit la fonction computeSum().
• Le fichier Make Sample.mak permet de cr&eacute;er le fichier Sample.c source dans une DLL avec Microsoft Visual C++.
Sample.mcp est un fichier &eacute;quivalent destin&eacute; &agrave; cr&eacute;er un bundle Mach-O par le biais de Metrowerks CodeWarrior
et Sample.xcode est un fichier &eacute;quivalent pour Apple Xcode. Si vous utilisez un autre outil, vous pouvez cr&eacute;er votre
propre fichier Make.
Derni&egrave;re mise &agrave; jour le 22/6/2011
380
EXTENSION DE DREAMWEAVER
Extensions C
Cr&eacute;ation de la DLL sous Windows avec VS.Net 2003
1 Chosissez Fichier &gt; Ouvrir, puis s&eacute;lectionnez Sample.mak en d&eacute;finissant le type de fichier sur Tous les fichiers (*.*).
(VS.Net 2003 n'ouvre pas directement les fichiers MAK.) Vous &ecirc;tes invit&eacute; &agrave; confirmer que vous souhaitez convertir
le projet au nouveau format.
2 Choisissez G&eacute;n&eacute;rer &gt; G&eacute;n&eacute;rer la solution.
Une fois l'op&eacute;ration de g&eacute;n&eacute;ration termin&eacute;e, le fichier Sample.dll appara&icirc;t dans le dossier qui contient Sample.mak (ou
dans l'un de ses sous-dossiers).
Cr&eacute;ation de la DLL sous Windows avec Microsoft Visual C++
1 Dans Microsoft Visual C++, choisissez Fichier &gt; Ouvrir un espace de travail, puis s&eacute;lectionnez Sample.mak.
2 Choisissez G&eacute;n&eacute;rer &gt; Tout reconstruire.
Une fois l'op&eacute;ration de g&eacute;n&eacute;ration termin&eacute;e, le fichier Sample.dll appara&icirc;t dans le dossier qui contient Sample.mak (ou
dans l'un de ses sous-dossiers).
Cr&eacute;ation de la biblioth&egrave;que partag&eacute;e sur Macintosh au moyen de Metrowerks CodeWarrior 9 ou ult&eacute;rieur
1 Ouvrez Sample.mcp.
2 Compilez le projet (Project &gt; Make) pour g&eacute;n&eacute;rer un bundle Mach-O.
Une fois la compilation termin&eacute;e, le fichier Sample.bundle appara&icirc;t dans le dossier qui contient Sample.mcp.
Remarque : Le bundle Mach-O qui est g&eacute;n&eacute;r&eacute; doit &ecirc;tre utilis&eacute; dans Dreamweaver 8 ou une version plus r&eacute;cente. Les
versions pr&eacute;c&eacute;dentes de Dreamweaverne le reconnaissent pas.
Cr&eacute;ation de la biblioth&egrave;que partag&eacute;e sur Macintosh au moyen de Apple Xcode 1.5 ou ult&eacute;rieur
1 Ouvrez Sample.xcode.
2 Compilez le projet (Build &gt; Build) pour g&eacute;n&eacute;rer un bundle Mach-O.
Une fois la compilation termin&eacute;e, le fichier Sample.bundle appara&icirc;t dans le dossier de compilation en regard du fichier
Sample.xcode.
Remarque : Le bundle Mach-O qui est g&eacute;n&eacute;r&eacute; doit &ecirc;tre utilis&eacute; dans Dreamweaver 8 ou une version plus r&eacute;cente. Les
versions pr&eacute;c&eacute;dentes de Dreamweaverne le reconnaissent pas.
Appel de la fonction computeSum() &agrave; partir de l'objet Ins&eacute;rer barre horizontale
1 Dans le dossier Configuration du dossier de l'application Dreamweaver, cr&eacute;ez un dossier appel&eacute; JSExtensions.
2 Copiez le fichier Sample.dll (Windows) ou Sample.bundle (Macintosh) dans le dossier JSExtensions.
3 Dans un &eacute;diteur de texte, ouvrez le fichier HR.htm qui se trouve dans le dossier Configuration/Objects/Common.
4 Ajoutez la ligne alert(Sample.computeSum(2,2)); &agrave; la fonction objectTag(), comme indiqu&eacute; dans l'exemple
ci-dessous :
function objectTag() {
// Return the html tag that should be inserted
alert(Sample.computeSum(2,2));
return &quot;&lt;HR&gt;&quot;;
}
5 Enregistrez le fichier et red&eacute;marrez Dreamweaver.
Pour ex&eacute;cuter la fonction computeSum(), s&eacute;lectionnez Insertion &gt; HTML &gt; Barre horizontale.
Une bo&icirc;te de dialogue contenant le chiffre 4 (r&eacute;sultat de la somme de 2 plus 2) s'affiche.
Derni&egrave;re mise &agrave; jour le 22/6/2011
381
Chapitre 24 : Dossier Shared
Le dossier Shared est le lieu de stockage central des fonctions utilitaires, des classes et des images utilis&eacute;es
commun&eacute;ment par toutes les extensions. Toutes les extensions peuvent r&eacute;f&eacute;rencer les fichiers dans les sous-dossiers
du dossier Shared. Vous pouvez &eacute;galement ajouter des utilitaires communs &agrave; ceux d&eacute;j&agrave; fournis par Adobe
Dreamweaver. Les dossiers Configuration multi-utilisateur install&eacute;s pour les utilisateurs des plates-formes Windows
XP, Windows 2000 et MacOs X contiennent &eacute;galement un dossier Shared autorisant les personnalisations. Par
exemple, lorsque vous installez une extension &agrave; partir d'Adobe Exchange, vous remarquerez peut-&ecirc;tre que la nouvelle
extension ajoute des donn&eacute;es &agrave; votre dossier Configuration/Shared utilisateur plut&ocirc;t qu'au dossier
Configuration/Shared de l'application Dreamweaver. Pour plus d'informations sur les dossiers Configuration de
Dreamweaver sur un ordinateur multi-utilisateur, voir &laquo; Dossiers de configuration multi-utilisateur &raquo; &agrave; la page 82.
Contenu du dossier Shared
Le dossier Shared est divis&eacute; en sous-dossiers qui contiennent des fichiers partag&eacute;s par plusieurs extensions,
notamment des fonctions permettant entre autres de naviguer dans le syst&egrave;me de dossiers des utilisateurs, d'ins&eacute;rer
une commande d'arborescence et de cr&eacute;er des grilles modifiables.
Remarque : Les fichiers JavaScript du dossier Shared contiennent des commentaires dans le code qui fournissent des
d&eacute;tails sur les fonctions qu'ils contiennent.
Voir les fichiers JavaScript dans le dossier Shared, ainsi que les fichiers HTML du dossier Configuration qui contient
ces fichiers JavaScript. Ils vous fourniront des explications sur l'utilisation de ces fichiers.
En r&egrave;gle g&eacute;n&eacute;rale, vous serez amen&eacute; &agrave; utiliser les fonctions et ressources des dossiers Common et MM ou &agrave; ajouter des
ressources dans le dossier Common pour les utiliser dans de nouvelles extensions. Commencez toujours par
rechercher les utilitaires et les fonctions dans le dossier Shared/Common/Scripts. Ces fonctions et utilitaires sont les
plus r&eacute;cents et forment l'interface formelle avec le dossier Shared. Les fichiers des autres dossiers risquent quant &agrave; eux
de ne pas &ecirc;tre &agrave; jour.
Le dossier Shared contient plus sp&eacute;cifiquement les dossiers pr&eacute;sent&eacute;s ci-dessous.
Dossier Common
Le dossier Common contient des scripts et des classes partag&eacute;s &agrave; utiliser dans les extensions de tiers.
Fichier
Description
CodeBehindMgr.js
Contient les fonctions permettant de cr&eacute;er un document code-behind. Un document code-behind
permet de cr&eacute;er des pages distinctes qui s&eacute;parent le code relatif &agrave; la logique de l'interface utilisateur (UI)
du code relatif &agrave; une conception d'interface utilisateur. Les m&eacute;thodes de JSCodeBehindMgr d&eacute;finies
dans ce fichier permettent de cr&eacute;er de nouveaux documents code-behind et de g&eacute;rer le lien vers les
documents de conception.
ColumnValueNodeClass.js
Contient des fonctions permettant d'associer les colonnes des bases de donn&eacute;es &agrave; des valeurs. Les
m&eacute;thodes de ColumnValueNode d&eacute;finies dans ce fichier permettent d'obtenir et de d&eacute;finir plusieurs
valeurs et propri&eacute;t&eacute;s d'une colonne de base de donn&eacute;es. Dreamweaver utilise cette classe de stockage
lorsqu'il applique et inspecte des objets d'op&eacute;rations de modification (insertion et mise &agrave; jour
d'enregistrements) et lorsqu'il utilise la classe SQLStatement.
CompilerClass.js
Contient des fonctions pour une classe de base utilis&eacute;e par CompilerASPNetCSharp et
CompilerASPNVBNet mais peut &ecirc;tre &eacute;tendu de fa&ccedil;on &agrave; prendre en charge d'autres compilateurs.
Derni&egrave;re mise &agrave; jour le 22/6/2011
382
EXTENSION DE DREAMWEAVER
Dossier Shared
Fichier
Description
DataSourceClass.js
Contient des fonctions qui d&eacute;finissent la structure de renvoi pour &laquo; findDynamicSources() &raquo; &agrave; la
page 313.
DBTreeControlClass.js
Contient des fonctions qui cr&eacute;ent une commande d'arborescence de base de donn&eacute;es. Cette classe
permet de cr&eacute;er et d'interagir avec une commande d'arborescence de base de donn&eacute;es. Pour cr&eacute;er une
commande d'arborescence de base de donn&eacute;es comme celle des comportements de serveurs de jeux
d'enregistrements avanc&eacute;s, cr&eacute;ez une liste &lt;select&gt; sp&eacute;ciale avec type=&quot;mmdatabasetree&quot; dans
votre fichier HTML. Joignez une classe CBTreeControl &agrave; la commande HTML en transmettant le nom
de la liste &lt;select&gt; &agrave; l'&eacute;laborateur de la classe. Utilisez ensuite les fonctions DBTreeControl pour
manipuler la commande.
dotNetUtils.js
Contient des fonctions permettant de faciliter l'utilisation des inspecteurs Propri&eacute;t&eacute;s des objets et des
comportements de serveur pour les contr&ocirc;les de formulaires ASP.NET qui sont traduits.
dwscripts.js
Vous trouverez dans le fichier principal des fonctions utiles &agrave; toutes les extensions Dreamweaver. Il
comprend des fonctions permettant d'utiliser des cha&icirc;nes, des fichiers, des Design Notes, etc.
dwscriptsExtData.js
Ce fichier est une extension du fichier dwscripts.js. Il facilite l'utilisation des comportements de serveur,
en particulier avec les fichiers EDML de comportements de serveurs. Utilis&eacute; tr&egrave;s largement dans
l'impl&eacute;mentation des comportements de serveur dans Dreamweaver.
dwscriptsServer.js
Ce fichier est une extension du fichier dwscripts.js. Il contient des fonctions sp&eacute;cifiques aux mod&egrave;les de
serveur. Un grand nombre de ces fonctions sont utilis&eacute;es pour travailler avec les comportements de
serveur.
GridControlClass.js
Utilisez cette classe pour cr&eacute;er et manipuler une grille modifiable. Vous devez ajouter une liste de
s&eacute;lection sp&eacute;ciale &agrave; votre page HTML et y joindre cette classe dans JavaScript pour manipuler la grille.
ImageButtonClass.js
Cette classe facilite le contr&ocirc;le de l'aspect du bouton: pression, survol de souris pendant pression, survol
de souris et d&eacute;sactiv&eacute; pendant pression.
ListControlClass.js
Contient des fonctions permettant de g&eacute;rer une balise &lt;select&gt;. Egalement appel&eacute; contr&ocirc;le de liste.
Les m&eacute;thodes de l'objet ListControl dans ce fichier permettent d'obtenir, de d&eacute;finir et de changer la
valeur de la commande SELECT.
PageSettingsASPNet.js
Contient des fonctions qui d&eacute;finissent les propri&eacute;t&eacute;s d'un document ASP.NET.
RadioGroupClass.js
Contient les fonctions permettant de d&eacute;finir et de g&eacute;rer un groupe de boutons radio. Les m&eacute;thodes de
l'objet RadioGroup de ce fichier permettent de d&eacute;finir et d'obtenir les valeurs et le comportement d'un
groupe de boutons radio. Vous devez joindre cette classe aux boutons radio dans votre code HTML pour
contr&ocirc;ler leur comportement.
SBDatabaseCallClass.js
Sous-classe de la classe ServerBehavior. Cette classe comprend des fonctionnalit&eacute;s sp&eacute;cifiques &agrave; la
cr&eacute;ation d'appels de bases de donn&eacute;es, par exemple l'appel d'une proc&eacute;dure stock&eacute;e, l'utilisation de SQL
pour renvoyer un jeu d'enregistrements, etc. Il s'agit d'une classe de base abstraite, ce qui signifie qu'elle
ne peut pas &ecirc;tre cr&eacute;&eacute;e et utilis&eacute;e seule. Pour l'utiliser, vous devez d&eacute;finir SBDatabaseCall() comme
sous-classe et impl&eacute;menter les fonctions d'espace r&eacute;serv&eacute;. Dreamweaver utilise cette classe pour
impl&eacute;menter ses comportements de serveur de jeux d'enregistrements et de proc&eacute;dures stock&eacute;es.
ServerBehaviorClass.js
Contient des fonctions permettant de communiquer des informations concernant les comportements
de serveur &agrave; Dreamweaver. Vous pouvez d&eacute;finir cette classe en sous-classe lorsque vous impl&eacute;mentez
vos comportements de serveur.
ServerSettingsASPNet.js
Contient des fonctions permettant de stocker les propri&eacute;t&eacute;s d'un serveur ASP.NET.
SQLStatementClass.js
Contient des fonctions permettant de cr&eacute;er et de modifier des instructions SQL telles que SELECT,
INSERT, UPDATE, DELETE et des instructions de proc&eacute;dures stock&eacute;es.
tagDialogsCmn.js
Contient des fonctions visant &agrave; vous aider &agrave; d&eacute;velopper des bo&icirc;tes de dialogue de balise personnalis&eacute;es.
Les m&eacute;thodes de l'objet tagDialog d&eacute;finies dans ce fichier modifient les attributs et les valeurs d'une
balise particuli&egrave;re.
Derni&egrave;re mise &agrave; jour le 22/6/2011
383
EXTENSION DE DREAMWEAVER
Dossier Shared
Fichier
Description
TagEditClass.js
Contient des fonctions permettant de modifier des balises sans changer le DOM de la page en cours. Les
m&eacute;thodes de l'objet TagEdit d&eacute;finies dans ce fichier permettent d'obtenir et de d&eacute;finir la valeur, les
attributs et les enfants d'une balise.
TreeControlClass.js
Contient des fonctions permettant de g&eacute;rer une commande d'arborescence dans Dreamweaver. Les
m&eacute;thodes de l'objet TreeControl d&eacute;finies dans ce fichier permettent d'obtenir, de d&eacute;finir et
d'organiser les valeurs dans une arborescence. Vous devez joindre cette classe &agrave; une balise
MM:TREECONTROL sp&eacute;ciale dans votre page HTML pour g&eacute;rer la fonctionnalit&eacute; de la commande
d'arborescence.
XMLPropSheetClass.js
Contient des fonctions permettant de g&eacute;rer l'emplacement et les valeurs d'une fiche de propri&eacute;t&eacute;s XML.
Dossier MM
Le dossier MM contient les scripts, les images et les classes partag&eacute;s utilis&eacute;s par les extensions fournies avec
Dreamweaver, comme les scripts de cr&eacute;ation d'une barre de navigation, de sp&eacute;cification des appels pr&eacute;charg&eacute;s et de
d&eacute;finition de raccourcis clavier.
Sous-dossier Scripts
Le sous-dossier Scripts contient les fonctions utilitaires suivantes :
Fichier
Description
CFCutilities.js
Contient les fonctions utilitaires li&eacute;es aux composants Adobe ColdFusion. Les fonctions permettent
d'analyser les attributs depuis la balise d'ouverture d'un nœud donn&eacute;, d'analyser une arborescence CFC,
d'obtenir le DOM d'URL en cours, d'obtenir le DOM de CFC, etc.
event.js
Contient des fonctions permettant d'enregistrer les &eacute;v&eacute;nements, de notifier les parties des &eacute;v&eacute;nements
&agrave; partir du fichier menus.xml et d'ajouter des notificateurs d'&eacute;v&eacute;nement au fichier menus.xml.
FlashObjects.js
Contient des fonctions permettant de mettre &agrave; jour un s&eacute;lecteur de couleur, de v&eacute;rifier la couleur
hexad&eacute;cimale, de v&eacute;rifier un lien absolu, d'ajouter une extension &agrave; un nom de fichier, de g&eacute;n&eacute;rer des
messages d'erreur, de d&eacute;finir des attributs Flash, de v&eacute;rifier un lien vers un objet Flash, etc.
insertFireworksHTML.js
Contient des fonctions permettant d'ins&eacute;rer du code HTML provenant d'Adobe Fireworks CS3 dans les
documents Dreamweaver. Les fonctions permettent de v&eacute;rifier si le document en cours est un document
Fireworks, d'ins&eacute;rer du code HTML Fireworks au point d'insertion, de mettre &agrave; jour le bloc de style
Fireworks par rapport &agrave; Dreamweaver, etc. Contient &eacute;galement des fonctions utilitaires apparent&eacute;es.
jumpMenuUI.js
Contient des fonctions &agrave; utiliser avec l'objet menu de reroutage et le comportement menu de reroutage.
Les fonctions permettent de compl&eacute;ter les options de menus, de cr&eacute;er une &eacute;tiquette d'option, d'ajouter
une option, de supprimer une option, etc.
keyCodes.js
Contient un tableau de codes de raccourcis clavier.
navBar.js
Contient des classes et des fonctions permettant de travailler avec une barre de navigation et des
&eacute;l&eacute;ments de la barre de navigation. Comprend des fonctions permettant d'ajouter, de supprimer et de
manipuler des &eacute;l&eacute;ments de la barre de navigation.
NBInit.js
Contient des fonctions li&eacute;es aux comportements des images de barre de navigation.
pageEncodings.js
D&eacute;finit diff&eacute;rents codes de langue.
preload.js
Contient des fonctions permettant d'ajouter et de supprimer des appels d'images pr&eacute; charg&eacute;es dans le
gestionnaire BODY/onLoad MM_preloadImages.
RecordsetDialogClass.js
Contient la classe statique et les fonctions permettant d'afficher l'interface utilisateur des
comportements de serveur de jeux d'enregistrements. Les fonctions d&eacute;terminent l'interface &agrave; afficher,
simple ou avanc&eacute;e. H&eacute;berge &eacute;galement des fonctionnalit&eacute;s partag&eacute;es entre les impl&eacute;mentations de
l'interface utilisateur et permet de passer d'une interface utilisateur &agrave; une autre.
Derni&egrave;re mise &agrave; jour le 22/6/2011
384
EXTENSION DE DREAMWEAVER
Dossier Shared
Fichier
Description
sbUtils.js
Contient des fonctions partag&eacute;es &agrave; utiliser dans les comportements de serveur Adobe. La classe
dwscripts du dossier Configuration/Shared/Common/Scripts contient des utilitaires plus g&eacute;n&eacute;raux.
setText.js
Contient des fonctions permettant de quitter une cha&icirc;ne d'expression, de revenir &agrave; une cha&icirc;ne
d'expression et d'extraire une cha&icirc;ne d'expression.
sortTable.js
Contient des fonctions permettant d'initialiser et de trier un tableau, ainsi que des fonctions permettant
de trier un tableau, de d&eacute;finir le pointeur de la souris en ic&ocirc;ne de main ou en pointeur et de v&eacute;rifier le
type et la version du navigateur.
Le dossier Scripts contient &eacute;galement deux sous-dossiers : Class et CMN.
Dossier Class
Le dossier Class contient les fonctions utilitaires suivantes :
Fichier
Description
classCheckbox.js
Permet de manipuler un contr&ocirc;le de case &agrave; cocher dans votre extension HTML.
FileClass.js
Contient une classe repr&eacute;sentant un fichier dans le syst&egrave;me de fichiers. Les chemins sont repr&eacute;sent&eacute;s par
des URL pour garantir la compatibilit&eacute; entre plates-formes. Les m&eacute;thodes sont toString(),
getName(), getSimpleName(), getExtension(), getPath(), setPath(), isAbsolute(),
getAbsolutePath(), getParent(), getAbsoluteParent(), exists(), getAttributes(),
canRead(), canWrite(), isFile(), isFolder(), listFolder(), createFolder(),
getContents(), setContents(), copyTo() et remove().
GridClass.js
Contient une classe permettant de g&eacute;rer MM:TREECONTROL.
GridControlClass.js
Version plus ancienne de GridControlClass dans le dossier Common. Voir le fichier
GridControlClass.js du dossier Shared/Common/Scripts.
ImageButtonClass.js
Version plus ancienne de ImageButtonClass dans le dossier Common. Voir le fichier
ImageButtonClass.js du dossier Shared/Common/Scripts.
ListControlClass.js
Version plus ancienne de ListControlClass dans le dossier Common. Voir le fichier
Shared/Common/Scripts/ListControlClass.js.
NameValuePairClass.js
Cr&eacute;e et g&egrave;re une liste de paires nom/valeur. Les noms peuvent comporter n'importe quels caract&egrave;res. Les
valeurs peuvent &ecirc;tre vides, mais elles ne peuvent pas &ecirc;tre d&eacute;finies sur null, qui reviendrait &agrave; les
supprimer.
PageControlClass.js
Exemple d'une classe de page &agrave; utiliser avec la classe TabControl. Consultez la description de
TabControlClass.js.
PreferencesClass.js
Contient un objet et des m&eacute;thodes contenant toutes les informations de pr&eacute;f&eacute;rences d'une commande.
RadioGroupClass.js
Version plus ancienne de RadioGroupClass dans le dossier Common. Voir le fichier
RadioGroupClass.js du dossier Shared/Common/Scripts.
TabControlClass.js
Aide &agrave; cr&eacute;er une extension ayant plusieurs onglets, page.lastUnload().
Dossier CMN
Le dossier CMN contient les fonctions utilitaires suivantes :
Derni&egrave;re mise &agrave; jour le 22/6/2011
385
EXTENSION DE DREAMWEAVER
Dossier Shared
Fichier
Description
dateID.js
Contient deux fonctions, createDateID() et decipherDateID(). Pour trois cha&icirc;nes donn&eacute;es,
&quot;dayFormat&quot;, &quot;dateFormat&quot; et &quot;timeFormat&quot;, createDateID() cr&eacute;e un ID pour chacune d'elles.
Appliqu&eacute;e &agrave; une plage de dates, la fonction decipherDateID() renvoie une plage contenant trois
&eacute;l&eacute;ments : dayFormat, dateFormat et timeFormat.
displayHelp.js
Contient une fonction permettant d'afficher le document d'aide sp&eacute;cifi&eacute;.
docInfo.js
Contient des fonctions qui fournissent des informations sur le document de l'utilisateur. Ces fonctions
permettent d'effectuer des op&eacute;rations telles que le renvoi d'un tableau de r&eacute;f&eacute;rences d'objets pour un
type de navigateur et une balise sp&eacute;cifi&eacute;s, le renvoi de toutes les instances d'un nom de balise sp&eacute;cifi&eacute;,
la recherche d'une balise qui entoure la s&eacute;lection en cours, etc.
DOM.js
Contient des fonctions d'aide g&eacute;n&eacute;rales pour utiliser le DOM Dreamweaver. Comprend des fonctions qui
permettent d'obtenir le nœud racine du document actif, de trouver la balise d'un nom donn&eacute;, de cr&eacute;er
une liste de nœuds &agrave; partir du nœud de d&eacute;part sp&eacute;cifi&eacute;, de v&eacute;rifier si une balise donn&eacute;e est contenue
dans une autre balise, d'effectuer diverses op&eacute;rations sur les fonctions de comportement, etc.
enableControl.js
Contient une fonction, SetEnabled(), qui permet d'activer ou de d&eacute;sactiver une commande en
fonction des arguments qu'elle re&ccedil;oit. Il est possible d'activer une commande d&eacute;j&agrave; activ&eacute;e ou de
d&eacute;sactiver une commande d&eacute;j&agrave; d&eacute;sactiv&eacute;e.
errmsg.js
Contient des fonctions de connexion pour accumuler la sortie de trac&eacute;s dans un tableau de pages de
connexion qui apparaissent dans une bo&icirc;te de dialogue.
file.js
Contient des fonctions en rapport avec des op&eacute;rations sur les fichiers. Ces fonctions permettent &agrave;
l'utilisateur de rechercher un nom de fichier local, de convertir le chemin relatif en chemin URL du fichier,
de renvoyer le nom de fichier du document en cours, de d&eacute;terminer si un document sp&eacute;cifi&eacute; a &eacute;t&eacute;
enregistr&eacute; sur le site en cours et de renvoyer son chemin relatif, ou de d&eacute;terminer si un fichier sp&eacute;cifi&eacute; est
ouvert.
form.js
Contient des fonctions permettant d'ajouter un formulaire autour d'une cha&icirc;ne de texte donn&eacute;e si un
formulaire n'existe pas d&eacute;j&agrave; dans le document ou l'&eacute;l&eacute;ment PA en cours. Comprend des fonctions
permettant de d&eacute;terminer si un objet est un &eacute;l&eacute;ment PA et si le point d'insertion se trouve &agrave; l'int&eacute;rieur
d'un formulaire.
handler.js
Contient des fonctions permettant d'obtenir une fonction pour un gestionnaire d'&eacute;v&eacute;nement, d'ajouter
une fonction &agrave; un gestionnaire d'&eacute;v&eacute;nement et de supprimer une fonction d'un gestionnaire
d'&eacute;v&eacute;nement.
helper.js
Contient diverses fonctions utiles permettant de remplacer le codage, de r&eacute;tablir les guillemets (&quot;), de
v&eacute;rifier si un nœud se trouve dans une plage de s&eacute;lection et de v&eacute;rifier s'il existe des noms d'objets en
double.
insertion.js
Contient la fonction insertIntoDocument(), qui ins&egrave;re une cha&icirc;ne de texte dans un document au
point d'insertion. Contient &eacute;galement les fonctions de prise en charge getHigherBlockTag() et
arrContains(). La fonction getHigherBlockTag() permet d'obtenir le prochain blockTag le plus
&eacute;lev&eacute;, comme d&eacute;fini dans le tableau blockTag. La fonction arrContains() permet de localiser un
&eacute;l&eacute;ment sp&eacute;cifi&eacute; dans un tableau.
localText.js
Variables r&eacute;serv&eacute;es, non destin&eacute;es &agrave; un usage g&eacute;n&eacute;ral. Utilisez Startup/mminit.htm &agrave; la place ou utilisez
les cha&icirc;nes provenant des fichiers Dreamweaver Configuration/Strings/*.xml.
menuItem.js
Contient des fonctions qui ajoutent ou suppriment des valeurs d'un &eacute;l&eacute;ment de menu.
niceName.js
Contient des fonctions permettant de convertir un tableau de r&eacute;f&eacute;rences Object en un tableau de noms
plus simples.
quickString.js
Contient des fonctions permettant de regrouper des cha&icirc;nes de petite taille sans avoir &agrave; allouer de la
m&eacute;moire &agrave; chaque fois.
Derni&egrave;re mise &agrave; jour le 22/6/2011
386
EXTENSION DE DREAMWEAVER
Dossier Shared
Fichier
Description
string.js
Contient un ensemble g&eacute;n&eacute;rique de fonctions permettant de manipuler et d'analyser des cha&icirc;nes de
texte. Les fonctions sont les suivantes : extractArgs(), escQuotes(), unescQuotes(),
quoteMeta(), errMsg(), badChars(), getParam(), quote(), stripSpaces(), StripChars(),
AllInRange(), reformat(), trim(), createDisplayString(), entityNameEncode(),
entityNameDecode(), stripAccelerator() et SprintF().
TemplateUtils.js
Contient des fonctions utilitaires pour les mod&egrave;les Dreamweaver. Ces fonctions permettent d'ins&eacute;rer
une r&eacute;gion modifiable dans un document, d'ins&eacute;rer une r&eacute;gion r&eacute;p&eacute;t&eacute;e dans un document, de
rechercher une r&eacute;gion modifiable sp&eacute;cifi&eacute;e dans un document, etc.
UI.js
Contient des fonctions g&eacute;n&eacute;riques qui contr&ocirc;lent l'interface utilisateur. Ces fonctions permettent de
localiser un objet d&eacute;sign&eacute; dans le document en cours, de charger les options de liste de s&eacute;lection avec
des cha&icirc;nes localis&eacute;es, de renvoyer la valeur de l'attribut d'une option s&eacute;lectionn&eacute;e et d'envelopper le
message d'une alerte.
Autres dossiers
La liste suivante d&eacute;crit les autres dossiers int&eacute;ressants du dossier Shared :
Dossier Controls Le dossier Controls contient les &eacute;l&eacute;ments utilis&eacute;s pour cr&eacute;er un comportement de serveur. Ces
contr&ocirc;les comprennent des interfaces pour les menus de texte et de jeux d'enregistrements.
Remarque : Ces contr&ocirc;les sont utilis&eacute;s par le Cr&eacute;ateur de comportements de serveur de Dreamweaver et par de nombreux
comportements de serveur de Dreamweaver, mais certains sont utiles pour g&eacute;rer un contr&ocirc;le dans votre extension.
Fireworks Le dossier Fireworks contient les fichiers de prise en charge pour l'int&eacute;gration de Fireworks.
UltraDev Dreamweaver conserve ce dossier principalement pour des raisons de compatibilit&eacute;. Il ne doit pas &ecirc;tre utilis&eacute;
pour les nouvelles extensions. Utilisez le dossier Dreamweaver Configuration/Shared/Common, qui contient
&eacute;galement la majeure partie de cette fonctionnalit&eacute;. Voir &laquo; Dossier Common &raquo; &agrave; la page 381.
Utilisation du dossier Shared
Commencez par rechercher les codes d'extension dans le dossier Dreamweaver Configuration/Shared/Common. Ce
dossier contient en effet les fonctionnalit&eacute;s les plus courantes et les plus r&eacute;centes.
Les extensions peuvent utiliser les ressources du dossier Shared pour leur propre fonctionnalit&eacute;. Un objet, une
commande ou une autre extension peuvent sp&eacute;cifier l'un des fichiers JavaScript dans le dossier Shared comme fichier
source dans une balise script, puis utiliser cette fonction dans le corps du fichier ou dans un autre fichier JavaScript
inclus. Les objets et les commandes peuvent m&ecirc;me lier plusieurs fichiers JavaScript ensemble et ces fichiers JavaScript
peuvent utiliser les ressources du dossier Shared.
Par exemple, ouvrez le fichier d'objet Hypertext (Hyperlink.htm) dans le dossier d'application
Configuration/Objects/Common.Remarquez que la balise head contient les lignes suivantes :
&lt;script language=&quot;javascript&quot;
src=&quot;../../Shared/Common/Scripts/ListControlClass.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;Hyperlink.js&quot;&gt;&lt;/script&gt;
Si vous ouvrez le fichier Hyperlink.js apparent&eacute;, les lignes suivantes s'affichent :
LIST_LINKS = new ListControl('linkPath');
et
LIST_TARGETS = new ListControl('linkTarget');
Derni&egrave;re mise &agrave; jour le 22/6/2011
387
EXTENSION DE DREAMWEAVER
Dossier Shared
Avec les nouvelles d&eacute;clarations new listControl, Hyperlink.js d&eacute;finit deux nouveaux objets ListControl. Le code du
fichier Hyperlink.htm les joint ensuite aux commandes SELECT du formulaire, comme suit :
&lt;td
align=&quot;left&quot;&gt; &lt;input name=&quot;linkText&quot; type=&quot;text&quot; class=&quot;basicTextField&quot; value=&quot;&quot;&gt;
et
&lt;td align=&quot;left&quot; nowrap&gt;&lt;select name=&quot;linkPath&quot; class=&quot;basicTextField&quot; editable=&quot;true&quot;&gt;
Le script Hyperlink.js peut maintenant appeler les m&eacute;thodes ou obtenir les propri&eacute;t&eacute;s des objets LIST_LINKS ou
LIST_TARGETS pour qu'ils interagissent avec les commandes SELECT du formulaire.
Derni&egrave;re mise &agrave; jour le 22/6/2011
Manuel du propriétaire | Adobe DREAMWEAVER CS5 Manuel utilisateur

Manuels associés

Adobe

Dreamweaver CS4

Adobe

DREAMWEAVER CS3

MACROMEDIA

DREAMWEAVER 8-EXTENSION DE DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX 2004-EXTENSION DE DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX 2004-UTILISATION DE DREAMWEAVER

MACROMEDIA

DREAMWEAVER 8-UTILISATION DE DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX 6

MACROMEDIA

DREAMWEAVER MX 2004-BIEN DMARRER AVEC DREAMWEAVER

MACROMEDIA

DREAMWEAVER MX-BIEN DEMARRER AVEC DREAMWEAVER

Adobe

Dreamweaver CS4

MACROMEDIA

DREAMWEAVER 8-BIEN DMARRER AVEC DREAMWEAVER

Adobe

DREAMWEAVER CS3
