Adobe Dreamweaver CS4 Manuel utilisateur

Extension
ADOBE DREAMWEAVER CS4
®
®
©2008 Adobe Systems Incorporated. Tous droits réservés.
Copyright
Extension d'Adobe® Dreamweaver® CS4 pour Windows® et Mac OS
Si le présent guide est distribué avec un logiciel sous contrat de licence de l’utilisateur final, ce guide, de même que le logiciel dont il traite, est cédé sous licence
et ne peut être copié ou utilisé que conformément à cette licence. Sauf autorisation spécifiée dans la licence, aucune partie de cette publication ne peut être
reproduite, enregistrée sur un système de recherche ou transmise sous quelque forme ou par quelque moyen que ce soit (enregistrement électronique, mécanique
ou autre), sans l’autorisation écrite préalable d’Adobe Systems Incorporated. Notez que le contenu de ce manuel est protégé par des droits d’auteur, même s’il
n’est pas distribué avec un logiciel accompagné d’un contrat de licence pour l’utilisateur final.
Les informations contenues dans ce guide sont fournies à titre informatif uniquement ; elles sont susceptibles d’être modifiées sans préavis et ne doivent pas être
interprétées comme étant un engagement de la part d’Adobe Systems Incorporated. Adobe Systems Incorporated n’accepte aucune responsabilité quant aux
erreurs ou inexactitudes pouvant être contenues dans le présent guide.
Nous attirons votre attention sur le fait que les illustrations ou images que vous pouvez être amené à incorporer à vos projets peuvent être protégées par des
droits d’auteur. L’inclusion non autorisée de tels éléments dans vos nouveaux travaux peut constituer une violation des droits du détenteur du copyright. Veuillez
vous assurer que vous obtenez toute autorisation nécessaire auprès du détenteur du copyright.
Toute référence à des noms de sociétés dans les modèles types n’est utilisée qu’à titre d’exemple et ne fait référence à aucune société réelle.
Adobe, the Adobe logo, ActionScript, ColdFusion, Dreamweaver, Fireworks, Flash, Flex Builder, HomeSite, JRun, Macromedia, Photoshop, and UltraDev are
either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Apple and Macintosh are trademarks of Apple Inc., registered in the United States and other countries. Java is a trademark or registered trademark of Sun
Microsystems, Inc. in the United States and other countries. ActiveX, Microsoft, and Windows are either registered trademarks or trademarks of Microsoft
Corporation in the United States and/or other countries.
This work is licensed under the Creative Commons Attribution Non-Commercial 3.0 License. To view a copy of this license, visit
http://creativecommons.org/licenses/by-nc/3.0/us/
This product includes software developed by the Apache Software Foundation (http://www.apache.org/).
The Graphics Interchange Format © is the Copyright property of CompuServe Incorporated.
GIF is a Service Mark property of CompuServe Incorporated.
MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia (http://www.mp3licensing.com). You cannot use the MP3
compressed audio within the Software for real time or live broadcasts. If you require an MP3 decoder for real time or live broadcasts, you are responsible for
obtaining this MP3 technology license.
Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com).
Video in Flash Player is powered by On2 TrueMotion video technology. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com.
This product includes software developed by the OpenSymphony Group (http://www.opensymphony.com/)
Sorenson Spark™ video compression and decompression technology licensed from Sorenson Media, Inc.
The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. Database © 1990/1994 Merriam-Webster Inc./Franklin Electronic Publishers Inc., ©
1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. © 1990 Williams Collins Sons
& Co. Ltd. © 1997 - All rights reserved Proximity Technology Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1990 - All rights reserved Proximity Technology
Inc. © Oxford University Press © 2000. All rights reserved Proximity Technology Inc. © 1990 IDE a.s. © 1990 - All rights reserved Proximity Technology Inc.
This product includes software developed by Fourthought, Inc. (http://www.fourthought.com).
This product includes software developed by CollabNet (http://www.Collab.Net/).
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of
“Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202,
as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and
Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights
as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable
equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment
Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60,
60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
iii
Sommaire
Chapitre 1 : Introduction
A propos des extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Installation d'une extension
Création d'une extension
............................................................................................ 1
.............................................................................................. 2
Ressources supplémentaires pour les créateurs d'extensions
Nouvelles fonctionnalités de Dreamweaver CS4
Conventions utilisé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 indicateurs 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éfaut
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
A propos du mode Fractionnement vertical
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A propos des fichiers apparentés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
A propos de l'affichage en direct
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapitre 4 : Extension de Dreamweaver
Types d'extensions Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Extensions et dossiers de configuration
API d'extension
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Localisation d'une extension
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Utilisation d'Extension Manager
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Chapitre 5 : Interfaces utilisateur destinées aux extensions
Instructions de conception d'une interface utilisateur d'extension
Commande de rendu HTML de Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Commandes d'interface utilisateur personnalisées dans les extensions
Ajout de contenu Flash à Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Intégration de Photoshop et d'objets dynamiques
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Chapitre 6 : Modèle d'objet de document (DOM) Dreamweaver
A propos du DOM de Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Distinction entre les DOM de document utilisateur et d'extension
DOM Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
EXTENSION DE DREAMWEAVER CS4 iv
Sommaire
Chapitre 7 : Objets de la barre Insertion
Fonctionnement des fichiers d'objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Fichier de définition de la barre Insertion
Modification de la barre Insertion
Exemple simple d'insertion d'un objet
Fonction de l'API des objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Chapitre 8 : API de vérification des problèmes de compatibilité du navigateur
Procédure de détection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Exemple de fichiers de problèmes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Fonctions de l'API de vérification des problèmes
Chapitre 9 : Commandes
Fonctionnement des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Ajout de commandes au menu Commandes
Exemple de commande simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Fonctions de l'API des commandes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Chapitre 10 : Menus et commandes de menu
Fichier menus.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Modification des menus et des commandes de menu
Commandes de menu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Exemple de commande de menu simple
Exemple de menu dynamique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Fonctions de l'API des commandes de menu
Chapitre 11 : Barres d'outils
Fonctionnement des barres d'outils
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Fichier simple de commande de barre d'outils
Fichier de définition de la barre d'outils
Balises d'éléments de barre d'outils
Attributs des balises d'éléments
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Fonctions de l'API de commande de barre d'outils
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Chapitre 12 : Rapports
Rapports de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Rapports autonomes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Fonctions de l'API de rapports
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Chapitre 13 : Bibliothèques et éditeurs de balises
Format de fichier bibliothèque de balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Sélecteur de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Exemple simple de création d'un éditeur de balise
Fonctions de l'API de l'éditeur de balises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Chapitre 14 : Inspecteurs Propriétés
Fichiers d'inspecteur Propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Fonctionnement des fichiers d'inspecteur Propriétés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
EXTENSION DE DREAMWEAVER CS4 v
Sommaire
Exemple simple d'inspecteur Propriétés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Fonctions de l'API de l'inspecteur Propriétés
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Chapitre 15 : Panneaux flottants
Fonctionnement des fichiers de panneau flottant
Exemple de panneau flottant simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Fonctions de l'API du panneau flottant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Chapitre 16 : Comportements
Fonctionnement des comportements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Exemple de comportement simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Fonction de l'API des comportements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Chapitre 17 : Comportements de serveur
Terminologie des comportements de serveur
Architecture de Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Exemple de comportement de serveur simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Scénarios dans lesquels les fonctions de l'API de comportement de serveur sont appelées
API de comportement de serveur
Fonctions d'implémentation des comportements de serveur
Fichiers EDML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Balises de fichiers EDML Groupe
Fichiers EDML Participant
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Techniques de comportements de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Chapitre 18 : Sources de données
Fonctionnement des sources de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Exemple simple de source de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Fonctions de l'API des sources de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Chapitre 19 : Formats de serveur
Fonctionnement du formatage de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Scénarios dans lesquels les fonctions de formatage des données sont appelées
Fonctions de l'API des formats de serveur
Chapitre 20 : Composants
A propos des notions de base des composants
Extension du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Personnalisation du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Personnalisation des fichiers du panneau Composants
Fonctions de l'API du panneau Composants
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Chapitre 21 : Modèles de serveur
Personnalisation des modèles de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Fonctions de l'API des modèles de serveur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Chapitre 22 : Traducteurs de données
Fonctionnement des traducteurs de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Détermination du type de traducteur à utiliser
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
EXTENSION DE DREAMWEAVER CS4 vi
Sommaire
Ajout d'un attribut traduit à une balise
Inspection des attributs traduits
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Verrouillage des balises ou des blocs de code traduits
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Création d'inspecteurs Propriétés pour du contenu verrouillé
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Recherche de bogues dans le traducteur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Exemple de traducteur d'attributs simple
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Exemple de traducteur de blocs/balises simple
Fonctions de l'API du traducteur de données
Chapitre 23 : Extensions C
Intégration des fonctions C
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Extensions C et interpréteur JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Types de données
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
API d'extension C
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
API de configuration multi-utilisateur et d'accès aux fichiers
Appel d'une fonction C à partir de JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Chapitre 24 : Dossier Shared
Contenu du dossier Shared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384
Utilisation du dossier Shared
Index
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
1
Chapitre 1 : Introduction
Ce guide décrit l'API (interface de programmation d'application) et la plate-forme Adobe® Dreamweaver® CS4 qui
vous permettent des créer des extensions de Dreamweaver. Le guide Extension de Dreamweaver CS4 fournit des
informations sur les thèmes suivants :
• la façon dont chaque type d'extension fonctionne ;
• les fonctions d'API que Dreamweaver appelle pour mettre en oeuvre les différents objets ;
• les menus, panneaux flottants, comportements de serveur, etc. qui constituent les fonctionnalités de Dreamweaver ;
• un exemple simple de chaque type d'extension ;
• la faç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é et les possibilités offertes par les API JavaScript™, utilisables pour effectuer
diverses opérations dans vos extensions Dreamweaver, consultez le Guide des API de Dreamweaver. Si vous envisagez
de créer des extensions fonctionnant avec des bases de données, consultez les sections du manuel Utilisation de
Dreamweaver consacrées aux connexions de bases de données.
A propos des extensions
La plupart des extensions Dreamweaver sont rédigées en langage HTML et en langage JavaScript. Les instructions
présentées ici supposent que vous possédez une bonne maîtrise des éléments suivants : Dreamweaver et
programmation JavaScript, HTML et XML. Par ailleurs, si vous implémentez des extensions C, vous devez savoir
comment créer et utiliser des bibliothèques de liens dynamiques (DLL) C. Pour rédiger vos propres extensions afin de
créer des applications Web, vous devez connaître les langages de script côté serveur et au moins l'une des plates-formes
suivantes : Active Server Pages (ASP), ASP.NET, PHP: Hypertext Preprocessor (PHP), Adobe® ColdFusion®, ou
JavaServer Pages (JSP).
Installation d'une extension
Pour vous familiariser avec la procédure de ré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écouvrir quelques-uns des outils qui vous seront utiles pour travailler avec
vos propres extensions.
1 Téléchargez et installez Adobe® Extension Manager, qui est disponible sur le site de télé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électionnez l'extension que vous souhaitez récupérer parmi celles disponibles. Cliquez sur le lien de
téléchargement pour télé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 > Installer une extension. Depuis Dreamweaver, choisissez
Commandes > Gérer les extensions pour lancer Extension Manager.
EXTENSION DE DREAMWEAVER CS4 2
Introduction
Extension Manager installe automatiquement l'extension dans Dreamweaver, depuis le dossier Downloaded
Extensions.
Il est nécessaire de redémarrer Dreamweaver avant de pouvoir utiliser certaines extensions. Si Dreamweaver est en
cours d'exécution pendant l'installation de l'extension, il vous sera peut-être demandé de fermer et de redémarrer
l'application avant de poursuivre l'installation.
Pour afficher des informations de base sur l'extension à la suite de son installation, depuis Dreamweaver, ouvrez
Extension Manager (Commandes > Gérer les extensions).
Création d'une extension
Avant de créer une extension Dreamweaver, consultez le site Web Adobe Exchange
(http://www.adobe.com/go/exchange_fr) pour déterminer si l'extension à créer existe déjà. Si aucune extension
existante ne répond à vos besoins, procédez comme suit pour en créer une :
• Déterminez le type d'extension à créer. Pour plus d'informations sur les types d'extensions, voir « Types
d'extensions Dreamweaver » à la page 80.
• Recherchez dans la documentation le type d'extension que vous souhaitez créer. Pour vous familiariser avec la
procédure de création du type d'extension requis, il est recommandé de créer l'exemple simple d'extension en vous
reportant à la rubrique correspondante.
• Déterminez les fichiers à modifier ou créer.
• Le cas échéant, effectuez des préparatifs concernant l'interface utilisateur requise pour l'extension.
• Créez les fichiers requis et enregistrez-les dans les dossiers appropriés.
• Redé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
« Utilisation d'Extension Manager » à la page 87.
Ressources supplémentaires pour les créateurs
d'extensions
Pour entrer en contact avec d'autres développeurs d'extensions, rejoignez le forum de discussion consacré à
l'extensibilité de Dreamweaver. Vous trouverez ce forum sur le site Web d'Adobe, à l'adresse
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=190&entercat=y.
Nouvelles fonctionnalités de Dreamweaver CS4
Dreamweaver CS4 comprend les nouvelles fonctionnalités et interfaces extensibles suivantes.
• Affichage et modification de pages Web à l'aide de la fonctionnalité Fichiers apparentés
• Affichage des pages Web telles qu'elles seront rendues dans un navigateur Web à l'aide de la fonctionnalité
Affichage en direct
EXTENSION DE DREAMWEAVER CS4 3
Introduction
• Affichage des modes Code et Création des pages HTML côte à côte à l'aide du mode d'affichage Fractionnement
vertical
• Affichage des messages d'erreur sans interruption du flux d'activités
• Mise à jour des images source sans ouvrir Adobe Photoshop, à l'aide des objets dynamiques Photoshop
chacune de ces fonctionnalités possède de nouvelles fonctions apparentées qui ont été ajoutées à l'API d'utilitaire et à
l'API JavaScript. Pour plus d'informations sur les nouvelles fonctions, voir le Guide des API de Dreamweaver.
Centre de documentation
Approfondissez votre connaissance de Dreamweaver grâce aux ouvrages publiés par Adobe. Consultez le contenu le
plus récent et rédigé par des experts sur http://www.adobe.com/support/documentation/buy_books.html.
Fonctions supprimées
Diverses fonctions ont été supprimées de Dreamweaver. Pour plus d'informations sur les fonctions éliminées de l'API
d'utilitaire et de l'API JavaScript, voir le Guide des API de Dreamweaver.
Conventions utilisé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é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 éléments remplaçables dans le code.
• Le symbole de continuation (¬) indique qu'une longue ligne de code a été fractionnée sur deux lignes ou plus. En
raison des limites de marge du format de ce manuel, une ligne de code continue doit ici être coupée. Lorsque vous
copiez les lignes de code, supprimez le symbole de continuation et entrez-les comme une seule ligne.
• Les accolades ({ }) placées avant et après un argument de fonction indiquent que cet argument est facultatif.
• Les noms de fonction portant le préfixe dreamweaver. (comme dans dreamweaver.nomfonc) peuvent être
abrégés en dw.nomfonc lorsque vous écrivez le code. Ce manuel utilise le préfixe dreamweaver. complet dans les
définitions de fonctions et dans l'index. De nombreux exemples utilisent néanmoins le préfixe court (dw.).
Ce manuel utilise les conventions de dénomination suivantes :
• Vous — le développeur responsable de la rédaction des extensions
• L'utilisateur — la personne utilisant Dreamweaver
• Le visiteur — la personne qui visualise la page Web créée par l'utilisateur
4
Chapitre 2 : Personnalisation de
Dreamweaver
Outre créer et utiliser des extensions Adobe Dreamweaver , vous pouvez personnaliser Dreamweaver de différentes
manières afin de l'adapter au mieux à vos besoins.
Techniques de personnalisation de Dreamweaver
Vous pouvez personnaliser Dreamweaver en employant plusieurs méthodes générales. Certaines sont présentées dans
Utilisation de Dreamweaver. Vous pouvez définir des préférences dans divers domaines, comme l'accessibilité, la
coloration de code, les polices, la mise en surbrillance et l'aperçu dans les navigateurs, par l'intermédiaire du panneau
Préférences (Edition > Préférences ou Dreamweaver > Préférences (MacOs X)). Vous pouvez également modifier les
raccourcis clavier à l'aide de l'éditeur de raccourcis clavier (Edition > Raccourcis clavier) ou en modifiant un fichier de
configuration.
Personnalisation des documents par défaut
Le dossier DocumentTypes/NewDocuments contient, par défaut, un document (vierge) de chaque type de document
que vous pouvez créer à l'aide de Dreamweaver. Lorsque vous créez un nouveau document vierge en sélectionnant
Fichier > Nouveau et en sélectionnant un élément dans les listes Page de base, Page dynamique ou Autres catégories,
Dreamweaver base le nouveau document sur le document par défaut correspondant dans ce dossier. Pour modifier les
éléments par défaut d'un type de document donné, modifiez le document correspondant dans ce dossier.
Remarque : Si vous souhaitez que toutes les pages de votre site contiennent certains éléments communs (par exemple une
mention sur le copyright) ou une présentation constante, il est préférable d'utiliser des modèles et des éléments de
bibliothèque plutôt que de changer les documents par défaut. Pour plus d'informations sur les modèles et les éléments de
bibliothèque, voir Utilisation de Dreamweaver.
Personnalisation des conceptions de pages
Dreamweaver propose divers éléments prédéfinis: feuilles de style CSS, jeux de cadres et conceptions de pages. Vous
pouvez créer des pages basées sur ces conceptions en cliquant sur Fichier > Nouveau.
Pour personnaliser les conceptions disponibles, modifiez les fichiers présents dans les dossiers BuiltIn/css,
BuiltIn/framesets, BuiltIn/Templates et BuiltIn/TemplatesAccessible
Remarque : Les conceptions répertoriées dans les catégories Conception de page et Conception de page (Accessibilité) sont
les fichiers modèles de Dreamweaver. Pour plus d'informations sur les modèles, voir Utilisation de Dreamweaver.
Vous pouvez également cré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îte de dialogue Nouveau document, créez un fichier
Design Notes (dans le dossier _notes approprié) correspondant au fichier de conception de page.
EXTENSION DE DREAMWEAVER CS4 5
Personnalisation de Dreamweaver
Personnalisation de l'aspect des boîtes de dialogue
La mise en forme des boîtes de dialogue pour les objets, les commandes et les comportements sont définis comme des
formulaires HTML. Ils résident dans des fichiers HTML du dossier Configuration au sein du dossier d'application
Dreamweaver. Ces formulaires peuvent être modifiés comme tout autre formulaire Dreamweaver. Pour plus
d'informations, voir Utilisation de Dreamweaver.
Remarque : Dans le cadre d'un système d'exploitation multi-utilisateur, vous devez modifier les copies des fichiers de
configuration contenues dans votre dossier de configuration utilisateur plutôt que les fichiers Configuration de
Dreamweaver. Pour plus d'informations, voir « Dossiers de configuration multi-utilisateur » à la page 83.
Modification de l'aspect d'une boîte de dialogue
1 Dans Dreamweaver, choisissez Edition > Préférences, puis la catégorie Correction du code.
2 Désélectionnez l'option Renommer les éléments de formulaire lors du collage.
Cette opération vous assure que les éléments de formulaire conserveront leur nom original une fois ceux-ci copiés
et collés.
3 Cliquez sur OK pour fermer la boîte de dialogue Préférences.
4 Sur votre disque dur, localisez le fichier HTM approprié 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é à la place de l'original dans le dossier Configuration. Il est toutefois conseillé de conserver
une sauvegarde du fichier original pour pouvoir l'utiliser à nouveau en cas de besoin.
9 Redémarrez Dreamweaver pour constater les changements.
Il est recommandé de ne modifier que l'aspect de la boîte de dialogue et non son fonctionnement. Le type des éléments
de formulaire doit être identique, tout comme les noms, afin que l'information obtenue par Dreamweaver à partir de
la boîte de dialogue puisse être utilisée de la même manière.
Par exemple, l'objet Commentaire prend le texte entré dans une zone de texte de boîte de dialogue et utilise une
fonction JavaScript simple pour transformer ce texte en commentaire HTML et l'insérer dans votre document. Le
formulaire qui décrit la boî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é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éfaut
Par défaut, Dreamweaver affiche tous les types de fichiers reconnus dans la boîte de dialogue Fichier > Ouvrir. Vous
pouvez utiliser un menu contextuel dans cette boîte de dialogue pour limiter l'affichage de certains types de fichiers. Si
la plupart de vos travaux impliquent un type de fichier spécifique (par exemple, les fichiers ASP), vous pouvez modifier
l'affichage par défaut. Le type de fichier indiqué sur la première ligne du fichier Extensions.txt de Dreamweaver devient
le type par défaut.
Remarque : Pour afficher tous les types de fichiers dans la boîte de dialogue Fichier > 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épertorie uniquement les fichiers que Dreamweaver peut ouvrir.
EXTENSION DE DREAMWEAVER CS4 6
Personnalisation de Dreamweaver
Modification du type de fichier par défaut de Dreamweaver dans Fichier > Ouvrir
1 Créez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un éditeur de texte.
3 Coupez la ligne correspondant à la nouvelle valeur par défaut. Collez-la ensuite au début du fichier, de façon à ce
qu'elle devienne sa première ligne.
4 Enregistrez le fichier.
5 Redémarrez Dreamweaver.
Pour afficher le nouveau type par défaut, choisissez Fichier > Ouvrir, puis examinez le menu contextuel de types de
fichiers.
Ajout de nouveaux types de fichier dans le menu de la boîte de dialogue Fichier > Ouvrir
1 Créez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un éditeur de texte.
3 Ajoutez une nouvelle ligne pour chaque nouveau type de fichier. Tapez en majuscules les extensions de fichier
gérées par le nouveau type de fichier, en les séparant par une virgule. Ajoutez le signe deux points et une brève
description, qui apparaîtra dans le menu contextuel de types de fichiers associé à la boîte de dialogue qui s'affiche
lorsque vous sélectionnez Fichier > Ouvrir.
Par exemple, pour les fichiers JPEG, entrez JPG,JPEG,JFIF:Fichiers image JPEG
4 Enregistrez le fichier.
5 Redémarrez Dreamweaver.
Pour observer les modifications, choisissez Fichier > Ouvrir, puis cliquez sur le menu contextuel de types de fichiers.
Personnalisation de l'interprétation de balises propriétaires
Les technologies côté serveur telles que ASP, Adobe ColdFusion, JSP et PHP utilisent du code spécial non-HTML au
sein des fichiers HTML. Les serveurs créent et servent du contenu HTML basé sur ce code. Lorsque Dreamweaver
rencontre des balises non-HTML, il les compare aux informations contenues dans les fichiers de balises propriétaires,
lesquels dé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éter.
Le code ASP ressemble à une balise HTML mais est marqué par une paire de délimiteurs : il commence par <% et se
termine par %>. Le dossier Configuration/ThirdPartyTags de Dreamweaver contient un fichier nommé Tags.xml. Ce
fichier décrit le format des diverses balises propriétaires, dont le code ASP, et décrit comment Dreamweaver doit
afficher ce code. La façon dont le code ASP est spécifié dans le fichier Tags.xml conduit Dreamweaver à ne pas tenter
d'interpréter le code situé entre les délimiteurs. A la place, en mode Création, seule une icône indiquant la présence de
code ASP s'affiche. Vos propres fichiers de données de balises peuvent définir l'affichage et la lecture de vos balises par
Dreamweaver. Créez un nouveau fichier de données de balises pour chaque jeu de balises afin d'indiquer à
Dreamweaver comment les afficher.
Remarque : Cette section vous explique comment définir l'affichage d'une balise personnalisée par Dreamweaver, mais
ne décrit pas comment modifier le contenu ou les propriétés d'une balise personnalisée. Pour plus d'informations sur la
création d'un inspecteur Propriétés permettant de vérifier et modifier les propriétés d'une balise personnalisée, voir
« Inspecteurs Propriétés » à la page 226.
EXTENSION DE DREAMWEAVER CS4 7
Personnalisation de Dreamweaver
Chaque fichier de données de balises définit le nom, le type, le modèle de contenu, le modèle de rendu et l'icône pour
une ou plusieurs balises. Vous pouvez créer un nombre illimité de fichiers de données de balises, mais tous doivent se
trouver dans le dossier Configuration/ThirdPartyTags afin d'être consultés et traités par Dreamweaver. Les fichiers de
données de balises portent l'extension .xml.
Si vous travaillez sur plusieurs sites distincts à la fois (par exemple, en tant que développeur indépendant), vous pouvez
regrouper toutes les spécifications de balises relatives à un site dans un fichier. Il suffit ensuite de remettre ce fichier de
données de balises avec les icônes personnalisées et les inspecteurs Propriétés aux responsables qui géreront le site.
Vous pouvez définir une spécification de balise à l'aide d'une balise XML nommée tagspec. Par exemple, le code
suivant décrit les spécifications d'une balise nommée happy :
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model=
"marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
Vous pouvez définir deux types de balises à l'aide de tagspec :
• Balises de type HTML standard
happy est un exemple de balise de type HTML standard. Elle débute par une balise d'ouverture <happy>, des
données sont placées entre les balises d'ouverture et de fermeture, et elle se termine par une balise </happy> de
fermeture.
• Balises délimitées par des chaînes
Les balises délimitées par des chaînes débutent par une chaîne et se terminent par une autre chaîne. Elles se
comportent comme des balises HTML vides (telle img), car elles n'entourent pas les données de balises et ne
comportent pas de balises de fermeture. Si la balise happy était délimitée par des chaînes, les spécifications de
balises incluraient les attributs start_string et end_string. Une balise ASP est une balise délimitée par des
chaînes. Elle commence par la chaîne <% et se termine par la chaîne %>, sans balise de fermeture.
Les informations suivantes décrivent les attributs et les valeurs valides de la balise tagspec. Les attributs marqués
d'un astérisque (*) sont ignorés dans le cadre des balises délimitées par des chaînes. Les attributs facultatifs sont définis
par des accolades ({}) dans la liste des attributs ; les attributs ne comportant pas d'accolades sont donc obligatoires.
<tagspec>
Description
Fournit des informations à propos d'une balise proprié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ée. Pour les balises délimitées par des chaînes, tag_name n'est utilisé
que pour déterminer si un inspecteur Propriétés donné peut être utilisé pour la balise. Si la première ligne de
l'inspecteur Propriétés contient ce nom de balise encadré par des astérisques, l'inspecteur peut être utilisé pour les
balises de ce type. Par exemple, le nom de balise associé au code ASP correspond à ASP. Les inspecteurs Propriétés
pouvant examiner le code ASP doivent comporter la mention *ASP* sur la première ligne. Pour plus d'informations
sur l'inspecteur Propriétés API, voir « Inspecteurs Propriétés » à la page 226.
EXTENSION DE DREAMWEAVER CS4 8
Personnalisation de Dreamweaver
•
tag_type détermine si la balise est vide (telle que img) ou si un contenu est présent entre les balises d'ouverture et
de fermeture (telles que code). Cet attribut est requis pour les balises normales (non délimitées par des chaînes).
Il est ignoré pour les balises délimitées par des chaînes, car celles-ci sont toujours vides. Les valeurs valides sont
"empty" et "nonempty".
•
render_contents détermine si le contenu de la balise doit s'afficher en mode Création ou s'il est remplacé par
l'icône spécifié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ées hors des attributs. Le
contenu des balises imbriquées à l'intérieur des valeurs d'attributs d'autres balises n'est pas affiché. Les valeurs
valides sont "true" et "false".
•
content_model décrit les différents types de contenu que la balise peut contenir et l'emplacement où la balise peut
s'afficher dans un fichier HTML. Les valeurs valides sont "block_model", "head_model", "marker_model" et
"script_model".
•
block_model spécifie que la balise peut contenir des éléments de niveau de bloc comme div et p et que la balise
peut apparaître uniquement dans la section body ou dans d'autres balises au contenu body, telles que div, layer
et td.
•
head_model spécifie que le contenu de la balise peut être composé de texte et que la balise peut uniquement
apparaître dans la section head.
•
marker_model spécifie que la balise peut contenir tout code HTML valide et peut se trouver à tout endroit du
fichier HTML. Le validateur HTML de Dreamweaver ignore les balises spécifiées comme marker_model.
Néanmoins, le validateur n'ignore pas le contenu de ces balises. En conséquence, même si la balise peut
apparaître à n'importe quel emplacement, le contenu de la balise peut corrompre le document HTML à certains
endroits. Par exemple, du texte simple ne peut apparaître dans la section head d'un document (à l'exception des
élé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ée dans la section head, définissez le modè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 élément de niveau de bloc, comme p ou div, par exemple, dans un paragraphe).
N'utilisez pas ce modèle si la balise doit être affichée seule dans un paragraphe, encadré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è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écifie un délimiteur qui marque le début d'une balise délimitée par des chaînes. Les balises
délimitées par des chaînes peuvent être présentes en tout point du document pouvant contenir un commentaire.
Dreamweaver n'analyse pas les balises et ne décode pas les entités ou URL comprises entre start_string et
end_string. Cet attribut est requis si end_string est spécifié.
•
end_string spécifie un délimiteur qui marque la fin d'une balise délimitée par une chaîne. Cet attribut est requis
si start_string est spécifié.
•
detect_in_attribute indique si les éléments contenus entre start_string et end_string (ou entre les balises
d'ouverture et de fermeture si ces chaînes ne sont pas définies) doivent être ignorés même si ces chaînes
apparaissent dans les valeurs ou noms d'attributs. Vous devez généralement régler la valeur sur "true" pour les
balises délimitées par des chaînes. La valeur par défaut est "false". Ainsi, les balises ASP sont parfois imbriquées
dans des valeurs d'attributs et contiennent parfois des guillemets ("). Parce que la balise ASP spécifie
detect_in_attribute="true", Dreamweaver ne tient pas compte des balises ASP, y compris des guillemets
internes, lorsqu'elles sont imbriquées dans des valeurs d'attributs.
EXTENSION DE DREAMWEAVER CS4 9
Personnalisation de Dreamweaver
•
parse_attributes indique si les attributs de la balise doivent être analysés. Si la valeur définie est "true" (par
défaut), Dreamweaver analyse les attributs. Si elle est définie sur "false", Dreamweaver ignore tous les éléments
jusqu'au crochet situé hors des guillemets. Par exemple, cet attribut doit être réglé sur "false" pour les balises telles
que cfif (par exemple, <cfif a is 1>, que Dreamweaver ne peut pas analyser comme ensemble de paires nom
d'attribut/valeur).
•
icon spécifie le chemin et le nom de fichier de l'icône associée à 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être de document en mode
Création.
•
icon_width spécifie la largeur de l'icône en pixels.
•
icon_height spécifie la hauteur de l'icône en pixels.
•
equivalent_tag spécifie des équivalents HTML simples pour certaines balises liées à des formulaires ColdFusion.
Ceci ne doit pas être utilisé 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écifie
aucune valeur pour is_visual ; la valeur par défaut "true" est donc appliquée. La valeur is_visual de la balise
ColdFusion cfset est définie sur false. La visibilité des balises de marquage de serveur est contrôlée par la
catégorie Eléments invisibles dans la boîte de dialogue Préférences. La visibilité des balises de marquage de serveur
visuel peut être définie indépendamment de celle des balises de marquage de serveur non visuel.
•
server_model, si spécifié, indique que la balise tagspec s'applique uniquement aux pages appartenant au modèle
de serveur spécifié. Si server_model n'est pas spécifié, la balise tagspec s'applique à toutes les pages. Par exemple,
les délimiteurs des balises ASP et JSP sont identiques, mais la balise tagspec pour JSP spécifie un paramètre
server_model défini sur "JSP". Par conséquent, lorsque Dreamweaver rencontre ce code avec les délimiteurs
adéquats sur une page JSP, il affiche une icône JSP. Lorsque ce code est rencontré sur une page autre qu'une page
JSP, une icône ASP s'affiche.
Contenu
Aucun (balise vide).
Contenant
Aucun.
Exemple
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model=
"marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
Affichage des balises personnalisées dans le mode Création
L'affichage des balises personnalisées dans la fenêtre de document en mode Création dépend des valeurs entrées pour
les attributs tag_type et render_contents de la balise tagspec. Si la valeur de tag_type est "empty", l'icône
spécifiée dans l'attribut icon s'affiche. Si la valeur de tag_type est "nonempty" mais que la valeur de
render_contents est "false", l'icône s'affiche de la même façon que pour une balise vide. L'exemple suivant indique
comment une instance de la balise happy définie antérieurement peut apparaître dans le code HTML :
<p>This is a paragraph that includes an instance of the <code>happy</code>
tag (<happy>Joe</happy>).</p>
Dans la mesure où render_contents est réglé sur "false" dans la spécification de balise, le contenu de la balise
happy (le mot Joe) ne s'affiche pas. Les balises de début et de fin et leur contenu sont alors remplacés par une icône
unique.
EXTENSION DE DREAMWEAVER CS4 10
Personnalisation de Dreamweaver
Pour les balises nonempty dont la valeur render_contents est réglée sur "true", l'icône ne s'affiche pas en mode
Création. C'est le contenu inséré entre les balises d'ouverture et de fermeture qui s'affiche (par exemple, le texte
contenu entre les balises dans <mytag>Ceci est le contenu inséré entre les balises d'ouverture et de
fermeture</mytag>). Si l'option Affichage > Eléments invisibles est activée, le contenu est mis en surbrillance à l'aide
de balises propriétaires, comme spécifié dans les préférences de surbrillance (la mise en surbrillance ne s'applique
qu'aux balises définies dans les fichiers de données de balises).
Modification de la couleur de surbrillance des balises propriétaires
1 Choisissez Edition > Préférences, puis la catégorie Surbrillance.
2 Cliquez sur la zone de sélection de couleurs de balises propriétaires pour afficher le sélecteur de couleur.
3 Sélectionnez une couleur, puis cliquez sur OK pour fermer la boîte de dialogue Préférences. Pour plus
d'informations sur la sélection d'une couleur, voir Utilisation de Dreamweaver.
Prévention de la correction de balises propriétaires
Dreamweaver corrige certains types d'erreurs dans le code HTML. Pour plus d'informations, voir Utilisation de
Dreamweaver. Par défaut, Dreamweaver évite toute modification du code HTML dans les fichiers portant certaines
extensions, comme .asp (ASP), .cfm (ColdFusion), .jsp (JSP) et .php (PHP). Ce paramètre est défini pour éviter toute
modification accidentelle du code contenu dans de telles balises non-HTML. Vous pouvez modifier le comportement
de correction de Dreamweaver par défaut afin que le code HTML soit modifié lors de l'ouverture de tels fichiers. Vous
pouvez également ajouter d'autres types de fichiers auxquels Dreamweaver n'apportera pas de modifications.
Dreamweaver encode certains caractères spéciaux en les remplaçant par des valeurs numériques lorsque vous les
entrez dans l'inspecteur Propriétés. Il est normalement préférable de laisser Dreamweaver effectuer cet encodage, car
les caractères spéciaux seront ainsi reconnus par un nombre plus important de plates-formes et de navigateurs.
Néanmoins, cette opération d'encodage peut interférer avec les balises propriétaires. Vous pouvez donc modifier le
comportement de Dreamweaver concernant l'encodage des balises lorsque vous travaillez avec des fichiers comportant
des balises propriétaires.
Permettre à Dreamweaver de corriger le code HTML dans plus de types de fichiers
1 Choisissez Edition > Préférences, puis la catégorie Correction du code.
2 Sélectionnez l'une des options suivantes :
• Corriger les balises incorrectement imbriquées et non fermées
• Supprimer les balises de fermeture superflues
3 Effectuez l'une des opé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ésactivez l'option Ne jamais corriger le code : Dans les fichiers avec extensions. La désactivation de cette option
permet à Dreamweaver de réécrire le code HTML dans tous types de fichiers.
Ajout de fichiers dans lesquels Dreamweaver ne doit pas apporter de corrections
1 Choisissez Edition > Préférences, puis la catégorie Correction du code.
2 Sélectionnez l'une des options suivantes :
• Corriger les balises incorrectement imbriquées et non fermées
• Supprimer les balises de fermeture superflues
EXTENSION DE DREAMWEAVER CS4 11
Personnalisation de Dreamweaver
3 Assurez-vous que l'option Ne jamais corriger le code: Dans les fichiers avec extensions est sélectionnée. Ajoutez les
nouvelles extensions de fichiers à 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îte de dialogue Fichier
> Ouvrir, vous pouvez l'ajouter dans le fichier Configuration/Extensions.txt. Pour plus d'informations, voir
« Modification du type de fichier par défaut » à la page 5.
Désactivation des options d'encodage de Dreamweaver
1 Choisissez Edition > Préférences, puis la catégorie Correction du code.
2 Désélectionnez les options de caractères spéciaux de votre choix.
Pour plus d'informations sur les autres préférences de correction de code, voir Utilisation de Dreamweaver.
Personnalisation de Dreamweaver dans un
environnement multi-utilisateur
Vous pouvez personnaliser Dreamweaver sous un système d'exploitation multi-utilisateur tel que Microsoft®
Windows® XP, Windows Vista ou Mac OS® X. Aucune configuration personnalisée de Dreamweaver ne peut affecter
celle d'un autre utilisateur. Lorsque vous exécutez pour la première fois Dreamweaver sous un système d'exploitation
multi-utilisateur, Dreamweaver copie les fichiers de configuration dans un dossier Configuration utilisateur. Lorsque
vous personnalisez Dreamweaver à l'aide des panneaux et boî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é 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éjà des fichiers de configuration utilisateur ne seront pas concernés par ces modifications. Pour
apporter des modifications qui influeront sur tous les utilisateurs, créez une extension et installez-la à l'aide
d'Extension Manager.
Remarque : Dans les anciens systèmes d'exploitation multi-utilisateur (Windows 98, Windows ME et Mac OS 9.x), tous
les utilisateurs partagent le même ensemble de fichiers de configuration de Dreamweaver.
L'emplacement du dossier Configuration de l'utilisateur dépend de la plate-forme employée par l'utilisateur.
Les plates-formes Windows XP utilisent l'emplacement suivant :
disque dur:\Documents and Settings\nom_utilisateur\Application Data\Adobe\Dreamweaver CS4\Configuration
Remarque : Il se peut que ce dossier se trouve dans un dossier caché.
Les plates-formes Windows Vista utilisent l'emplacement suivant :
disque dur: \Users\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver CS4\Configuration
Les plates-formes MacOS X utilisent l'emplacement suivant :
disque dur: \Users/nom d'utilisateur/Library/Application Support/Adobe/Dreamweaver CS4/Configuration
Remarque : Pour installer des extensions accessibles à tous les utilisateurs dans un système d'exploitation multiutilisateur, vous devez disposer des droits de niveau Administrateur (Windows) ou root (MacOS X).
EXTENSION DE DREAMWEAVER CS4 12
Personnalisation de Dreamweaver
Lorsque vous exécutez Dreamweaver pour la première fois, il ne copie que certains fichiers de configuration dans votre
dossier Configuration utilisateur. (les fichiers copiés sont spécifié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édéfinis dans le panneau Fragments de code. La version d'un fichier pré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éjà copié 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ération engendrant l'effacement d'un fichier de configuration dans Dreamweaver sous un système
d'exploitation multi-utilisateur (par exemple, la suppression d'un fragment de code prédéfini dans le panneau
Fragments de code), Dreamweaver crée un fichier nommé mm_deleted_files.xml dans votre dossier Configuration.
Lorsqu'un fichier est répertorié dans le fichier mm_deleted_files.xml, Dreamweaver se comporte comme si le fichier
n'existait plus.
Désactivation d'un fichier de configuration
1 Quittez Dreamweaver.
2 A l'aide d'un éditeur de texte, modifiez le fichier mm_deleted_files.xml dans votre dossier de configuration
utilisateur, ajoutez une balise d'élément dans ce fichier en indiquant le chemin (relatif au dossier Configuration de
Dreamweaver) du fichier de configuration à désactiver.
Remarque : Ne modifiez pas le fichier mm_deleted_files.xml dans Dreamweaver.
3 Enregistrez et fermez mm_deleted_files.xml.
4 Lancez à nouveau Dreamweaver.
Syntaxe de la balise mm_deleted_files.xml
Le fichier mm_deleted_files.xml contient une liste structurée d'éléments qui indiquent les fichiers de configuration
que Dreamweaver doit ignorer. Ces éléments sont spécifiés par des balises XML, que vous pouvez modifier dans un
éditeur de texte.
Dans les descriptions de syntaxe des balises mm_deleted_files.xml ci-après, les attributs facultatifs dans les listes
d'attributs sont indiqués par des accolades({}). Les attributs qui ne sont pas signalés ainsi sont considérés comme
obligatoires.
<deleteditems>
Description
Balise de conteneur renfermant une liste d'éléments à considérer comme supprimés par Dreamweaver.
Attributs
Aucun.
Contenu
Cette balise doit contenir une ou plusieurs balises item.
EXTENSION DE DREAMWEAVER CS4 13
Personnalisation de Dreamweaver
Contenant
Aucun.
Exemple
<deleteditems>
<!-- item tags here -->
</deleteditems>
<item>
Description
Définit un fichier de configuration à ignorer par Dreamweaver.
Attributs
name
L'attribut name spécifie le chemin du fichier de configuration par rapport au dossier Configuration. Sous Windows,
utilisez une barre oblique inversée (\) pour séparer les éléments constitutifs du chemin ; sur Macintosh®, utilisez deux
points (:).
Contenu
Aucun (balise vide).
Contenant
Cette balise doit se trouver dans une balise deleteditems.
Exemple
<item name="snippets\headers\5columnwith4links.csn" />
Réinstallation et désinstallation de Dreamweaver dans un environnement
multi-utilisateur
Après avoir installé Dreamweaver, si vous souhaitez réinstaller le programme ou le mettre à jour, Dreamweaver
sauvegarde automatiquement une copie des fichiers de configuration utilisateur existants. Vos paramètres personnels
resteront donc accessibles. Lors de la désinstallation de Dreamweaver dans un environnement multi-utilisateur
(opération possible uniquement pour les utilisateurs disposant de privilèges administratifs), Dreamweaver peut
supprimer tous les dossiers de configuration utilisateur à 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 également un code créateur (tel que DmWr) et un type de
fichier (tel que TEXT). Lorsque vous téléchargez un fichier portant l'extension donnée, Dreamweaver lui assigne alors
le créateur et le type de fichier désignés.
EXTENSION DE DREAMWEAVER CS4 14
Personnalisation de Dreamweaver
Si un fichier que vous transférez ne comporte pas d'extension de nom de fichier, Dreamweaver utilise le mode de
transfert BINAIRE.
Remarque : Dreamweaver ne peut pas transférer de fichiers en mode Macbinary. Si vous devez transfé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 être transférés en mode ASCII :
HTML DmWr TEXT ASCII
Dans le fichier FTPExtensionMap.txt et le fichier FTPExtensionMapMac.txt (Macintosh), tous les éléments placés sur
une même ligne sont séparés par des tabulations. L'extension et le mode de transfert sont écrits en majuscules.
Pour modifier un paramètre par défaut, modifiez le fichier dans un éditeur de texte.
Ajout d'informations relatives à une nouvelle extension de nom de fichier
1 Modifiez le fichier extension-map dans un é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éateur, un caractère de tabulation, puis le type de fichier suivi d'un autre caractère
de tabulation.
4 Choisissez entre ASCII ou BINARY pour spécifier un mode de transfert FTP.
5 Enregistrez le fichier.
Types de documents extensibles dans Dreamweaver
XML est doté d'un système performant pour définir des documents et des structures de données complexes.
Dreamweaver organise selon plusieurs schémas XML les informations sur les comportements de serveur, les balises et
les boîtes de dialogue de balises, les composants, les types de documents et des références.
Lorsque vous créez et utilisez des extensions dans Dreamweaver, vous pouvez souvent créer ou modifier les fichiers
XML existants afin de gérer les données utilisées par ces extensions. Dans la plupart des cas, vous pouvez copier un
fichier existant du sous-dossier approprié du dossier Configuration vers le dossier à utiliser comme modèle.
Fichiers de définition de type de document
Le concept de type de document s'articule autour d'un composant central, à savoir le fichier de définition de type de
document. Vous pouvez être en présence de plusieurs fichiers de définition ; le cas échéant, ils résident tous dans le
dossier Configuration/DocumentTypes. Chaque fichier de définition contient des informations concernant au moins
un type de document. Des informations essentielles, telles que le modèle de serveur, le style de codage par couleurs, les
descriptions, etc., sont décrits pour chacun de ces types de documents.
Remarque : Attention : il ne faut pas confondre fichiers de définition de type de document de Dreamweaver et définition
de type de document XML (DTD). Les fichiers de définition de type de document de Dreamweaver contiennent un
ensemble d'éléments documenttype, chacun d'entre eux définissant une collection prédéfinie de balises et d'attributs
associés à un type de document. Au lancement, Dreamweaver analyse les fichiers de définition de type de document et
place en mémoire une base de données d'informations concernant tous les types de documents définis.
Dreamweaver fournit un fichier de définition de type de document initial. Ce fichier, nommé
MMDocumentTypes.xml, contient les définitions de type de document fournies par Adobe :
EXTENSION DE DREAMWEAVER CS4 15
Personnalisation de Dreamweaver
Type de document
Modè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ément de bibliothèque
Extension DW
lbi
Modèle ASP.NET C#
Modèle DW
axcs.dwt
Modèle ASP.NET VB
Modèle DW
axvb.dwt
Modèle ASP JavaScript
Modèle DW
aspjs.dwt
Modèle ASP VBScript
Modèle DW
aspvb.dwt
Modèle ColdFusion
Modèle DW
cfm.dwt
Modèle HTML
Modèle DW
dwt
Modèle JSP
Modèle DW
jsp.dwt
Modèle PHP
Modè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èle de serveur
antérieur
UltraDev 4 ColdFusion
Si vous avez besoin de créer un nouveau type de document, vous pouvez soit ajouter votre entrée dans le fichier de
définition de document fourni par Adobe (MMDocumentTypes.xml), soit ajouter votre propre fichier de définition
dans le dossier Configuration/DocumentTypes.
EXTENSION DE DREAMWEAVER CS4 16
Personnalisation de Dreamweaver
Remarque : Le sous-dossier NewDocuments résidant dans le dossier Configuration/DocumentTypes contient des pages
par défaut (modèles) propres à chaque type de document.
Structure des fichiers de définition de type de document
L'exemple suivant représente un fichier classique de définition de type de document :
<?xml version="1.0" encoding="utf-8"?>
<documenttypes
xmlns:MMString="http://www.adobe.com/schemes/data/string/">
<documenttype
id="dt-ASP-JS"
servermodel="ASP-JS"
internaltype="Dynamic"
winfileextension="asp,htm, html"
macfileextension=asp, html"
previewfile="default_aspjs_preview.htm"
file="default_aspjs.htm"
priorversionservermodel="UD4-ASP-JS" >
<title>
<loadString id="mmdocumenttypes_0title" />
</title>
<description>
<loadString id="mmdocumenttypes_0descr" />
</description>
</documenttype>
...
</documenttypes>
Remarque : Le codage par couleurs des types de documents est défini dans les fichiers XML qui résident dans le dossier
Configuration/CodeColoring.
Dans l'exemple précédent, l'élément loadstring identifie les chaînes localisées que Dreamweaver utilise pour le titre
et la description des documents de type ASP-JS. Pour plus d'informations sur les chaînes localisées, voir « Fourniture
de chaînes localisées » à la page 22.
Le tableau ci-dessous recense les balises et les attributs autorisés dans un fichier de définition de type de document.
EXTENSION DE DREAMWEAVER CS4 17
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoir
e
Description
Oui
Nœud parent.
id
Oui
Identificateur unique pour tous les fichiers
de définition de type de document.
servermodel
Non
Spécifie le modèle de serveur associé (casse
prise en compte). Les valeurs suivantes sont
valides par dé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émentation des modèles de serveur
se trouvent dans le dossier
Configuration/ServerModels.
Les développeurs d'extensions peuvent
créer de nouveaux modèles de serveur en
complétant cette liste.
EXTENSION DE DREAMWEAVER CS4 18
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoir
e
Description
internaltype
Oui
Classification générale des modes de
traitement des fichiers dans Dreamweaver.
Le type interne détermine si le mode
Création est activé pour ce document et
traite des cas particuliers tels que les
extensions ou les modèles Dreamweaver.
Les valeurs suivantes sont possibles :
Dynamique
DWExtension (zones d'affichage spéciales)
DWTemplate (zones d'affichage spéciales)
HTML
HTML4
Text (mode Code uniquement)
XHTML1
XML (mode Code uniquement)
Tous les types de documents liés au serveur
de modèle sont associés à la valeur
Dynamic. Les fichiers HTML sont associés à
HTML. Les fichiers de script (notamment les
fichiers .css, .js, .vb et .cs) sont associés à
Text.
Si internaltype vaut DWTemplate,
définissez la valeur dynamicid. Dans le cas
contraire, le panneau Comportement de
serveur ou Liaisons ne reconnaît pas le
nouveau modèle vierge créé par la boîte de
dialogue Nouveau document. Les instances
de ce modèle sont des modèles HTML.
dynamicid
Non
Référence à l'identificateur unique d'un type
de document dynamique. Cet attribut n'est
pertinent que lorsque internaltype
correspond à DWTemplate. Il vous permet
d'associer un modèle dynamique avec un
type de document dynamique.
winfileextension
Oui
Extension de nom de fichier associée au
type de document sous Windows. Utilisez
une liste séparée par des virgules pour
spécifier plusieurs extensions. La première
extension de cette liste correspond à
l'extension utilisée par Dreamweaver
lorsque l'utilisateur enregistre un document
de type documenttype.
Lorsque deux types de documents non
associés à un modèle de serveur portent la
même extension de fichier, Dreamweaver
reconnaît le premier comme le type de
document associé à l'extension.
EXTENSION DE DREAMWEAVER CS4 19
Personnalisation de Dreamweaver
Balise
Attribut
Obligatoir
e
Description
macfileextension
Oui
Extension de nom de fichier associée au
type de document sur Macintosh. Utilisez
une liste séparée par des virgules pour
spécifier plusieurs extensions. La première
extension de cette liste correspond à
l'extension utilisée par Dreamweaver
lorsque l'utilisateur enregistre un document
de type documenttype.
Lorsque deux types de documents non
associés à un modèle de serveur portent la
même extension de fichier, Dreamweaver
reconnaît le premier comme le type de
document associé à l'extension.
previewfile
Non
Fichier rendu dans la zone Aperçu de la
boîte de dialogue Nouveau document.
file
Oui
Le fichier situé dans le dossier
DocumentTypes/NewDocuments
contenant le contenu du modèle des
nouveaux documents de type
documenttype.
priorversionservermodel
Non
Si le modèle serveur de ce document
possède un équivalent Dreamweaver
UltraDev 4, spécifiez le nom de l'ancienne
version du modèle serveur.
UltraDev4 ColdFusion est un modèle de
serveur antérieur valide.
title
Oui
(sous-balise)
Chaîne qui apparaît comme élément de
catégorie sous la section Document vierge
de la boîte de dialogue Nouveau document.
Vous pouvez insérer cette chaîne
directement dans le fichier de définition ou
pointer vers elle indirectement pour la
localiser. Pour plus d'informations sur la
localisation de cette chaîne, voir
« Fourniture de chaînes localisées » à la
page 22.
La mise en forme n'étant pas autorisée, il est
impossible de spécifier les balises HTML.
description
(sous-balise)
Non
Chaîne de description du type de
document. Vous pouvez insérer cette
chaîne directement dans le fichier de
définition ou pointer vers elle indirectement
pour la localiser. Pour plus d'informations
sur la localisation de cette chaîne, voir
« Fourniture de chaînes localisées » à la
page 22.
La mise en forme étant autorisée, il est
possible de spécifier les balises HTML.
EXTENSION DE DREAMWEAVER CS4 20
Personnalisation de Dreamweaver
Remarque : Lorsque l'utilisateur enregistre un nouveau document, Dreamweaver examine la liste des extensions de la
plate-forme actuelle qui sont associées avec le type de document (par exemple winfileextension et
macfileextension). Dreamweaver sélectionne la première chaîne de la liste pour l'utiliser comme l'extension de nom
de fichier par défaut. Pour changer cette extension de nom de fichier par défaut, réorganisez les extensions de la liste
séparées par des virgules de sorte que la nouvelle extension par défaut soit la première entrée de la liste.
Au lancement, Dreamweaver lit tous les fichiers de définition de type de document et crée une liste des types de
documents valides. Dreamweaver traite toutes les entrées des fichiers de définition pour lesquels des modèles de
serveur inexistants sont utilisés comme types de documents non serveur de modèle. Dreamweaver ignore les entrées
dont le contenu est incorrect ou dont les ID ne sont pas uniques.
Si les fichiers de définition de type de document sont endommagés ou ne sont pas disponibles dans le dossier
Configuration/DocumentTypes, Dreamweaver se ferme en affichant un message d'erreur.
Définition de modèles dynamiques
Vous pouvez créer des modèles d'après des types de documents dynamiques, appelés des modèles dynamiques. La
notion de modèle dynamique repose sur les deux éléments fondamentaux suivants :
• La valeur de l'attribut internaltype d'un nouveau type de document doit être DWTemplate.
• L'attribut dynamicid doit être défini et sa valeur doit faire référence à l'identificateur d'un type de document
existant.
L'exemple suivant définit un type de document dynamique :
<documenttype
id="PHP_MySQL"
servermodel="PHP MySQL"
internaltype="Dynamic"
winfileextension="php,php3"
macfileextension="php,php3"
file="Default.php">
<title>PHP</title>
<description><![CDATA[PHP document]]></description>
</documenttype>
Vous pouvez désormais définir le modèle dynamique suivant, basé sur ce type de document PHP_MySQL :
<documenttype
id="DWTemplate_PHP"
internaltype="DWTemplate"
dynamicid="PHP_MySQL"
winfileextension="php.dwt"
macfileextension="php.dwt"
file="Default.php.dwt">
<title>PHP Template</title>
<description><![CDATA[Dreamweaver PHP Template document]]></description>
</documenttype>
Lorsqu'un utilisateur de Dreamweaver crée un nouveau modèle vierge de type DWTemplate_PHP, Dreamweaver lui
permet de créer des comportements de serveur PHP dans le fichier. En outre, lorsque cet utilisateur crée des instances
du nouveau modèle, il peut leur définir aussi des comportements de serveur PHP.
Dans l'exemple précédent, où l'utilisateur enregistre le modèle, Dreamweaver ajoute automatiquement l'extension
.php.dwt au fichier. De même, lorsque cet utilisateur enregistre une instance du modèle, le fichier reçoit l'extension
.php.
EXTENSION DE DREAMWEAVER CS4 21
Personnalisation de Dreamweaver
Ajout et modification d'extensions de documents et de types de fichiers
Par défaut, Dreamweaver affiche tous les types de fichiers reconnus dans la boîte de dialogue Fichier > Ouvrir. Après
avoir créé un type de document, le développeur d'une extension doit mettre à jour le fichier Extensions.txt approprié.
Il se peut que l'utilisateur emploie un systè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 à jour le fichier Extensions.txt, car il s'agit de l'instance recherchée et analysée par Dreamweaver.
L'emplacement du dossier Configuration de l'utilisateur dépend de la plate-forme employée par l'utilisateur.
La plate-forme Windows XP emploie l'emplacement suivant :
disque dur:\Documents and Settings\nom_utilisateur\Application Data\Adobe\Dreamweaver CS4\Configuration
Remarque : Il se peut que ce dossier se trouve dans un dossier caché.
La plate-forme Windows Vista emploie l'emplacement suivant :
disque dur:\Users\nom d'utilisateur\AppData\Roaming\Adobe\Dreamweaver CS4\Configuration
La plate-forme MacOS X utilise l'emplacement suivant :
disque dur:\Users/nom d'utilisateur/Library/Application Support/Adobe/Dreamweaver CS4/Configuration
Si Dreamweaver ne parvient pas à localiser le fichier Extensions.txt dans le dossier Configuration de l'utilisateur,
Dreamweaver le recherche dans son propre dossier Configuration.
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è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é de ces modifications.
Pour créer une extension de document, vous avez le choix entre ajouter la nouvelle extension à un type de document
existant ou créer un nouveau type de document.
Ajout d'une nouvelle extension à 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éez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un é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éparez-les par des virgules. Ajoutez ensuite deux points et
une brève description à afficher dans le menu déroulant des types de fichiers qui s'affichent dans la boîte de dialogue
Fichier > Ouvrir.
Par exemple, pour les fichiers JPEG, entrez JPG,JPEG,JFIF:Fichiers image JPEG
4 Enregistrez le fichier Extensions.txt.
5 Redémarrez Dreamweaver.
Pour observer les modifications, choisissez Fichier > Ouvrir, puis cliquez sur le menu déroulant des types de fichiers.
EXTENSION DE DREAMWEAVER CS4 22
Personnalisation de Dreamweaver
Modification du type de fichier indiqué par défaut dans Fichier > Ouvrir de Dreamweaver
1 Créez une copie de sauvegarde du fichier Extensions.txt dans le dossier Configuration.
2 Ouvrez le fichier Extensions.txt dans un éditeur de texte.
3 Coupez la ligne correspondant à la nouvelle valeur par défaut. Collez-la ensuite au début du fichier, de façon à ce
qu'elle devienne sa première ligne.
4 Enregistrez le fichier Extensions.txt.
5 Redémarrez Dreamweaver.
Pour observer les modifications, choisissez Fichier > Ouvrir, puis cliquez sur le menu déroulant des types de fichiers.
Voir aussi
http://www.adobe.com/go/16410_fr
Fourniture de chaînes localisées
Dans un fichier de définition de type de document, les sous-balises <title> et <description> dé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éservé pour les chaînes localisées de ces deux sous-balises. Ce procédé, similaire à la
programmation de scripts côté serveur, permet de spécifier l'utilisation d'une chaîne particulière dans votre page en
utilisant un identificateur de chaîne comme espace réservé. Cet espace réservé accepte les balises spéciales ou les
attributs de balises dont la valeur est remplacée.
Fourniture de chaînes localisées
1 Placez l'instruction suivante en tête du fichier de définition de type de document :
<?xml version="1.0" encoding="utf-8"?>
2 Déclarez les espaces de nom MMString dans la balise <documenttypes> :
<documenttypes
xmlns:MMString="http://www.adobe.com/schemes/data/string/">
3 A l'emplacement du fichier de définition de type de document auquel insérer une chaîne localisée, utilisez la
directive MMString:loadstring pour définir un espace réservé à cette chaîne. Vous pouvez spécifier cet espace
réservé en procédant d'une des façons suivantes :
<description>
<loadstring>myJSPDocType/Description</loadstring>
</description>
ou
<description>
<loadstring id="myJSPDocType/Description" />
</description>
Dans ces exemples, myJSPDocType/Description est un identificateur de chaîne unique faisant office d'espace
réservé à la chaîne localisée. La chaîne localisée est définie à l'étape suivante.
4 Dans le dossier Configuration/Strings, créez un fichier XML (ou modifiez un fichier existant) définissant la chaîne
localisée. Par exemple, lorsque le code suivant est inséré dans le fichier Configuration/Strings/strings.xml, il définit
la chaîne myJSPDocType/Description :
EXTENSION DE DREAMWEAVER CS4 23
Personnalisation de Dreamweaver
<strings>
...
<string id="myJSPDocType/Description"
value=
"<![CDATA[JavaServer Page with <em>special</em> features]]>"
/>
...
</strings>
Remarque : Les identificateurs de chaîne, tels que myJSPDocType/Description dans l'exemple précédent, doivent être
uniques dans l'application Dreamweaver. Au lancement, Dreamweaver analyse tous les fichiers XML du dossier
Configuration/Strings et charge ces chaînes uniques.
Règles d'utilisation des fichiers de définition de type de document
Dreamweaver autorise les types de documents associés à un modèle de serveur à partager des extensions de fichiers.
Par exemple, ASP-JS et ASP-VB peuvent adopter l'extension .asp. Pour savoir quel modèle de serveur prévaut, voir
« canRecognizeDocument() » à la page 338.
Dreamweaver n'autorise pas les types de documents non associés à un modèle de serveur à partager des extensions de
fichiers.
Si une extension de fichier est revendiquée par deux types de documents alors qu'un type est associé à un modèle de
serveur et que l'autre ne l'est pas, ce dernier prévaut. Supposons que vous ayez défini un type de document appelé SAM,
non associé à un modè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.
Ouverture d'un document dans Dreamweaver
Lorsqu'un utilisateur ouvre un document, Dreamweaver identifie en plusieurs étapes le type de document d'après son
extension de fichier.
Si Dreamweaver détecte un type de document unique, il l'utilise et charge le modèle de serveur associé (le cas échéant)
pour le document que l'utilisateur ouvre. Si cet utilisateur a opté pour l'utilisation des comportements de serveur de
Dreamweaver UltraDev4, Dreamweaver charge le modèle de serveur UltraDev4 correspondant.
Si l'extension de fichier est commune à plusieurs types de documents, Dreamweaver effectue les opérations suivantes :
• Si un type de document statique figure dans la liste des types de documents, il prévaut.
• Si tous les types de documents sont dynamiques, Dreamweaver génère une liste alphabétique des modèles de
serveur associés à ces types de documents, puis appelle la fonction canRecognizeDocument() pour chacun des
modèles de serveur (voir « canRecognizeDocument() » à la page 338). Dreamweaver collecte les valeurs de retour
et identifie le modèle de serveur qui a renvoyé l'entier positif le plus grand. Le type de document dont le modèle de
serveur a renvoyé l'entier le plus grand correspond au type de document assigné par Dreamweaver au document en
cours d'ouverture. Si, toutefois, plusieurs modèles de serveur renvoient le même entier, Dreamweaver passe en
revue la liste alphabétique de ces modè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ême extension.asp et que leur fonction canRecognizeDocument() respective
renvoie une valeur égale, Dreamweaver affecte au document le type ASP-JS (puisque ASP-JS apparaît en premier
dans l'ordre alphabétique).
Si Dreamweaver ne peut pas faire correspondre l'extension de fichier à un type de document, Dreamweaver ouvre le
document au format texte.
EXTENSION DE DREAMWEAVER CS4 24
Personnalisation de Dreamweaver
Personnalisation des présentations de l'espace de travail
Dreamweaver vous permet de personnaliser la présentation de l'espace de travail. Vous pouvez ainsi spécifier les
panneaux inclus dans la présentation indiquée, ainsi que divers autres attributs tels que la position et la taille des
panneaux, leur état (réduit ou développé), la position et la taille de la fenêtre d'application, ainsi que la position et la
taille de la fenêtre de document.
La présentation de l'espace de travail est spécifiée dans les fichiers XML stockés dans le dossier
Configuration/Workspace layouts. Les sections suivantes décrivent la syntaxe des balises XML. Les attributs facultatifs
sont définis par des accolades ({}) dans la liste des attributs ; les attributs ne comportant pas d'accolades sont donc
obligatoires.
<panelset>
Description
Balise d'extrémité, qui signale le début de la description du jeu de panneaux.
Attributs
Aucun.
Contenu
Cette balise peut contenir une ou plusieurs balises application, document ou panelset.
Contenant
Aucun.
Exemple
<panelset>
<!-- panelset tags here -->
</panelset>
<application>
Description
Stipule la position et la taille initiales de la fenêtre d'application.
Attributs
rect, maximize
•
rect spécifie la position et la taille de la fenêtre d'application. La chaîne est exprimée au format « gauche haut droite
bas », spécifié sous forme de nombres entiers.
•
maximize est une valeur booléenne : true si la fenêtre d'application doit être agrandie au démarrage, et false dans
le cas contraire. La valeur par défaut est true.
Contenu
Aucun.
Contenant
Cette balise doit être imbriquée dans une balise panelset.
EXTENSION DE DREAMWEAVER CS4 25
Personnalisation de Dreamweaver
Exemple
<panelset>
<application rect="0 0 1000 1200" maximize="false">
</application>
</panelset>
<document>
Description
Stipule la position et la taille initiales de la fenêtre de document.
Attributs
rect, maximize
•
rect spécifie la position et la taille de la fenêtre de document. La chaîne est exprimée au format « gauche haut droite
bas », spécifié sous forme de nombres entiers. Si la valeur maximize est réglée sur true, la valeur rect n'est pas
prise en compte.
•
maximize est une valeur booléenne : true si la fenêtre de document doit être agrandie au démarrage, et false dans
le cas contraire. La valeur par défaut est true.
Contenu
Aucun.
Contenant
Cette balise doit être imbriquée dans une balise panelset.
Exemple
<panelset>
<document rect="100 257 1043 1200" maximize="false">
</document>
</panelset>
<panelframe>
Description
Dé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égler sur un nombre entier ou sur une
valeur relative à l'écran. Si le nombre entier excède les limites de l'écran, le groupe de panneaux s'affiche à
l'emplacement le plus proche possible pour être visible à l'écran. Les valeurs relatives gérées sont « left » ou « right
» et identifient la bordure du groupe de panneaux alignée sur la bordure de l'écran virtuel.
•
y indique la position supérieure du groupe de panneaux. Vous pouvez le régler sur un nombre entier ou sur une
valeur relative à l'écran. Si le nombre entier excède les limites de l'écran, le groupe de panneaux s'affiche à
l'emplacement le plus proche possible pour être visible à l'écran. Les valeurs relatives gérées sont « top » ou « bottom
» et identifient la bordure du groupe de panneaux alignée sur la bordure de l'écran virtuel.
EXTENSION DE DREAMWEAVER CS4 26
Personnalisation de Dreamweaver
•
width indique la largeur du groupe de panneaux, exprimée en pixels. Cet attribut est facultatif. Si vous ne spécifiez
pas de largeur, la valeur par défaut du groupe de panneaux est utilisée.
•
height indique la hauteur du groupe de panneaux, exprimée en pixels. Cet attribut est facultatif. Si vous ne
spécifiez pas de hauteur, la valeur par défaut du groupe de panneaux est utilisée.
•
dock est une chaîne qui identifie la bordure du cadre d'application sur laquelle est ancré 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éenne : true indique que le groupe de panneaux est réduit, et false indique qu'il est
développé. Cet attribut n'est pas pris en compte sur Macintosh, car les panneaux flottent.
Contenu
Cette balise doit contenir une ou plusieurs balises panelcontainer.
Contenant
Cette balise doit être imbriquée dans une balise panelset.
Exemple
<panelset>
<panelframe rect="196 453 661 987" visible="true" dock="floating">
<!-- panelcontainer tags here -->
</panelframe>
</panelset>
<panelcontainer>
Description
Décrit un groupe entier de panneaux.
Attributs
expanded, title,{ height,} activepanel, visible, maximize, maxRestorePanel, maxRestoreIndex,
maxRect, tabsinheader
•
expanded est une valeur booléenne : true si le panneau est développé et false s'il ne l'est pas.
•
title est une chaîne qui indique le titre du panneau.
•
height est un nombre entier qui indique la hauteur des panneaux, exprimée en pixels. Cet attribut est facultatif. Si
vous ne spécifiez pas height, la valeur par défaut de chaque panneau est utilisée.
Remarque : La largeur est héritée du parent.
•
activepanel est une valeur numérique correspondant à l'ID du panneau avant.
•
visible est une valeur booléenne : true si le panneau est visible et false s'il ne l'est pas.
•
maximize est une valeur booléenne : true si le panneau doit être agrandi lorsqu'il s'affiche initialement et false
dans le cas contraire.
•
maxRestorePanel est une valeur numérique correspondant à l'ID du panneau à afficher suite à une restauration.
•
maxRect est une chaîne qui indique la position et la taille du panneau agrandi. La chaîne est exprimée au format «
gauche haut droite bas », spécifié sous forme de nombres entiers.
•
tabsinheader est une valeur booléenne : true indique que les onglets doivent être placés dans l'en-tête et non sous
la barre d'en-tête ; false indique le contraire.
EXTENSION DE DREAMWEAVER CS4 27
Personnalisation de Dreamweaver
Contenu
Cette balise doit contenir une ou plusieurs balises panel.
Contenant
Cette balise doit être imbriquée dans une balise panelframe.
Exemple
<panelset>
<panelframe rect="196 453 661 987" visible="true" dock="floating">
<panelcontainer title="Color" height="250" visible="true" expanded="true"
activepanel="20">
<!-- panel tags here --->
</panelcontainer>
</panelframe>
</panelset>
<panel>
Description
Spécifie le panneau qui s'affiche dans le contenant.
Attributs
id, visibleTab
•
id est une valeur numérique correspondant à l'ID du panneau. Le tableau ci-dessous contient une liste de valeurs.
Logiciel
ID
Panneau
Adobe® Flash®
1
Propriétés
2
Actions
3
Alignement
4
Comportements
5
Composants
6
Inspecteur de composants
7
Mélangeur
8
Nuanciers
9
Historique
10
Info
11
Bibliothèque
12
Explorateur d'animations
13
Sortie
14
Propriétés
15
Projet
16
Transformer
EXTENSION DE DREAMWEAVER CS4 28
Personnalisation de Dreamweaver
Logiciel
•
ID
Panneau
17
Séquence
18
Chaînes
19
Débogueur
101–
110
Bibliothèque
Dreamweaver
1
Propriétés
Flex Builder
1
Propriétés
visibleTab est une valeur booléenne : true si l'onglet et le panneau doivent être visibles, false dans le cas
contraire.
Contenu
Aucun.
Contenant
Cette balise doit être imbriquée dans une balise panelcontainer.
Exemple
<panelset>
<panelframe rect="196 453 661 987" visible="true" dock="floating">
<panelcontainer title="Color" height="250" visible="true" expanded="true"
activepanel="20">
<panel id="20"></panel>
</panelcontainer>
</panelframe>
</panelset>
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 également insé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 :
<!-- Code view toolbar -->
3 Copiez et collez les balises associé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 :
EXTENSION DE DREAMWEAVER CS4 29
Personnalisation de Dreamweaver
<!-- Code view toolbar -->
3 Entourez le bouton à supprimer d'un commentaire.
L'exemple suivant illustre un bouton entouré de commentaires.
<!-- remove button from Coding toolbar
<button id="DW_ExpandAll"
image="Toolbars/images/MM/T_ExpandAll_Sm_N.png"
disabledImage="Toolbars/images/MM/T_ExpandAll_Sm_D.png"
tooltip="Expand All"
domRequired="false"
enabled="dw.getFocus(true) == 'textView' || dw.getFocus(true) == 'html'¬
"command="if (dw.getFocus(true) == 'textView' || dw.getFocus(true) ¬
== 'html') dw.getDocumentDOM().source.expandAllCodeFragments();"
update="onViewChange" />
-->
4 Enregistrez le fichier.
Pour afficher un bouton qui n'apparaî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éder rapidement aux principales fonctionnalités. Les
raccourcis clavier par défaut figurent dans le fichier menus.xml et sont conçus pour le clavier américain. En raison du
nombre élevé de raccourcis de Dreamweaver, certains raccourcis ne faisant pas appel à des caractères alphanumériques
(caractères autres que a-z ou 0-9) nécessitent la reconfiguration du clavier. A cette fin, Dreamweaver dispose de
plusieurs fichiers XML qui définissent le mappage des raccourcis clavier en fonction de différentes langues. Ces fichiers
sont situés dans le dossier Configuration\Menus\Adaptive Sets. Lorsque Dreamweaver détecte un clavier autre que le
clavier Qwerty américain, il adapte de façon automatique les raccourcis clavier. Lorsque le fichier approprié 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 à deux lettres pour identifier le clavier. Ainsi, le fichier du clavier
allemand est appelé de.xml. Lorsqu'une langue nécessite différentes dispositions en fonction du pays d'utilisation, le
fichier de mappages emploie toujours le code de langue à deux lettres, mais suivi par un tiret (-) et un code de pays à
deux lettres. Par exemple, fr-ca.xml désigne le clavier canadien français. Les codes de langue à deux lettres est conforme
à 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é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 à la langue. Par exemple, si vous connectez un clavier canadien français à 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é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
EXTENSION DE DREAMWEAVER CS4 30
Personnalisation de Dreamweaver
Nom de fichier
Plate-forme Windows
Plate-forme Macintosh
es.xml
Espagnol (international) Espagnol
(traditionnel)
Espagnol - ISO
fr.xml
Français (France)
Français
fr-ca.xml
Français (Canada)
Canadien - CSA
fr-ch.xml
Français (Suisse)
Français Suisse
it.xml
Italien (Italie) Italien (Suisse)
Italien - Pro
it-mac.xml
S/O
Italien
ja.xml
Japonais
Japonais
nl-be.xml
Néerlandais (Belgique) Français (Belgique) Belge
zh-cn.xml
Chinois (RPC) Chinois (Singapour)
Chinois simplifié
Si vous utilisez une disposition de clavier qui ne correspond pas à celle de Dreamweaver, vous pouvez créer un fichier
de mappage personnalisé et le placer dans le dossier Configuration\Menus\Adaptive Sets.
Cré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 à
l'aide du code de langue à 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éez un fichier de mappage pour le clavier suédois, il est recommandé de copier le
fichier de.xml dans la mesure où les dispositions des claviers suédois et allemand sont similaires.
2 Placez le fichier de mappage que vous venez de créer dans un dossier diffé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éterminer les balises de raccourci clavier à modifier, comparez le jeu de raccourcis du clavier américain à
celui de votre langue. La procédure suivante décrit la comparaison de raccourcis à partir de deux dispositions de
clavier distinctes.
5 Après avoir apporté les modifications voulues aux raccourcis clavier, enregistrez le fichier et placez-le dans le
dossier Configuration\Menus\Adaptive Sets.
Déterminez les balises de raccourci clavier que vous voulez modifier.
1 Sélectionnez la langue correspondant à votre clavier sur l'ordinateur, si ce n'est déjà fait. Vous devez passer par le
système d'exploitation de l'ordinateur. Par exemple, sous Windows, vous pouvez sélectionner la langue à l'aide du
Panneau de configuration.
2 Lancez l'éditeur de raccourcis clavier de Dreamweaver en sélectionnant Edition > Raccourcis clavier.
3 Cliquez sur la troisième image de bouton dans le coin supérieur droit de la boîte de dialogue. Survolez le bouton
avec le pointeur pour afficher l'infobulle « Exporter le jeu au format HTML ».
La boîte de dialogue Enregistrer comme fichier HTML s'affiche afin de vous permettre d'entrer le nom du fichier
de résumé de raccourci clavier correspondant à la disposition actuelle.
4 Après avoir enregistré le fichier de résumé, fermez la boîte de dialogue de l'éditeur de raccourcis clavier.
EXTENSION DE DREAMWEAVER CS4 31
Personnalisation de Dreamweaver
5 Sélectionnez la disposition de clavier américain (à partir du système d'exploitation de l'ordinateur).
6 Lancez l'éditeur de raccourcis clavier de Dreamweaver en sélectionnant Edition > Raccourcis clavier.
7 Cliquez sur la troisième image de bouton dans le coin supérieur droit de la boîte de dialogue pour exporter le jeu
dans un fichier HTML.
8 Après avoir enregistré le fichier de résumé, fermez la boîte de dialogue de l'éditeur de raccourcis clavier.
9 Vous pouvez désormais imprimer les deux fichiers de résumé de raccourci clavier et les comparer pour identifier
les raccourcis supprimés par Dreamweaver dans la langue du clavier voulu. Il s'agit des raccourcis clavier que vous
devez réaffecter en fonction des touches propres à votre clavier.
A partir des informations obtenues en comparant les deux fichiers, vous pouvez mettre à jour votre fichier de
mappage en ajoutant ou en supprimant des balises de raccourci pour tout raccourci à réaffecter.
Fichiers XML de mappage de clavier
L'exemple suivant porte sur le format du mappage de clavier français (fr.xml) :
<shortcutset language="French">
<shortcut key="Cmd+[" newkey="Cmd+ù"/>
<shortcut key="Cmd+]" newkey="Cmd+)"/>
<shortcut platform="win" key="Cmd+Shift+>" newkey="Cmd+Opt+Shift+,"/>
<shortcut platform="mac" key="Cmd+Shift+>" newkey="Cmd+<"/>
<shortcut platform="win" key="Cmd+Shift+<" newkey="Cmd+Shift+,"/>
<shortcut key="Cmd+'" newkey="Cmd+Shift+=" />
...
</shortcutset>
Syntaxe du fichier XML de disposition du clavier :
<shortcutset language="language_name">
<shortcut key="key_combination" newkey="key_combination"/>
<shortcut platform="op_system" key="key_combination" newkey="key_combination"/>
</shortcutset>
Où:
• language_name désigne la langue associée au clavier, telle que Français, Espagnol, Allemand, etc.
• key_combination est le raccourci clavier, comme Cmd+[, Cmd+Shift+>, Ctrl+$.
•
key spécifie le raccourci clavier à remplacer.
•
newkey spécifie le raccourci clavier devant remplacer les touches identifiées par key.
• platform=op_system désigne le système auquel le raccourci s'applique. Spécifiez win ou mac. Si aucune plate-forme
n'est spécifiée, le raccourci s'applique aux deux plates-formes.
32
Chapitre 3 : Personnalisation du mode
Code
En mode Code, Adobe Dreamweaver permet de rédiger rapidement un code lisible et sans erreur grâce aux deux outils
que sont les indicateurs de code et la coloration du code. De plus, Dreamweaver effectue un contrôle de validité du
code saisi par rapport aux navigateurs cibles spécifiés et permet de modifier le formatage HTML par défaut.
Vous pouvez personnaliser les outils d'indication et de coloration du code en modifiant leurs fichiers
d'implémentation au format XML. Vous pouvez ajouter des éléments aux menus des indicateurs de code en ajoutant
des entrées dans le fichier CodeHints.xml ou SpryCodeHints.xml. Vous pouvez modifier les modèles de couleur par
l'intermédiaire du fichier de style de coloration du code, Colors.xml, ou encore modifier les modèles de coloration du
code ou en ajouter de nouveaux par l'intermédiaire des fichiers de syntaxe de coloration du code (par exemple,
CodeColoring.xml). Vous pouvez également modifier le fichier de profil CSS (feuille de style en cascade) de votre
navigateur cible de manière à influer sur le système de validation des valeurs et des propriétés CSS dans Dreamweaver.
Vous pouvez enfin modifier le formatage HTML par défaut de Dreamweaver par l'intermédiaire de la boîte de dialogue
Préférences. Les sections suivantes décrivent les procédures de personnalisation de ces différentes fonctions.
A propos des indicateurs de code
Les indicateurs de code sont des menus contextuels qui s'affichent dans Dreamweaver lorsque vous tapez certains
caractères en mode Code. Ils vous évitent de saisir tout le texte en proposant une liste de chaînes susceptibles de
compléter la chaîne que vous tapez. Si la chaîne que vous tapez apparaît dans le menu, sélectionnez-la et appuyez sur
Entrée ou Retour pour compléter votre saisie. Si vous tapez <, par exemple, un menu contextuel affiche une liste des
noms de balises. Plutôt que de taper le reste du nom de la balise, vous pouvez la sélectionner dans le menu pour
l'inclure à votre texte. Dreamweaver fournit également des indicateurs de code pour le cadre applicatif Spry.
Dreamweaver charge les menus d'indicateurs de code à partir du fichier CodeHints.xml ou de tout autre type de fichier
XML enregistré dans le dossier Configuration/CodeHints. Vous pouvez ajouter des menus d'indicateurs de code dans
Dreamweaver en les définissant dans vos propres fichiers XML à l'aide du format de schéma XML qui est décrit dans
cette rubrique et en les plaçant dans le dossier Configuration/CodeHints.
Une fois le contenu du fichier d'indicateurs de code chargé, vous pouvez également ajouter de façon dynamique de
nouveaux menus Indicateurs de code via JavaScript. Par exemple, le code JavaScript ajoute des données à la liste des
variables de session dans le panneau Liaisons. Vous pouvez utiliser le même code pour ajouter un menu d'indicateurs
de code. Dans ce cas, lorsqu'un utilisateur tape "Session." 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 d'indicateurs de code avec
JavaScript, voir « Fonctions de code » dans le Guide des API de Dreamweaver.
Certains types de menus d'indicateurs 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 d'indicateurs de code, mais certaines fonctionnalités de Dreamweaver ne sont pas
accessibles. Par exemple, comme il n'existe pas d'accroche JavaScript pouvant afficher un sélecteur de couleur,
Dreamweaver ne peut pas exprimer le menu Valeurs des attributs à l'aide de JavaScript. Vous pouvez uniquement
afficher un menu d'éléments de texte permettant d'insérer du texte.
Remarque : Lorsque vous insérez du texte, le point d'insertion se place après la chaîne insérée.
EXTENSION DE DREAMWEAVER CS4 33
Personnalisation du mode Code
Fichier CodeHints.xml
Le fichier CodeHints.xml contient les entités suivantes :
• Une liste de tous les groupes de menus
Lorsque vous sélectionnez la catégorie Indicateurs de code dans la boîte de dialogue Préférences, la liste des groupes
de menus s'affiche dans Dreamweaver. Vous pouvez ouvrir la boîte de dialogue Préférences en choisissant Edition
> Préférences. Dreamweaver fournit les groupes de menus ou les types de menus d'indicateurs de code suivants :
Noms de balises, Noms d'attributs, Valeurs d'attributs, Arguments de fonctions, Méthodes et variables d'objets et
Entités HTML.
• La description de chaque groupe de menus
Cette description relative à la catégorie Indicateurs de code apparaît dans la boîte de dialogue Préférences lorsque
vous sélectionnez le groupe de menus dans la liste. La description de l'entrée sélectionnée apparaît au-dessous de la
liste de groupes de menus.
• Des menus d'indicateurs de code
Un menu se compose d'un modèle qui déclenche le menu Indicateurs de code et d'une liste de commandes. Par
exemple, le modèle & peut déclencher un menu &, >, <.
L'exemple suivant présente le format du fichier CodeHints.xml (les balises en gras sont décrites dans « Balises des
indicateurs de code » à la page 38) :
EXTENSION DE DREAMWEAVER CS4 34
Personnalisation du mode Code
<codehints>
<menugroup name="HTML Entities" enabled="true" id="CodeHints_HTML_Entities">
<description>
<![CDATA[ When you type a '&', a pop-up menu shows
a list of HTML entities. The list of HTML entities
is stored in Configuration/CodeHints.xml. ]]>
</description>
<menu pattern="&">
<menuitem value="&" texticon="&"/>
<menuitem value="<" icon="lessThan.gif"/>
</menu>
</menugroup>
<menugroup name="Tag Names" enabled="true" id="CodeHints_Tag_Names">
<description>
<![CDATA[ When you type '<', a pop-up menu shows
all possible tag names.0You can edit the list of tag
names using the
<a href="javascript:dw.popupTagLibraryEditor()"> Tag Library
Editor </a>]]>
</description>
</menugroup>
<menugroup name="Function Arguments" enabled="true"
id="CodeHints_Function_Arguments">
<description>
...
</description>
<function pattern="ArraySort(array, sort_type, sort_order)"
doctypes="CFML"/>
<function pattern="Response.addCookie(Cookie cookie)"
doctypes="JSP"/>
</menugroup>
</codehints>
Indicateurs de code JavaScript
Dreamweaver prend en charge les indicateurs de code pour le cadre applicatif Spry. Le fichier d'indicateurs de code
Spry (SpryCodeHints.xml) reprend le format de base de CodeHints.xml. Il comporte quelques nouveaux mots clés,
tels que method, ainsi qu'un nouvel attribut, classpattern, pour associer la liste de membres de la classe à la classe
(par exemple, Spry.Data.XMLDataSet). La liste de membres de la classe pour les classes est imbriquée dans le menu
(méthodes, propriétés et événements).
La balise <method> et ses attributs est similaire à 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étés et une balise event pour les événements, qui sont représentés par les icônes correspondantes dans le menu
déroulant des indicateurs de code. Vous disposez également des balises parammenu et parammenuitem pour prendre
en charge les indicateurs de paramètres.
Le format du fichier SpryCodeHints.xml, est illustré dans l'exemple suivant. Les balises en gras sont décrites dans
« Balises des indicateurs de code » à la page 38.
EXTENSION DE DREAMWEAVER CS4 35
Personnalisation du mode Code
<function pattern="XMLDataSet(xmlsource, xpath, {options})"
caseSensitive="true" />
<menu classpattern="Spry.Data.XMLDataSet">
<property pattern="url" icon="shared/mm/images/hintMisc.gif" />
<property pattern="xpath" icon="shared/mm/images/hintMisc.gif" />
...
...
<method pattern="getData()" icon="shared/mm/images/hintMisc.gif" />
<method pattern="getData()" icon="shared/mm/images/hintMisc.gif" />
<method pattern="loadData()" icon="shared/mm/images/hintMisc.gif" />
<method pattern="getCurrentRow()" icon= ".../hintMisc.gif" />
<method pattern="setCurrentRow(rowID)" icon= ".../hintMisc.gif" />
<method pattern="setCurrentRowNumber(rowNumber)" icon= ".../hintMisc.gif" />
<method pattern="getRowNumber(rowObj)" icon= ".../hintMisc.gif" />
<method pattern="setColumnType(columnName, columnType)" icon= ".../hintMisc.gif" />
<parammenu pattern='"' name="columnName" index="0" type="spryDataReferences">
</parammenu>
<parammenu pattern='"' name="columnType" index="1" type="enumerated">
<parammenuitem label="integer" value="integer" icon=".../hintMisc.gif"/>
<parammenuitem label="image" value="image" icon=".../hintMisc.gif"/>
<parammenuitem label="date" value="date" icon=".../hintMisc.gif"/>
<parammenuitem label="string" value="string" icon=".../hintMisc.gif"/>
</parammenu>
</method>
<method pattern="getColumnType(columnName)" icon= ".../hintMisc.gif" />
<method pattern="distinct()" icon= ".../hintMisc.gif" />
<method pattern="getSortColumn()" icon= ".../hintMisc.gif" />
<method pattern="sort()" icon= ".../hintMisc.gif" />
...
...
<event pattern="onCurrentRowChanged" icon= ".../hintMisc.gif" />
<event pattern="onDataChanged" icon= ".../hintMisc.gif" />
...
...
</menu>
<function pattern="Accordion(element,{options})" caseSensitive="true" />
<menu classpattern="Spry.Widget.Accordion">
<method pattern="openNextPanel()" icon= ".../hintMisc.gif" />
<method pattern="openPreviousPanel()" icon= ".../hintMisc.gif" />
EXTENSION DE DREAMWEAVER CS4 36
Personnalisation du mode Code
<method pattern="openFirstPanel()" icon= ".../hintMisc.gif" />
...
...
</menu>
</function>
<function pattern="XMLDataSet(xmlsource, xpath, {options})" caseSensitive="true">
<parammenu pattern='{,' name="options" index="2" type="optionArray"
allowwhitespaceprefix="true">
<parammenuitem label="sortOnLoad" value="sortOnLoad:"
icon="shared/mm/images/hintMisc.gif" datatype="string"/>
<optionparammenu pattern="sortOrderOnLoad" label="sortOrderOnLoad"
value="sortOrderOnLoad:" icon="shared/mm/images/hintMisc.gif"
type="enumerated" datatype="string">
<optionparammenuitem label="ascending" value="ascending"
icon="shared/mm/images/hintMisc.gif"/>
<optionparammenuitem label="descending" value="descending"
icon="shared/mm/images/hintMisc.gif"/>
</optionparammenu>
</parammenu>
</function>
Déclaration des classes
Le format suivant déclare une classe en associant une variable à la classe :
<variablename>[space][= operator][new keyword][space]<classname>
Par exemple :
var dsFoo = new Spry.Data.XMLDataSet("products.xml", "products/product");
var fooAccordion = new Spry.Widget.Accordion("accordionDivId");
Dans le cas du nom de la classe Spry.XML.DataSet, vous devez la déclarer de nouveau dans le fichier
ColorCoding.xml, de façon à ce que le moteur d'état de la couleur l'identifie en tant qu'occurrence de classe et prenne
le nom de variable défini dans la partie gauche de la dé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écédent).
Syntaxe de la nouvelle déclaration du nom de classe dans le fichier CodeColoring.xml:
<classlibrary name="Spry Keywords" id="CodeColor_JavascriptSpry">
<class>Spry.Data.XMLDataSet</class>
<class>Spry.Widget.Accordion</class>
</classlibrary>
Où:
•
classlibrary est une nouvelle balise qui regroupe les classes dans l'id de couleur "CodeColor_JavascriptSpry"
class permet d'afficher la liste des différentes entrées de la bibliothèque de classes. La liste de classes peut se
développer afin d'inclure d'autres classes Spry provenant de différents packages Spry (comme Debug, Data, Utils,
Widgets et Effects), ou d'autres boîtes à outils JavaScript et XML (Ajax) asynchrones ou des bibliothèques
JavaScript.
EXTENSION DE DREAMWEAVER CS4 37
Personnalisation du mode Code
Indicateurs de code d'attributs Crosstag
Dreamweaver fournit des indicateurs 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 être appliqués dans un seul fichier VTM nommé Spry.vtm dans le dossier
Configuration/TagLibraries.
Format de groupement de l'attribut Spry
Le format du fichier .vtm est illustré dans l'exemple de code suivant : Ce format permet de spécifier les attributs qui
s'appliquent à certaines balises.
Remarque : Le format du groupement d'attributs Spry peut également être utilisé en dehors du cadre applicatif Spry.
<crosstag_attributes>
<attributegroup id="group_id_1" name="group_name_1">
<attrib name = "fooAttr1">
<attrib name = "barAttr1">
...
<taggroup>
<tag name = "fooTag1">
<tag name = "barTag1">
...
</taggroup>
</attribgroup>
<attributegroup id="group_id_2" name="group_name_2">
<attrib name = "fooAttr2">
<attrib name = "barAttr2">
...
<taggroup>
<tag name = "fooTag2">
<tag name = "barTag2">
...
</taggroup>
</attribgroup>
</crosstag_attributes>
Où:
•
attributegroup donne la liste des attributs du groupe de balises suivantes.
•
taggroup donne la liste des balises auxquelles les attributs précédents s'appliquent.
EXTENSION DE DREAMWEAVER CS4 38
Personnalisation du mode Code
Exemple
<crosstag_attributes>
<attribgroup id="spryRegionAttrs" name="Spry1.2">
<attrib name="spry:region" type="spryDataSet" allowmultiplevalues="yes"/>
<attrib name="spry:detailregion" type="spryDataSet" allowmultiplevalues="yes"/>
<attrib name="spry:content"/>
<attrib name="spry:if"/>
<attrib name="spry:choose">
<attrib name="spry:when"/>
<attrib name="spry:default"/>
<attrib name="spry:state" type="Enumerated">
<attriboption value="read"
caption="read"/>
<attriboption value="loading" caption="loading"/>
<attriboption value="failed" caption="failed"/>
</attrib>
<taggroup>
<tag name="div"/>
<tag name="span"/>
...
</taggroup>
</attribgroup>
<attribgroup id="spryBehaviorAttrs" name="Spry1.2">
<attrib name="spry:hover" type="cssStyle"/>
<attrib name="spry:select" type="cssStyle"/>
<attrib name="spry:odd"
type="cssStyle"/>
<attrib name="spry:even"
type="cssStyle"/>
<taggroup>
<tag name="a"/>
<tag name="abbr"/>
<tag name="acronym"/>
...
</taggroup>
</attribgroup>
</crosstag_attributes>
Balises des indicateurs de code
Les fichiers XML d'indicateurs de code ont recours aux balises suivantes, qui définissent les menus d'indicateurs de
code. Vous pouvez utiliser ces balises pour définir les menus d'indicateurs de code.
<codehints>
Description
La balise codehints correspond à la racine des fichiers CodeHints.xml et SpryCodeHints.xml.
Attributs
Aucun.
Contenu
Une ou plusieurs balises menugroup.
Contenant
Aucun.
EXTENSION DE DREAMWEAVER CS4 39
Personnalisation du mode Code
Exemple
<codehints>
<menugroup>
Description
Chaque balise menugroup correspond à un type de menu. Vous pouvez afficher les types de menu définis dans
Dreamweaver en choisissant la catégorie Indicateurs de code dans la boîte de dialogue Préférences. Pour afficher la
boîte de dialogue Préférences, choisissez Préférences dans le menu Edition.
Vous pouvez créer un groupe de menus ou ajouter des menus à un groupe existant. Les groupes de menus sont des
collections logiques de menus que l'utilisateur peut activer ou désactiver dans la boîte de dialogue Préférences.
Attributs
name, enabled, id
• L'attribut name est le nom localisé qui apparaît dans la liste des groupes de menu de la catégorie Indicateurs de code
de la boîte de dialogue Préférences.
• L'attribut enabled indique si le groupe de menus est actuellement coché ou activé. Une coche apparaît en regard
d'un groupe de menus s'il est activé dans la catégorie Indicateurs de code de la boîte de dialogue Préférences. Pour
activer un groupe de menus, assignez-lui la valeur true ; pour le désactiver, assignez-lui la valeur false.
• L'attribut id est un identificateur non localisé qui se rapporte au groupe de menus.
Contenu
Balises description, menu et function.
Contenant
Balise codehints.
Exemple
<menugroup name="Session Variables" enabled="true" id="Session_Code_Hints">
<description>
Description
La balise description contient du texte affiché par Dreamweaver lorsque vous sélectionnez le groupe de menus dans
la boîte de dialogue Préférences. La description apparaît au-dessous de la liste de groupes de menus. Elle peut contenir
une balise a dans laquelle l'attribut href doit être une URL JavaScript exécutée par Dreamweaver si l'utilisateur clique
sur le lien. Utilisez la structure XML CDATA pour inclure des caractères spéciaux ou illégaux dans la chaîne afin qu'ils
soient considérés comme du texte par Dreamweaver.
Attributs
Aucun.
Contenu
Texte de la description.
EXTENSION DE DREAMWEAVER CS4 40
Personnalisation du mode Code
Contenant
Balise menugroup.
Exemple
<description>
<![CDATA[ To add or remove tags and attributes, use the
<a href="javascript:dw.tagLibrary.showTagLibraryEditor()">Tag Library Editor</a>.]]>
</description>
<menu>
Description
Cette balise décrit un menu contextuel unique. Dreamweaver ouvre ce menu lorsque l'utilisateur tape le dernier
caractère de la chaîne de l'attribut pattern. Par exemple, le menu qui affiche le contenu d'une variable de session peut
avoir un attribut pattern égal à « Session ».
Attributs
pattern, doctypes, casesensitive, classpattern, displayrestriction
• L'attribut pattern spécifie le modèle des caractères tapés entraînant l'affichage du menu d'indicateurs de code dans
Dreamweaver. Si le premier caractère est une lettre, un chiffre ou un trait de soulignement, Dreamweaver affiche
le menu uniquement si le caractère qui précède le modèle dans le document n'est pas une lettre, un chiffre ou un
trait de soulignement. Par exemple, si le modèle est « Session. », Dreamweaver n'affiche pas le menu si l'utilisateur
tape « ma_Session. ».
• L'attribut doctypes indique que le menu est actif uniquement pour les types de documents spécifiés. Cet attribut
permet de spécifier différentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP),
Adobe ColdFusion, etc. Vous pouvez spécifier l'attribut doctypes en tant que liste d'ID de types de documents
séparé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è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éparée par des virgules
spécifiée pour l'attribut doctypes. La liste des types de documents vous permet de spécifier si le modèle fait la
distinction entre majuscules et minuscules pour certains types de documents plutôt que d'autres. Par défaut, la
valeur est false si vous omettez cet attribut. Si vous définissez la valeur de l'attribut casesensitive sur true, le
menu des indicateurs de code s'affiche uniquement si le texte tapé par l'utilisateur correspond exactement au
modèle spécifié par l'attribut du modèle. Si vous définissez la valeur de l'attribut casesensitive sur false, le
menu s'affiche même si le modèle est en minuscules et le texte en majuscules.
• L'attribut classpattern associe la liste de membres de la classe à la classe.
• L'attribut displayrestriction sert à limiter le menu des indicateurs de code à des blocs de syntaxe d'un langage
de programmation spécifique, sur la base des modèles de coloration du code définis dans CodeColoring.xml. Par
exemple, si displayrestriction= "JavaScript", le menu d'indicateurs de code est limité au bloc de syntaxe
JavaScript.
Contenu
Balise menuitem.
Contenant
Balise menugroup.
EXTENSION DE DREAMWEAVER CS4 41
Personnalisation du mode Code
Exemple
<menu pattern="CGI." doctypes="ColdFusion">
<menuitem>
Description
Cette balise indique le texte d'un élément dans un menu contextuel d'indicateurs de code. La balise menuitem indique
également la valeur à insérer dans le texte lorsque vous sélectionnez l'élément.
Attributs
label, value, {icon}, {texticon}, object, source
• L'attribut label correspond à la chaîne affichée dans le menu contextuel de Dreamweaver.
• L'attribut value correspond à la chaîne insérée par Dreamweaver dans le document lorsque vous sélectionnez la
commande. Lorsque l'utilisateur sélectionne l'élément du menu et appuie sur Entrée ou Retour, Dreamweaver
remplace tout le texte tapé depuis l'affichage du menu. L'utilisateur a tapé les caractères correspondant au modèle
avant l'affichage du menu, si bien que Dreamweaver ne les insère pas une seconde fois. Par exemple, si vous
souhaitez insérer &amp, l'entité HTML de l'esperluette (&), vous pouvez définir les balises menu et menuitem
suivantes :
<menu pattern="&">
<menuitem label="&" value="amp;" texticon="&"/>
L'attribut de valeur n'inclut pas l'esperluette (&), car l'utilisateur l'a tapée avant que le menu ne s'affiche.
• L'attribut icon (facultatif) spécifie le chemin d'accès à un fichier image affiché par Dreamweaver sous la forme
d'une icône située à gauche du texte du menu. L'emplacement de ce fichier est défini par une URL (dossier
Configuration).
• L'attribut texticon (facultatif) affiche une chaîne de texte dans la zone d'icône (et non un fichier image). Cet
attribut est utilisé pour le menu Entités HTML.
• L'attribut object fait référence au type auquel appartient l'élément de menu. Par exemple, type de données intégré :
chaîne ou fichier JavaScript personnalisé de type de données défini par l'utilisateur.
• L'attribut source fait référence à l'endroit où il est défini ou d'où il provient. Par exemple, DOM/Javascript/ custom
file.js.
Contenu
Aucun.
Contenant
Balise menu.
Exemple
<menuitem label="CONTENT_TYPE" value=""CONTENT_TYPE")
" icon="shared/mm/images/hintMisc.gif" />
EXTENSION DE DREAMWEAVER CS4 42
Personnalisation du mode Code
<function>
Description
Cette balise figure dans le fichier CodeHints.xml. Cette balise remplace la balise menu pour la spécification des
arguments de fonction et des méthodes d'objet d'un menu contextuel d'indicateurs de code. Lorsque vous tapez un
nom de fonction ou de méthode en mode Code, Dreamweaver affiche un menu de prototypes de fonction, indiquant
l'argument actuel en caractère gras. Chaque fois que vous tapez une virgule, Dreamweaver met à jour le menu de
manière à afficher l'argument suivant en gras. Par exemple, si vous avez tapé le nom de fonction ArrayAppend dans
un document ColdFusion, le menu d'indicateurs de code affiche ArrayAppend(array, value). Une fois la virgule
suivant array saisie, le menu se met à jour et affiche ArrayAppend(array, value).
Dans le cas des méthodes d'objet, Dreamweaver affiche un menu regroupant les méthodes définies pour l'objet dont
vous tapez le nom.
Les fonctions reconnues sont stockées dans les fichiers XML du dossier Configuration/CodeHints.
Attributs
pattern, doctypes, casesensitive
• L'attribut pattern spécifie le nom de la fonction et sa liste d'arguments. S'il est utilisé avec des méthodes, l'attribut
pattern décrit le nom de l'objet et de la méthode, ainsi que les arguments de cette dernière. Avec un nom de
fonction, le menu d'indicateurs de code s'affiche lorsque l'utilisateur tape functionname(. Le menu affiche la liste
des arguments relatifs à la fonction. S'il est utilisé avec une méthode d'objet, le menu d'indicateurs de code s'affiche
lorsque l'utilisateur tape objectname. (point inclus). Ce menu indique les méthodes qui ont été spécifiées pour
l'objet. Ensuite, le menu d'indicateurs de code affiche une liste des arguments de la méthode, comme il le fait avec
une fonction.
• L'attribut doctypes indique que le menu est actif uniquement pour les types de documents spécifiés. Cet attribut
permet de spécifier différentes listes de noms de fonctions pour ASP-JavaScript (ASP-JS), Java Server Pages (JSP),
Macromedia ColdFusion, etc. Vous pouvez spécifier l'attribut doctypes en tant que liste d'ID de types de
documents séparé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è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éparée par des virgules
spécifiée pour l'attribut doctypes. La liste des types de documents vous permet de spécifier si le modèle fait la
distinction entre majuscules et minuscules pour certains types de documents plutôt que d'autres. Par défaut, la
valeur est false si vous omettez cet attribut. Si vous définissez la valeur de l'attribut casesensitive sur true, le
menu d'indicateurs de code s'affiche uniquement si le texte tapé par l'utilisateur correspond exactement au modèle
spécifié par l'attribut du modèle. Si vous définissez la valeur de l'attribut casesensitive sur false, le menu
s'affiche même si le modèle est en minuscules et le texte en majuscules.
Contenu
Aucun.
Contenant
Balise menugroup.
EXTENSION DE DREAMWEAVER CS4 43
Personnalisation du mode Code
Exemple
// function example
<function pattern="CreateDate(year, month, day)" DOCTYPES="ColdFusion" />
// object method example
<function pattern="application.getAttribute(String name)" DOCTYPES="JSP" />
<method>
Description
Cette balise est conçue pour le cadre applicatif Spry. Cette balise remplace la balise menu pour la spécification des
méthodes d'objet d'un menu contextuel d'indicateurs de code. Lorsque vous tapez un nom de méthode en mode Code,
Dreamweaver ouvre un menu de prototypes de méthodes, qui fournit une liste de paramètres pour cette méthode. Il
surveille ensuite la séquence de paramètres à mesure qu'ils sont indiqués. Concernant les méthodes qui n'ont pas de
paramètres, Dreamweaver termine l'appel de méthode en ajoutant des parenthèses ().
L'argument actif s'affiche en gras. Chaque fois que vous tapez une virgule, Dreamweaver met à jour le menu de manière
à afficher l'argument suivant en gras. Dans le cas des méthodes d'objet, Dreamweaver affiche un menu regroupant les
méthodes définies pour l'objet dont vous tapez le nom.
Attributs
pattern, icon, object, source, constructor, static, retType
• L'attribut pattern spécifie le nom de la méthode et sa liste d'arguments. Il décrit également les noms de l'objet et
la méthode, ainsi que les arguments de la méthode. Le menu affiche la liste des arguments de cette méthode. Le
menu des indicateurs de code s'affiche lorsque l'utilisateur tape objectname. (point inclus). Ce menu indique les
méthodes qui ont été spécifiées pour l'objet. Ensuite, le menu d'indicateurs de code affiche une liste des arguments
de la méthode, comme il le fait avec une fonction.
• L'attribut icon spécifie l'icône à utiliser.
• L'attribut object fait référence au type auquel appartient la commande. Par exemple, type de données intégré :
chaîne ou fichier JavaScript personnalisé de type de données défini par l'utilisateur.
• L'attribut source fait référence à l'endroit où il est défini ou d'où il provient. Par exemple, DOM/Javascript/ custom
file.js.
• L'argument constructor est une valeur booléenne. constructor = true fait référence à la méthode qui construit
l'instance de l'objet ; il est marqué séparément par rapport aux autres méthodes d'objet.
• L'argument static est une valeur booléenne. static =
true indique que la méthode ne fonctionne pas sur une
instance spécifique de l'objet, mais sur le type d'objet proprement dit. Par exemple,
Date.parse(dateString)
• L'attribut retType fait référence au type de retour de méthode qui, à son tour, peut être un type d'objet afin de
prendre en charge une cascade d'indicateurs de code.
Contenu
Aucun.
Contenant
Balise menu.
EXTENSION DE DREAMWEAVER CS4 44
Personnalisation du mode Code
<parammenu>
Description
Utilisé pour tout objet (JavaScript) afin de spécifier des indicateurs de paramètre pour les paramètres acceptés par la
méthode ou la fonction.
Attributs
pattern, name, index, type
• L'attribut pattern spécifie le ou les caractères qui déclenchent le menu d'indicateurs de code. Cet argument est
requis.
• L'attribut name spécifie le nom du paramètre. Cet argument est requis.
• L'attribut index spécifie le numéro d'indice du paramètre qui fait l'objet d'un indicateur (commence à zéro). Cet
argument est requis.
• L'attribut type spécifie le type de données. Les types de données suivants sont pris en charge :
•
enumerated (valeur par défaut), qui donne une liste de valeurs <optionparammenuitem> imbriquées à afficher.
•
spryDataReferences, qui donne la liste des colonnes de l'ensemble de données Spry.
•
cssStyle, qui donne la liste des classes CSS disponibles pour la page.
•
cssId, qui donne la liste des règles d'ID de sélection CSS disponibles pour la page.
•
optionArray, qui donne la liste des valeurs <optionparammenu> et <parammenuitem> à afficher (permet de
prendre en charge le paramètre de type tableau d'options).
Contenu
Aucun.
Contenant
Balise method ou function.
<parammenuitem>
Description
Pour tout objet (JavaScript) afin de spécifier des indicateurs de paramètre pour les paramètres acceptés par la méthode
ou la fonction.
Attributs
label, value, icon, {datatype}, object, source
• L'attribut label spécifie le nom que Dreamweaver doit afficher. Cet argument est requis.
• L'attribut value spécifie la valeur que Dreamweaver doit supprimer lorsque l'élément est sélectionné dans le menu
d'indicateurs de code. Cet argument est requis.
• L'attribut icon spécifie l'icône que Dreamweaver doit utiliser dans le menu des indicateurs de code. Cet argument
est requis.
• L'attribut datatype permet de spécifier string, ce qui indique que des guillemets fermants doivent être ajoutés
lorsque l'utilisateur sélectionne une valeur dans le menu d'indicateurs de code. Cet argument est facultatif.
EXTENSION DE DREAMWEAVER CS4 45
Personnalisation du mode Code
• L'attribut object fait référence au type auquel appartient la commande. Par exemple, type de données intégré :
chaîne ou fichier JavaScript personnalisé de type de données défini par l'utilisateur.
• L'attribut source fait référence à l'endroit où il est défini ou d'où il provient. Par exemple, DOM/Javascript/ custom
file.js.
Contenu
Aucun.
Contenant
Balise parammenu.
<optionparammenu>
Description
Utilisé pour tout objet (JavaScript) afin de spécifier des options pour les indicateurs de tableau pour les arguments
acceptés par la mé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 à un argument de tableau d'options pour permettre
aux utilisateurs de configurer le comportement d'un objet (par exemple, un ensemble de données, un widget ou un
effet). Les tableaux d'options se présentent généralement sous la forme suivante : {option1: valeur1, option2:
valeur2, option3: valeur3, etc.}
Attributs
pattern, label, value, icon, type
• L'attribut pattern spécifie le ou les caractères qui déclenchent le menu d'indicateurs de code. Cet argument est
requis.
• L'attribut label spécifie le nom du paramètre. Cet argument est requis.
• L'attribut value spécifie la valeur du paramètre à insérer lorsque l'utilisateur sélectionne le conseil de code. Cet
argument est requis.
• L'attribut icon spécifie l'icône à utiliser. Cet argument est requis.
• L'attribut type spécifie le type de données. Les types de données suivants sont pris en charge :
•
enumerated (valeur par défaut), qui donne une liste de valeurs optionparammenuitem imbriquées à afficher.
•
spryDataReferences, qui donne la liste des colonnes de l'ensemble de données Spry.
•
cssStyle, qui donne la liste des classes CSS disponibles pour la page.
•
cssId, qui donne la liste des règles d'ID de sélection CSS disponibles pour la page.
Contenu
Aucun.
Contenant
Balise parammenu de type optionArray.
EXTENSION DE DREAMWEAVER CS4 46
Personnalisation du mode Code
<optionparammenuitem>
Description
Utilisé pour tout objet (JavaScript) afin de spécifier des indicateurs de paramètre pour les paramètres acceptés par la
méthode ou la fonction.
Attributs
label, value, icon, {datatype}
• L'attribut label spécifie le nom à afficher. Cet argument est requis.
• L'attribut value spécifie la valeur à supprimer lorsque l'élément est sélectionné dans le menu d'indicateurs de code.
Cet argument est requis.
• L'attribut icon spécifie l'icône à utiliser dans le menu d'indicateurs de code. Cet argument est requis.
• L'attribut datatype permet de spécifier string, ce qui indique que des guillemets fermants doivent être ajoutés
lorsque l'utilisateur sélectionne une valeur dans le menu d'indicateurs de code. Cet argument est facultatif.
Contenu
Aucun.
Contenant
Balise <optionparammenu>.
<property>
Description
Cette balise décrit les propriétés/champs d'un objet et comporte les attributs standard suivants.
Attributs
label, value, icon, object, source, static, propType, item
• L'attribut label correspond à la chaîne affichée dans le menu contextuel de Dreamweaver.
• L'attribut value correspond à la chaîne insérée par Dreamweaver dans le document lorsque vous sélectionnez la
commande. Lorsque l'utilisateur sélectionne l'élément du menu et appuie sur Entrée ou Retour, Dreamweaver
remplace tout le texte tapé depuis l'affichage du menu. L'utilisateur a tapé les caractères correspondant au modèle
avant l'affichage du menu, si bien que Dreamweaver ne les insère pas une seconde fois.
• L'attribut icon (facultatif) spécifie le chemin d'accès à un fichier image affiché par Dreamweaver sous la forme
d'une icône située à gauche du texte du menu. L'emplacement de ce fichier est défini par une URL (dossier
Configuration).
• L'attribut object fait référence au type auquel appartient l'élément de menu. Par exemple, type de données intégré :
chaîne ou fichier JavaScript personnalisé de type de données défini par l'utilisateur.
• L'attribut source fait référence à l'endroit où il est défini ou d'où il provient. Par exemple, DOM/Javascript/ custom
file.js.
• L'argument static est une valeur booléenne. static =
true indique que la méthode ne fonctionne pas sur une
instance spécifique de l'objet, mais sur le type d'objet proprement dit. Par exemple,
Number.MAX_VALUE
EXTENSION DE DREAMWEAVER CS4 47
Personnalisation du mode Code
• L'attribut propType fait référence au type de propriété qui, à son tour, peut être un type d'objet afin de prendre en
charge une cascade d'indicateurs de propriétés. Par exemple,
domElement.innerHTML.<code hints for String type>
• L'attribut item fait référence au type d'élément lorsque l'attribut propType est du type conteneur de collection.
item spécifie le type de chaque élément dans le conteneur (en supposant qu'il s'agisse d'un ensemble homogène,
c'est-à-dire un ensemble d'éléments du même type).
Contenu
Aucun.
Contenant
Balise menu.
<event>
Description
Cette balise décrit les événements d'un objet et comporte les attributs standard suivants.
Attributs
label, icon, source, object
• L'attribut label spécifie le nom de l'événement.
• L'attribut icon spécifie le chemin vers un fichier d'image que Dreamweaver affiche en tant qu'icône à côté du texte
du menu.
• L'attribut source fait référence à l'endroit où il est défini ou d'où il provient.
• L'attribut object fait référence au type auquel appartient l'élément de menu.
Contenant
Balise menu.
Exemple
<event label="onblur" source="DOM 1&2" icon="shared/mm/images/codeHintEvent.gif"/>
A propos de la coloration du code
Dreamweaver permet de personnaliser ou d'étendre les modèles de coloration affichés en mode Code de manière à
ajouter de nouveaux mots clés à un modèle ou à ajouter des modèles de coloration du code correspondant à de
nouveaux types de documents. Par exemple, si vous développez des fonctions JavaScript dans le script côté client, vous
pouvez ajouter le nom de ces fonctions à la section des mots clés de manière à les afficher dans la couleur indiquée dans
la boîte de dialogue Préférences. De même, si vous dé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 à l'inclure dans le processus de création de pages, vous pouvez ajouter un modèle de coloration du code
correspondant à ce type de document.
EXTENSION DE DREAMWEAVER CS4 48
Personnalisation du mode Code
Dreamweaver contient la fonction JavaScript dreamweaver.reloadCodeColoring() permettant de recharger les
fichiers XML de coloration du code susceptibles d'avoir été modifiés manuellement. Pour plus d'informations sur cette
fonction, voir le Guide des API de Dreamweaver.
Pour mettre à jour un modèle de coloration du code ou ajouter un nouveau modèle, vous devez modifier les fichiers
de définition de coloration du code.
Coloration du code des fichiers
Dreamweaver définit les styles et les modè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éfinit le style des champs indiqués dans les
définitions de syntaxe. Le nœud racine est <codeColors>. Un fichier de modèle de coloration du code définit la
syntaxe de coloration du code ; le nœud racine est <codeColoring>.
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érarchie de balises dans un fichier de style de coloration du code :
Les couleurs sont indiquées sous la forme de valeurs hexadécimales rouge-vert-bleu (RVB). Par exemple, l'instruction
text="009999" figurant dans le code XML ci-dessus assigne une couleur bleu-vert (sarcelle) à l'ID
"CodeColor_JavascriptNative".
EXTENSION DE DREAMWEAVER CS4 49
Personnalisation du mode Code
L'extrait du fichier codeColoring.xml ci-dessous illustre la hiérarchie de balises dans un fichier de modèle de coloration
du code ainsi que la relation entre le fichier de styles de couleur et le modèle de couleur :
Notez que les balises syntaxColor et tagColor du fichier Colors.xml assignent des valeurs de couleur et de style à
une valeur de chaîne id. La valeur id permet alors d'assigner un style à une balise scheme dans le fichier
CodeColoring.xml. Par exemple, l'id de la balise defaultTag figurant dans l'extrait CodeColoring.xml est
"CodeColor_HTMLComment". Dans le fichier Colors.xml, la valeur text= attribuée à la valeur id de
"CodeColor_HTMLComment" est "#999999", c'est-à-dire gris.
Dreamweaver comporte les modèles de coloration du code suivants : Default, HTML, JavaScript, ASP_JavaScript,
ASP_VBScript, JSP et ColdFusion. Le modèle par défaut possède une valeur id égale à "Text". Dreamweaver l'utilise
pour les types de documents qui ne possèdent pas de modèle de coloration du code défini.
Un fichier de coloration du code contient les balises suivantes, dé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
<scheme>
Description
La balise scheme indique la coloration du code assignée à un bloc de texte de code. Un fichier peut contenir plusieurs
modèles spécifiant différentes colorations pour différents langages de script ou de balise. Chaque modèle possède une
priorité qui permet d'imbriquer un bloc de texte correspondant à un modèle dans un bloc de texte correspondant à un
autre modèle.
Depuis Dreamweaver CS4, le filtre Coloration du code fusionne les balises <scheme> possédant le même id. Toutes les
balises qui ne sont pas en conflit sont ajoutées au même modèle (<scheme>). En cas de conflit, c'est le modèle
possédant la date de fichier la plus récente qui l'emporte.
EXTENSION DE DREAMWEAVER CS4 50
Personnalisation du mode Code
Attributs
name, id, priority, {doctypes}
•
name="nom_modèle" Chaîne attribuant un nom au modèle. Le nom du modèle s'affiche dans la boîte de dialogue
Modifier le modèle de coloration de Dreamweaver. Dreamweaver affiche une combinaison de nom de modèle et
de champ, par exemple HTML Comment. Si vous n'attribuez pas de nom, les champs du modèle n'apparaissent pas
dans la boîte de dialogue Modifier le modèle de coloration. Pour plus d'informations sur la boîte de dialogue
Modifier le modèle de coloration, voir « Modification des modèles » à la page 68.
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
•
priority="chaîne" Valeurs comprises entre 1 et 99. La priorité la plus haute est 1. Indique la priorité d'un
modèle. Les blocs se trouvant au sein de blocs dont la priorité est supérieure sont ignorés ; les blocs se trouvant au
sein de blocs dont la priorité est inférieure ou égale sont prioritaires. Si vous n'indiquez pas de priorité, la valeur par
défaut est de 50.
•
doctypes="liste_doc" Facultatif. Indique une liste des types de documents, séparés par des virgules, auxquels
s'applique le modèle de coloration du code. Cette valeur est indispensable pour la résolution des conflits impliquant
différents blocs de dé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
Contenant
Balise codeColoring.
Exemple
<scheme name="Text" id="Text" doctypes="Text" priority="1">
<blockEnd>
Description
Facultatif. Texte délimitant la fin du bloc de texte de ce modèle. Les balises blockEnd et blockStart doivent être
équilibrées et leur combinaison doit être unique. La casse des valeurs indiquées n'est pas prise en compte. La valeur de
la balise blockEnd peut être composée d'un seul caractère. Vous pouvez créer plusieurs instances de cette balise. Pour
plus d'informations sur les chaînes blockEnd, voir « Caractères génériques » à la page 65.
Attributs
Aucun.
Exemple
<blockEnd><![CDATA[--->]]></blockEnd>
EXTENSION DE DREAMWEAVER CS4 51
Personnalisation du mode Code
<blockStart>
Description
Facultatif. Spécifiée uniquement si le modèle de coloration peut être imbriqué dans un autre modèle de coloration. Les
balises blockEnd et blockStart doivent être équilibrées et leur combinaison doit être unique. La casse des valeurs
indiquées n'est pas prise en compte. La valeur de la balise blockStart doit comporter au minimum deux caractères.
Vous pouvez créer plusieurs instances de cette balise. Pour plus d'informations sur les chaînes blockStart, voir
« Caractères génériques » à la page 65. Pour plus d'informations sur l'attribut blockStartscheme, voir « Coloration
des délimiteurs de bloc de modèle » à la page 62.
Attributs
canNest, doctypes, id, name, scheme
•
canNestIndique si le modèle peut s'imbriquer. Les valeurs sont Yes ou No. La valeur par défaut est No.
•
doctypes="type_doc1, type_doc2,… " Obligatoire. Indique une liste des types de documents, séparés par des
virgules, dans lesquels vous pouvez imbriquer ce modèle de coloration du code. Les types de documents sont définis
dans le fichier Configuration/Document Types/MMDocumentTypes.xml de Dreamweaver.
•
id="id_chaîne" Obligatoire lorsque scheme="customText". Chaîne d'identificateur permettant de mapper la
couleur et le style à cet élément de syntaxe.
•
name="nom_affiché"Chaîne apparaissant dans la boîte de dialogue Modifier le modèle de coloration lorsque
scheme="customText".
•
schemeObligatoire. Définit la coloration des chaînes blockStart et blockEnd. Pour plus d'informations sur les
valeurs possibles de l'attribut « scheme », voir « Coloration des délimiteurs de bloc de modèle » à la page 62.
Exemple
<blockStart doctypes="ColdFusion,CFC" scheme="innerText" canNest="Yes"><![CDATA[<!---]]>
</blockStart>
<brackets>
Description
Liste des caractères représentant des crochets.
Attributs
name, id
•
•
name="nom_crochet" Chaîne assignant un nom à la liste des crochets.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<brackets name="Bracket" id="CodeColor_JavaBracket"><![CDATA[{[()]}]]>
</brackets>
EXTENSION DE DREAMWEAVER CS4 52
Personnalisation du mode Code
<charStart>
Description
Contient une chaîne de texte représentant le délimiteur du début d'un caractère. Les balises charStart et charEnd
doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises charStart … charEnd.
Attributs
Aucun.
Exemple
<charStart><![CDATA[']]></charStart>
<charEnd>
Description
Contient une chaîne de texte représentant le délimiteur de fin d'un caractère. Les balises charStart et charEnd
doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises charStart … charEnd.
Attributs
Aucun.
Exemple
<charEnd><![CDATA[']]></charEnd>
<charEsc>
Description
Contient une chaîne de texte représentant un caractère d'échappement. Vous pouvez insérer plusieurs balises
charEsc.
Attributs
Aucun.
Exemple
<charEsc><![CDATA[\]]></charEsc>
<commentStart>
Description
Chaîne de texte délimitant le début d'un bloc de commentaire. Les balises commentStart et commentEnd doivent être
équilibrées. Vous pouvez indiquer plusieurs paires de balises commentStart…/commentEnd.
Attributs
Aucun.
Exemple
<commentStart><![CDATA[<%--]]></commentStart>
EXTENSION DE DREAMWEAVER CS4 53
Personnalisation du mode Code
<commentEnd>
Description
Chaîne de texte délimitant la fin d'un bloc de commentaire. Les balises commentStart et commentEnd doivent être
équilibrées. Vous pouvez indiquer plusieurs paires de balises commentStart…/commentEnd.
Attributs
Aucun.
Exemple
<commentEnd><![CDATA[--%>]]></commentEnd>
<cssImport/>
Description
Balise vide indiquant la règle de coloration du code de la fonction @import de l'élément style dans une feuille de style CSS.
Attributs
name, id
•
•
name="nom_importCSS" Chaîne assignant un nom à la fonction @import CSS.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<cssImport name="@import" id="CodeColor_CSSImport" />
<cssMedia/>
Description
Balise vide indiquant la règle de coloration du code de la fonction @media de l'élément style dans une CSS.
Attributs
name, id
•
•
name="nom_médiaCSS" Chaîne assignant un nom à la fonction @media CSS.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<cssMedia name="@media" id="CodeColor_CSSMedia" />
<cssProperty/>
Description
Balise vide indiquant les règles CSS et regroupant des attributs de coloration du code.
EXTENSION DE DREAMWEAVER CS4 54
Personnalisation du mode Code
Attributs
name, id
•
name="nom_propriétéCSS" Chaîne assignant un nom à la propriété CSS.
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Préférence de couleur de code
Propriété CSS
Exemple
<cssProperty name="Property" id="CodeColor_CSSProperty" />
<cssSelector/>
Description
Balise vide indiquant les règles CSS et regroupant des attributs de coloration du code.
Attributs
name, id
•
•
name="nom_sélecteurCSS" Chaîne assignant un nom au sélecteur CSS.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<cssSelector name="Selector" id="CodeColor_CSSSelector" />
<cssValue/>
Description
Balise vide indiquant les règles CSS et regroupant des attributs de coloration du code.
Attributs
name, id
•
•
name="nom_valeurCSS" Chaîne assignant un nom à la valeur CSS.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<cssValue name="Value" id="CodeColor_CSSValue" />
EXTENSION DE DREAMWEAVER CS4 55
Personnalisation du mode Code
<defaultAttribute>
Description
Facultatif. Cette balise s'applique uniquement à la syntaxe de balise (c'est-à-dire une syntaxe pour laquelle
ignoreTags="No"). Si cette balise figure dans le code, tous les attributs de balise sont colorés suivant le style qui lui
est assigné. Si ce n'est pas le cas, la couleur des attributs est identique à celle de la balise correspondante.
Attributs
name •Chaîne assignant un nom à l'attribut par défaut.
Exemple
<defaultAttribute name="Attribute"/>
<defaultTag>
Description
Cette balise permet de spécifier la couleur et le style par défaut des balises d'un modèle.
Attributs
name, id
•
•
name="nom_affiché" Chaîne affichée par Dreamweaver dans l'éditeur de coloration du code.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<defaultTag name="Other Tags" id="CodeColor_HTMLTag" />
<defaultText/>
Description
Facultatif. Si cette balise figure dans le code, les chaînes de texte définies par toute autre balise sont colorées suivant le
style assigné à cette balise. Si ce n'est pas le cas, le texte est de couleur noire.
Attributs
name, id
•
•
name="nom_sélecteurCSS" Chaîne assignant un nom au sélecteur CSS.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<defaultText name="Text" id="CodeColor_TextText" />
EXTENSION DE DREAMWEAVER CS4 56
Personnalisation du mode Code
<endOfLineComment>
Description
Chaîne de texte délimitant le début d'un commentaire allant jusqu'à la fin de la ligne actuelle. Vous pouvez insérer
plusieurs balises endOfLineComment…/endOfLineComment.
Attributs
Aucun.
Exemple
<endOfLineComment><![CDATA[//]]></endOfLineComment>
<entity/>
Description
Balise vide indiquant que les caractères spéciaux HTML doivent être reconnus et contenir des attributs de coloration.
Attributs
name, id
•
•
name="nom_entité" Chaîne assignant un nom à l'entité.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<entity name="Special Characters" id="CodeColor_HTMLEntity" />
<functionKeyword>
Description
Identifie les mots clés définissant une fonction. Ces mots clés permettent à Dreamweaver de naviguer dans le code.
Vous pouvez insérer plusieurs balises functionKeyword.
Attributs
name, id
•
•
name="nom_motcléFonction" Chaîne assignant un nom au bloc functionKeyword.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<functionKeyword name="Function Keyword"
id="CodeColor_JavascriptFunction">function</functionKeyword>
<idChar1>
Description
Liste de chacun des caractères identifiables par Dreamweaver comme premier caractère d'un identifiant.
EXTENSION DE DREAMWEAVER CS4 57
Personnalisation du mode Code
Attributs
name, id
•
name="nom_carID1" Chaîne assignant un nom à la liste des caractères d'identifiant.
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<idChar1>_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1>
<idCharRest>
Description
Liste de caractères devant être identifiés comme les autres caractères de l'identificateur. Si la balise idChar1 n'est pas
spécifiée, tous les caractères de l'identifiant sont validés en fonction de cette liste.
Attributs
name, id
•
•
name="nom_restCarID" Chaîne assignant un nom au bloc stringStart.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier">
_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</idCharRest>
<ignoreCase>
Description
Indique si la casse des caractères doit être ignorée lors de la comparaison des expressions et des mots clés. Les valeurs
sont Yes ou No. La valeur par défaut est Yes.
Attributs
Aucun.
Exemple
<ignoreCase>Yes</ignoreCase>
<ignoreMMTParams>
Description
Indique si une couleur particulière doit être attribuée à la balise MMTInstance:Param, <!-- InstanceParam ou <!- #InstanceParam. Les valeurs sont Yes et No ; la valeur par défaut est Yes. Cette balise assure la coloration
appropriée des pages utilisant des modèles.
Attributs
Aucun.
EXTENSION DE DREAMWEAVER CS4 58
Personnalisation du mode Code
Exemple
<ignoreMMTParams>No</ignoreMMTParams>
<ignoreTags>
Description
Indique si les balises doivent être ignorées. Les valeurs sont Yes et No ; la valeur par défaut est Yes. Réglée sur No lorsque
la syntaxe concerne un langage de marquage de balises délimité par < et >. Réglez la valeur sur Yes si la syntaxe
correspond à un langage de programmation.
Attributs
Aucun.
Exemple
<ignoreTags>No</ignoreTags>
<isLocked>
Description
Indique si le texte correspondant au modèle est autorisé à être modifié en mode Code. Les valeurs sont Yes et No. La
valeur par défaut est No.
Attributs
Aucun.
Exemple
<isLocked>Yes</isLocked>
<keyword>
Description
Chaîne de texte définissant un mot clé. Vous pouvez insérer plusieurs balises keyword. Il n'existe aucune restriction
liée au premier caractère d'un mot clé ; en revanche, les caractères suivants doivent être a-z, A-Z, 0-9, _, $ ou @.
La couleur du code est spécifiée par les balises contenant keyword.
Attributs
Aucun.
Exemple
<keyword>.getdate</keyword>
<keywords>
Description
Liste des mots clés correspondant au type spécifié dans l'attribut category. Vous pouvez insérer plusieurs balises
keywords.
EXTENSION DE DREAMWEAVER CS4 59
Personnalisation du mode Code
Attributs
name, id
•
name="nom_mots_clés" Chaîne assignant un nom à la liste des mots clés.
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Contenu
<keyword></keyword>
Exemple
<keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved">
<keyword>break</keyword>
<keyword>case</keyword>
</keywords>
<numbers/>
Description
Balise vide spécifiant les chiffres devant être reconnus et contenant des attributs de couleur.
Attributs
name, id
•
•
name="nom_chiffre" Chaîne assignant un nom à la balise numbers.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<numbers name="Number" id="CodeColor_CFScriptNumber" />
<opérateurs>
Description
Liste des caractères devant être reconnus comme opérateurs.
Attributs
name, id
•
name="nom_opérateur" Chaîne assignant un nom à la liste des caractères opérateurs.
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
Exemple
<operators name="Operator" id="CodeColor_JavaOperator"><![CDATA[+*/%<>!?:=&|^~]]></operators>
EXTENSION DE DREAMWEAVER CS4 60
Personnalisation du mode Code
<regexp>
Description
Spécifie une liste de balises searchPattern.
Attributs
name, id, delimiter, escape
•
•
name="nom_débutChaîne" Chaîne assignant un nom à la liste des chaînes de modèle de recherche.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
•
delimiterCaractère ou chaîne situé au début et à la fin d'une expression régulière.
•
escape Caractère ou chaîne signalant le traitement de caractères spéciaux, également appelé caractère ou chaîne
d'échappement.
Contenu
<searchPattern></searchPattern>
Exemple
<regexp name="RegExp" id="CodeColor_JavascriptRegexp" delimiter="/" escape="\\">
<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>
<searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern>
</regexp>
<sampleText>
Description
Texte servant à la représentation dans la fenêtre Aperçu de la boîte de dialogue Modifier le modèle de coloration. Pour
plus d'informations sur la boîte de dialogue Modifier le modèle de coloration, voir « Modification des modèles » à la
page 68.
Attributs
doctypes
•
doctypes="doc_type1, doc_type2,..." Types de documents pour lesquels cet échantillon apparaît.
Exemple
<sampleText doctypes="JavaScript"><![CDATA[/* JavaScript */
function displayWords(arrayWords) {
for (i=0; i < arrayWords.length(); i++) {
// inline comment
alert("Word " + i + " is " + arrayWords[i]);
}
}
var tokens = new Array("Hello", "world");
displayWords(tokens);
]]></sampleText>
EXTENSION DE DREAMWEAVER CS4 61
Personnalisation du mode Code
<searchPattern>
Description
Chaîne de caractères définissant un modèle de recherche régulier à l'aide des caractères génériques pris en charge.
Vous pouvez insérer plusieurs balises searchPattern.
Attributs
Aucun.
Contenant
Balise regexp.
Exemple
<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>
<stringStart>
Description
Ces balises contiennent une chaîne de texte représentant le délimiteur du début d'une chaîne. Les balises stringStart
et stringEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises stringStart … stringEnd.
Attributs
name, id, wrap
•
•
name="nom_stringStart" Chaîne assignant un nom au bloc stringStart.
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
•
wrap="true" ou "false". Définit la reconnaissance ou non des chaînes de texte placées sur la ligne suivante. La
valeur par défaut est "true".
Exemple
<stringStart name="Attribute Value" id="CodeColor_HTMLString"><![CDATA["]]></stringStart>
<stringEnd>
Description
Contient une chaîne de texte représentant le délimiteur de fin d'une chaîne de code. Les balises stringStart et
stringEnd doivent être équilibrées. Vous pouvez indiquer plusieurs paires de balises stringStart … stringEnd.
Attributs
Aucun.
Exemple
<stringEnd><![CDATA["]]></stringEnd>
EXTENSION DE DREAMWEAVER CS4 62
Personnalisation du mode Code
<stringEsc>
Description
Contient une chaîne de texte représentant le délimiteur du caractère d'échappement d'une chaîne. Vous pouvez insérer
plusieurs balises stringEsc.
Attributs
Aucun.
Exemple
<stringEsc><![CDATA[\]]></stringEsc>
<tagGroup>
Description
Cette balise regroupe une ou plusieurs balises auxquelles vous pouvez assigner une couleur et un style uniques.
Attributs
id, name, taglibrary, tags
•
id="id_chaîne" Obligatoire. Chaîne d'identificateur permettant de mapper la couleur et le style à cet élément de
syntaxe.
•
•
name="nom_affiché" Chaîne affichée par Dreamweaver dans l'éditeur de coloration du code.
taglibrary="id_bibliothèque_balises" Identificateur de la bibliothèque de balises à laquelle le groupe
appartient.
•
tags="liste_balise" Balise ou liste de balises séparées par des virgules comprenant le groupe de balises.
Exemple
<tagGroup name="HTML Table Tags" id="CodeColor_HTMLTable" taglibrary="DWTagLibrary_html"
tags="table,tbody,td,tfoot,th,thead,tr,vspec,colw,hspec" />
Coloration des délimiteurs de bloc de modèle
L'attribut de modèle blockStart détermine la coloration des chaînes de début et de fin de bloc ou des délimiteurs de
bloc. Les valeurs valides pour l'attribut blockStart sont répertoriées ci-après.
Remarque : Ne pas confondre l'attribut blockStart.scheme et la balise scheme.
innerText
Cette valeur indique à Dreamweaver que les délimiteurs de bloc doivent avoir la même couleur que le texte par défaut
du modèle qu'ils renferment.
Le modèle Modèle illustre l'effet de ce modèle. Le modèle Modèle correspond à des blocs de code en lecture seule. La
couleur grise indique qu'il est impossible de les modifier. Les délimiteurs de bloc, à savoir les chaînes <!#EndEditable
--> et <!-- #BeginEditable "..." -->, sont aussi de couleur grise car, il est également impossible de les modifier.
EXTENSION DE DREAMWEAVER CS4 63
Personnalisation du mode Code
Exemple de code
<!-- #EndEditable -->
<p><b><font size="+2">header</font></b></p>
<!-- #BeginEditable "test" -->
<p>Here's some editable text </p>
<p> </p>
<!-- #EndEditable -->
Exemple
<blockStart doctypes="ASP-JS,ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion,CFC, HTML,
JSP,LibraryItem,PHP_MySQL" scheme="innerText"><![CDATA[<!--\s*#BeginTemplate]]>
</blockStart>
customText
Cette valeur indique à Dreamweaver qu'une couleur personnalisée doit être appliquée aux délimiteurs.
Exemple de code
Les délimiteurs de bloc de script PHP, qui apparaissent en rouge, illustrent l'effet de la valeur customText :
<?php
if ($loginMsg <> "")
echo $loginMsg;
?>
Exemple
<blockStart name="Block Delimiter" id="CodeColor_JavaBlock" doctypes="JSP"
scheme="customText"><![CDATA[<%]]></blockStart>
outerTag
La valeur outerTag indique que les balises blockStart et blockEnd sont des balises à part entière et que
Dreamweaver doit les colorer comme des balises du modèle qui les entoure.
Le modèle JavaScript, dans lequel les chaînes <script> et </script> correspondent aux balises blockStart et
blockEnd, illustre cette valeur. Ce modèle correspond aux blocs de code JavaScript, dans lequel les balises ne sont pas
reconnues; les délimiteurs doivent donc prendre la coloration du modèle qui les entoure.
Exemple de code
<script language="JavaScript">
// comment
if (true)
window.alert("Hello, World");
</script>
Exemple
<blockStart doctypes="PHP_MySQL" scheme="outerTag">
<![CDATA[<script\s+language="php">]]></blockStart>
innerTag
Cette valeur est similaire à la valeur outerTag ; la seule différence est que la coloration provient du modèle se trouvant
à l'intérieur des délimiteurs. Ceci s'applique actuellement à la balise html.
EXTENSION DE DREAMWEAVER CS4 64
Personnalisation du mode Code
nameTag
Cette valeur indique que la chaîne blockStart correspond au début d'une balise, que la chaîne blockEnd correspond
à la fin d'une balise et que ces délimiteurs doivent être colorés suivant les paramètres de balise du modèle.
Ce type de modèle affiche les balises pouvant être imbriquées dans d'autres balises (par exemple, la balise cfoutput).
Exemple de code
<input type="text" name="zip"
<cfif newRecord IS "no">
<cfoutput query="employee"> Value="#zip#" </cfoutput>
</cfif>
>
Exemple
<blockStart doctypes="ColdFusion,CFC" scheme="nameTag">
<![CDATA[<cfoutput\n]]></blockStart>
nameTagScript
Cette valeur est identique au modè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èle affiche uniquement les balises contenant du script (par exemple, les balises ColdFusion cfset, cfif
et cfifelse) et pouvant être imbriquées au sein d'autres balises.
Exemple de code
Voir l'exemple illustrant « nameTag » à la page 64.
Exemple
<blockStart doctypes="ColdFusion,CFC"
scheme="nameTagScript"><![CDATA[<cfset\n]]></blockStart>
Traitement des modè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 à certains champs. Le tableau ci-dessous
ré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
EXTENSION DE DREAMWEAVER CS4 65
Personnalisation du mode Code
Champ
CSS
character
Balises
Script
X
X
function keyword
X
identifier
X
number
X
operator
X
X
brackets
X
X
keywords
X
X
Afin de faciliter le processus de définition de modèles, Dreamweaver permet de spécifier des caractères génériques et
des caractères d'échappement.
Caractères génériques
La liste ci-dessous répertorie les caractères génériques pris en charge dans Dreamweaver, les chaînes permettant de les
spécifier et une description de leur utilisation.
Caractère générique
Chaîne
Description
d'échappe
ment
Caractère générique
\*
Ignore tous les caractères de la règle jusqu'à la détection du caractère
suivant le caractère générique. Par exemple, <MMTInstance:Editable
name="\*"> permet de détecter toutes les balises de ce type pour
lesquelles l'attribut name est spécifié.
EXTENSION DE DREAMWEAVER CS4 66
Personnalisation du mode Code
Caractère générique
Chaîne
Description
d'échappe
ment
Caractère générique
avec caractère
d'échappement
\e*x
x correspond au caractère d'échappement.
Même utilisation que le caractère générique, avec possibilité de spécifier
un caractère d'échappement. Le caractère suivant le caractère
d'espacement est ignoré. Le caractère suivant le caractère générique peut
ainsi apparaître dans une chaîne sans correspondre au critère spécifié pour
l'arrêt du traitement du caractère générique.
Par exemple, /\e*\\/ permet de reconnaître une expression JavaScript
régulière commençant et terminant par une barre oblique (/) et pouvant
contenir des barres obliques précédées d'une barre oblique inversée (\). La
barre oblique inversée correspond au caractère d'échappement de
coloration du code ; dès lors, vous devez la précéder d'une barre oblique
inversée lorsque vous la spécifiez dans du code XML coloré.
Espace blanc facultatif
\s*
Permet de reconnaître zéro ou plusieurs espaces vides ou les caractères de
nouvelle ligne.
Par exemple, <!--\s*#include permet de reconnaître des directives
d'inclusion ASP, que l'expression #include soit précédée ou non d'espace
blanc, car les deux cas sont valides.
Les caractères génériques espace blanc correspondent à toutes les
combinaisons d'espace blanc et de caractères de nouvelle ligne.
Espace blanc obligatoire \s+
Permet de reconnaître un ou plusieurs espaces vides ou les caractères de
nouvelle ligne.
Par exemple, <!--#include\s+virtual permet de reconnaî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éparer ces deux expressions, mais il peut correspondre à
toutes les combinaisons de caractères d'espace blanc valides.
Les caractères génériques espace blanc correspondent à toutes les
combinaisons d'espace blanc et de caractères de nouvelle ligne.
Caractères d'échappement
La liste ci-dessous répertorie les caractères d'échappement pris en charge dans Dreamweaver, les chaînes permettant
de les spécifier et une description de leur utilisation.
Caractère
d'échappement
Chaîne
d'échapp
ement
Description
Barre oblique inversée
\\
La barre oblique inversée (\) correspond au caractère d'échappement de
coloration du code ; elle doit donc être ignorée pour être spécifiée dans une
règle de coloration du code.
Espace blanc
\s
Ce caractère d'échappement correspond à tous les caractères non visibles,
à l'exception de ceux correspondant au caractère de nouvelle ligne, comme
les espaces et les tabulations.
Les caractères génériques espace blanc facultatif et espace blanc
obligatoire correspondent à la fois aux caractères d'espace blanc et à ceux
de nouvelle ligne.
Nouvelle ligne
\n
Ce caractère d'échappement correspond aux caractères de nouvelle ligne
(également appelés sauts de ligne) et aux retours chariot.
EXTENSION DE DREAMWEAVER CS4 67
Personnalisation du mode Code
Longueur maximale de chaîne
La longueur maximale autorisée pour les chaînes de données est de 100 caractères. Par exemple, la balise blockEnd
suivante contient un caractère générique.
<blockEnd><![CDATA[<!--\s*#BeginEditable\s*"\*"\s*-->]]></blockEnd>
En partant du principe que les chaînes de caractère générique espace blanc facultatif (\s*) correspondent à un seul
espace, généré automatiquement par Dreamweaver, la chaîne de données comprend 26 caractères, plus une chaîne de
caractère générique (\*) correspondant au nom.
<!-- #BeginEditable "\*" -->
Le nom de région modifiable peut donc comporter jusqu'à 74 caractères, c'est-à-dire 100 caractères (longueur
maximale) moins 26.
Priorité des modèles
Dreamweaver applique la coloration de la syntaxe de texte en mode Code à l'aide de l'algorithme suivant :
1 Dreamweaver détermine le modèle de syntaxe initial en fonction du type de document du fichier actuel. Le type de
document du fichier est déterminé en fonction de l'attribut scheme.documentType. Si aucun type n'est détecté,
le modèle pour lequel scheme.documentType = "Text" est utilisé.
2 Les modèles peuvent être imbriqués s'ils comportent des paires blockStart…blockEnd. Tous les modèles
pouvant être imbriqués et pour lesquels l'extension du fichier actuel est répertoriée dans l'un des attributs
blockStart.doctypes sont activés pour le fichier actuel; les autres modèles sont désactivés.
Remarque : Toutes les combinaisons blockStart/blockEnd doivent être uniques.
Les modèles peuvent s'imbriquer au sein d'un autre modèle à condition que scheme.priority soit supérieure ou
égale au modèle extérieur. Si la priorité est la même, le modèle s'imbrique uniquement au niveau du corps du
modèle extérieur. Par exemple, le bloc <script>...</script> peut uniquement s'imbriquer dans le bloc
<html>...</html> contenant des balises légales ; il ne peut donc pas s'imbriquer au sein d'une balise, d'un attribut,
d'une chaîne, d'un commentaire, etc.
Les modèles dont la priorité est supérieure au modèle extérieur peuvent s'imbriquer à quasiment tous les niveaux
du modèle extérieur. Par exemple, le bloc <html>...</html> peut non seulement s'imbriquer au niveau du corps
du bloc <%...%>, mais également au sein d'une balise, d'un attribut, d'une chaîne, d'un commentaire, etc.
Le niveau d'imbrication maximum est de 4.
3 Lorsqu'il recherche des chaînes blockStart, Dreamweaver utilise toujours la correspondance la plus longue.
4 Une fois la chaîne blockEnd atteinte pour le modèle actuel, la coloration de syntaxe revient au niveau où la chaîne
blockStart est détectée. Par exemple, si un bloc <%...%> est détecté au sein d'une chaîne HTML, la coloration
reprend avec la couleur de la chaîne HTML.
EXTENSION DE DREAMWEAVER CS4 68
Personnalisation du mode Code
Modification des modèles
Vous pouvez modifier les styles d'un modèle de coloration du code soit en modifiant le fichier de coloration du code
ou en sélectionnant la catégorie Coloration du code dans la boîte de dialogue Préférences de Dreamweaver (voir
illustration ci-dessous) :
Les paramètres de couleur et de style des champs susceptibles d'apparaître plusieurs fois (par exemple, stringStart)
doivent être indiqués uniquement pour la première balise. Si vous répartissez les paramètres de couleur et de style sur
plusieurs balises et que vous les modifiez ultérieurement dans la boîte de dialogue Préférences, vous perdrez vos
données.
Remarque : Adobe recommande de créer des copies de sauvegarde de tous les fichiers XML avant d'apporter vos
modifications. Vérifiez toutes les modifications apportées manuellement avant de modifier les paramètres de style et de
couleur dans la boîte de dialogue Préférences. Si vous modifiez un fichier XML non valide dans la boîte de dialogue
Préférences, vous perdrez vos données.
Pour modifier les styles d'un modèle dans la catégorie Coloration du code de la boîte de dialogue Préférences, doublecliquez sur un type de document ou cliquez sur le bouton Modifier le modèle de coloration ; la boîte de dialogue
Modifier le modèle de coloration s'affiche.
Pour modifier le style d'un élément en particulier, sélectionnez-le dans la liste Styles pour. Le volet Styles pour
répertorie les champs du modèle modifié ainsi que les modèles susceptibles d'apparaître sous forme de bloc au sein de
ce modèle. Par exemple, si vous modifiez le modèle HTML, les champs des blocs CSS et JavaScript apparaissent
également.
EXTENSION DE DREAMWEAVER CS4 69
Personnalisation du mode Code
Les champs de modèle répertoriés correspondent aux champs définis dans le fichier XML. La valeur de l'attribut
scheme.name précède chacun des champs répertoriés dans le volet Styles pour. Les champs sans nom ne sont pas
répertoriés.
Outre la coloration du code, le style ou le format d'un élément désigne la mise en caractère gras, la mise en italique, le
soulignement et la couleur d'arrière-plan. Une fois l'élément sélectionné dans le volet Styles pour, vous pouvez
modifier toutes ces caractéristiques de style.
La zone Aperçu affiche un échantillon de texte auquel s'appliquent les paramètres indiqués. L'échantillon est défini
dans le paramètre sampleText du modèle.
Sélectionnez un élément dans la zone Aperçu pour modifier la sélection de la liste Style pour.
Si vous modifiez les paramètres d'un élément d'un modèle, Dreamweaver consigne la valeur dans le fichier de
coloration et remplace le paramè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è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és de l'exemple JavaScript sont
abrégées.
Coloration du code CSS
<scheme name="CSS" id="CSS" doctypes="CSS" priority="50">
<ignoreCase>Yes</ignoreCase>
<ignoreTags>Yes</ignoreTags>
<blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag">
<![CDATA[<style>]]></blockStart>
<blockEnd><![CDATA[</style>]]></blockEnd>
<blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag">
<![CDATA[<style\s+\*>]]></blockStart>
<blockEnd><![CDATA[</style>]]></blockEnd>
<commentStart name="Comment" id="CodeColor_CSSComment"><![CDATA[ /*]]></commentStart>
<commentEnd><![CDATA[*/]]></commentEnd>
<endOfLineComment><![CDATA[<!--]]></endOfLineComment>
<endOfLineComment><![CDATA[-->]]></endOfLineComment>
<stringStart name="String" id="CodeColor_CSSString"><![CDATA["]]></stringStart>
<stringEnd><![CDATA["]]></stringEnd>
<stringStart><![CDATA[']]></stringStart>
<stringEnd><![CDATA[']]></stringEnd>
<stringEsc><![CDATA[\]]></stringEsc>
<cssSelector name="Selector" id="CodeColor_CSSSelector" />
<cssProperty name="Property" id="CodeColor_CSSProperty" />
<cssValue name="Value" id="CodeColor_CSSValue" />
<sampleText doctypes="CSS"><![CDATA[/* Comment */
H2, .head2
{
font-family : 'Sans-Serif';
font-weight : bold;
color : #339999;
}]]>
</sampleText>
</scheme>
EXTENSION DE DREAMWEAVER CS4 70
Personnalisation du mode Code
Exemple de texte CSS
L'exemple du modèle CSS suivant illustre le modè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ées dans
l'exemple et ont été assignées par le modèle de coloration du code :
<syntaxColor id="CodeColor_CSSSelector" text="#FF00FF" />
<syntaxColor id="CodeColor_CSSProperty" text="#000099" />
<syntaxColor id="CodeColor_CSSValue" text="#0000FF" />
Coloration du code JavaScript
<scheme name="JavaScript" id="JavaScript" doctypes="JavaScript" priority="50">
<ignoreCase>No</ignoreCase>
<ignoreTags>Yes</ignoreTags>
<blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag">
<![CDATA[<script>]]></blockStart>
<blockEnd><![CDATA[</script>]]></blockEnd>
<blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,
CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag">
<![CDATA[<script\s+\*>]]></blockStart>
<blockEnd><![CDATA[</script>]]></blockEnd>
<commentStart name="Comment" id="CodeColor_JavascriptComment">
<![CDATA[/*]]></commentStart>
<commentEnd><![CDATA[*/]]></commentEnd>
<endOfLineComment><![CDATA[//]]></endOfLineComment>
<endOfLineComment><![CDATA[<!--]]></endOfLineComment>
<endOfLineComment><![CDATA[-->]]></endOfLineComment>
<stringStart name="String" id="CodeColor_JavascriptString">
<![CDATA["]]></stringStart>
<stringEnd><![CDATA["]]></stringEnd>
<stringStart><![CDATA[']]></stringStart>
<stringEnd><![CDATA[']]></stringEnd>
<stringEsc><![CDATA[\]]></stringEsc>
<brackets name="Bracket" id="CodeColor_JavascriptBracket">
<![CDATA[{[()]}]]></brackets>
<operators name="Operator" id="CodeColor_JavascriptOperator">
<![CDATA[+-*/%<>!?:=&|^]]></operators>
<numbers name="Number" id="CodeColor_JavascriptNumber" />
<regexp name="RegExp" id="CodeColor_JavascriptRegexp" delimiter="/" escape="\\">
<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>
<searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern>
</regexp>
<idChar1>_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1>
<idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier">
_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</idCharRest>
<functionKeyword name="Function Keyword" id="CodeColor_JavascriptFunction">
function</functionKeyword>
EXTENSION DE DREAMWEAVER CS4 71
Personnalisation du mode Code
<keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved">
<keyword>break</keyword>
. . .
</keywords>
<keywords name="Native Keywords" id="CodeColor_JavascriptNative">
<keyword>abs</keyword>
. . .
</keywords>
<keywords id="CodeColor_JavascriptNumber">
<keyword>Infinity</keyword>
<keyword>Nan</keyword>
</keywords>
<keywords name="Client Keywords" id="CodeColor_JavascriptClient">
<keyword>alert</keyword>
. . .
</keywords>
<sampleText><![CDATA[/* JavaScript */
function displayWords(arrayWords) {
for (i=0; i < arrayWords.length(); i++) {
// inline comment
alert("Word " + i + " is " + arrayWords[i]);
}
}
var tokens = new Array("Hello", "world");
displayWords(tokens);
]]></sampleText>
</scheme>
Exemple de texte JavaScript
L'exemple du modèle JavaScript suivant illustre le modèle de coloration du code JavaScript :
/* JavaScript */ function displayWords(arrayWords) {
for (i=0; i < arrayWords.length(); i++) {
// inline comment
alert("Word " + i + " is " + arrayWords[i]);
}
}
var tokens = new Array("Hello", "world");
displayWords(tokens);
Les lignes suivantes, extraites du fichier Colors.xml, fournissent les valeurs de couleur et de style affichées dans
l'exemple et ont été assignées par le modèle de coloration du code :
<syntaxColor
<syntaxColor
<syntaxColor
<syntaxColor
<syntaxColor
<syntaxColor
id="CodeColor_JavascriptComment" text="#999999" italic="true" />
id="CodeColor_JavascriptFunction" text="#000000" bold="true" />
id="CodeColor_JavascriptBracket" text="#000099" bold="true" />
id="CodeColor_JavascriptNumber" text="#FF0000" />
id="CodeColor_JavascriptClient" text="#990099" />
id="CodeColor_JavascriptNative" text="#009999" />
EXTENSION DE DREAMWEAVER CS4 72
Personnalisation du mode Code
A propos de la validation du code
Lorsque vous ouvrez un document en mode Code, Dreamweaver vérifie automatiquement la validité des balises,
attributs, propriétés ou valeurs CSS en fonction des navigateurs cibles spécifiés par l'utilisateur. Dreamweaver souligne
les erreurs détectées par une ligne ondulée de couleur rouge.
Dreamweaver dispose également d'une nouvelle fonctionnalité de vérification de la compatibilité avec les navigateurs
(BCC) qui recherche les combinaisons de codes HTML et CSS et peut provoquer des problèmes de rendu de
navigateur.
Les profils des navigateurs sont stockés dans le dossier Browser Profile du dossier Configuration de Dreamweaver.
Chaque profil de navigateur se pré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é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 été ajouté 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é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ès
fournissent une description de chacune de ces balises.
<css-support>
Description
Cette balise correspond au nœud racine d'un ensemble de balises property et value prises en charge par un
navigateur donné.
Attributs
Aucun.
Contenu
Balises property et value.
Contenant
Aucun.
Exemple
<css-support>
. . .
</css-support>
<property>
Description
Définit une propriété CSS prise en charge par un profil de navigateur.
EXTENSION DE DREAMWEAVER CS4 73
Personnalisation du mode Code
Attributs
name, names, supportlevel, message
•
name="nom_propriété" Nom de la propriété à prendre en charge.
•
names="nom_propriété, property_name,..." Liste, délimitée par des virgules, des noms de propriétés à prendre en
charge.
L'attribut names peut être considéré comme une forme abrégée. Par exemple, l'attribut names ci-dessous
correspond à une méthode abrégée de définition de l'attribut name qui suit :
<property names="foo,bar">
<value type="named" name="top"/>
<value type="named" name="bottom"/>
</property>
<property name="foo">
<value type="named" name="top"/>
<value type="named" name="bottom"/>
</property>
<property name="bar">
<value type="named" name="top"/>
<value type="named" name="bottom"/>
</property>
•
supportlevel="error", "warning", "info"ou "supported" Définit le niveau de prise en charge de la
propriété. Si aucune valeur n'est indiquée, la valeur attribuée est "supported". Si vous indiquez un niveau de prise
en charge différent de "supported" et que vous ne spécifiez pas l'attribut message, Dreamweaver utilise le message
par défaut, « La propriété CSS nom_propriété n'est pas prise en charge. »
•
message="chaîne_message" L'attribut message définit la chaîne du message affiché dans Dreamweaver lorsqu'il
détecte la propriété d'un document. La chaîne du message décrit les limites ou les contraintes susceptibles
d'apparaître en fonction de la valeur de la propriété.
Contenu
value
Contenant
css-support
Exemple
<property name="background-color" supportLevel="supported">
<value>
Description
Définit une liste de valeurs prises en charge par la propriété actuelle.
EXTENSION DE DREAMWEAVER CS4 74
Personnalisation du mode Code
Attributs
type, name, names, supportlevel, message
•
type="any", "named", "units", "color", "string" ou "function" Indique le type de valeur. Si vous
spécifiez "named", "units" ou "color", l'attribut name ou names doit spécifier les identifiants de valeur
correspondant à cet élément. La valeur "units" correspond à une valeur numérique, suivie de l'une des valeurs
d'unités spécifiées dans l'attribut name.
•
name="nom_valeur" Identificateur de valeur CSS. Les espaces et la ponctuation, à l'exception du tiret (-), sont
interdits. Nom de l'une des valeurs valides pour la propriété CSS nommée dans le nœud de propriété parent. Ce
nom peut désigner une valeur spécifique ou un spécificateur d'unité.
•
names="nom1, nom2, . . ."Spécifie une liste d'ID de valeur séparés par des virgules.
•
supportlevel="error", "warning", "info"ou "supported" Indique le niveau de prise en charge de cette
valeur dans le navigateur. Si aucune valeur n'est indiquée, la valeur attribuée est "supported".
•
message="chaîne_message" L'attribut message définit la chaîne du message affiché dans Dreamweaver lorsqu'il
détecte la valeur de propriété d'un document. Si vous ne spécifiez pas l'attribut message, Dreamweaver affiche la
chaîne de message suivante : « nom_valeur n'est pas prise en charge ».
Contenu
Aucun.
Contenant
property
Exemple
<property name="margin">
<value type="units" name="ex" supportlevel="warning"
message="The implementation of ex units is buggy in Safari 1.0."/>
<value type="units" names="%,em,px,in,cm,mm,pt,pc"/>
<value type="named" name="auto"/>
<value type="named" name="inherit"/>
</property>
Modification du formatage HTML par défaut
La catégorie Format de code de la boîte de dialogue Préférences permet de modifier les préférences générales de
formatage du code. L'éditeur de la bibliothèque de balises (Edition > Bibliothèques de balises) permet de modifier le
format de balises ou d'attributs spécifiques. Pour plus d'informations, voir Utilisation de Dreamweaver dans le menu
Aide de Dreamweaver.
Vous pouvez également modifier le formatage d'une balise en modifiant le fichier VTM correspondant à cette balise
(dans un sous-dossier du dossier Configuration Tag Libraries) ; il est toutefois préfé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épertoriés dans le fichier TagLibraries.vtm.
Remarque : Modifiez ce fichier dans un éditeur de texte et non dans Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 75
Personnalisation du mode Code
A propos du mode Fractionnement vertical
Le mode Fractionnement vertical permet l'affichage côte à côte des modes Code et Création ou Code et Mise en forme
du code. Les utilisateurs travaillant sur deux écrans peuvent utiliser cette fonctionnalité pour afficher le code sur un
écran tout en employant l'autre pour travailler en mode Création.
Le mode Fractionnement vertical permet à l'utilisateur :
• de choisir l'orientation des modes Code et Création (horizontale ou verticale) ;
• de basculer entre les orientations horizontale et verticale des modes Code et Création et Code fractionné.
Lorsque vous redémarrez Dreamweaver et que vous ouvrez ou créez un document, celui-ci s'affiche dans les modes
Code et Création selon la taille et l'orientation employées le plus récemment. La fonction
dreamweaver.setSplitViewOrientation() définit l'orientation et dreamweaver.setPrimaryView() définit le
mode d'affichage principal. Pour plus d'informations sur l'emploi de ces fonctions, voir « Fonctions du mode
Fractionnement vertical » dans le Guide des API de Dreamweaver.
A propos des fichiers apparentés
La fonctionnalité fichiers apparentés permet à l'utilisateur d'accéder aux fichiers auxiliaires et apparentés qui sont
associés au fichier sur lequel il travaille. Les fichiers apparentés peuvent être des fichiers CSS, de script, SSI (inclusion
côté serveur) ou XML.
Par exemple, si un fichier CSS est associé au fichier principal, cette fonctionnalité facilite l'affichage et la modification
de ce fichier CSS. L'utilisateur peut également visualiser le fichier principal tout en modifiant le fichier apparenté.
Fonctionnement des fichiers apparentés
Les fichiers apparentés facilitent les activités de modification de l'utilisateurs en l'aidant dans les tâches suivantes :
• L'utilisateur peut visualiser les fichiers apparentés et y accéder tout en affichant le fichier principal. Lorsque vous
affichez une page possédant des fichiers apparentés (par exemple un fichier CSS), vous pouvez voir les éléments
suivants :
• Page en mode Création d'un côté
• Fichier apparenté de l'autre côté
• La barre des fichiers apparentés contient les documents influant sur la génération du code HTML parent.
L'utilisateur peut voir le code HTML source, le code HTML généré et les documents enfants de premier niveau.
• La sélection d'un fichier apparenté dans la barre des fichiers apparentés permet à l'utilisateur d'accomplir les
opérations suivantes :
• Affichage et modification du fichier apparenté en mode Code
• Affichage de la page parente en mode Création
• La sélection de contenu en mode Création et l'apport de modifications dans le fichier apparenté ne fait pas
disparaître la sélection lorsque l'utilisateur actualise le mode Création.
• Si vous modifiez le code du fichier apparenté, vos modifications se répercutent dans le mode Création.
Si un fichier est introuvable, un message vous en informe dans une barre située en haut du cadre de la fenêtre vide.
EXTENSION DE DREAMWEAVER CS4 76
Personnalisation du mode Code
Terminologie des fichiers apparentés
Les termes suivants sont souvent utilisés en association avec les fichiers apparentés :
Terme
Description
Document de niveau
supérieur
Tout document ouvert par l'utilisateur.
Document parent
Tout document de niveau supérieur
rendu en mode Création.
Document enfant de
premier niveau
Document enfant de
niveau inférieur
Fichier non apparenté
Exemple
Tout document se situant un niveau en
dessous du document parent. Ces
documents influent sur la génération
du code HTML, à l'exception de CSS. Les
fichiers CSS peuvent en contenir
d'autres ; c'est ensemble qu'ils
déterminent les styles finalement
appliqués à la page.
Tout document se situant à plus de
deux niveaux sous le document parent.
Ces documents influent sur la
génération du code HTML.
Tout document n'influant pas sur la
génération de code HTML ou tout
fichier qu'un utilisateur ne modifie pas
activement.
•
HTML, dont .lbi, .dwt
•
CFML
•
PHP
•
Fichier de script spécifié par <SCRIPT
src="file.js">
•
Inclusion côté serveur
•
CSS externe
•
Ensembles de données XML et HTML Spry
•
Elément de bibliothèque
•
<iframe> - source distante
•
Balise d'objet
•
PHP dans PHP
•
DTD
•
Modèles
•
Fichiers d'image
•
Fichiers multimédias
•
Fichiers liés à l'extérieur par une balise <a>
Les fichiers apparentés suivants sont pris en charge :
Type
Description
Niveau d'imbrication
Script côté client
Tous les langages
1 (l'imbrication du script est impossible)
EXTENSION DE DREAMWEAVER CS4 77
Personnalisation du mode Code
Type
Description
Niveau d'imbrication
Inclusions côté
serveur
Lorsque toutes les conditions d'extension
suivantes sont vraies :
1
•
Modèle de serveur défini
•
Instruction SSI (c.-à-d. modèle) définie
•
doctype DW défini
Exception : Les instructions de fichier inclus
de style Apache (<!--#include ... ->) dans les documents HTML sont
reconnues.
Ensemble de
données Spry
CSS
1 (l'imbrication du script est impossible)
•
Tout le code CSS externe pour tous les
types de médias
•
DTSS
Infini
API des fichiers apparentés
Vous pouvez personnaliser le menu des fichiers apparentés afin d'afficher les éléments suivants :
• Nom du fichier apparenté
• Code HTML source et code source généré
La fonction dreamweaver.openRelatedFile() affiche le fichier apparenté en mode Code et la fonction
dreamweaver.getActiveRelatedFilePath() affiche le chemin d'accès du fichier apparenté actuellement ouvert.
Pour plus d'informations sur l'emploi de ces API, voir « Fonctions des fichiers apparentés » dans le Guide des API de
Dreamweaver.
A propos de l'affichage en direct
La fonctionnalité d'affichage en direct facilite la prévisualisation de vos pages Web de la façon dont elles s'afficheraient
dans un navigateur, sans quitter Dreamweaver. L'utilisateur peut conserver un accès direct au code afin de le modifier.
Toute modification apportée au code est visible instantanément. Cette fonctionnalité permet à l'utilisateur de voir
instantanément la page Web modifiée. Si l'utilisateur modifie des fichiers CSS, l'état actuel du fichier est conservé, mais
les modifications CSS sont appliquées. L'utilisateur peut également interagir avec la page et voir des effets JavaScript
tels que le survol sans devoir passer de Dreamweaver à un navigateur Web.
L'affichage en direct emploie le plug-in système Flash (%SYSTEM%/Macromed/Flash, /Library/Internet Plug-Ins/). Il
peut arriver qu'il se replie sur une version Firefox si la version systè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é en direct, même si la source est générée à partir d'un emplacement différent.
L'utilisateur peut ajouter ou supprimer des feuilles de style. Toutefois, les autres modifications au code CSS intégré ou
au code CSS dans la balise <head> sont bloquées. Les règles dans le panneau CSS qui ne sont pas modifiables sont
marquées comme étant en lecture seule.
Vous pouvez utiliser l'API de Dreamweaver aux fins suivantes :
• Obtention et définition du mode Création
EXTENSION DE DREAMWEAVER CS4 78
Personnalisation du mode Code
• Obtention et définition du mode En direct à l'aide du serveur
• Obtention des valeurs par défaut du mode En direct
• Obtention et définition des éléments dépendants du mode En direct
• Consultation des paramètres du mode En direct
Pour plus d'informations sur ces API, voir « Fonctions du mode En direct » dans le Guide des API de Dreamweaver.
Exemple simple du mode En direct
Dans cet exemple, vous allez utiliser Dreamweaver pour créer une commande qui crée un navigateur simple lorsque
l'utilisateur clique sur cette commande dans le menu Commandes. Pour obtenir des informations plus spécifiques sur
la création de commandes avant d'appliquer cet exemple, consultez la section « Commandes » à la page 139 à la page
142. Dans Dreamweaver, ouvrez un nouveau fichier HTML de base (il s'agit de votre fichier de définition de
commande) et enregistrez-le sous le nom liveviewexample.htm. Votre fichier de définition de commande se présente
comme suit :
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0// dialog"> <html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Test</title>
<script type="text/javascript">
var browserLoad = function(e)
{
var uri = document.getElementById("uri");
uri.value = e.currentBrowserLocation;
}
var promptToNavigate = function (e)
{
if( ! confirm(" Is it ok to go from \n" + e.currentBrowserLocation + " to page \n " +
e.requestedBrowserLocation ) )
{
e.preventDefault();
}
}
function initUI()
{
var browser = document.getElementById("browser");
browser.addEventListener("BrowserControlBeforeNavigation",
promptToNavigate, true);
browser.addEventListener("BrowserControlLoad", browserLoad, true);
browser.openURL("http://www.adobe.com");
}
function loadUri()
{
var uri = document.getElementById("uri");
var browser = document.getElementById("browser");
browser.openURL(uri.value);
}
EXTENSION DE DREAMWEAVER CS4 79
Personnalisation du mode Code
function showSource(){
var browser = document.getElementById("browser");
alert(browser.getWindowObj().document.documentElement.outerHTML);
}
function commandButtons() {
return new Array( "Close", "window.close()",
"Load URI", "loadUri()",
"Show Source", "showSource()"
);
}
</script>
</head>
<body onLoad="initUI()">
<form>
<p>
<label>
<input id="uri" type="text" style="width:500px">
</label>
</p> <mm:browsercontrol id="browser" style="width:500px; height:300px;"/> </form> </body>
</html>
80
Chapitre 4 : Extension de Dreamweaver
L'ensemble complet d'outils proposés par Dreamweaver vous permet d'étendre ou de personnaliser ses fonctionnalités.
Lorsque vous créez une extension Dreamweaver, suivez la procédure décrite dans la section « Création d'une
extension » à la page 2.
Les fonctionnalités suivantes de Dreamweaver permettent de créer des extensions :
• Analyseur HTML (également baptisé système de rendu) permet de créer des interfaces utilisateur pour les
extensions. L'analyseur emploie des champs de formulaire, des éléments à positionnement absolu, des images et
d'autres éléments HTML. Dreamweaver dispose de son propre analyseur HTML.
• Une arborescence de dossiers qui organise et stocke les fichiers qui implémentent et configurent les éléments et
extensions de Dreamweaver.
• Une série d'API (interfaces de programmation d'applications), qui donnent accès à la fonctionnalité de
Dreamweaver au moyen du langage JavaScript.
• Un interpréteur JavaScript, qui exécute les instructions de code JavaScript dans les fichiers d'extension.
Dreamweaver utilise l'interpréteur Netscape JavaScript version 1.5. Pour plus d'informations sur les modifications
apportées à cette version de l'interpréteur par rapport aux versions antérieures, voir « Traitement de JavaScript par
Dreamweaver dans les extensions » à la page 85.
Types d'extensions Dreamweaver
La liste suivante décrit les types d'extensions de Dreamweaver :
Insertion, objet de la barre Les extensions permettent de modifier la barre Insertion. Un objet sert généralement à
automatiser l'insertion de code dans un document. Il peut également contenir un formulaire qui regroupe les données
fournies par les utilisateurs et un code JavaScript qui traite ces données. Les fichiers d'objet résident dans le dossier
Configuration/Objects.
Commande Les extensions de commande peuvent se charger de la plupart des tâches, avec ou sans l'intervention de
l'utilisateur. Les fichiers de commandes sont généralement démarrés à partir du menu Commandes ; ils peuvent l'être
également depuis d'autres extensions. Les fichiers de commandes résident dans le dossier Configuration/Commands.
Commande de menu Les extensions de commande de menu développent l'API de commandes pour effectuer des
tâches relatives à l'appel d'une commande depuis un menu. Les API des commandes de menu vous permettent
également de créer un sous-menu dynamique.
Barre d'outils Les extensions de barre d'outils permettent d'ajouter des éléments aux barres d'outils existantes ou de
cré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éfaut. Les fichiers de barre d'outils résident dans le dossier Configuration/Toolbars.
Rapport Les extensions de rapport peuvent ajouter des rapports personnalisés sur le site ou modifier le jeu de rapports
prédéfinis fournis avec Dreamweaver. Vous pouvez également utiliser l'API de fenêtre Résultats pour créer un rapport
autonome.
Bibliothèque et éditeur de balises Les extensions de bibliothèque et d'éditeur de balises fonctionnent avec les fichiers
de bibliothèque de balises associés. Les extensions de bibliothèque et d'éditeur de balises permettent de modifier les
attributs des boîtes de dialogue de balises existantes, de créer de nouvelles boîtes de dialogue de balises et d'ajouter des
EXTENSION DE DREAMWEAVER CS4 81
Extension de Dreamweaver
balises à la bibliothèque de balises. Les fichiers d'extension d'éditeur et de bibliothèques de balises résident dans le
dossier Configuration/TagLibraries.
Inspecteur Propriétés Les extensions d'inspecteur Propriétés apparaissent dans le panneau d'inspecteur Propriétés. La
plupart des inspecteurs de Dreamweaver relèvent du code principal du produit et ne sont donc pas modifiables. En
revanche, les fichiers d'inspecteurs Propriétés personnalisés peuvent remplacer les interfaces d'inspecteurs Propriétés
intégrées de Dreamweaver ou en créer afin d'inspecter les balises personnalisées. Les fichiers d'inspecteur résident dans
le dossier Configuration/Inspectors.
Panneau flottant Les extensions de panneau flottant permettent d'insérer des panneaux flottants dans l'interface
utilisateur de Dreamweaver. Les panneaux flottants peuvent interagir avec la sélection, le document ou l'action en
cours. Ils peuvent également afficher des informations utiles. Les fichiers de panneau ré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écute une tâche spécifique en réponse à un événement lorsque le document est
affiché dans un navigateur. Les extensions de comportement s'affichent dans le menu plus (+) du panneau
Comportements de Dreamweaver. Les fichiers de comportement résident dans le dossier
Configuration/Behaviors/Actions.
Comportements de serveur Les extensions de comportement de serveur permettent d'ajouter des blocs de code côté
serveur (ASP ou ColdFusion) au document. Le code côté serveur exécute des tâches sur le serveur lorsque le document
est affiché 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ésident dans le
dossier Configuration/ServerBehaviors.
Source de données Les extensions de source de données vous permettent d'établir une connexion avec des données
dynamiques stockées dans une base de données. Les extensions de source de données apparaissent dans le menu
plus (+) du panneau Liaisons. Les extensions de source de données résident dans le dossier
Configuration/DataSources.
Format de serveur Les extensions de format de serveur vous permettent de définir la mise en forme des donné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ésigner quelques-unes des stratégies d'encapsulation les
plus populaires et les plus modernes, comme les composants ColdFusion (CFC).
Modèle de serveur Les extensions de modèle de serveur permettent de prendre en charge de nouveaux modèles de
serveurs. Dreamweaver prend en charge les modèles de serveurs les plus courants (ASP, JSP, ColdFusion, PHP et
ASP.NET). Les extensions de modèle de serveur sont nécessaires uniquement pour les solutions de serveur
personnalisées, des langues différentes ou un serveur personnalisé. Les fichiers de modèle de serveur résident dans le
dossier Configuration/ServerModels.
Traducteur de données Les extensions de traducteur de données convertissent le code non HTML en code HTML qui
s'affiche ensuite dans le mode Création de la fenêtre de document. Ces extensions bloquent également le code
non HTML pour empêcher toute analyse par Dreamweaver. Les fichiers de traducteur résident dans le dossier
Configuration/Translators.
Autres méthodes d'extension pour Dreamweaver
Vous pouvez également étendre les éléments suivants de Dreamweaver pour développer ses capacités ou l'adapter à
votre utilisation.
Types de documents Les types de documents définissent le fonctionnement de Dreamweaver avec différents modèles
de serveur. Les informations relatives aux types de documents pour les modèles de serveurs résident dans le dossier
EXTENSION DE DREAMWEAVER CS4 82
Extension de Dreamweaver
Configuration/DocumentTypes. Pour plus d'informations, voir « Types de documents extensibles dans
Dreamweaver » à la page 14.
Fragments de code Les fragments de code sont des blocs de code réutilisables qui sont stocké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éer de nouveaux fichiers de fragment de code et les installer dans le dossier Snippets afin qu'ils soient
disponibles.
Indicateurs de code Les indicateurs de code sont des menus qui vous évitent de saisir tout le texte en proposant une
liste de chaînes susceptibles de compléter la chaîne que vous tapez. Si une des chaînes du menu correspond à celle que
vous avez commencé à entrer, vous pouvez la sélectionner pour l'insérer à la place de la chaîne dont vous aviez
commencé la saisie. Des menus d'indicateurs de code sont dé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éfinies.
Menus Les menus sont dé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 « Menus et commandes de menu » à la page 150.
Extensions et dossiers de configuration
Les dossiers et les fichiers stockés dans le dossier Configuration de Dreamweaver contiennent les extensions livrées
avec Dreamweaver. Lorsque vous rédigez une extension, vous devez enregistrer les fichiers dans le dossier approprié
afin que Dreamweaver puisse les reconnaître. Ainsi, si vous créez une extension d'inspecteur Propriétés, vous
enregistrez les fichiers dans le dossier Configuration/Inspectors. Si vous téléchargez puis installez une extension depuis
le site Web de Adobe Exchange (www.adobe.com/go/exchange_fr), Extension Manager enregistre automatiquement
les fichiers d'extension dans les dossiers appropriés.
Vous pouvez utiliser les fichiers du dossier Configuration de Dreamweaver comme exemple ; notez toutefois que ces
fichiers sont géné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 à aucun type d'extension particulier. Il s'agit d'un lieu de stockage
central pour les fonctions utilitaires, les classes et les images utilisées par plusieurs extensions. Les fichiers résidant dans
le dossier Configuration/Shared/Common sont censés être utiles à un large éventail d'extensions. Ces fichiers
constituent à la fois de bons exemples des techniques JavaScript et des utilitaires pratiques. Recherchez en priorité dans
ces fichiers les fonctions exécutant des tâches spécifiques, par exemple créer une référence DOM (modèle d'objet de
document) valide pour un objet, vérifier si la sélection active se trouve à l'intérieur d'une balise particulière, ignorer les
caractères dans les chaînes, etc. Il est préférable de créer un sous-dossier distinct dans le dossier
Configuration/Shared/Common, comme indiqué ci-après, lorsque vous créez des fichiers communs afin de les
stocker.
EXTENSION DE DREAMWEAVER CS4 83
Extension de Dreamweaver
Structure de dossier Configuration/Shared/Common/Scripts
Pour plus d'informations sur le dossier Shared, voir « Dossier Shared » à la page 384.
Dossiers de configuration multi-utilisateur
Pour les systèmes d'exploitation multi-utilisateur Windows XP, Windows 2000 et Macintosh OS X, Dreamweaver crée
un dossier de configuration distinct pour chaque utilisateur, en complément du dossier Configuration de
Dreamweaver. Chaque fois que Dreamweaver ou qu'une extension JavaScript écrit dans le dossier Configuration,
Dreamweaver écrit automatiquement dans le dossier de configuration utilisateur. Ceci permet à chaque utilisateur de
définir ses paramètres de personnalisation de Dreamweaver sans modifier les paramètres d'autres utilisateurs. Pour
plus d'informations, voir « Personnalisation de Dreamweaver dans un environnement multi-utilisateur » à la page 11
et « API d'accès aux fichiers et de configuration multi-utilisateur » dans le Guide des API de Dreamweaver.
Exécution des scripts au démarrage ou à la fermeture
Si vous placez un fichier de commandes dans le dossier Configuration/Startup, la commande s'exécute au démarrage
de Dreamweaver. Les commandes de dé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équent, vous pouvez utiliser les commandes de démarrage pour modifier le fichier menus.xml ou
d'autres fichiers d'extension. Vous pouvez également afficher des avertissements, inviter l'utilisateur à donner des
informations ou appeler la fonction dreamweaver.runCommand(). Toutefois, vous ne pouvez pas appeler une
commande qui nécessite un DOM (Document Object Model) valide à partir du dossier Startup. Pour plus
d'informations sur le DOM Dreamweaver, voir « Modèle d'objet de document (DOM) Dreamweaver » à la page 101.
De même, si vous placez un fichier de commandes dans le dossier Configuration/Shutdown, la commande s'exécute à
l'arrêt de Dreamweaver. A partir des commandes de fermeture, vous pouvez appeler la fonction
dreamweaver.runCommand(), afficher des avertissements ou inviter l'utilisateur à entrer des informations, mais vous
ne pouvez pas arrêter le processus de fermeture.
Pour plus d'informations sur les commandes, voir « Commandes » à la page 139. Pour plus d'informations sur la
fonction dreamweaver.runCommand(), voir le Guide des API de Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 84
Extension de Dreamweaver
Rechargement d'extensions
Si vous modifiez une extension pendant que vous utilisez Dreamweaver, vous pouvez la charger à nouveau pour
appliquer la modification.
Rechargement d'extensions
1 Cliquez, tout en maintenant la touche CTRL (Windows) ou Option (Macintosh) enfoncée, sur le menu Catégories
de la barre de titres du panneau Insertion.
Remarque : Cette option n'est pas visible en mode Onglets. Si vous êtes en mode Onglets, cliquez à l'aide du bouton
droit de la souris sur le menu Panneau (coin supérieur gauche). Choisissez Afficher comme un menu, puis cliquez tout
en maintenant la touche CTRL enfoncée sur Commun afin d'obtenir le menu contenant la commande Recharger
extensions.
2 Choisissez Recharger extensions.
Remarque : Dans le cadre d'un système d'exploitation multi-utilisateur, vous devez modifier les copies des fichiers de
configuration contenues dans votre dossier de configuration utilisateur plutôt que les fichiers Configuration principaux.
Pour plus d'informations, voir « Extensions et dossiers de configuration » à la page 82.
API d'extension
Les API d'extension vous fournissent les fonctions appelées par Dreamweaver pour implémenter chaque type
d'extension. Le corps de ces fonctions doit être rédigé conformément aux descriptions de chaque type d'extension. Il
faut également spécifier les valeurs renvoyées attendues par Dreamweaver.
Si vous êtes développeur et souhaitez travailler directement en langage de programmation C, vous disposez d'une API
d'extensibilité C qui vous permet de créer des DLL (bibliothèques de liens dynamiques). La fonctionnalité fournie dans
ces API enveloppe vos DLL C de code JavaScript afin que votre extension puisse s'exécuter en toute transparence dans
Dreamweaver.
La documentation des API d'extension souligne ce qu'apporte chaque fonction quand Dreamweaver l'appelle et les
valeurs renvoyé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âches spécifiques dans vos extensions.
EXTENSION DE DREAMWEAVER CS4 85
Extension de Dreamweaver
Traitement de JavaScript par Dreamweaver dans les extensions
Dreamweaver vérifie le dossier Configuration/type_extension au démarrage. Si Dreamweaver y détecte un fichier
d'extension, il traite le code JavaScript selon la procédure suivante :
• Compilation de tous les éléments compris entre les balises d'ouverture et de fermeture SCRIPT
• Exécution du code situé dans les balises SCRIPT ne faisant pas partie d'une déclaration de fonction
Remarque : Cette étape s'impose pendant le démarrage dans la mesure où certaines extensions peuvent nécessiter
l'initialisation des variables globales.
Dans le cas des fichiers JavaScript externes spécifiés dans les attributs SRC des balises SCRIPT, Dreamweaver se charge
des opérations suivantes :
• lecture du fichier ;
• compilation du code ;
• exécution des procédures.
Remarque : Si du code JavaScript de votre fichier d'extension contient la chaîne ", l'interpréteur JavaScript la lit comme
une balise script de fin et signale une erreur de littéral de chaîne non terminé. Pour éviter ce problème, découpez la
chaîne en plusieurs morceaux reliés entre eux de la façon suivante : "<' + '/SCRIPT>".
Dreamweaver exécute le code contenu dans le gestionnaire d'événements onLoad (s'il est pré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écute le code contenu dans le gestionnaire d'évé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ées
• Inspecteur Propriétés
• Panneau flottant
Pour toutes les extensions, Dreamweaver exécute le code contenu dans d'autres gestionnaires d'événements (par
exemple, onBlur="alert('Ceci est un champ obligatoire.')") lorsque l'utilisateur utilise les champs de
formulaire auxquels ils sont rattachés.
Dreamweaver prend en charge l'utilisation de gestionnaires d'événement dans des liens. Les gestionnaires
d'événements des liens doivent respecter la syntaxe suivante :
<a href="#" onMouseDown=alert('hi')>link text</a>
Les plug-ins (réglé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ôles Microsoft ActiveX ne sont pas pris en charge dans les extensions.
Affichage de l'aide
La fonction displayHelp(), qui fait partie de nombreuses API d'extension, entraîne les deux actions suivantes de
Dreamweaver lorsque vous l'incluez dans votre extension :
• Ajout d'un bouton d'aide à l'interface ;
• Appel de displayHelp() lorsque l'utilisateur clique sur le bouton d'aide.
EXTENSION DE DREAMWEAVER CS4 86
Extension de Dreamweaver
Vous devez rédiger le corps de la fonction displayHelp() pour afficher l'aide. La façon dont vous codez la fonction
displayHelp() détermine l'affichage de l'aide par votre extension. Vous pouvez demander à la fonction
dreamweaver.browseDocument() d'ouvrir un fichier dans un navigateur ou de définir une méthode personnalisée
d'affichage de l'aide, comme l'affichage de messages sur un autre élément à positionnement absolu dans des fenê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() + "ExtensionsHelp/myExtHelp.htm";
dw.browseDocument(myHelpFile);
}
Localisation d'une extension
Utilisez les techniques suivantes pour faciliter la traduction de vos extensions dans d'autres langues.
• Séparez les extensions entre fichiers HTML et JavaScript. Les fichiers HTML peuvent être dupliqués et localisés,
alors que les fichiers JavaScript ne peuvent pas être localisés.
• Ne définissez pas de chaînes dans les fichiers JavaScript (vérifiez les alertes et le code de l'interface utilisateur). Vous
devez extraire toutes les chaînes localisables en fichiers XML séparés dans le dossier Configuration/Strings de
Dreamweaver.
• N'insérez pas de code JavaScript dans les fichiers HTML excepté pour les gestionnaires d'événement nécessaires.
Ceci évite d'avoir à réparer plusieurs fois une même erreur pour chaque traduction une fois les fichiers HTML
répliqués et traduits dans d'autres langues.
Fichiers de chaîne XML
Conservez toutes les chaînes dans des fichiers XML dans le dossier Configuration/Strings de Dreamweaver. Si vous
installez plusieurs fichiers d'extension liés, cela vous permet de partager toutes les chaînes dans un seul fichier XML.
Le cas échéant, cela vous permet également de faire référence à une même chaîne depuis des extensions C++ et
JavaScript.
Vous pouvez créer un fichier nommé myExtensionStrings.xml. L'exemple suivant montre le format du fichier :
<strings>
<!-- errors for feature X -->
<string id="featureX/subProblemY" value="There was a with X when you did Y. Try not to
do Y!"/>
<string id="featureX/subProblemZ" value="There was another problem with X, regarding Z.
Don't ever do Z!"/>
</strings>
Vos fichiers JavaScript peuvent maintenant se référer à ces chaînes traduisibles en appelant la fonction
dw.loadString(), ainsi que l'illustre l'exemple suivant :
EXTENSION DE DREAMWEAVER CS4 87
Extension de Dreamweaver
function initializeUI()
{
...
if (problemYhasOccured)
{
alert(dw.loadString("featureX/subProblemY");
}
}
Vous pouvez utiliser des barres obliques (/), mais pas d'espaces dans vos identificateurs de chaînes. Les barres obliques
vous permettent d'établir une hiérarchie et d'inclure l'ensemble des chaînes dans un fichier XML unique.
Remarque : Les fichiers commençant par cc dans le dossier Configuration/Strings sont des fichiers Contribute. C'est le
cas, par exemple, du fichier ccSiteStrings.xml.
Chaînes localisables avec valeurs intégrées
Certaines chaînes d'affichage comportent des valeurs intégrées. Vous pouvez utiliser la fonction errMsg() pour
afficher ces chaînes. La fonction errMsg(), similaire à 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ères de l'espace réservé)
pour indiquer l'emplacement où les valeurs doivent apparaître dans la chaîne, puis transmettez la chaîne et les variables
(en tant qu'arguments) à errMsg(). Par exemple :
<string id="featureX/fileNotFoundInFolder" value="File %s could not be found in folder %s."/>
L'exemple suivant indique comment la chaîne, ainsi que toute variable à imbriquer, est transmise à la fonction
alert().
if (fileMissing)
{
alert( errMsg(dw.loadString("featureX/fileNotFoundInFolder"),fileName,
folderName) );
}
Utilisation d'Extension Manager
Si vous créez des extensions destinées à d'autres utilisateurs, il convient de les conditionner conformément aux
indications disponibles sur le site Web d'Adobe Exchange (www.adobe.com/go/exchange_fr), sous la rubrique Help >
How to Create an Extension (Aide, Comment créer une extension). Après avoir rédigé puis testé une extension dans
Extension Manager, sélectionnez Fichier > Empaqueter une extension. Une fois l'extension conditionnée, vous pouvez
l'envoyer sur Exchange à partir d'Extension Manager ; pour cela, sélectionnez Fichier > Envoyer une extension.
Adobe Extension Manager est livré avec Dreamweaver. Vous trouverez des détails sur son utilisation dans ses fichiers
d'aide ou sur le site Web d'Adobe Exchange.
88
Chapitre 5 : Interfaces utilisateur destinées
aux extensions
La plupart des extensions sont conçues pour recevoir des informations de l'utilisateur par le biais d'une interface
utilisateur (UI). Ainsi, si vous créez une extension d'inspecteur Propriétés associée à la balise marquee, vous devez
permettre à l'utilisateur de spécifier des attributs tels que la direction et la hauteur. Si vous envisagez de demander la
certification Adobe pour votre extension, veillez à 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éativité, mais d'assurer le bon fonctionnement des extensions certifiées dans l'interface utilisateur
d'Adobe Dreamweaver et de vérifier que la conception de l'interface utilisateur de l'extension n'entrave pas sa
fonctionnalité.
Instructions de conception d'une interface utilisateur
d'extension
En général, une extension est créée pour effectuer une tâche que l'utilisateur rencontre fréquemment. Certaines parties
de la tâche étant répétitives, une extension permet de les automatiser. Plusieurs étapes de cette tâche ou attributs
spécifiques du code traité par l'extension peuvent être modifiés. Pour recevoir les entrées utilisateur de ces valeurs
variables, vous devez créer une interface utilisateur.
Vous pouvez par exemple créer une extension de mise à jour d'un catalogue de vente sur le Web. Les utilisateurs
doivent régulièrement modifier les valeurs des sources d'image, des descriptions d'articles et des prix. Bien que les
valeurs évoluent, les procédures d'extraction de ces dernières et de mise en forme des informations à 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ées des sources d'image, des descriptions d'articles et des prix. Une
extension plus complexe peut extraire régulièrement ces valeurs d'une base de données.
L'interface utilisateur de votre extension a pour objet de recevoir les informations entrées par l'utilisateur. Ces
informations gèrent les aspects variables d'une tâche répétitive exécutés par l'extension. Dreamweaver prend en charge
les élé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ésenter sous la forme d'un simple fichier HTML contenant un tableau à deux colonnes, composé
de textes descriptifs et de champs de saisie de formulaire.
Lorsque vous concevez une extension, vous devez déterminer les variables requises et les éléments de formulaire
appropriés à ces dernières.
Veillez à tenir compte des observations suivantes pendant la conception d'une interface utilisateur d'extension :
• Pour attribuer un nom à votre extension, indiquez-le dans la balise title de votre fichier HTML. Dreamweaver
affiche ce nom dans la barre de titre Extension.
• Alignez à droite les étiquettes de texte dans la partie gauche de l'interface utilisateur, et alignez à gauche les zones
de texte dans la partie droite. Cette disposition permet à l'utilisateur de repérer plus facilement le début d'une zone
de texte. La zone de texte peut être suivie d'un texte concis, par exemple une explication ou une unité de mesure.
• Alignez à gauche le libellé des cases à cocher et des boutons radio dans la partie droite de l'interface utilisateur.
EXTENSION DE DREAMWEAVER CS4 89
Interfaces utilisateur destinées aux extensions
• Dans le cas de code lisible, attribuez un nom logique aux zones de texte. Si vous créez votre interface utilisateur
d'extension à l'aide de Dreamweaver, vous pouvez utiliser l'inspecteur Propriétés ou Quick Tag Editor pour
nommer les champs.
Le scénario typique consiste, une fois l'interface utilisateur créée, à vérifier que le code de l'extension exécute
correctement les tâches suivantes impliquant l'interface :
• Récupération des valeurs des zones de texte
• Définition des valeurs par défaut des zones de texte ou collecte des valeurs à partir de la sélection
• Application des modifications au document de l'utilisateur
Commande de rendu HTML de Dreamweaver
Jusqu'à la version 4, Dreamweaver restituait plus d'espace autour des commandes de formulaire que Microsoft Internet
Explorer et Netscape Navigator. Dreamweaver ayant recours à 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énéficier des améliorations du procédé de rendu, il convient d'utiliser l'une des trois
nouvelles instructions DOCTYPE dans les fichiers d'extension, comme indiqué dans les exemples suivants :
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//floater">
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//pi">
En règle générale, les instructions DOCTYPE doivent figurer sur la première ligne d'un document. Toutefois, pour éviter
des conflits avec des directives spécifiques aux extensions, les instructions et directives DOCTYPE peuvent désormais
être placées dans n'importe quel ordre, mais elles doivent figurer avant la balise HTML d'ouverture. Dans les versions
précédentes, les directives spécifiques aux extensions devaient se trouver sur la première ligne d'un fichier. Par
exemple, le commentaire en haut d'un fichier d'inspecteur Propriétés, ou la directive MENU-LOCATION=NONE dans une
commande.
La nouvelle instruction DOCTYPE permet d'afficher vos extensions dans le mode Création de Dreamweaver. Vous
pouvez les voir telles qu'elles apparaîtront lorsqu'un utilisateur les affichera.
Vous disposez de trois exemples d'utilisation du cas dialog dans les fichiers suivants, enregistrés dans le dossier
Configuration/Commands : CFLoginWizard.htm, TeamAdminDlgDates.html et TeamAdminDlgDays.html.
Les exemples suivants montrent l'inspecteur Propriétés de base sans l'instruction DOCTYPE, qui améliore le rendu des
commandes de formulaire, puis avec l'instruction DOCTYPE.
EXTENSION DE DREAMWEAVER CS4 90
Interfaces utilisateur destinées aux extensions
Commandes d'interface utilisateur personnalisées dans
les extensions
Outre les éléments de formulaire HTML standard, Dreamweaver prend en charge des commandes personnalisées qui
facilitent la création d'interfaces flexibles et professionnelles.
Listes de sélection modifiables
Les listes de sélection modifiables (également appelées des zones de liste modifiables) permettent d'associer la
fonctionnalité d'une liste à celle d'une zone de texte.
Nombre d'interfaces utilisateur d'extension sont constituées de menus déroulants définis à l'aide de la balise select.
Dans Dreamweaver, vous pouvez autoriser la modification de ces menus dans les extensions en ajoutant l'instruction
editable="true" à la balise select. Pour définir une valeur par défaut, il convient de définir l'attribut editText ainsi
que la valeur que vous voulez voir apparaître dans la liste de sélection.
L'exemple suivant illustre les paramètres d'une liste de sélection modifiable :
<select name="travelOptions" style="width:250px" editable="true" editText="other
(please specify)">
<option value="plane">plane</option>
<option value="car">car</option>
<option value="bus">bus</option>
</select>
Lorsque vous utilisez des listes de sélection dans vos extensions, vérifiez la présence d'un attribut et, le cas échéant, sa
valeur. En l'absence d'une valeur, la liste de sélection renvoie la valeur par défaut false, laquelle indique que la liste de
sélection n'est pas modifiable.
Tout comme les listes de sélection standard, non modifiables, les listes de sélection modifiables possèdent une
propriété selectedIndex (voir « Objets, propriétés et méthodes du DOM Dreamweaver » à la page 102). Cette
propriété renvoie la valeur -1 lorsque la zone de texte est sélectionnée.
Pour lire la valeur d'une zone de texte modifiable active dans une extension, il suffit de lire la valeur de la
propriété editText. La propriété editText renvoie la chaîne que l'utilisateur a entrée dans la zone de texte modifiable
ou la valeur de l'attribut editText. Si aucun texte n'a été entré et si aucune valeur n'a été précisée pour editText, elle
renvoie une chaîne vide.
Dreamweaver ajoute les attributs personnalisés suivants à la balise select afin de contrôler les menus déroulants
modifiables :
Nom d'attribut
Description
Valeurs admises
editable
Déclare que le menu déroulant contient une zone de
texte modifiable.
Une valeur booléenne true ou
Conserve ou définit le texte dans une zone de texte
modifiable.
Chaîne d'une valeur quelconque
editText
false
Remarque : Des listes de sélection modifiables sont disponibles dans Dreamweaver.
L'exemple suivant crée une extension de commande contenant une liste de sélection modifiable à l'aide de fonctions
JavaScript standard :
EXTENSION DE DREAMWEAVER CS4 91
Interfaces utilisateur destinées aux extensions
Création de l'exemple
1 Créez un fichier vide dans un éditeur de texte.
2 Entrez le code suivant :
<html>
<head>
<title>Editable Dropdown Test</title>
<script language="javascript">
function getAlert()
{
var i=document.myForm.mySelect.selectedIndex;
if (i>=0)
{
alert("Selected index: " + i + "\n" + "Selected text " +
document.myForm.mySelect.options[i].text);
}
else
{
alert("Nothing is selected" + "\n" + "or you entered a value");
}
}
function commandButtons()
{
return new Array("OK", "getAlert()", "Cancel", "window.close()");
}
</script>
</head>
<body>
<div name="test">
<form name="myForm">
<table>
<tr>
<td colspan="2">
<h4>Select your favorite</h4>
</td>
</tr>
<tr>
<td>Sport:</td>
<td>
<select name="mySelect" editable="true" style="width:150px"
editText="Editable Text">
<option> Baseball</option>
<option> Football </option>
<option> Soccer </option>
</select>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
3 Enregistrez le fichier sous le nom EditableSelectTest.htm dans le dossier Dreamweaver Configuration/Commands.
EXTENSION DE DREAMWEAVER CS4 92
Interfaces utilisateur destinées aux extensions
Test de l'exemple
1 Redémarrez Dreamweaver.
2 Choisissez Commandes > EditableSelectTest.
Lorsque vous sé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 élément n'est sélectionné.
Commandes de base de données
Les commandes de base de données simplifient l'affichage des hiérarchies et champs de données.
Dreamweaver vous permet d'étendre la balise HTML select afin de créer une commande d'arborescence de base de
données. Vous pouvez également ajouter une commande de grille de variables. La commande d'arborescence de base
de données affiche le schéma des bases de données et la commande de grille de variables affiche les informations
tabulaires.
La figure suivante présente une boîte de dialogue Jeu d'enregistrements avancée utilisant une commande
d'arborescence de base de données et une commande de grille de variables :
Ajout d'une commande d'arborescence de base de données
La commande d'arborescence de base de données possède les attributs suivants :
Nom d'attribut
Description
name
Nom de la commande d'arborescence de base de données
control.style
Largeur et hauteur mesurées en pixels.
type
Type de commande.
connection
Nom de la connexion à la base de données définie dans le Gestionnaire de
connexions ; si aucun nom n'est spécifié, la commande est vide.
noexpandbuttons
Lorsque cet attribut est spécifié, la commande d'arborescence ne dessine ni les
indicateurs de développement (Plus, +) ou de réduction (Moins, -), ni les flèches
correspondantes sur un ordinateur Macintosh. Cet attribut est très utile pour dessiner
des commandes de liste à plusieurs colonnes.
showheaders
Lorsque cet attribut est défini, la commande d'arborescence affiche un en-tête en
haut, recensant le nom de chaque colonne.
Toutes les balises d'options placées dans la balise select sont ignorées.
EXTENSION DE DREAMWEAVER CS4 93
Interfaces utilisateur destinées aux extensions
Pour ajouter une commande d'arborescence à une boîte de dialogue, vous pouvez utiliser l'échantillon de code suivant
en effectuant les substitutions appropriées pour les variables citées :
<select name="DBTree" style="width:400px;height:110px" ¬
type="mmdatabasetree" connection="connectionName" noexpandbuttons showHeaders></select>
La modification de l'attribut connection vous permet de récupérer les données sélectionné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ède les attributs suivants :
Nom d'attribut
Description
name
Nom de la commande de grille de variables.
Style
Largeur de la colonne, exprimée en pixels.
type
Type de commande.
colonnes
Chaque colonne doit disposer d'un nom, séparée par une virgule.
columnWidth
Largeur de chaque colonne, séparée par une virgule. Les colonnes sont de largeur
égale si aucune largeur n'est spécifiée.
L'exemple suivant ajoute une commande de grille de variables à une boîte de dialogue :
<select name="ParamList" style="width:515px;" ¬
type="mmparameterlist columns"="Name,SQL Data ¬
Type,Direction,Default Value,Run-time Value" size=6></select>
L'exemple suivant crée une commande de grille de variables de 500 pixels de large et comportant cinq colonnes de
largeur variable :
<select
name="ParamList"
style="width:500px;"
type="mmparameterlist"
columns="Name,SQL Data Type,Direction, Default Value,Run-time Value"
columnWidth="100,25,11,"
size=6>
Cet exemple crée deux colonnes vierges de 182 pixels de large chacune. Le calcul est le suivant : le total des colonnes
dé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ères colonnes insérées est 364. Il reste deux colonnes à insérer : 364 divisé par 2 est égal à 182.
Cette commande de grille de variables comporte également un objet d'enveloppement JavaScript devant être employé
pour accéder aux données de la commande et les manipuler. L'implé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éductibles.
EXTENSION DE DREAMWEAVER CS4 94
Interfaces utilisateur destinées aux extensions
La commande d'arborescence affiche les données dans un format hiérarchisé et permet aux utilisateurs d'étendre et de
réduire les nœuds de l'arborescence. La balise MM:TREECONTROL permet de créer des commandes d'arborescence pour
n'importe quel type d'informations. Contrairement à la commande d'arborescence de base de données décrite dans la
section « Ajout d'une commande d'arborescence de base de données » à la page 92, aucune association à une base de
données n'est requise. Dans Dreamweaver, l'Editeur de raccourcis clavier utilise la commande d'arborescence comme
représenté dans la figure suivante :
Création d'une commande d'arborescence
La balise MM:TREECONTROL crée une commande d'arborescence et peut utiliser d'autres balises afin de compléter la
structure, comme indiqué dans la liste suivante :
•
MM:TREECOLUMN est une balise facultative vide qui définit une colonne dans la commande d'arborescence.
•
MM:TREENODE est une balise facultative qui dé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éfaut est de 5
lignes.
theControl
Facultatif. Si le nombre de nœuds de l'attribut theControl est supérieur à la valeur
de l'attribut size, des barres de défilement s'affichent.
multiples
Facultatif. Autorise plusieurs sélections ; la valeur par défaut est une sélection unique.
Style
Facultatif. Définition de style pour la hauteur et la largeur de la commande
d'arborescence ; si cet attribut est précisé, il est prépondérant sur l'attribut size.
noheaders
Facultatif. Indique que les en-têtes de la colonne doivent être masqués.
Les attributs des balises MM:TREECOLUMN sont les suivants :
EXTENSION DE DREAMWEAVER CS4 95
Interfaces utilisateur destinées aux extensions
Nom d'attribut
Description
name
Nom de la colonne.
value
Chaîne qui doit s'afficher dans l'en-tête de la colonne.
width
Largeur de la colonne exprimée en pixels (les pourcentages ne sont pas pris en charge
) ; la valeur par défaut est 100.
align
Facultatif. Indique l'alignement du texte de la colonne : à gauche, à droite ou centré ;
la valeur par défaut est à gauche.
state
Indique si la colonne est visible ou masquée.
Pour une meilleure visibilité, les balises TREECOLUMN doivent suivre immédiatement la balise MM:TREECONTROL,
comme indiqué dans l'exemple suivant :
<MM:TREECONTROL name="tree1">
<MM:TREECOLUMN name="Column1" width="100" state="visible">
<MM:TREECOLUMN name="Column2" width="80" state="visible">
...
</MM:TREECONTROL>
Les attributs MM:TREENODE sont décrits dans le tableau suivant :
Nom d'attribut
Description
name
Nom du nœud.
value
Comporte le contenu du nœud donné. Pour plusieurs colonnes, il s'agit d'une chaîne
délimitée par un trait vertical. Pour définir une colonne vide, placez un seul caractère
d'espace avant le trait vertical (|).
state
Spécifie que le nœud est développé ou réduit avec les chaînes expanded ou
collapsed.
selected
Vous pouvez sélectionner plusieurs nœuds en définissant cet attribut sur plusieurs
nœuds d'arborescence, si cette dernière comporte un attribut MULTIPLE.
icon
Facultatif. Index de l'icône intégrée à utiliser, en commençant par 0 :
0 = aucune icône ; 1 = icône de document Dreamweaver ; 2 = icône multi-document
Par exemple, tous les nœuds de la commande d'arborescence suivante sont développés :
<mm:treecontrol name="test" style="height:300px;width:300px">
<mm:treenode value="rootnode1" state="expanded">
<mm:treenode value="node1" state="expanded"></mm:treenode>
<mm:treenode value="node3" state="expanded"></mm:treenode>
</mm:treenode>
<mm:treenode value="rootnode2"0state="expanded">
<mm:treenode value="node2" state="expanded"></mm:treenode>
<mm:treenode value="node4" state="expanded"></mm:treenode>
</mm:treenode>
</mm:treecontrol>
EXTENSION DE DREAMWEAVER CS4 96
Interfaces utilisateur destinées aux extensions
Manipulation du contenu d'une commande d'arborescence
Les commandes et les nœuds d'arborescence sous-jacents sont implémentés comme des balises HTML. Ils sont par
conséquent analysés par Dreamweaver et stockés dans l'arborescence du document. Ces balises peuvent ensuite être
manipulées comme tout autre nœud de document. Pour plus d'informations sur les fonctions et méthodes DOM, voir
« Modèle d'objet de document (DOM) Dreamweaver » à la page 101.
Ajout d'un nœud Pour programmer l'ajout d'un nœud à une commande d'arborescence existante, définissez la
propriété innerHTML de la balise MM:TREECONTROL ou de l'une des balises MM:TREENODE existantes. La définition de la
balise inner HTML d'un nœud d'arborescence crée un nœud imbriqué.
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 + '<mm:treenode name="node3" value="node3">';
Ajout d'un nœud enfant Pour ajouter un nœud enfant au nœud sélectionné, définissez la propriété innerHTML du
nœud sélectionné.
L'exemple suivant ajoute un nœud enfant à un nœud parent sélectionné :
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
//deselect the node, so we can select the new one
selnode.removeAttribute("selected");
//add the new node to the top of the selected node's children
selNode.innerHTML = '<mm:treenode name="item10" value="New item11" expanded selected>' + ¬
selNode.innerHTML;
Suppression d'un nœud Pour supprimer le nœud sélectionné de la structure du document, utilisez la propriété
innerHTML ou outerHTML.
L'exemple suivant supprime le nœud parent sélectionné entier ainsi que ses nœuds enfants :
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
selNode.outerHTML = "";
Ajout d'une commande de bouton couleur
Les commandes de bouton couleur permettent d'ajouter une interface de sélecteur de couleurs à vos extensions.
Outre les types d'entrées standard tels que le texte, la case à cocher et le bouton, Dreamweaver prend en charge
mmcolorbutton, un autre type d'entrées présent dans les extensions.
Si vous spécifiez <input type="mmcolorbutton"> dans votre code, un sélecteur de couleurs s'affiche dans l'interface
utilisateur. Vous pouvez définir la couleur par défaut du sélecteur en définissant un attribut de valeur dans la balise
d'entrée. Si aucune valeur n'est spécifiée, le sélecteur de couleurs s'affiche par défaut en gris, et la propriété value de
l'objet d'entrée renvoie une chaîne vide.
L'exemple suivant représente une balise mmcolorbutton valide :
<input type="mmcolorbutton" name="colorbutton" value="#FF0000">
<input type="mmcolorbutton" name="colorbutton" value="teal">
Un bouton couleur comporte un événement, onChange, qui est déclenché lorsque la couleur est modifiée.
Veillez à synchroniser une zone de texte avec un sélecteur de couleurs. Les exemples suivants créent une zone de texte
qui synchronise la couleur de la zone de texte avec celle du sélecteur de couleurs :
EXTENSION DE DREAMWEAVER CS4 97
Interfaces utilisateur destinées aux extensions
<input type = "mmcolorbutton" name="fgcolorPicker"
onChange="document.fgcolorText.value=this.value">
<input type = "test" name="fgcolorText" onBlur="document.fgColorPicker.value=this.value">
Dans cet exemple, l'utilisateur modifie la valeur de la zone de texte puis accède à un autre élément en appuyant sur la
touche Tab ou en cliquant. Le sélecteur de couleurs est ensuite mis à jour afin d'afficher la couleur spécifiée dans la
zone de texte. Lorsque l'utilisateur sélectionne une nouvelle couleur dans le sélecteur, la zone de texte affiche la valeur
hexadécimale de cette couleur.
Ajout de contenu Flash à 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ès utile si vous créez des extensions qui emploient des formulaires,
animations, ActionScript ou autre contenu Flash.
Pour résumer, vous permettez aux objets et commandes Dreamweaver d'afficher des boîtes de dialogue (voir « Objets
de la barre Insertion » à la page 111 pour plus d'informations sur la création d'objets et « Commandes » à la page 139
pour plus d'informations sur les commandes) à l'aide de la balise form avec la balise object pour incorporer votre
contenu Flash dans une boîte de dialogue Dreamweaver.
Exemple d'une boîte de dialogue Flash simple
Dans cet exemple, vous allez utiliser Dreamweaver pour créer une commande. La commande créée affiche un fichier
SWF nommé myFlash.swf lorsque l'utilisateur clique sur la commande dans le menu Commandes. Pour obtenir des
informations plus spécifiques sur la création de commandes avant d'appliquer cet exemple, consultez la section
« Commandes » à la page 139.
Remarque : Cet exemple suppose qu'un fichier SWF nommé myFlash.swf se trouve déjà 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éfinition
de commande). Entre les balises title d'ouverture et de fermeture, entrez My Flash Movie afin que le début de votre
page indique :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Flash Movie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
Maintenant, enregistrez le fichier sous le nom My Flash Movie.htm dans le dossier Configuration/Commands de
l'application (le fichier doit néanmoins rester ouvert). Enregistrez le fichier de façon à pouvoir intégrer votre fichier
SWF avec un chemin d'accè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 > Médias > Flash pour ajouter votre fichier
SWF au fichier de définition de commande. Lorsque vous y êtes invité, sélectionnez le fichier SWF dans le dossier
Commands, puis cliquez sur OK. Votre fichier de définition de commande doit maintenant être semblable à l'exemple
suivant (les attributs width et height peuvent être différents, selon les propriétés de votre fichier SWF) :
EXTENSION DE DREAMWEAVER CS4 98
Interfaces utilisateur destinées aux extensions
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Flash Movie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<body>
<form>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700"
height="150">
<param name="movie" value="myFlash.swf">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myFlash.swf" width="700"
height="150">
<!--<![endif]-->
<param name="quality" value="high"/>
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- 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. -->
<param name="expressinstall"
value="../../../../../ColdFusion8/wwwroot/lr/Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player
6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get
Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</form>
</body>
</html>
Enregistrez à nouveau le fichier. Ensuite, quittez et redémarrez Dreamweaver. Sélectionnez Commandes > My Flash
Movie et votre fichier SWF s'affiche dans une boîte de dialogue Dreamweaver, comme indiqué dans la figure suivante :
EXTENSION DE DREAMWEAVER CS4 99
Interfaces utilisateur destinées aux extensions
Cet exemple présente une mise en oeuvre simple de la prise en charge des fichiers SWF dans Dreamweaver. Lorsque
vous serez familiarisé avec la création d'objets et de commandes, ou encore de formulaires plus compliqués, vous
pourrez intégrer des fichiers SWF dans vos extensions Dreamweaver pour une expérience utilisateur encore plus
dynamique. Pour plus d'informations, voir « Commandes » à la page 139, qui porte sur l'écriture d'une fonction
commandButtons() permettant d'ajouter des boutons à la boîte de dialogue qui affiche vos fichiers SWF.
Intégration de Photoshop et d'objets dynamiques
Adobe® Dreamweaver CS4® importe et manipule les fichiers Photoshop sous la forme d'objets dynamiques. Toute
modification apportée à l'image d'origine à l'aide de Photoshop se répercute immédiatement dans Dreamweaver. Pour
plus d'information sur les API qui intègrent Photoshop à Dreamweaver, voir « Intégration de Photoshop » dans le
Guide des API de Dreamweaver.
Exemple d'objet dynamique
Dans cet exemple, vous allez utiliser Dreamweaver pour créer une commande qui met à jour un fichier Photoshop
(PSD) lorsque l'utilisateur clique sur cette commande dans le menu Commandes. Pour permettre à cette commande
de fonctionner, veillez à placer une image Web d'objet dynamique sur votre page HTML. Pour obtenir des
informations plus spécifiques sur la création de commandes avant d'appliquer cet exemple, consultez la section
« Commandes » à la page 139.
Dans Dreamweaver, ouvrez un nouveau document HTML de base (ce document constituera votre fichier de définition
de commande). Votre fichier de définition de commande se présente comme suit :
EXTENSION DE DREAMWEAVER CS4 100
Interfaces utilisateur destinées aux extensions
<html xmlns:MMStr ing="http://www.adobe.com /schemes/data/
string/">
<head>
<title> Smart Objects API</ title >
<SC RIPT SRC="../Shared/Common/Scripts /dwscripts.js"></SC RIPT>
<SCRIPT LANGUAGE="Javascript">
function invokeSmartObjectJavaScriptAPICall() {
var selection = dw.getSelection();
if (!selection) {
alert("Err: No selection!");
return;
}
var node = dw.offsetsToNode(selection[0], selection[1]);
if (!node) {
alert("Err: No Node!");
return;
}
var imageSrc = node.getAttribute("src");
if (!imageSrc) {
alert("Err: No src attribute!");
return;
}
var fullPath = getFullPath(imageSrc);
if (!fullPath) {
alert("Err: No path!");
return;
}
//alert(fullPath);
alert("updateSmartObjectFromOriginal");
dw.updateSmartObjectFromOriginal(fullPath);
}
<script>
</head>
<body onload="invokeSmartObjectJavaScriptAPICall()">
</body>
</html>
Enregistrez le fichier sous le nom smartobjects.htm dans le dossier Configuration/Commands de l'application.
Lorsque vous y êtes invité, sélectionnez le fichier SWF dans le dossier Commands, puis cliquez sur OK.
101
Chapitre 6 : Modèle d'objet de document
(DOM) Dreamweaver
Dans Adobe Dreamweaver, le modèle d'objet de document (DOM) est une structure essentielle pour les créateurs
d'extensions.
Un DOM définit la composition des documents créés dans un langage de balisage. En représentant les balises et
attributs sous forme sous forme d'objets et de propriété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évélé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éments de niveau bloc (p, div, form, etc.)
• Eléments intégrés (br, img, etc.)
• Autres types d'éléments
Les éléments émergeant de ces ramifications correspondent, entre autres, à des attributs tels que width, height, alt, etc.
Dans un DOM, la structure de l'arborescence est maintenue et présentée sous la forme d'une hiérarchie de nœuds
parents et de nœuds enfants. Le nœud racine est orphelin, et les nœuds terminaux sont dépourvus de nœuds enfants.
A chaque niveau de cette structure HTML, l'élément HTML peut revêtir la forme d'un nœud dans JavaScript. Cette
structure vous permet ainsi d'accéder au document et à tous les éléments qui le composent.
Dans JavaScript, vous pouvez faire référence à 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 « myButton » soit le second élément du premier formulaire
du document. Dans ce cas, les deux réfé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ême nom, tels qu'un groupe d'options, sont réduits sous forme de tableau. Vous pouvez
accéder à un objet précis du tableau en augmentant l'index, en prenant zéro comme origine. Par exemple, la première
option portant le nom « myRadioGroup » dans un formulaire nommé « myForm » possède la référence
document.myForm.myRadioGroup[0].
EXTENSION DE DREAMWEAVER CS4 102
Modèle d'objet de document (DOM) Dreamweaver
Distinction entre les DOM de document utilisateur et
d'extension
Il convient de faire la différence entre le DOM du document de l'utilisateur et le DOM de l'extension. Les informations
présentées dans cette rubrique s'appliquent aux deux types de documents Dreamweaver, mais la manière de référencer
chacun des DOM diffère.
Si vous êtes familier avec l'utilisation de JavaScript dans les navigateurs, vous pouvez dé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éfé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ésigner la première image du document actif, vous pouvez écrire dw.getDocumentDOM().images[0].
Vous pouvez également stocker l'objet de document dans une variable et vous y référer ultérieurement, comme
indiqué dans l'exemple suivant :
var dom = dw.getDocumentDOM();
var firstImg = dom.images[0];
firstImg.src = "myImages.gif";
//get the dom of the current document
Ce type d'annotation est commun dans tous les fichiers du dossier Configuration, particulièrement dans les fichiers de
commandes. Pour plus d'informations sur la mé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étés et de méthodes du DOM Niveau 1 du World
Wide Web Consortium (W3C), combinés à certaines propriétés du DOM de Microsoft Internet Explorer 4.0.
Objets, propriétés et méthodes du DOM Dreamweaver
Le tableau suivant répertorie les objets, les propriétés, les méthodes et les événements pris en charge par le DOM
Dreamweaver. Certaines propriétés sont en lecture seule lorsqu'elles sont accessibles en tant que propriétés d'un objet
spécifique. Les propriétés en lecture seule, lorsqu'elles sont utilisées dans le contexte recensé, sont marquées d'une puce
(•).
EXTENSION DE DREAMWEAVER CS4 103
Modèle d'objet de document (DOM) Dreamweaver
Objet
Propriétés
Méthodes
Evé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)
images • (tableau d'objets
getElementsByAttributeName()
image)
getElementById()
layers • (tableau d'objets
LAYER, ILAYER et
hasChildNodes()
d'éléments à
positionnement absolu)
Objets child par nom •
nodeType •
parentNode •
childNodes •
previousSibling •
nextSibling •
documentElement •
body •
URL •
parentWindow •
toutes les
balises/tous les
éléments
nodeType •
getAttribute()
parentNode •
setAttribute()
childNodes •
removeAttribute()
tagName •
getElementsByTagName()
previousSibling •
getElementsByAttributeName()
nextSibling •
hasChildNodes()
attributs par nom
innerHTML
outerHTML
EXTENSION DE DREAMWEAVER CS4 104
Modèle d'objet de document (DOM) Dreamweaver
Objet
Propriétés
Méthodes
Evénements
form
En complément des
propriétés disponibles pour
toutes les balises :
Uniquement les méthodes disponibles
pour toutes les balises.
Aucun
Uniquement les méthodes disponibles
pour toutes les balises.
Aucun
Uniquement les méthodes disponibles
pour toutes les balises.
onMouseOver
onMouseOut
onMouseDown
onMouseUp
En complément des méthodes
disponibles pour toutes les balises :
onClick
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ément des
propriétés disponibles pour
toutes les balises :
visibility
left
top
width
height
zIndex
image
En complément des
propriétés disponibles pour
toutes les balises :
src
button reset
submit
En complément des
propriétés disponibles pour
toutes les balises :
form •
checkbox radio
password text
file hidden
image (field)
textarea
focus()
En complément des méthodes
En complément des
propriétés disponibles pour disponibles pour toutes les balises :
toutes les balises : checked
blur()
•
form •
focus()
En complément des
propriétés disponibles pour
toutes les balises :
En complément des méthodes
disponibles pour toutes les balises :
form •
value
select
blur()
En complément des
propriétés disponibles pour
toutes les balises :
form •
options • (tableau d'objets
d'option)
selectedIndex
onClick
onBlur
onFocus
blur()
focus()
select()
En complément des méthodes
disponibles pour toutes les balises :
blur() (Windows uniquement)
focus() (Windows uniquement)
onBlur
(Windows
uniquement)
onChange
onFocus
(Windows
uniquement)
EXTENSION DE DREAMWEAVER CS4 105
Modèle d'objet de document (DOM) Dreamweaver
Objet
Propriétés
Méthodes
Evénements
option
En complément des
propriétés disponibles pour
toutes les balises :
Uniquement les méthodes disponibles
pour toutes les balises.
Aucun
Aucun
onChange
Correspond à Netscape
Navigator 4.0
Correspond à Netscape Navigator 4.0
Aucun
nodeType •
hasChildNodes()
Aucun
hasChildNodes()
Aucun
text
mmcolorbutton
En complément des
propriétés disponibles pour
toutes les balises :
name
value
array
boolean
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étés et méthodes de l'objet document
Le tableau suivant décrit en détail les propriétés et les méthodes de l'objet document qui sont prises en charge par
Dreamweaver. Les propriétés en lecture seule sont marquées d'une puce (•).
EXTENSION DE DREAMWEAVER CS4 106
Modèle d'objet de document (DOM) Dreamweaver
Propriété ou méthode
Valeur renvoyée
nodeType •
Node.DOCUMENT_NODE
parentNode •
null
parentWindow •
L'objet JavaScript correspond à la fenêtre parente du
document. Cette propriété est dé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édiats de l'objet document. En règle
générale, le document comporte un seul enfant : l'objet
HTML.
previousSibling •
null
nextSibling •
null
documentElement •
L'objet JavaScript correspond à la balise html. Cette
propriété 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 à la balise body. Cette
propriété 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été renvoie le
nœud correspondant au jeu de cadres situé le plus à
l'extérieur.
URL •
L'URL de type file:// du document ou, si le fichier n'a
pas été enregistré, une chaîne vide.
getElementsByTagName(tagName)
Une NodeList pouvant être utilisée pour parcourir les
balises de type tagName (par exemple, img, div, etc.).
Si l'argument tagName est « layer », la fonction renvoie
toutes les balises LAYER et ILAYER et tous les éléments
à positionnement absolu.
Si l'argument tagName est « INPUT », la fonction renvoie
tous les éléments du formulaire. Si un attribut de nom
est spécifié pour un ou plusieurs objets tagName, il doit
commencer par une lettre conformément à la
spécification HTML 4.01 ; à défaut, la longueur du
tableau renvoyée par cette fonction sera incorrecte.
getElementsById(Id)
Obtient le nœud d'élément comportant l'id
spécifié. Où id désigne une chaîne
contenant l'ID de l'élément à obtenir.
var dom = dw.getDocumentDOM(); var contObj
= dom.getElementById('content');
alert("The element with the id 'content'
is a " + contObj.tagName);
getElementsByAttributeName(attrName)
Un objet NodeList qui permet de parcourir les
éléments comportant un attribut attrName (par
exemple, tous les éléments avec l'attribut « for »). Ne fait
pas partie de DOM niveau 1 ou 2.
getElementById(id)
L'élément HTML comportant l'ID spécifiée.
hasChildNodes()
true
EXTENSION DE DREAMWEAVER CS4 107
Modèle d'objet de document (DOM) Dreamweaver
Propriétés et méthodes du code HTML
Le tableau ci-dessous répertorie les propriétés et les méthodes des éléments HTML dans Dreamweaver, ainsi que leurs
valeurs de retour ou leurs explications. Les propriétés en lecture seule sont marquées d'une puce (•).
Propriété ou méthode
Valeur renvoyée
nodeType •
Node.ELEMENT_NODE
parentNode •
Balise parente. S'il s'agit de la balise HTML, l'objet document est renvoyé.
childNodes •
Une NodeList (liste de nœuds) comprend tous les enfants immédiats de la
balise.
previousSibling •
Le nœud frère situé juste avant. Par exemple, dans un document HTML,
l'objet previousSibling de l'élément body est l'élément head.
nextSibling •
Le nœud frère situé juste après. Par exemple, dans un document HTML,
l'objet nextSibling de l'élément head est l'élément body. Toute balise
script, style ou meta figurant dans la section head constituerait un nœud
enfant de l'élément head.
tagName •
Le code HTML tagName de l'élément, tel que IMG, A ou DIV. La valeur
renvoyée est toujours en majuscules.
attrName
Chaîne contenant la valeur de l'attribut de balise spécifié. La balise attrName
ne peut pas être utilisée si l'attribut attrName est un mot réservé 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ébut et de fin. Par exemple,
dans le code <p><b>Hello</b>, World!/<p>, p.innerHTML renvoie
<b>Hello</b>, World!. Si vous écrivez dans cette propriété,
l'arborescence DOM est immédiatement mise à jour de façon à refléter la
nouvelle structure du document. Cette propriété est dé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ême. Pour l'exemple de
code précédent, p.outerHTML renvoie <p><b>Hello</b>,
World!</p>. Si vous écrivez dans cette propriété, l'arborescence DOM est
immédiatement mise à jour de façon à refléter la nouvelle structure du
document. Cette propriété est dé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écifié, si celui-ci est spécifié explicitement ; sinon, null.
getTranslatedAttribute(attrName)
Valeur traduite de l'attribut spécifié ou la même valeur que celle renvoyée par
getAttribute() si la valeur de l'attribut n'est pas traduite. Cette propriété
n'est pas incluse dans le DOM Niveau 1 ; elle a été ajoutée à Dreamweaver 3
pour prendre en charge la traduction d'attributs.
setAttribute(attrName, attrValue)
Ne renvoie aucune valeur. Définit l'attribut spécifié sur l'exemple de valeur
spécifié, img.setAttribute("src", "image/roses.gif").
removeAttribute(attrName)
Ne renvoie aucune valeur. Supprime l'attribut défini et sa valeur du code
HTML de la balise.
EXTENSION DE DREAMWEAVER CS4 108
Modèle d'objet de document (DOM) Dreamweaver
Propriété ou méthode
Valeur renvoyée
getElementsByTagName(tagName)
Une NodeList pouvant être utilisée pour parcourir les balises enfants de
type tagName (par exemple, IMG, DIV, etc.).
Si l'argument tagName est « layer », la fonction renvoie toutes les balises
LAYER et ILAYER et tous les éléments à positionnement absolu.
Si l'argument tagName est « input », la fonction renvoie tous les éléments du
formulaire. Si un attribut de nom est spécifié pour un ou plusieurs objets
tagName, il doit commencer par une lettre conformément à la spécification
HTML 4.01 ; à défaut, la longueur du tableau renvoyée par cette fonction sera
incorrecte.
getElementsByAttributeName(attrName)
Un objet NodeList qui permet de parcourir les éléments comportant un
attribut attrName (par exemple, tous les éléments avec l'attribut « for »). Ne
fait pas partie de DOM niveau 1 ou 2.
hasChildNodes()
Valeur booléenne indiquant si la balise a des enfants.
hasTranslatedAttributes()
Valeur booléenne indiquant si la balise a des attributs traduits. Cette
propriété n'est pas incluse dans le DOM Niveau 1 ; elle a été ajoutée à
Dreamweaver 3 pour prendre en charge la traduction d'attributs.
Propriétés et méthodes des objets texte
Chaque bloc de texte contigu dans un document HTML (par exemple, le texte compris à l'intérieur d'une balise p) est
représenté par un objet JavaScript. Les objets texte n'ont jamais d'enfants. Le tableau suivant décrit les propriétés et les
méthodes d'objets texte empruntées au DOM Niveau 1 et employées dans Dreamweaver. Les propriétés en lecture
seule sont marquées d'une puce (•).
Propriété ou méthode
Valeur renvoyée
nodeType •
Node.TEXT_NODE
parentNode •
Balise parente
child Nodes •
Vide
previousSibling •
Le nœud frère situé juste avant. Par exemple, dans le code <p>blah<br />blah</p>, la
balise <p> comporte trois nœuds enfant (nœud texte, nœud élément, nœud texte). Le
nœud previousSibling du troisième enfant correspond à la balise <br />; le nœud
previousSibling du premier enfant a la valeur null.
nextSibling •
Le nœud frère situé juste après. Par exemple, dans le code <p>blah<br />blah</p>, le
nœud nextSibling du premier enfant de la balise p est la balise <br /> ; le nœud
nextSibling du troisième enfant a la valeur null.
data
La chaîne de texte réelle. Les entités du texte sont représentées par des caractères uniques
(par exemple, le texte Joseph & I est renvoyé sous la forme Joseph & I).
hasChildNodes()
false
Propriétés et méthodes des objets de commentaire
Un objet JavaScript représente chaque commentaire HTML. Le tableau suivant décrit en détail les propriétés et les
méthodes d'objets de commentaires empruntées au DOM Niveau 1 et employées dans Dreamweaver. Les propriétés
en lecture seule sont marquées d'une puce (•).
EXTENSION DE DREAMWEAVER CS4 109
Modèle d'objet de document (DOM) Dreamweaver
Propriété ou méthode
Valeur renvoyée
nodeType •
Node.COMMENT_NODE
parentNode •
Balise parente
childNodes •
Un tableau NodeList vide
previousSibling •
Le nœud frère situé juste avant.
nextSibling •
Le nœud frère situé juste après.
data
Chaîne de texte comprise entre les marqueurs de commentaires <!- et -->)
hasChildNodes()
false
Objets dreamweaver et site
Dreamweaver implémente les objets standard accessibles au moyen du DOM et ajoute deux objets personnalisés :
dreamweaver et site. Ces objets personnalisés sont couramment utilisés dans les API et pour la rédaction
d'extensions. Pour plus d'informations sur les méthodes des objets dreamweaver et site, voir le Guide des API de
Dreamweaver.
Propriétés de l'objet dreamweaver
L'objet dreamweaver possède deux propriétés en lecture seule, comme indiqué dans la liste suivante :
• La propriété appName prend la valeur "Dreamweaver".
• La propriété appVersion prend une valeur ayant le format
"versionNumber.releaseNumber.buildNumber[languageCode] (platform)".
Par exemple, la valeur de la propriété appVersion pour la version Windows suédoise de Dreamweaver est
"8.0.XXXX [se] (Win32)" ; pour la version Macintosh anglaise, il s'agit de "8.0.XXXX [en] (MacPPC)".
Remarque : Vous trouverez la version et le numéro de compilation en choisissant l'élément de menu Aide > A propos de.
Les propriétés appName et appVersion ont été implémentées dans Dreamweaver 3 et ne sont pas disponibles dans les
versions antérieures de Dreamweaver.
Pour connaître la version spécifique de Dreamweaver, vérifiez en premier lieu l'existence de appVersion. Ensuite,
pour le numéro de version, procédez comme dans l'exemple suivant :
if (dreamweaver.appVersion && dreamweaver.appVersion.indexOf('3.01') != -1){¬
// execute code
}
L'objet dreamweaver comprend une propriété appelée systemScript, qui vous permet de vérifier la langue du
système d'exploitation de l'utilisateur. Elle vous sera utile pour inclure dans le code de votre extension des spécificités
des systèmes d'exploitation localisés, comme indiqué dans l'exemple suivant :
if (dreamweaver,systemScript && (dreamweaver.systemScript.indexOf('ja')!=-1){¬
SpecialCase }
La propriété systemScript renvoie les valeurs suivantes pour les systèmes d'exploitation localisés :
EXTENSION DE DREAMWEAVER CS4 110
Modèle d'objet de document (DOM) Dreamweaver
Langage
Valeur
Japonais
ja
Coréen
ko
Chinois traditionnel
zh_tw
Chinois simplifié
zh_cn
Les systèmes d'exploitation localisés dans les langues européennes renvoient la valeur en.
Objet site
L'objet site n'a aucune propriété. Pour plus d'informations sur les méthodes de l'objet site, voir le Guide des API de
Dreamweaver.
111
Chapitre 7 : Objets de la barre Insertion
Vous pouvez ajouter des éléments à la barre Insertion pour permettre aux utilisateurs d'effectuer automatiquement
certaines tâches répétitives, voire créer des boîtes de dialogue pour leur permettre de définir des attributs spécifiques.
Les objets sont stockés dans le dossier Configuration/Objects du dossier de l'application Dreamweaver. Les sousdossiers du dossier Objects sont regroupé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érer
l'objet Hyperlien de la barre Insertion.
Le tableau ci-dessous recense les fichiers utilisés pour créer un objet.
Chemin
Fichier
Description
Configuration/Objects/type_objet/
nom_objet.htm
Indique l'élément à insérer dans le document.
Configuration/Objects/type_objet/
nom_objet.js
Contient les fonctions à exécuter.
Configuration/Objects/type_objet/
nom_objet.gif
Contient l'image qui s'affiche sur la barre
Insertion.
Configuration/Objects
insertbar.xml
Dé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èrent des chaînes de code spécifiques dans le document d'un utilisateur. Les objets permettent à
l'utilisateur d'ajouter un contenu (images, éléments à positionnement absolu, tableaux, etc.) en cliquant sur des icônes
ou en sélectionnant des options du menu.
Les objets se composent des éléments suivants :
• Le fichier HTML définissant l'élément inséré dans le document.
La section head d'un fichier d'objet contient des fonctions JavaScript (ou fait référence à des fichiers JavaScript
externes) qui traitent les saisies de formulaires depuis la section body et déterminent le contenu qui est ajouté au
document de l'utilisateur. Le corps d'un fichier d'objet peut contenir un formulaire HTML qui accepte des
paramètres pour l'objet (par exemple, le nombre de lignes et de colonnes à insérer dans un tableau) et active une
boîte de dialogue où les utilisateurs peuvent entrer des attributs.
Remarque : Les objets les plus simples contiennent uniquement le code HTML à insérer, sans les balises body et head.
Pour plus d’informations, consultez la section « Customizing Dreamweaver » (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éfinit l'endroit où apparaît l'objet dans la barre
Insertion.
EXTENSION DE DREAMWEAVER CS4 112
Objets de la barre Insertion
Un utilisateur peut sélectionner un objet en cliquant sur une icône de la barre Insertion ou en choisissant un
élément dans le menu Insertion. Lorsqu'un utilisateur sélectionne un objet, les événements suivants se produisent :
1 Adobe Dreamweaver appelle la fonction canInsertObject() pour déterminer s'il doit afficher une boîte de
dialogue.
La balise form est recherchée dans le fichier d'objet. Si un formulaire existe et que vous sélectionnez l'option
Afficher la boîte de dialogue lors de l'insertion d'un objet de la boîte de dialogue Préférences générales,
Dreamweaver appelle la fonction windowDimensions(), si elle est définie. Dreamweaver appelle la fonction
pour déterminer la taille de la boîte de dialogue dans laquelle le formulaire doit être affiché. Si le fichier d'objet
ne contient aucun formulaire, Dreamweaver n'affiche pas de boîte de dialogue et ignore l'étape 2.
2 Si Dreamweaver affiche une boîte de dialogue à l'étape 1, l'utilisateur saisit les paramètres de l'objet (tels que le
nombre de lignes et de colonnes d'un tableau) dans les champs de texte de la boîte de dialogue, puis clique
sur OK.
3 Dreamweaver appelle la fonction objectTag() et insère la valeur renvoyée correspondante dans le document
après la sélection en cours (celle-ci n'est pas remplacée).
4 Si Dreamweaver ne trouve pas la fonction objectTag(), il recherche une fonction insertObject() et l'appelle.
Fichier de définition de la barre Insertion
Le fichier Configuration/Objects/insertbar.xml définit les propriétés de la barre Insertion. Ce fichier XML contient la
définition de chacun des objets, dans leur ordre d'apparition.
La première fois qu'un utilisateur démarre Dreamweaver, la barre Insertion s'affiche horizontalement au-dessus du
document. Sa visibilité et sa position sont ensuite enregistrées dans le Registre.
Hiérarchie des balises du fichier Insertbar.xml
L'exemple ci-dessous affiche le format et la hiérarchie des balises imbriquées du fichier insertbar.xml :
<?xml version="1.0" ?>
<!DOCTYPE insertbarset SYSTEM "-//Adobe//DWExtension insertbar 10.0">
<insertbar xmlns:MMString="http://www.adobe.com/schemes/data/string/">
<category id="DW_Insertbar_Common" MMString:name="insertbar/categorycommon" folder="Common">
<button id="DW_Hyperlink" image="Common\Hyperlink.png"
MMString:name="insertbar/hyperlink" file="Common\Hyperlink.htm" />
<button id="DW_Email" image="Common\E-Mail Link.png"
MMString:name="insertbar/email" file="Common\E-Mail Link.htm" />
<separator />
<menubutton id="DW_Images" MMString:name="insertbar/images"
image="Common\Image.png">
<button id="DW_Image" image="Common\Image.png"
MMString:name="insertbar/image" file="Common\Image.htm" />
...
</menubutton>
<separator />
<button id="DW_TagChooser" MMString:name="insertbar/tagChooser"
image="Common\Tag Chooser.gif" command="dw.showTagChooser()"
codeOnly="TRUE"/>
</category>
...
</insertbar>
EXTENSION DE DREAMWEAVER CS4 113
Objets de la barre Insertion
Remarque : Les balises insertbar et category emploient les balises de fermeture </insertbar> et </category> pour
indiquer la fin de leur contenu. La fin des attributs et du contenu des balises button, checkbutton et separator est indiquée
par une barre oblique (/) insérée avant le crochet de fermeture.
Balises de définition de la barre Insertion
Le fichier insertbar.xml contient les balises et les attributs suivants :
<insertbar>
Description
Cette balise désigne le contenu du fichier de définition de la barre Insertion. La balise de fermeture </insertbar>
indique la fin du contenu.
Attributs
Aucun.
Exemple
<insertbar>
<category id="DW_Insertbar_Common" folder="Common">
<button id="DW_Hyperlink" image="Common\Hyperlink.gif"
file="Common\Hyperlink.htm"/>0
...
</insertbar>
<category>
Description
Cette balise définit une catégorie de la barre Insertion (par exemple, Commun, Formulaires ou HTML). La balise de
fermeture </category> indique la fin du contenu.
Remarque : Par défaut, la barre Insertion regroupe différentes catégories (par exemple, Commun, Formulaires ou
HTML). Dans les versions précédentes de Dreamweaver, la barre Insertion se composait de différents onglets. Les
utilisateurs peuvent définir leurs préférences quant à l'organisation des objets de la barre Insertion (par catégorie ou par
onglet). Si l'utilisateur choisit l'organisation par onglet, la balise category définit chacun d'eux.
Attributs
id, {folder}, {showIf}
Exemple
<category id="DW_Insertbar_Common" folder="Common">
<button id="DW_Hyperlink" image="Common\Hyperlink.gif"
file="Common\Hyperlink.htm"/>
</category>
<menubutton>
Description
Cette balise définit un menu déroulant dans la barre Insertion.
EXTENSION DE DREAMWEAVER CS4 114
Objets de la barre Insertion
Attributs
id, image, {showIf}, {name}, {folder}
Exemple
<menubutton
id="DW_ImageMenu"
name="Images"
image="Common\imagemenu.gif"
folder="Images">
<button id="DW_Image"
image="Common\Image.gif"
enabled=""
showIf=""
file="Common\Image.htm" />
</menubutton>
<button />
Description
Cette balise définit un bouton de la barre Insertion permettant à l'utilisateur d'exécuter le code spécifié par les attributs
command ou file.
Attributs
id, image, name, {canDrag}, {showIf}, {enabled}, {command}, {file}, {tag}, {codeOnly}
Exemple
<button id="DW_Object"
image="Common\Object.gif"
name="Object"
enabled="true"
showIf=""
file="Common\Obect.htm"
/>
<checkbutton />
Description
Ce type de bouton peut se voir attribuer l'état activé ou désactivé. Lorsque vous cliquez dessus, ce bouton apparaît en
surbrillance comme étant enfoncé. Lorsqu'il est désactivé, un bouton de type « checkbutton » apparaît à plat.
Dreamweaver possède des états Survol, Enfoncé, Survol et enfoncé et Désactivé et enfoncé. La commande doit faire en
sorte qu'un clic sur le bouton d'activation provoque un changement de son état.
Attributs
id, image, checked, {showIf}, {enabled}, {command}, {file}, {tag}, {name}, {codeOnly}
Exemple
<checkbutton id="DW_StandardView"
name = "Standard View"
image="Tools\Standard View.gif"
checked="_View_Standard"
command="dw.getDocumentDOM().setShowLayoutView(false)"/>
EXTENSION DE DREAMWEAVER CS4 115
Objets de la barre Insertion
<separator />
Description
Cette balise affiche une ligne verticale sur la barre Insertion.
Attributs
{showIf}
Exemple
<separator showIf="_VIEW_CODE"/>
Attributs des balises de définition de la barre Insertion
La signification des attributs correspondant aux balises de définition de la barre Insertion est la suivante :
id="unique id"
Description
L'attribut id correspond à l'identificateur des boutons affichés dans la barre Insertion. Chaque élément du fichier doit
posséder un attribut id unique.
Exemple
id="DW_Anchor"
image="image_path”
Description
Cet attribut indique le chemin d'accès, par rapport au dossier Configuration de Dreamweaver, du fichier de l'icône
affichée dans la barre Insertion. Le format de cette icô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="Common/table.gif"
canDrag="Boolean”
Description
Cet attribut spécifie si l'utilisateur a la possibilité de faire glisser l'icône dans le code ou dans l'espace de travail pour
insérer l'objet correspondant dans le document. Si vous ne spécifiez pas cet attribut, la valeur par défaut est true.
Exemple
canDrag="false"
EXTENSION DE DREAMWEAVER CS4 116
Objets de la barre Insertion
showIf="enabler"
Description
Cet attribut indique que ce bouton doit s'afficher dans la barre Insertion uniquement si la valeur de l'activateur
Dreamweaver désigné est réglée sur true. Si vous ne spécifiez pas l'attribut showIf, le bouton s'affiche
systé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écifier plusieurs activateurs, sé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éfinissez les activateurs
comme suit :
showIf="_VIEW_CODE, _SERVERMODEL_ASP"
enabled="enabler"
Description
Cet attribut indique que l'utilisateur peut accéder à l'élément si la valeur de DW_enabler est réglée sur true. Si vous ne
spécifiez pas la fonction enabled, l'élément est systématiquement activé par dé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écifier plusieurs activateurs, sé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="_VIEW_CODE"
Le bouton s'affiche alors en grisé dans les autres modes.
checked="enabler"
Description
L'attribut checked est obligatoire si vous insérez la balise checkbutton.
L'élément est activé si la valeur de DW_enabler est dé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.
EXTENSION DE DREAMWEAVER CS4 117
Objets de la barre Insertion
Pour spécifier plusieurs activateurs, séparez-les par des virgules (chaque virgule signifie ET). Pour exclure des
activateurs (NOT), utilisez un point d'exclamation (!).
Exemple
checked="_View_Layout"
command="API_function"
Description
Au lieu d'indiquer à Dreamweaver de se référer à un fichier HTML comportant le code à insérer, vous pouvez associer
une commande à cette balise. Lorsque l'utilisateur clique sur le bouton auquel se rapporte cette balise, Dreamweaver
effectue alors la commande spécifiée.
Exemple
command="dw.showTagChooser()"
file="file_path"
Description
L'attribut file définit le chemin d'accès, par rapport au dossier Configuration de Dreamweaver, d'un fichier d'objet.
Dreamweaver dérive l'infobulle de l'icône d'objet à partir du titre du fichier d'objet, sauf si vous spécifiez l'attribut name.
Exemple
file="Templates/Editable.htm"
tag="editor"
Description
Cet attribut ordonne à Dreamweaver d'appeler un éditeur de balises. En mode Code, si l'attribut tag est défini et que
l'utilisateur clique sur l'objet, Dreamweaver appelle la boîte de dialogue Balise. En mode Code, si vous spécifiez les
attributs tag et command, Dreamweaver appelle l'éditeur de balises. En mode Création, si codeOnly="TRUE" et que
l'attribut file n'est pas spécifié, Dreamweaver active les modes Code et Création, place le focus dans la partie code et
appelle l'éditeur de balises.
Exemple
tag = "form"
name="tooltip_text
Description
L'attribut name définit l'infobulle qui s'affiche lorsque le curseur de la souris pointe sur l'objet concerné. Si vous
spécifiez un fichier d'objet sans spécifier l'attribut name, Dreamweaver utilise le nom du fichier comme infobulle.
Remarque : Si vous ne spécifiez pas l'attribut name, l'objet ne pourra pas être regroupé dans la caté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éfixe MMString. Le
préfixe MMString indique une chaîne localisée ; ces valeurs sont décrites dans « Localisation d'une extension » à la
page 86.
EXTENSION DE DREAMWEAVER CS4 118
Objets de la barre Insertion
Exemple
name = "cfoutput"
Modification de la barre Insertion
Vous pouvez déplacer les objets d'une catégorie à une autre, renommer les différentes catégories et supprimer de
manière définitive certains objets du panneau. Pour que vos modifications soient prises en compte et apparaissent
dans la barre Insertion, vous devez redémarrer Dreamweaver ou recharger les extensions. Pour plus d'informations
sur le rechargement des extensions, voir « Rechargement d'extensions » à la page 84.
Déplacement ou copie d'un objet répertorié dans une catégorie de la barre Insertion vers une autre catégorie ou
vers un emplacement différent de la même caté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ésentant l'objet à déplacer ou à copier. Par exemple, pour déplacer l'objet Image
de son emplacement au sein de la catégorie Commun, recherchez la balise button dont l'attribut id est
"DW_Image".
4 Coupez ou copiez l'ensemble de la balise button.
5 Recherchez la balise category représentant la catégorie dans laquelle vous souhaitez déplacer ou copier l'objet.
6 Recherchez l'emplacement de la catégorie dans lequel vous souhaitez faire apparaî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ésentant l'objet à supprimer.
4 Supprimez l'intégralité 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épertorié dans le fichier insertbar.xml. Par exemple, vous pouvez créer un nouveau dossier
dans le dossier Configuration/Objects pour y placer les fichiers de l'objet. Si vous êtes certain de vouloir supprimer
cet objet, vous pouvez supprimer les fichiers de manière définitive. Il peut néanmoins s'avérer utile de conserver
une copie de sauvegarde de ces fichiers en vue de pouvoir les restaurer, le cas échéant.
7 Rechargez les extensions.
Modification de l'ordre des caté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 à la catégorie à déplacer, puis sélectionnez-la ainsi que l'ensemble de
son contenu.
EXTENSION DE DREAMWEAVER CS4 119
Objets de la barre Insertion
4 Coupez cette balise.
5 Collez la balise dans son nouvel emplacement. Veillez à ne pas coller la balise au sein d'une autre balise category.
6 Enregistrez le fichier insertbar.xml.
7 Rechargez les extensions.
Création d'une nouvelle caté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éez une balise category et indiquez le dossier par défaut ainsi que l'ensemble des objets contenus dans cette
catégorie.
4 Pour plus d'informations sur la syntaxe des balises dans insertbar.xml, voir « Balises de définition de la barre
Insertion » à la page 113.
5 Enregistrez le fichier insertbar.xml.
6 Rechargez les extensions.
Ajout d'un nouvel objet dans la barre Insertion
Vous pouvez ajouter des objets à la barre Insertion. Pour que vos modifications soient prises en compte et apparaissent
dans la barre Insertion, vous devez redémarrer Dreamweaver ou recharger les extensions. Pour plus d'informations
sur le rechargement des extensions, voir « Rechargement d'extensions » à la page 84.
1 Définissez la chaîne spécifique de code destinée au document de l'utilisateur par le biais de HTML et, en option,
JavaScript.
2 Identifiez ou créez l'image (18 x 18 pixels) correspondant au bouton à intégrer à l'interface de Dreamweaver.
Si vous créez une image de taille supérieure, Dreamweaver la redimensionne pour lui attribuer une taille de
18 x 18 pixels. Si vous ne créez pas d'image pour un objet, une icône d'objet par défaut représentée par un point
d'interrogation (?) apparaî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écifiez les attributs
(consultez la section « Fichier de définition de la barre Insertion » à la page 112) définissant l'aspect du bouton.
5 Redémarrez Dreamweaver ou rechargez les extensions.
Le nouvel objet apparaît dans la barre Insertion à l'emplacement indiqué.
Remarque : Même si les fichiers d'objet peuvent être stockés dans des dossiers séparé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é Button.htm et qu'un autre fichier
nommé Button.htm se trouve également dans le dossier MyObjects, Dreamweaver ne parvient pas à les différencier. S'il
existe deux instances du fichier Button.htm, dom.insertObject() affiche deux objets nommés Button ; il est dès lors
difficile pour l'utilisateur de les différencier.
Ajout d'objets au menu Insertion
Pour ajouter ou contrôler la position d'un objet du menu Insertion (ou de tout autre menu), modifiez le fichier
menus.xml. Ce fichier contrôle l'intégralité de la structure de menus pour Dreamweaver. Pour plus d'informations sur
la modification du fichier menus.xml, voir « Menus et commandes de menu » à la page 150.
EXTENSION DE DREAMWEAVER CS4 120
Objets de la barre Insertion
Si vous souhaitez distribuer l'extension à d'autres utilisateurs de Dreamweaver, voir « Utilisation d'Extension
Manager » à la page 87 pour en savoir plus sur le conditionnement des extensions.
Exemple simple d'insertion d'un objet
Cet exemple ajoute à la barre Insertion un objet permettant aux utilisateurs de rayer d'une ligne (barrer) le texte
sélectionné en cliquant sur un bouton. Cet objet s'utilise lors de l'insertion de commentaires concernant l'édition d'un
document.
Cet exemple implique des manipulations du texte ; vous pouvez par conséquent découvrir certains des objets existants
dans le menu déroulant Texte de la catégorie HTML de la barre Insertion et vous en servir comme d'un modèle. Par
exemple, vous pouvez examiner les fichiers d'objet Bold, Emphasis et Heading pour observer des fonctionnalités
similaires, dont le principe consiste à insérer une balise de part et d'autre du texte sélectionné dans Dreamweaver.
La procédure de création de l'objet Strikethrough est la suivante :
Création du fichier HTML
Le titre de l'objet est indiqué entre les balises title d'ouverture et de fermeture. Vous spécifiez également le langage
de script JavaScript.
1 Créez un document vierge.
2 Ajoutez le code suivant :
<html>
<head>
<title>Strikethrough</title>
<script language="javascript">
</script>
</head>
<body>
</body>
</html>
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éfinissent le comportement de l'objet Strikethrough et insè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és sur le même modèle de fonctions et de commentaires.
La première fonction utilisée par le fichier de définition d'objet est la fonction isDOMRequired(), qui indique si le
mode Création doit être synchronisé avec le mode Code existant avant de poursuivre l'exécution. Cependant, l'objet
Superscript peut s'utiliser avec de nombreux autres objets en mode Code ; une synchronisation imposée n'est donc pas
né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 :
EXTENSION DE DREAMWEAVER CS4 121
Objets de la barre Insertion
<script language="javascript">
function isDOMRequired() {
// Return false, indicating that this object is available in Code view.
return false;
}
</script>
2 Enregistrez le fichier.
Ensuite, indiquez si vous souhaitez utiliser la fonction objectTag() ou insertObject(). L'opération effectuée par
l'objet Strikethrough consiste simplement à insérer la balise s de part et d'autre du texte sélectionné. Il ne remplit donc
pas les conditions nécessaires à l'utilisation de la fonction insertObject() (voir « insertObject() » à la page 130).
Dans la fonction objectTag(), indiquez dw.getFocus() pour déterminer si le mode actuel correspond au mode
Code. Si le mode Code est actif, la fonction insère la balise appropriée (majuscule ou minuscule) de part et d'autre du
texte sélectionné. Si le mode Création est actif, la fonction utilise dom.applyCharacterMarkup() pour assigner le
format du texte sélectionné. 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érations, il sera peut-être nécessaire de faire appel à d'autres fonctions API. Une fois le format appliqué
par Dreamweaver, le point d'insertion (curseur) réapparaît dans le document, sans message ni invite préalable. La
procédure ci-dessous illustre la forme de la fonction objectTag() une fois ces informations renseignées.
Ajout de la fonction objectTag()
1 Dans la section head du fichier Strikethrough.htm, ajoutez la fonction ci-dessous aprè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("Source Format", "Tags Upper Case", "") ==
'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('<S>','</S>');
}else{
dom.source.wrapSelection('<s>','</s>');
}
// If the user is not in Code view, apply the formatting in Design view.
}else if (dw.getFocus() == 'document'){
dom.applyCharacterMarkup("s");
}
// 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éer un fichier JavaScript
distinct. Cette organisation à part s'utilise notamment pour les objets contenant plusieurs fonctions ou des fonctions
susceptibles d'être partagées par d'autres objets.
Séparation du fichier de définition d'objet HTML des fonctions JavaScript de prise en charge
1 Créez un document vierge.
2 Collez toutes les fonctions JavaScript dans le fichier.
EXTENSION DE DREAMWEAVER CS4 122
Objets de la barre Insertion
3 Supprimez ces fonctions du fichier Strikethrough.htm, puis ajoutez le nom du fichier JavaScript à l'attribut src de
la balise script, comme indiqué dans l'exemple suivant :
<html>
<head>
<title>Strikethrough</title>
<script language="javascript" src="Strikethrough.js">
</script>
</head>
<body>
</body>
</html>
4 Enregistrez le fichier Strikethrough.htm.
5 Enregistrez le fichier qui contient à présent les fonctions JavaScript sous le nom Strikethrough.js dans le dossier
Configuration/Objects/Text.
Création de l'image utilisée dans la barre Insertion
1 Cré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 à présent modifier le fichier insertbar.xml file, afin que Dreamweaver puisse associer ces deux éléments à
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ère à conserver une copie de sauvegarde.
Le code contenu dans le fichier insertbar.xml désigne tous les objets figurant dans la barre Insertion.
• Chaque balise category du fichier XML crée une catégorie dans l'interface.
• Chaque balise menubutton crée un menu déroulant dans la barre Insertion.
• Chaque balise button du fichier XML affiche une icône dans la barre Insertion et la relie au fichier HTML ou à la
fonction correspondants.
Ajout du nouvel objet à la barre Insertion
1 Recherchez la ligne suivante située au début du fichier insertbar.xml :
<category id="DW_Insertbar_Common" MMString:name="insertbar/category/common"
folder="Common">
Cette ligne indique le début de la catégorie Commun de la barre Insertion.
2 Créez une nouvelle ligne à la suite de la balise category, puis insérez la balise button en lui assignant les attributs
id, image et file correspondant à l'objet Strikethrough.
L'ID doit correspondre au nom unique du bouton. Conformément aux conventions de dénomination, utilisez
DW_Text_Strikethrough pour cet objet. Les attributs image et file indiquent simplement à Dreamweaver
l'emplacement des fichiers en rapport avec l'objet, comme indiqué ci-dessous :
EXTENSION DE DREAMWEAVER CS4 123
Objets de la barre Insertion
<button id="DW_Text_Strikethrough"
image="Text\Strikethrough.gif"
file="Text\Strikethrough.htm"/>
3 Enregistrez le fichier insertbar.xml.
4 Rechargez les extensions (voir « Rechargement d'extensions » à la page 84).
Le nouvel objet s'affiche au début de la catégorie Commun de la barre Insertion.
Ajout d'une boîte de dialogue
Vous pouvez ajouter un formulaire à votre objet de manière à ce que l'utilisateur puisse indiquer des commentaires
avant que Dreamweaver n'insère le code spécifié (par exemple, l'objet Hyperlien nécessite la saisie des valeurs texte,
lien, cible, index de catégorie, titre et clé d'accès). Dans cet exemple, vous ajoutez un formulaire à l'objet Barré créé dans
l'exemple précédent. Le formulaire entraîne l'ouverture d'une boîte de dialogue permettant à l'utilisateur de colorer le
texte en rouge et d'ajouter la balise Strikethrough.
Cet exemple suppose que vous avez déjà créé un fichier JavaScript distinct nommé Strikethrough.js.
Tout d'abord, dans le fichier Strikethrough.js, ajoutez la fonction appelée par le formulaire si l'utilisateur modifie la
couleur du texte. Cette fonction est similaire à la fonction objectTag() de l'objet Strikethrough, mais elle est
facultative.
Création de la fonction
1 Après la fonction objectTag() dans Strikethrough.js, cré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("Source Format", "Tags Upper Case", "")
== 'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('<FONT COLOR="#FF0000">','</FONT>');
}else{
dom.source.wrapSelection('<font color="#FF0000">','</font>');
}
}else if (dw.getFocus() == 'document'){
dom.applyFontMarkup("color", "#FF0000");
}
// Just return -- don't do anything else.
return;
}
Remarque : Comme dom.applyCharacterMarkup() ne gère pas les modifications de couleur de police, vous devez
identifier la fonction API correspondant à ce type d'opé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é dans l'exemple ci-dessous est une
simple case à cocher permettant d'appeler la fonction fontColorRed() lorsqu'elle est activée. La balise form permet
de définir votre formulaire, la balise table assure la définition de sa mise en forme (si vous n'effectuez pas cette étape,
la taille de la boîte de dialogue ou la disposition des champs risque d'être incorrecte).
EXTENSION DE DREAMWEAVER CS4 124
Objets de la barre Insertion
Ajout du formulaire
1 Ajoutez le code ci-dessous après la balise body :
<form>
<table border="0" height="100" width="100">
<tr valign="baseline">
<td align="left" nowrap>
<input type="checkbox" name="red" onClick=fontColorRed()>Red text</input>
</td>
</tr>
</table>
</form>
2 Enregistrez le fichier sous le nom Strikethrough.htm.
3 Rechargez les extensions (voir « Rechargement d'extensions » à la page 84).
Test de la boîte de dialogue
1 Activez la case à cocher Red Text.
2 Cliquez sur OK pour exécuter la fonction objectTag(), qui barre le texte :
EXTENSION DE DREAMWEAVER CS4 125
Objets de la barre Insertion
Création d'un menu déroulant dans la barre Insertion
La barre Insertion de Dreamweaver implique un nouveau mode d'organisation des objets. La barre Insertion prend
désormais en charge des menus dé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ée une nouvelle catégorie, Editorial, dans la barre Insertion, puis ajoute un menu déroulant à
cette catégorie. Le menu déroulant regroupe l'objet Strikethrough que vous avez déjà créé, ainsi qu'un objet Blue Text
que vous allez créer. Les objets de la catégorie Editorial permettent aux utilisateurs :
• d'ajouter des commandes é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éez le dossier Configuration/Objects/Editorial dans le dossier d'installation de Dreamweaver.
2 Copiez les fichiers correspondant à l'exemple d'objet Strikethrough créé plus haut dans le dossier Editorial
(Strikethrough.htm, Strikethrough.js et Strikethrough.gif).
Création de l'objet Blue Text
1 Créez un formulaire HTML.
2 Ajoutez le code suivant :
EXTENSION DE DREAMWEAVER CS4 126
Objets de la barre Insertion
<html>
<head>
<title>Blue Text</title>
<script language="javascript">
//--------------- 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("Source Format", "Tags Upper Case", "") ==
'TRUE');
// Manually wrap tags around selection.
if (upCaseTag){
dom.source.wrapSelection('<FONT COLOR="#0000FF">','</FONT>');
}else{
dom.source.wrapSelection('<font color="#0000FF">','</font>');
}
}else if (dw.getFocus() == 'document'){
dom.applyFontMarkup("color", "#0000FF");
}
// Just return -- don't do anything else.
return;
}
</script>
</head>
<body>
</body>
</html>
3 Enregistrez le fichier sous le nom AddBlue.htm dans le dossier Editorial.
Vous pouvez maintenant créer une image pour l'objet Blue Text.
Création de l'image
1 Créez un fichier GIF de 18x 18 pixels, similaire à 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é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éfinissent chacun des menus déroulants de la catégorie HTML. Dans les balises menubutton, chaque balise button
définit l'un des éléments du menu déroulant.
Modification du fichier insertbar.xml
1 Recherchez la ligne de code suivante située au début du fichier :
EXTENSION DE DREAMWEAVER CS4 127
Objets de la barre Insertion
<insertbar xmlns:MMString="http://www.adobe.com/schemes/data/string/">
La balise insertbar définit le début de chacun des éléments de la barre Insertion.
2 Après cette ligne, ajoutez une nouvelle balise category pour la catégorie Editorial que vous voulez cré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 :
<category id="DW_Insertbar_Editorial" name="Editorial" folder="Editorial">
</category>
3 Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir « Rechargement
d'extensions » à la page 84.
La catégorie Editorial apparaît dans la barre Insertion :
4 Entre les balises d'ouverture et de fermeture category, ajoutez le menu déroulant en insérant la balise menubutton
ainsi que les attributs suivants, y compris un ID unique.
<menubutton id="DW_Insertbar_Markup" name="markup" image="Editorial\Strikethrough.gif"
folder="Editorial">
Pour plus d'informations sur les attributs, voir « Attributs des balises de définition de la barre Insertion » à la
page 115.
5 Ajoutez les objets du nouveau menu déroulant à l'aide de la balise button, comme suit :
<button id="DW_Editorial_Strikethrough" image="Editorial\Strikethrough.gif"
file="Editorial\Strikethrough.htm"/>
6 A la suite de l'objet Strikethrough, insérez l'objet Blue Text, comme suit :
<button id="DW_Blue_Text" image="Editorial\AddBlue.gif name="Blue Text"
file="Editorial\AddBlue.htm"/>
Remarque : La balise button ne possède pas de balise de fermeture séparée, elle se termine simplement par "/>".
7 Terminez l'insertion dans le menu déroulant en spécifiant la balise de fermeture </menubutton>.
Le code ci-dessous représente l'ensemble de la catégorie regroupant le menu déroulant et les deux objets :
EXTENSION DE DREAMWEAVER CS4 128
Objets de la barre Insertion
<category id="DW_Insertbar_Editorial" name="Editorial" folder="Editorial">
<menubutton id="DW_Insertbar_Markup" name="markup"
image="Editorial\Strikethrough.gif" folder="Editorial">
<button id="DW_Editorial_Strikethrough"
image="Editorial\Strikethrough.gif" file="Editorial\Strikethrough.htm"/>
<button id="DW_Blue_Text" image="Editorial\AddBlue.gif" name="Blue Text"
file="Editorial\AddBlue.htm"/>
</menubutton>
</category>
Test du nouveau menu déroulant
1 Rechargez les extensions. Pour plus d'informations sur le rechargement des extensions, voir « Rechargement
d'extensions » à la page 84.
2 Cliquez sur le menu Editorial.
Le menu déroulant ci-dessous s'affiche :
Fonction de l'API des objets
Cette section décrit les fonctions de l'API des objets. Vous devez définir soit la fonction insertObject(), soit la
fonction objectTag(). Pour plus d'informations sur ces fonctions, voir « insertObject() » à la page 130. Les autres
fonctions sont facultatives.
canInsertObject()
Disponibilité
Dreamweaver MX.
Description
Cette fonction détermine si la boîte de dialogue de l'objet doit être affichée.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne.
Exemple
Le code ci-dessous indique à Dreamweaver de vérifier la présence d'une chaîne spécifique dans un document avant de
permettre à l'utilisateur d'insérer l'objet sélectionné :
EXTENSION DE DREAMWEAVER CS4 129
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("the document must contain a 'hava' string to use this object.");}
return insertionIsValid;}
displayHelp()
Description
Si vous définissez cette fonction, un bouton Aide apparaît sous les boutons OK et Annuler dans la boîte de dialogue
Paramètres. Cette fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoyé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é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éfinie, Dreamweaver suppose que la commande nécessite un DOM valide et synchronise
les modes Code et Création du document avant de l'exécuter. La synchronisation met à jour toutes les modifications
effectuées en mode Affichage de code dans le mode Création.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver renvoie la valeur true si une commande nécessite un DOM valide pour fonctionner, sinon false.
EXTENSION DE DREAMWEAVER CS4 130
Objets de la barre Insertion
insertObject()
Disponibilité
Dreamweaver MX.
Description
Cette fonction est obligatoire si la fonction objectTag() n'est pas définie. Elle est appelée si l'utilisateur clique sur OK.
Elle insère du code dans le document de l'utilisateur et ferme la boîte de dialogue ou affiche un message d'erreur sans
fermer la boîte de dialogue. Il s'agit d'une fonction de substitution à 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ées lorsque l'utilisateur
clique sur OK. Utilisez la fonction insertObject() dans l'une des conditions suivantes :
• Vous devez insérer un code à plusieurs endroits.
• Vous devez insérer un code à un endroit autre que le point d'insertion.
• Vous devez valider une entrée avant d'insérer le code.
Si aucune de ces conditions ne s'applique, utilisez la fonction objectTag().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend soit une chaîne contenant un message d'erreur, soit une chaîne vide. Dans ce dernier cas, la boîte
de dialogue de l'objet se ferme lorsque l'utilisateur clique sur OK. Sinon, Dreamweaver affiche le message d'erreur et
la boîte de dialogue reste à l'écran.
Activateur
canInsertObject()
Exemple
Dans l'exemple ci-dessous, la fonction insertObject() est utilisée car une entrée doit être validée avant d'insérer le
code :
function insertObject() {
var theForm = document.forms[0];
var nameVal = theForm.firstField.value;
var passwordVal = theForm.secondField.value;
var errMsg = "",
var isValid = true;
// ensure that field values are complete and valid
if (nameVal == "" || passwordVal == "") {
errMsg = "Complete all values or click Cancel."
} else if (nameVal.length < 4 || passwordVal.length < 6) {
errMsg = "Your name must be at least four characters, and your password at
least six";
}
if (!errMsg) {
// do some document manipulation here. Exercise left to the reader
}
return errMsg;
}
EXTENSION DE DREAMWEAVER CS4 131
Objets de la barre Insertion
objectTag()
Description
Les fonctions objectTag() et insertObject() s'excluent mutuellement. Si elles sont toutes deux définies dans un
document, la fonction objectTag() est utilisée. Pour plus d’informations, voir « insertObject() » à la page 130.
Cette fonction insère une chaîne de code dans le document de l'utilisateur. Le renvoi d'une chaîne vide ou d'une valeur
null (aussi appelée "return") signale à Dreamweaver qu'aucune action ne doit être effectuée.
Remarque : Dans ce cas, les modifications sont censées avoir été effectuées manuellement avant l'instruction return;
aussi, ne rien faire dans ce cas n'équivaut pas à cliquer sur Annuler.
Dans Dreamweaver, si le mode Code est actif et que la sélection porte sur une plage (par opposition au point
d'insertion), cette dernière est remplacée par la chaîne renvoyée par la fonction objectTag(). La valeur est true,
même si la fonction objectTag() renvoie une chaîne vide ou ne renvoie rien. La fonction objectTag() renvoie une
chaîne vide ou une valeur null car l'utilisateur a déjà modifié manuellement le document. Dans le cas contraire, des
guillemets doubles ("") suppriment souvent les modifications en remplaçant la sélection.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend la chaîne à insérer dans le document de l'utilisateur.
Exemple
L'exemple suivant de la fonction objectTag() insère une combinaison OBJECT/EMBED pour un contrôle ActiveX et
un plug-in spécifiques :
function objectTag() {
return '\n' +
'<OBJECT CLASSID="clsid:166F1OOB-3A9R-11FB-8075444553540000" \n'¬
+ 'CODEBASE="http://www.mysite.com/product/cabs/¬
myproduct.cab#version=1,0,0,0" \n' + 'NAME="MyProductName"> \n' ¬
+ '<PARAM NAME="SRC" VALUE=""> \n' + '<EMBED SRC="" HEIGHT="" ¬
WIDTH="" NAME="MyProductName"> \n' + '</OBJECT>'
}
windowDimensions()
Description
Cette fonction définit les dimensions précises de la boîte de dialogue Options. Si cette fonction n'est pas définie, les
dimensions de la fenêtre sont calculées automatiquement.
Remarque : Ne définissez cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions
supérieures à 640 x 480 pixels.
Arguments
platform
• La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisée par
l'utilisateur.
EXTENSION DE DREAMWEAVER CS4 132
Objets de la barre Insertion
Valeurs renvoyées
Dreamweaver renvoie une chaîne au format "widthInPixels,heightInPixels".
Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaître toutes les options, des
barres de défilement s'affichent.
Exemple
L'exemple suivant de la fonction windowDimensions() règle les dimensions de la boîte de dialogue Paramètres sur
648x 520 pixels sous Windows et sur 660x 580 sur Macintosh :
function windowDimensions(platform){
var retval = ""
if (platform = = "windows"){
retval = "648, 520";
}else{
retval = "660, 580";
}
return retval;
}
133
Chapitre 8 : API de vérification des
problèmes de compatibilité du navigateur
Dans Adobe Dreamweaver, la fonctionnalité BCC (vérification de la compatibilité du navigateur) permet de créer des
mises en forme de page qui fonctionnent bien (d'un point de vue esthétique et fonctionnel) quel que soit le navigateur
en identifiant le code HTML et les feuilles CSS qui risquent de poser des problèmes de compatibilité. Cette
fonctionnalité a recours à JavaScriptpour rechercher dans le document de l'utilisateur les combinaisons HTML et CSS
qui posent problème. Le code JavaScript est stocké dans les fichiers HTML de détection des problèmes, qui doivent
être enregistrés dans le dossier Configuration/BrowserProfiles/Issues/ pour fonctionner correctement.
Procédure de détection
Lorsque l'utilisateur procède à une vérification de compatibilité pour la première fois (ou lorsqu'il clique sur OK dans
la boîte de dialogue relative aux navigateurs cible), les évé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è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éfinie, pour chaque fichier Issue.
4 Dreamweaver appelle la fonction getAffectedBrowserProfiles() pour chaque fichier Issue afin de déterminer
si le ou les navigateurs sélectionnés sont concernés.
5 Dreamweaver appelle la fonction getIssueName() pour chaque fichier Issue afin de déterminer le nom à afficher
dans le panneau Résultats lorsqu'un problème est détecté.
6 Dreamweaver appelle la fonction getIssueDescription pour chaque fichier Issue afin de déterminer le texte à
afficher dans le volet droit du panneau Résultats et dans l'infobulle lorsque le curseur de la souris survole un fichier
Issue en mode Code, en cas de problème détecté.
Les événements suivants se produisent pour chaque navigateur sélectionné dans la boîte de dialogue de configuration
BCC à l'issue de l'étape 6 de la procédure précédente, et pour toutes les vérifications de compatibilité suivantes :
Séquence d'événements
1 Dreamweaver analyse les styles qui s'appliquent au document actuel, qu'ils soient définis en ligne, dans l'en-tête, ou
dans une feuille de style externe, tel que le navigateur concerné les lirait.
2 Dreamweaver appelle la fonction findIssue() pour tous les fichiers Issue qui s'applique au navigateur concerné.
Exemple de fichiers de problèmes
Les exemples suivants portent sur les fichiers ColAndColgroupCapturedByCaption.htm et
ColAndColgroupCapturedByCaption.js situés dans le dossier Configuration/BrowserProfiles/Issues/.
EXTENSION DE DREAMWEAVER CS4 134
API de vérification des problèmes de compatibilité du navigateur
ColAndColgroupCapturedByCaption.htm
<!DOCTYPE HTML SYSTEM "-//
//DWExtension layout-engine 5.0//dialog">
<html>
<head>
<title>Col and Colgroup Captured by Caption</title>
<script src="../../Shared/Common/Scripts/dwscripts.js"></script>
<script src="issue_utils.js"></script>
<script src="ColAndColgroupCapturedByCaption.js"></script>
<script>
//--------------- LOCALIZEABLE GLOBALS-----------------var ISSUE_NAME = "Col and Colgroup/Caption Conflict";
var ISSUE_DESC = "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.";
//--------------- END LOCALIZEABLE--------------</script>
</head>
<body>
</body>
</html>
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 = "", definedStyles = new Array();
// ok, now loop through all the captions, if any.
for (var i=0; i < 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 < allcol.length; x++){
EXTENSION DE DREAMWEAVER CS4 135
API de vérification des problèmes de compatibilité 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 = "";
definedStyles.length = 0;
for (property in props) {
definedStyles.push(property);
}
if (definedStyles.length > 0){
issueNodes.push(currCap);
break;
}
}
}
}
}
return issueNodes;
}
function getAffectedBrowserDisplayNames(){
return new Array("Safari 2.0");
}
function getAffectedBrowserProfiles(){
return new Array("Safari 2.0");
}
function getIssueID(){
return "COL_AND_COLGROUP_CAPTURED_BY_CAPTION";
}
function getIssueName(){
return ISSUE_NAME;
}
function getIssueDescription(){
return ISSUE_DESC;
}
function getConfidenceLevel(){
//DETCON 4
return issueUtils.CONFIDENCE_HIGH;
}
Fonctions de l'API de vérification des problèmes
Toutes les fonctions de l'API de vérification sont requises à l'exception de getAffectedBrowserDisplayNames().
Comme pour toutes les API d'extension, vous devez écrire le corps de chaque fonction et renvoyer une valeur
appropriée à Dreamweaver. Pour plus d'informations sur les fonctions de vérification de la compatibilité du
navigateur, consultez la rubrique « Contenu de page » dans le Guide des API de Dreamweaver.
findIssue()
Disponibilité
Dreamweaver CS3.
EXTENSION DE DREAMWEAVER CS4 136
API de vérification des problèmes de compatibilité du navigateur
Description
Recherche dans le document les combinaisons de styles CSS et de code HTML susceptibles de provoquer un problème
de rendu dans un navigateur.
Arguments
Aucun.
Valeurs renvoyées
Un tableau de nœuds d'élément qui identifient (ou représentent) le problème. Dreamweaver sélectionne ces nœuds
pendant que l'utilisateur navigue parmi les différents problèmes de compatibilité.
Exemple
La fonction findIssue() suivante renvoie une liste de balises <button> auxquelles float: left ou float: right
a été appliqué :
function findIssue(){
var DOM = dw.getDocumentDOM();
var issueNodes = new Array();
var buttons = DOM.getElementsByTagName('button');
var props = null;
for (var i=0; i < buttons.length; i++){
props = window.getDeclaredStyle(buttons[i]);
if (props.cssFloat == "left" || props.cssFloat == "right"){
issueNodes.push(buttons[i]);
}
}
return issueNodes;
}
getAffectedBrowserProfiles()
Disponibilité
Dreamweaver CS3.
Description
Fournit à Dreamweaver la liste des navigateurs posant problème.
Arguments
Aucun.
Valeurs renvoyées
Un tableau de noms de navigateurs, devant tous correspondre à la première ligne d'un profil de navigateur correct
(voir les fichiers TXT dans le dossier Configuration/BrowserProfiles).
Exemple
function getAffectedBrowsers(){
return new Array("Microsoft Internet Explorer 5.0",
"Microsoft Internet Explorer 5.5",
"Microsoft Internet Explorer 6.0");
}
EXTENSION DE DREAMWEAVER CS4 137
API de vérification des problèmes de compatibilité du navigateur
getAffectedBrowserDisplayNames()
Disponibilité
Dreamweaver CS3.
Description
Fournit à Dreamweaver la liste des navigateurs posant problème et visibles par les utilisateurs. Cette fonction est
facultative ; si elle n'est pas fournie, les noms de profil donnés par getAffectedBrowserProfiles() sont utilisés.
Arguments
Aucun.
Valeurs renvoyées
Un tableau de noms de navigateur. Ce tableau doit être parallèle à celui qui a été renvoyé par
getAffectedBrowserProfiles().
Exemple
function getAffectedBrowsers(){
return new Array("IE/Win 5.0",
"IE/Win 5.5",
"IE/Win 6.0");
}
getIssueID()
Disponibilité
Dreamweaver CS3.
Description
Fournit à Dreamweaver un ID unique pour le problème.
Arguments
Aucun.
Valeurs renvoyées
Chaîne avec identificateur unique de problème.
Exemple
function getIssueID() {
return "EXPANDING_BOX_PROBLEM";
}
getIssueName()
Disponibilité
Dreamweaver CS3.
EXTENSION DE DREAMWEAVER CS4 138
API de vérification des problèmes de compatibilité du navigateur
Description
Fournit à Dreamweaver le nom ou une brève description du problème.
Arguments
Aucun.
Valeurs renvoyées
Chaîne contenant le nom ou une brève description du problème.
Exemple
function getIssueName(){
return "The Expanding Box Problem";
}
getIssueDescription()
Disponibilité
Dreamweaver CS3.
Description
Fournit à Dreamweaver une description détaillée du problème.
Arguments
Aucun.
Valeurs renvoyées
Chaîne contenant le nom ou une brève description du problème.
Exemple
function getIssueDescription(){
return "Fixed-dimension boxes will incorrectly expand to fit their
content instead of clipping content at the specified width
or height.";
}
139
Chapitre 9 : Commandes
Les commandes d'Adobe Dreamweaver permettent d'exé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é sur un disque
local. Les commandes peuvent insérer, supprimer ou ré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 éléments d'un tableau et la colonne de
référence du tri). La balise head d'un fichier de commandes contient des fonctions JavaScript qui traitent les entrées de
formulaire de la section body et contrôlent les modifications apportées au document de l'utilisateur.
Le tableau ci-dessous recense les fichiers utilisés pour créer une commande.
Chemin
Fichier
Description
Configuration/Commands/
commandname.htm
Désigne l'interface utilisateur.
Configuration/Commands/
nom_commande.js
Contient les fonctions à exécuter.
Fonctionnement des commandes
Lorsque l'utilisateur clique sur un menu contenant une commande, les événements suivants se produisent :
1 Dreamweaver appelle la fonction canAcceptCommand() pour déterminer si l'option de menu doit être désactivée.
Si la fonction canAcceptCommand() renvoie une valeur false, la commande est estompée dans le menu et la
procédure s'arrête. Si la fonction canAcceptCommand() renvoie une valeur true, la procédure peut se poursuivre.
2 L'utilisateur sélectionne une commande dans le menu.
3 Dreamweaver appelle la fonction receiveArguments(), si elle est définie, dans le fichier de commandes de menu
sélectionné afin de permettre à 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éfinie, pour identifier les boutons qui figurent
dans la partie droite de la boîte de dialogue Options et le code qui doit être exécuté 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îte de dialogue Options contenant les éléments
body du fichier. Si la fonction windowDimensions() n'est pas définie, Dreamweaver redimensionne
automatiquement la boîte de dialogue.
6 Si la balise body du fichier de commandes contient le gestionnaire onLoad, Dreamweaver l'exécute (que la boîte de
dialogue soit affichée ou non). Si aucune boîte de dialogue ne s'affiche, les étapes restantes ne sont pas exécutées.
7 L'utilisateur sélectionne les options de la commande. Dreamweaver exécute les gestionnaires d'événements associés
aux champs du formulaire au fur et à mesure que l'utilisateur les rencontre.
8 L'utilisateur clique sur l'un des boutons définis par la fonction commandButtons().
9 Dreamweaver exécute le code associé. La boîte de dialogue reste affichée jusqu'à ce que l'un des scripts de la
commande appelle la fonction window.close().
EXTENSION DE DREAMWEAVER CS4 140
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êcher qu'une commande ne s'affiche dans le menu Commandes, insérez le
commentaire suivant sur la première ligne du fichier :
<!-- MENU-LOCATION=NONE -->
Lorsque cette ligne est présente, Dreamweaver ne crée pas d'élément de menu pour le fichier et vous devez appeler
dw.runCommand() pour exécuter la commande.
Exemple de commande simple
Cette extension simple ajoute un élément dans le menu Commandes et vous permet de convertir le texte sélectionné
dans votre document en majuscules ou en minuscules. Lorsque vous cliquez sur l'élément de menu, une interface à
trois boutons est activée et vous permet de soumettre votre choix.
Pour créer cette extension, vous devez créer l'interface utilisateur, écrire le code JavaScript et tester l'extension.
Cet exemple cré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 échéant, vous pouvez créer uniquement le fichier Change
Case.htm et insérer le code JavaScript dans la section head.
Création de l'interface utilisateur
L'interface utilisateur est un formulaire qui contient deux options, permettant à l'utilisateur de sélectionner majuscules
ou minuscules.
1 Créez un document vierge.
2 Ajoutez le code suivant dans le fichier pour créer le formulaire :
EXTENSION DE DREAMWEAVER CS4 141
Commandes
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<HTML>
<HEAD>
<Title>Make Uppercase or Lowercase</Title>
<SCRIPT SRC="Change Selection Case.js"></SCRIPT>
</HEAD>
<BODY>
<form name="uorl">
<table border="0">
<!--DWLayoutTable-->
<tr>
<td valign="top" nowrap> <p>
<label>
<input type="radio" name="RadioGroup1" value="uppercase" checked>
Uppercase</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="lowercase">
Lowercase</label>
</p></td>
</tr>
</table>
</form>
</BODY>
</HTML>
3 Enregistrez le fichier sous le nom Change Case.htm dans le dossier Configuration/Commands.
Le contenu de la balise Title, Majuscules et minuscules, s'affiche dans la barre en haut de la boîte de dialogue.
Dans le formulaire, un tableau composé de deux cellules contrôle la mise en forme des éléments. Les cellules
contiennent deux options : Majuscules et Minuscules. L'option Majuscules possède l'attribut checked, ce qui en fait la
sélection par défaut et fait en sorte que l'utilisateur doit sélectionner une des deux options ou annuler la commande.
Le formulaire doit s'apparenter à l'image suivante :
La fonction commandBUttons() insère les boutons OK et Annuler qui permettent à l'utilisateur de valider le choix ou
d'annuler l'opération. Pour plus d’informations, voir « commandButtons() » à la page 147.
Ecriture du code JavaScript
L'exemple suivant est composé de deux fonctions API d'extension, canAcceptCommand() et commandButtons(),
appelées par Dreamweaver, et d'une fonction définie par l'utilisateur, changeCase(), appelée depuis la fonction
commandButtons().
EXTENSION DE DREAMWEAVER CS4 142
Commandes
Dans cet exemple, vous allez rédiger du code JavaScript pour exécuter les tâches suivantes :
Déterminer si la commande doit être activée ou estompée.
La première tâche lors de la création d'une commande est de déterminer les cas où l'élément doit être actif ou non.
Lorsque l'utilisateur clique sur le menu Commands, Dreamweaver appelle la fonction canAcceptCommand() pour
chaque élément de menu afin de déterminer si celui-ci doit être activé. Si canAcceptCommand() renvoie la valeur
true, Dreamweaver affiche le texte d'élément de menu comme actif ou activé. Si canAcceptCommand() renvoie la
valeur false, Dreamweaver estompe l'élément de menu. Dans l'exemple suivant, l'élément de menu est actif lorsque
l'utilisateur a sélectionné du texte dans le document.
1 Cré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] && (theSelNode.nodeType == Node.TEXT_NODE¬
|| theSelNode.hasChildNodes() && (theChildren[0].nodeType == ¬
Node.TEXT_NODE)));
}
3 Enregistrez le fichier sous le nom Change Case.js dans le dossier Configuration/Commands.
Les premières lignes de la fonction canAcceptCommand() extraient le texte sélectionné en récupérant le DOM du
document de l'utilisateur. La fonction getSelection() est alors appelée sur l'objet de document. Ensuite, la fonction
récupère le nœud qui contient le texte sélectionné, suivi par ses enfants, comme indiqué dans le code suivant. Enfin, la
dernière ligne vérifie si la sélection (ou son premier enfant) est constituée de texte et envoie en retour la valeur true
ou false.
La première partie de l'instruction return (theSel[0] != theSel[1]) vérifie si l'utilisateur a effectué une sélection
dans le document. La variable theSel est un tableau à deux entrées maintenant les décalages de début et de fin de la
sélection dans le document. Si les deux valeurs ne sont pas égales, du contenu a été sélectionné. Si les valeurs des deux
entrées sont égales, il y a juste un point d'insertion. Rien n'a été sélectionné.
EXTENSION DE DREAMWEAVER CS4 143
Commandes
La partie suivante de l'instruction return (&& (theSelNode.nodeType == Node.TEXT_NODE) vérifie que le nœud
sélectionné est constitué 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érifier si le nœud a des enfants (|| theSelNode.hasChildNodes()) et
si le premier nœud enfant est de type texte (&& (theChildren[0].nodeType == Node.TEXT_NODE))). Si les deux
conditions sont réunies (true), canAcceptCommand() renvoie la valeur true et Dreamweaver active l'élément de menu
en bas du menu Commandes, comme indiqué ci-dessous :
EXTENSION DE DREAMWEAVER CS4 144
Commandes
Dans le cas contraire, canAcceptCommand() renvoie la valeur false et Dreamweaver estompe l'élément, comme
indiqué ci-dessous :
Association de fonctions aux boutons OK et Annuler
Lorsque l'utilisateur clique sur le bouton OK ou Annuler, l'extension doit exécuter l'action appropriée. Pour ce faire,
vous spécifiez la fonction JavaScript associée à 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érez le code suivant :
function commandButtons() {
return new Array("OK", "changeCase()", "Cancel", "window.close()");
}
3 Enregistrez le fichier.
La fonction commandButtons() entraîne l'affichage des boutons OK et Annuler par Dreamweaver et indique à celuici la marche à suivre lorsque l'utilisateur clique sur ces boutons. La fonction commandButtons() indique à
Dreamweaver qu'il faut appeler changeCase() lorsque l'utilisateur clique sur OK et appeler window.close() lorsque
l'utilisateur clique sur Annuler.
Pour permettre à l'utilisateur de choisir entre majuscules et minuscules
Lorsque l'utilisateur clique sur un élément de menu, l'extension nécessite un mécanisme permettant à l'utilisateur de
choisir entre majuscules et minuscules. L'interface utilisateur fournit ce mécanisme en définissant deux boutons radio
permettant d'offrir ce choix à l'utilisateur.
1 Ouvrez le fichier Change Case.js.
2 En fin de fichier, insérez le code suivant :
EXTENSION DE DREAMWEAVER CS4 145
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 < 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éfinie par l'utilisateur qui est appelée par la fonction commandButtons()
lorsque l'utilisateur clique sur OK. Cette fonction modifie la casse du texte sélectionné (passage en majuscules ou
minuscules). L'interface utilisateur reposant sur des boutons radio, une sélection sera obligatoirement effectuée ; il
n'est pas nécessaire de tester le cas où aucun choix n'est effectué par l'utilisateur.
EXTENSION DE DREAMWEAVER CS4 146
Commandes
La fonction changeCase() teste en premier lieu la propriété document.forms[0].elements[0].checked. La
propriété document.forms[0].elements[0] se rapporte au premier élément du premier formulaire de l'objet de
document actuel, à savoir l'interface utilisateur de l'extension. La propriété checked prend la valeur true si l'élément
est activé.Dans le cas contraire, il prend la valeur false. Dans l'interface, elements[0] se rapporte au premier
bouton radio, à savoir le bouton Majuscules. Un des boutons radio étant forcément sélectionné lorsque l'utilisateur
clique sur OK, le code suppose que, si le choix n'est pas Majuscules, c'est Minuscules qui a été choisi. La fonction règle
la variable uorl sur u ou l pour stocker la réponse de l'utilisateur.
Le code restant dans la fonction récupère le texte sélectionné, le convertit dans la casse sélectionnée et le copie de
nouveau à sa place dans le document.
Pour extraire le texte sélectionné pour le document de l'utilisateur, la fonction récupère le DOM. Elle récupère ensuite
l'élément racine du document, à 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électionné. Il récupère également les nœuds enfants (theSelNode.childNodes) au cas où la sélection serait une
balise contenant du texte, comme <b>text</b>.
S'il y a des nœuds enfants, (hasChildNodes() renvoie la valeur true), la commande navigue de nœud en nœud à la
recherche d'un nœud constitué de texte. Si un tel nœud est trouvé, le texte (theChildren[i].data) est stocké dans
selText et les décalages du nœud textuel sont stockés dans theSel.
S'il n'y a aucun nœud enfant, la commande appelle la fonction getSelection() et stocke les décalages de début et de
fin de sélection dans theSel. Il extrait ensuite la chaîne entre ces deux décalages et la conserve dans selText.
La fonction vérifie alors la variable uorl pour déterminer si l'utilisateur a sélectionné les majuscules. Si c'est le cas, la
fonction réécrit le code HTML dans le document dans différentes sections : tout d'abord, le début du document au
début de la sélection, puis le texte sélectioné, converti en majuscules (selText.toUppercase()), et enfin la fin du
texte sélectionné à la fin du document.
Si l'utilisateur sélectionne minuscules, la fonction effectue la même opération mais appelle selText.toLowerCase()
pour convertir le texte sélectionné en minuscules.
Finalement, changeCase() réinitialise la sélection et appelle window.close() pour fermer l'interface utilisateur.
Test de l'extension
Une fois les fichiers placés dans le dossier Commands, vous pouvez tester l'extension.
1 Redémarrez Dreamweaver ou rechargez les extensions. Pour plus d'informations sur le rechargement des
extensions, voir « Rechargement d'extensions » à la page 84.
L'entrée Modifier la casse doit maintenant être affichée dans le menu Commandes.
2 Tapez du texte dans un document.
3 Sélectionnez le texte.
Remarque : La commande Modifier la casse est estompée tant que vous n'avez pas sélectionné de texte dans le
document.
4 Sélectionnez Modifier la casse dans le menu Commandes.
Le texte change de casse.
EXTENSION DE DREAMWEAVER CS4 147
Commandes
Fonctions de l'API des commandes
Les fonctions personnalisées de l'API des commandes de menu ne sont pas obligatoires.
canAcceptCommand()
Description
Cette fonction indique si la commande est adaptée à la sélection en cours.
Remarque : Ne définissez la fonction canAcceptCommand() que s'il existe au moins un cas où elle renvoie la valeur
false. Si la fonction n'est pas définie, la commande est considérée comme appropriée. Ce processus entraîne des gains
de temps et de performances.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver s'attend à recevoir la valeur true si la commande est appropriée. Si la valeur est false, la commande
apparaît estompée dans le menu.
Exemple
Dans l'exemple suivant, la fonction canAcceptCommand() rend la commande disponible uniquement lorsque la
sélection correspond à un tableau :
function canAcceptCommand(){
var retval=false;
var selObj=dw.getDocumentDOM.getSelectedNode();
return (selObj.nodeType == Node.ELEMENT_NODE && ¬
selObj.tagName=="TABLE");{
retval=true;
}
return retval;
}
commandButtons()
Description
Cette fonction définit les boutons devant figurer dans la boîte de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparaît et la section body du fichier de
commandes s'étend de façon à remplir la totalité de la boîte de dialogue.
Par défaut, ces boutons s'affichent dans le haut de la boîte de dialogue. Vous pouvez placer ces boutons dans le bas de
la boîte de diualogue en définissant deux valeurs supplémentaires dans la fonction commandButtons().
Par défaut, les boutons sont alignés à droite. La définition de la valeur PutButtonsOnLeft entraîne l'alignement des
boutons suivants à gauche sur la même ligne.
Arguments
Aucun.
EXTENSION DE DREAMWEAVER CS4 148
Commandes
Valeurs renvoyées
Dreamweaver renvoie un tableau contenant un nombre pair d'éléments. Le premier élément est une chaîne contenant
le libellé du premier bouton. Le deuxième élément est une chaîne de code JavaScript définissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres éléments définissent les boutons supplémentaires de la
même manière.
Exemple
L'exemple suivant de commandButtons() définit trois boutons : OK, Cancel et Help, placés dans le coin supérieur droit
(position par défaut) de la boîte de dialogue :
function commandButtons(){
return new Array("OK" , "doCommand()" ,
"Cancel" , "window.close()" ,
"Help" , "showHelp()");
}
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îte de dialogue. Lorsque la première
valeur de la plage renvoyées est PutButtonsOnBottom, vous pouvez définir la seconde valeur comme defaultButton,
avec le nom d'un des boutons. Ce bouton est sélectionné par défaut et est utilisé lorsque l'utilisateur appuie sur la
touche Entrée. Dans cet exemple, OKbutton est défini comme bouton par défaut.
function commandButtons(){
return new Array("PutButtonsOnBottom" , "OkButton defaultButton" ,
"OK" , "doCommand()" ,
"Cancel" , "window.close()" ,
"Help" , "showHelp()");
}
Exemple
Dans l'exemple suivant, le bouton Help est aligné à gauche à l'aide de PutButtonsOnLeft.
function commandButtons(){
return new Array("PutButtonsOnBottom", "OkButton defaultButton",
"OK", "doCommand()",
"Cancel", "window.close()",
"PutButtonsOnLeft",
"Help" , "showHelp()");}
isDOMRequired()
Description
Cette fonction dé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éfinie, Dreamweaver suppose que la commande nécessite un DOM valide et
synchronise les modes Affichage de code et Création du document avant de l'exécuter. La synchronisation entraîne la
mise à jour de toutes les modifications effectuées en mode Affichage de code dans le mode Création.
Arguments
Aucun.
EXTENSION DE DREAMWEAVER CS4 149
Commandes
Valeurs renvoyées
Dreamweaver renvoie la valeur true si une commande nécessite un DOM valide pour fonctionner, sinon false.
receiveArguments()
Description
Cette fonction traite tous les arguments provenant d'un élément de menu ou de la fonction dw.runCommand().
Arguments
{arg1}, {arg2},...{argN}
• Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction
receiveArguments() sous forme d'un ou plusieurs arguments. Les arguments peuvent également être transmis à
une commande par la fonction dw.runCommand().
Valeurs renvoyées
Dreamweaver ne renvoie rien.
windowDimensions()
Description
Cette fonction définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les
dimensions de la fenêtre sont calculées automatiquement.
Remarque : Ne définissez cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions
supérieures à 640 x 480 pixels.
Arguments
platform
• La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisée par
l'utilisateur.
Valeurs renvoyées
Dreamweaver renvoie une chaîne au format "widthInPixels,heightInPixels".
Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaître toutes les options, des
barres de défilement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue des
paramètres à 648 x 520 pixels :
function windowDimensions(){
return "648,520";
}
150
Chapitre 10 : Menus et commandes de
menu
Adobe Dreamweaver crée les menus à partir de la structure définie dans le fichier menus.xml du dossier
Configuration/Menus de Dreamweaver. Vous pouvez réorganiser, renommer ou supprimer des commandes de menu
en modifiant le fichier menus.xml. Vous pouvez é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 à l'aide de
l'éditeur de raccourcis clavier (voir l'aide de Dreamweaver). Les modifications effectuées dans les menus Dreamweaver
ne sont prises en compte qu'après le redémarrage de Dreamweaver ou le rechargement des extensions.
Fichier menus.xml
Le fichier menus.xml contient une liste structurée des barres de menus, menus, commandes de menu, séparateurs,
listes de raccourcis et raccourcis clavier. Des balises XML décrivent ces éléments ; vous pouvez les modifier dans un
é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ème d'exploitation multiutilisateurs, vous pouvez apporter dans Dreamweaver des modifications qui se
répercutent sur menus.xml. Par exemple, vous pouvez modifier des raccourcis clavier à l'aide de l'éditeur de raccourcis
clavier. Dans un tel cas, Dreamweaver crée un fichier menus.xml dans votre dossier Configuration d'utilisateur. Pour
personnaliser menus.xml dans un système d'exploitation multi-utilisateur, modifiez la copie du fichier dans votre
dossier de configuration utilisateur. Vous pouvez également copier le fichier menus.xml principal dans votre de
configuration utilisateur si Dreamweaver n'y a pas encore créé de version. Pour plus d'informations, voir « Dossiers de
configuration multi-utilisateur » à la page 83.
Si vous ouvrez le fichier menus.xml dans un éditeur XML, il se peut que des messages d'erreur concernant les
esperluettes (&) du fichier menus.xml s'affichent. Nous vous recommandons de modifier le fichier menus.xml dans un
éditeur de texte ; é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é 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ée par des balises menu bar d'ouverture et de fermeture) peut ê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î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és par des balises menu. Chacun de ces menus comporte une ou
plusieurs commandes de menu, indiquées par des balises menuitem et définies par divers attributs. Un menu peut
également comporter des séparateurs (indiqués par des balises separator) ainsi que des sous-menus.
EXTENSION DE DREAMWEAVER CS4 151
Menus et commandes de menu
Outre les raccourcis clavier principaux associé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établir. CTRL+MAJ+Z et Commande+MAJ+Z sont des raccourcis secondaires pour cette fonction Rétablir.
Ces raccourcis alternatifs et contextuels (ainsi que d'autres raccourcis ne pouvant pas être représentés dans les balises
des commandes de menu) sont définis dans les listes de raccourcis du fichier menus.xml. Ces listes de raccourcis
(indiquées par des balises shortcutlist) comportent un ou plusieurs raccourcis indiqués par des balises shortcut.
Les sections ci-après décrivent la syntaxe des balises du fichier menus.xml. Les attributs facultatifs sont signalés dans
la liste des attributs par des accolades ({}). Les attributs qui ne sont pas signalés ainsi sont considérés comme
obligatoires.
<menubar>
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 "".
•
app Nom de l'application dans laquelle la barre de menus est disponible. Non utilisé actuellement.
•
id ID de menu de la barre de menus. Les ID de menu du fichier menus.xml doivent tous être uniques.
•
platform Indique que la barre de menus ne doit apparaître que sur la plate-forme spécifiée. Les valeurs possibles
sont "win" et "mac".
Contenu
Cette balise doit comporter une ou plusieurs balises menu.
Contenant
Aucun.
Exemple
La barre de menus principale (fenêtre de document) est définie par la balise menubar suivante :
<menubar name="Main Window" id="DWMainWindow">
<!-- menu tags here -->
</menubar>
<menu>
Description
Fournit des informations sur un menu ou un sous-menu de la structure de menus de Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 152
Menus et commandes de menu
Attributs
name, {app}, id, {platform}, {showIf}
•
name Nom du menu tel qu'il apparaît dans la barre de menus. Pour définir la clé d'accès (mnémonique) du menu
sous Windows, insérez un trait de soulignement (_) avant la lettre d'accès. Sur Macintosh, le trait de soulignement
est supprimé automatiquement.
•
app Nom de l'application dans laquelle le menu est disponible. Non utilisé actuellement.
•
id ID du menu. Les ID de menu du fichier doivent tous être uniques.
•
platform Indique que le menu ne doit apparaître que sur la plate-forme spécifiée. Les valeurs possibles sont "win"
et "mac".
•
showIf Indique que le menu ne doit apparaître que si l'activateur Dreamweaver spécifié 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écifier plusieurs activateurs en
les séparant par des virgules (chaque virgule signifie ET). Vous pouvez utiliser des points d'exclamation ("!") à
titre d'exclusion. Ainsi, si vous souhaitez que le menu n'apparaisse qu'en mode Code dans une page ASP,
définissez les attributs de la façon suivante : showIf="_VIEW_CODE, _SERVERMODEL_ASP".
Contenu
Cette balise peut contenir une ou plusieurs balises menuitem et separator. Elle peut également contenir d'autres
balises menu (pour créer des sous-menus) ainsi que des balises HTML comment standard.
Contenant
Cette balise doit être imbriquée dans une balise menubar.
Exemple
<menu name="_File" id="DWMenu_File">
<!-- menuitem, separator, menu, and comment tags here -->
</menu>
<menuitem>
Description
Dé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égrée au menu. Un trait de soulignement indique que la lettre suivante est définie
comme clé d'accès (mnémonique) de la commande (sous Windows uniquement).
•
id Permet à Dreamweaver d'identifier l'élément. Cet ID doit ê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îne unique comme préfixe aux ID des commandes de menu.
•
app Nom de l'application dans laquelle figure la commande de menu. Non utilisé actuellement.
EXTENSION DE DREAMWEAVER CS4 153
Menus et commandes de menu
•
key Raccourci clavier de la commande, le cas échéant. Utilisez les chaînes suivantes pour spécifier les touches de
modification :
•
Cmd désigne la touche Ctrl (Windows) ou Commande (Macintosh).
•
Alt et Opt désignent la touche Alt (Windows) ou la touche Option (Macintosh). Ces chaînes sont interchangeables.
•
Shift désigne la touche Maj, quelle que soit la plate-forme utilisée.
•
Ctrl désigne la touche Ctrl, quelle que soit la plate-forme utilisée.
• Lorsque plusieurs touches de modification sont assignées à un raccourci, elles sont séparées par un signe Plus (+).
Par exemple, la chaî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écuter la commande de menu.
• Les touches spéciales sont désignées par leur nom : F1 à F12, Pg.
Suiv., Pg. Préc., Orig., Fin, Inser, Suppr,
Tab, Echap, Ret. Arr. et Espace. Vous pouvez également assigner les touches de modification aux touches
spéciales.
•
platform Indique la plate-forme sur laquelle apparaît l'élément. Les valeurs valides sont "win" (Windows) ou "mac"
(Macintosh). Si vous ne spécifiez aucun attribut platform, la commande de menu apparaît sur les deux platesformes. Si vous souhaitez qu'une commande de menu ait un comportement spécifique en fonction de la plateforme, spécifiez deux commandes de menu avec un nom identique (mais des ID distincts) : l'une avec
platform="win" et l'autre avec platform="mac".
•
enabled Fournit un code JavaScript (généralement un appel de fonction JavaScript) déterminant si la commande
de menu est actuellement activée. Si la fonction renvoie la valeur false, la commande de menu est estompée. La
valeur par défaut est "true", mais il est préférable de spécifier systématiquement une valeur même si la valeur est
"true".
•
argumentsFournit des arguments que Dreamweaver transmet au code dans le fichier JavaScript indiqué dans
l'attribut file. Ces arguments doivent être entourés d'apostrophes ('), à l'intérieur de la chaîne de valeur d'un
attribut délimitée par des guillemets doubles.
•
command Spécifie une expression JavaScript qui est exécutée lorsque l'utilisateur sélectionne l'élément dans le menu.
Pour spécifier un code JavaScript complexe, utilisez un fichier JavaScript (indiqué dans l'attribut file). Vous devez
spécifier l'attribut file ou command pour chaque commande de menu.
•
file Nom du fichier HTML contenant le code JavaScript qui contrôle la commande de menu. Spécifiez le chemin
du fichier par rapport au dossier Configuration. Par exemple, pour la commande de menu Aide Bienvenue,
spécifiez l'attribut file="Commands/Welcome.htm". L'attribut file remplace les attributs command, enabled et
checked. Vous devez spécifier l'attribut file ou command pour chaque commande de menu. Pour plus
d'informations sur la création d'un fichier de commandes par l'intermédiaire du panneau Historique, voir l'aide de
Dreamweaver. Pour plus d'informations sur la rédaction des commandes JavaScript, voir « Commandes » à la
page 139.
•
checked Expression JavaScript déterminant si une coche doit s'afficher en regard de la commande de menu dans
le menu; si la valeur de cette expression est « true », la coche s'affiche.
•
dynamic Si cet attribut est spécifié, il indique que la commande de menu doit être déterminée dynamiquement par
un fichier HTML ; ce dernier contient un code JavaScript définissant le texte et l'état de la commande de menu. Si
vous spécifiez l'attribut dynamic pour une balise, vous devez également spécifier l'attribut file.
•
isdomrequired Indique s'il est nécessaire de synchroniser les modes Création et Code avant d'exécuter le code
associé à cette commande de menu. Les valeurs admises sont "true" (par défaut) et "false". Si vous définissez la
valeur "false", les modifications apportées au fichier par la commande de menu n'utilisent pas le DOM
Dreamweaver. Pour plus d'informations sur le DOM, voir « Modèle d'objet de document (DOM) Dreamweaver »
à la page 101.
EXTENSION DE DREAMWEAVER CS4 154
Menus et commandes de menu
•
showIf Indique que la commande de menu ne doit apparaître que si la valeur de l'activateur Dreamweaver spécifié
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écifier plusieurs activateurs en les séparant par des virgules (chaque virgule signifie ET). Vous pouvez utiliser des
points d'exclamation ("!") à titre d'exclusion. Ainsi, si vous souhaitez que la commande de menu apparaisse
en mode Code, mais pas sur une page ColdFusion, définissez l'attribut de la façon suivante :
showIf="_VIEW_CODE, !_SERVERMODEL_CFML".
Contenu
Aucun (balise vide).
Contenant
Cette balise doit être imbriquée dans une balise menu.
Exemple
<menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()"
id="DWMenu_File_New" />
<separator>
Description
Indique qu'un séparateur doit apparaître à l'emplacement correspondant du menu.
Attributs
{app}
app Nom de l'application dans laquelle le séparateur apparaît. Non utilisé actuellement.
Contenu
Aucun (balise vide).
Contenant
Cette balise doit être imbriquée dans une balise menu.
Exemple
<separator />
<shortcutlist>
Description
Spé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é actuellement.
EXTENSION DE DREAMWEAVER CS4 155
Menus et commandes de menu
•
id ID de la liste de raccourcis. Cet ID doit être identique à celui de la barre de menus (ou menu contextuel) de
Dreamweaver à laquelle les raccourcis sont associés. Les valeurs admises sont les suivantes : "DWMainWindow",
"DWMainSite", "DWTimelineContext" et "DWHTMLContext".
•
platform Indique que la liste de raccourcis ne doit apparaître que sur la plate-forme spécifiée. Les valeurs possibles
sont "win" et "mac".
Contenu
Une ou plusieurs balises shortcut peuvent être imbriquées dans cette balise. Celle-ci peut également contenir une ou
plusieurs balises comment (dont la syntaxe est identique à celle des balises comment HTML).
Contenant
Aucun.
Exemple
<shortcutlist id="DWMainWindow">
<!-- shortcut and comment tags here -->
</shortcutlist>
<shortcut>
Description
Spé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
« <menuitem> » à la page 152.
•
app Nom de l'application dans laquelle le raccourci est disponible. Non utilisé actuellement.
•
platform Indique que le raccourci ne fonctionne que sur la plate-forme spécifiée. Les valeurs possibles sont "win"
et "mac". Si vous ne définissez pas cet attribut, le raccourci fonctionne sur les deux plates-formes.
•
file Chemin d'accès au fichier contenant le code JavaScript exécuté par Dreamweaver lorsque le raccourci clavier
est utilisé. L'attribut file prime sur l'attribut command. Vous devez spécifier l'attribut file ou command pour
chaque raccourci.
•
arguments Fournit des arguments que Dreamweaver transmet au code dans le fichier JavaScript indiqué dans
l'attribut file. Ces arguments doivent être entourés d'apostrophes ('), à l'intérieur de la chaîne de valeur d'un
attribut délimitée par des guillemets doubles.
•
command Code JavaScript exécuté par Dreamweaver lorsque le raccourci clavier est utilisé. Spécifiez l'attribut file
or command pour chaque raccourci.
•
id Identificateur unique d'un raccourci.
•
name Nom de la commande exécutée par le raccourci clavier, basé sur le modèle des noms de commande de menu.
Par exemple, l'attribut name du raccourci F12 correspond à "Aperçu dans le navigateur principal".
Contenu
Aucun (balise vide).
EXTENSION DE DREAMWEAVER CS4 156
Menus et commandes de menu
Contenant
Cette balise doit être imbriquée dans une balise shortcutlist.
Exemple
<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm"
arguments="'redo'" id="DWShortcuts_Edit_Redo" />
<tool>
Description
Cette balise représente un outil unique et contient tous les raccourcis associés à ce dernier sous la forme de sous-balises,
stockées dans le fichier menus.xml.
Attributs
{name}, id
•
name Version localisée du nom de l'outil.
•
id Identificateur d'outil interne qui désigne l'outil auquel s'appliquent les raccourcis.
Contenu
Cette balise peut contenir une ou plusieurs balises activate, override ou action.
Contenant
Cette balise doit être imbriquée dans une balise menu.
Exemple
<tool name="Hand tool" id="com.Macromedia.dreamweaver.tools.hand">
<!-- tool tags here -->
</tool>
<action>
Description
Contient la combinaison de touches et le code JavaScript à exécuter lorsque l'outil est actif et que l'utilisateur compose
la combinaison de touches.
Attributs
{name}, key, command, id
•
name Version localisée de l'action.
•
key Combinaison de touches permettant d'exécuter l'action. Pour plus d'informations sur la syntaxe, voir
« <menuitem> » à la page 152.
•
command Instructions JavaScript à exécuter. Le format de cet attribut est identique à celui de l'attribut command de
« <shortcut> » à la page 155.
•
id Identificateur unique de l'action.
EXTENSION DE DREAMWEAVER CS4 157
Menus et commandes de menu
Contenu
Aucun (balise vide).
Contenant
Cette balise doit être imbriquée dans une balise tool.
Exemple
<action name="Set magnification to 50%" key="5" command="dw.activeViewScale = 0.50" id
="DWTools_Zoom_50" />
<activate>
Description
Contient la combinaison de touches permettant d'activer l'outil.
Attributs
{name}, key, id
•
name Version localisée de l'action.
•
key Combinaison de touches permettant d'activer l'outil. Pour plus d'informations sur la syntaxe, voir
« <menuitem> » à la page 152.
•
id Identificateur unique de l'action.
Contenu
Aucun (balise vide).
Contenant
Cette balise doit être imbriquée dans une balise tool.
Exemple
<activate name="Switch to Hand tool" key="H" id="DWTools_Hand_Active1" />
<override>
Description
Contient la combinaison de touches permettant d'activer temporairement l'outil. S'il exécute un autre outil modal,
l'utilisateur peut appuyer sur cette touche et la maintenir enfoncée pour basculer d'un outil à l'autre.
Attributs
{name}, key, id
•
name Version localisée de l'action.
•
key Combinaison de touches permettant d'activer rapidement l'outil. Pour plus d'informations sur la syntaxe, voir
« <menuitem> » à la page 152.
•
id Identificateur unique de l'action.
EXTENSION DE DREAMWEAVER CS4 158
Menus et commandes de menu
Contenu
Aucun (balise vide).
Contenant
Cette balise doit être imbriquée dans une balise tool.
Exemple
<override name="Quick switch to Hand tool" key="Space" id="DWTools_Hand_Override" />
Modification des menus et des commandes de menu
En modifiant le fichier menus.xml, vous pouvez déplacer les commandes de menu au sein d'un menu ou d'un menu à
un autre. Vous pouvez également ajouter des séparateurs dans les menus ou les supprimer et déplacer des menus au
sein d'une barre de menus ou d'une barre de menus à une autre.
En outre, vous pouvez ajouter des éléments dans les menus contextuels ou en retirer en appliquant la même procédure
que pour les autres menus.
Pour plus d'informations, voir « Fichier menus.xml » à la page 150.
Dé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 éditeur de texte comme BBEdit, Macromedia® HomeSite® ou Wordpad. Ne
l'ouvrez pas dans Dreamweaver.
4 Coupez une balise menuitem complète, depuis la chaîne <menuitem initiale jusqu'à la séquence /> finale.
5 Placez le point d'insertion à 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 à son nouvel emplacement.
Création d'un sous-menu lors du dé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é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éparateur entre deux commandes de menu
• Insérez une balise separator/ entre les deux balises menuitem.
Suppression d'un séparateur existant
• Supprimez la ligne separator/ correspondante.
Déplacement d’un menu
1 Quittez Dreamweaver.
2 Effectuez une copie de sauvegarde du fichier menus.xml.
EXTENSION DE DREAMWEAVER CS4 159
Menus et commandes de menu
3 Ouvrez le fichier menus.xml dans un é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'à 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 à 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 é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équate, puis modifiez son
attribut name. Si vous modifiez le nom d'un menu, localisez la balise menu adé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éfaut ne vous conviennent pas, vous pouvez les modifier, les supprimer ou en cré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 également possible de modifier les raccourcis clavier directement dans le fichier
menus.xml, mais les risques d'erreur sont plus élevé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 éditeur de texte comme BBEdit, HomeSite ou Wordpad. Ne l'ouvrez pas dans
Dreamweaver.
4 Consultez le tableau des raccourcis clavier (disponible à partir du centre de support de Dreamweaver sur
http://www.adobe.com/go/dreamweaver_support_fr) et choisissez un raccourci non utilisé ou que vous souhaitez
réassigner.
Si vous réassignez un raccourci clavier, reportez les modifications sur une copie imprimée de la matrice pour vous
y référer ultérieurement.
5 Lorsque vous réassignez un raccourci clavier, localisez la commande de menu à laquelle il renvoie, puis supprimez
l'attribut key="shortcut" de cette commande de menu.
6 Localisez la commande de menu à laquelle vous souhaitez assigner ou réassigner le raccourci clavier.
7 Si un raccourci clavier est déjà assigné à cette commande de menu, localisez l'attribut key dans la ligne. Si aucun
raccourci ne lui a été assigné, ajoutez l'attribut key="" parmi les autres attributs au sein de la balise menuitem.
8 Entre les guillemets (") de l'attribut key, saisissez le nouveau raccourci clavier.
Si vous saisissez une combinaison de touches, séparez ces dernières par un signe Plus (+). Pour plus d'informations
sur les modificateurs, voir la description de la balise menuitem dans « <menuitem> » à la page 152.
EXTENSION DE DREAMWEAVER CS4 160
Menus et commandes de menu
Si le raccourci clavier est déjà assigné à une autre commande de menu et que vous n'avez pas supprimé cette
assignation, le raccourci ne s'applique qu'à la première commande à laquelle il est associé dans le fichier menus.xml.
Remarque : Vous pouvez utiliser un même raccourci clavier pour une commande de menu Windows et Macintosh.
9 Saisissez le nouveau raccourci à l'emplacement adéquat de la matrice des raccourcis clavier.
Menus déroulants et menus contextuels
Dreamweaver comporte des menus déroulants ou contextuels dans un grand nombre de panneaux et de boîtes de
dialogue. Certains menus contextuels sont définis dans le fichier menus.xml. Les autres sont définis dans divers fichiers
XML. Il vous est possible de créer, supprimer ou modifier des éléments de ces menus. Cependant, en règle générale, il
est préférable de créer une extension afin d'effectuer ces changements.
Les menus déroulants et contextuels de Dreamweaver répertoriés ci-dessous sont définis dans des fichiers XML au
moyen de balises identiques à celles du fichier menus.xml :
• Sources de données (menu déroulant Plus (+) du panneau Liaisons) : définies dans les fichiers DataSources.xml
situés dans les sous-dossiers du dossier DataSources.
• Comportements de serveur (menu déroulant Plus (+) du panneau Comportements de serveur) : définis dans les
fichiers ServerBehaviors.xml situés dans les sous-dossiers du dossier ServerBehaviors.
• Formats de serveur (menu déroulant Plus (+) de la boîte de dialogue Modifier la liste de formats) : définis dans les
fichiers ServerFormats.xml situés dans les sous-dossiers du dossier ServerFormats.
• Les éléments du menu déroulant formats qui permettent une liaison dans le panneau Liaisons sont définis dans les
fichiers Formats.xml situés dans les sous-dossiers du dossier ServerFormats. Vous pouvez ajouter des entrées à ce
menu à partir de Dreamweaver via la boîte de dialogue d'ajout de format.
• Les commandes de menu de la boîte de dialogue Editeur de la bibliothèque de balises sont définies dans le fichier
TagLibraries/TagImporters/TagImporters.xml.
• Les commandes de menu des paramètres de la boîte de dialogue de génération de comportement, elle-même
comprise dans le Créateur de comportements de serveur, sont définies dans le fichier Shared/Controls/String
Menu/Controls.xml.
• Les éléments des menus contextuels associés aux composants ColdFusion sont définis dans
Components/ColdFusion/CFCs/CFCsMenus.xml.
• Les éléments des menus contextuels associés aux sources de données ColdFusion sont définis dans
Components/ColdFusion/DataSources/DataSourcesMenus.xml.
• Les commandes des menus contextuels associées aux divers composants de serveur sont définies dans des fichiers
XML situé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écuter
pratiquement n'importe quel type de modification dans le document actif, dans d'autres documents ouverts ou dans
tout document HTML situé sur un disque local.
EXTENSION DE DREAMWEAVER CS4 161
Menus et commandes de menu
Les commandes de menu sont des fichiers HTML référencé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é à
recevoir les options de la commande, par exemple la faç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 à
partir de la section body et contrôlent les modifications apportées au document de l'utilisateur.
Les commandes de menu sont stockées dans le dossier Configuration/Menus du dossier de l'application Dreamweaver.
Remarque : Sous Mac OS X 10.3, les commandes sont stockées dans utilisateur/Library/Application
Support/Adobe/Dreamweaver 9/Commands/nomcommande.html.
Le tableau ci-dessous recense les fichiers utilisés pour créer une commande de menu.
Chemin
Fichier
Description
Configuration/Menus/
menus.xml
Contient une liste structurée des barres de
menus, menus, commandes de menu,
sé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ées dans Dreamweaver, faites-le au plus haut niveau du
dossier Menus ou créez un sous-dossier. Le dossier MM est réservé 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 à modifier le
fichier menus.xml. Pour plus d'informations sur menus.xml, voir « Modification des menus et des commandes de
menu » à la page 158.
Remarque : Le mot « commande » 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 « commande » correspond à
élément de menu, c'est-à-dire tout élément apparaissant dans un menu Dreamweaver, quelle que soit sa fonction ou son
fonctionnement.
Pour créer de nouvelles commandes placées automatiquement dans le menu Commandes, utilisez le panneau
Historique. Vous pouvez également utiliser Extension Manager pour installer de nouvelles extensions, notamment des
commandes. Pour plus d'informations, voir l'aide de Dreamweaver.
Pour réorganiser les éléments du menu Commandes ou pour déplacer des éléments d'un menu à un autre, il est
nécessaire de modifier le fichier menus.xml.
Modification du nom d'une commande que vous avez créée
1 Choisissez Commandes > Modifier la liste des commandes.
Une boîte de dialogue s'affiche, répertoriant toutes les commandes que vous pouvez renommer. Les commandes se
trouvant dans le menu Commandes par défaut n'apparaissent pas dans cette liste et ne peuvent pas être supprimées
de cette manière.
2 Sélectionnez la commande que vous souhaitez renommer.
3 Indiquez son nouveau nom.
4 Cliquez sur Fermer.
EXTENSION DE DREAMWEAVER CS4 162
Menus et commandes de menu
Le nouveau nom apparaît dans le menu Commandes.
Suppression d'une commande que vous avez créée
1 Choisissez Commandes > Modifier la liste des commandes.
Une boîte de dialogue s'affiche, répertoriant toutes les commandes que vous pouvez supprimer. Les commandes se
trouvant dans le menu Commandes par défaut n'apparaissent pas dans cette liste et ne peuvent pas être supprimées
de cette manière.
2 Sélectionnez la commande que vous souhaitez supprimer.
3 Cliquez sur Supprimer, puis confirmez que vous voulez supprimer la commande.
La commande est supprimé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 également supprimé. Cette procédure de
suppression doit donc être utilisé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 élément contenant une commande de menu, les évé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é afin de compléter le menu.
2 Dreamweaver appelle la fonction canAcceptCommand() dans chaque fichier de commandes de menu référencé
dans le menu pour vérifier si la commande correspond à l'élément sélectionné.
• Si la fonction canAcceptCommand() renvoie la valeur false, l'élément de menu apparaît grisé.
• Si la fonction canAcceptCommand() renvoie la valeur true ou si elle n'est pas définie, Dreamweaver appelle la
fonction isCommandChecked() pour déterminer si l'élément de menu doit être coché. Si la fonction
isCommandChecked() n'est pas définie, aucune coche n'apparaît.
3 Dreamweaver appelle la fonction setMenuText() pour déterminer le texte devant s'afficher dans le menu.
Si la fonction setMenuText() n'est pas définie, Dreamweaver utilise le texte spécifié dans la balise menuitem.
4 L'utilisateur sélectionne un élément dans le menu.
5 Dreamweaver appelle la fonction receiveArguments(), si elle est définie, dans le fichier de commandes de menu
sélectionné afin de permettre à la commande de traiter tous les arguments transmis depuis l'élément de menu.
Remarque : S'il s'agit d'un élément de menu dynamique, l'ID correspondant est le seul argument transmis.
6 Dreamweaver appelle la fonction commandButtons(), si elle est définie, pour identifier les boutons qui figurent
dans la partie droite de la boîte de dialogue Options et le code qui doit être exécuté 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éterminer la taille de la
boîte de dialogue Options qui contient les éléments BODY du fichier.
• Si la fonction windowDimensions() n'est pas définie, Dreamweaver redimensionne automatiquement la boîte
de dialogue.
EXTENSION DE DREAMWEAVER CS4 163
Menus et commandes de menu
8 Si la balise body du fichier de commandes de menu contient le gestionnaire onLoad, Dreamweaver exécute le code
associé à ce gestionnaire (qu'une boîte de dialogue soit affichée ou non). Si aucune boîte de dialogue ne s'affiche, les
étapes restantes ne sont pas exécutées.
9 L'utilisateur sélectionne des options dans la boîte de dialogue. Dreamweaver exécute les gestionnaires d'événements
associés aux champs du formulaire au fur et à mesure que l'utilisateur les rencontre.
10 L'utilisateur clique sur l'un des boutons définis par la fonction commandButtons().
11 Dreamweaver exécute le code associé au bouton sur lequel l'utilisateur a cliqué.
12 La boîte de dialogue reste affichée jusqu'à 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établir.
La commande de menu Annuler permet à l'utilisateur d'annuler sa dernière modification, la commande Rétablir
permet de rétablir une modification précédemment annulée au moyen de Annuler.
Pour mettre en oeuvre cet exemple, créez les commandes de menu, rédigez le code JavaScript et placez le fichier de
commandes dans le dossier Menu.
Création d'une commande de menu
Pour créer un menu nommé MyMenu qui contient les commandes Undo (Annuler ) et Redo (Rétablir), ajoutez les
balises HTML de menu suivantes. Ajoutez ces balises après la dernière balise </menu> de fermeture dans menus.xml.
<menu name="MyMenu" id="MyMenu_Edit">
<menuitem name="MyUndo" key="Cmd+Z" file="Menus/MyMenu.htm" arguments="'undo'"
id="MyMenu_Edit_Undo" />
<menuitem name="MyRedo" key="Cmd+Y" file="Menus/MyMenu.htm" arguments="'redo'"
id="MyMenu_Edit_Redo" />
</menu>
L'attribut key dé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écuté par Dreamweaver lorsque ce dernier appelle la commande. La
valeur de l'attribut arguments définit les arguments transmis par Dreamweaver lorsque ce dernier appelle la fonction
receiveArguments().
La figure suivante représente ces commandes de menu :
Code JavaScript pour le menu
Lorsque l'utilisateur sélectionne Undo ou Redo dans le menu MyMenu, Dreamweaver appelle le fichier de commandes
MyMenu.htm spécifié par l'attribut file de la balise menuitem. Cré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ée aux
éléments de menu Annuler et Rétablir. Les sections ci-dessous décrivent ces fonctions.
EXTENSION DE DREAMWEAVER CS4 164
Menus et commandes de menu
canAcceptCommand()
Dreamweaver appelle la fonction canAcceptCommand() pour chaque élément du menu MyMenu afin de déterminer
s'il doit être activé ou désactivé. Dans le fichier MyMenu.htm, la fonction canAcceptCommand() vérifie la valeur de
l'argument arguments[0] afin de déterminer si Dreamweaver traite un élément de menu Redo ou Undo. Si l'argument
"undo" est défini, la fonction canAcceptCommand() appelle la fonction d'activateur dw.canUndo() et renvoie la
valeur renvoyée (true ou false). De même, si l'argument "redo" est défini, la fonction canAcceptCommand() appelle
la fonction d'activateur dw.canRedo() et renvoie sa valeur à Dreamweaver. Si la fonction canAcceptCommand()
renvoie la valeur false, Dreamweaver grise l'élément de menu pour lequel la fonction a été appelée. L'exemple suivant
dé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 == "undo")
{
bResult = dw.canUndo();
}
else if (whatToDo == "redo")
{
bResult = dw.canRedo();
}
return bResult;
}
receiveArguments()
Dreamweaver appelle la fonction receiveArguments() pour traiter les arguments définis dans la balise menuitem.
Pour les élé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] ("undo" ou "redo" respectivement). La fonction
dw.undo() annule la dernière action effectuée par l'utilisateur dans la fenêtre de document, la boîte de dialogue ou le
panneau actif. La fonction dw.redo() rétablit la dernière opération annulée.
Le code de la fonction receiveArguments() ressemble à ceci :
function receiveArguments()
{
if (arguments.length != 1) return;
var whatToDo = arguments[0];
if (whatToDo == "undo")
{
dw.undo();
}
else if (whatToDo == "redo")
{
dw.redo();
}
}
EXTENSION DE DREAMWEAVER CS4 165
Menus et commandes de menu
Dans cette commande, la fonction receiveArguments() traite les arguments et exécute la commande. Des
commandes de menu plus complexes peuvent appeler des fonctions différentes pour exécuter la commande. Par
exemple, le code suivant vérifie si le premier argument est "foo" ; si c'est le cas, il appelle la fonction
doOperationX() et lui transmet le deuxième argument. Si le premier argument est "bar", le code appelle la fonction
doOperationY() et lui transmet le deuxième argument. La fonction doOperationX() ou doOperationY() est
chargée de l'exécution de la commande.
function receiveArguments(){
if (arguments.length != 2) return;
var whatToDo = arguments[0];
if (whatToDo == "foo"){
doOperationX(arguments[1]);
}else if (whatToDo == "bar"){
doOperationX(arguments[1]);
}
}
setMenuText()
Dreamweaver appelle la fonction setMenuText() pour déterminer le texte de l'élément de menu. Si la fonction
setMenuText() n'est pas définie, Dreamweaver utilise le texte spécifié dans l'attribut name de la balise menuitem.
La fonction setMenuText() vérifie la valeur de l'argument transmis par Dreamweaver (arguments[0]). Si la valeur
de cet argument est "undo", Dreamweaver appelle la fonction dw.getUndoText() ; si sa valeur est "redo",
Dreamweaver appelle la fonction dw.getRedoText(). La fonction dw.getUndoText() renvoie le texte spécifiant
l'opé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 « Undo Edit source ». De même, la fonction
dw.getRedoText() renvoie le texte spécifiant l'opération que Dreamweaver doit rétablir. Si l'utilisateur utilise
plusieurs fois la commande Undo, la fonction dw.RedoText() peut renvoyer le texte de menu « Redo Edit Source ».
Le code de la fonction setMenuText() ressemble à ceci :
function setMenuText()
{
if (arguments.length != 1) return "";
var whatToDo = arguments[0];
if (whatToDo == "undo")
return dw.getUndoText();
else if (whatToDo == "redo")
return dw.getRedoText();
else return "";
}
Enregistrement du fichier de commandes dans le dossier Menu
Pour mettre en œuvre les éléments de menu Annuler et Rétablir, vous devez enregistrer le fichier MyMenu.htm dans le
dossier Configuration/Menus de Dreamweaver ou dans un sous-dossier créé à cet effet. L'emplacement du fichier doit
correspondre à celui que vous avez spécifié dans la balise menuitem. Pour que Dreamweaver puisse l'exploiter, vous
devez redémarrer Dreamweaver ou recharger les extensions. Pour plus d'informations sur le rechargement des
extensions, voir « Rechargement d'extensions » à la page 84.
EXTENSION DE DREAMWEAVER CS4 166
Menus et commandes de menu
Pour exécuter les commandes de menu, sélectionnez l'élément de menu lorsqu'il est activé. Dreamweaver appelle alors
les fonctions dans le fichier de commandes, comme indiqué dans la section « Fonctionnement des commandes de
menu » à la page 162.
Exemple de menu dynamique
Cet exemple décrit la mise en œuvre du sous-menu Aperçu dans le navigateur de Dreamweaver qui permet d'afficher
la liste des navigateurs disponibles. Cet exemple décrit également l'ouverture du fichier en cours (ou des fichiers
sélectionnés dans le panneau Site) dans le navigateur spécifié par l'utilisateur. En mettant ce menu dynamique en
oeuvre, vous créez les éléments du menu dynamique et vous rédigez le code JavaScript.
Création d'éléments de menu dynamique
Les balises de menu du fichier menus.xml présentées ci-dessous définissent le sous-menu Aperçu dans le navigateur
du menu Fichier :
<menu name="_Preview in Browser" id="DWMenu_File_PIB">
<menuitem dynamic name="No Browsers Selected"
file="Menus/MM/PIB_Dynamic.htm" arguments="'No Browsers'"
id="DWMenu_File_PIB_Default" />
<separator />
<menuitem name="_Edit Browser List..." enabled="true"
command="dw.editBrowserList()" id="DWMenu_File_PIB_EditBrowserList" />
</menu>
La première balise menuitem définit l'élément de menu par défaut Pas de navigateur sélectionné. Cet élément apparaît
dans le sous-menu si vous n'avez spécifié aucun navigateur pour l'élément Aperçu dans le navigateur dans la boîte de
dialogue Préférences. Si vous avez spécifié Microsoft Internet Explorer, le sous-menu est similaire à l'illustration cidessous :
L'attribut name du premier élément de menu indique le fichier de commandes PIB_Dynamic.htm. Ce fichier contient
les lignes suivantes :
<SCRIPT LANGUAGE="javascript" SRC="PIB_Dynamic.js"></SCRIPT>
La balise script inclut le code JavaScript du fichier PIB_Dynamic.js, lequel contient le code JavaScript associé au sousmenu Aperç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éparé. Ceci permet en effet d'inclure le même code dans un grand
nombre de commandes.
Code JavaScript pour l'élément de menu dynamique
Etant donné que la première balise menuitem contient l'attribut dynamic, Dreamweaver appelle la fonction
getDynamicContent() du fichier PIB_Dynamic.js décrite dans l'exemple suivant :
EXTENSION DE DREAMWEAVER CS4 167
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<PIB.length; i=i+2)
{
browsers[j] = new String(PIB[i]);
if (dw.getPrimaryBrowser() == PIB[i+1])
browsers[j] += "\tF12";
else if (dw.getSecondaryBrowser() == PIB[i+1])
browsers[j] += "\tCmd+F12";
browsers[j] += ";id='"+escQuotes(PIB[i])+"'";
if (itemID == "DWPopup_PIB_Default")
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és dans la section Aperçu dans le navigateur de la boîte de dialogue Préférences. Ce tableau contient
les noms de tous les navigateurs et les chemins d'accès aux fichiers exécutables. Ensuite, pour chaque élément du
tableau (i=0; i<PIB.length; i=i+2), la fonction getDynamicContents() place le nom du navigateur (PIB[i])
dans un second tableau appelé browsers (browsers[j] = new String(PIB[i]);). Si un navigateur a été désigné
comme navigateur principal ou secondaire, la fonction ajoute les noms des raccourcis clavier qui permettent de
l'appeler. La chaîne ";id=" est ensuite ajoutée, suivie du nom du navigateur entre apostrophes (exemple:
;id='iexplore'). Si l'argument itemID est "DWPopup_PIB_Default", la fonction fait précéder l'élément du tableau
de la chaîne Preview in. Une fois qu'une entrée a été créée pour chaque navigateur répertorié dans la boîte de
dialogue Préférences, la fonction getDynamicContent() renvoie les navigateurs du tableau vers Dreamweaver. Si
vous n'avez sélectionné aucun navigateur, la fonction renvoie la valeur null et Dreamweaver affiche Pas de navigateur
sélectionné dans le menu.
canAcceptCommand()
Dreamweaver appelle ensuite la fonction canAcceptCommand() pour chaque balise menuitem faisant référence à un
fichier de commandes avec l'attribut file. Si la fonction canAcceptCommand() renvoie la valeur false, l'élément de
menu s'affiche en grisé. Si la fonction canAcceptCommand() renvoie la valeur true, Dreamweaver active l'élément de
menu. Si la fonction renvoie true ou si elle n'est pas définie, Dreamweaver appelle la fonction isCommandChecked()
pour déterminer si l'élément de menu doit être coché. Si la fonction isCommandChecked() n'est pas définie, aucune
coche n'apparaît.
EXTENSION DE DREAMWEAVER CS4 168
Menus et commandes de menu
function canAcceptCommand()
{
var PIB = dw.getBrowserList();
if (arguments[0] == 'primary' || arguments[0] == 'secondary')
return havePreviewTarget();
return havePreviewTarget() && (PIB.length > 0);
}
La fonction canAcceptCommand() du fichier PIB_Dynamic.js récupère à nouveau la liste des navigateurs créée dans
la boîte de dialogue Préférences. Elle vérifie ensuite si le premier argument (arguments[0]) est principal ou
secondaire. Si tel est le cas, elle renvoie la valeur renvoyée par la fonction havePreviewTarget(). Dans le cas
contraire, elle effectue des tests afin de vérifier l'appel de la fonction havePreviewTarget()et de voir si des
navigateurs ont été spécifiés ou non (PIB.length > 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éfinie par l'utilisateur et renvoie la valeur true si Dreamweaver dispose d'une
cible valide à afficher dans le navigateur. Ce peut être un document ou un groupe de fichiers sélectionné dans le
panneau Site. La fonction havePreviewTarget() ressemble à l'exemple ci-dessous :
function havePreviewTarget()
{
var bHavePreviewTarget = false;
if (dw.getFocus(true) == 'site')
{
if (site.getFocus() == 'remote')
{
bHavePreviewTarget = site.getRemoteSelection().length > 0 &&
site.canBrowseDocument();
}
else if (site.getFocus() != 'none')
{
var selFiles = site.getSelection();
if (selFiles.length > 0)
{
var i;
bHavePreviewTarget = true;
for (i = 0; i < selFiles.length; i++)
{
var selFile = selFiles[i];
// For server connections, the files will
// already be remote URLs.
if (selFile.indexOf("://") == (-1))
{
var urlPrefix = "file:///";
var strTemp = selFile.substr(urlPrefix.length);
if (selFile.indexOf(urlPrefix) == -1)
EXTENSION DE DREAMWEAVER CS4 169
Menus et commandes de menu
bHavePreviewTarget = false;
else if (strTemp.indexOf("/") == -1)
bHavePreviewTarget = false;
else if (!DWfile.exists(selFile))
bHavePreviewTarget = false;
else if (DWfile.getAttributes(selFile).indexOf("D") != -1)
bHavePreviewTarget = false;
}
else
{
bHavePreviewTarget = true;
}
}
}
}
}
else if (dw.getFocus() == 'document' ||
dw.getFocus() == 'textView' || dw.getFocus("true") == '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ègle la valeur bHavePreviewTarget sur false comme valeur renvoyée par
défaut. Cette fonction effectue deux tests de base en appelant la fonction dw.getFocus() pour déterminer quelle
partie de l'application est active. Lors du premier test, elle vérifie que le panneau Site est actif (if (dw.getFocus(true) ==
'site')). Si ce n'est pas le cas, elle vérifie, lors du second test, si un document (dw.getFocus() == 'document'), le mode
Texte (dw.getFocus() == 'textView') ou l'inspecteur de code (dw.getFocus("true") == '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érifie si l'affichage est défini sur distant. Si c'est le cas, la fonction définit
bHavePreviewTarget sur true, s'il existe des fichiers distants (site.getRemoteSelection().length > 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éfini
sur Aucun, la fonction obtient une liste des fichiers sélectionnés (var selFiles = site.getSelection();) sous la forme d'URL
file:///.
La fonction effectue un test sur chaque élément de la liste afin de vérifier si la chaîne de caractères :// est présente. Si
ce n'est pas le cas, le code effectue une série de tests sur l'élément de la liste. Si l'élément ne se présente pas sous la forme
d'une URL file:/// (if (selFile.indexOf(urlPrefix) == -1)), la valeur renvoyée est false. Si le reste de la chaîne
apparaissant après le préfixe file:/// ne contient pas de barre oblique (/) (if (strTemp.indexOf("/") == -1)), la valeur
renvoyée est définie sur false. Si le fichier n'existe pas (else if (!DWfile.exists(selFile))), la valeur renvoyée est définie
sur false. Enfin, la fonction vérifie si le fichier spécifié est un dossier (else if
(DWfile.getAttributes(selFile).indexOf("D") != -1)). Si selfile est un dossier, la fonction renvoie la valeur false.
Autrement, si la cible est un fichier, la fonction définit bHavePreviewTarget sur la valeur true.
EXTENSION DE DREAMWEAVER CS4 170
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("true") == 'html' )), la fonction obtient le DOM et vérifie s'il s'agit d'un
document HTML ou XML. Si tel est le cas, la fonction définit bHavePreviewTarget sur true. Enfin, la fonction
renvoie la valeur stockée dans bHavePreviewTarget.
receiveArguments()
Dreamweaver appelle la fonction receiveArguments() pour que la commande traite tous les arguments provenant
de l'élément de menu. En ce qui concerne le menu Aperçu dans le navigateur, la fonction receiveArguments()
appelle le navigateur sélectionné par l'utilisateur. La fonction receiveArguments() ressemble à 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 < 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 != "file:///" && typeof(theBrowser) != "undefined" &&
theBrowser.length > 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);
}
EXTENSION DE DREAMWEAVER CS4 171
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égler la variable whichBrowser sur la valeur transmise par Dreamweaver, arguments[0].
Outre la définition d'autres valeurs par défaut, la fonction règle également le renvoi sur la valeur par défaut, false.
Une fois les variables initialisées, la fonction receiveArguments() appelle la fonction définie par l'utilisateur
havePreviewTarget() et teste le résultat. Si le résultat du test est vrai (true), la fonction vérifie si l'utilisateur a
sélectionné le navigateur principal ou secondaire. Dans ce cas, la fonction définit la variable theBrowser sur le chemin
du fichier exécutable qui lance le navigateur (dw.getPrimaryBrowser() ou dw.getSecondaryBrowser()). La
fonction effectue ensuite une boucle qui examine la liste des navigateurs renvoyé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é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écutable qui lance le navigateur. Si havePreviewTarget() renvoie la valeur
false, la fonction définit la variable theBrowser sur la valeur de la variable whichBrowser.
La fonction receiveArguments() teste ensuite la variable theBrowser pour vérifier qu'elle ne débute pas par un
chemin, qu'elle n'est pas "non définie" ("undefined") et que sa taille est supérieure à 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électionné les fichiers sélectionné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écifie le nom du navigateur à
utiliser pour afficher le document.
Si l'utilisateur a appuyé sur des touches de raccourci (F12 ou Ctrl+F12) et qu'aucun navigateur principal ou secondaire
n'a été spécifié, une boî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écifier un navigateur à ce
stade.
Fonctions de l'API des commandes de menu
Les fonctions personnalisées de l'API des commandes de menu ne sont pas obligatoires.
EXTENSION DE DREAMWEAVER CS4 172
Menus et commandes de menu
canAcceptCommand()
Description
Détermine si l'élément de menu doit être actif ou grisé.
Arguments
{arg1}, {arg2},...{argN}}
S'il s'agit d'une option de menu dynamique, l'ID unique correspondant spécifié dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem,
la valeur de l'attribut est transmise à la fonction canAcceptCommand() (et aux fonctions « isCommandChecked() » à
la page 173, « receiveArguments() » à la page 174 et « setMenuText() » à la page 175) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux éléments de menu appelant la même commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'élément doit être activé, false dans les autres cas.
commandButtons()
Description
Définit les boutons figurant dans la partie droite de la boîte de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparaît et la section body du fichier de
commandes de menu s'étend de façon à remplir la totalité de la boîte de dialogue.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver renvoie un tableau contenant un nombre pair d'éléments. Le premier élément est une chaîne contenant
le libellé du premier bouton. Le deuxième élément est une chaîne de code JavaScript définissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres éléments définissent les boutons supplémentaires de la
même manière.
Exemple
Dans l'exemple suivant, la fonction commandButtons() définit les boutons OK, Cancel (Annuler) et Help (Aide).
function commandButtons(){
return new Array("OK" , "doCommand()" , "Cancel" , ¬
"window.close()" , "Help" , "showHelp()");
}
getDynamicContent()
Description
Extrait le contenu de la partie dynamique du menu.
EXTENSION DE DREAMWEAVER CS4 173
Menus et commandes de menu
Arguments
menuID
L'argument menuID est la valeur de l'attribut id dans la balise menuitem associée à l'élément de menu.
Valeurs renvoyées
Dreamweaver attend un tableau de chaînes, où chaque chaîne contient le nom d'un élément de menu et son ID unique,
séparés par un point-virgule. Si cette fonction renvoie la valeur null, aucune modification n'est apportée au menu.
Exemple
Dans l'exemple suivant, la fonction getDynamicContent() renvoie un tableau de quatre élé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<numItems;i++)
stringArray[i] = new String("My Menu Item " + i + ";¬
id='My-MenuItem" + i + "'");
return stringArray;
}
isCommandChecked()
Description
Détermine si une coche doit apparaître à côté de l'élément de menu.
Arguments
{arg1}, {arg2},...{argN}
S'il s'agit d'une option de menu dynamique, l'ID unique correspondant spécifié dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem,
la valeur de l'attribut est transmise à la fonction isCommandChecked() (et aux fonctions « canAcceptCommand() » à
la page 172, « receiveArguments() » à la page 174 et « setMenuText() » à la page 175) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux éléments de menu appelant la même commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si une coche doit apparaître en regarde de l'élément de menu, false
dans le cas contraire.
EXTENSION DE DREAMWEAVER CS4 174
Menus et commandes de menu
Exemple
function isCommandChecked()
{
var bChecked = false;
var cssStyle = arguments[0];
if (dw.getDocumentDOM() == null)
return false;
if (cssStyle == "(None)")
{
return dw.cssStylePalette.getSelectedStyle() == '';
}
else
{
return dw.cssStylePalette.getSelectedStyle() == cssStyle;
}
return bChecked;
}
receiveArguments()
Description
Traite tous les arguments transmis à partir d'un élé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écifié dans la fonction
getDynamicContents() est le seul argument transmis. Si l'attribut arguments est défini pour une balise menuitem,
la valeur de l'attribut est transmise à la fonction receiveArguments() (et aux fonctions « canAcceptCommand() » à
la page 172, « isCommandChecked() » à la page 173 et « setMenuText() » à la page 175) sous forme d'un ou plusieurs
arguments. L'attribut arguments permet de distinguer deux éléments de menu appelant la même commande de menu.
Remarque : L'attribut arguments n'est pas pris en compte pour les options de menu dynamiques.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
function receiveArguments()
{
var styleName = arguments[0];
if (styleName == "(None)")
dw.getDocumentDOM('document').applyCSSStyle('','');
else
dw.getDocumentDOM('document').applyCSSStyle('',styleName);
}
EXTENSION DE DREAMWEAVER CS4 175
Menus et commandes de menu
setMenuText()
Description
Spécifie le texte devant s'afficher dans le menu.
Remarque : N'utilisez pas cette fonction si vous utilisez « getDynamicContent() » à la page 172.
Arguments
{arg1}, {arg2},...{argN}
Si l'attribut arguments est défini pour une balise menuitem, la valeur de l'attribut est transmise à la fonction
setMenuText() (et aux fonctions « canAcceptCommand() » à la page 172, « isCommandChecked() » à la page 173 et
« receiveArguments() » à la page 174) sous forme d'un ou plusieurs arguments. L'attribut arguments permet de
distinguer deux éléments de menu appelant la même commande de menu.
Valeurs renvoyées
Dreamweaver attend la chaîne devant apparaître dans le menu.
Exemple
function setMenuText()
{
if (arguments.length != 1) return "";
var whatToDo = arguments[0];
if (whatToDo == "undo")
return dw.getUndoText();
else if (whatToDo == "redo")
return dw.getRedoText();
else return "";
}
windowDimensions()
Description
Définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les dimensions de la
fenêtre sont calculées automatiquement.
Remarque : Ne définissez cette fonction que si vous souhaitez utiliser une boîte de dialogue supérieure à 640 x 480pixels.
Arguments
platform
La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisée par l'utilisateur.
Valeurs renvoyées
Dreamweaver renvoie une chaîne au format "widthInPixels,heightInPixels".
Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaître toutes les options, des
barres de défilement s'affichent.
EXTENSION DE DREAMWEAVER CS4 176
Menus et commandes de menu
Exemple
Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue des
paramètres à 648 x 520 pixels :
function windowDimensions(){
return "648,520";
}
177
Chapitre 11 : Barres d'outils
Pour créer une nouvelle barre d'outils dans Adobe Dreamweaver , il suffit de créer un fichier de définition de barre
d'outils et de placer ce fichier dans le dossier Configuration/Toolbars.
Le tableau ci-dessous répertorie les fichiers utilisés pour cré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éez ce fichier pour générer une barre
d'outils.
Configuration/Toolbars/
fichier_image.gif
Image d'icône associée à l'élément de barre
d'outils.
Configuration/Commands/
MyCommand.htm
Fichier de commandes associé à l'élément de
barre d'outils.
Fonctionnement des barres d'outils
Les barres d'outils sont définies par les fichiers XML et d'image localisés dans le dossier Toolbars du dossier
Configuration principal de Dreamweaver. Les barres d'outils par défaut de Dreamweaver sont stockées dans le fichier
toolbars.xml du dossier Configuration/Toolbars. Au dé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ôt que de modifier le fichier toolbars.xml original.
Les fichiers XML de barre d'outils définissent une ou plusieurs barres d'outils, ainsi que les éléments qui les composent.
Une barre d'outils est une liste d'éléments tels que des boutons, des zones de texte, des menus déroulants, etc. Un
élément de barre d'outils est un contrôle auquel l'utilisateur peut accéder.
Certains types de contrôles de barre d'outils, tels que les boutons-poussoirs et les menus déroulants, sont associés à une
icône. Les icônes sont stockées dans le sous-dossier images du dossier Toolbars. Elles sont généralement au format de
fichier GIF ou JPEG, mais tous les formats compatibles avec Dreamweaver sont acceptés. Les images des barres d'outils
Adobe sont stockées dans le dossier Toolbars/images/MM.
Tout comme pour les menus, vous pouvez spécifier la fonction de chaque élément de la barre d'outils en définissant
ses attributs ou par l'intermédiaire d'un fichier de commandes. Les fichiers de commandes des barres d'outils Adobe
sont stockés dans le dossier Toolbars/MM.
L'API de barre d'outils est compatible avec l'API de commandes de menu. Les contrôles de barre d'outils peuvent ainsi
réutiliser les fichiers de commandes des menus.
Contrairement aux menus, les éléments de barre d'outils peuvent être définis indépendamment des barres d'outils qui
les utilisent. Vous pouvez ainsi utiliser des élé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ère fois, sa visibilité et sa position sont déterminées par
le fichier de définition de la barre d'outils. Par la suite, sa visibilité et sa position sont enregistrées et restaurées à partir
du registre (Windows) ou du fichier de préférences de Dreamweaver (Macintosh).
EXTENSION DE DREAMWEAVER CS4 178
Barres d'outils
Comportement des barres d'outils
Sous Windows, les barres d'outils Dreamweaver se comportent, en général, comme les barres d'outils standard du
système. Les barres d'outils Dreamweaver présentent toutefois les caractéristiques suivantes :
• Vous pouvez les ancrer, les détacher et les repositionner par rapport aux autres barres d'outils en utilisant la
fonction de glisser-déposer.
• Vous pouvez les ancrer horizontalement sur le bord supérieur ou inférieur la fenêtre.
• La taille des barres d'outils ne change pas. La taille d'une barre d'état ne se réduit pas lorsque le conteneur est réduit
ou lorsque d'autres barres d'outils sont ajoutées.
• Vous pouvez afficher ou masquer les barres d'outils à partir du menu Affichage > 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ées à la fenêtre de document. Vous pouvez les afficher ou les
masquer à partir du menu, mais vous ne pouvez pas les faire glisser, les réorganiser ni les détacher.
Dans l'espace de travail de Dreamweaver, qui intègre toutes les fenêtres de documents de Dreamweaver dans un
unique cadre parent, vous pouvez spécifier si les barres d'outils doivent s'ancrer à l'espace de travail ou à la fenêtre de
document.
Les barres d'outils ancrées à 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, à gauche ou à droite de la barre Insertion. Les barres d'outils ancrées à l'espace de travail
de Dreamweaver ne sont pas automatiquement désactivées lorsque la fenêtre de document est fermée. Les éléments de
la barre d'outils déterminent s'ils doivent rester actifs lorsque aucun document n'est ouvert.
Lorsque les barres d'outils sont ancrées sur la fenêtre de document, une instance s'affichera pour chaque fenêtre. La
barre d'outils attachée à une fenêtre de document est désactivée lorsque la fenêtre dans laquelle elle est ancrée n'est pas
la fenêtre active. Les gestionnaires de mise à jour sont exécutés dès que leur fenêtre devient la fenêtre active.
Vous ne pouvez pas faire glisser les barres d'outils entre la fenê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 événements suivants se produisent :
1 Pour chaque élément de contrôle de la barre d'outils, Dreamweaver détermine si l'attribut file existe.
2 Si l'attribut file existe, Dreamweaver appelle la fonction canAcceptCommand() pour définir si le contrôle doit être
activé 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érifie l'existence d'un DOM et si le document actif est un fichier HTML. Si ces deux
conditions sont vérifié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écifié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éfinis pour l'élément de contrôle de barre
d'outils : checked, command, DomRequired etc.
Pour plus d'informations sur les attributs de balises d'éléments spécifiques, voir « Attributs des balises d'éléments »
à la page 190.
EXTENSION DE DREAMWEAVER CS4 179
Barres d'outils
5 Dreamweaver appelle la fonction getCurrentValue() à chaque cycle de mise à jour, comme spécifié par l'attribut
update, pour déterminer la valeur de contrôle à afficher.
6 L'utilisateur sélectionne un élément dans la barre d'outils.
7 Dreamweaver appelle la fonction receiveArguments() pour traiter les arguments spécifiés par l'attribut
arguments de l'élément de la barre d'outils.
Pour plus d'informations sur le rôle des fonctions spécifiques dans l'API de commande de barre d'outils, voir
« Fonctions de l'API de commande de barre d'outils » à la page 195.
Fichier simple de commande de barre d'outils
Cet exemple simple implémente un élément de zone de texte Titre comme indiqué sur la barre d'outils Document de
Dreamweaver. L'élément de zone de texte permet à l'utilisateur d'entrer un nom pour le document Dreamweaver en
cours. Procédez comme suit pour implémenter cet exemple de barre d'outils :
Création de la zone de texte
Pour ajouter une barre d'outils dans Dreamweaver, vous placez le fichier XML contenant la définition de barre d'outils
dans le dossier Configuration de Dreamweaver.
L'illustration suivante présente la zone de texte Title (titre) :
L'élément de barre d'outils editcontrol suivant définit une zone de texte nommée Title :
<EDITCONTROL ID="DW_SetTitle"
label="Title: "
tooltip="Document Title"
width="150"
file="Toolbars/MM/EditTitle.htm"/>
L'attribut tooltip entraî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éfinit la taille du champ en pixels. L'attribut
file précise que le fichier EditTitle.htm contient les fonctions JavaScript qui agissent sur la zone de texte. Pour voir
la définition complète de la barre d'outils Document de Dreamweaver, voir la barre d'outils principale
(id="DW_Toolbar_Main") 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'élément de la barre d'outils
La fonction canAcceptCommand() se compose d'une ligne de code qui s'assure qu'un DOM (modèle d'objet de
document) est disponible et que le document est analysé comme HTML. La fonction renvoie le résultat de ces tests. Si
les conditions renvoient la valeur true, Dreamweaver active l'élément de zone de texte sur la barre d'outils. Si la
fonction renvoie la valeur false, Dreamweaver désactive l'élément.
EXTENSION DE DREAMWEAVER CS4 180
Barres d'outils
La fonction se présente comme suit :
function canAcceptCommand()
{
return (dw.getDocumentDOM() != null && dw.getDocumentDOM().getParseMode() == 'html');
}
receiveArguments(): définit le titre
Dreamweaver appelle la fonction receiveArguments(), présenté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ée, ou sélectionne une autre commande.
La fonction se présente comme suit :
function receiveArguments(newTitle)
{
var dom = dw.getDocumentDOM();
if (dom)
dom.setTitle(newTitle);
}
Dreamweaver transmet newTitle, à savoir la valeur entrée par l'utilisateur, à la fonction receiveArguments(). La
fonction receiveArguments() vérifie immédiatement s'il existe un DOM. Si c'est le cas, la fonction
receiveArguments() définit le titre du nouveau document en transmettant newTitle à la fonction
dom.setTitle().
getCurrentValue(): obtient le titre
Lorsqu'un cycle de mise à jour survient, selon la fréquence par défaut déterminée dans le gestionnaire d'événements
onEdit, Dreamweaver appelle la fonction getCurrentValue() pour déterminer la valeur à afficher pour le contrôle.
La fréquence de mise à jour par défaut du gestionnaire d'événements onEdit détermine la fréquence de mise à jour car
le contrô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ésente comme suit :
function getCurrentValue()
{
var title = "";
var dom = dw.getDocumentDOM();
if (dom)
title = dom.getTitle();
return title;
}
La fonction getTitle() renvoie la valeur Document sans nom, affichée dans la zone de texte, en attendant que
l'utilisateur attribue un titre au document. Aprè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éservé aux fichiers Adobe. Créez un nouveau dossier dans le dossier Toolbars afin d'y stocker votre
code JavaScript.
EXTENSION DE DREAMWEAVER CS4 181
Barres d'outils
Fichier de définition de la barre d'outils
Une barre d'outils est une simple liste de boutons radio, boutons-poussoirs, zones de texte et autres éléments de barre
d'outils, éventuellement divisée par des balises separator. Chaque élément de barre d'outils peut être une référence à
un élément à l'aide de la balise itemref, une séparation, à l'aide de la balise separator ou une définition complète
d'élément de barre d'outils pour une case à cocher ou une zone de texte, comme décrit, par exemple, dans « Balises
d'éléments de barre d'outils » à la page 185.
Tous les fichiers de définition de barre d'outils commencent par les déclarations suivantes :
<?xml version="1.0" encoding="optional_encoding"?>
<!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0">
Si l'encodage est ignoré, Dreamweaver utilise l'encodage par défaut du système d'exploitation.
Après les déclarations, le fichier se compose d'une seule balise toolbarset, qui peut contenir les balises suivantes :
toolbar, itemref, separator, include et itemtype, où itemtype vaut button, checkbutton, radiobutton,
menubutton, dropdown, combobox, editcontrol ou colorpicker. L'exemple suivant, un extrait abrégé du fichier
toolbars.xml, représente la hiérarchie des balises dans le fichier de barre d'outils. Dans cet exemple, les attributs
d'éléments de barre d'outils qui sont décrits dans les sections suivantes, sont remplacés par des points de suspension
pour la description des attributs de l'élément de barre d'outils.
<?xml version="1.0"?>
<!DOCTYPE toolbarset SYSTEM "-//Adobe//DWExtension toolbar 10.0">
<toolbarset>
<!-- main toolbar -->
<toolbar id="DW_Toolbar_Main" label="Document">
<radiobutton id="DW_CodeView" . . ./>
<radiobutton id="DW_SplitView" . . ./>
<radiobutton id="DW_DesignView" . . ./>
<separator/>
<checkbutton id="DW_LiveDebug" . . ./>
<checkbutton id="DW_LiveDataView" . . ./>
<separator/>
<editcontrol id="DW_SetTitle" . . ./>
<menubutton id="DW_FileTransfer" . . ./>
<menubutton id="DW_Preview" . . ./>
<separator/>
<button id="DW_DocRefresh" . . ./>
<button id="DW_Reference" . . ./>
<menubutton id="DW_CodeNav" . . ./>
<menubutton id="DW_ViewOptions" . . ./>
</toolbar>
</toolbarset>
Les descriptions de chaque balise de barre d'outils sont fournies ci-dessous.
<toolbar>
Description
Définit une barre d'outils. Dreamweaver affiche les éléments et les séparateurs de gauche à droite dans l'ordre spécifié
et les met en forme automatiquement. Le fichier de barre d'outils ne spécifie pas l'espacement entre les éléments, mais
vous pouvez définir la largeur de certains types d'éléments.
EXTENSION DE DREAMWEAVER CS4 182
Barres d'outils
Attributs
id, label, {container}, {initiallyVisible}, {initialPosition}, {relativeTo}
•
id="unique_id" Obligatoire. Une chaîne d'identificateur doit ê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éfèrent à cette
derniè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ême fichier possèdent le même ID, Dreamweaver affiche un message d'erreur.
•
label="string" Obligatoire. L'attribut label spécifie l'étiquette, une chaîne de caractères que Dreamweaver
affiche pour l'utilisateur. L'étiquette s'affiche dans le menu Affichage > Barre d'outils et dans la barre de titre de la
barre d'outils lorsque celle-ci est flottante.
•
container="mainframe" ou "document" La valeur par défaut est "mainframe". Indique la position d'ancrage de
la barre d'outils dans l'espace de travail de Dreamweaver sous Windows. Si le contenant indique "mainframe", la
barre d'outils apparaît à l'extérieur de l'espace de travail et fonctionne sur le document au premier plan. Si le
contenant indique "document", la barre d'outils apparaît dans chaque fenêtre de document. Sur Macintosh, toutes
les barres d'outils s'affichent dans chaque fenêtre de document.
•
initiallyVisible="true" ou "false". Cette balise indique si la barre d'outils doit être visible la première fois
que Dreamweaver la charge depuis le dossier Toolbars. Après la première fois, c'est l'utilisateur qui détermine sa
visibilité. Dreamweaver enregistre l'état actuel dans le registre système (Windows) ou le fichier de préférences de
Dreamweaver (Macintosh) l'utilisateur quitte Dreamweaver. Dreamweaver rétablit le réglage depuis le registre ou
le fichier de préférences lorsqu'il redémarre. Vous pouvez manipuler la visibilité de la barre d'outils en utilisant les
fonctions dom.getToolbarVisibility() et dom.setToolbarVisibility(), comme décrit dans le Guide des
API de Dreamweaver. Si vous ne définissez pas une valeur pour l'attribut initiallyVisible, celui-ci adopte la
valeur true.
•
initialPosition="top", "below" ou "floating". Indique la position initiale de la barre d'outils définie par
Dreamweaver, par rapport aux autres barres d'outils lors du premier chargement. Les valeurs possibles de
l'argument initialPosition sont décrites dans la liste suivante :
•
top Il s'agit de la position par défaut, de façon à ce que la barre d'outils s'affiche en haut de la fenêtre du document.
Si plusieurs barres d'outils spécifient top pour un type de fenêtre donné, elles apparaissent dans l'ordre de
chargement dans Dreamweaver. Cet ordre risque d'être aléatoire si les barres d'outils sont localisées dans des
fichiers séparés.
•
below La barre d'outils s'affiche au début de la ligne, juste sous la barre d'outils spécifiée par l'attribut relativeTo.
Dreamweaver signale une erreur si la barre d'outils relativeTo est introuvable. Si plusieurs barres d'outils
spécifient below par rapport à la même barre d'outils, elles apparaissent dans l'ordre de chargement dans
Dreamweaver. Cet ordre risque d'être aléatoire si les barres d'outils sont localisées dans des fichiers séparés.
•
floating La barre d'outils n'est pas ancrée à la fenêtre ; elle flotte au-dessus du document. Dreamweaver place
automatiquement la barre d'outils de sorte qu'elle soit décalée par rapport aux autres barres d'outils flottantes. Sur
Macintosh, floating est traité de la même faç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ée dans le
registre ou dans le fichier de préférences de Dreamweaver. Vous pouvez ré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écifiez pas une valeur pour l'attribut initialPosition, Dreamweaver positionne la barre d'outils
selon l'ordre de chargement.
EXTENSION DE DREAMWEAVER CS4 183
Barres d'outils
•
relativeTo="id_barre_outils" Cet attribut est requis si l'attribut initialPosition indique below. Dans les
autres cas, cet argument est ignoré. Indique l'ID de la barre d'outils en dessous de laquelle cette barre d'outils doit
être placée.
Contenu
La balise toolbar comprend les balises include, itemref et separator ainsi que des définitions d'éléments
individuels tels que button, combobox, dropdown, etc. Pour obtenir une description des définitions d'éléments que
vous pouvez spécifier, voir « Balises d'éléments de barre d'outils » à la page 185.
Contenant
La balise toolbarset.
Exemple
<toolbar id="MyDWedit_toolbar" label="Edit">
<include/>
Description
Charge les éléments de barre d'outils depuis le fichier spécifié avant de continuer à charger le fichier en cours. Les
éléments de barre d'outils définis dans le fichier inclus peuvent être référencé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ées, mais les éléments dans ces barres d'outils restent disponibles
comme références dans le fichier en cours.
Attributs
• Le chemin de fichier, relatif au dossier Toolbars, du fichier XML de la barre d'outils à inclure.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<include file="mine/editbar.xml"/>
<itemtype/>
Description
Définit un élément de barre d'outils. Les éléments de barre d'outils peuvent être des boutons, des boutons radio, des
boutons-poussoirs, des zones de liste modifiables, des menus déroulants, etc. Pour obtenir la liste des types d'éléments
de barre d'outils que vous pouvez définir, voir « Balises d'éléments de barre d'outils » à la page 185.
Attributs
Les attributs varient en fonction de l'élément que vous définissez. Pour obtenir la liste des attributs que vous pouvez
spécifier pour les éléments de barre d'outils, voir « Attributs des balises d'éléments » à la page 190.
EXTENSION DE DREAMWEAVER CS4 184
Barres d'outils
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<button id="strikeout_button" .../>
<itemref/>
Description
Fait référence à (et inclut dans la barre d'outils en cours) un élément de barre d'outils défini dans une barre d'outils
précédente ou en dehors de toutes les barres d'outils.
Attributs
id, {showIf}
•
id="id_reference" Obligatoire. Il doit s'agir de l'ID d'un élément défini au préalable ou inclus dans le fichier.
Dreamweaver n'autorise pas les références en aval. Si une balise d'élément de barre d'outils fait référence à un ID
non défini, Dreamweaver affiche un message d'erreur et ignore la référence.
•
showIf="script" Indique que cet élément apparaît uniquement sur la barre d'outils si le script spécifié renvoie la
valeur true. Par exemple, vous pouvez utiliser showIf pour afficher certains boutons dans une application donnée
uniquement, ou lorsqu'une page est écrite en langage côté serveur, tel que Adobe ColdFusion, ASP ou JSP. Si vous
ne spécifiez pas l'attribut showIf, l'élément apparaît systématiquement. Dreamweaver vérifie cette propriété à
chaque fois que l'activateur de l'élément s'exécute, c'est-à-dire en fonction de la valeur de l'attribut update. Vous
devez utiliser cet attribut avec prudence. L'attribut peut être utilisé dans la définition de l'élément ou dans une
référence à l'élément depuis une barre d'outils. Si la définition et la référence spécifient toutes deux l'attribut
showIf, Dreamweaver affiche l'élément uniquement si les deux conditions sont vérifiées. L'attribut showIf est
l'équivalent de la fonction showIf() dans un fichier de commandes.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<itemref id="strikeout_button">
<separator/>
Description
Insère un séparateur à l'emplacement en cours dans la barre d'outils.
EXTENSION DE DREAMWEAVER CS4 185
Barres d'outils
Attributs
{showIf}
• L'attribut showif indique que le séparateur ne doit apparaître sur la barre d'outils que si le script donné renvoie la
valeur true. Par exemple, vous pouvez utiliser l'attribut showIf pour afficher le séparateur uniquement dans une
application donnée ou uniquement lorsque la page contient un certain type de document. Si l'attribut showIf n'est
pas spécifié, le séparateur s'affiche systématiquement.
Contenu
Aucun.
Contenant
La balise toolbar.
Exemple
<separator/>
Balises d'éléments de barre d'outils
Chaque type d'éléments de barre d'outils possède sa propre balise et son propre ensemble d'attributs obligatoires et
facultatifs. Vous pouvez définir des éléments toolbar à l'intérieur ou à l'extérieur des barres d'outils. En général, il est
préférable de les définir à l'extérieur et de les référencer à partir des barres d'outils à l'aide de la balise itemref.
Vous pouvez définir les types d'éléments suivants dans une barre d'outils.
<button>
Description
Ce bouton-poussoir exécute une commande spécifique lorsque vous cliquez dessus. Il ressemble au bouton Réfé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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
EXTENSION DE DREAMWEAVER CS4 186
Barres d'outils
Exemple
<BUTTON ID="DW_DocRefresh"
image="Toolbars/images/MM/refresh.gif"
disabledImage="Toolbars/images/MM/refresh_dis.gif"
tooltip="Refresh Design View (F5)"
enabled="((dw.getDocumentDOM() != null) && (dw.getDocumentDOM().getView() != 'browse')
&& (!dw.getDocumentDOM().isDesignViewUpdated()))"
command="dw.getDocumentDOM().synchronizeDocument()"
update="onViewChange,onCodeViewSyncChange"/>
<checkbutton>
Description
Un bouton-poussoir est un bouton qui peut être activé ou désactivé et qui exécute une commande spécifique lorsqu'il
est activé. Lorsqu'il est activé, il apparaît enfoncé et en surbrillance. Lorsqu'il est désactivé, il apparaît plat.
Dreamweaver implémente les états suivants pour le bouton-poussoir : Survol, Enfoncé, Survol et enfoncé et Désactivé
et enfoncé. Le gestionnaire spécifié par l'attribut checked ou par la fonction isCommandChecked() doit garantir que
le fait de cliquer sur ce bouton modifie son é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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<CHECKBUTTON ID="DW_LiveDebug"
image="Toolbars/images/MM/debugview.gif"
disabledImage="Toolbars/images/MM/globe_dis.gif"
tooltip="Live Debug"
enabled="dw.canLiveDebug()"
checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'browse'"
command="dw.toggleLiveDebug()"
showIf="dw.canLiveDebug()"
update="onViewChange"/>
<radiobutton>
Description
Le bouton radio se comporte comme le bouton-poussoir, mais apparaît en relief lorsqu'il est désactivé. Dreamweaver
implémente les états suivants pour le bouton radio : Survol, Enfoncé, Survol et enfoncé et Désactivé et enfoncé.
Dreamweaver n'impose pas l'exclusion mutuelle entre les boutons radio. Le gestionnaire spécifié par l'attribut checked
ou par la fonction isCommandChecked() doit garantir que les états activé et désactivé des boutons radio sont
cohérents.
EXTENSION DE DREAMWEAVER CS4 187
Barres d'outils
Les boutons radio fonctionnent comme les boutons des modes Code, Cré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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<RADIOBUTTON ID="DW_CodeView"
image="Toolbars/images/MM/codeView.gif"
disabledImage="Toolbars/images/MM/codeView_dis.gif"
tooltip="Show Code View"
domRequired="false"
enabled="dw.getDocumentDOM() != null"
checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"
command="dw.getDocumentDOM().setView('code')"
update="onViewChange"/>
<menubutton>
Description
Un bouton de menu est un bouton qui appelle le menu contextuel spécifié par l'attribut menuid. Dreamweaver définit
les états Survol et Enfoncé pour les boutons de menu. Dreamweaver ne dessine pas la flèche de menu, c'est-à-dire la
flèche vers le bas qui indique que des éléments de menu sont joints au bouton. Vous devez l'inclure dans votre icô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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
EXTENSION DE DREAMWEAVER CS4 188
Barres d'outils
Exemple
<MENUBUTTON ID="DW_CodeNav"
image="Toolbars/images/MM/codenav.gif"
disabledImage="Toolbars/images/MM/codenav_dis.gif"
tooltip="Code Navigation"
enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'"
menuID="DWCodeNavPopup"
update="onViewChange"/>
<dropdown>
Description
Un menu déroulant (ou contextuel) est un menu non modifiable qui exécute une commande spécifique attachée à une
fonction JavaScript lorsque vous sélectionnez une entrée et que le menu se met à jour. Ce menu ressemble à l'option
Format de l'inspecteur Propriétés de texte et fonctionne de la même manière, mais s'affiche en taille standard et non
en taille réduite comme dans l'inspecteur Propriété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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<dropdown id="Font_Example"
width="115"
tooltip="Font"
domRequired="false"
file="Toolbars/mine/fontExample.htm"
update="onSelChange"/>
<combobox>
Description
Une zone de liste est un menu déroulant modifiable qui exécute une commande lorsque vous sélectionnez une entrée
ou que vous apportez une modification dans la zone de texte, puis changez la sélection. Le menu ressemble à l'option
Police de l'inspecteur Propriétés de texte et fonctionne de la même manière, mais s'affiche en taille standard et non en
taille réduite comme dans l'inspecteur Propriétés.
Attributs
id, file, tooltip, enabled, value, command, {showiI}, {label}, {width}, {domRequired},
{update}, {arguments}
Vous trouverez une description de chaque attribut dans la section « Attributs des balises d'éléments » à la page 190.
EXTENSION DE DREAMWEAVER CS4 189
Barres d'outils
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<COMBOBOX ID="Address_URL"
width="300"
tooltip="Address"
label="Address: "
file="Toolbars/MM/AddressURL.htm"
update="onBrowserPageBusyChange"/>
<editcontrol>
Description
Une zone de contrôle d'édition est une zone de texte modifiable qui exécute une commande lorsque vous apportez une
modification dans la zone de texte et changez la sélection.
Attributs
id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled},
{update}, {arguments}
Vous trouverez une description de chaque attribut dans la section « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<EDITCONTROL ID="DW_SetTitle"
label="Title: "
tooltip="Document Title"
width="150"
file="Toolbars/MM/EditTitle.htm"/>
<colorpicker>
Description
Un sélecteur de couleur est un panneau de couleurs, sans zone de texte associée, qui exécute une commande lorsque
l'utilisateur sélectionne une nouvelle couleur. Ce panneau ressemble au sélecteur de couleur de l'inspecteur Propriétés
de Dreamweaver et se comporte de la même manière. Vous pouvez choisir une autre icône pour remplacer l'icône par
défaut.
EXTENSION DE DREAMWEAVER CS4 190
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 « Attributs des balises d'éléments » à la page 190.
Contenu
Aucun.
Contenant
La balise toolbar ou toolbarset.
Exemple
<colorpicker id="Color_Example"
image="Toolbars/images/colorpickerIcon.gif"
disabledImage="Toolbars/images/colorpickerIconD.gif"
colorRect="0 12 16 16"
tooltip="Text Color"
domRequired="false"
file="Toolbars/mine/colorExample.htm"
update="onSelChange"/>
Attributs des balises d'éléments
Vous pouvez affecter des attributs et des commandes aux éléments de barres d'outils afin de déterminer leur apparence
et leur comportement. Vous pouvez également inclure d'autres fichiers de barres d'outils et faire référence à des
éléments définis dans d'autres barres d'outils. Les attributs de balises d'éléments de barre d'outils ont les significations
suivantes :
id="unique_id"
Obligatoire. L'attribut id est l'identificateur de l'élément de barre d'outils. L'attribut id doit ê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'élément pour
indiquer et inclure un élément dans une barre d'outils.
Exemple
<button id="DW_DocRerefresh" . . . >
showIf="script"
Facultatif. Cet attribut précise que l'élé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 écrite dans un certain type de langage côté serveur, tel que Adobe ColdFusion, ASP ou JSP. Si vous ne spécifiez pas
l'attribut showIf, l'élément apparaît systématiquement.
L'attribut showIf est vérifié à chaque fois que l'activateur de l'élément s'exécute, c'est-à-dire en fonction de la valeur de
l'attribut update. Utilisez l'attribut showIf avec modération.
EXTENSION DE DREAMWEAVER CS4 191
Barres d'outils
Vous pouvez spécifier l'attribut showIf dans la définition de l'élément et dans une référence à l'élément sur une balise
itemref. Si la définition et la référence spécifient l'attribut showIf, l'élément s'affiche uniquement si les deux
conditions indiquent la valeur true. L'attribut showIf est l'équivalent de la fonction showIf() dans un fichier de
commandes de barre d'outils. Si vous spécifiez l'attribut showIf et la fonction showif(), la fonction remplace
l'attribut.
Exemple
showIf="dw.canLiveDebug()"
image="image_path"
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électeurs de couleurs, et est ignoré pour les autres types
d'éléments. L'attribut image spécifie le chemin, par rapport au dossier Configuration, du fichier de l'icône qui s'affiche
sur le bouton. En général, le fichier de l'icône est au format GIF ou JPEG, mais tous les formats compatibles avec
Dreamweaver sont acceptés.
Si vous spécifiez une icône pour un sélecteur de couleur, celle-ci le remplace entièrement. Si l'attribut colorRect est
également défini, la couleur en cours s'affiche au-dessus de l'icône dans le rectangle spécifié.
Exemple
image="Toolbars/images/MM/codenav.gif"
disabledImage="image_path"
Facultatif. Dreamweaver ignore l'attribut disabledImage des éléments autres que les boutons, les boutons-poussoirs,
les boutons radio, les boutons de menu, de sélecteurs de couleurs et de zone de liste modifiable. Cet attribut spécifie le
chemin, par rapport au dossier Configuration, du fichier de l'icône que Dreamweaver affiche si le bouton est désactivé.
Si vous ne spécifiez pas l'attribut disabledImage, Dreamweaver affiche l'image spécifiée dans l'attribut image lorsque
le bouton est désactivé.
Exemple
disabledImage="Toolbars/images/MM/codenav_dis.gif"
overImage="image_path"
Facultatif. Dreamweaver ignore l'attribut overImage des éléments autres que les boutons, les boutons-poussoirs, les
boutons radio, les boutons de menu, de sélecteurs de couleurs et de zone de liste modifiable. Cet attribut spécifie le
chemin, par rapport au dossier Configuration, du fichier de l'icône que Dreamweaver affiche lorsque l'utilisateur
survole le bouton à l'aide de la souris. Si vous ne spé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="Toolbars/images/MM/codenav_ovr.gif"
tooltip="tooltip string"
Obligatoire. Cet attribut spécifie le texte d'identification ou infobulle qui apparaît lorsque le curseur de la souris survole
l'élément de la barre d'outils.
EXTENSION DE DREAMWEAVER CS4 192
Barres d'outils
Exemple
tooltip="Code Navigation"
label="label string"
Facultatif. Cet attribut spécifie un libellé qui s'affiche à côté de l'élément. Dreamweaver n'ajoute pas automatiquement
un signe deux points aux libellés. Les libellés des éléments qui ne sont pas des boutons sont toujours placés à gauche
de l'élément. Dreamweaver place les libellés des boutons, boutons-poussoirs, boutons radio, boutons de menu et
boutons de liste à l'intérieur du bouton, à droit de l'icône.
Exemple
label="Title: "
width="number"
Facultatif. Cet attribut ne s'applique qu'aux éléments de zone de texte, menu contextuel et zone de liste en spécifiant la
largeur de l'élément en pixels. Si vous ne spécifiez pas l'attribut width, Dreamweaver utilise une largeur par défaut
moyenne.
Exemple
width="150"
menuID="menu_id"
Cet attribut est obligatoire pour les boutons de menu et les boutons de liste, sauf si vous précisez la fonction
getMenuID() dans un fichier de commande associé. Dreamweaver ignore l'attribut menuID pour les autres types
d'éléments. Cet attribut spécifie l'ID de la barre de menu contenant le menu contextuel qui doit apparaî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="DWCodeNavPopup"
colorRect="left top right bottom"
L'attribut est facultatif pour les sélecteurs de couleur qui disposent d'un attribut image. L'attribut colorRect est ignoré
pour tous les autres types d'éléments, ainsi que pour les sélecteurs de couleurs qui ne spécifient pas une image. Si vous
spécifiez l'attribut colorRect, Dreamweaver affiche la couleur couramment sélectionnée dans le sélecteur de couleur,
dans le rectangle, par rapport au côté gauche ou supérieur de l'icône. Si vous ne spécifiez pas l'attribut colorRect,
Dreamweaver n'affiche pas la couleur couramment sélectionnée sur l'image.
Exemple
colorRect="0 12 16 16"
EXTENSION DE DREAMWEAVER CS4 193
Barres d'outils
file="command_file_path"
Obligatoire pour les menus déroulants et les zones de liste modifiables. L'attribut file est facultatif pour les autres
types d'éléments. L'attribut file spécifie le chemin, par rapport au dossier Configuration, du fichier de commandes
contenant les fonctions JavaScript qui serviront à renseigner, mettre à jour et exécuter l'élément. L'attribut file
remplace les attributs enabled, checked, value, update, domRequired, menuID, showIf et command. En général, si
vous spécifiez un fichier de commandes avec l'attribut file, Dreamweaver ignore tous les attributs équivalents
spécifiés dans la balise. Pour plus d'informations sur les fichiers de commande, voir « Fonctions de l'API de commande
de barre d'outils » à la page 195.
Exemple
file="Toolbars/MM/EditTitle.htm"
domRequired="true" ou "false"
Facultatif. Comme avec les menus, l'attribut domRequired spécifie si le mode Création doit être synchronisé avec le
mode Code avant que Dreamweaver n'exécute la commande associée. Si vous ne définissez pas cet attribut, il adopte
la valeur true. Cet attribut est l'équivalent de la fonction isDOMRequired() dans un fichier de commandes de barre
d'outils.
Exemple
domRequired="false"
enabled="script"
Facultatif. Comme avec les menus, le script renvoie une valeur spécifiant si l'élément est activé. Si vous ne définissez
pas cet attribut, il adopte la valeur enabled. L'attribut enabled est l'équivalent de la fonction canAcceptCommand()
dans un fichier de commandes de barre d'outils.
Exemple
enabled="dw.getFocus() =='textView' || dw.getFocus() == 'html'"
checked="script"
Cet attribut est obligatoire pour les boutons-poussoirs et les boutons radio. Dreamweaver ignore l'attribut checked
pour les autres types d'éléments. Comme avec les menus, le script renvoie une valeur spécifiant si l'élément est activé
ou pas. L'attribut checked est l'équivalent de la fonction isCommandChecked() dans un fichier de commandes de
barre d'outils. Si vous ne définissez pas cet attribut, il adopte la valeur unchecked.
Exemple
checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"
value="script"
Cet attribut est obligatoire pour les menus contextuels, les zones de liste modifiable, les zones de texte et les sélecteurs
de couleurs. Dreamweaver ignore l'attribut value pour les autres types d'éléments.
EXTENSION DE DREAMWEAVER CS4 194
Barres d'outils
Pour déterminer la valeur à afficher pour les menus déroulants et les zones de liste modifiables, Dreamweaver appelle
d'abord la fonction isCommandchecked() pour chaque élément dans le menu. Si la fonction isCommandchecked()
renvoie la valeur true pour un élément, Dreamweaver affiche la valeur du premier. Si aucun élément ne renvoie la
valeur true ou si la fonction isCommandChecked() n'est pas définie, Dreamweaver appelle la fonction
getCurrentValue() ou exécute le script spécifié par l'attribut value. Si le contrôle est une zone de liste modifiable,
Dreamweaver affiche la valeur renvoyée. Si le contrôle est un menu déroulant, Dreamweaver ajoute temporairement
la valeur renvoyée dans la liste et l'affiche.
Dans tous les autres cas, le script renvoie la valeur en cours à afficher. Pour les menus déroulants ou les zones de liste
modifiables, cette valeur doit correspondre à l'un des éléments dans la liste du menu. Pour les zones de liste modifiables
et les zones de texte, la valeur peut correspondre à une chaîne quelconque renvoyée par le script. Pour les sélecteurs de
couleurs, la valeur doit être une couleur valide, mais Dreamweaver ne met pas ceci en vigueur.
L'attribut value est l'équivalent de la fonction getCurrentValue() dans un fichier de commandes de barre d'outils.
update="update_frequency_list"
Facultatif. Cet attribut spécifie la fréquence d'exécution des gestionnaires des attributs enabled, checked, showif et
value pour mettre à jour l'état visible de l'élément. L'attribut update est l'équivalent de la fonction
receiveArguments() dans un fichier de commandes de barre d'outils.
Vous devez spécifier la fréquence de la mise à jour des éléments de barre d'outils car ces éléments, contrairement aux
éléments de menu, sont toujours visibles. C'est pourquoi vous devez toujours sélectionner la fréquence la moins élevée
possible et vous assurer que les gestionnaires des attributs enabled, checked et value sont aussi simples que possible.
La liste suivante présente les gestionnaires possibles pour la fonction update_frequency_list, dans l'ordre croissant de
fréquence. Si vous ne définissez pas une valeur pour l'attribut update, la fréquence de mise à jour prend la valeur
onEdit. Vous pouvez spécifier plusieurs fréquences de mise à jour, séparées par des virgules. Les gestionnaires
s'exécutent sur l'un des événements spécifiés suivants :
•
•
onServerModelChange s'exécute lorsque le modèle de serveur de la page en cours change.
onCodeViewSyncChange s'exécute lorsque le mode Code se synchronise ou se désynchronise avec le mode
Création.
•
onViewChange s'exécute chaque fois que l'utilisateur bascule entre les modes Code et Création, ou entre les modes
Code et Création.
•
onEdit s'exécute chaque fois que le document est modifié en mode Création. Les modifications apportées en mode
Code ne déclenchent pas cet événement.
•
onSelChange s'exécute chaque fois que la sélection est modifiée en mode Création. Les modifications apportées en
mode Code ne déclenchent pas cet événement.
•
onEveryIdle s'exécute régulièrement lorsque l'application est inactive. Ceci peut demander un certain temps car
les gestionnaires enabler/checked/showif/value sont exécutés fréquemment. Utilisez-la uniquement pour les
boutons dont l'état actif doit être modifié rapidement à des moments spécifiques.
Remarque : En réalité, dans tous ces cas, Dreamweaver exécute les gestionnaires après l'événement spécifié, lorsque
l'application est au repos. L'exécution des gestionnaires après chaque modification ou changement de sélection n'est
pas garantie ; les gestionnaires s'exécutent dès que possible après une série de modifications ou de changements de
sélection. Par contre, les gestionnaires s'exécutent lorsque l'utilisateur clique sur un élément de barre d'outils.
Exemple
update="onViewChange"
EXTENSION DE DREAMWEAVER CS4 195
Barres d'outils
command="script"
Cet attribut est obligatoire pour tous les éléments, à l'exception des boutons de menu. Dreamweaver ignore l'attribut
command pour les boutons de menu. Spécifie la fonction JavaScript à exécuter lorsque l'utilisateur effectue l'une des
opérations suivantes :
• L'utilisateur clique sur un bouton.
• L'utilisateur sélectionne un élément dans un menu déroulant ou dans une zone de liste.
• L'utilisateur appuie sur la touche Tab pour passer à une autre zone, appuie sur la touche Retour ou clique hors d'une
zone de texte ou de liste.
• L'utilisateur sélectionne une couleur dans un sélecteur de couleur.
L'attribut command est l'équivalent de la fonction receiveArguments() dans un fichier de commandes de barre
d'outils.
Exemple
command="dw.toggleLiveDebug()"
arguments="argument_list"
Facultatif. Cet attribut spécifie la liste d'arguments, séparés par des virgules, pour transmettre la fonction
receiveArguments() à un fichier de commandes de barre d'outils. Si vous ne définissez pas l'attribut arguments,
Dreamweaver transmet l'ID de l'élément de la barre d'outils. En outre, les menus contextuels, les zones de liste
modifiables, les zones de texte et les sélecteurs de couleurs transmettent leur valeur en cours comme premier
argument, avant ceux spécifiés par l'attribut arguments et avant l'ID de l'élément si aucun argument n'est spécifié.
Exemple
Dans une barre d'outils qui comporte les boutons Annuler et Répéter, chaque bouton appelle le fichier de commandes
de menu, Edit_Clipboard.htm, et transmet un argument spécifiant l'action, comme indiqué dans l'exemple suivant :
<button id="DW_Undo"
image="Toolbars/images/MM/undo.gif"
disabledImage="Toolbars/images/MM/undo_dis.gif"
tooltip="Undo"
file="Menus/MM/Edit_Clipboard.htm"
arguments="'undo'"
update="onEveryIdle"/>
<button id="DW_Redo"
image="Toolbars/images/MM/redo.gif"
disabledImage="Toolbars/images/MM/redo_dis.gif"
tooltip="Redo"
file="Menus/MM/Edit_Clipboard.htm"
arguments="'redo'"
update="onEveryIdle"/>
Fonctions de l'API de commande de barre d'outils
Dans de nombreux cas où vous avez spécifié un script pour un attribut, vous pouvez également implémenter cet
attribut à l'aide d'une fonction JavaScript dans un fichier de commandes. Cette action est nécessaire lorsque les
fonctions doivent accepter des arguments, comme dans le gestionnaire d'une zone de texte, et obligatoire pour les
menus déroulants et les zones de liste modifiables.
EXTENSION DE DREAMWEAVER CS4 196
Barres d'outils
L'API du fichier de commandes pour les éléments de la barre d'outils est une extension de l'API du fichier de
commandes de menu ; vous pouvez ainsi réutiliser les fichiers de commandes de menu en tant que fichiers de
commandes de barre d'outils en leur ajoutant des fonctions supplémentaires spécifiques aux barres d'outils.
canAcceptCommand()
Disponibilité
Dreamweaver MX.
Description
Détermine si la barre d'outils est activée. La condition par défaut d'un élément étant l'état activé, vous n'avez pas besoin
de définir cette fonction, sauf si la valeur false est renvoyée dans au moins un cas.
Arguments
Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et sélecteurs de couleurs, le premier
argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, éventuellement, associer
des ID individuels aux éléments d'un menu déroulant. Si l'élément sélectionné dans le menu déroulant dispose d'un
ID, Dreamweaver transmet cet ID à 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 à une entrée dans le
menu déroulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver effectue la comparaison avec le
menu déroulant, sans respecter la casse, afin de déterminer si le contenu de la zone de texte correspond à une entrée
de la liste.
Si vous spécifiez l'attribut arguments pour cet élément de la barre d'outils dans le fichier toolbars.xml, les arguments
sont transmis ensuite. Si vous n'avez pas défini l'attribut arguments, Dreamweaver transmet l'ID de l'élément.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'élément est activé, false dans les autres cas.
Exemple
function canAcceptCommand()
{
return (dw.getDocumentDOM() != null);
}
getCurrentValue()
Disponibilité
Dreamweaver MX.
Description
Renvoie la valeur actuelle à afficher dans l'élément. Dreamweaver appelle la fonction getCurrentValue() pour les
menus déroulants, les zones de liste modifiables, les zones de texte et les sélecteurs de couleurs. Pour les menus
déroulants, la valeur en cours doit représenter l'un des éléments dans le menu. Si ce n'est pas le cas, Dreamweaver
sélectionne le premier élément de la liste. Pour les zones de liste modifiables et les zones de texte, cette valeur peut
correspondre à une chaîne quelconque renvoyée par la fonction. Pour les sélecteurs de couleurs, la valeur doit être une
couleur valide, mais Dreamweaver ne met pas ceci en vigueur. Cette fonction est l'équivalent de l'attribut value.
EXTENSION DE DREAMWEAVER CS4 197
Barres d'outils
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend l'affichage d'une chaîne contenant la valeur en cours. Pour le sélecteur de couleur, la chaîne
contient la forme RVB de la couleur sélectionnée (par exemple #FFFFFF pour le blanc).
Exemple
function getCurrentValue()
{
var title = "";
var dom = dw.getDocumentDOM();
if (dom)
title = dom.getTitle();
return title;
}
getDynamicContent()
Disponibilité
Dreamweaver MX.
Description
Cette fonction est obligatoire pour les menus déroulants et les zones de liste modifiables. Comme pour les menus, cette
fonction renvoie un tableau de chaînes pour renseigner le menu déroulant. Chacune de ces chaînes peut
éventuellement se terminer par ";id=id". Si un ID est spécifié, Dreamweaver le transmet à la fonction
receiveArguments() au lieu de faire apparaître la chaîne dans le menu.
Le nom getDynamicContent() prête à confusion car cette fonction doit être utilisée même si la liste des entré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çu pour être appelé depuis des élé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ême
fichier de commandes dans un menu déroulant de barre d'outils. Les éléments de barre d'outils ignorent les caractères
de soulignement dans les chaînes des tableaux renvoyés, pour vous permettre de réutiliser les fichiers de commandes
de menu. Dans le fichier de commandes de menu, Dreamweaver ignore la fonction getDynamicContent(), car
l'élément de menu n'est pas marqué comme dynamique.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau de chaînes pour renseigner le menu.
EXTENSION DE DREAMWEAVER CS4 198
Barres d'outils
Exemple
function getDynamicContent()
{
var items = new Array;
var filename = dw.getConfigurationPath() + "/Toolbars/MM/AddressList.xml";
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("url");
if (addressNodes.length)
{
for (var i=0; i < addressNodes.length ; i++ )
{
items[i] = addressNodes[i].address + ";id='" +
addressNodes[i].address + "'";
}
}
}
return items;
getMenuID()
Disponibilité
Dreamweaver MX.
Description
Uniquement valide pour les boutons de menu. Dreamweaver appelle la fonction getMenuID() pour obtenir l'ID du
menu devant apparaître lorsque l'utilisateur clique sur le bouton.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne contenant un ID de menu, défini dans le fichier menus.xml.
EXTENSION DE DREAMWEAVER CS4 199
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é
Dreamweaver MX.
Description
Spécifie la fréquence d'exécution des gestionnaires des attributs enabled, checked, showif et value pour mettre à
jour l'état visible de l'élément.
Vous devez spécifier la fréquence de la mise à jour des éléments de barre d'outils, car ces éléments, contrairement aux
éléments de menu, sont toujours visibles. C'est pourquoi vous devez toujours choisir la fréquence la moins élevée
possible et vous assurer que les gestionnaires des attributs enabled, checked et value sont aussi simples que possible.
Cette fonction est l'équivalent de l'attribut update dans un élément de barre d'outils.
Arguments
Aucun.
EXTENSION DE DREAMWEAVER CS4 200
Barres d'outils
Valeurs renvoyées
Dreamweaver attend une chaîne contenant la liste des gestionnaires de mise à jour, séparés par des virgules. Vous
trouverez la liste complète des gestionnaires de mise à jour possibles dans la section
« update="update_frequency_list" » à la page 194.
Exemple
function getUpdateFrequency()
{
return onSelChange";
}
isCommandChecked()
Disponibilité
Dreamweaver MX.
Description
Renvoie une valeur indiquant si l'élément est sélectionné. Dans le cas des boutons, l'attribut checked indique si le
bouton apparaît activé ou enfoncé. La fonction isCommandChecked() est l'équivalent de l'attribut checked dans une
balise d'élément de barre d'outils.
Arguments
Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et sélecteurs de couleurs, le premier
argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, éventuellement, associer
des ID individuels aux éléments d'un menu déroulant. Si l'élément sélectionné dans le menu dispose d'un ID,
Dreamweaver transmet cet ID à 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 à une entrée dans le menu
déroulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de la zone de liste
avec celui du menu déroulant, sans tenir compte des majuscules et des minuscules, pour vérifier la correspondance des
éléments.
Si vous avez spécifié l'attribut arguments pour cet élément, les arguments sont transmis ensuite. Si vous ne définissez
pas l'attribut arguments, Dreamweaver transmet l'ID de l'élément de la barre d'outils.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'élément est activé, false dans les autres cas.
Exemple
L'exemple suivant détermine quel élément, le cas échéant, doit être activé dans un menu déroulant contenant des
formats de paragraphe et des styles CSS :
EXTENSION DE DREAMWEAVER CS4 201
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 == "(None)")
bChecked = (dw.cssStylePalette.getSelectedStyle() == '' || textFormat ==
"" || textFormat == "P" || textFormat == "PRE");
else if (style == "Heading 1")
bChecked =0(textFormat == "h1");
else if (style == "Heading 2")
bChecked =0(textFormat == "h2");
else if (style == "Heading 3")
bChecked =0(textFormat == "h3");
else if (style == "Heading 4")
bChecked =0(textFormat == "h4");
else if (style == "Heading 5")
bChecked =0(textFormat == "h5");
else if (style == "Heading 6")
bChecked =0(textFormat == "h6");
else
bChecked = (dw.cssStylePalette.getSelectedStyle() == style);
return bChecked;
}
isDOMRequired()
Disponibilité
Dreamweaver MX.
Description
Spécifie si la commande de barre d'outils nécessite un DOM valide pour fonctionner. Si cette fonction renvoie la valeur
true ou si la fonction n'est pas définie, Dreamweaver suppose que la commande nécessite un DOM valide et
synchronise les modes Code et Création du document avant de l'exécuter. Cette fonction est l'équivalent de l'attribut
domRequired dans une balise d'élément de barre d'outils.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si DOM est requis, false dans les autres cas.
Exemple
function isDOMRequired()
{
return false;
}
EXTENSION DE DREAMWEAVER CS4 202
Barres d'outils
receiveArguments()
Disponibilité
Dreamweaver MX.
Description
Traite tous les arguments transmis depuis un élément de barre d'outils. La fonction receiveArguments() est
l'équivalent de l'attribut command dans une balise d'élément de barre d'outils.
Arguments
Dans le cas des menus déroulants, zones de liste modifiables, zones de texte et sélecteurs de couleurs, le premier
argument est la valeur en cours dans le contrôle. La fonction getDynamicContent() peut, éventuellement, associer
des ID individuels aux éléments d'un menu déroulant. Si l'élément sélectionné dans le menu contextuel déroulant
dispose d'un ID, Dreamweaver transmet cet ID à 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 à une entrée
dans le menu déroulant, Dreamweaver transmet le contenu de la zone de texte. Dreamweaver compare le contenu de
la zone de liste avec celui du menu déroulant, sans tenir compte des majuscules et des minuscules, pour vérifier la
correspondance des éléments.
Si vous avez spécifié l'attribut arguments pour cet élément, les arguments sont transmis ensuite. Si vous n'avez pas
défini l'attribut arguments, Dreamweaver transmet l'ID de l'élément.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
function receiveArguments(newTitle)
{
var dom = dw.getDocumentDOM();
if (dom)
dom.setTitle(newTitle);
}
showIf()
Disponibilité
Dreamweaver MX.
Description
Indique qu'un élément apparaî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èle
de serveur donné. Si vous ne définissez pas la fonction showif(), l'élément s'affiche toujours. La fonction showIf()
est l'équivalent de l'attribut showIf dans une balise d'élément de barre d'outils.
La fonction showIf() est appelée à chaque fois que l'activateur de l'élément s'exécute ; c'est-à-dire, en fonction de la
valeur renvoyée par la fonction getUpdateFrequency().
Arguments
Aucun.
EXTENSION DE DREAMWEAVER CS4 203
Barres d'outils
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'élé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;
}
204
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és sur le site ou modifier le jeu de rapports prédéfinis
fournis avec Dreamweaver. Vous ne pouvez accéder aux rapports de site que par l'intermédiaire de la boîte de dialogue
Rapports.
Les rapports de site sont localisés dans le dossier Configuration/Reports de Dreamweaver. Ce dossier contient
plusieurs sous-dossiers représentant les différentes catégories de rapport, chaque rapport ne pouvant appartenir qu'à
une seule catégorie. Les noms de catégorie sont limités à 31 caractères. Chaque sous-dossier peut contenir un fichier
nommé _foldername.txt. Si ce fichier est présent, Dreamweaver utilise son contenu comme nom de catégorie. S'il
n'existe pas, Dreamweaver utilise le nom du dossier.
Lorsque l'utilisateur sélectionne plusieurs rapports de site dans la boîte de dialogue Rapports, Dreamweaver place tous
les résultats dans la même fenêtre Résultats, sous l'onglet Rapports du site du panneau Résultats. Dreamweaver
remplace ces résultats dès que l'utilisateur exécute un nouveau rapport de site.
Le tableau ci-dessous recense les fichiers utilisés pour créer un rapport de site :
Chemin
Fichier
Description
Configuration/Reports/{type/}
reportname.js
Contient les fonctions requises pour générer le
contenu du rapport.
Configuration/Reports/{type/}
reportname.htm
Appelle les fichiers JavaScript appropriés.
Définit l'interface utilisateur (UI) de la boîte de
dialogue Paramètres associée au rapport, le cas
échéant.
Configuration/Reports/
Reports.js
Fournit les fonctions communes utilisées pour
la génération de rapports.
Fonctionnement des rapports de site
1 Pour accéder aux rapports, choisissez Site > Rapports. Dans la boîte de dialogue qui s'affiche, sélectionnez les
rapports à exécuter sur des cibles spécifiques.
2 Sélectionnez les fichiers pour lesquels effectuer les rapports à l'aide du menu Rapport sur. Ce menu contient les
commandes suivantes : Document actif, Site local en cours entier, Fichiers sélectionnés dans le site et Dossier.
Lorsque vous sé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édant des paramètres en cliquant sur le bouton Paramètres, puis en
saisissant des valeurs pour ces paramètres. Pour pouvoir définir vous-même des paramètres, le rapport doit
contenir une boîte de dialogue Paramètres. La définition de ces paramètres est facultative ; il n'est pas nécessaire de
définir les paramètres de chaque rapport. Si un rapport ne possède pas de boîte de dialogue Paramètres, le bouton
Paramètres est estompé lorsque vous sélectionnez le rapport dans la liste.
4 Une fois le rapport sélectionné et les paramètres définis, vous cliquez sur le bouton Exécuter.
EXTENSION DE DREAMWEAVER CS4 205
Rapports
Remarque : Si un rapport contient le gestionnaire preventFileActivity, Dreamweaver vous interdit d'exécuter
toute tâche associée aux fichiers pendant l'exécution du rapport.
Dreamweaver efface alors tous les éléments de l'onglet Rapports du site du panneau Résultats. Dreamweaver appelle
la fonction beginReporting() dans chaque rapport avant le début du processus de génération de rapport. Si un
rapport renvoie la valeur false à partir de cette fonction, celle-ci est retirée du processus de rapport.
5 Chaque fichier est transmis à chaque rapport sélectionné dans la boîte de dialogue à l'aide de la fonction
processFile(). Si le rapport doit inclure des informations sur ce fichier dans la liste des résultats, la fonction
dw.resultsPalette.siteReports.addResultItem() doit être appelée. Le processus se poursuit jusqu'à ce que
tous les fichiers sélectionnés par l'utilisateur soient traités ou jusqu'à ce que l'utilisateur clique sur le bouton Arrêter
situé au bas de la fenêtre. Dreamweaver affiche le nom de chaque fichier en cours de traitement et le nombre de
fichiers restant à traiter.
6 Dreamweaver appelle la fonction endReporting() dans chaque rapport à 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éférencées dans un fichier spécifique, un site entier, des
fichiers sélectionnés ou un dossier et affiche le rapport dans l'onglet Rapports du site de la fenêtre de résultats.
Pour créer cette extension, vous devez créer la définition du rapport et rédiger le code JavaScript.
Cet exemple crée deux fichiers dans le dossier HTML Reports : List images.htm, qui contient la définition du rapport,
et List Images.js, qui contient le code JavaScript spécifique à ce rapport. Vous référencez en outre le fichier Reports.js,
intégré à Dreamweaver.
Création de la définition du rapport
La définition du rapport spécifie le nom du rapport tel qu'il s'affiche dans la boîte de dialogue Rapports, appelle tout
fichier JavaScript requis et définit l'interface utilisateur de la boîte de dialogue Paramètres, le cas échéant.
1 Cré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îte de dialogue Rapports, dans
le titre de la page HTML.
<html>
<head>
<title>List Images</title>
3 En fin de fichier, ajoutez la balise script et spécifiez le fichier Reports.js dans l'attribut src.
<script src="../Reports.js"></script>
4 En fin de fichier, ajoutez une autre balise script et spécifiez le fichier List Images.js, que vous allez créer à l'étape
suivante, dans l'attribut src.
<html>
<head>
<title>List Images</title>
<script src="../Reports.js"></script>
<script src="List Images.js"></script>
5 Fermez la balise head, insérez des balises body d'ouverture et de fermeture, puis fermez la balise html.
EXTENSION DE DREAMWEAVER CS4 206
Rapports
</head>
<body>
</body>
</html>
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, à partir duquel vous pouvez appeler toute fonction. Vous devez cependant
créer également le fichier JavaScript contenant toute fonction spécifique à votre rapport de site personnalisé.
1 Créez le fichier Configuration/Reports/HTML Reports/List Images.js et insé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 < 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être Résultats pour créer un rapport autonome. Les rapports autonomes sont des
commandes normales qui utilisent directement l'API de la fenêtre des résultats plutôt que l'API de rapports. Les
rapports autonomes sont accessibles de la même manière que les autres commandes, à partir des menus ou d'une autre
commande.
Les rapports autonomes résident dans le dossier Configuration/Commands de Dreamweaver. Une commande
personnalisée associée à un rapport autonome figure dans le menu Commandes.
Dreamweaver crée une nouvelle fenêtre de résultats chaque fois que l'utilisateur exécute un nouveau rapport
autonome.
EXTENSION DE DREAMWEAVER CS4 207
Rapports
Chemin
Fichier
Description
Configuration/Commands
commandname.htm
Définit l'interface utilisateur de la boîte de
dialogue qui s'affiche lorsque vous
sélectionnez la commande et contient le code
JavaScript ou une référence au fichier
JavaScript qui exécute les actions requises
pour générer le rapport.
Configuration/Commands
commandname.js
Génère une fenêtre de résultats et y insère le
rapport.
Mode de fonctionnement des rapports autonomes
1 La commande personnalisée, que vous créez pour générer le rapport, ouvre une nouvelle fenêtre de résultats en
appelant la fonction dw.createResultsWindow() et en stockant l'objet de résultats renvoyés dans une variable de
fenêtre. Les fonctions restantes du processus doivent être appelées en tant que méthodes de cet objet.
2 La commande personnalisée initialise le titre et le format de la fenêtre Résultats en appelant les fonctions
setTitle() et SetColumnWidths() en tant que méthodes de l'objet de la fenêtre Résultats.
3 La commande peut commencer immédiatement à ajouter des éléments dans la fenêtre Résultats en appelant la
fonction addItem() ou à itérer une liste de fichiers en appelant les fonctions setFileList() et
startProcessing() en tant que méthodes de l'objet de la fenêtre Résultats.
4 Lorsque la commande appelle resWin.startProcessing(), Dreamweaver appelle la fonction processFile()
pour chaque URL de fichier dans la liste. Définissez la fonction processFile() dans la commande autonome. Elle
reçoit l'URL de fichier comme seul argument. Utilisez la fonction setCallbackCommands() de l'objet de la fenêtre
Ré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ès à la fenêtre de résultats créée par
la commande autonome. La fonction processFile() peut également appeler la fonction stopProcessing() de
l'objet de la fenêtre Résultats pour arrêter le traitement des fichiers de la liste.
Exemple de rapport autonome simple
L'extension simple de rapport autonome recense les images référencées dans un fichier spécifique et affiche le rapport
dans la fenêtre de résultats.
Pour créer cette extension, vous devez créer l'interface utilisateur de la boîte de dialogue et rédiger le code JavaScript.
Cet exemple crée deux fichiers dans le dossier Configuration/Commands : List images.htm, qui définit l'interface
utilisateur de la boîte de dialogue qui s'affiche lorsque l'utilisateur choisir la commande personnalisée, et Listimages.js,
qui contient le code JavaScript spécifique à ce rapport.
Création de l'interface utilisateur de la boîte de dialogue
La section body du fichier HTML spécifie le contenu de la boîte de dialogue qui s'affiche lorsque l'utilisateur
sélectionne la commande personnalisée et appelle tout fichier JavaScript requis.
1 Créez le fichier Configuration/Commands/Listimages.htm.
2 Insérez le code ci-dessous dans le fichier Listimages.htm :
EXTENSION DE DREAMWEAVER CS4 208
Rapports
<html>
<head>
<title>Standalone report example</title>
<script src="Listimages.js">
</script>
</head>
<body>
<div name="test">
<form name="myForm">
<table>
<tr>
<td>Click OK to display the standalone report.</td>
</tr>
</table>
</form>
</div>
</body>
3 Enregistrez le fichier sous le nom Listimages.htm dans le dossier Configuration/Commands.
Ecriture du code JavaScript
Créez le fichier JavaScript contenant les fonctions spécifiques à votre rapport autonome.
1 Créez le fichier Listimages.js dans le dossier Configuration/Commands et insérez-y le code suivant :
EXTENSION DE DREAMWEAVER CS4 209
Rapports
function stdaloneresultwin()
{
var curDOM = dw.getDocumentDOM("document");
var tagList = curDOM.getElementsByTagName('img');
var imgfilename;
var iOffset = 0;
var iLineNumber = 0;
var resWin = dw.createResultsWindow("Images in File", ["Line", "Image"]);
for (var i=0; i < 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, "0", "Images in Current File", null, ¬
null, null, [iLineNumber, imgfilename]);
}
}
return;
}
// add buttons to dialog
function commandButtons()
{
return new Array("OK", "stdaloneresultwin()", "Cancel", "window.close()");
}
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é
Dreamweaver 4.
EXTENSION DE DREAMWEAVER CS4 210
Rapports
Description
Cette fonction est appelée lorsqu'un fichier doit être traité. 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é.
Arguments
strFilePath
L'argument strFilePath est le nom et le chemin complet du fichier à traiter.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
beginReporting()
Disponibilité
Dreamweaver 4.
Description
Cette fonction est appelée au début du processus de rapport, avant l'exécution du rapport. Si la commande Rapport
renvoie la valeur false à partir de la fonction, la commande Rapport est exclue du processus de rapport.
Arguments
target
L'argument target est une chaîne indiquant la cible de la session de rapport. Il peut s'agir d'une des valeurs suivantes :
"CurrentDoc", "CurrentSite", "CurrentSiteSelection" (pour les fichiers sélectionnés dans un site), ou
"Folder:+ le chemin vers le dossier sélectionné par l'utilisateur" (par exemple, "Folder:c:temp").
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le rapport s'exécute correctement, et false si l'élément target est
exclu de l'exécution du rapport.
endReporting()
Disponibilité
Dreamweaver 4.
Description
Cette fonction est appelée à la fin du processus de rapport.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
EXTENSION DE DREAMWEAVER CS4 211
Rapports
commandButtons()
Disponibilité
Dreamweaver 4.
Description
Définit les boutons devant figurer dans la partie droite de la boîte de dialogue Options et leur comportement lorsque
l'utilisateur clique dessus. Si cette fonction n'est pas définie, aucun bouton n'apparaît et la section body du fichier de
rapports s'étend de façon à remplir la totalité de la boîte de dialogue.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver renvoie un tableau contenant un nombre pair d'éléments. Le premier élément est une chaîne contenant
le libellé du premier bouton. Le deuxième élément est une chaîne de code JavaScript définissant le comportement du
premier bouton lorsque l'utilisateur clique dessus. Les autres éléments définissent les boutons supplémentaires de la
même manière.
Exemple
Dans l'exemple suivant, la fonction commandButtons() définit trois boutons : OK, Annuler et Aide.
function commandButtons(){
return new Array("OK" , "doCommand()" , "Cancel" , ¬
"window.close()" , "Help" , "showHelp()");
}
configureSettings()
Disponibilité
Dreamweaver 4.
Description
Détermine si le bouton Paramètres du rapport doit être activé dans la boîte de dialogue Rapports lorsqu'un rapport est
sélectionné.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le bouton Paramètres du rapport doit être activé, false dans les
autres cas.
windowDimensions()
Disponibilité
Dreamweaver 4.
EXTENSION DE DREAMWEAVER CS4 212
Rapports
Description
Définit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les dimensions de la
fenêtre sont calculées automatiquement.
Remarque : Ne définissez cette fonction que si vous souhaitez utiliser une boîte de dialogue Options ayant des dimensions
supérieures à 640 x 480 pixels.
Arguments
platform
La valeur de l'argument platform est soit "macintosh", soit "windows", selon la plate-forme utilisée par l'utilisateur.
Valeurs renvoyées
Dreamweaver renvoie une chaîne au format "widthInPixels,heightInPixels".
Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaître toutes les options, des
barres de défilement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue Paramètres à
648 x 520 pixels :
function windowDimensions(){
return "648,520";
}
213
Chapitre 13 : Bibliothèques et éditeurs de
balises
Dreamweaver enregistre les informations sur chaque balise, y compris leurs attributs, dans un groupe de sous-dossiers
localisés dans le dossier Configuration/TagLibraries. Les fonctions de l'éditeur de balises et du sélecteur de balises
utilisent les informations enregistrées dans ces dossiers lors de la manipulation et de la modification des balises.
Dreamweaver comprend des éditeurs pour les langages suivants : HTML, ASP.NET, CFML, JRun et JSP. Vous pouvez
personnaliser ces éditeurs et en créer de nouveaux, ou ajouter de nouvelles balises aux bibliothèques de balises.
Avant de vous lancer dans la création d'éditeurs de balises personnalisés, vous devez comprendre la structure de la
bibliothèque de balises. Le tableau ci-dessous recense les fichiers utilisés pour créer une bibliothèque de balises :
Chemin
Fichier
Description
Configuration/TagLibraries/
TagLibraries.vtm
Recense chaque balise installée.
Configuration/TagLibraries/langage/
tag.vtm
Inclut des informations sur les balises, tels
les attributs correspondants, et indique si
la balise est associée à une balise de
fermeture, ainsi que les règles de mise en
forme.
Configuration/TagLibraries/langage/
Fichier_image_balis Fichier facultatif à afficher dans
e.gif
l'inspecteur Propriétés.
Format de fichier bibliothèque de balises
La bibliothèque de balises est composée d'un fichier racine, du fichier TagLibraries.vtm, contenant la liste des balises
installées, et d'un fichier VTML pour chaque balise dans la bibliothèque. Le fichier TagLibraries.vtm fonctionne
comme une table des matières et contient des pointeurs vers le fichier VTML de chaque balise. La figure suivante
indique comment Dreamweaver répartit les fichiers VTML en fonction du langage de marquage :
EXTENSION DE DREAMWEAVER CS4 214
Bibliothèques et éditeurs de balises
Les utilisateurs de Macromedia HomeSite d'Adobe peuvent reconnaître la structure des fichiers VTML, mais
Dreamweaver n'utilise pas ces fichiers de la même manière que HomeSite. La diffé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ésente la structure du fichier TagLibraries.vtm :
<taglibraries>
<taglibrary name="Name of tag library" doctypes="HTML,ASP-JS,ASP-VB" tagchooser="relative
path to TagChooser.xml file" id="DWTagLibrary_html">
<tagref name="tag name" file="relative path to tag .vtm file"/>
</taglibrary>
<taglibrary name="CFML Tags" doctypes="ColdFusion" servermodel="Cold Fusion"
tagchooser="cfml/TagChooser.xml" id="DWTagLibrary_cfml">
<tagref name="cfabort" file="cfml/cfabort.vtm"/>
</taglibrary>
<taglibrary name="ASP.NET Tags" doctypes="ASP.NET_CSharp,ASP.NET_VB" servermodel="ASPNet"
prefix="<asp:" tagchooser="ASPNet/TagChooser.xml" id="DWTagLibrary_aspnet">
<tagref name="dataset" file="aspnet/dataset.vtm" prefix="<mm:dataset"/>
</taglibrary>
</taglibraries>
La balise taglibrary regroupe une ou plusieurs balises dans une bibliothèque de balises. Lorsque vous importez des
balises ou créez un nouveau jeu de balises, vous pouvez les regrouper dans des bibliothèques de balises. Souvent, un
regroupement taglibrary correspond à un ensemble de balises qui sont dé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ésente les attributs taglibrary :
Attribut
Description
Obligatoire ou facultatif
taglibrary.name
Utilisé pour référencer la bibliothèque de balises dans l'interface
utilisateur.
Obligatoire
taglibrary.doctypes
Indique les types de documents pour lesquels cette bibliothèque Obligatoire
est active. Lorsque la bibliothèque est active, les balises de
bibliothèque s'affichent dans le menu contextuel Indicateurs de
code. Les bibliothèques de balises ne peuvent pas toutes être
actives en même temps car des conflits de nom risquent de
survenir (par exemple, les fichiers HTML et WML ne sont pas
compatibles).
taglibrary.prefix
Lorsqu'ils sont spécifiés, les balises qui appartiennent à la
bibliothèque de balises prennent la forme
taglibrary.prefix+ tagref.name. Par exemple, si
taglibrary.prefix vaut "<jrun:" et si tagref.name vaut
"if", la balise prend la forme "<jrun:if". Cet attribut peut
être ignoré pour une balise définie.
Facultatif
EXTENSION DE DREAMWEAVER CS4 215
Bibliothèques et éditeurs de balises
Attribut
Description
Obligatoire ou facultatif
taglibrary.servermodel
Si les balises dans la bibliothèque de balises s'exécutent sur un
Facultatif
serveur d'application, l'attribut servermodel identifie le modèle
serveur de la balise. S'il s'agit de balises côté client (et non de
balises côté serveur), l'attribut servermodel est ignoré.
L'attribut servermodel est utilisé également pour vérifier les
navigateurs cibles.
taglibrary.id
Facultatif
Cet attribut peut être une chaîne quelconque différente des
attributs taglibrary.ID des autres bibliothèques de balises du
fichier. Extension Manager utilise l'attribut ID afin de laisser aux
fichiers MXP la possibilité d'insérer de nouveaux taglibrary et
fichiers tags dans le fichier TagLibraries.vtm.
taglibrary.tagchooser
Un chemin relatif au fichier TagChooser.xml associé à cette
bibliothèque de balises.
Facultatif
Le tableau suivant présente les attributs tagref :
Attribut
Description
Obligatoire ou facultatif
tagref.name
Utilisé pour référencer la balise dans l'interface utilisateur.
Obligatoire
tagref.prefix
Indique comment doit s'afficher la balise en mode Code. Lorsqu'il Facultatif
est utilisé, l'attribut tagref.prefix détermine le préfixe de la
balise en cours. Lorsqu'il est défini, il remplace la valeur spécifiée
pour l'attribut taglibrary.prefix.
tagref.file
Réfé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êter à confusion. Le tableau suivant montre la relation entre les attributs taglibrary.prefix et
tagref.prefix :
L'attribut taglibrary.prefix est-il
défini ?
L'attribut tagref.prefix est-il
défini ?
Préfixe de balise obtenu
Non
Non
'<' + tagref.name
Oui
Non
taglibrary.prefix + tagref.name
Non
Oui
tagref.prefix
Oui
Oui
tagref.prefix
Pour définir les balises, Dreamweaver utilise une version modifiée du format de fichier VTML. L'exemple suivant
présente tous les éléments que Dreamweaver doit utiliser pour définir une balise individuelle :
EXTENSION DE DREAMWEAVER CS4 216
Bibliothèques et éditeurs de balises
<tag name="input" bind="value" casesensitive="no" endtag="no">
<tagformat indentcontents="yes" formatcontents="yes" nlbeforetag nlbeforecontents=0
nlaftercontents=0 nlaftertag=1 />
<tagdialog file = "input.HTM"/>
<attributes>
<attrib name="name"/>
<attrib name="wrap" type="Enumerated">
<attriboption value="off"/>
<attriboption value="soft"/>
<attriboption value="hard"/>
/attrib>
<attrib name="onFocus" casesensitive="yes"/>
<event name="onFocus"/>
</attributes>
</tag>
Le tableau suivant présente les attributs de définition des balises :
Attribut
Description
Obligatoire ou
facultatif
tag.bind
Utilisé par le panneau Liaisons de données.
Lorsque vous sélectionnez une balise de ce type,
l'attribut bind indique l'attribut par défaut pour
la liaison des données.
Facultatif
tag.casesensitive
Indique si le nom de la balise doit respecter la
Facultatif
casse. Si le nom de la balise doit respecter la
casse, il est inséré dans le document de
l'utilisateur exactement comme spécifié dans la
bibliothèque de balises. S'il n'est pas nécessaire
de respecter la casse, le nom de la balise est
inséré en utilisant la casse par défaut spécifiée
dans l'onglet Format de code de la boîte de
dialogue Préférences. Si vous ne spécifiez pas
l'attribut casesensitive, la balise ne distingue
par les majuscules des minuscules.
tag.endtag
Spécifie si la balise dispose d'une balise
Facultatif
d'ouverture et d'une 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 être défini
sur Yes. Spécifiez xml pour appliquer la syntaxe
XML à une balise vide. Par exemple, <tag
name="foo" endtag="xml"
tagtype="empty"> insère <foo/>.
tagformat
Définit les règles de mise en forme de la balise.
Facultatif
Dans les versions antérieures à Dreamweaver MX,
les règles de mise en forme étaient enregistrées
dans le fichier SourceFormat.txt.
tagformat.indentcontents
Indique si le contenu de cette balise doit être mis Facultatif
en retrait.
tagformat.formatcontents
Indique si le contenu de cette balise doit être
analysé. Cet attribut est défini sur No pour les
balises telles que SCRIPT et STYLE, dans
lesquelles le contenu n'est pas du code HTML.
Facultatif
EXTENSION DE DREAMWEAVER CS4 217
Bibliothèques et éditeurs de balises
Attribut
Description
Obligatoire ou
facultatif
tagformat.nlbeforetag
Spécifie si un caractère de nouvelle ligne doit être Facultatif
inclus avant cette balise. La valeur 0 signifie non
et la valeur 1, oui.
tagformat.nlbeforecontents
Le nombre de caractères de nouvelle ligne
devant être insérés avant le contenu de cette
balise.
Facultatif
tagformat.nlaftercontents
Le nombre de caractères de nouvelle ligne
devant être insérés après le contenu de cette
balise.
Facultatif
tagformat.nlaftertag
Spécifie si un caractère de nouvelle ligne doit être Facultatif
inclus après cette balise. La valeur 0 signifie non
et la valeur 1, oui.
attrib.name
Le nom de l'attribut, tel qu'il apparaît dans le
code source.
attrib.type
S'il n'est pas défini, l'attribut attrib.type est
Facultatif
"text". Ses valeurs peuvent être les suivantes :
TEXT (texte libre) ENUMERATED (liste de valeurs
énumérées) COLOR (valeur de couleur : nom ou
valeur hexadé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ès complet à un fichier)
DIRECTORY (chemin d'accès à un dossier)
FILENAME (nom de fichier seul) RELATIVEPATH
(représentation relative du chemin d'accès) FLAG
(attribut ON/OFF qui ne contient aucune valeur).
attrib.casesensitive
Indique si le nom de l'attribut doit respecter la
Facultatif
casse. Si l'attribut CASESENSITIVE est absent, le
nom de l'attribut ne distingue pas les majuscules
des minuscules.
Obligatoire
Remarque : Dans les versions antérieures à Dreamweaver MX, les informations sur les balises sont enregistrées dans le
fichier Configuration/TagAttributeList.txt.
Sélecteur de balises
Le sélecteur de balises vous permet d'afficher les balises dans des groupes fonctionnels et d'accéder rapidement aux
balises fréquemment utilisées. Pour ajouter une balise ou un groupe de balises dans le sélecteur de balises, vous devez
d'abord l'ajouter dans la bibliothèque de balises. Vous pouvez effectuer cette opération à l'aide de la boîte de dialogue
Editeur de la bibliothèque de balises ou en installant une extension Dreamweaver, empaquetée dans un fichier MXP.
Fichiers Tagchooser.xml
Les fichiers Tagchooser.xml contiennent les métadonnées utilisées pour organiser les regroupements de balises qui
apparaissent dans le sélecteur de balises. Chaque balise livrée avec Dreamweaver est enregistrée dans un regroupement
fonctionnel, et est disponible dans le sélecteur de balises. Vous pouvez regrouper les balises existantes et créer des
groupes de nouvelles balises en modifiant les fichiers TagChooser.xml. Vous pouvez également personnaliser la
structure des balises en créant des sous-catégories pour permettre aux utilisateurs d'accéder facilement aux balises les
plus importantes pour leur travail.
EXTENSION DE DREAMWEAVER CS4 218
Bibliothèques et éditeurs de balises
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éez de nouveaux,
l'attribut taglibrary.tagchooser doit pointer vers l'emplacement exact du sélecteur de balises pour pouvoir
fonctionner correctement.
S'il n'existe pas d'attribut taglibrary.tagchooser, le sélecteur de balises affiche l'arborescence définie dans le
TagLibraries.vtm.
Les fichiers TagChooser.xml résident dans le dossier Configuration/TagLibraries/Nom_bibliothèque_balises.
L'exemple suivant présente la structure des fichiers TagChooser.xml :
<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<tclibrary name="Friendly name for library node" desc='Description for incorporated
reference' reference="Language[,Topic[,Subtopic]]">
<category name="Friendly name for category node" desc='Description for incorporated
reference' reference="Language[,Topic[,Subtopic]]" id="Unique id">
<category name="Friendly name for subcategory node" ICON="Relative path"
desc='Description for incorporated reference' reference="Language,Topic[,Subtopic]"
id="Unique id">
<element name="Friendly name for list item" value='Value to pass to visual dialog
editors' desc='Description for incorporated reference'
reference="Language[,Topic[,Subtopic]]" id="Unique id"/>
... more elements to display in the list view ...
</category>
... more subcategories ...
</category>
... more categories ...
</tclibrary>
Le tableau suivant présente les balises pouvant être utilisées dans les fichiers TagChooser.xml :
Balise
Description
Obligatoire ou facultatif
tclibrary
Balise extérieure qui encapsule cette structure de sélecteur de balises
de la bibliothèque de balises.
Obligatoire
tclibrary.name
Cette valeur s'affiche dans le nœud Arborescence.
Obligatoire
tclibrary.desc
Cette valeur est une chaîne HTML qui s'affiche dans la section Infos sur Facultatif (desc et reference
les balises de la boîte de dialogue Sélecteur de balises. S'il n'existe pas s'excluent mutuellement)
d'attribut desc, les informations Infos sur les balises proviennent du
panneau Référence. Interchangeable avec tclibrary.reference.
tclibrary.reference
Cette valeur décrit le langage, la rubrique et la sous-rubrique à afficher Facultatif (desc et reference
dans la section Infos sur les balises de la boîte de dialogue Sélecteur de s'excluent mutuellement)
balises. Interchangeable avec tclibrary.desc.
La balise category représente tous les autres nœuds dans l'arborescence sous le nœud de la balise tclibrary, comme
illustré dans le tableau suivant :
EXTENSION DE DREAMWEAVER CS4 219
Bibliothèques et éditeurs de balises
Balise
Description
Obligatoire ou facultatif
category.name
Cette valeur s'affiche dans le nœud Arborescence.
Obligatoire
category.desc
Cette valeur est une chaîne HTML qui s'affiche dans la section Infos sur Facultatif (desc et reference
les balises de la boîte de dialogue Sélecteur de balises. Si desc ou
s'excluent mutuellement)
reference attr n'est pas spécifié, rien ne s'affiche dans la section
Infos sur les balises.
category.reference
Cette valeur décrit le langage, la rubrique et la sous-rubrique à afficher Facultatif (desc et reference
dans la section Infos sur les balises.
s'excluent mutuellement)
category.icon
Cette valeur est un chemin relatif vers un fichier GIF d'icône.
Facultatif
category.id
Toute chaîne différente des attributs category.id des autres
catégories dans ce fichier.
Obligatoire
Le tableau suivant répertorie les attributs de la balise element, qui représente la balise à insérer :
Attribut
Description
Obligatoire ou facultatif
element.name
Cette valeur s'affiche comme un élément de liste.
Obligatoire
element.value
Une valeur placée directement dans le code ou un paramètre qui est
transmis vers les boîtes de dialogue visuelles.
Obligatoire
element.desc
Cette valeur est une chaîne HTML et s'affiche dans le panneau Référence Facultatif (desc et reference
incorporé. S'il n'est pas spécifié, l'attribut reference affiche le contenu s'excluent mutuellement)
de la référence dans le panneau Référence incorporé.
element.reference
Jusqu'à trois chaînes, séparées par des virgules, décrivant
Facultatif (desc et reference
respectivement le langage, la rubrique et la sous-rubrique. Ces
s'excluent mutuellement)
informations s'affichent dans le panneau Référence. La première chaîne
est obligatoire. La deuxième chaîne est obligatoire pour la balise
element seulement et facultative pour les balises category et
tclibrary. La troisième chaîne est facultative.
element.id
Toute chaîne différente des attributs element.id des autres éléments
dans ce fichier.
Facultatif
Exemple simple de création d'un éditeur de balise
Les exemples dans cette section utilisent cfweather, une balise Adobe ColdFusion conçue pour extraire la
température courante à partir d'une base de données météorologiques, et illustrent les étapes nécessaires à la création
d'un nouvel éditeur de balises.
Les attributs de la balise cfweather sont décrits dans le tableau suivant :
Attribut
Description
zip
Un code postal de cinq chiffres
tempaturescale
L'échelle de température (Celsius ou Fahrenheit)
Pour créer ce nouvel éditeur de balises, enregistrez la balise, créez une définition de balise, créez une interface
utilisateur de l'éditeur et ajoutez une balise au Sélecteur de balises.
EXTENSION DE DREAMWEAVER CS4 220
Bibliothèques et éditeurs de balises
Enregistrement de la balise dans la bibliothèque de balises
Afin que Dreamweaver puisse reconnaître la nouvelle balise, celle-ci doit être identifiée dans le fichier
TagLibraries.vtm, localisé 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 être mis
à 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 :
<drive>:\Documents and Settings\<username>\Application Data\Adobe\\xc2
Dreamweaver CS4\Configuration
Remarque : Sous Windows XP, il se peut que ce dossier se trouve dans un dossier caché.
Sous Mac OS X :
<drive>:Users:<username>:Library:Application Support:Adobe:¬
Dreamweaver CS4:Configuration
Si Dreamweaver ne parvient pas à 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é 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èque de balises correspondant qui existe déjà.
1 Ouvrez le fichier TagLibraries.vtm dans l'éditeur de texte.
2 Faites défiler les bibliothèques de balises existantes jusqu'à localiser les balises CFML.
3 Ajoutez un élément de référence de balise, comme indiqué dans l'exemple suivant :
<tagref name="cfweather" file="cfml/cfweather.vtm"/>
4 Enregistrez le fichier.
La balise est maintenant enregistrée dans la bibliothèque de balises et contient un pointeur vers le fichier de définition
de balise cfweather.vtm.
Création d'un fichier de définition de balise (VTML)
Lorsqu'un utilisateur sélectionne une balise enregistrée à l'aide du sélecteur de balises ou d'un éditeur de balises,
Dreamweaver recherche un fichier VTML correspondant pour la définition de la balise.
1 Dans un éditeur de texte, créez un fichier contenant les éléments suivants :
EXTENSION DE DREAMWEAVER CS4 221
Bibliothèques et éditeurs de balises
<TAG NAME="cfweather" endtag="no">
<TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/>
<TAGDIALOG FILE="cfweather.htm"/>
<ATTRIBUTES>
<ATTRIB NAME="zip" TYPE="TEXT"/>
<ATTRIB NAME="tempaturescale" TYPE="ENUMERATED">
<ATTRIBOPTION VALUE="Celsius"/>
<ATTRIBOPTION VALUE="Fahrenheit"/>
</ATTRIB>
</ATTRIBUTES>
</TAG>
2 Enregistrez le fichier cfweather.vtm dans le dossier Configuration/Taglibraries/CFML.
Le fichier de définition de balise permet à Dreamweaver d'exécuter les opérations de code contextuel, de finalisation
de code et de mise en forme pour la balise cfweather.
Création d'une interface utilisateur d'éditeur de balises
1 Enregistrez le fichier cfweather.htm dans le dossier Configuration/Taglibraries/CFML :
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<html>
<head>
<title>CFWEATHER</title>
<script src="../../Shared/Common/Scripts/dwscripts.js"></script>
<script src="../../Shared/Common/Scripts/ListControlClass.js"></script>
<script src="../../Shared/Common/Scripts/tagDialogsCmn.js"></script>
<script>
/************************* 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
EXTENSION DE DREAMWEAVER CS4 222
Bibliothèques et éditeurs de balises
var theTempatureScaleCap = new Array("celsius","fahrenheit");
var theTempatureScaleVal = new Array("celsius","fahrenheit");
// instantiate a new list control
TEMPATURESCALELIST = new ListControl("thetempaturescale");
// 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);
}
</script>
</head>
<body onLoad="initializeUI()">
<div name="General">
<table border="0" cellspacing="4">
<tr>
<td valign="baseline" align="right" nowrap="nowrap">Zip Code: </td>
<td nowrap="nowrap">
<input type="text" id="attr:cfargument:zip" name="thezip" attname="zip"
style="width:100px"0/> 
</td>
</tr>
<tr>
<td valign="baseline" align="right" nowrap="nowrap">Type: </td>
<td nowrap="nowrap">
<select name="thetempaturescale" id="attr:cfargument:tempaturescale"
attname="tempaturescale" editable="false" style="width:200px">
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
Vous allez ensuite vérifier le bon fonctionnement de l'éditeur de balises.
2 Lancez Dreamweaver.
3 Entrez cfweather en mode Code.
4 Cliquez à l'aide du bouton droit de la souris sur la balise.
5 Sélectionnez Modifier la balise cfweather dans le menu contextuel.
Si l'éditeur de balises démarre, il a été créé correctement.
Ajout d'une balise au sélecteur de balises
1 Modifiez le fichier TagChooser.xml dans le dossier Configuration/Taglibraries/CFML en ajoutant une nouvelle
catégorie appelée Balises tierces, qui met en valeur la balise cfweather, comme indiqué dans l'exemple suivant :
EXTENSION DE DREAMWEAVER CS4 223
Bibliothèques et éditeurs de balises
<category name="Third Party Tags" icon="icons/Elements.gif" reference='CFML'>
<element name="cfweather" value='cfweather zip="" temperaturescale="fahrenheit">' />
</category>
Remarque : Sur les plates-formes multi-utilisateurs, le fichier Tagchooser.xml existe également dans le dossier
Configuration de l'utilisateur. Pour plus d'informations sur les plates-formes multi-utilisateurs, voir « Enregistrement
de la balise dans la bibliothèque de balises » à la page 220.
Vérifiez à présent que la balise cfweather figure bien dans le sélecteur de balises.
2 Choisissez Insertion > Balise.
3 Développez le groupe Balises CFML.
4 Sélectionnez le groupe Balises tierces qui s'affiche au bas du sélecteur de balises. La balise cfweather s'affiche dans
la zone de liste sur la droite.
5 Sélectionnez cfweather, puis cliquez sur le bouton Insérer.
L'éditeur de balises doit apparaître.
Fonctions de l'API de l'éditeur de balises
Afin de créer un nouvel éditeur de balises, vous devez fournir une implémentation pour les fonctions inspectTag(),
validateTag() et applyTag(). Vous trouverez un exemple d'implémentation dans la section « Création d'une
interface utilisateur d'éditeur de balises » à la page 221.
inspectTag()
Disponibilité
Dreamweaver MX.
Description
La fonction est appelée au premier affichage de l'éditeur de balises. La fonction reçoit la balise modifié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'édition et utilise ces valeurs pour initialiser les éléments de formulaire dans l'éditeur de balises.
Arguments
tag
• L'argument tag constitue le nœud DOM de la balise modifiée.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
Supposons que l'utilisateur modifie la balise suivante :
<crfweather zip = "94065"/>
EXTENSION DE DREAMWEAVER CS4 224
Bibliothèques et éditeurs de balises
Si l'éditeur contient une zone de texte de modification de l'attribut zip, la fonction doit initialiser l'élément de
formulaire pour permettre à l'utilisateur de consulter le code postal dans le champ de texte, plutôt que de consulter le
champ vide.
Le code suivant exécute l'initialisation :
function inspectTag(tag)
{
document.forms[0].zip.value = tag.zip
}
validateTag()
Disponibilité
Dreamweaver MX.
Description
Lorsqu'un utilisateur clique sur un nœud dans la commande d'arborescence ou sur OK, la fonction exécute la
validation des entrées sur les éléments de formulaire HTML affichés actuellement.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'entrée pour les éléments de formulaire HTML est valide, false
si les valeurs d'entrée ne sont pas valides.
Exemple
Lors de la création d'un tableau, l'utilisateur entre un nombre entier négatif pour le nombre de lignes. La fonction
validateTag() détecte l'entrée non valide, affiche un message d'alerte et renvoie la valeur false.
applyTag()
Disponibilité
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ésentant la balise en cours de
modification. La fonction interprète les valeurs des éléments de formulaires et les enregistre dans l'objet dom.
Arguments
tag
• L'argument tag constitue le nœud DOM de la balise modifiée.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
EXTENSION DE DREAMWEAVER CS4 225
Bibliothèques et éditeurs de balises
Exemple
Reprenons l'exemple cfweather. Dans le code suivant, si l'utilisateur remplace le code postal 94065 par 53402, afin de
mettre à jour le document de l'utilisateur de sorte qu'il utilise le nouveau code postal, vous devez également mettre à
jour l'objet dom.
function applyTag(tag)
{
tag.zip = document.forms[0].zip.value
}
226
Chapitre 14 : Inspecteurs Propriétés
L'inspecteur Propriétés est probablement le panneau flottant le plus connu de l'interface L'inspecteur Propriétés est
indispensable pour définir, examiner et modifier le nom, la taille, l'apparence et d'autres attributs de la sélection. Il sert
également à lancer des éditeurs internes et externes pour l'élément sélectionné.
Le tableau ci-dessous recense les fichiers utilisés pour créer un inspecteur Propriétés :
Chemin
Fichier
Description
Configuration/Inspectors/
Nom_inspecteur_propriétés.ht
m
Définit l'interface utilisateur (UI) de l'inspecteur
Propriétés.
Configuration/Inspectors/
Nom_inspecteur_propriétés.js
Contient les fonctions requises par l'inspecteur
Propriétés.
Configuration/Inspectors/
Fichier_image_balise.gif
Fichier facultatif à afficher dans l'inspecteur
Propriétés.
Fichiers d'inspecteur Propriétés
Dreamweaver intègre plusieurs interfaces compatibles avec l'inspecteur Propriétés permettant de définir des
propriétés pour de nombreuses balises HTML standard. Comme ces inspecteurs intégrés font partie du code
Dreamweaver élémentaire, le dossier Configuration ne contient pas de fichiers d'inspecteur Propriétés
correspondants. Cependant, les fichiers d'inspecteur Propriétés personnalisés permettent d'ignorer ces interfaces
intégrées ou d'en créer de nouvelles pour contrôler les balises personnalisées. Les fichiers d'inspecteur Propriétés
personnalisés résident dans le dossier Configuration/Inspectors du dossier de l'application Dreamweaver.
Le fichier HTML d'inspecteur Propriétés doit contenir un commentaire (en plus du commentaire doctype), juste
devant la balise HTML d'ouverture. Ce principe est illustré dans l'exemple suivant :
<!-- tag:serverModel:tagNameOrKeyword,priority:1to10,selection:¬ exactOrWithin,hline,vline,
serverModel-->
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//pi">
Ce commentaire comporte les éléments suivants :
• L'élément serverModel indique que Dreamweaver ne doit charger cet inspecteur Propriétés que lorsque le modèle
de serveur spécifié est actif.
• L'élément tagNameOrKeyword est la balise qui est inspectée ou l'un des mots clés suivants : *COMMENT* (pour les
commentaires), *LOCKED* (pour les régions verrouillées) ou *ASP* (pour les balises ASP).
• L'élément 1to10 est la priorité du fichier d'inspecteur Propriétés. 1 indique que cet inspecteur n'est utilisé que si
aucun autre ne peut inspecter la sélection. 10 indique que cet inspecteur a priorité sur tous les autres qui pourraient
inspecter la sélection.
• L'élément exactOrWithin indique si la sélection peut être contenue dans la balise (within) ou si elle doit contenir
exactement la balise (exact).
• L'élément facultatif hline indique qu'une ligne grise horizontale doit apparaître entre les moitiés supérieure et
inférieure de l'inspecteur en mode étendu.
EXTENSION DE DREAMWEAVER CS4 227
Inspecteurs Propriétés
• L'élément facultatif vline indique qu'une ligne grise verticale doit apparaître entre le champ de nom de balise et le
reste des propriétés dans l'inspecteur.
• L'élément facultatif serverModel indique le modèle de serveur de l'inspecteur Propriétés. Le modèle de serveur de
l'inspecteur Propriétés doit être identique à l'inspecteur Propriétés du document. Si ce n'est pas le cas, Dreamweaver
n'utilise pas l'inspecteur Propriétés pour afficher les propriétés de la sélection actuelle. Supposons par exemple que
le modèle de serveur d'un document soit Adobe ColdFusion. Celui de l'inspecteur Propriétés, par contre, est ASP.
Dans ce cas, Dreamweaver n'utilisera pas cet inspecteur Propriétés pour les sélections dans le document.
Le commentaire suivant est approprié pour un inspecteur conçu pour inspecter la balise happy :
<!-- tag:happy, priority:8,selection:exact,hline,vline,serverModel:ASP -->
Dans certains cas, il est essentiel de préciser que votre extension n'emploie que le rendu d'extensions de Dreamweaver
et pas le moteur de rendu précédent. Vous pouvez le faire en insérant la ligne suivante juste avant le commentaire de
la balise, comme le montre l'exemple suivant :
<!--DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//pi"-->
La section body du fichier d'inspecteur Propriétés contient un formulaire HTML. Au lieu d'afficher le contenu du
formulaire dans une boîte de dialogue, Dreamweaver utilise le formulaire pour définir les zones d'entrée et la mise en
page de l'inspecteur Propriétés.
La section head d'un fichier d'inspecteur Propriétés contient des fonctions JavaScript ou une référence au(x) fichier(s)
JavaScript.
Fonctionnement des fichiers d'inspecteur Propriétés
Au démarrage, Dreamweaver lit la première ligne de chaque fichier HTM et HTML dans le dossier
Configuration/Inspectors, recherchant la chaîne de commentaire qui définit le type, la priorité et le type de sélection
d'un inspecteur Propriétés. Les fichiers qui ne possèdent pas ce commentaire en première ligne sont ignorés.
Lorsque l'utilisateur effectue une sélection dans Dreamweaver ou déplace le point d'insertion vers un emplacement
différent, les événements suivants se produisent :
1 Dreamweaver recherche tout inspecteur possédant un type de sélection within.
2 S'il n'existe aucun inspecteur within, Dreamweaver recherche l'arborescence du document à partir de la balise
actuellement sélectionnée pour vérifier s'il existe des inspecteurs pour les autres balises entourant la sélection. S'il
n'existe aucun inspecteur within, Dreamweaver recherche tous les inspecteurs possédant le type de sélection
exact.
3 Pour la première balise possédant un ou plusieurs inspecteurs, Dreamweaver appelle chaque fonction
canInspectSelection() de l'inspecteur. Si la fonction renvoie la valeur false, Dreamweaver ne considère plus
l'inspecteur comme un candidat pour inspecter cette sélection.
4 S'il reste plusieurs inspecteurs potentiels après avoir appelé la fonction canInspectSelection(), Dreamweaver
trie les inspecteurs restant en fonction de leur priorité.
5 Si plusieurs inspecteurs potentiels ont le même degré de priorité, Dreamweaver sélectionne l'inspecteur suivant
l'ordre alphabétique.
6 L'inspecteur choisi apparaît dans le panneau flottant Inspecteur Propriétés. Si le fichier d'inspecteur Propriétés
définit la fonction displayHelp(), une petite icône en forme de point d'interrogation (?) apparaît dans le coin
supérieur droit de l'inspecteur.
EXTENSION DE DREAMWEAVER CS4 228
Inspecteurs Propriétés
7 Dreamweaver appelle la fonction inspectSelection() pour réunir des informations sur la sélection en cours et
renseigner les champs de l'inspecteur.
8 Les gestionnaires d'événements associés aux champs dans l'interface de l'inspecteur Propriétés s'exécutent au fur et
à mesure que l'utilisateur les rencontre. Par exemple, vous pouvez avoir un événement onBlur qui appelle la
fonction setAttribute() pour définir un attribut selon la valeur saisie par l'utilisateur.
Exemple simple d'inspecteur Propriétés
L'inspecteur Propriétés suivant inspecte la balise marquee, réservée à Microsoft Internet Explorer. L'exemple vous
permet de définir la valeur de l'attribut direction dans l'inspecteur Propriétés. Pour définir la valeur des autres
attributs de la balise marquee, servez-vous de cet exemple comme d'un modèle.
Pour créer cette extension, vous devez créer l'interface utilisateur, écrire le code JavaScript, créer l'image et tester.
Création de l'interface utilisateur
Vous créez un fichier HTML contenant un formulaire, qui s'affiche dans l'inspecteur Propriétés.
1 Créez un document vierge.
2 Sur la première ligne du fichier, ajoutez le commentaire suivant, qui identifie l'inspecteur Propriétés :
<!-- tag:MARQUEE,priority:9,selection:exact,vline,hline -->
3 Pour spécifier le titre du document et le fichier JavaScript à créer, insérez le code suivant après le commentaire :
<HTML>
<HEAD>
<TITLE>Marquee Inspector</TITLE>
<SCRIPT src="marquee.js"></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
4 Pour indiquer les éléments qui s'affichent dans l'inspecteur Propriétés, insérez le code suivant entre les balises body
d'ouverture et de fermeture :
EXTENSION DE DREAMWEAVER CS4 229
Inspecteurs Propriétés
<!-- Specify the image that will appear in the Property inspector -->
<SPAN ID="image" STYLE="position:absolute; width:23px; height:17px; ¬
z-index:16; left: 3px; top: 2px">
<IMG SRC="marquee.png" WIDTH="36" HEIGHT="36" NAME="marqueeImage">
</SPAN>
<SPAN ID="label" STYLE="position:absolute; width:23px; height:17px; ¬
z-index:16; left: 44px; top: 5px">Marquee</SPAN>
<!-- If your form fields are in different AP elements, you must ¬
create a separate form inside each AP element and reference it as ¬
shown in the inspectSelection() and setInterjectionTag() functions. -->
<SPAN ID="topLayer" STYLE="position:absolute; z-index:1; left: 125px; ¬
top: 3px; width: 431px; height: 32px">
<FORM NAME="topLayerForm">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="baseline" ALIGN="right">Direction:</TD>
<TD VALIGN="baseline" ALIGN="right">
<SELECT NAME="marqDirection" STYLE="width:86"
onChange="setMarqueeTag()">
<OPTION VALUE="left">Left</OPTION>
<OPTION VALUE="right">Right</OPTION>
</SELECT>
</TR>
</TABLE>
</FORM>
</SPAN>
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élection, pour inspecter
la sélection et pour entrer les valeurs appropriées depuis l'inspecteur Propriétés.
1 Créez un document vierge.
2 Pour spécifier que l'inspecteur Propriétés s'affiche lorsque la sé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 :
EXTENSION DE DREAMWEAVER CS4 230
Inspecteurs Propriété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 "left", set typeIndex to 0.
if (theDirection.toLowerCase() == "left"){
directionIndex = 0;
// If the value of DIRECTION is "right", set typeIndex to 1.
}else if (theDirection.toLowerCase() == "right"){
directionIndex = 1;
}
}
// If the value of the DIRECTION attribute was "left"
// or "right", choose the corresponding
// option from the pop-up menu in the interface.
if (directionIndex != -1){
document.topLayer.document.topLayerForm.marqDirection.selectedIndex =¬
directionIndex;
}
}
4 Pour extraire la sélection actuelle et afficher dans la zone de texte de l'inspecteur Propriété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 = ¬
document.topLayer.document.topLayerForm.marqDirection.selectedIndex;
// Get the value of the selected option in the pop-up menu
// in the interface.
var theDirection = ¬
document.topLayer.document.topLayerForm.marqDirection.¬
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.
EXTENSION DE DREAMWEAVER CS4 231
Inspecteurs Propriétés
Création de l'image
Le cas échéant, vous pouvez créer l'image qui s'affiche dans l'inspecteur Propriétés.
1 Cré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ègle générale, vous pouvez enregistrer les images associées aux inspecteurs Propriétés dans tout format pris en
charge par Dreamweaver.
Test de l'inspecteur Propriétés
Vous pouvez enfin tester l'inspecteur Propriétés.
1 Redémarrez Dreamweaver.
2 Créez une page HTML ou ouvrez une page HTML existante.
3 Ajoutez le code suivant dans la section body de la page :
<MARQUEE></MARQUEE>
4 Affichez en surbrillance le texte que vous venez d'ajouter.
L'inspecteur Propriétés que vous avez créé pour la balise marquee apparaît.
5 Entrez la valeur de l'attribut direction dans l'inspecteur Propriétés.
La balise affichée sur votre page est modifiée ; elle inclut à présent l'attribut direction et la valeur entrée dans
l'inspecteur Propriétés.
Fonctions de l'API de l'inspecteur Propriétés
Deux des fonctions de l'API de l'inspecteur Propriétés (canInspectSelection() et inspectSelection()) sont
obligatoires.
canInspectSelection()
Description
Détermine si l'inspecteur Propriétés est approprié pour la sélection en cours.
Arguments
Aucun.
Remarque : Utilisez dom.getSelectedNode() pour obtenir la sélection en cours en tant qu'objet JavaScript (pour plus
d'informations sur dom.getSelectedNode(), voir le Guide des API de Dreamweaver).
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si l'inspecteur peut inspecter la sélection actuelle et false dans le
cas contraire.
EXTENSION DE DREAMWEAVER CS4 232
Inspecteurs Propriétés
Exemple
L'instance suivante de la fonction canInspectSelection() renvoie la valeur true si la sélection contient l'attribut
CLASSID et si la valeur de cet attribut est "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" (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 && ¬
theObj.hasAttribute("classid") && ¬
theObj.getAttribute("classid").toLowerCase()== ¬
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");
}
displayHelp()
Description
Si cette fonction est définie, une icône en forme de point d'interrogation (?) apparaît dans le coin supérieur droit de
l'inspecteur Propriétés. Cette fonction est appelée lorsque l'utilisateur clique sur l'icône.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
L'occurrence suivante de displayHelp() ouvre un fichier dans une fenêtre du navigateur. Ce fichier explique les
champs de l'inspecteur Propriété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élection en cours.
Arguments
maxOrMin
• L'argument maxOrMin est max ou min, selon que l'inspecteur Propriétés est en état développé ou compressé.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
EXTENSION DE DREAMWEAVER CS4 233
Inspecteurs Propriétés
Exemple
L'occurrence suivante de la fonction inspectSelection() récupère la valeur de l'attribut content et l'utilise pour
remplir un champ de formulaire appelé keywords :
function inspectSelection(){
var dom = dreamweaver.getDocumentDOM();
var theObj = dom.getSelectedNode();
document.forms[0].keywords.value = theObj.getAttribute("content");
}
234
Chapitre 15 : Panneaux flottants
Vous pouvez créer des panneaux flottants ou des inspecteurs sans être soumis aux contraintes de taille et de disposition
des inspecteurs Propriétés.
Pour définir les propriétés de la sélection actuelle, vous devez de préférence opter pour un inspecteur Propriétés
personnalisé. Toutefois, les panneaux flottants personnalisés offrent davantage de place et de flexibilité pour l'affichage
d'informations au sujet du document entier ou de sélections multiples.
Vous pouvez créer et ajouter vos propres panneaux au menu Fenêtre. Pour plus d'informations sur l'ajout d'éléments
au système de menus, voir « Menus et commandes de menu » à la page 150.
Le tableau ci-dessous répertorie les fichiers utilisés pour créer un panneau flottant :
Chemin
Fichier
Description
Configuration/Floaters/
nom_panneau.htm
Spécifie le texte qui s'affiche dans la barre de titre du panneau
flottant, définit ce dernier et contient les fonctions JavaScript
requises.
Configuration/Menus/
menus.xml
Ajoute une commande à un menu.
Fonctionnement des fichiers de panneau flottant
Les fichiers de panneaux flottants personnalisés sont des fichiers HTML qui ré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'événements associés aux éléments du formulaire peuvent appeler un code
JavaScript pour effectuer des modifications arbitraires dans le document actif.
Dreamweaver possède plusieurs panneaux flottants intégrés accessibles depuis le menu Fenêtre. Ces panneaux intégré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és peuvent être déplacés, redimensionnés et leurs onglets combinés, à l'instar des
panneaux flottants intégrés à Dreamweaver. Les panneaux flottants personnalisés présentent les différences suivantes
par rapport aux panneaux flottants intégrés :
• Les panneaux flottants personnalisés s'affichent en gris par défaut. La définition de l'attribut bgcolor dans la balise
body n'a aucun effet.
• Tous les panneaux flottants s'affichent au-dessus de la fenêtre de document ou flottent derrière elle quand ils sont
inactifs. L'endroit où les panneaux flottants sont affichés dépend du réglage de l'option Toutes autres palettes, défini
dans les Préférences de panneaux.
Les fichiers de panneau flottant diffèrent également des autres fichiers d'extension. Contrairement aux autres fichiers
d'extension, Dreamweaver ne charge pas de fichiers de panneau flottant en mémoire au démarrage, sauf si les
panneaux flottants étaient affichés la dernière fois que Dreamweaver a été fermé. Si les panneaux flottants ne sont pas
visibles lorsque Dreamweaver est fermé, établissez une référence à partir d'une des fonctions suivantes pour charger
les fichiers qui définissent les panneaux.
•
dreamweaver.getFloaterVisibility()
•
dreamweaver.setFloaterVisibility()
EXTENSION DE DREAMWEAVER CS4 235
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 événements suivants se
produisent :
1 Si l'argument ne correspond pas à l'un des noms de panneau flottant réservés, Dreamweaver recherche dans le
dossier Configuration/Floaters un fichier nommé floaterName.htm. Pour obtenir une liste complète des noms de
panneau flottant réservé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é, aucun autre événement ne se produit.
2 Lorsque le fichier de panneau flottant est chargé pour la première fois, la fonction initialPosition() est appelée,
si elle a été définie, afin de déterminer la position par défaut du panneau flottant sur l'écran. De même, la fonction
initialTabs() est appelée, si elle a été définie, afin de déterminer le regroupement par défaut des onglets du
panneau flottant.
3 Les fonctions selectionChanged() et documentEdited() sont appelées, car il est supposé que des modifications
ont été apportées pendant que le panneau flottant était masqué.
4 Lorsque le panneau flottant est visible, les événements suivants se produisent :
• Lorsqu'un élément différent est sélectionné, la fonction selectionChanged() est appelée, si elle est définie.
• Lorsque l'utilisateur modifie le document, la fonction documentEdited() est appelée, si elle est définie.
• Les gestionnaires d'événements associés aux champs dans l'interface de panneau flottant s'exécutent au fur et à
mesure que l'utilisateur les rencontre. Par exemple, un bouton associé à un gestionnaire d'événements onClick
exécutant dw.getDocumentDOM().body.innerHTML='' a pour effet, lorsque l'utilisateur clique dessus, de
supprimer tous les éléments situés entre les balises body de début et de fin dans le document.
Les panneaux flottants gèrent deux événements spéciaux relatifs à la balise body : onShow() et onHide().
5 Lorsque l'utilisateur quitte Dreamweaver, la visibilité, la position et le groupement d'onglets actuellement définis
pour le panneau flottant sont enregistrés. Au démarrage suivant, l'application Dreamweaver charge les fichiers de
panneau flottant correspondant à tous les panneaux flottants qui étaient affichés au moment de la dernière
fermeture de l'application. Elle affiche les panneaux flottants au même endroit et avec le même groupement
d'onglets.
Exemple de panneau flottant simple
Cet exemple implique la création de l'extension Script Editor, qui génère un panneau flottant pour afficher le code
JavaScript inhérent à un marqueur de script sélectionné en mode Création. L'éditeur de script affiche le code JavaScript
dans l'élément textarea d'un formulaire HTML, défini dans un panneau flottant nommé scriptlayer. Si vous
apportez des modifications au code sélectionné dans le panneau flottant, l'extension appelle la fonction
updateScript() pour enregistrer vos modifications. Si vous n'avez pas sélectionné de marqueur de script lorsque
vous invoquez l'éditeur de script, l'extension affiche (no script selected) dans un panneau flottant nommé
blanklayer.
Pour créer cette extension, vous devez créer des panneaux flottants, rédiger du code JavaScript et créer un élément de menu.
EXTENSION DE DREAMWEAVER CS4 236
Panneaux flottants
Création des panneaux flottants
Le début du fichier HTML de cette extension comporte les informations d'en-tête de document standard et une balise
title qui inscrit les mots Script Editor dans la barre de titre des panneaux flottants.
Création de l'en-tête du fichier HTML
1 Créez un document vierge.
2 Entrez le code suivant :
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Script Editor</title>
<script language="JavaScript">
L'extension définit deux panneaux flottants qui affichent soit le message (no script selected) si l'utilisateur n'a
pas sélectionné de marqueur de script ou le code JavaScript inhérent à un marqueur de script sélectionné. Le code
suivant définit ces deux panneaux flottants, ou élément PA (à positionnement absolu), nommés blanklayer et
scriptlayer :
Création des deux panneaux flottants
1 Ajoutez le code suivant après l'en-tête dans le fichier HTML :
<body>
<div id="blanklayer" style="position:absolute; width:422px; ¬
height:181px; z-index:1; left: 8px; top: 11px; ¬
visibility: hidden">
<center>
<br>
<br>
<br>
<br>
<br>
(no script selected)
</center>
</div>
<div id="scriptlayer" style="position:absolute; width:422px; ¬
height:181px; z-index:1; left: 8px; top: 11px; ¬
visibility: visible">
<form name="theForm">
<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬
onBlur="updateScript()"></textarea>
</form>
</div>
</body>
</html>
2 Enregistrez le fichier sous le nom scriptEditor.htm dans le dossier Configuration/Floaters.
EXTENSION DE DREAMWEAVER CS4 237
Panneaux flottants
Les deux balises div utilisent l'attribut style pour spécifier la position (absolute), la taille (width:422px et
height:181px) et le paramètre visibility par défaut (visible) des panneaux flottants. Le panneau
blanklayer utilise l'attribut center ainsi qu'une série de balises de saut de ligne (br) pour positionner le texte au
centre du panneau. Le panneau scriptlayer crée un formulaire contenant une balise textarea unique pour
afficher le code JavaScript sélectionné. La balise textarea spécifie également que, lorsque survient un événement
onBlur indiquant une modification du code sélectionné, la fonction updateScript() est appelée pour écrire à
nouveau le texte modifié dans le document.
Ecriture du code JavaScript
Le code JavaScript pour l'éditeur de script consiste en un panneau flottant appelé par Dreamweaver,
selectionchanged(), et une fonction définie par l'utilisateur, updateScript().
selectionChanged(): avez-vous sélectionné un marqueur de script ?
La fonction selectionChanged() détermine si un marqueur de script a été sélectionné en mode Création. Un
marqueur de script s'affiche en mode Création si une routine JavaScript est présente dans la section body d'un
document et si Scripts est sélectionné dans la section Eléments invisibles de la boîte de dialogue Préférences. La figure
suivante représente une icône de marqueur de script :
La fonction selectionChanged() commence par appeler la fonction dw.getDocumentDOM() pour obtenir le DOM
(modèle d'objet de document) du document de l'utilisateur. Elle appelle ensuite la fonction getSelectedNode() pour
voir si le nœud sélectionné pour ce document est un élément, mais également une balise SCRIPT. Si ces deux conditions
sont réunies, la fonction selectionChanged() rend visible le panneau flottant scripteditor et le charge avec le
code JavaScript inhérent. Elle règle également la propriété visibility du panneau flottant blanklayer sur la valeur
hidden. La figure suivante représente le panneau flottant scriptlayer avec le code JavaScript sélectionné :
EXTENSION DE DREAMWEAVER CS4 238
Panneaux flottants
Si le nœud sélectionné n'est pas un élé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é 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ê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 && ¬
theNode.tagName == "SCRIPT"){
document.layers['scriptlayer'].visibility = 'visible';
document.layers['scriptlayer'].document.theForm.¬
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(): écriture des modifications
La fonction updateScript() écrit à nouveau le script sélectionné lorsqu'un événement onBlur survient dans la zone
textarea du panneau scriptlayer. L'élément de formulaire textarea contient le code JavaScript et l'événement
onBlur se produit lorsque textarea n'est plus la zone sélectionnée.
1 Ouvrez le fichier scriptEditor.htm dans le dossier Configuration/Floaters.
2 Entrez le code suivant dans la section en-tête du fichier.
EXTENSION DE DREAMWEAVER CS4 239
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.¬
theForm.scriptCode.value;
}
</script>
</head>
3 Enregistrez le fichier.
Création d'un élément de menu
Il ne suffit pas d'enregistrer le code d'éditeur de script dans le dossier Configuration/Floaters. Vous devez é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'éditeur de script est le menu Fenêtre, défini dans le fichier menus.xml. Vous devez créer la
balise menuitem, qui génère une entrée pour l'extension d'éditeur de script dans le menu Fenêtre, comme indiqué dans
la figure suivante :
Si vous sélectionnez un marqueur de script en mode Création pour le document en cours, puis que vous sélectionnez
l'élément de menu d'éditeur de script, le panneau flottant d'éditeur de script est appelé et le code JavaScript inhérent
au marqueur de script s'affiche. Si vous sélectionnez l'élément de menu lorsque aucun marqueur de script n'a été
sélectionné, le panneau blanklayer contenant le texte (no script selected) s'affiche.
1 Ouvrez le fichier menus.xml, qui réside dans le dossier Configuration/Menus.
2 Localisez la balise débutant par <menuitem name="Tile _Vertically" et placez le point d'insertion après le
symbole /> de fermeture de la balise.
3 Insérez le code suivant sur une nouvelle ligne :
<menuitem name="Script Editor" enabled="true" ¬
command="dw.toggleFloater('scriptEditor')"¬
checked="dw.getFloaterVisibility('scriptEditor')" />
4 Enregistrez le fichier.
Fonctions de l'API du panneau flottant
Toutes les fonctions personnalisées de l'API de panneau flottant sont facultatives.
EXTENSION DE DREAMWEAVER CS4 240
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éfinie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la boîte de dialogue. Cette
fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoyé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ée lorsque le panneau flottant s'affiche et une fois que la série de modifications en cours est
terminée, ce qui signifie que plusieurs modifications peuvent être effectuées avant que cette fonction ne soit appelée.
Cette fonction ne doit être définie que si le panneau flottant doit assurer le suivi des modifications apportées au
document.
Remarque : Ne définissez la fonction documentEdited() que si vous en avez besoin, car elle a un impact sur les
performances.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
Dans l'exemple suivant, la fonction documentEdited() recherche des éléments PA dans le document et met à jour un
champ de texte affichant le nombre d'éléments PA du document :
EXTENSION DE DREAMWEAVER CS4 241
Panneaux flottants
function documentEdited(){
/* create a list of all the AP elements in the document */
var theDOM = dw.getDocumentDOM();
var layersInDoc = theDOM.getElementsByTagName("layer");
var layerCount = layersInDoc.length;
/* update the numOfLayers field with the new layercount */
document.theForm.numOfLayers.value = layerCount;
}
getDockingSide()
Disponibilité
Dreamweaver MX.
Description
Indique où vous pouvez ancrer les panneaux flottants. Cette fonction renvoie une chaîne contenant une combinaison
des mots left, right, top et bottom (à savoir, à gauche, à droite, en haut et en bas). Vous pouvez ancrer le panneau
flottant sur le côté indiqué dans la chaîne. Si aucune indication n'apparaît, vous ne pouvez pas ancrer de panneau
flottant.
Cette fonction vous permet d'interdire l'ancrage de certains panneaux sur un côté spécifique de l'espace de travail de
Dreamweaver ou sur un autre panneau.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne contenant les mots left, right, top ou bottom, ou une combinaison de ces mots
indiquant où il peut ancrer le panneau flottant.
Exemple
getDockingSide()
{
return dock_side = "left top";
}
initialPosition()
Description
Détermine la position initiale du panneau flottant lorsqu'il est appelé pour la première fois. Si cette fonction n'est pas
définie, la position par défaut est le centre de l'écran.
Arguments
platform
• L'argument platform a la valeur "Mac" ou "Win", selon la plate-forme de l'utilisateur.
Valeurs renvoyées
Dreamweaver attend une chaîne au format "leftPosInPixels,topPosInPixels".
EXTENSION DE DREAMWEAVER CS4 242
Panneaux flottants
Exemple
Dans l'exemple suivant, la fonction initialPosition() spécifie que lorsque le panneau flottant s'affiche pour la
première fois, il doit se trouver à 420 pixels du côté gauche de l'écran et à 20 pixels du haut de l'écran sous Windows
ou à 390 pixels du côté gauche et à 20 pixels du haut de l'écran sur Macintosh :
function initialPosition(platform){
var initPos = "420,20";
if (platform == "macintosh"){
initPos = "390,20";
}
return initPos;
}
initialTabs()
Description
Détermine les autres panneaux flottants dont les onglets sont combinés à ceux de ce panneau, lorsqu'il s'affiche pour
la première fois. Si l'un des panneaux flottants répertoriés s'est affiché précédemment, il n'est pas inclus dans le
groupement d'onglets. Pour que les onglets de deux panneaux flottants personnalisés soient combinés, chacun d'eux
doit référencer l'autre dans sa fonction initialTabs().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne au format "floaterName1,floaterName2,...floaterNameN".
Exemple
Dans l'exemple suivant, la fonction initialTabs() spécifie que lorsque le panneau flottant s'affiche pour la première
fois, ses onglets doivent être combinés à ceux du panneau flottant scriptEditor :
function initialTabs(){
return "scriptEditor";
}
isATarget()
Disponibilité
Dreamweaver MX (sous Windows uniquement)
Description
Détermine si d'autres panneaux peuvent s'ancrer à ce panneau flottant. Si la fonction isATarget() n'est pas spécifiée,
Dreamweaver empêche les autres panneaux de s'ancrer à celui-ci. Dreamweaver appelle cette fonction lorsque
l'utilisateur essaie de combiner ce panneau avec d'autres.
Arguments
Aucun.
EXTENSION DE DREAMWEAVER CS4 243
Panneaux flottants
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si d'autres panneaux flottants peuvent s'accrocher à celui-ci et false
dans le cas contraire.
Exemple
isATarget()
{
return true;
}
isAvailableInCodeView()
Description
Détermine si le panneau flottant doit être activé lorsque le mode Code est sélectionné. Si cette fonction n'est pas
définie, le panneau flottant est désactivé en mode Code.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le panneau flottant doit être activé en mode Code, false dans le
cas contraire.
isResizable()
Disponibilité
Dreamweaver 4.
Description
Détermine si l'utilisateur peut redimensionner le panneau flottant. Si cette fonction n'est pas dé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ées
Dreamweaver attend une valeur boolé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;
}
EXTENSION DE DREAMWEAVER CS4 244
Panneaux flottants
selectionChanged()
Description
Appelée lorsque le panneau flottant s'affiche et à chaque changement de sélection (lorsqu'un nouveau document
devient actif ou lorsque le point d'insertion passe à un nouvel emplacement dans le document actif). Cette fonction ne
doit être définie que si le panneau flottant doit assurer le suivi de la sélection.
Remarque : Ne définissez la fonction selectionChanged() que si vous en avez absolument besoin, car elle a un impact
sur les performances.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
Exemple
Dans l'exemple suivant, la fonction selectionChanged() affiche un élément PA différent dans le panneau flottant
selon que la sélection est un marqueur de script. Si la sélection est un marqueur de script, Dreamweaver rend l'élément
PA de scriptlayer visible. Sinon, Dreamweaver rend l'élé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 && ¬
theNode.tagName == "SCRIPT"){
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éclaration des fonctions selectionChanged() ou documentEdited() dans vos panneaux flottants personnalisés
risque d'avoir des répercussions négatives sur les performances de Dreamweaver. Cela est dû au fait que les fonctions
documentEdited() et selectionChanged() sont appelées après chaque frappe d'une touche et chaque clic de la
souris si Dreamweaver est resté inactif plus d'un dixième de seconde. Il est important de tester votre panneau flottant
avec divers scénarios, en utilisant des documents volumineux (100 Ko ou plus de code HTML) autant que possible.
Afin d'éviter les pénalités de performances, utilisez la fonction setTimeout(). Comme dans les navigateurs, la
fonction setTimeout() emploie deux arguments : le code JavaScript devant être appelé et le délai d'attente avant cet
appel en millisecondes.
La mé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çon explicite étant donné
que l'écran se fige pendant le traitement des scripts et, par conséquent, vous empêche d'effectuer d'autres modifications
(et de mettre à jour l'interface ou le panneau flottant).
EXTENSION DE DREAMWEAVER CS4 245
Panneaux flottants
L'exemple suivant correspond à un panneau flottant qui affiche des informations sur chacun des éléments PA du
document. Il utilise la méthode setTimeout() pour faire une pause d'une demi-seconde après le traitement de chaque
élé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("layer");
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("processLayer()", 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 "magic".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 < document.numLayers){
setTimeout("processLayer()", 500);
}else{
document.running = false;
}
}
246
Chapitre 16 : Comportements
Le terme comportement désigne la combinaison d'un événement et d'une action. Par exemple, onClick, onLoad et
onSubmit sont des événements. Vérifier le plug-in, Atteindre l'URL et Permuter une image sont pour leur part des
actions. Le navigateur détermine quels éléments HTML acceptent quels événements. Les fichiers répertoriant les
événements que chaque navigateur prend en charge sont stockés dans le dossier Configuration/Behaviors/Events du
dossier de l'application Adobe Dreamweaver
La section body d'un fichier Action contient généralement un formulaire HTML. Ce formulaire accepte les paramètres
de l'action (par exemple, des paramètres qui indiquent quels éléments à positionnement absolu doivent être affichés
ou masqués). La section head d'un fichier Action contient des fonctions JavaScript qui traitent l'entrée de formulaire
depuis le contenu de la section body. Elles contrôlent également les fonctions, arguments et gestionnaires d'événement
qui sont insérés dans le document d'un utilisateur.
Vous pouvez rédiger des actions de comportement pour partager des fonctions avec d'autres utilisateurs ou insérer à
plusieurs reprises une même fonction JavaScript. Veillez à modifier les paramètres à chaque fois.
Remarque : Vous ne pouvez pas utiliser les comportements pour insérer directement des fonctions VBScript. Vous pouvez
toutefois ajouter indirectement une fonction VBScript en modifiant le modèle d'objet de document (DOM) dans la
fonction applyBehavior().
Le tableau ci-dessous énumère les fichiers utilisés pour créer des actions de comportement :
Chemin
Fichier
Description
Configuration/Behaviors/Actions/
action_comportemen La section body du fichier contient un formulaire
t.htm
HTML destiné aux paramè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é d'application Web,
consultez la section « Comportements de serveur » à la page 259.
Fonctionnement des comportements
Lorsqu'un utilisateur sélectionne un élément HTML dans un document Dreamweaver et clique sur le bouton Plus (+)
dans le panneau Comportements, les événements suivants se produisent :
1 Dreamweaver appelle la fonction canAcceptBehavior() dans chaque fichier d'action pour vérifier si l'action est
adaptée au document ou à l'élément sélectionné.
Si cette fonction renvoie la valeur false, Dreamweaver estompe l'action dans le menu déroulant des actions. Par
exemple, l'action Contrôler Shockwave ou Flash est estompée lorsque le document de l'utilisateur ne contient pas
de fichiers SWF. Si la valeur renvoyée est une liste d'événements, Dreamweaver les compare un à un aux
événements valides de l'élément HTML actuellement sélectionné et du navigateur cible jusqu'à ce qu'une
correspondance soit trouvée. Dreamweaver ajoute au menu déroulant Evénements l'événement correspondant,
extrait de la fonction canAcceptBehavior() en tête de liste. Si aucune correspondance n'est établie, l'événement
associé par défaut à l'élément HTML (marqué d'un astérisque [*]) dans le fichier d'événements) est placé en tête de
liste. Les autres événements du menu sont assemblés à partir du fichier d'événements.
2 L'utilisateur sélectionne une action dans le menu déroulant des actions.
EXTENSION DE DREAMWEAVER CS4 247
Comportements
3 Dreamweaver appelle la fonction windowDimensions() pour déterminer la taille de la boîte de dialogue des
paramètres. Si la fonction windowDimensions() n'est pas définie, la taille est déterminée automatiquement.
Une boîte de dialogue s'affiche toujours, les boutons OK et Annuler figurant sur le côté droit, quel que soit le
contenu de l'élément body.
4 Dreamweaver affiche une boîte de dialogue contenant les éléments BODY du fichier d'action. Si la balise body du
fichier d'action contient un gestionnaire onLoad, Dreamweaver l'exécute.
5 L'utilisateur entre les paramètres de l'action. Dreamweaver exécute les gestionnaires d'événements associés aux
champs du formulaire au fur et à 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électionné. Ces fonctions renvoient des chaînes qui sont insérées dans le document de l'utilisateur.
8 Si l'utilisateur double-clique sur l'action dans la colonne Actions, Dreamweaver rouvre la boîte de dialogue des
paramètres et exécute le gestionnaire onLoad. Dreamweaver appelle alors la fonction inspectBehavior() dans
le fichier d'action sélectionné, ce qui a pour effet de renseigner les champs à l'aide des données que l'utilisateur a
entrées précédemment.
Insertion de fonctions multiples dans le fichier de l'utilisateur
Les actions peuvent insérer plusieurs fonctions (la fonction de comportement principale et un nombre illimité de
fonctions d'assistance) dans la section head. Plusieurs comportements peuvent même partager des fonctions
d'assistance, à condition que les fonctions soient définies exactement de la même façon dans chaque fichier d'action.
Une façon de garantir que les fonctions partagées sont identiques consiste à stocker chaque fonction d'assistance dans
un fichier JavaScript externe et à insérer ce dernier dans les fichiers d'action appropriés à l'aide de <SCRIPT
SRC="externalFile.js">.
Lorsque l'utilisateur supprime un comportement, Dreamweaver tente de supprimer toutes les fonctions d'assistance
inutilisées associées à ce comportement. Si d'autres comportements utilisent une fonction d'assistance, celle-ci n'est
pas supprimée. En raison de l'extrême prudence de l'algorithme de suppression des fonctions d'assistance,
Dreamweaver peut occasionnellement laisser une fonction inutilisée dans le document de l'utilisateur.
Traitement des actions exigeant une valeur en retour
Il peut arriver qu'un gestionnaire d'événements exige une valeur renvoyée (par exemple,
onMouseOver="window.status='This is a link'; return true"). Toutefois, si Dreamweaver insère l'action
"return behaviorName(args)" dans le gestionnaire d'événements, les comportements figurant plus loin dans la
liste sont ignorés.
Pour contourner cette limitation, affectez la valeur de retour souhaitée à la variable document.MM_returnValue, dans
la chaîne renvoyée par la fonction behaviorFunction(). Ce paramétrage entraîne l'insertion par Dreamweaver de
return document.MM_returnValue à la fin de la liste des actions du gestionnaire d'événements. Pour consulter un
exemple d'utilisation de la variable MM_returnValue, voir le fichier Validate Form.js, qui réside dans le dossier
Configuration/Behaviors/Actions au sein du dossier de l'application Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 248
Comportements
Exemple de comportement simple
Pour mieux comprendre le fonctionnement des comportements et la façon de le créer, il peut être utile d'examiner un
exemple. Le dossier Configuration/Behaviors/Actions, qui réside au sein du dossier de l'application Dreamweaver,
contient des exemples. La plupart d'entre eux sont cependant très complexes. Cet exemple est plus simple, vous
permettant ainsi de vous familiariser avec la cré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éer le comportement, créez une extension, créez les fichiers HTML à consulter, puis testez le comportement.
Création de l'extension de comportement
Le code suivant présente un exemple relativement simple. Le code vé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 être étendu pour vérifier d'autres types de navigateurs (tels qu'Opera et WebTV) et modifié pour exécuter
d'autres actions que l'action d'atteindre des URL.
1 Créez un document vierge.
2 Insérez le code suivant dans le fichier :
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<html>
<head>
<title>behavior "Check Browser Brand"</title>
<meta http-equiv="Content-Type" content="text/html">
<script language="JavaScript">
// The function that will be inserted into the
// HEAD of the user's document
function checkBrowserBrand(netscapeURL,explorerURL) {
if (navigator.appName == "Netscape") {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == "Microsoft Internet Explorer") {
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 "checkBrowserBrand";
}
// 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);
EXTENSION DE DREAMWEAVER CS4 249
Comportements
if (nsURL && ieURL) {
return "checkBrowserBrand(\'" + nsURL + "\',\'" + ieURL + "\')";
}else{
return "Please enter URLs in both fields."
}
}
// Extract the arguments from the function call
// in the event handler and repopulate the
// parameters form
function inspectBehavior(fnCall){
var argArray = getTokens(fnCall, "()',");
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 == "nsURL"){
document.theForm.nsURL.value = theURL;
}else{
document.theForm.ieURL.value = theURL;
}
}
//*************** END OF JAVASCRIPT *****************
</script>
</head>
<body>
EXTENSION DE DREAMWEAVER CS4 250
Comportements
<form method="post" action="" name="theForm">
<table border="0" cellpadding="8">
<tr>
<td nowrap="nowrap">  Go to this URL if the browser is ¬
Netscape Navigator:<br>
<input type="text" name="nsURL" size="50" value="">  
<input type="button" name="nsBrowse" value="Browse..." ¬
onClick="browseForURLs('nsURL')"></td>
</tr>
<tr>
<td nowrap="nowrap">  Go to this URL is the browser is ¬
Microsoft Internet Explorer:<br>
<input type="text" name="ieURL" size="50" value="">  
<input type="button" name="ieBrowse" value="Browse..." ¬
onClick="browseForURLs('ieURL')"></td>
</tr>
</table>
</form>
</body>
</html>
3 Enregistrez le fichier sous le nom Configuration/Behaviors/Actions/BrowserDependentURL.htm.
Création des fichiers HTML à consulter (supprimé)
Créez les fichiers HTML à consulter, selon que votre navigateur correspond à Internet Explorer ou Netscape
Navigator.
1 Créez un fichier possédant le contenu suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Internet Explorer Only</title>
</head>
<body>
This is the page to go to if you are using Internet Explorer.
</body>
</html>
2 Enregistrez le fichier sous le nom iecontent.htm sur votre ordinateur.
3 Créez un autre fichier possédant le contenu suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Netscape Navigator content</title>
</head>
<body>
This is the page to go to if you are using Netscape Navigator.
</body>
</html>
EXTENSION DE DREAMWEAVER CS4 251
Comportements
4 Enregistrez le fichier sous le nom netscapecontent.htm dans le même dossier que le fichier iecontent.htm.
5 Redémarrez Dreamweaver.
6 Créez un fichier HTML possédant le contenu suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Which browser</title>
</head>
<body>
</body>
</html>
7 Enregistrez le fichier sous le nom whichbrowser.htm dans le même dossier que le fichier iecontent.htm.
8 Cliquez sur le bouton Plus (+) du panneau Comportements et sélectionnez le comportement Check Browser Band
(Vérifier type de navigateur).
9 Cliquez sur le bouton Parcourir à côté de l'option Aller à l'URL, puis sélectionnez le fichier netscapecontent.htm si
le navigateur est Netscape Navigator. Si le navigateur est Internet Explorer, sélectionnez le fichier iecontent.htm.
10 Cliquez sur OK.
Dreamweaver ajoute le code JavaScript spécifié au fichier whichbrowser.htm. Ce dernier se présente alors comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Which browser</title>
<script language="JavaScript" type="text/JavaScript">
<!-function checkBrowserBrand(netscapeURL,explorerURL) {
if (navigator.appName == "Netscape") {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == "Microsoft Internet Explorer") {
if (explorerURL) location.href = explorerURL;
}
}
//-->
</script>
</head>
<body onLoad="checkBrowserBrand('netscaptecontent.htm','iecontent.htm')">
</body>
</html>
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é.
EXTENSION DE DREAMWEAVER CS4 252
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ère, dans le document de l'utilisateur, un gestionnaire d'événements qui appelle la fonction insérée
par la fonction behaviorFunction(). La fonction applyBehavior() peut également exécuter d'autres modifications
dans le document de l'utilisateur, mais elle ne doit pas supprimer l'objet auquel le comportement est appliqué ou qui
reçoit l'action.
Lorsque vous écrivez la fonction applyBehavior(), vous devez déterminer comment modifier le document de
l'utilisateur. Par exemple, vous pouvez décider d'insé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ù functionName correspond au nom de la fonction insérée par
behaviorFunction(). Cet argument peut être utile si vous insérez une balise dans le document de l'utilisateur et
souhaitez affecter une valeur unique à son attribut NAME.
Valeurs renvoyées
Dreamweaver attend une chaîne contenant l'appel de fonction qui doit être inséré dans le document de l'utilisateur,
généralement après acceptation des paramètres entrés par l'utilisateur. Si la fonction applyBehavior() détermine que
l'utilisateur a effectué une entrée non valide, la fonction peut renvoyer une chaîne d'erreur au lieu de l'appel de
fonction. Dreamweaver ne signale aucune erreur si la chaîne est vide (return "";), mais si la chaîne n'est pas vide et
qu'elle n'est pas non plus un appel de fonction, Dreamweaver affiche une boîte de dialogue contenant le texte : Invalid
Input supplied for this behavior: et la chaîne renvoyée depuis appplyBehavior(). Si la valeur renvoyée est null
(return;), Dreamweaver indique qu'une erreur s'est produite mais sans fournir plus de détails.
Remarque : Les guillemets ("") contenus dans la chaîne renvoyée doivent être précédés d'une barre oblique inversée (\)
afin d'éviter que l'interpréteur JavaScript ne signale des erreurs.
Exemple
Dans l'exemple suivant, la fonction applyBehavior() renvoie un appel à la fonction MM_openBrWindow() et
transmet les paramètres fournis par l'utilisateur (hauteur et largeur de la fenêtre; affichage des barres de défilement,
une barre d'outils, une barre d'emplacement et d'autres fonctions; URL devant s'ouvrir dans la fenêtre) :
EXTENSION DE DREAMWEAVER CS4 253
Comportements
function applyBehavior() {
var i,theURL,theName,arrayIndex = 0;
var argArray = new Array(); //use array to produce correct ¬
number of commas w/o spaces
var checkBoxNames = new Array("toolbar","location",¬
"status","menubar","scrollbars","resizable");
for (i=0; i<checkBoxNames.length; i++) {
theCheckBox = eval("document.theForm." + checkBoxNames[i]);
if (theCheckBox.checked) argArray[arrayIndex++] = (checkBoxNames[i] + "=yes");
}
if (document.theForm.width.value)
argArray[arrayIndex++] = ("width=" + document.theForm.width.value);
if (document.theForm.height.value)
argArray[arrayIndex++] = ("height=" + document.theForm.height.value);
theURL = escape(document.theForm.URL.value);
theName = document.theForm.winName.value;
return "MM_openBrWindow('"+theURL+"','"+theName+"','"+argArray.join()+"')";
}
behaviorFunction()
Description
Cette fonction insère une ou plusieurs fonctions (placées entre les balises suivantes, si elles n'existent pas encore) dans
la section head du document utilisateur :
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend soit une chaîne contenant les fonctions JavaScript, soit une chaîne contenant les noms des
fonctions à insérer dans le document de l'utilisateur. Cette valeur doit être chaque fois identique (elle ne peut pas
dépendre des données entrées par l'utilisateur). Les fonctions sont insérées une seule fois, quel que soit le nombre de
fois que l'action est appliquée aux éléments du document.
Remarque : Les guillemets ("") contenus dans la chaîne renvoyée doivent être précédés d'une barre oblique inversée (\)
afin d'éviter que l'interpréteur JavaScript ne signale des erreurs.
Exemple
L'instance suivante de la fonction behaviorFunction() renvoie la fonction MM_popupMsg() :
function behaviorFunction(){
return ""+
"function MM_popupMsg(theMsg) { //v1.0\n"+
"alert(theMsg);\n"+
"}";
}
Le code suivant est équivalent à la déclaration de fonction behaviorFunction() précédente et correspond à la
méthode utilisée pour déclarer la fonction behaviorFunction() dans tous les comportements intégrés à
Dreamweaver :
EXTENSION DE DREAMWEAVER CS4 254
Comportements
function MM_popupMsg(theMsg){ //v1.0
alert(theMsg);
}
function behaviorFunction(){
return "MM_popupMsg";
}
canAcceptBehavior()
Description
Cette fonction indique si l'action est autorisée pour l'élément HTML sélectionné et définit l'événement par défaut qui
doit la déclencher. Elle peut également rechercher la pré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'élément HTML sélectionné.
Valeurs renvoyées
Dreamweaver renvoie l'une des valeurs suivantes :
• La valeur true si l'action est autorisée mais n'est associée à aucun événement préféré.
• Une liste des événements préférés (par ordre décroissant de préférence) de cette action. La définition d'événements
préférés remplace l'événement par défaut (signalé par un astérisque [*] dans le fichier d'événements) de l'objet
sélectionné. Reportez-vous à l'étape 1 de la section « Fonctionnement des comportements » à la page 246.
• La valeur false si l'action n'est pas autorisée.
Si la fonction canAcceptBehavior() renvoie la valeur false, l'action est estompée dans le menu contextuel
Actions du panneau Comportements.
Exemple
Dans l'exemple suivant, la fonction canAcceptBehavior() renvoie une liste des événements préférés pour le
comportement si le document contient des images nommées :
function canAcceptBehavior(){
var theDOM = dreamweaver.getDocumentDOM();
// Get an array of all images in the document
var allImages = theDOM.getElementsByTagName('IMG');
if (allImages.length > 0){
return "onMouseOver, onClick, onMouseDown";
}else{
return false;
}
}
EXTENSION DE DREAMWEAVER CS4 255
Comportements
displayHelp()
Description
Si cette fonction est définie, un bouton Aide apparaît sous les boutons OK et Annuler dans la boîte de dialogue des
paramètres. Cette fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoyé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ée par la fonction applyBehavior().
Remarque : Dreamweaver supprime automatiquement la déclaration de fonction et le gestionnaire d'événements
associés à un comportement lorsque l'utilisateur supprime ce comportement dans le panneau Comportements. Vous ne
devez définir la fonction deleteBehavior() que si la fonction applyBehavior() a effectué des modifications
supplémentaires dans le document de l'utilisateur (telle une insertion debalise).
Arguments
applyBehaviorString
Cet argument correspond à la chaîne renvoyée par la fonction applyBehavior().
Valeurs renvoyées
Dreamweaver ne renvoie rien.
identifyBehaviorArguments()
Description
Cette fonction associe les arguments d'un appel de fonction de comportement à des liens de navigation, fichiers
dépendants, URL, références de style Netscape 4.0 ou noms d'objet, de sorte que les URL utilisées dans les
comportements puissent être mises à jour si l'utilisateur enregistre le document à un autre emplacement et pour que
les fichiers référencés puissent s'afficher dans la carte du site et être considérés comme des fichiers dépendants afin de
pouvoir être téléchargés vers et depuis un serveur.
EXTENSION DE DREAMWEAVER CS4 256
Comportements
Arguments
theFunctionCall
Cet argument correspond à la chaîne renvoyée par la fonction applyBehavior().
Valeurs renvoyées
Dreamweaver renvoie une chaîne contenant une liste des types d'arguments de l'appel de fonction séparés par des
virgules. La longueur de la liste doit être égale au nombre d'arguments transmis lors de l'appel de fonction. Les types
d'argument doivent correspondre à l'un des types suivants :
• Le type d'argument nav indique que l'argument est une URL de navigation et qu'il doit donc être affiché dans la
carte du site.
• Le type d'argument dep indique que l'argument est une URL de fichier dépendant et qu'il doit donc être inclus avec
tous les autres fichiers dépendants lorsqu'un document contenant ce comportement est téléchargé depuis ou vers
un serveur.
• Le type d'argument URL indique que l'argument est à la fois une URL de navigation et une URL dépendante (ou une
URL de type inconnu), et qu'il doit donc être affiché dans la carte du site et considéré comme un fichier dépendant
lors du téléchargement depuis ou vers un serveur.
• Le type d'argument NS4.0ref indique que l'argument est une référence à un objet de style Netscape Navigator 4.0.
• Le type d'argument IE4.0ref indique que l'argument est une référence à 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écifié dans l'attribut
NAME de l'objet. Ce type a été ajouté à Dreamweaver 3.
• Le type d'argument other indique que l'argument n'appartient à aucun des types ci-dessus.
Exemple
Cet exemple simple de fonction identifyBehaviorArguments() fonctionne avec l'action de comportement Ouvrir
une fenêtre du navigateur qui renvoie une fonction comportant toujours trois arguments (l'URL à ouvrir, le nom de la
nouvelle fenêtre et la liste des propriétés de la fenêtre) :
function identifyBehaviorArguments(fnCallStr) {
return "URL,other,other";
}
Une version plus complexe de la fonction identifyBehaviorArguments() est nécessaire pour les fonctions de
comportement qui gè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émentaires se pré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 :
EXTENSION DE DREAMWEAVER CS4 257
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 < numArgGroups; i++){
// Add a comma and "NS4.0ref,IE4.0ref,other,dep" (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 "show" or "hide") to the existing list of argument
// types, or if no list yet exists, add only
// "NS4.0ref,IE4.0ref,other,dep"
var listOfArgTypes += ((listOfArgTypes)?",":"") + ¬
"NS4.0ref,IE4.0ref,other,dep";
}
}
inspectBehavior()
Description
Cette fonction recherche dans l'appel de fonction un comportement déjà appliqué au document de l'utilisateur et
définit les valeurs des options de la boîte de dialogue des paramètres en conséquence. Si la fonction
inspectBehavior() n'est pas définie, les valeurs par dé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 à la chaîne renvoyée par la fonction applyBehavior().
Remarque : Si l'élément HTML contient du code similaire à 'onClick="someBehavior(); return
document.MM_returnValue;"' et que vous ajoutez un nouveau comportement extrait du menu des comportements,
Dreamweaver appelle inspectBehavior() dès que l'interface utilisateur du nouveau comportement apparaît et
transmet le paramètre sous forme de chaîne vide. De ce fait, vérifiez le paramètre applyBehaviorString, illustré dans
l'exemple ci-dessous :
function inspectBehavior(enteredStr){
if(enteredStr){
//do your work here
}
}
Valeurs renvoyées
Dreamweaver ne renvoie rien.
EXTENSION DE DREAMWEAVER CS4 258
Comportements
Exemple
L'exemple suivant de fonction inspectBehavior(), extrait du fichier Display Status Message.htm, renseigne le
champ Message de la boîte de dialogue des paramètres avec le message que l'utilisateur a sélectionné lors de la première
application du comportement :
function inspectBehavior(msgStr){
var startStr = msgStr.indexOf("'") + 1;
var endStr = msgStr.lastIndexOf("'");
if (startStr > 0 && endStr > startStr) {
document.theForm.message.value = ¬
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éfinit les dimensions de la boîte de dialogue des paramètres. Si cette fonction n'est pas définie, les
dimensions de la fenêtre sont calculées automatiquement.
Remarque : Ne définissez cette fonction que si vous souhaitez utiliser une boîte de dialogue de paramètres ayant des
dimensions supérieures à 640x 480 pixels.
Arguments
platform
La valeur de l'argument platform est soit macintosh, soit windows, selon la plate-forme utilisée par l'utilisateur.
Valeurs renvoyées
Dreamweaver attend une chaîne au format widthInPixels,heightInPixels.
Les dimensions renvoyées sont inférieures à la taille totale de la boîte de dialogue parce qu'elles n'incluent pas la zone
des boutons OK et Annuler. Si les dimensions renvoyées ne permettent pas de faire apparaître toutes les options, des
barres de défilement s'affichent.
Exemple
Dans l'exemple suivant, la fonction windowDimensions() définit les dimensions de la boîte de dialogue des
paramètres à 648x 520pixels :
function windowDimensions(){
return "648,520";
}
259
Chapitre 17 : Comportements de serveur
Adobe® Dreamweaver® permet aux utilisateurs d'ajouter des comportements de serveur à leurs documents afin
d'exécuter des tâches côté serveur, par exemple :
• Filtrer des enregistrements en fonction de critères utilisateur
• Parcourir des enregistrements
• Lier des listes de résultats à des pages d'informations détaillées
• Insérer des enregistrements dans un jeu de résultats
Lorsque vous utilisez Dreamweaver, il arrive que vous deviez insérer le même code d'exécution à plusieurs reprises
dans les documents. Dans de tels cas, vous pouvez créer une extension afin d'automatiser la procédure de mise à jour
du document à l'aide des blocs de code fréquemment utilisés. Consultez la section « Ajout de comportements de
serveur personnalisés » du guide Bien démarrer avec Dreamweaver pour plus de détails sur l'utilisation de l'interface
de l'outil Créateur de comportements de serveur pour créer des comportements de serveur personnalisés. Lisez ensuite
le chapitre relatif aux comportements de serveur pour des dé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 « Fonctions relatives aux comportements de serveur » et Fonctions
d'Extension Data Manager » dans le Guide des API de Dreamweaver. Dreamweaver prend actuellement en charge les
extensions de comportement de serveur qui ajoutent du code d'exécution pour les modèles de serveurs suivants :
ASP/JavaScript, ASP/VBScript, ColdFusion et PHP/MySQL.
Terminologie des comportements de serveur
Les termes suivants sont souvent utilisé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ôté
serveur et Dreamweaver. Une extension de comportements de serveur est composée d'un code JavaScript, d'un code
HTML et d'un code EDML (Extension Data Markup Language) qui est du code XML créé spécifiquement pour les
données d'extension. Des fichiers d'exemple, organisés en fonction du type de serveur utilisé, sont localisés dans le
dossier Configuration/ServerBehaviors, à l'intérieur de votre dossier d'installation. Lorsque vous rédigez un script
destiné à une extension, vous devez utiliser la fonction dwscripts.applySB() pour demander à Dreamweaver de lire
les fichiers EDML, d'extraire les composants de votre extension et d'insé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 être appliqués plusieurs
fois, les instances peuvent être multiples. Chaque instance de comportement de serveur est répertoriée dans le panneau
Comportements de serveur de l'interface Dreamweaver.
Code d'exécution Ensemble des blocs de code ajoutés à un document lorsqu'un comportement de serveur est
appliqué. Ces blocs de code sont d'ordinaire un code côté serveur, par exemple, un script ASP compris entre des balises
<% ... %>.
Participants L'extension de comportements de serveur insè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ôté serveur, une balise HTML, voire un attribut qui
ajoute une fonctionnalité côté serveur à une page Web. Un fichier EDML désigne chaque bloc de code par le terme de
« participant ». Tous les participants relatifs à un comportement de serveur donné forment un groupe de participants.
EXTENSION DE DREAMWEAVER CS4 260
Comportements de serveur
Remarque : Pour plus d'informations sur les fichiers Participant et Groupe, ainsi que sur la façon dont les fichiers EDML
de Dreamweaver sont structurés, voir « Extension Data Markup Language (EDML) » à la page 260.
Architecture de Dreamweaver
Lorsque vous utilisez l'outil Créateur de comportements de serveur pour créer une extension spécifique Dreamweaver,
Dreamweaver génè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éférencent également les
fichiers JavaScript pour une fonctionnalité optimale). L'architecture simplifie votre implémentation de l'API et sépare
votre code d'exécution de la mé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éside dans le dossier
Configuration/ServerBehaviors/ServerModelName, où ServerModelName correspond à l'un des types de serveur
suivants : ASP_Js (JavaScript), ASP_Vbs (VBScript), ColdFusion, PHP_MySQL ou Shared (implémentations intermodèles de serveur).
Extension Data Markup Language (EDML)
Dreamweaver génère deux fichiers EDML lorsque vous utilisez l'outil Créateur de comportements de serveur : un
fichier Groupe EDML et un fichier Participant EDML correspondant aux noms indiqués dans le Créateur de
comportements de serveur. Le fichier Groupe définit les participants appropriés, qui représentent des blocs de code,
et les groupes définissent les participants devant être combinés pour former un comportement de serveur individuel.
Fichiers Groupe
En général, les fichiers Groupe contiennent une liste de participants et les fichiers Participant comportent toutes les
données sur le code spécifiques au modèle de serveur. Les fichiers Participant peuvent être utilisés par plusieurs
extensions pour permettre à plusieurs fichiers Groupe de référencer le même fichier Participant.
L'exemple suivant présente une vue de haut niveau du fichier EDML du groupe de comportements de serveur. Vous
trouverez une liste complète des éléments et attributs dans la section « Balises de fichiers EDML Groupe » à la
page 273.
<group serverBehavior="Go To Detail Page.htm" dataSource="Recordset.htm">
<groupParticipants selectParticipant="goToDetailPage_attr">
<groupParticipant name="moveTo_declareParam"0partType="member"/>
<groupParticipant name="moveTo_keepParams"0partType="member"/>
<groupParticipant name="goToDetailPage_attr" partType="identifier" />
</groupParticipants>
</group>
Dans la balise de bloc groupParticipants, chaque balise groupParticipant indique le fichier Participant EDML
contenant le bloc de code à utiliser. La valeur de l'attribut name est le nom du fichier Participant moins l'extension
.edml (par exemple, l'attribut moveTo_declareParam).
EXTENSION DE DREAMWEAVER CS4 261
Comportements de serveur
Fichiers Participant
Un participant représente un bloc de code unique sur la page, tel une balise de serveur, une balise HTML ou un
attribut. Pour pouvoir être utilisé 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 :
<participant>
<quickSearch><![CDATA[MM_paramName]]></quickSearch>
<insertText location="aboveHTML+80">
<![CDATA[
<% var MM_paramName = ""; %>
]]>
</insertText>
<searchPatterns whereToSearch="directive">
<searchPattern><![CDATA[/var\s*MM_paramName/]]></searchPattern>
</searchPatterns>
</participant>
Pour ajouter un comportement de serveur à un document, Dreamweaver a besoin d'informations détaillées,
notamment l'endroit où insérer le code, l'aspect du code et les paramètres remplacés par l'auteur ou par les données à
l'exécution. C'est ce que chaque fichier EDML Participant décrit pour chaque bloc de code. Plus particulièrement, le
fichier Participant décrit les données suivantes :
• Ce code et l'emplacement de l'instance unique sont définis par les paramètres de la balise insertText, comme
illustré dans l'exemple suivant :
<insertText location="aboveHTML+80">
• Comment reconnaître les instances déjà sur la page qui sont définies par la balise searchPatterns, comme illustré
dans l'exemple suivant :
<searchPatterns whereToSearch="directive">
<searchPattern><![CDATA[/var\s*MM_paramName/]]></searchPattern>
</searchPatterns>
Dans la balise du bloc searchPatterns, chaque balise searchPattern contient un modèle utilisé pour rechercher
des instances de code d'exécution et pour extraire des paramètres spécifiques. Pour plus d'informations, voir
« Techniques de comportements de serveur » à la page 297.
Fichier Script
Chaque comportement de serveur dispose également d'un fichier HTML contenant les fonctions et les liens relatifs aux
scripts qui gèrent l'intégration du code de comportement de serveur à l'interface Dreamweaver. Les fonctions pouvant
être modifiées sont traitées dans la section « Fonctions d'implémentation des comportements de serveur » à la
page 269.
Exemple de comportement de serveur simple
L'exemple suivant illustre le processus de création d'un nouveau comportement de serveur et vous permet de voir et
de gérer les fichiers générés par Dreamweaver. Pour plus d'informations sur l'utilisation de l'interface du Créateur de
comportements de serveur, voir Ajout de comportements de serveur personnalisés dans Bien démarrer avec
Dreamweaver. L'exemple affiche « Hello World » depuis le serveur ASP. Le comportement « Hello World » contient
un seul participant (une simple balise ASP) et rien n'est modifié, ni ajouté sur la page.
EXTENSION DE DREAMWEAVER CS4 262
Comportements de serveur
Pour créer le comportement, vous devez créer le document de page dynamique, définir le nouveau comportement de
serveur puis définir le code à insérer.
Création du document contenant des pages dynamiques
1 Dans Dreamweaver, choisissez Fichier > Nouveau.
2 Dans la boîte de dialogue Nouveau document, choisissez Catégorie : Page dynamique puis Page dynamique : ASP
JavaScript.
3 Cliquez sur Créer.
Définition du nouveau comportement de serveur
Remarque : Si le panneau Comportements de serveur n'est ni ouvert, ni visible, choisissez Fenêtre > Comportements de
serveur.
1 Dans le panneau Comportements de serveur, sélectionnez le bouton Plus (+) et l'option Nouveau comportement
de serveur.
2 Dans la boîte de dialogue Nouveau comportement de serveur, choisissez Type de document : ASP JavaScript et
entre « Hello World » comme nom. Ne cochez pas la case « Copier un comportement de serveur existant ».
3 Cliquez sur OK.
Définition du code à insérer
1 Sélectionnez le bouton Plus (+) pour l'option Blocs de code à insérer.
2 Dans la boîte de dialogue Cré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 <% Response.Write(“Hello World”) %>.
5 Dans le menu déroulant Insérer code, sélectionnez Relatif à la sélection pour permettre à l'utilisateur de contrôler
l'emplacement du code dans le document.
6 Dans le menu déroulant Position relative, sélectionnez Après la sé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éroulante. Dans le dossier d'installation de vos fichiers Dreamweaver, le dossier
Configuration/ServerBehaviors/ASP_Js contient dé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.
EXTENSION DE DREAMWEAVER CS4 263
Comportements de serveur
Scénarios dans lesquels les fonctions de l'API de
comportement de serveur sont appelées
Les fonctions de l'API de comportement de serveur sont appelées dans les situations suivantes :
• La fonction findServerBehaviors() est appelée à l'ouverture du document et à chaque fois qu'un participant est
modifié. Elle recherche des instances du comportement de serveur dans le document utilisateur. Pour chaque
instance trouvée, la fonction findServerBehaviors() crée un objet JavaScript et lui associe des informations
d'état à l'aide de propriétés JavaScript.
• Lorsqu'elle est mise en œuvre, Dreamweaver appelle la fonction analyzeServerBehavior() pour chaque
comportement trouvé dans le document utilisateur après que toutes les fonctions findServerBehaviors() ont
été appelées.
Lorsque la fonction findServerBehaviors() crée un objet de comportement, elle définit normalement les quatre
propriétés (incomplete, participants, selectedNode et title). Cependant, il est parfois plus facile de retarder
la configuration de certaines des propriétés jusqu'à ce que tous les autres comportements de serveur aient trouvé
des instances d'eux-mêmes. Par exemple, le comportement Déplacer vers l'enregistrement suivant possède deux
participants : un objet link et un objet recordset. Plutô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écutée, car le jeu d'enregistrements recherche toutes ses propres instances.
Lorsque la fonction analyzeServerBehavior() du comportement Déplacer vers l'enregistrement suivant est
appelé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 étant une instance de ce comportement. Supposons, par exemple, que la fonction
findServerBehaviors() pour le comportement Attribut dynamique détecte une instance du comportement
Attribut dynamique associée à une balise input dans le document utilisateur. Simultanément, la fonction
findServerBehaviors() pour le comportement Champ de texte dynamique peut analyser la même balise input
et dé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è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éfinir la propriété
deleted dudit comportement sur la valeur true. Si la propriété deleted a toujours la valeur true lorsque
Dreamweaver finit d'appeler les fonctions analyzeServerBehavior(), le comportement disparaît de la liste.
• Lorsque l'utilisateur clique sur le bouton Plus (+) du panneau Comportements de serveur, le menu contextuel
s'affiche.
Pour déterminer le contenu du menu, Dreamweaver recherche d'abord un fichier ServerBehaviors.xml dans le
même répertoire que celui des comportements. ServerBehaviors.xml fait référence aux fichiers HTML devant
apparaître dans le menu.
Si le fichier HTML référencé 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 <title>Get More
Records</title>, 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ît dans le menu. Par exemple, si
GetRecords.htm ne contient pas de balise de titre, la mention GetRecords s'affiche dans le menu.
EXTENSION DE DREAMWEAVER CS4 264
Comportements de serveur
S'il n'y a pas de fichier ServerBehaviors.xml ou si le répertoire contient un ou plusieurs fichiers HTML non
mentionné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épertoire ServerBehaviors s'affiche dans le menu, ajoutez l'instruction
suivante sur la première ligne du fichier HTML :
<!-- MENU-LOCATION=NONE -->
• La fonction canApplyServerBehavior() est appelée lorsque l'utilisateur sélectionne un élément dans le menu. Si
cette fonction renvoie une valeur true, une boîte de dialogue s'affiche. Lorsque l'utilisateur clique sur OK, la
fonction applyServerBehavior() est appelée.
• Si l'utilisateur double-clique sur un comportement de serveur existant pour le modifier, Dreamweaver affiche la
boîte de dialogue, exécute le gestionnaire onLoad sur la balise body (si elle existe), puis appelle la fonction
inspectServerBehavior(). La fonction inspectServerBehavior() renseigne les éléments du formulaire avec
les valeurs de l'argument actuel. Lorsque l'utilisateur clique sur OK, Dreamweaver appelle à nouveau la fonction
applyServerBehavior().
• Si l'utilisateur clique sur le bouton moins (-), la fonction deleteServerBehavior() est appelée. La fonction
deleteServerBehavior() supprime les comportements correspondants du document.
• Lorsque l'utilisateur sélectionne un comportement de serveur et utilise les commandes Couper ou Copier,
Dreamweaver transmet l'objet représentant le comportement de serveur à sa fonction copyServerBehavior(). La
fonction copyServerBehavior() ajoute à l'objet de comportement les autres propriétés nécessaires à son collage
ultérieur.
Une fois la fonction copyServerBehavior() renvoyée, Dreamweaver convertit l'objet de comportement en un
formulaire qui peut être placé dans le Presse-papiers. Pendant la conversion de l'objet, Dreamweaver supprime
toutes les propriétés faisant référence à des objets ; toute propriété de l'objet autre qu'un nombre, un opérateur
booléen ou une chaîne est perdue.
Lorsque l'utilisateur appuie sur la commande Coller, Dreamweaver décompresse le contenu du Presse-papiers et
génère un nouvel objet de comportement de serveur. Ce nouvel objet est identique à l'original, sauf qu'il ne contient
aucune propriété faisant référence à des objets. Dreamweaver transmet le nouvel objet de comportement à la
fonction pasteServerBehavior(). La fonction pasteServerBehavior() ajoute le comportement au document
utilisateur. Une fois la fonction pasteServerBehavior() renvoyée, Dreamweaver appelle les fonctions
findServerBehaviors() pour obtenir la nouvelle liste des comportements de serveur présents dans le document
utilisateur.
Les utilisateurs peuvent copier et coller des comportements d'un document à un autre. Pour échanger des
informations, les fonctions copyServerBehavior() et pasteServerBehavior() doivent se baser uniquement
sur les propriétés de l'objet de comportement.
API de comportement de serveur
Les fonctions suivantes sont les API que vous pouvez utiliser pour gérer des comportements de serveur.
analyzeServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
EXTENSION DE DREAMWEAVER CS4 265
Comportements de serveur
Description
Cette fonction permet aux comportements de serveur de définir les propriétés incomplete et deleted.
Une fois la fonction findServerBehaviors() appelé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ésent dans le tableau,
la fonction analyzeServerBehavior() est appelé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éfinition de toutes les propriétés
(incomplete, participants, selectedNode et title) sur l'objet de comportement. Il est parfois plus facile
d'exécuter cette tâche après que la fonction findServerBehaviors() a généré une liste exhaustive des
comportements de serveur présents dans le document utilisateur.
L'autre but de la fonction analyzeServerBehavior() est de rechercher si plusieurs comportements se réfèrent à la
même balise dans le document utilisateur. Dans ce cas, la propriété deleted est utilisé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èrent Recordset1 pour exister sur la page. Une fois les
comportements de serveur détecté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ée pour DynamicText1, elle inspecte le tableau de tous les objets de
comportement de serveur présents sur la page, à la recherche de celui qui appartient à Recordset1. Si elle ne trouve pas
l'objet de comportement de serveur qui appartient à Recordset1, la propriété incomplete est affectée de la valeur true
et un point d'exclamation est affiché dans le panneau Comportements de serveur, indiquant à l'utilisateur qu'il y a un
problème. De même, lorsque la fonction analyzeServerBehavior() est appelée pour DynamicText2, elle recherche
l'objet appartenant à Recordset1. Comme Recordset1 ne dépend d'aucun autre comportement de serveur, il n'a pas
besoin de définir la fonction analyzeServerBehavior() dans cet exemple.
Arguments
serverBehavior, {serverBehaviorArray}
• L'argument serverBehavior est un objet JavaScript représentant le comportement à analyser.
• L'argument {serverBehaviorArray} est un tableau d'objets JavaScript représentant l'ensemble des
comportements de serveur trouvés sur une page.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
applyServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction consulte les valeurs des éléments de formulaire dans la boîte de dialogue et ajoute le comportement au
document utilisateur. Dreamweaver appelle cette fonction lorsque l'utilisateur clique sur dans la boîte de dialogue
Comportements de serveur. Si la fonction est exécutée avec succès, la boîte de dialogue Comportements de serveur est
fermée. Si elle échoue, la boîte de dialogue Comportements de serveur reste ouverte et un message d'erreur s'affiche à
l'écran. Cette fonction peut modifier le document d'un utilisateur.
EXTENSION DE DREAMWEAVER CS4 266
Comportements de serveur
Pour plus d’informations, voir « dwscripts.applySB() » à la page 270.
Arguments
serverBehavior
serverBehavior est un objet JavaScript représentant le comportement de serveur ; il est nécessaire de modifier un
comportement existant. S'il s'agit d'un nouveau comportement, l'argument est null.
Valeurs renvoyées
Dreamweaver attend une chaîne vide en cas de succès ou un message d'erreur en cas d'échec.
canApplyServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction détermine si un comportement peut être appliqué. Dreamweaver appelle cette fonction avant d'afficher
la boîte de dialogue Comportements de serveur. Si la fonction renvoie la valeur true, la boîte de dialogue
Comportements de serveur s'affiche. Si la fonction renvoie la valeur false, la boî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ésentant le comportement ; il est nécessaire de modifier un comportement
existant. S'il s'agit d'un nouveau comportement, l'argument est null.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le comportement peut être appliqué, false dans les autres cas.
copyServerBehavior()
Disponibilité
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écifié. Dans l'exemple suivant, cette fonction est utilisée pour les jeux
d'enregistrements. Lorsqu'un utilisateur sélectionne un jeu d'enregistrements dans les panneaux Comportements de
serveur ou Liaisons de donné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 « Scénarios dans
lesquels les fonctions de l'API de comportement de serveur sont appelées » à la page 263.
EXTENSION DE DREAMWEAVER CS4 267
Comportements de serveur
Pour échanger des informations, les fonctions copyServerBehavior() et pasteServerBehavior() doivent
uniquement se baser sur les propriétés de l'objet de comportement capables d'être converties en chaînes. Le Pressepapiers ne contient que du texte brut ; il est, pour cette raison, nécessaire de résoudre les nœuds participant dans le
document et d'enregistrer le texte brut qui en résulte dans une propriété secondaire.
Remarque : Il est également important de mettre en œuvre la fonction pasteServerBehavior() pour permettre à
l'utilisateur de coller le comportement dans un document Dreamweaver.
Arguments
serverBehavior
• serverBehavior est un objet JavaScript représentant le comportement.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le comportement est copié dans le Presse-papiers, false dans les
autres cas.
deleteServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
Description
Supprime le comportement du document de l'utilisateur. Elle est appelé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 « dwscripts.deleteSB() » à la page 271.
Arguments
serverBehavior
• serverBehavior est un objet JavaScript représentant le comportement.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
displayHelp()
Description
Si cette fonction est définie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la boîte de dialogue. Cette
fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
EXTENSION DE DREAMWEAVER CS4 268
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é
Dreamweaver UltraDev 1.
Description
Cette fonction parcourt le document utilisateur à la recherche d'instances d'elle-même. Pour chaque instance trouvée,
la fonction findServerBehaviors() crée un objet JavaScript et lui associe des informations d'état en tant que
propriétés JavaScript de l'objet.
Les quatre propriétés obligatoires sont incomplete, participants, title et selectedNode. Vous pouvez définir
d'autres propriétés en fonction de vos besoins.
Pour plus d'informations, voir « dwscripts.findSBs() » à la page 269 et dreamweaver.getParticipants() dans le
Guide des API de Dreamweaver.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets JavaScript ; la longueur du tableau correspond au nombre d'instances du
comportement trouvées dans la page.
inspectServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction détermine les paramètres de la boîte de dialogue Comportements de serveur en fonction de l'objet de
comportement spécifié. Dreamweaver appelle la fonction inspectServerBehavior() lorsqu'un utilisateur ouvre une
boî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ésentant le comportement de serveur. Il s'agit du même objet
que celui renvoyé parfindServerBehaviors().
EXTENSION DE DREAMWEAVER CS4 269
Comportements de serveur
Valeurs renvoyées
Dreamweaver ne renvoie rien.
pasteServerBehavior()
Disponibilité
Dreamweaver UltraDev 1.
Description
Si cette fonction est implémentée, les utilisateurs peuvent coller des instances du comportement de serveur spécifié à
l'aide de la fonction pasteServerBehavior(). Lorsque l'utilisateur colle le comportement de serveur, Dreamweaver
organise le contenu du Presse-papiers et génère un nouvel objet de comportement. Ce nouvel objet est identique à
l'original, sauf qu'il ne contient aucune propriété de pointeur. Dreamweaver transmet le nouvel objet de
comportement à la fonction pasteServerBehavior(). La fonction pasteServerBehavior() se base sur les
propriétés de l'objet de comportement pour déterminer ce qui doit être ajouté au document utilisateur. La fonction
pasteServerBehavior() ajoute ensuite le comportement au document utilisateur. Une fois la fonction
pasteServerBehavior() renvoyée, Dreamweaver appelle la fonction findServerBehaviors() pour obtenir la
nouvelle liste des comportements de serveur présents dans le document utilisateur.
L'utilisation de la fonction pasteServerBehavior() est facultative. Pour plus d'informations, voir « Scénarios dans
lesquels les fonctions de l'API de comportement de serveur sont appelées » à la page 263.
Remarque : Si vous implémentez cette fonction, vous devez également implémenter la fonction copyServerBehavior().
Arguments
comportement
L'objet JavaScript behavior représente le comportement.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le comportement est collé depuis le Presse-papiers, false dans
les autres cas.
Fonctions d'implémentation des comportements de
serveur
Vous pouvez ajouter ou modifier ces fonctions dans les fichiers de script HTML, ou dans les fichiers JavaScript
répertoriés dans le fichier de script HTML.
dwscripts.findSBs()
Disponibilité
Dreamweaver MX (cette fonction remplace la fonction findSBs() des versions précédentes de Dreamweaver).
EXTENSION DE DREAMWEAVER CS4 270
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éfinit le titre, le type, les tableaux des participants, des poids et des types, la valeur selectedNode
et l'indicateur « incomplete ». Elle crée également un objet de paramètre contenant un tableau de propriétés
dé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îne de titre facultative utilisée si aucun titre n'est spécifié dans le titre
EDML, utile pour la localisation.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets JavaScript, avec les propriétés requises définies. Cette fonction renvoie un
tableau vide si aucun comportement de serveur n'apparaî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é
Dreamweaver MX (cette fonction remplace la fonction applySB() des versions précédentes de Dreamweaver).
Description
Cette fonction insère ou met à jour le code d'exécution du comportement de serveur. Si l'argument sbObj a une valeur
null, la fonction insère un nouveau code d'exécution ; dans le cas contraire, elle met à jour le code d'exécution existant
indiqué par l'objet sbObj. Définissez les paramètres utilisateur sous la forme de propriétés sur un objet JavaScript, puis
transmettez-les en tant que paramObj. Ils doivent correspondre à tous les arguments déclarés sous la forme
@@paramName@@ dans le texte d'insertion XML.
Arguments
paramObj, sbObj
• L'argument paramObj est l'objet contenant les paramètres utilisateur.
• L'argument sbObj est l'objet du comportement de serveur précédent si vous mettez à jour un comportement de
serveur existant, sinon null.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si le comportement est ajouté au document de l'utilisateur, false
dans les autres cas.
EXTENSION DE DREAMWEAVER CS4 271
Comportements de serveur
Exemple
Dans l'exemple suivant, insérez dans l'objet paramObj les entrées utilisateur et appelez la fonction
dwscripts.applySB() en transmettant les donné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é
Dreamweaver MX (cette fonction remplace la fonction deleteSB() des versions précé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é, à moins que le fichier EDML n'indique des instructions de suppression spéciales à l'aide
de la balise delete. Les participants appartenant à plusieurs instances de comportement de serveur (comptage de
référence > 1) ne sont pas supprimés.
Arguments
sbObj
• L'argument sbObj est l'instance de l'objet du comportement de serveur à supprimer du document utilisateur.
Valeurs renvoyé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égé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ès attention
à la dépendance d'un élément par rapport à un autre. Par exemple, si vous mettez à jour les balises que vous insérez, il
est possible que vous deviez également mettre à jour les modèles de recherche.
Remarque : Les fichiers EDML ont été ajoutés avec Dreamweaver MX. Si vous travaillez avec des comportements de
serveur existants, voir les versions précédentes des manuels Extension de Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 272
Comportements de serveur
Expressions régulières
Vous devez connaître les expressions régulières implémentées dans JavaScript 1.5. Vous devez également savoir à quel
moment il convient de les utiliser dans les fichiers EDML de comportements de serveur. Par exemple, les expressions
régulières ne peuvent pas être utilisées dans les valeurs quickSearch. En revanche, elles sont employées dans le
contenu de la balise searchPattern pour la recherche et l'extraction de données.
Les expressions régulières décrivent des chaînes de texte en utilisant des caractères qui ont une signification spéciale
(métacaractères) pour représenter le texte, le décomposer et le traiter selon des règles prédéfinies. Les expressions
régulières sont des outils d'analyse et de traitement puissants car elles fournissent une méthode générique de
représentation d'un modèle.
Tout bon manuel de référence sur JavaScript 1.5 comporte une section ou un chapitre consacré aux expressions
régulières. Dans cette section, nous examinons la façon dont les fichiers EDML de comportements de serveur
Dreamweaver utilisent les expressions régulières pour rechercher des arguments dans votre code d'exécution et pour
extraire leurs valeurs. Chaque fois qu'un utilisateur modifie un comportement de serveur, les valeurs des arguments
doivent être extraites des instances du code d'exécution. Utilisez des expressions régulières pour la procédure
d'extraction.
Vous devez connaître quelques métacaractères et métaséquences (regroupements de caractères spéciaux) utiles dans
les fichiers EDML de comportements de serveur, comme ceux décrits dans le tableau suivant :
Expression régulière
Description
\
Arrêter le mode caractères spéciaux. Par exemple: \. rétablit le métacaractère à un point littéral, \/ rétablit la
barre oblique à son sens littéral et \) rétablit la parenthèse à son sens littéral.
/ ... /i
Ne pas tenir compte de la casse lors de la recherche d'une métaséquence.
( ...)
Créer une sous-expression entre parenthèses dans la métaséquence.
\s*
Rechercher des espaces blancs.
La balise EDML <searchPatterns whereToSearch="directive"> indique qu'une recherche doit être effectuée
dans le code d'exécution. Chaque sous-balise <searchPattern>...</searchPattern> définit un modèle dans le
code d'exécution devant être identifié. L'exemple Redirect If Empty contient deux modèles.
Dans l'exemple suivant, pour extraire des valeurs d'arguments de <% if (@@rs@@.EOF)
Response.Redirect("@@new__url@@"); %>, rédigez une expression régulière qui identifie les chaînes rs et
new__url :
<searchPattern paramNames="rs,new__url">
/if d ((\w+)\.EOF\) Response\.Redirect\("([^\r\n]*)"\)/i
</searchPattern>
Ce processus effectue une recherche dans le document de l'utilisateur et, si une correspondance est trouvée, les valeurs
d'argument sont extraites. La première sous-expression entre parenthèses (\w+) extrait la valeur de rs. La deuxième
sous-expression ([^\r\n]*) extrait la valeur de new_url.
Remarque : La séquence de caractères "[^\r\n]*" correspond à tout caractère sauf à un saut de ligne, sur les plates-formes
Macintosh et Windows.
EXTENSION DE DREAMWEAVER CS4 273
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é n'est utilisé que par un fichier Groupe, vous devez donner à votre fichier Participant un nom
correspondant à 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é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 étant partagé indé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ères (y compris l'extension
.edml) en raison des limitations Macintosh.
Le code d'exécution de votre comportement de serveur réside à l'intérieur de fichiers EDML. Le programme d'analyse
EDML ne doit confondre aucun de vos codes d'exécution avec les balises EDML. C'est pourquoi la balise CDATA doit
envelopper votre code d'exécution. La balise CDATA représente des données de caractère et correspond à tout texte
autre qu'une balise EDML. Lorsque vous utilisez la balise CDATA, le programme d'analyse EDML n'essaie pas de
l'interpréter en tant que balise, mais l'assimile plutôt à un bloc de texte brut. Les blocs marqués par la balise CDATA
commencent par <![CDATA[ et se terminent par ]]>.
Si vous insérez le texte Hello, World, vous pouvez spécifier aisément votre EDML comme suit :
<insertText>Hello, World</insertText>
Cependant, si vous insérez un texte comportant des balises, tel <img src='foo.gif'>, cela peut être source de
confusion pour le programme d'analyse EDML. Dans ce cas, incorporez votre texte dans la construction CDATA comme
indiqué dans l'exemple suivant :
<insertText><![CDATA[<img src='foo.gif'>]]></insertText>
Le code d'exécution ASP est enveloppé par la balise CDATA tag, comme illustré dans l'exemple suivant :
<![CDATA[
<% if (@@rs@@.EOF) Response.Redirect("@@new__url@@"); %>
]]
En raison de la balise CDATA, les balises <%= %>, ainsi que tout contenu interne, ne sont pas traitées. Au lieu de cela,
le gestionnaire de données d'extension (EDM) reçoit le texte non interprété, comme indiqué dans l'exemple suivant :
<% if (Recordset1.EOF) Response.Redirect("http://www.Adobe.com"); %>
Dans les définitions EDML suivantes, les emplacements où la balise CDATA est recommandée sont indiqués dans les
exemples.
Balises de fichiers EDML Groupe
Ces balises et attributs sont valides dans les fichiers Groupe EDML.
<group>
Description
Cette balise contient toutes les spécifications relatives à un groupe de participants.
EXTENSION DE DREAMWEAVER CS4 274
Comportements de serveur
Parent
Aucun.
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de <group>
Les éléments suivants sont des attributs valides de la balise group.
version
Description
Cet attribut définit le traitement de comportement de serveur de Dreamweaver cible du comportement de serveur
actif. Pour Dreamweaver CS3, le numéro de version est 9. Si aucune version n'est précisée, Dreamweaver suppose qu'il
s'agit de la version 7. Pour cette version de Dreamweaver, l'attribut de version est réglé sur 9,0 pour tous les groupes et
participants générés par le Cré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înes
quickSearch du participant du groupe est trouvée dans le document, le comportement de serveur indiqué par
l'attribut serverBehavior demande à Dreamweaver d'appeler la fonction findServerBehaviors().
Dans certains cas, si plusieurs groupes sont associés à un seul et même comportement de serveur, ce dernier doit
déterminer le groupe qu'il veut utiliser.
Parent
group
Type
Attribut.
EXTENSION DE DREAMWEAVER CS4 275
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é dans l'exemple suivant :
<group serverBehavior="redirectIfEmpty.htm">
dataSource
Description
Cette fonction avancée prend en charge les nouvelles sources de données qui peuvent être ajoutées à Dreamweaver.
Les versions d'un comportement de serveur peuvent différer, selon la source de données utilisée. Par exemple, le
comportement de serveur Région répétée est conçu pour la source de données Recordset.htm standard. Si
Dreamweaver est développé afin de prendre en charge un nouveau type de source de données (un objet COM, par
exemple), vous pouvez configurer dataSource="COM.htm" dans un fichier Groupe avec une implémentation
différente de Région répétée. Le comportement de serveur Région répétée applique alors la nouvelle implémentation
de Région répétée si la nouvelle source de données est sélectionnée.
Parent
group
Type
Attribut.
Obligatoire
Non.
Valeur
Le nom exact d'un fichier source de données d'un dossier Configuration/DataSources, comme indiqué dans l'exemple
suivant :
<group serverBehavior="Repeat Region.htm" dataSource="myCOMdataSource.htm">
Ce groupe définit une nouvelle implémentation du comportement de serveur Région répétée à utiliser si la source de
données COM est utilisée. Dans la fonction applyServerBehaviors(), vous pouvez indiquer que ce groupe doit être
appliqué en définissant la propriété MM_dataSource sur l'objet de paramètre, comme indiqué dans l'exemple suivant :
function applyServerBehavior(ssRec) {
var paramObj = new Object();
paramObj.rs = getComObjectName();
paramObj.MM_dataSource = "myCOMdataSource.htm";
dwscripts.applySB(paramObj, sbObj);
}
subType
Description
Cette fonction avancée prend en charge plusieurs implémentations d'un comportement de serveur.
EXTENSION DE DREAMWEAVER CS4 276
Comportements de serveur
Les versions d'un comportement de serveur peuvent différer, selon la sélection de l'utilisateur. Lorsqu'un
comportement de serveur est appliqué mais que plusieurs fichiers Groupe sont appropriés, le fichier Groupe correct
peut être sélectionné par transmission d'une valeur subType. Le groupe ayant cette valeur subType spécifique est
appliqué.
Parent
group
Type
Attribut.
Obligatoire
Non.
Valeur
La valeur est une chaîne unique déterminant le groupe à appliquer, comme indiqué dans l'exemple suivant :
<group serverBehavior="myServerBehavior.htm" subType="longVersion">
Cet attribut de groupe définit la version longue du sous-type myServerBehavior. Il existe également une version avec
l'attribut subType="shortVersion". Dans la fonction applyServerBehaviors(), vous pouvez indiquer quel
groupe doit être appliqué en définissant la propriété MM_subType sur l'objet de paramètre, comme indiqué dans
l'exemple suivant :
function applyServerBehavior(ssRec) {
var paramObj = new Object();
if (longVersionChecked) {
paramObj.MM_subType = "longVersion";
} else {
paramObj.MM_subType = "shortVersion";
}
dwscripts.applySB(paramObj, sbObj);
}
<title>
Description
Cette chaîne s'affiche dans le panneau Comportements de serveur pour chaque instance de comportement de serveur
trouvée dans le document actif.
Parent
group
Type
Balise de bloc.
Obligatoire
Non.
EXTENSION DE DREAMWEAVER CS4 277
Comportements de serveur
Valeur
La valeur est une chaîne de texte brut pouvant comporter des noms d'argument pour rendre chaque instance unique,
comme indiqué dans l'exemple suivant :
<title>Redirect If Empty (@@recordsetName@@)</title>
<groupParticipants>
Description
Cette balise contient un tableau de déclarations groupParticipant.
Parent
group
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de <groupParticipants>
Les éléments suivants sont des attributs valides de la balise groupParticipants.
selectParticipant
Description
Indique quel participant doit être sélectionné et mis en surbrillance dans le document lorsqu'une instance est
sélectionnée dans le panneau Comportements de serveur. Les instances de comportements de serveur énumérées dans
ce panneau étant classées en fonction du participant sélectionné, vous devez définir l'attribut selectParticipant
mê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éférencé comme
un participant Groupe, comme indiqué dans l'exemple suivant. Pour plus d’informations, voir « name » à la page 278.
<groupParticipants selectParticipant="redirectIfEmpty_link">
EXTENSION DE DREAMWEAVER CS4 278
Comportements de serveur
<groupParticipant>
Description
Cette balise représente l'inclusion d'un participant unique dans le groupe.
Parent
groupParticipants
Type
Balise.
Obligatoire
Oui (au moins un).
Attributs de <groupParticipant>
Les éléments suivants sont des attributs valides de la balise groupParticipant.
name
Description
Cet attribut désigne un participant particulier à inclure dans le groupe. L'attribut name figurant dans la balise
groupParticipant doit être le mê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é dans l'exemple
suivant :
<groupParticipant name="redirectIfEmpty_init">
Cet exemple fait référence au fichier redirectIfEmpty_init.edml.
partType
Description
Cet attribut indique le type de participant.
Parent
groupParticipant
EXTENSION DE DREAMWEAVER CS4 279
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é dans le document,
le groupe est considéré comme existant. Il s'agit de la valeur par défaut si l'attribut partType n'est pas spécifié.
• La valeur member est un membre normal d'un groupe. Si trouvé seul, il n'identifie pas un groupe. S'il n'est pas
trouvé dans un groupe, le groupe est jugé incomplet.
• La valeur option indique que le participant est facultatif. S'il n'est pas trouvé, le groupe est quand même jugé complet
et aucun indicateur « incomplete » n'est affiché dans le panneau Comportements de serveur.
• La valeur multiple indique que le participant est facultatif et que plusieurs de ses copies peuvent être associées au
comportement de serveur. Aucun des arguments uniques à ce participant ne sera utilisé lors du regroupement de
participants car ils peuvent avoir des valeurs différentes.
• La valeur data est un participant non standard utilisé par les programmeurs en tant que référentiel des données de
groupe supplé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.
<participant>
Description
Cette balise contient toutes les spécifications d'un participant unique.
Parent
Aucun.
Type
Balise de bloc.
Obligatoire
Oui.
Attributs de <participant>
Les éléments suivants sont des attributs valides de la balise participant.
EXTENSION DE DREAMWEAVER CS4 280
Comportements de serveur
version
Description
Cet attribut définit le traitement de comportement de serveur de Dreamweaver cible du comportement de serveur
actif. Pour Dreamweaver CS3, le numéro de version est 9. Si aucune version n'est précisée, Dreamweaver suppose qu'il
s'agit de la version 7. Pour cette version de Dreamweaver, l'attribut de version est réglé sur 0,0 pour tous les groupes et
participants générés par le Créateur de comportements de serveur.
Remarque : L'attribut de version participant annule l'attribut de version groupe si ceux-ci sont différents. Néanmoins, le
fichier participant utilisera uniquement l'attribut de version groupe si le participant n'en spécifie aucun.
Pour les fichiers Participant, cet attribut dé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éfini sur la version 4 ou précédente), les blocs de code insérés
ne sont pas fusionnés avec les autres blocs de code sur la page. Les participants dont l'attribut est défini sur version 5
ou plus, sont fusionné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.
<quickSearch>
Description
Cette balise est une simple chaîne de recherche utilisée pour améliorer les performances. Il ne peut pas s'agir d'une
expression régulière. Si la chaîne est trouvée dans le document actif, les autres modèles de recherche sont appelés pour
rechercher des instances spécifiques. La chaîne peut être vide pour toujours utiliser le modèle de recherche.
Parent
participant
Type
Balise de bloc.
Obligatoire
Non.
Valeur
La valeur searchString, chaîne littérale qui existe sur la page si le participant existe. La chaîne doit être la plus unique
possible afin d'améliorer les performances, mais elle ne doit pas nécessairement être unique. Bien que cette chaîne ne
soit pas sensible à la casse, prenez garde aux espaces non essentiels qui peuvent être modifiés par l'utilisateur, comme
indiqué dans l'exemple suivant :
<quickSearch>Response.Redirect</quickSearch>
EXTENSION DE DREAMWEAVER CS4 281
Comportements de serveur
Si la balise quickSearch est vide, elle est considérée comme correspondante et des recherches plus précises utilisent
les expressions régulières définies dans les balises searchPattern. Cela peut être utile lorsqu'une simple chaîne ne
peut pas être utilisée pour exprimer un modèle de recherche fiable et que des expressions régulières sont obligatoires.
<insertText>
Description
Cette balise donne des indications sur ce qui doit être inséré dans le document et à quel endroit. Elle contient le texte
à insérer. Les parties du texte qui sont personnalisées doivent être indiquées à 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 à insérer dans le document. Si des parties du texte doivent être personnalisées, elles peuvent être
transmises ultérieurement en tant que paramètres. Les arguments doivent être incorporés entre deux signes (@@). Ce
texte pouvant interférer avec la structure EDML, il doit utiliser la construction CDATA, comme indiqué dans l'exemple
suivant :
<insertText location="aboveHTML">
<![CDATA[<%= @@recordset@@).cursorType %>]]>
</insertText>
Lorsque le texte est inséré, l'argument @@recordset@@ est remplacé par un nom de jeu d'enregistrements fourni par
l'utilisateur. Pour plus d'informations sur les blocs de code conditionnels et répétitifs, consultez le chapitre « Ajout de
comportements de serveur personnalisés » dans Prise en main de Dreamweaver.
Attributs de <insertText>
Les éléments suivants sont des attributs valides de la balise insertText.
location
Description
Cet attribut indique où le texte participant doit être inséré. L'emplacement d'insertion étant relatif à l'attribut
whereToSearch de la balise searchPatterns, veillez à définir ces deux paramètres soigneusement (voir
« whereToSearch » à la page 284).
Parent
insertText
EXTENSION DE DREAMWEAVER CS4 282
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ère le texte au-dessus de la balise HTML (appropriée pour le code serveur uniquement).
Le poids peut être un nombre entier compris entre 1 et 99 et est utilisé pour préserver l'ordre relatif entre les
différents participants. Par convention, les jeux d'enregistrements ont un poids de 50. Si un participant fait
référence à des variables de jeu d'enregistrements, il doit par conséquent être affecté d'un poids plus élevé (par
exemple, 60) de façon à ce que le code soit inséré au-dessous du jeu d'enregistrements, comme indiqué dans
l'exemple suivant :
<insert location="aboveHTML+60">
Si aucun poids n'est indiqué, un poids de 100 est attribué en interne et ajouté au-dessous de tous les participants de
poids spécifique, comme indiqué dans l'exemple suivant :
<insert location="aboveHTML">
• La valeur belowHTML[+weight] est similaire à l'emplacement aboveHTML, si ce n'est que les participants sont
ajoutés au-dessous de la balise /HTML de fermeture.
• La valeur beforeSelection insère le texte avant le point d'insertion ou la sélection actuelle. S'il n'y a pas de sélection,
il est inséré à la fin de la balise body.
• La valeur replaceSelection remplace la sélection actuelle par le texte. S'il n'y a pas de sélection, il est inséré à la fin de
la balise body.
• La valeur wrapSelection équilibre la sélection actuelle, insère une balise de bloc avant la sélection et ajoute la balise
de fin appropriée après la sélection.
• La valeur afterSelection insère le texte après la sélection actuelle ou le point d'insertion. S'il n'y a pas de sélection, il
est inséré à la fin de la balise body.
• La valeur beforeNode insère le texte avant un nœud (emplacement spécifique dans le DOM). Lorsqu'une fonction
telle que dwscripts.applySB() est appelée pour effectuer l'insertion, le pointeur de nœud doit être transmis en
tant que paramètre de paramObj. Le nom de ce paramètre définissable par l'utilisateur doit être spécifié par
l'attribut nodeParamName (voir la section « nodeParamName » à la page 283).
En résumé, si votre emplacement comporte le mot node, veillez à déclarer la balise nodeParamName.
• La valeur replaceNode remplace un nœud par le texte.
• La valeur afterNode insère le texte après un nœud.
• La valeur firstChildOfNode insère le texte en tant que premier enfant d'une balise de bloc. Par exemple, pour insérer
un élément au début d'une balise FORM.
• firstChildOfNode insère le texte en tant que dernier enfant d'une balise de bloc. Par exemple, si vous souhaitez
insérer du code à la fin d'une balise FORM, (utile pour l'ajout de champs de formulaire masqués).
• nodeAttribute[+attribute] définit un attribut d'un nœud de balise. Si l'attribut n'existe pas déjà, cette valeur le crée.
EXTENSION DE DREAMWEAVER CS4 283
Comportements de serveur
Par exemple, utilisez <insert location="nodeAttribute+ACTION" nodeParamName="form"> pour définir
l'attribut ACTION d'un formulaire. Cette variante convertit la balise FORM de l'utilisateur de <form> en <form
action="myText">.
Si vous ne spécifiez pas d'attribut, l'emplacement nodeAttribute provoque l'ajout direct du texte à la balise ouverte.
Par exemple, utilisez insert location="nodeAttribute" pour ajouter un attribut facultatif à une balise. Vous
pouvez procéder ainsi pour convertir la balise INPUT d'un utilisateur de <input type="checkbox"> en <input
type="checkbox" <%if(foo)Reponse.Write("CHECKED")%>> .
Remarque : Pour la valeur d'attribut location="nodeAttribute", le dernier modèle de recherche détermine les points
de début et de fin de l'attribut. Veillez à ce que le dernier modèle trouve l'instruction entière.
nodeParamName
Description
Cet attribut est uniquement utilisé pour les emplacements d'insertion relatifs à un nœud. Il indique le nom du
paramètre utilisé 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écifié par l'utilisateur pour le paramètre de nœud qui est transmis avec l'objet de
paramètre à la fonction dwscripts.applySB(). Par exemple, si vous insérez du texte dans un formulaire, vous pouvez
utiliser un paramètre form_tag. Dans votre fonction applyServerBehavior() de comportement de serveur, vous
pouvez utiliser le paramètre form_tag pour indiquer le formulaire précis à mettre à jour, comme indiqué 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écifier le paramètre de nœud form_tag, comme indiqué dans l'exemple
suivant :
<insertText location="lastChildOfNode" nodeParamName="form_tag">
<![CDATA[<input type="hidden" name="MY_DATA">]]>
</insertText>
Le texte est inséré en tant que valeur lastChildOfNode et le nœud spécifique est transmis à l'aide de la propriété
form_tag de l'objet de paramètre.
EXTENSION DE DREAMWEAVER CS4 284
Comportements de serveur
<searchPatterns>
Description
Cette balise donne des indications sur la façon de rechercher le texte du participant dans le document et contient une
liste de modèles utilisés lors de la recherche d'un participant. Si plusieurs modèles de recherche sont définis, ils doivent
tous être trouvés dans le texte analysé (les modèles de recherche ont une relation AND logique), à moins qu'ils ne
soient marqués comme facultatifs à l'aide de l'indicateur isOptional.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
Attributs de <searchPatterns>
Les éléments suivants sont des attributs valides de la balise searchPatterns.
whereToSearch
Description
Cet attribut indique où rechercher le texte du participant. Il est relatif à l'emplacement d'insertion, veillez donc à définir
ces deux paramètres soigneusement (voir « location » à la page 281).
Parent
searchPatterns
Type
Attribut.
Obligatoire
Oui.
Valeurs
directive, tag+tagName, tag+*, comment, text
• La valeur directive recherche toutes les directives de serveur (balises spécifiques au serveur). Pour ASP et JSP, cela
signifie une recherche dans tous les blocs de script <% ... %>.
Remarque : La recherche n'est pas effectuée dans les attributs de balise, même s'ils contiennent des directives.
• La valeur tag+tagName effectue une recherche dans le contenu de la balise donnée, comme indiqué dans l'exemple
suivant :
<searchPatterns whereToSearch="tag+FORM">
EXTENSION DE DREAMWEAVER CS4 285
Comportements de serveur
Cet exemple n'effectue de recherche que dans les balises de formulaire. Par défaut, la recherche est effectuée dans
tout le nœud outerHTML. Pour les balises INPUT, indiquez le type après une barre oblique (/). Dans l'exemple
suivant, utilisez ce code pour effectuer une recherche dans tous les boutons d'envoi :
<searchPatterns whereToSearch="tag+INPUT/SUBMIT">.
• La valeur tag+* effectue une recherche dans le contenu de n'importe quelle balise, comme indiqué dans l'exemple
suivant :
<searchPatterns whereToSearch="tag+*">
Cet exemple effectue une recherche dans toutes les balises.
• La valeur comment limite la recherche aux commentaires HTML <!
...>, comme indiqué dans l'exemple suivant :
<searchPatterns whereToSearch="comment">
Cet exemple recherche des balises telles que <!-- mes commentaires ici -->.
• La valeur text limite la recherche aux sections de texte brut, comme indiqué dans l'exemple suivant :
<searchPatterns whereToSearch="text">
<searchPattern>XYZ</searchPattern>
</searchPatterns>
Cet exemple recherche un nœud de texte contenant le texte XYZ.
<searchPattern>
Description
Cette balise est un modèle qui identifie le texte participant et en extrait chaque valeur de paramètre. Chaque sousexpression de paramètre doit être mise entre parenthèses ().
Vous pouvez avoir des modèles sans paramètres (utilisés pour identifier le texte participant), des modèles avec un
paramètre ou des modèles avec plusieurs paramètres. Tous les modèles obligatoires doivent être trouvés et chaque
paramètre doit être nommé et trouvé exactement une fois.
Pour plus d'informations sur l'utilisation de la balise searchPattern, voir « Recherche des comportements de
serveur » à la page 297.
Parent
searchPatterns
Type
Balise de bloc.
Obligatoire
Oui.
Valeurs
searchString, /regularExpression/, <empty>
• La valeur searchString est une simple chaîne de recherche, sensible à la casse. Elle ne peut pas être utilisée pour
l'extraction de paramètres.
• La valeur /regularExpression/ est un modèle de recherche d'expression régulière.
EXTENSION DE DREAMWEAVER CS4 286
Comportements de serveur
• La valeur <empty> est utilisée si aucun modèle n'est spécifié. Dans ce cas, il est toujours considéré qu'il y a
correspondance et la valeur entière est affectée au premier paramètre.
Dans l'exemple suivant, pour identifier le texte participant <%=RS1.Field.Items("author_id")%>, vous pouvez
définir un modèle simple, suivi d'un modèle précis extrayant également les deux valeurs de paramètre :
<searchPattern>Field.Items</searchPattern>
<searchPattern paramNames="rs,col">
<![CDATA[
/<%=\s*(\w+)\.Field\.Items\("(\w+)"\)/
]]>
</searchPattern>
Dans cet exemple, une correspondance précise est établie avec le modèle. La valeur de la première sous-expression
(\w+) est affectée au paramètre "rs" et celle de la deuxième sous-expression (\w+) au paramètre "col".
Remarque : Les expressions régulières doivent impérativement commencer et se terminer par une barre oblique (/).
Sinon, elles sont utilisées en tant que recherches de chaîne littérale. Les expressions régulières peuvent être suivies du
modificateur d'expression régulière i pour indiquer la non-sensibilité à la casse (comme dans /pattern/i). Par exemple,
VBScript n'est pas sensible à la casse et doit donc utiliser /pattern/i. JavaScript est sensible à la casse et doit utiliser
/pattern/.
Si vous désirez affecter le contenu entier de l'emplacement de recherche limitée à un paramètre, n'indiquez aucun
modèle, comme indiqué dans l'exemple suivant :
<searchPatterns whereToSearch="tag+OPTION">
<searchPattern>MY_OPTION_NAME</searchPattern>
<searchPattern paramNames="optionLabel" limitSearch="innerOnly">
</searchPattern>
</searchPatterns>
Cet exemple règle le paramètre optionLabel sur le contenu complet de innerHTML d'une balise OPTION.
Attributs de <searchPattern>
Les éléments suivants sont des attributs valides de la balise searchPattern.
paramNames
Description
Cet attribut est une liste séparée à l'aide de virgules des noms de paramètre dont les valeurs sont extraites. Ces
paramètres sont affectés dans l'ordre de la sous-expression. Vous pouvez affecter des paramètres uniques ou utiliser
une liste séparée par virgule pour affecter plusieurs paramètres. Si d'autres expressions entre parenthèses sont utilisées
mais n'indiquent pas de paramètres, des virgules supplémentaires peuvent être utilisées en tant qu'espaces réservés
dans la liste des noms de paramètres.
Les noms de paramètres doivent correspondre à ceux spécifiés dans le texte d'insertion et dans les paramètres de mise
à jour.
Parent
searchPattern
Type
Attribut.
EXTENSION DE DREAMWEAVER CS4 287
Comportements de serveur
Obligatoire
Oui.
Valeurs
paramName1, paramName2, ...
Chaque nom de paramètre doit être le nom exact d'un paramètre utilisé dans le texte d'insertion. Par exemple, si le
texte d'insertion contient @@p1@@, vous devez définir exactement un paramètre avec ce nom :
<searchPattern paramNames="p1">patterns</searchPattern>
Pour extraire plusieurs paramètres utilisant un seul modèle, utilisez une liste de noms de paramètre séparés par des
virgules, dans l'ordre dans lequel les sous-expressions apparaissent dans le modèle. Supposons que l'exemple suivant
indique votre modèle de recherche :
<searchPattern paramName="p1,,p2">/(\w+)_(BIG|SMALL)_(\w+)/</searchPattern>
Il y a deux paramètres (séparés par du texte) à extraire. Dans le texte <%=a_BIG_b %>, la première sous-expression du
modèle de recherche correspond à a, donc p1="a". La deuxième sous-expression est ignorée (remarquez le ,, dans
la valeur paramName). La troisième sous-expression correspond à b, donc p2="b".
limitSearch
Description
Cet attribut limite la recherche à une partie de la balise whereToSearch.
Parent
searchPattern
Type
Attribut.
Obligatoire
Non.
Valeurs
all, attribute+attribName, tagOnly, innerOnly
• La valeur all (valeur par défaut) effectue une recherche dans la balise entière qui est spécifiée dans l'attribut
whereToSearch.
• La valeur attribute+attribName effectue la recherche dans la seule valeur de l'attribut spécifié, comme indiqué dans
l'exemple suivant :
<searchPatterns whereToSearch="tag+FORM">
<searchPattern limitSearch="attribute+ACTION">
/MY_PATTERN/
</searchPattern>
</searchPatterns>
Cet exemple indique que la recherche doit se limiter à la seule valeur de l'attribut ACTION des balises FORM. Si cet
attribut n'est pas défini, la balise est ignorée.
• La valeur tagOnly effectue la recherche dans la seule balise extérieure et ignore la balise innerHTML. Cette valeur est
valide uniquement lorsque whereToSearch est une balise.
EXTENSION DE DREAMWEAVER CS4 288
Comportements de serveur
• La valeur innerOnly effectue la recherche dans la seule balise innerHTML et ignore la balise extérieure. Cette valeur
est valide uniquement lorsque whereToSearch est une balise.
isOptional
Description
Cet attribut est un indicateur signifiant que le modèle de recherche n'est pas obligatoire pour trouver le participant.
Cela est utile pour les participants plus complexes pouvant avoir des paramètres non essentiels à extraire. Vous pouvez
créer des modèles servant à identifier de façon distincte un participant et avoir des modèles facultatifs pour l'extraction
de paramètres non essentiels.
Parent
searchPattern
Type
Attribut.
Obligatoire
Non.
Valeurs
true, false
• La valeur est true si le searchPattern n'est pas indispensable à l'identification du participant.
• La valeur est false (valeur par défaut) si la balise searchPattern est requise.
Considérez par exemple la chaîne de jeux d'enregistrements simple suivante :
<%
var Recordset1 = Server.CreateObject("ADODB.Recordset");
Recordset1.ActiveConnection = "dsn=andescoffee;";
Recordset1.Source = "SELECT * FROM PressReleases";
Recordset1.CursorType = 3;
Recordset1.Open();
%>
Les modèles de recherche doivent identifier le participant et extraire plusieurs paramètres. Cependant, si un paramètre
tel que cursorType n'est pas trouvé, il doit toujours être considéré comme un jeu d'enregistrements. Le paramètre
cursor est facultatif. Dans l'EDML, les modèles de recherche peuvent ressembler à l'exemple suivant :
<searchPattern paramNames="rs">/var (\w+) = Server.CreateObject/
</searchPattern>
<searchPattern paramNames="src">/ActiveConnection = "([^\r\n]*)"/</searchPattern>
<searchPattern paramNames="conn">/Source = "([^\r\n]*)"/</searchPattern>
<searchPattern paramNames="cursor" isOptional="true">/CursorType = (\d+)/
</searchPattern>
Les trois premiers modèles sont obligatoires pour identifier le jeu d'enregistrements. Si le dernier paramètre n'est pas
trouvé, le jeu d'enregistrements est quand même identifié.
EXTENSION DE DREAMWEAVER CS4 289
Comportements de serveur
<updatePatterns>
Description
Cette fonction facultative avancée permet des mises à jour précises du participant. Sans cette balise, le participant est
automatiquement mis à jour par remplacement du texte participant entier à chaque fois. Si vous spécifiez une balise
updatePatterns, elle doit contenir des modèles précis pour trouver et remplacer chaque paramètre du participant.
Cette balise peut s'avérer utile si l'utilisateur apporte des modifications au texte. Seules les parties du texte qui ont
besoin d'être modifiées seront mises à jour avec précision.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
<updatePattern>
Description
Cette balise est un type d'expression régulière spécifique permettant des mises à jour précises du texte du participant.
Il doit y avoir au moins une définition de modèle de mise à jour pour chaque paramètre unique déclaré dans le texte
d'insertion (de la forme @@paramName@@).
Parent
updatePatterns
Type
Balise de bloc.
Obligatoire
Oui (au moins une, si vous déclarez la balise updatePatterns).
Valeurs
La valeur est une expression régulière trouvant un paramètre placé entre deux sous-expressions entre parenthèses,
dans le formulaire /(pre-pattern)parameter-pattern(post-pattern)/. Vous devez définir au moins un modèle de mise à
jour pour chaque @@paramName@@ unique dans votre texte d'insertion. L'exemple suivant indique à quoi peut
ressembler votre texte d'insertion :
<insertText location="afterSelection">
<![CDATA[<%= @@rs@@.Field.Items("@@col@@") %>]]>
</insertText>
Une instance particulière du texte d'insertion sur une page peut ressembler à l'exemple suivant :
<%= RS1.Field.Items("author_id") %>
EXTENSION DE DREAMWEAVER CS4 290
Comportements de serveur
Il y a deux paramètres, rs et col. Pour mettre à jour ce texte une fois qu'il est inséré sur la page, vous avez besoin de
deux définitions de modèle de mise à jour :
<updatePattern paramName="rs" >
/(\b)\w+(\.Field\.Items)/
</updatePattern>
<updatePattern paramName="col">
/(\bItems\(")\w+("\))/
</updatePattern>
Les parenthèses littérales, ainsi que d'autres caractères d'expressions régulières spéciaux, n'ont pas été pris en compte
en raison de la barre oblique inverse les précédant (\). L'expression du milieu, définie comme \w+, est mise à jour avec
la dernière valeur transmise pour les paramètres rs et col, respectivement. Les valeurs RS1 et author_id peuvent être
mises à jour avec de nouvelles valeurs de façon précise.
Plusieurs instances du même modèle peuvent être mises à jour en même temps en utilisant l'indicateur global
d'expression régulière g aprè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èles pour mettre à jour un seul
paramètre, comme indiqué dans l'exemple suivant :
<% ...
Recordset1.CursorType = 0;
Recordset1.CursorLocation = 2;
Recordset1.LockType = 3;
%>
Pour mettre à jour le nom du jeu d'enregistrements dans les trois positions, vous devez disposer de trois modèles de
mise à jour pour un seul paramètre, comme indiqué dans l'exemple suivant :
<updatePattern paramName="rs">
/(\b)\w+(\.CursorType)/
</updatePattern>
<updatePattern paramName="rs">
/(\b)\w+(\.CursorLocation)/
</updatePattern>
<updatePattern paramName="rs">
/(\b)\w+(\.LockType)/
</updatePattern>
Vous pouvez maintenant transmettre une nouvelle valeur pour le jeu d'enregistrements, qui est mis à jour avec
précision à trois emplacements.
Attributs de <updatePattern>
Les éléments suivants sont des attributs valides de la balise updatePattern.
paramName
Description
Cet attribut indique le nom du paramètre dont la valeur est utilisée pour mettre à jour le participant. Ce paramètre doit
correspondre à ceux spécifiés dans le texte d'insertion et dans les paramètres de recherche.
Parent
updatePattern
EXTENSION DE DREAMWEAVER CS4 291
Comportements de serveur
Type
Attribut.
Obligatoire
Oui.
Valeurs
La valeur est le nom exact d'un paramètre utilisé dans le texte d'insertion. Dans l'exemple suivant, si le texte d'insertion
contient une valeur @@rs@@, vous devez avoir un paramètre du nom :
<updatePattern paramName="rs">pattern</updatePattern>
<delete>
Description
Cette balise est une fonction facultative avancée qui vous permet de contrôler comment un participant est supprimé.
Sans cette balise, vous devez effacer le participant entièrement pour le supprimer, mais seulement si aucun
comportement de serveur n'y fait référence. En définissant une balise delete, vous pouvez spécifier qu'il ne doit jamais
être supprimé ou que seules certaines parties doivent l'être.
Parent
implementation
Type
Balise.
Obligatoire
Non.
Attributs de <delete>
Les éléments suivants sont des attributs valides de la balise delete.
deleteType
Description
Cet attribut indique le type de suppression à effectuer. Il possède différentes significations, selon que le participant est
une directive, une balise ou un attribut. Par défaut, le participant entier est supprimé.
Parent
delete
Type
Attribut.
Obligatoire
Non.
EXTENSION DE DREAMWEAVER CS4 292
Comportements de serveur
Valeurs
all, none, tagOnly, innerOnly, attribute+attribName, attribute+*
• La valeur all (valeur par défaut) supprime la directive ou la balise entière. Pour les attributs, elle supprime la
définition entière.
• La valeur none n'est jamais automatiquement supprimée.
• La valeur tagOnly supprime uniquement la balise extérieure mais laisse le contenu de la balise innerHTML intact.
Pour les attributs, elle supprime également la balise exté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ée à des balises.
Pour les attributs, elle supprime uniquement la valeur. Sans signification pour les directives.
• La valeur attribute+attribName supprime uniquement l'attribut spécifié lorsqu'elle est appliquée à 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électionné en lien, vous pouvez supprimer le lien en supprimant
la balise extérieure uniquement, comme indiqué dans l'exemple suivant :
<delete deleteType="tagOnly"/>
Cet exemple convertit un participant de lien de <A HREF="...">HELLO</A> en HELLO.
<translator>
Description
Cette balise donne des informations pour la traduction d'un participant de façon à ce qu'elle puisse être rendue
différemment et puisse avoir un inspecteur Propriétés personnalisé.
Parent
implementation
Type
Balise de bloc.
Obligatoire
Non.
<searchPatterns>
Description
Cette balise permet à Dreamweaver de trouver les instances spécifiées dans un document. Si plusieurs modèles de
recherche sont définis, ils doivent tous être trouvés dans le texte analysé (les modèles de recherche ont une relation
AND logique), à moins qu'ils ne soient marqués comme facultatifs à l'aide de l'indicateur isOptional.
Parent
translator
EXTENSION DE DREAMWEAVER CS4 293
Comportements de serveur
Type
Balise de bloc.
Obligatoire
Oui.
<translations>
Description
Cette balise contient une liste d'instructions de traduction, chacune indiquant où rechercher le participant et ce qu'il
convient d'en faire.
Parent
translator
Type
Balise de bloc.
Obligatoire
Non.
<translation>
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 <translation>
Les éléments suivants sont des attributs valides de la balise translation.
whereToSearch
Description
Cet attribut indique où rechercher le texte, par rapport à l'emplacement d'insertion. Veillez donc à définir
soigneusement chaque emplacement (voir « location » à la page 281).
EXTENSION DE DREAMWEAVER CS4 294
Comportements de serveur
Parent
translation
Type
Attribut.
Obligatoire
Oui.
limitSearch
Description
Cet attribut limite la recherche à une partie de la balise whereToSearch.
Parent
translation
Type
Attribut.
Obligatoire
Non.
translationType
Description
Cet attribut indique le type de traduction à réaliser. Ces types sont prédéfinis et donnent à la traduction une
fonctionnalité précise. Par exemple, si vous spécifiez dynamic data, toute donnée traduite doit se comporter comme
une donnée dynamique Dreamweaver ; c'est-à-dire ressembler à un espace réservé de données dynamiques dans le
mode de mise en page (notation entre accolades, { }, avec couleur d'arriè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 à des données dynamiques
Dreamweaver et se comportent de la même façon, comme indiqué dans l'exemple suivant :
EXTENSION DE DREAMWEAVER CS4 295
Comportements de serveur
<translation whereToSearch="tag+IMAGE"
limitSearch="attribute+SRC"
translationType="dynamic data">
• La valeur dynamic image indique que les attributs traduits doivent ressembler à des images dynamiques
Dreamweaver et se comporter de la même façon, comme indiqué dans l'exemple suivant :
<translation whereToSearch="IMAGE+SRC"
translationType="dynamic image">
• La valeur dynamic source indique que les directives traduites doivent se comporter comme des sources dynamiques
Dreamweaver, comme indiqué dans l'exemple suivant :
<translation whereToSearch="directive"
translationType="dynamic source">
• La valeur tabbed
region start indique que les balises CFLOOP traduites définissent le début d'un contour tabulé,
comme indiqué dans l'exemple suivant :
<translation whereToSearch="CFLOOP"
translationType="tabbed region start">
• La valeur tabbed
region start indique que les balises /CFLOOP traduites définissent le début d'un contour tabulé,
comme indiqué dans l'exemple suivant :
<translation whereToSearch="CFLOOP"
translationType="tabbed region end">
• La valeur custom est le cas par défaut, dans lequel aucune fonctionnalité Dreamweaver interne n'est ajoutée à la
traduction. Il est courant de l'utiliser lors de la spécification d'une balise à insérer pour un inspecteur Propriétés
personnalisé, comme indiqué dans l'exemple suivant :
<translation whereToSearch="directive"
translationType="custom">
<openTag>
Description
Cette balise facultative peut être insérée au début de la section de traduction. Cette balise permet à d'autres extensions,
par exemple les inspecteurs Propriétés personnalisé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 être unique pour empêcher les conflits avec les types de balise
connus. Par exemple, si vous spécifiez <openTag>MM_DYNAMIC_CONTENT</openTag> les données dynamiques sont
traduites dans la balise MM_DYNAMIC_CONTENT.
EXTENSION DE DREAMWEAVER CS4 296
Comportements de serveur
<attributes>
Description
Cette balise contient une liste d'attributs à ajouter à la balise traduite spécifiée dans openTag. Sinon, si la balise
openTag n'est pas définie et que la balise searchPattern spécifie tag, cette balise contient une liste d'attributs traduits
à ajouter à la balise trouvée.
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
<attribute>
Description
Cette balise spécifie un attribut unique (ou un attribut traduit) à ajouter à la balise traduite.
Parent
attributes
Type
Balise de bloc.
Obligatoire
Oui (au moins un).
Valeurs
La spécification attributeName="attributeValue" définit un attribut sur une valeur. Le nom d'attribut est généralement
fixe et la valeur contient des références de paramètres extraites par les modèles de paramètres, comme indiqué dans
l'exemple suivant :
<attribute>SOURCE="@@rs@@"</attribute>
<attribute>BINDING="@@col@@"</attribute>
ou
<attribute>
mmTranslatedValueDynValue="VALUE={@@rs@@.@@col@@}"
</attribute>
<display>
Description
Cette balise est une chaîne d'affichage facultative devant être insérée dans la traduction.
EXTENSION DE DREAMWEAVER CS4 297
Comportements de serveur
Parent
translation
Type
Balise de bloc.
Obligatoire
Non.
Valeurs
Cette valeur displayString se réfère à toute chaîne contenant du texte et du HTML. Peut comporter des références de
paramètres extraites par les modèles de paramètres. Par exemple, <display>{@@rs@@.@@col@@}</display>
entraîne le rendu de la traduction sous la forme {myRecordset.myCol}.
<closeTag>
Description
Cette balise facultative doit être insérée à la fin de la section traduite. Cette balise permet à certaines autres extensions,
par exemple les inspecteurs Propriétés personnalisé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 à une balise de traduction openTag.
Exemple
Si vous spécifiez la valeur <closeTag>MM_DYNAMIC_CONTENT</closeTag>, les donné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ées qui sont utilisées pour créer et modifier les comportements
de serveur. La plupart des suggestions requièrent des paramètres spécifiques dans les fichiers EDML.
Recherche des comportements de serveur
Vous pouvez trouver des comportements de serveur à l'aide des fonctions suivantes :
• Ecriture de modèles de recherche
EXTENSION DE DREAMWEAVER CS4 298
Comportements de serveur
• Utilisation de modèles de recherche facultatifs
Ecriture de modèles de recherche
Pour mettre à jour ou supprimer des comportements de serveur, vous devez fournir à 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 être une chaîne et non une expression régulière, indiquant l'existence du comportement
de serveur sur la page. Elle ne respecte pas la casse. Elle doit être courte et unique et doit éviter les espaces et d'autres
sections que l'utilisateur peut modifier. L'exemple suivant montre un participant composé de la simple balise ASP
JavaScript :
<% if (Recordset1.EOF) Response.Redirect("some_url_here") %>
Dans l'exemple suivant, la chaîne quickSearch vérifie la présence de la balise suivante :
<quickSearch>Response.Redirect</quickSearch>
Pour des raisons de performances, le processus de recherche des instances de comportement de serveur commence par
le modèle quickSearch. Si cette chaîne figure dans le document et que le participant identifie un comportement de
serveur (dans le fichier groupe, partType="identifier" pour ce participant), les fichiers associés sont alors chargés
et la fonction findServerBehaviors() est appelée. A défaut de chaînes fiables à rechercher dans le participant (ou
pour des raisons de débogage), vous pouvez laisser la chaîne quickSearch vide, comme indiqué dans l'exemple
suivant :
<quickSearch></quickSearch>
Dans cet exemple, le comportement de serveur est toujours chargé et la recherche du document exécutée.
La balise searchPattern est ensuite utilisée pour analyser le document plus minutieusement que la balise
quickSearch et pour extraire des valeurs de paramètre du code du participant. Les modèles de recherche spécifient
l'emplacement de la recherche (l'attribut whereToSearch) et exploitent une série de balises searchPattern contenant
des modèles spécifiques. Ces modèles peuvent utiliser de simples chaînes ou des expressions régulières. Le code de
l'exemple précédent est une directive ASP, à savoir la spécification whereToSearch="directive" et une expression
régulière identifie la directive et extrait les paramètres, comme indiqué dans l'exemple suivant :
<quickSearch>Response.Write</quickSearch>
<searchPatterns whereToSearch="directive">
<searchPattern paramNames="rs,new__url">
/if\s*\((\w+)\.EOF\)\s*Response\.Redirect\("([^\r\n]*)"\)/i
</searchPattern>
</searchPatterns>
La chaîne de recherche est définie sous la forme d'une expression régulière en la faisant débuter et se terminer par une
barre oblique (/). Un i suit la barre oblique, ce qui indique qu'elle n'est pas sensible à la casse. Dans l'expression
régulière, les caractères spéciaux, tels que les parenthèses (), points (.), etc. sont spécifiés en les faisant précéder d'une
barre oblique inverse (\). Les deux paramètres rs et new_url sont extraits de la chaîne à l'aide de sous-expressions
entre parenthèses (les paramètres doivent être entre parenthèses). Dans cet exemple, ils sont indiqués par (\w+) et
([^\r\n]*). Ces valeurs correspondent aux valeurs d'expression régulière que $1 et $2 renvoient normalement.
Modèles de recherche facultatifs
Il peut parfois être nécessaire d'identifier un participant, même si certains paramètres sont introuvables. Le participant
stocke quelques informations facultatives telles qu'un numéro de téléphone. Pour cet exemple, vous pouvez utiliser le
code ASP suivant :
EXTENSION DE DREAMWEAVER CS4 299
Comportements de serveur
<% //address block
LNAME = "joe";
FNAME = "smith";
PHONE = "123-4567";
%>
Vous pouvez utiliser les modèles de recherche suivants :
<quickSearch>address</quickSearch>
<searchPatterns whereToSearch="directive">
<searchPattern paramNames="lname">/LNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>
<searchPattern paramNames="fname">/FNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>
<searchPattern paramNames="phone">/PHONE\s*=\s*"([^\r\n]*)"/i</searchPattern>
</searchPatterns>
Dans l'exemple précédent, le numéro de téléphone doit être spécifié. Cependant, vous pouvez rendre le numéro de
téléphone facultatif en ajoutant l'attribut isOptional, comme indiqué dans l'exemple suivant :
<quickSearch>address</quickSearch>
<searchPatterns whereToSearch="directive">
<searchPattern paramNames="lname">/LNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>
<searchPattern paramNames="fname">/FNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>
<searchPattern paramNames="phone" isOptional="true">/PHONE\s*=\s*"([^\r\n]*)"/i¬
</searchPattern>
</searchPatterns>
Le participant est maintenant reconnu, même si le numéro de téléphone n'est pas trouvé.
Méthode de mise en correspondances des participants
Si un comportement de serveur comporte plusieurs participants, ils doivent être identifiés dans le document utilisateur
et mis en correspondance. Si l'utilisateur applique plusieurs instances du comportement de serveur à un document,
chaque groupe de participants doit être mis en correspondance en conséquence. Pour que la mise en correspondance
des participants s'effectue correctement, modifiez ou ajoutez des paramètres, puis créez des participants qui soient
identifiables de façon unique.
La mise en correspondance nécessite quelques règles : les participants sont mis en correspondance si l'ensemble des
paramètres portant le même nom ont la mê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é de valeurs de paramètre. Entre les balises html.../html,
Dreamweaver met les participants en correspondance en fonction de leur position par rapport à la sélection ou aux
nœuds communs utilisés pour l'insertion.
Les participants sans paramètres sont automatiquement retenus, comme le montre cet exemple d'un comportement
de serveur avec un fichier groupe :
<group serverBehavior="test.htm">
<title>Test</title>
<groupParticipants>
<groupParticipant name="test_p1" partType="identifier" />
<groupParticipant name="test_p2" partType="identifier" />
</groupParticipants>
</group>
L'exemple suivant insère deux participants simples au-dessus de la balise html :
<% //test_p1 %>
<% //test_p2 %>
<html>
EXTENSION DE DREAMWEAVER CS4 300
Comportements de serveur
Ces participants sont localisé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é étant donné que
les participants existent déjà.
Si les paramètres des participants sont uniques, de multiples instances peuvent être insérées au-dessus de la balise
html. Par exemple, en ajoutant un paramètre de nom au participant, un utilisateur peut saisir un nom unique dans la
boîte de dialogue du comportement de serveur Test. Si l'utilisateur saisit le nom aaa, les participants suivants sont
insérés :
Si vous ajoutez de nouveau le comportement de serveur et saisissez un autre nom, soit bbb, le document se présente
comme suit :
<% //test_p1 name="aaa" %>
<% //test_p2 name="aaa" %>
<html>
Deux instances du mot Test sont répertoriées dans le panneau Comportements de serveur. Si l'utilisateur tente
d'ajouter une troisième instance à la page et qu'il la nomme aaa, rien n'est ajouté étant donné qu'elle existe déjà.
Dans la balise html, le processus de mise en correspondance peut également avoir recours à des informations de
position. Dans l'exemple suivant, vous avez deux participants, l'un ajouté avant la sélection et l'autre après, comme
suit :
<% if (expression) { //mySBName %>
Sélection aléatoire HTML ici :
<% } //end mySBName %>
Ces deux participants ne sont pourvus d'aucun paramètre et sont donc regroupés. Il est toutefois possible d'ajouter une
autre instance de ce comportement de serveur ailleurs dans le code HTML, comme indiqué dans l'exemple suivant :
<% if (expression) { //mySBName %>
Sélection aléatoire HTML ici :
<% } //end mySBName %>
Autre code HTML ici :
<% if (expression) { //mySBName %>
Autre sélection HTML ici :
<% } //end mySBName %>
A pré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ème de mise en correspondance et des solutions possibles pour l'éviter. Vous pouvez
créer un participant capable de calculer la taxe de certaines données dynamiques et d'afficher le résultat à la sélection.
<% total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>
<html>
<body>
The total (with taxes) is $<%=total%>
</body>
</html>
Les deux participants sont mis en correspondance car ils n'ont aucun paramètre en commun. Toutefois, si vous ajoutez
une deuxième instance de ce comportement de serveur, vous devez avoir le code suivant :
EXTENSION DE DREAMWEAVER CS4 301
Comportements de serveur
<% total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>
<% total = Recordset1.Fields.Item("salePrice").Value * 1.0825 %>
<html>
<body>
The total0(with taxes) is $<%=total%>
Sale price (with taxes) is $<%=total%>
</body>
</html>
Ce comportement de serveur ne fonctionne plus correctement, car un seul paramètre est nommé total. Pour
résoudre le problème, vérifiez qu'il existe bien un paramètre dont la valeur est unique et qui peut être utilisé 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 :
<% itemPrice_total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>
<% salePrice_total = Recordset1.Fields.Item("salePrice").Value * 1.0825 %>
<html>
<body>
The total0(with taxes) is $<%=itemPrice_total%>
Sale price (with taxes) is $<%=salePrice_total%>
</body>
</html>
A présent, les modèles de recherche peuvent identifier de façon unique les participants et les mettre en
correspondance.
Résolution du modèle de recherche
Dreamweaver prend en charge les actions suivantes en utilisant la fonctionnalité searchPatterns du participant :
• dépendance du transfert de fichier,
• mise à jour des chemins de fichier pour toutes les références de fichier (tels que les chemins des fichiers inclus).
Lors de la création de modèles de serveur, Dreamweaver génère des listes de modèles en recherchant les attributs
paramNames spéciaux dans tous les participants. Pour rechercher des URL servant à vérifier la dé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écifier plusieurs URL dans une mê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érent pour identifier les URL de fichier inclus, car toutes les références URL
ne sont pas traduites. De même, une seule URL peut être traduite comme fichier inclus.
Pour ré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îne est considéré comme le nom de la balise (les
espaces ne sont pas accepté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îne est considéré comme le nom de l'attribut
(les espaces ne sont pas acceptés dans les noms d'attribut).
EXTENSION DE DREAMWEAVER CS4 302
Comportements de serveur
Si ces quatre étapes se dé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égulière définie. Pour plus d'informations sur les expressions régulières, consultez la section
« Expressions régulières » à la page 272.
L'exemple suivant de balise searchPatterns ne contient pas de modèle de recherche car il combine une balise
(cfinclude) avec un attribut (template) pour isoler l'URL et vérifier la dépendance de fichier, la correction de
chemin, etc. :
<searchPatterns whereToSearch="tag+cfinclude">
<searchPattern paramNames="include_url" limitSearch="attribute+template" />
</searchPatterns>
La combinaison balise/attribut (voir l'exemple précédent) ne s'applique pas à la traduction, car Dreamweaver traduit
directement en texte dans le calque JavaScript. La vérification de dé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ées en une arborescence efficace).
Mise à jour des comportements de serveur
Vous pouvez mettre à jour les comportements de serveur à l'aide des fonctions suivantes :
• Mise à jour par remplacement
• Mise à jour de précision
Mise à jour par remplacement
Par défaut, aucune balise <updatePatterns> ne figure dans les fichiers EDML participants et les instances du
participant sont mises à 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ètre dont la valeur a changé
est supprimé. Le participant est ensuite réinséré avec la même valeur au même endroit.
Si l'utilisateur personnalise le code du participant dans le document, le participant peut ne plus être reconnu si les
modèles de recherche recherchent l'ancien code. Les modèles de recherche plus courts permettent à l'utilisateur de
personnaliser le code de participant dans son document. Toutefois, la mise à jour de l'instance de comportement de
serveur peut entraîner le remplacement du participant, qui perd les modifications personnalisées.
Mise à jour de précision
Dans certains cas, il peut être préférable de laisser l'utilisateur personnaliser le code du participant après insertion dans
le document. Pour ce faire, il suffit de limiter les modèles de recherche et de fournir des modèles de mise à jour dans
le fichier EDML. Après avoir ajouté le participant à la page, le comportement de serveur n'en modifie que certaines
parties. L'exemple suivant indique un simple participant doté de deux paramètres :
<% if (Recordset1.EOF) Response.Redirect("some_url_here") %>
Dans cet exemple, les modèles de recherche peuvent se présenter comme suit :
<quickSearch>Response.Write</quickSearch>
<searchPatterns whereToSearch="directive">
<searchPattern paramNames="rs,new__url">
/if\s*\((\w+)\.EOF\)\s*Response\.Redirect\("([^\r\n]*)"\)/i
</searchPattern>
</searchPatterns>
Le cas échéant, l'utilisateur peut ajouter un autre test à une instance particulière de ce code, comme indiqué dans
l'exemple suivant :
EXTENSION DE DREAMWEAVER CS4 303
Comportements de serveur
<% if (Recordset1.EOF || x > 2) Response.Redirect("some_url_here") %>
Les modèles de recherche échouent, car ils recherchent une parenthèse après le paramètre EOF. Pour rendre les
modèles de recherche plus flexibles, vous pouvez les raccourcir en les partageant, comme indiqué dans l'exemple
suivant :
<quickSearch>Response.Write</quickSearch>
<searchPatterns whereToSearch="directive">
<searchPattern paramNames="rs">/(\w+)\.EOF/</searchPattern>
<searchPattern paramNames="new__url">
/if\s*\([^\r\n]*\)\s*Response\.Redirect\("([^\r\n]*)"/i
</searchPattern>
</searchPatterns>
Ces modèles de recherche raccourcis é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é et les
personnalisations sont perdues. Pour une mise à jour plus précise, ajoutez une balise updatePatterns contenant un
modèle pour la mise à jour de chaque paramètre :
<updatePatterns>
<updatePattern paramNames="rs">/(\b)\w+(\.EOF)/\</updatePattern>
<updatePattern paramNames="new__url">
/(Response\.Redirect\(")[^\r\n]*(")/i
</updatePattern>
</updatePatterns>
Dans les modèles de mise à jour, les parenthèses sont inversées et placées autour du texte avant et après le paramètre.
Pour les modèles de recherche, utilisez le paramètre textBeforeParam(param)textAfterParam. Pour les modèles
de mise à jour, utilisez le paramètre (textBeforeParam)param(textAfterParam). Tout le texte qui se trouve entre
les deux sous-expressions entre parenthèses sera remplacé par la nouvelle valeur du paramètre.
Suppression de comportements de serveur
Vous pouvez supprimer des comportements de serveur à l'aide des fonctions suivantes :
• Suppression par défaut et comptes de dépendance
• Utilisation d'indicateurs pour limiter la suppression des participants
Suppression par défaut et comptes de dépendance
L'utilisateur peut supprimer une instance qu'il a sélectionnée dans le panneau Comportements de serveur en cliquant
sur le bouton moins (-) ou en appuyant sur Suppr. Tous les participants sont éliminés, hormis ceux qui sont partagés
par d'autres comportements de serveur. En particulier, si plusieurs comportements de serveur ont un pointeur de
participant relié au même nœud, le nœud n'est pas supprimé.
Par défaut, vous supprimez les participants en éliminant une balise entière. Si l'emplacement d'insertion correspond à
"wrapSelection", seule la balise extérieure est supprimée. La déclaration d'attribut dans son ensemble est supprimée.
L'exemple suivant suppose un participant sur l'attribut ACTION d'une balise form :
<form action="<% my_participant %>">
Après suppression de l'attribut, seul form demeure.
Utilisation d'indicateurs pour limiter la suppression des participants
Pour limiter le mode de sélection des participants, ajoutez une balise delete au fichier EDML. L'exemple suivant
montre un participant correspondant à l'attribut href d'un lien :
EXTENSION DE DREAMWEAVER CS4 304
Comportements de serveur
<a href="<%=MY_URL%>">Link Text</a>
Lorsque ce participant d'attribut est supprimé, la balise devient <a>Link Text</a>, qui n'apparaît plus sous forme de
lien dans Dreamweaver. Il est préférable de ne supprimer que la valeur d'attribut. La suppression s'effectue en ajoutant
la balise suivante au fichier EDML du participant :
<delete deleteType="innerOnly"/>
Une autre approche consiste à supprimer la balise entière en tapant <delete deleteType="tagOnly"/> pour
supprimer l'attribut. Le texte résultant est Link Text.
Fichiers JavaScript externes Share-in-memory
Si plusieurs fichiers HTML font référence à un fichier JavaScript particulier, Dreamweaver charge JavaScript dans un
emplacement central à partir duquel les fichiers HTML peuvent partager la mê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éférence (à l'aide de la
balise SCRIPT avec l'attribut SRC), Dreamweaver le charge dans un emplacement centralisé afin que le code soit, par la
suite, implicitement inclus dans tous les fichiers HTML.
Remarque : Les fichiers JavaScript chargés à cet emplacement centralisé partageant la mémoire, ils ne peuvent dupliquer
aucune déclaration. Un conflit de noms risque de se produire s'il y a définition simultanée d'une même variable ou
fonction à la fois dans votre fichier chargé dans la mémoire commune et dans un autre fichier JavaScript. Par conséquent,
prenez en compte ces fichiers et leur convention d'attribution de nom lorsque vous rédigez des fichiers JavaScript.
305
Chapitre 18 : Sources de données
Les fichiers de source de données sont stockés dans le dossier Configuration/DataSources/nom_modèle_serveur.
Dreamweaver prend actuellement en charge les modè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èle contient
des fichiers HTML et EDML associés aux sources de données de ce modèle de serveur.
Le tableau ci-dessous recense les fichiers utilisés pour créer une source de données.
Chemin
Fichier
Description
Configuration/DataSources/Nom_modèle_serveur
Nom_source_données.ht
m
Indique le nom de la source de
données et l'emplacement où
résident les fichiers JavaScript de
prise en charge.
Configuration/DataSources/Nom_modèle_serveur
Nom_source_données.ed
ml
Définit le code inséré par
Dreamweaver dans le document
pour désigner la valeur de la
source de données.
Configuration/DataSources/Nom_modèle_serveur
Nom_source_données.js
Contient les fonctions JavaScript
requises pour ajouter, insérer et
supprimer le code approprié dans
un document.
Fonctionnement des sources de données
Dans Dreamweaver, l'ajout de données dynamiques se fait à partir du panneau Liaisons. Les objets de données
dynamiques affichés dans le menu Plus (+) sont basés sur le modèle de serveur spécifié pour la page. Par exemple, les
utilisateurs peuvent insé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 étapes suivantes décrivent les processus mis en jeu lors de l'ajout de données dynamiques :
1 Lorsque vous cliquez sur le menu Plus (+) du panneau Liaisons, un menu déroulant s'affiche.
Pour déterminer le contenu du menu, Dreamweaver commence par rechercher un fichier DataSources.xml dans le
même dossier que les sources de données (Configuration/DataSources/ASP_Js/DataSources.xml, par exemple). Le
fichier DataSources.xml décrit le contenu du menu déroulant ; il contient les références des fichiers HTML devant
figurer dans le menu déroulant.
Dreamweaver recherche une balise de titre dans chaque fichier HTML référencé. Si le fichier contient une balise de
titre, le contenu de celle-ci est affiché dans le menu. Si le fichier ne contient pas de balise de titre, c'est le nom du
fichier qui apparaît dans le menu.
Lorsque Dreamweaver a terminé la lecture du fichier DataSources.xml, il recherche, dans le reste du dossier,
d'autres éléments qui devraient figurer dans le menu. Il fait de même si le fichier DataSources.xml n'existe pas. S'il
s'avè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ée un sous-menu et les
y ajoute.
EXTENSION DE DREAMWEAVER CS4 306
Sources de données
2 Lorsque l'utilisateur sélectionne un élément dans le menu Plus (+), Dreamweaver appelle la fonction
addDynamicSource(). La source des données est ainsi ajoutée au document de l'utilisateur.
3 Dreamweaver passe en revue tous les fichiers du dossier spécifique au modèle de serveur utilisé, en appelant la
fonction findDynamicSources() dans chaque fichier. Pour chaque valeur du tableau retourné, Dreamweaver
appelle la fonction generateDynamicSourceBindings() dans le même fichier. Ce faisant, il obtient une nouvelle
liste de tous les champs de chaque source de données pour le document de l'utilisateur. Ces champs sont présentés
à l'utilisateur sous la forme d'une commande d'arborescence dans la boîte de dialogue Données dynamiques ou
Texte dynamique, ou encore dans le panneau Liaisons. L'arborescence des sources de données d'un document ASP
peut se pré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ées dans le panneau Liaisons, Dreamweaver appelle
la fonction editDynamicSource() de façon à traiter les modifications dans l'arborescence.
5 Si l'utilisateur clique sur le bouton Moins (-), Dreamweaver obtient la sélection de nœud actuel depuis
l'arborescence et la transfère à la fonction deleteDynamicSource(). Cette fonction supprime le code ajouté
auparavant à l'aide de la fonction addDynamicSource(). S'il n'est pas possible de supprimer la sélection en cours,
la fonction renvoie un message d'erreur. Après le retour de la fonction deleteDynamicSource(), Dreamweaver
actualise l'arborescence des sources de données en appelant les fonctions findDynamicSources() et
generateDynamicSourceBindings().
6 Si l'utilisateur sélectionne une source de données puis clique sur OK dans la boîte de dialogue Données dynamiques
ou Texte dynamique, Dreamweaver appelle la fonction generateDynamicDataRef(). Il fait de même lorsque
l'utilisateur clique sur Insérer ou Lier dans le panneau Liaisons. La valeur retournée est insérée dans le document
au niveau du point d'insertion.
7 Si l'utilisateur modifie un objet de données dynamiques à l'aide de la boîte de dialogue Données dynamiques, la
sélection dans l'arborescence de source de données doit être initialisée en fonction de l'objet. Il en va de même si
l'utilisateur modifie un objet de données dynamiques à l'aide de la boîte de dialogue Texte dynamique. Pour
initialiser le contrôle d'arborescence, Dreamweaver examine chaque fichier dans le dossier de modèle de serveur
approprié, par exemple Configuration/DataSources/ASP_Js. Dreamweaver analyse chaque fichier en appelant
l'implémentation de la fonction inspectDynamicDataRef().
Dreamweaver appelle la fonction inspectDynamicDataRef() pour que l'objet de données dynamiques soit
reconverti, à partir du code du document de l'utilisateur, en un élément de l'arborescence (cette procédure est en
fait inversée par rapport à celle produite lorsque la fonction generateDynamicDataRef() est appelée). Si la
fonction inspectDynamicDataRef() renvoie un tableau contenant deux éléments, Dreamweaver fournit des
repères visuels pour l'élément d'arborescence lié à la sélection actuelle.
8 A chaque fois que l'utilisateur modifie la sélection, Dreamweaver appelle la fonction inspectDynamicDataRef().
Dreamweaver tente ainsi de déterminer si la nouvelle sé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élection en cours dans le
panneau Liaisons.
EXTENSION DE DREAMWEAVER CS4 307
Sources de données
9 Il est possible de modifier le format de données d'un objet de texte dynamique ou d'un attribut dynamique que
l'utilisateur a déjà ajouté à la page. Pour ce faire, utilisez la boîte de dialogue Données dynamiques ou Texte
dynamique, ou le panneau Liaisons. Lorsque le format change, Dreamweaver appelle la fonction
generateDynamicDataRef() afin d'obtenir la chaîne à insérer dans le document de l'utilisateur. Il transfère
ensuite cette chaîne à la fonction formatDynamicDataRef() (voir « formatDynamicDataRef() » à la page 323). La
chaîne renvoyée par la fonction formatDynamicDataRef() est insérée dans le document de l'utilisateur.
Exemple simple de source de données
Cette extension ajoute une source de données personnalisée au panneau Liaisons pour les documents Adobe
ColdFusion. Les utilisateurs peuvent spécifier la variable de leur choix pour la source de données.
Cet exemple permet de créer une source de données intitulée MyDatasource. Cette source de données comprend un
fichier JavaScript MyDatasource.js, un fichier MyDatasource_DataRef.edml et les fichiers de commandes
MyDatasource_Variable requis pour générer une boîte de dialogue dans laquelle les utilisateurs entrent le nom d'une
variable spécifique. L'exemple MyDatasource est basé sur l'implémentation des sources de données Cookie Variable et
URL Variable. Les fichiers associés à ces sources de données résident dans le dossier
Configuration/DataSources/ColdFusion.
Pour créer cette source de données, créez un fichier de définition, un fichier EDML, un fichier JavaScript et les fichiers
de commande de prise en charge, puis testez la nouvelle source de données.
Création du fichier de définition de source de données
Ce fichier indique à Dreamweaver le nom de la source de données tel qu'il s'affichera dans le menu Plus (+) du panneau
Liaisons. Il indique également à Dreamweaver où se trouvent les fichiers JavaScript de prise en charge de
l'implémentation de sources de données.
Lorsqu'un utilisateur clique sur le menu Plus (+) du panneau Liaisons, Dreamweaver effectue des recherches dans le
dossier DataSources associé au modèle de serveur actuel pour regrouper l'ensemble des sources de données définies
dans les fichiers HTML (HTM) du dossier. Pour rendre une nouvelle source de données accessible aux utilisateurs,
vous devez créer un fichier de définition de source de données qui fournit le nom de la source de données à l'aide de
la balise title et l'emplacement des fichiers JavaScript de prise en charge à l'aide de la balise script.
En outre, plusieurs fichiers de prise en charge sont nécessaires pour l'implémentation de cette source de données. En
général, il n'est pas nécessaire d'utiliser les fonctions de ces fichiers de prise en charge, mais ces dernières se révèlent
souvent utiles (voire nécessaires dans cet exemple). Par exemple, le fichier dwscriptsServer.js contient la fonction
dwscripts.stripCFOutputTags() utilisée pour l'implémentation de cette source de données. A l'aide du fichier
DataSourceClass.js, vous créez une instance de la classe DataSource à utiliser comme valeur de retour pour la fonction
findDynamicSources().
1 Créez un document vierge.
2 Entrez le code suivant :
EXTENSION DE DREAMWEAVER CS4 308
Sources de données
<HTML>
<HEAD>
<TITLE>MyDatasource</TITLE>
<SCRIPT SRC="../../Shared/Common/Scripts/dwscripts.js"></SCRIPT>
<SCRIPT SRC="../../Shared/Common/Scripts/dwscriptsServer.js"></SCRIPT>
<SCRIPT SRC="../../Shared/Common/Scripts/DataSourceClass.js"></SCRIPT>
<SCRIPT SRC="MyDatasource.js"></SCRIPT>
</HEAD>
<body></body>
</HTML>
3 Enregistrez le fichier sous le nom MyDatasource.htm dans le dossier Configuration/DataSources/ColdFusion.
Création du fichier EDML
Le fichier EDML définit le code inséré par Dreamweaver dans le document pour désigner la valeur de la source de
données. Pour plus d'informations sur les fichiers EDML, voir « Comportements de serveur » à la page 259. Lorsqu'un
utilisateur ajoute une valeur particulière à un document à partir d'une source de données, Dreamweaver insère le code
qui sera converti dans la valeur réelle lors de l'exécution. Le fichier EDML participant définit le code du document
(pour plus d'informations, voir « Fichiers EDML Participant » à la page 279).
Pour la variable MyDatasource, Dreamweaver doit insérer le code ColdFusion
<cfoutput>#MyXML.variable#</cfoutput>, où variable est la valeur que l'utilisateur attend de la source de
données.
1 Créez un document vierge.
2 Entrez le code suivant :
<participant>
<quickSearch><![CDATA[#]]></quickSearch>
<insertText location="replaceSelection"><![CDATA[<cfoutput>#MyDatasource.
@@bindingName@@#</cfoutput>]]></insertText>
<searchPatterns whereToSearch="tag+cfoutput">
<searchPattern paramNames="sourceName,bindingName"><![CDATA[/#(?:\s*\w+\s*\()?
(MyDatasource)\.(\w+)\b[^#]*#/i]]></searchPattern>
</searchPatterns>
</participant>
3 Enregistrez le fichier sous le nom MyDatasource_DataRef.edml dans le dossier
Configuration/DataSources/ColdFusion.
Création du fichier JavaScript qui implémente les fonctions API de sources de
données
Après avoir défini le nom de la source de données, le nom des fichiers de script de prise en charge et le code du
document de travail Dreamweaver, vous devez spécifier les fonctions JavaScript afin que Dreamweaver permette à
l'utilisateur d'ajouter, d'insérer et de supprimer le code nécessaire dans un document.
En vous basant sur la construction de la source de données Cookie Variable, vous pouvez mettre en œuvre la source
de données MyXML, comme illustré dans l'exemple ci-dessous. La commande MyDatasource_Variable utilisée dans
la fonction addDynamicSource() est définie dans la section « Création des fichiers de commande de prise en charge
pour les entrées utilisateur » à la page 311.
1 Créez un document vierge.
2 Entrez le code suivant :
EXTENSION DE DREAMWEAVER CS4 309
Sources de données
//************** GLOBALS VARS *****************
var MyDatasource_FILENAME = "REQ_D.gif";
var DATASOURCELEAF_FILENAME = "DSL_D.gif";
//****************** API **********************
function addDynamicSource()
{
MM.retVal = "";
MM.MyDatasourceContents = "";
dw.popupCommand("MyDatasource_Variable");
if (MM.retVal == "OK")
{
var theResponse = MM.MyDatasourceContents;
if (theResponse.length)
{
var siteURL = dw.getSiteRoot();
if (siteURL.length)
{
dwscripts.addListValueToNote(siteURL, "MyDatasource", 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, "MyDatasource");
if (bindingsArray.length > 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("MyDatasource",
MyDatasource_FILENAME,
false,
"MyDatasource.htm"))
}
}
return retList;
}
EXTENSION DE DREAMWEAVER CS4 310
Sources de données
function generateDynamicSourceBindings(sourceName)
{
var retVal = new Array();
var siteURL = dw.getSiteRoot();
// For localized object name...
if (sourceName != "MyDatasource")
{
sourceName = "MyDatasource";
}
if (siteURL.length)
{
var bindingsArray = dwscripts.getListValuesFromNote(siteURL, sourceName);
retVal = getDataSourceBindingList(bindingsArray,
DATASOURCELEAF_FILENAME,
true,
"MyDatasource.htm");
}
return retVal;
}
function generateDynamicDataRef(sourceName, bindingName, dropObject)
{
var paramObj = new Object();
paramObj.bindingName = bindingName;
var retStr = extPart.getInsertString("", "MyDatasource_DataRef", 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("MyDatasource_DataRef", expression);
if (params)
{
retArray[0] = params.sourceName;
retArray[1] = params.bindingName;
EXTENSION DE DREAMWEAVER CS4 311
Sources de données
}
}
return retArray;
}
function deleteDynamicSource(sourceName, bindingName)
{
var siteURL = dw.getSiteRoot();
if (siteURL.length)
{
//For localized object name
if (sourceName != "MyDatasource")
{
sourceName = "MyDatasource";
}
dwscripts.deleteListValueFromNote(siteURL, sourceName, bindingName);
}
}
3 Enregistrez le fichier sous le nom MyDatasource.js dans le dossier Configuration/DataSources/ColdFusion.
Création des fichiers de commande de prise en charge pour les entrées
utilisateur
La fonction addDynamicSource() contient la commande dw.popupCommand("MyDatasource_Variable"), qui
ouvre une boîte de dialogue dans laquelle l'utilisateur entre un nom spécifique de variable. Vous devez cependant créer
la boîte de dialogue pour la variable MyDatasource.
Pour fournir une boîte de dialogue pour l'utilisateur, créez un nouveau jeu de fichiers de commandes : un fichier de
définition de commandes en HTML et un en JavaScript (pour plus d'informations sur les fichiers de commandes, voir
« Fonctionnement des commandes » à la page 139).
Le fichier de définition de commande indique à Dreamweaver l'emplacement des fichiers JavaScript de prise en charge
du déploiement. Le fichier de définition indique également le formulaire de la boîte de dialogue que l'utilisateur voit.
Le fichier JavaScript de prise en charge détermine les boutons de la boîte de dialogue et indique comment affecter les
données saisies par l'utilisateur à partir de la boîte de dialogue.
Création du fichier de définition de commande
1 Créez un document vierge.
2 Entrez le code suivant :
EXTENSION DE DREAMWEAVER CS4 312
Sources de données
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<html>
<head>
<title>MyDatasource Variable</title>
<script src="MyDatasource_Variable.js"></script>
<SCRIPT SRC="../Shared/MM/Scripts/CMN/displayHelp.js"></SCRIPT>
<SCRIPT SRC="../Shared/MM/Scripts/CMN/string.js"></SCRIPT>
<link href="../fields.css" rel="stylesheet" type="text/css">
</head>
<body>
<form>
<div ALIGN="center">
<table border="0" cellpadding="2" cellspacing="4">
<tr>
<td align="right" valign="baseline" nowrap>Name:</td>
<td valign="baseline" nowrap>
<input name="theName" type="text" class="medTField">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
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éé dans le cadre de la
procédure suivante.
Création du fichier JavaScript de prise en charge
1 Créez un document vierge.
2 Entrez le code suivant :
//******************* API **********************
function commandButtons(){
return new Array(MM.BTN_OK,"okClicked()",MM.BTN_Cancel,"window.close()");
}
//***************** LOCAL FUNCTIONS******************
function okClicked(){
var nameObj = document.forms[0].theName;
if (nameObj.value) {
if (IsValidVarName(nameObj.value)) {
MM.MyDatasourceContents = nameObj.value;
MM.retVal = "OK";
window.close();
} else {
alert(nameObj.value + " " + MM.MSG_InvalidParamName);
}
} else {
alert(MM.MSG_NoName);
}
}
EXTENSION DE DREAMWEAVER CS4 313
Sources de données
3 Enregistrez le fichier dans le dossier Configuration/Commands sous le nom MyDatasource_Variable.js.
Test de la nouvelle source de données
Vous pouvez maintenant ouvrir Dreamweaver (ou le redémarrer s'il est déjà utilisé) et ouvrir un fichier ColdFusion
ou en cré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ées disponibles. MyDatasource doit s'afficher en fin de liste.
2 Cliquez sur l'option de source de données MyDatasource pour afficher la boîte de dialogue MyDatasource_Variable
que vous avez créée :
3 Saisissez une valeur dans la boîte de dialogue, puis appuyez sur OK.
Le panneau Liaisons affiche la source de données dans une arborescence comprenant la variable de la boîte de
dialogue sous le nom de la source de données :
4 Faites glisser la variable dans votre document ; Dreamweaver se charge d'insérer le code approprié à partir du fichier
EDML :
EXTENSION DE DREAMWEAVER CS4 314
Sources de données
Fonctions de l'API des sources de données
Les fonctions de l'API de sources de données vous permettent de trouver, ajouter, modifier et supprimer des sources
de données ainsi que de générer et inspecter des objets de données dynamiques.
addDynamicSource()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction ajoute une source de données dynamiques. Comme cette fonction est implémentée dans chaque fichier
de source de données, Dreamweaver appelle l'implémentation appropriée de la fonction addDynamicSource() dès
qu'une source de données est sélectionnée dans le menu Plus (+).
Par exemple, pour les jeux d'enregistrements ou les commandes, Dreamweaver appelle la fonction
dw.serverBehaviorInspector.popupServerBehavior(), qui insère un nouveau comportement de serveur dans
le document. Pour les variables de demande, de session et d'application, Dreamweaver affiche une boîte de dialogue
HTML/JavaScript permettant de recueillir le nom de la variable ; le comportement stocke ce nom en vue d'une
utilisation ultérieure.
Une fois la fonction addDynamicSource() renvoyée, Dreamweaver efface le contenu de l'arborescence de la source de
données et appelle les fonctions findDynamicSources() et generateDynamicSourceBindings() pour remplir de
nouveau l'arborescence.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
deleteDynamicSource()
Disponibilité
Dreamweaver UltraDev 1.
Description
Dreamweaver appelle cette fonction lorsqu'un utilisateur sélectionne une source de donné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électionnés, la fonction
deleteDynamicSource() appelle la fonction dw.serverBehaviorInspector.deleteServerBehavior(). Si la
sélection est une variable de requête, de session ou d'application, la fonction se souvient que la variable a été supprimée
et ne l'affiche plus. Une fois la fonction deleteDynamicSource() renvoyée, Dreamweaver efface le contenu de
l'arborescence des sources de données et appelle les fonctions findDynamicSources() et
generateDynamicSourceBindings() pour obtenir une nouvelle liste de toutes les sources de données associées au
document de l'utilisateur.
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau supérieur auquel le nœud enfant est associé.
EXTENSION DE DREAMWEAVER CS4 315
Sources de données
• L'argument bindingName est le nom du nœud enfant.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
displayHelp()
Description
Si cette fonction est définie, un bouton Aide s'affiche sous les boutons OK et Annuler dans la boîte de dialogue. Cette
fonction est appelée lorsque l'utilisateur clique sur le bouton Aide.
Arguments
Aucun.
Valeurs renvoyé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é
Dreamweaver MX.
Description
Cette fonction est appelée lorsque l'utilisateur clique deux fois sur le nom d'une source de données dans le panneau
Liaisons pour la modifier. Implémenter cette fonction vous permet de traiter les modifications utilisateur au sein de
l'arborescence. Sinon, le comportement de serveur correspondant à la source de données est automatiquement appelé.
Le développeur d'extensions peut utiliser cette fonction pour remplacer l'implémentation par défaut des
comportements de serveur et créer un gestionnaire personnalisé.
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau supérieur auquel le nœud enfant est associé.
• L'argument bindingName est le nom du nœud enfant.
Valeurs renvoyées
Dreamweaver attend une valeur booléenne : true si la fonction a traité la modification et false dans le cas contraire.
EXTENSION DE DREAMWEAVER CS4 316
Sources de données
findDynamicSources()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction renvoie les nœuds de niveau supérieur de l'arborescence des sources de données qui s'affichent dans la
boîte de dialogue Données dynamiques ou Texte dynamique, ou encore dans le panneau Liaisons. La fonction
findDynamicSources() est implémentée dans chaque fichier de source de données. En actualisant l'arborescence,
Dreamweaver parcourt tous les fichiers du dossier DataSources et appelle la fonction findDynamicSources() dans
chacun d'eux.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets JavaScript dans lequel chaque objet peut comporter cinq propriétés, décrites
dans la liste suivante :
• La propriété title correspond au libellé qui apparaît à droite de l'icône de chaque nœud parent. La propriété
title est toujours obligatoire.
• La propriété imageFile est le chemin d'un fichier contenant une icône (image GIF) représentant le nœud parent
dans la commande d'arborescence affichée dans la boîte de dialogue Données dynamiques ou Texte dynamique, ou
encore dans le panneau Liaisons. Cette propriété est obligatoire.
• La propriété allowDelete est facultative. Si cette propriété est réglée sur false, lorsque l'utilisateur clique sur ce
nœud dans le panneau Liaisons, le bouton Moins (-) est désactivé. Si elle est réglée sur true, le bouton Moins (-)
est activé. Si la propriété n'est pas définie, elle prend par défaut la valeur true.
• La propriété dataSource est le nom du fichier dans lequel la fonction findDynamicSources() est définie. Par
exemple, la fonction findDynamicSources() dans le fichier Session.htm, situé dans le dossier
Configuration/DataSources/ASP_Js, définit la propriété dataSource sur session.htm. Cette propriété est
obligatoire.
• La propriété name est le nom du comportement de serveur associé à la source de données, s'il existe. Certaines
sources de données, telles que des jeux d'enregistrements, sont associées à des comportements de serveur. Lorsque
vous créez un jeu d'enregistrements et que vous lui attribuez le nom rsAuthors, l'attribut name doit avoir pour
valeur rsAuthors. La propriété name est toujours définie, mais il peut s'agir d'une chaîne vide ("") si aucun
comportement de serveur n'est associé à la source de données (tel qu'une variable de session).
Remarque : Une classe JavaScript définissant ces propriétés existe dans le fichier DataSourceClass.js. Ce dernier se trouve
dans le dossier Configuration/Shared/Common/Scripts.
generateDynamicDataRef()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction génère l'objet de données dynamiques pour un nœud enfant.
EXTENSION DE DREAMWEAVER CS4 317
Sources de données
Arguments
sourceName, bindingName
• L'argument sourceName est le nom du nœud de niveau supérieur associé au nœud enfant.
• L'argument bindingName est le nom du nœud enfant à partir duquel vous souhaitez générer un objet de données
dynamiques.
Valeurs renvoyées
Dreamweaver attend une chaîne qui peut être transmise pour formatage à la fonction formatDynamicDataRef()
avant d'être insérée dans le document d'un utilisateur.
generateDynamicSourceBindings()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction renvoie le nœud enfant d'un nœud de niveau supérieur.
Arguments
sourceName
• L'argument sourceName est le nom du nœud de niveau supérieur dont vous voulez renvoyer les nœuds enfants.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets JavaScript dans lequel chaque objet peut comporter quatre propriétés,
décrites dans la liste suivante :
• La propriété title correspond à l'étiquette qui apparaît à droite de l'icône de chaque nœud parent. Cette propriété
est obligatoire.
• La propriété allowDelete est facultative. Si cette propriété est réglée sur la valeur false, lorsque l'utilisateur clique
sur ce nœud dans le panneau Liaisons, le bouton Moins (-) apparaît désactivé. Si elle est réglée sur la valeur true,
le bouton Moins (-) est activé. Si la propriété n'est pas définie, elle prend par défaut la valeur true.
• La propriété dataSource est le nom du fichier dans lequel la fonction findDynamicSources() est définie. Par
exemple, la fonction findDynamicSources() dans le fichier Session.htm, situé dans le dossier
Configuration/DataSources/ASP_Js, définit la propriété dataSource sur session.htm. Cette propriété est
obligatoire.
• La propriété name est le nom du comportement de serveur associé à la source de données, s'il existe. Cette propriété
est obligatoire. Certaines sources de données, telles que des jeux d'enregistrements, sont associées à des
comportements de serveur. Lorsque vous créez un jeu d'enregistrements et que vous lui attribuez le nom
rsAuthors, la propriété name doit avoir pour valeur rsAuthors. D'autres sources de données, telles que les
variables de session, ne sont pas associées à un comportement de serveur. Leur propriété name doit correspondre
à une chaîne vide ("").
Remarque : Une classe JavaScript définissant ces propriétés existe dans le fichier DataSourceClass.js. Ce dernier se trouve
dans le dossier Configuration/Shared/Common/Scripts.
EXTENSION DE DREAMWEAVER CS4 318
Sources de données
inspectDynamicDataRef()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction détermine le nœud correspondant dans l'arborescence de sources de données depuis un objet de
données dynamiques. La fonction inspectDynamicDataRef() extrait la chaîne transmise par Dreamweaver et la
compare à celle renvoyé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 à la chaîne
transmise. La fonction identifie le nœud au moyen d'un tableau contenant deux éléments. Le premier élément est le
nom du nœud parent et le second celui du nœud enfant. Si aucune correspondance n'est trouvée, la fonction
inspectDynamicDataRef() renvoie un tableau vide.
Chaque implémentation de la fonction inspectDynamicDataRef() ne recherche que les correspondances de son
propre type d'objet. Par exemple, l'implémentation de la fonction inspectDynamicDataRef() pour les jeux
d'enregistrements ne trouve une correspondance que si la chaîne transmise correspond à un nœud de jeu
d'enregistrements dans l'arborescence.
Arguments
string
• L'argument string est l'objet de données dynamiques.
Valeurs renvoyées
Dreamweaver attend un tableau de deux éléments (nom du parent et nom de l'enfant) pour le nœud correspondant ;
il renvoie la valeur null en l'absence de correspondance.
319
Chapitre 19 : Formats de serveur
La section « Sources de données » à la page 305 explique comment Adobe Dreamweaver insère des données
dynamiques dans le document de l'utilisateur en ajoutant une expression de serveur à l'endroit approprié. Lorsqu'un
visiteur demande le document de l'utilisateur à partir du serveur Web, l'expression est convertie en une valeur de base
de données, en contenu d'une variable de requête ou en toute autre valeur dynamique. Les formats de serveur de
Dreamweaver permettent de formater la valeur dynamique pour la présenter au visiteur.
Fonctionnement du formatage de données
Les utilisateurs de Dreamweaver peuvent mettre leurs données en forme à l'aide de formats prédéfinis. Ils peuvent
aussi créer des formats à partir de types prédéfinis ou de types qu'ils ont créés eux-mêmes.
L'utilisateur peut formater les données dynamiques de plusieurs façons. Pour formater les données avant de les insérer
dans un document HTML, utilisez le menu Format. Il se trouve dans la boîte de dialogue Données dynamiques ou
Texte dynamique, ou dans le panneau Liaisons. Pour cré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égories de format de base (Devise, Date/Heure, Casse, etc.). Ils
regroupent tous les paramètres communs à une catégorie et facilitent la création de formats.
Vous pouvez par exemple les utiliser pour créer un format de devise. Le formatage des devises consiste à convertir un
nombre en une chaîne et à insérer des virgules et un symbole de devise (le signe du dollar, $, par exemple). Le type de
données de format Devise regroupe tous les paramètres communs et vous demande une valeur pour chacun d'eux.
La rubrique API de format de serveur étudie l'API qui formate les données dynamiques que renvoient les fonctions
décrites dans la section « Sources de données » à la page 305. Les données dynamiques sont formatées à l'aide d'une
combinaison des fonctions décrites dans les deux rubriques.
Tous les fichiers de format résident dans le dossier Configuration/ServerFormats/Modèle_serveur_actuel. Chaque
sous-dossier contient un fichier XML et plusieurs fichiers HTML.
Le fichier Formats.xml décrit tous les choix du menu Format. Dreamweaver ajoute automatiquement les options
Modifier la liste de formats et Aucun.
Le dossier contient également un fichier HTML pour chaque type de format installé, dont Casse d'alphabet,
Devise, Date/Heure, Math, Nombre, Pourcentage, Simple et Rogner.
Remarque : Le format Devise n'est pas disponible pour les modèles de serveur PHP.
Fichier Formats.xml
Le fichier Formats.xml contient une balise format pour chaque élément du menu Format. Chaque balise format
contient les attributs obligatoires suivants :
• L'attribut file=fileName représente le fichier HTML du type de format concerné, tel que «
• L'attribut title=string représente la chaîne qui apparaît dans le menu Format, telle que «
défaut ».
Devise ».
Devise- valeur par
EXTENSION DE DREAMWEAVER CS4 320
Formats de serveur
• L'attribut expression=regexp représente une expression régulière correspondant aux objets de données
dynamiques qui utilisent ce format. L'expression détermine le format actuellement appliqué à l'objet de données
dynamiques. Par exemple, l'expression correspondant au format « Devise - valeur par défaut » serait
"<%\s*=\s*FormatCurrency\(.*, -1, -2, -2,-2\)\s*%>|<%\s*=\s*DoCurrency\(.*, -1, -2, -2, 2\)\s*%>". La valeur de l'attribut expression doit être unique parmi toutes les balises format du fichier. Elle doit
être suffisamment précise pour garantir que seules les instances de ce format correspondent à l'expression.
• L'attribut visibility=[hidden
| visible] indique si la valeur est affichée dans le menu Format. Si la valeur de
l'attribut visibility est hidden (masqué), le format ne s'affiche pas dans le menu Format.
La balise format peut éventuellement contenir des attributs supplémentaires ayant un nom arbitraire.
Certaines fonctions de formatage de données nécessitent un argument, format, qui est un objet JavaScript. Cet objet
est le nœud correspondant à la balise format dans le fichier Formats.xml. L'objet a une propriété JavaScript pour
chaque attribut de la balise format correspondante.
L'exemple suivant illustre la balise format associée à la chaîne « Devise - valeur par défaut » :
<format file="Currency" title="Currency - default" ¬
expression="<%\s*=\s*FormatCurrency\(.*, -1, -2, -2, -2\)\s*%>|¬
<%\s*=\s*DoCurrency\(.*, -1, -2, -2, -2\)\s*%>"
NumDigitsAfterDecimal=-1 IncludeLeadingDigit=-2 ¬
UseParensForNegativeNumbers=-2 GroupDigits=-2/>
Le type de ce format correspond à Currency. La chaîne « Devise - valeur par défaut » s'affiche dans le menu
Format. L'expression <%\s*=\s*FormatCurrency\(.*, -1, -2, -2,-2\)\s*%>|<%\s*=\s*DoCurrency\(.*, 1, -2, -2, -2\)\s*%> trouve des occurrences de ce format dans le document de l'utilisateur.
Les paramètres NumDigitsAfterDecimal, IncludeLeadingDigit, UseParensForNegativeNumbers et
GroupDigits concernent le format Devise et ne sont pas obligatoires. Ces paramètres s'affichent dans la boîte de
dialogue Paramètres du type de format Devise. Cette boîte de dialogue apparaît chaque fois qu'un utilisateur choisit
le type de format Devise dans le menu Plus (+) de la boîte de dialogue Modifier la liste de formats. Les valeurs
indiquées pour ces paramètres sont utilisées pour définir le nouveau format.
Le menu Plus (+) de la boî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îte de dialogue
Modifier la liste de formats, ajoutez l'instruction suivante de manière à ce qu'elle figure sur la première ligne du
fichier HTML :
<!-- MENU-LOCATION=NONE -->
Pour déterminer le contenu du menu, Dreamweaver commence par rechercher un fichier ServerFormats.xml dans le
même dossier que les formats de données (par exemple, Configuration/ServerFormats/ASP/). Le fichier
ServerFormats.xml décrit le contenu du menu Plus (+) de la boîte de dialogue Modifier la liste de formats. Il contient
des références aux fichiers HTML répertoriés dans le menu.
Dreamweaver recherche une balise title dans chaque fichier HTML référencé. Si le fichier contient une balise de
titre, le contenu de celle-ci est affiché dans le menu. Si le fichier ne contient pas de balise de titre, c'est le nom du fichier
qui apparaî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érifier s'il contient d'autres éléments devant apparaître dans le menu. S'il s'avè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éjà dans le menu, Dreamweaver crée un sous-menu et les y ajoute.
EXTENSION DE DREAMWEAVER CS4 321
Formats de serveur
Scénarios dans lesquels les fonctions de formatage des
données sont appelées
Les fonctions de formatage de données sont appelées dans les cas suivants :
• Dans la boîte de dialogue Données dynamiques ou Texte dynamique, l'utilisateur choisit un nœud dans
l'arborescence des sources de donné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() à la fonction formatDynamicDataRef(). La valeur renvoyée par la fonction
formatDynamicDataRef() s'affiche dans le paramètre Code de la boîte de dialogue. Lorsque l'utilisateur clique sur
OK, la chaîne de code est insérée dans le document de l'utilisateur. Dreamweaver appelle ensuite la fonction
applyFormat() pour insérer une déclaration de fonction. Pour plus d’informations, voir
« generateDynamicDataRef() » à la page 316. Un processus similaire a lieu lorsque l'utilisateur utilise le panneau
Liaisons.
• L'utilisateur change le format ou efface l'élément de données dynamiques. La fonction deleteFormat() est alors
appelée. Cette fonction deleteFormat() supprime les scripts correspondants du document.
• Lorsque l'utilisateur clique sur le bouton Plus (+) de la boîte de dialogue Modifier la liste de formats, Dreamweaver
affiche un menu contenant tous les types de format pour le modèle de serveur utilisé. Chaque type de format
correspond à un fichier du dossier Configuration\ServerFormats\Modèle_serveur_actuel.
Si l'utilisateur choisit, dans le menu Plus (+), un format qui nécessite un paramètre spécifié par l'utilisateur,
Dreamweaver exécute le gestionnaire onLoad sur la balise body, puis ouvre la boîte de dialogue Paramètres, qui
affiche les paramètres de ce type de format. Dans cette boîte de dialogue, l'utilisateur choisit les paramètres du
format et clique sur OK. Dreamweaver appelle alors la fonction applyFormatDefinition().
Si le format sélectionné n'a pas besoin d'afficher de boîte de dialogue Paramè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électionnant dans la boî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îte de dialogue Paramètres, de façon à ce que les commandes de formulaire puissent être
initialisées sur les valeurs correctes.
Fonctions de l'API des formats de serveur
L'API de formats de serveur est composée des fonctions de formatage de données suivantes.
applyFormat()
Disponibilité
Dreamweaver UltraDev 1.
EXTENSION DE DREAMWEAVER CS4 322
Formats de serveur
Description
Cette fonction permet de modifier un document en lui ajoutant une déclaration de fonction de format. Lorsqu'un
utilisateur choisit un format dans la zone Format de la boîte de dialogue Donné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ée devant la balise HTML (si elle ne s'y trouve pas déjà) et il modifie l'objet de données dynamiques
de façon à appeler la fonction de format appropriée.
Dreamweaver ajoute la déclaration de fonction en appelant la fonction JavaScript applyFormat() dans le fichier de
format des données. Il modifie l'objet de données dynamique en appelant la fonction formatDynamicDataRef().
La fonction applyFormat() doit utiliser le DOM (Document Object Model, Modèle d'objet de document) pour
ajouter des déclarations de fonction au début du document de l'utilisateur. Par exemple, si l'utilisateur sélectionne
Devise - Valeur par défaut, la fonction ajoute la déclaration de fonction Currency.
Arguments
format
• L'argument format est un objet JavaScript qui décrit le format à appliquer. Cet objet JavaScript constitue le nœud
correspondant à la balise format dans le fichier Formats.xml. L'objet a une propriété JavaScript pour chaque
attribut de la balise format correspondante.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
applyFormatDefinition()
Disponibilité
Dreamweaver UltraDev 1.
Description
Applique les changements à un format créé à partir de la boîte de dialogue Modifier le format.
Les utilisateurs peuvent créer, modifier ou supprimer des formats à partir de la boîte de dialogue Modifier la liste de
formats. Cette fonction est appelée pour appliquer toutes les modifications apportées à un format. Elle peut également
définir d'autres propriétés, nommées arbitrairement, pour l'objet. Chaque propriété est stockée en tant qu'attribut de
la balise format dans le fichier Formats.xml.
Arguments
format
• L'argument format correspond à l'objet format JavaScript. Cette fonction doit faire de la propriété expression de
l'objet JavaScript l'expression régulière du format. Elle peut également définir d'autres propriétés, nommées
arbitrairement, pour l'objet. Chaque propriété est stockée en tant qu'attribut de la balise format.
Valeurs renvoyées
Dreamweaver attend l'objet de format, si la fonction est correctement appliquée. En cas d'erreur, une chaîne d'erreur
est renvoyée. Si une chaîne vide est renvoyée, le formulaire est fermé mais le nouveau format n'est pas créé, ce qui
revient à annuler l'opération.
EXTENSION DE DREAMWEAVER CS4 323
Formats de serveur
deleteFormat()
Disponibilité
Dreamweaver UltraDev 1.
Description
Supprime la déclaration de fonction du format au début du document de l'utilisateur.
Lorsque l'utilisateur modifie le format d'un objet de données dynamiques (dans les boîtes de dialogue Données
dynamiques ou Texte dynamique ou dans le panneau Liaisons) ou supprime un objet de données dynamiques formaté,
Dreamweaver supprime la déclaration de fonction au début du document, ainsi que l'appel de la fonction de l'objet de
données dynamiques en appelant la fonction deleteFormat().
Utilisez le DOM avec la fonction deleteFormat() pour supprimer la déclaration de fonction au début du document
ouvert.
Arguments
format
L'argument format est un objet JavaScript qui décrit le format à supprimer. Cet objet JavaScript constitue le nœud
correspondant à la balise format dans le fichier Formats.xml.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
formatDynamicDataRef()
Disponibilité
Dreamweaver UltraDev 1.
Description
Ajoute à l'objet de données dynamiques l'appel de la fonction de format. Lorsqu'un utilisateur choisit un format dans
la zone Format de la boîte de dialogue Donné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ée
devant la balise HTML (si elle ne s'y trouve pas déjà) et il modifie l'objet de données dynamiques de façon à appeler la
fonction de format appropriée.
Dreamweaver ajoute la déclaration de fonction en appelant la fonction JavaScript applyFormat() dans le fichier de
format des données. Il modifie l'objet de données dynamique en appelant la fonction formatDynamicDataRef().
La fonction formatDynamicDataRef() est appelée lorsque l'utilisateur sélectionne un format du champ de texte
Format de la boîte de dialogue Donné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îne contenant l'objet de données dynamiques.
EXTENSION DE DREAMWEAVER CS4 324
Formats de serveur
• L'argument format est un objet JavaScript qui décrit le format à appliquer. Cet objet JavaScript constitue le nœud
correspondant à la balise format dans le fichier Formats.xml. L'objet a une propriété JavaScript pour chaque
attribut de la balise format correspondante.
Valeurs renvoyées
Dreamweaver attend la nouvelle valeur de l'objet de données dynamiques.
Si une erreur a lieu, la fonction affiche un message d'avertissement dans certaines conditions. Si la fonction renvoie
une chaîne vide, le champ Format prend la valeur Aucun.
inspectFormatDefinition()
Disponibilité
Dreamweaver UltraDev 1.
Description
Initialise les commandes de formulaire lorsqu'un utilisateur modifie un format existant dans la boîte de dialogue
Modifier la liste de formats.
Arguments
format
L'argument format est un objet JavaScript qui décrit le format à appliquer. Cet objet JavaScript constitue le nœud
correspondant à la balise format dans le fichier Formats.xml. L'objet a une propriété JavaScript pour chaque attribut
de la balise format correspondante.
Valeurs renvoyées
Dreamweaver ne renvoie rien.
325
Chapitre 20 : Composants
Adobe Dreamweaver gère la création de la plupart des types de composants les plus populaires. Dreamweaver vous
permet en outre de développer les types de composants intégrés au panneau Composants.
A propos des notions de base des composants
Les programmeurs ont recours à différentes stratégies pour encapsuler leurs travaux. L'encapsulation correspond à la
création d'une entité dans une boîte noire virtuelle. Pour l'utiliser, il n'est pas né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 à la fin d'une tâche. Un programmeur crée par exemple un programme destiné à extraire
des informations d'une base de données d'employés. Toute personne, y compris d'autres programmes, peut alors
utiliser ce programme pour interroger la base de données. Le programme est ainsi réutilisable.
L'expérience prouve que les programmes bien organisés qui font appel à l'encapsulation sont plus faciles à gérer, à
améliorer et à réutiliser. Les différentes technologies offrent aux programmeurs différentes façons d'effectuer
l'encapsulation, et ces stratégies portent différents noms : fonctions, modules, etc. Dreamweaver utilise le terme
composant pour désigner quelques-unes des stratégies d'encapsulation les plus populaires et les plus modernes, comme
les composants Adobe ColdFusion (CFC). Lorsque les utilisateurs créent des applications Web dans Dreamweaver, le
panneau Composants les aide à utiliser les CFC.
Les composants provenant de technologies récentes (comme les services Web, JavaBeans ou les CFC) sont capables de
s'autodécrire. En règle générale, des informations relatives au composant sont imbriquées dans les fichiers qui le
constituent. La capacité d'un composant à publier ou partager ces informations porte le nom d'introspection. Ainsi, un
programme comme Dreamweaver peut demander à un composant la liste des fonctions qu'il expose. Les fonctions
exposées sont les fonctions qui peuvent être chargées à partir d'un autre programme. En fonction de la technologie
utilisée, un composant peut révéler d'autres informations à son sujet.
Extension du panneau Composants
Pour utiliser une stratégie de composants qui n'est pas représentée dans le panneau Composants actuel, dé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édigées à l'aide de fichiers ASCII).
La façon précise dont l'emplacement et les détails des composants sont extraits dépend des technologies. Elle peut
également varier selon le modèle de serveur (ASP.NET, JSP/J2EE, ColdFusion ou autre). Ainsi, le code JavaScript que
vous rédigez pour développer le panneau Composants dépend de la technologie du composant à ajouter. Les fonctions
décrites dans cette section doivent vous aider à obtenir les informations qui doivent figurer dans le panneau
Composants. Vous devez par ailleurs rédiger par vos propres soins la majeure partie de la logique servant à rechercher
les composants et à les analyser. Ces opérations comprennent l'interrogation de la structure interne du composant et
la mise à disposition de ses champs, méthodes et propriétés par l'intermédiaire de Dreamweaver.
EXTENSION DE DREAMWEAVER CS4 326
Composants
Enfin, les modèles de serveur comme ASP.NET, JSP/J2EE ou ColdFusion tendent à 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 également en charge les services Web et les CFC. Lorsque vous ajoutez un type de composant au
panneau Composants, il doit être spécifique au modèle de serveur. Ainsi, si un utilisateur Dreamweaver travaille sur
un site ColdFusion, les composants CF s'affichent dans le menu déroulant du panneau Composants.
Dans certains cas, pour pouvoir modifier des fichiers, il est nécessaire de rédiger du code JavaScript appelant certaines
fonctions liées aux composants.
Personnalisation du panneau Composants
Le panneau Composants de Dreamweaver permet aux utilisateurs de charger et d'utiliser des composants. Il répertorie
tous les types de composants disponibles et compatibles avec chaque modèle de serveur activé. Par exemple, les CFC
ne peuvent fonctionner que sur une page Adobe ColdFusion et ne s'affichent que dans le modèle de serveur Adobe
ColdFusion du panneau Composants.
Vous pouvez ajouter des types de composants au panneau Composants en créant une extension. Pour ajouter un
nouveau type de composant au panneau Composants, vous devez exécuter plusieurs étapes générales :
1 Ajoutez le composant à la liste des types de composants disponibles associée aux modèles de serveur appropriés.
2 Ajoutez des instructions pour la configuration du composant dans le panneau Composants ou dans une boîte de
dialogue (en fonction de l'extension pour laquelle ces opérations sont effectuées). Les instructions sont également
baptisées « étapes de configuration » et se présentent sous la forme d'étapes numérotées interactives. Assurez-vous
que chaque étape exécutée par l'utilisateur est cochée.
3 Recensez les composants associés au type de composant défini sur l'ordinateur de l'utilisateur ou sur le site actuel
uniquement.
4 Créez un composant lorsque l'utilisateur clique sur le bouton Plus (+) dans le panneau Composants.
En outre, vous pouvez permettre à 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èle de serveur implémenté. Les
fichiers de composant sont stockés dans le dossier Configuration/Components/modèle-serveur/TypeComposant.
Vous pouvez ajouter d'autres modèles de serveur et extensions de serveur compatibles (pour plus d'informations, voir
« Modèles de serveur » à la page 338 et « Comportements de serveur » à la page 259).
Pour créer un composant personnalisé fonctionnant dans le panneau Composants :
1 Cré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éez ou identifiez des fichiers d'image GIF représentant le composant dans le panneau Composants.
Pour que le type de composant puisse s'afficher dans une vue de commande d'arborescence, créez les fichiers facultatifs
associés et complétez la commande d'arborescence.
Vous pouvez configurer le type de composant pour qu'il fonctionne à 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 à chaque début de session.
EXTENSION DE DREAMWEAVER CS4 327
Composants
Ajout d'un nouveau composant de service LDAP (lightweight directory access
protocol)
1 En prenant pour modèle les fichiers de types de composants existants (par exemple, les fichiers du dossier
d'application Configuration/Components/Common/WebServices), créez tous les fichiers nécessaires ainsi que les
fichiers facultatifs, pour afficher le nouveau type de composant dans le panneau Composants de Dreamweaver,
comme indiqué 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émente le rappel de l'API des
composants.
Obligatoire
*.gif
Image qui apparaît dans le menu déroulant Composants.
Obligatoire
*Menus.xml
Lieu de stockage des métadonnées qui dé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 être activées ou désactivées,
comme le montre l'exemple suivant : ToolBarImageUp.gif
Facultatif
ToolBarImageDown.gif ToolBarImageDisabled.gif
Ou des images de nœuds d'arborescence.
Remarque : Utilisez le même préfixe pour tous les fichiers se rapportant au même composant, afin que chaque fichier
et son composant soient facilement identifiables.
2 Rédigez le code JavaScript destiné à implémenter le nouveau composant de serveur.
Le fichier d'extension (HTM) définit les emplacements du code JavaScript dans la balise SCRIPT. Ces fichiers
JavaScript peuvent résider dans le dossier Shared, dans le même dossier que le fichier d'extension ou dans le dossier
Common du code s'appliquant aux modèles de serveurs multiples.
Par exemple, le fichier WebServices.htm du dossier Configuration/Components/Common/WebServices/ contient la
ligne :
<SCRIPT SRC="../../Common/WebServices/WebServicesCommon.js"></SCRIPT>
Pour plus d'informations sur les fonctions d'API du panneau Composants disponibles, voir « Fonctions de l'API du
panneau Composants » à la page 328.
Lorsque vous ajoutez un service, vous pouvez utiliser le panneau Composants pour consulter les méta-informations
existantes et vous en servir directement lorsque vous créez l'extension. Dreamweaver vous permet de consulter les
composants ajoutés et d'afficher les nœuds dans l'arborescence des composants. Le panneau Composants prend en charge
les fonctionnalités de glisser-déplacer et les raccourcis clavier en mode Code.
Propriétés de la commande d'arborescence
Utilisez la propriété ComponentRec pour compléter une commande d'arborescence du panneau Composants et faire
en sorte qu'elle apparaisse à l'emplacement approprié dans le panneau. Chaque nœud d'une commande d'arborescence
doit comporter les propriétés suivantes :
EXTENSION DE DREAMWEAVER CS4 328
Composants
Nom de la propriété
Description
Obligatoire ou
facultatif
name
Nom de l'élément de nœud dans l'arborescence.
Obligatoire
image
Icône de l'élément de nœud dans l'arborescence. Si elle
n'est pas spécifiée, une icône par défaut est utilisée.
Facultatif
hasChildren
Répond aux clics sur les boutons Plus (+) et Moins (-) du
contrôle d'arborescence en chargeant les enfants. Vous
pouvez travailler dans une arborescence qui n'est pas
remplie à l'avance.
Obligatoire
toolTipText
Texte de l'infobulle associée à l'élément de nœud dans
l'arborescence.
Facultatif
isCodeViewDraggable
Détermine s'il est possible de glisser-déplacer l'élément
vers le mode Code.
Facultatif
isDesignViewDraggable
Détermine s'il est possible de glisser-déplacer l'élément
vers le mode Création.
Facultatif
Par exemple, les enfants du nœud WebServicesClass suivant sont des méthodes Web :
this.name = "TrafficLocatorWebService";
this.image = "Components/Common/WebServices/WebServices.gif";
this.hasChildren = true;
this.toolTipText = "TrafficLocatorWebService";
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écrit les fonctions API permettant de remplir le panneau Composants.
getComponentChildren()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie une liste d'objets ComponentRec enfant pour l'objet ComponentRec parent actif. Pour charger
les éléments du niveau racine de l'arborescence, cette fonction doit lire ses métadonnées dans son stock existant.
Arguments
{parentComponentRec}
L'argument parentComponentRec est l'objet componentRec du parent. Si cet argument n'est pas défini, Dreamweaver
attend une liste d'objets ComponentRec pour le nœud racine.
EXTENSION DE DREAMWEAVER CS4 329
Composants
Valeurs renvoyées
Tableau d'objets ComponentRec.
Exemple
Voir la fonction getComponentChildren(componentRec) dans le fichier WebServices.js du dossier
Configuration/Components/Common/WebServices.
getContextMenuId()
Disponibilité
Dreamweaver MX.
Description
Renvoie l'ID du menu contextuel correspondant au type de composant. Chaque type de composant peut être associé
à un menu contextuel. Les menus déroulants du menu contextuel sont définis dans le fichier
ComponentNameMenus.xml. Ils fonctionnent de la même façon que le fichier menu.xml. Une chaîne de menu peut
être statique ou dynamique. Les raccourcis clavier (touches d'accès rapide) sont pris en charge.
Arguments
Aucun.
Valeurs renvoyées
Chaîne définissant l'ID du menu contextuel.
Exemple
L'exemple suivant définit le menu Options pour le panneau Composants des CFC associés au modèle de serveur Adobe
ColdFusion, ainsi que les raccourcis clavier du menu :
function getContextMenuId()
{
return "DWCFCsContext";
}
La section WWebServicesContext du menu est définie dans le fichier
Configuration/Components/ColdFusion/CFCs/CFCsMenus.xml comme suit :
EXTENSION DE DREAMWEAVER CS4 330
Composants
<menubar xmlns:MMString="http://www.macromedia.com/schemes/dat/string/" name=""
id="DWCFCsContext">
<menu MMString:name="Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs/menu/name"
id="DWContext_CFCs">
<menuitem
MMString:name="Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_createNewCFC/menuitem
/name" domRequired="false" enabled="true" command="createCFC()"
id="DWContext_CFCs_createNewCFC" />
<menuitem
MMString:name="Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_editCode/menuitem/nam
e" domRequired="false" enabled="canGetSelectedCFC()" command="editCFC();"
id="DWContext_CFCs_editCode" />
<separator/>
<menuitem
MMString:name="Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_getDetails/menuitem/n
ame" domRequired="false" enabled="canGetDetails()" command="getDetails()"
id="DWContext_CFCs_getDetails" />
<menuitem
MMString:name="Components/ColdFusion/CFCs/CFCsMenus_xml/DWContext_CFCs_getDescription/menuit
em/name" domRequired="false" enabled="canGetSelectedCFC()" command="getDescription()"
id="DWContext_CFCs_getDescription" />
<separator/>
<menuitem
MMString:name="Components/ASP_NET_Csharp/Connections/ConnectionsMenus_xml/DWShortcuts_Server
Component_Insert/menuitem/name" domRequired="false" enabled="insertCFCEnabled();"
command="clickedInsertCFC();" id="DWShortcuts_ServerComponent_Insert" />
</menu>
</menubar>
getCodeViewDropCode()
Disponibilité
Dreamweaver MX.
Description
Cette fonction obtient le code qui est tiré, coupé ou copié dans le mode Code à partir du panneau Composants.
Arguments
componentRec
• L'argument componentRec
est un objet.
Valeurs renvoyées
Chaîne contenant le code de ce composant.
Exemple
L'exemple suivant identifie le code d'un composant Adobe ColdFusion (CFC) :
EXTENSION DE DREAMWEAVER CS4 331
Composants
function getCodeVi e wDropCode(compone nt
Rec )
{
var codeToDrop="";
if (componentRec)
{
if (componentRec.objectType == "Connection")
{
v ar connPart = new Participant("d at asource_tag");
var paramObj = new Obje ct( );
paramObj.datasource = componentRec.name;
codeToDrop = con nPart.getInsertString(paramObj, "aboveHTML");}
el se if ((componentRec.objectType == "Column")| |
(componentRec.objectType == "Paramete r "))
{
c odeToDrop = componentRec.dropcode;
}
e ls e{
codeToDrop = co mponentRec.name;
}
}
return codeToDrop;
}
getSetupSteps()
Disponibilité
Dreamweaver MX.
Description
Dreamweaver appelle cette fonction si setupStepsCompleted() renvoie zéro ou un nombre entier positif. Cette
fonction contrôle les instructions de configuration côté serveur, qui peuvent être implémentées à l'aide d'extensions
basées sur une boîte de dialogue modale et sur des composants de serveur.
Cette fonction renvoie un tableau des chaînes que Dreamweaver affiche soit dans la boîte de dialogue des étapes de
configuration, soit dans le panneau Composants, selon le type d'extension.
Arguments
Aucun.
Valeurs renvoyées
Tableau de n+1 chaînes, n correspondant au nombre d'étapes, comme décrit dans la liste ci-dessous :
• Le titre qui apparaît au-dessus de la liste des étapes de configuration.
• Pour chaque étape, le texte des instructions, qui peut comprendre un balisage HTML, dès lors qu'il est valide au sein
d'une balise li.
Vous pouvez inclure des liens (balises a) dans la liste des étapes en utilisant la syntaxe ci-dessous :
<a href="#" onMouseDown="handler">Blue Underlined Text</a>
La valeur "handler" peut être remplacée par l'une des chaînes suivantes ou toute expression JavaScript telle que
"dw.browseDocument('http://www.adobe.com')" :
•
"Event:SetCurSite" ouvre une boîte de dialogue pour définir le site courant.
EXTENSION DE DREAMWEAVER CS4 332
Composants
•
"Event:CreateSite" ouvre une boîte de dialogue pour créer un nouveau site.
•
"Event:SetDocType" ouvre une boîte de dialogue pour modifier le type de document de l'utilisateur.
• Un gestionnaire "Event:CreateConnection" ouvre une boîte de dialogue pour créer une nouvelle connexion à
une base de données.
• Un gestionnaire "Event:SetRDSPassword" ouvre une boîte de dialogue pour définir le nom d'utilisateur et le mot
de passe du service RDS (Remote Development Service) (Adobe ColdFusion uniquement).
• Un gestionnaire "Event:CreateCFDataSource" ouvre l'administrateur Adobe ColdFusion dans un navigateur.
Exemple
L'exemple suivant définit quatre étapes pour les composants Adobe ColdFusion et fournit un lien hypertexte à la
quatrième é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 && dom.serverModel)
{
var aServerModelName = dom.serverModel.getDisplayName();
}
else
{
var aServerModelName = site.getServerDisplayNameForSite();
}
if (aServerModelName.length)
{
if(aServerModelName != "ColdFusion")
{
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é
Dreamweaver MX.
EXTENSION DE DREAMWEAVER CS4 333
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éro ou un entier positif.
Arguments
Aucun.
Valeurs renvoyées
Entier représentant le nombre d'étapes de configuration déjà effectuées par l'utilisateur, comme décrit dans la liste
suivante :
• La valeur zéro ou un nombre entier positif indique le nombre d'étapes déjà effectuées.
• La valeur -1 indique que toutes les étapes de configuration nécessaires ont été effectuées ; la liste d'instructions n'est
donc pas affichée.
handleDesignViewDrop()
Disponibilité
Dreamweaver MX.
Description
Gère l'opération de déplacement lorsque l'utilisateur fait glisser un tableau ou un mode du panneau Bases de données
ou un composant du panneau Composants vers le mode Création.
Arguments
componentRec
• L'argument componentRec est un objet qui comporte les propriétés suivantes :
• La propriété name correspond au nom de l'élément de nœud dans l'arborescence.
• La propriété
image est une icône facultative pour l'élément de nœud dans l'arborescence. Si cette icône est omise,
Dreamweaver MX utilise une icône par défaut.
• La propriété hasChildren est une valeur booléenne qui indique si l'élément de nœud d'arborescence peut être
développé : si elle a la valeur true, Dreamweaver MX affiche les boutons Plus (+) et Moins (-) pour cet élément
; si elle a la valeur false, l'élément ne peut pas être développé.
• La propriété toolTipText est le texte facultatif de l'infobulle associée à l'élément de nœud dans l'arborescence.
• La propriété isCodeViewDraggable est une valeur booléenne qui indique s'il est possible de glisser-déplacer
l'élément de nœud dans l'arborescence vers le mode Code.
• La propriété isDesignViewDraggable est une valeur booléenne qui indique s'il est possible de glisser-déplacer
l'élément de nœud dans l'arborescence vers le mode Création.
Valeurs renvoyées
Valeur booléenne qui indique si l'opération de déplacement a réussi : true en cas de réussite et false en cas d'échec.
Exemple
L'exemple suivant détermine si le composant est un tableau ou un mode et renvoie la valeur bHandled appropriée :
EXTENSION DE DREAMWEAVER CS4 334
Composants
function handleDesignViewDrop(componentRec)
{
var bHandled = false;
if (componentRec)
{
if ((componentRec.objectType == "Table")||
(componentRec.objectType == "View"))
{
alert("popup Recordset Server Behavior");
bHandled = true;
}
}
return bHandled;
}
handleDoubleClick()
Disponibilité
Dreamweaver MX.
Description
Lorsque l'utilisateur double-clique sur un nœud de l'arborescence, le gestionnaire d'événements est appelé 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'événements n'est pas défini. Dans ce cas, le fait de double-cliquer déclenche le
comportement par défaut, à savoir le développement ou la réduction des nœuds de l'arborescence.
Arguments
componentRec
• L'argument componentRec est un objet qui comporte les propriétés suivantes :
• La propriété
name est le nom de l'élément de nœud dans l'arborescence.
• La propriété
image est une icône facultative pour l'élément de nœud dans l'arborescence. Si cette icône est omise,
Dreamweaver utilise une icône par défaut.
• La propriété hasChildren est une valeur booléenne qui indique si l'élément de nœud d'arborescence peut être
développé : si elle a la valeur true, Dreamweaver affiche les boutons Plus (+) et Moins (-) pour cet élément ; si
elle a la valeur false, l'élément ne peut pas être développé.
• La propriété toolTipText est un texte d'infobulle facultatif pour l'élément de nœud dans l'arborescence.
• La propriété isCodeViewDraggable est une valeur booléenne qui indique s'il est possible de glisser-déplacer
l'élément de nœud dans l'arborescence vers le mode Code.
• La propriété isDesignViewDraggable est une valeur booléenne qui indique s'il est possible de glisser-déplacer
l'élément de nœud dans l'arborescence vers le mode Création.
Valeurs renvoyées
Aucune.
Exemple
Dans l'exemple suivant, l'extension est à même de gérer un double-clic sur l'élément de nœud dans l'arborescence ; si
la valeur false est renvoyée, le comportement par défaut consiste à développer/réduire les nœuds.
EXTENSION DE DREAMWEAVER CS4 335
Composants
function handleDoubleClick(componentRec)
{
var selectedObj = dw.serverComponentsPalette.getSelectedNode();
if(dwscripts.IS_WIN)
{
if (selectedObj && selectedObj.wsRec && selectedObj.wsRec[ProxyGeneratorNamePropName])
{
if (selectedObj.objectType == "Root")
{
editWebService();
return true;
}
else if (selectedObj.objectType == "MissingProxyGen")
{
displayMissingProxyGenMessage(componentRec);
editWebService();
return true;
}
}
}
return false;
}
toolbarControls()
Disponibilité
Dreamweaver MX.
Description
Chaque type de composant renvoie une liste d'objets toolBarButtonRec représentant les icônes de la barre d'outils,
de gauche à droite. Chaque objet toolBarButtonRec contient les propriétés suivantes :
Nom de la propriété
Description
image
Chemin d'accès au fichier d'image.
disabledImage
(Facultatif) Recherche de chemin d'accès à l'image désactivée correspondant au bouton de la barre d'outils.
pressedImage
(Facultatif) Recherche de chemin d'accès à l'image correspondant au bouton enfoncé dans la barre d'outils.
toolTipText
Infobulle du bouton dans la barre d'outils.
toolStyle
Gauche ou droite.
EXTENSION DE DREAMWEAVER CS4 336
Composants
Nom de la propriété
Description
enabled
Code JavaScript qui renvoie une valeur booléenne (true ou false). Les activateurs sont appelés si les
conditions suivantes sont remplies :
•
La fonction dreamweaver.serverComponents.refresh() est appelée.
•
La sélection dans l'arborescence change.
•
Le modèle de serveur change.
command
Code JavaScript à exé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éroulant lorsque l'utilisateur clique sur le bouton. Lorsque cet ID est
défini, il remplace le gestionnaire de commande. En d'autres termes, le bouton peut être soit associé à une
commande, soit à un bouton ayant un menu déroulant associé, mais pas aux deux à la fois.
Arguments
Aucun.
Valeurs renvoyées
Tableau des boutons de barre d'outils, de gauche à droite.
Exemple
Dans l'exemple suivant, des propriétés sont attribué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 && dom.serverModel)
{
aServerModelName = dom.serverModel.getDisplayName();
}
else
{
//look in the site for potential server model
aServerModelName = site.getServerDisplayNameForSite();
}
if (aServerModelName.length)
{
if(aServerModelName == "ColdFusion")
{
plusButton.image
= PLUS_BUTTON_UP;
plusButton.pressedImage
= PLUS_BUTTON_DOWN;
plusButton.disabledImage
= PLUS_BUTTON_UP;
plusButton.toolStyle
= "left";
plusButton.toolTipText
= MM.MSG_WebServicesAddToolTipText;
plusButton.enabled
= "dwscripts.IS_WIN";
plusButton.command
= "invokeWebService()";
}
else
{
plusButton.image
= PLUSDROPBUTTONUP;
EXTENSION DE DREAMWEAVER CS4 337
Composants
plusButton.pressedImage
plusButton.disabledImage
plusButton.toolStyle
plusButton.toolTipText
plusButton.enabled
plusButton.menuId
=
=
=
=
=
=
PLUSDROPBUTTONDOWN;
PLUSDROPBUTTONUP;
"left";
MM.MSG_WebServicesAddToolTipText;
"dwscripts.IS_WIN";
"DWWebServicesChoosersContext";
}
toolBarBtnArray.push(plusButton);
var minusButton
= new ToolbarControlRec();
minusButton.image
= MINUSBUTTONUP;
minusButton.pressedImage
= MINUSBUTTONDOWN;
minusButton.disabledImage = MINUSBUTTONDISABLED;
minusButton.toolStyle
= "left";
minusButton.toolTipText
= MM.MSG_WebServicesDeleteToolTipText;
minusButton.command
= "clickedDelete()";
minusButton.enabled = "(dw.serverComponentsPalette.getSelectedNode() != null &&
dw.serverComponentsPalette.getSelectedNode() &&
((dw.serverComponentsPalette.getSelectedNode().objectType=='Root') ||
(dw.serverComponentsPalette.getSelectedNode().objectType == 'Error') ||
(dw.serverComponentsPalette.getSelectedNode().objectType ==
'MissingProxyGen')))";
toolBarBtnArray.push(minusButton);
if(aServerModelName != null && aServerModelName.indexOf(".NET") >= 0)
{
var deployWServiceButton
= new ToolbarControlRec();
deployWServiceButton.image
= DEPLOYSUPPORTBUTTONUP;
deployWServiceButton.pressedImage = DEPLOYSUPPORTBUTTONDOWN;
deployWServiceButton.disabledImage = DEPLOYSUPPORTBUTTONUP;
deployWServiceButton.toolStyle
= "right";
deployWServiceButton.toolTipText
= MM.MSG_WebServicesDeployToolTipText;
deployWServiceButton.command = "site.showTestingServerBinDeployDialog()";
deployWServiceButton.enabled = true;
toolBarBtnArray.push(deployWServiceButton);
}
//add the rebuild proxy button for windows only.
//bug 45552:
if(navigator.platform.charAt(0) !="M")
{
var proxyButton
= new ToolbarControlRec();
proxyButton.image
= PROXYBUTTONUP;
proxyButton.pressedImage
= PROXYBUTTONDOWN;
proxyButton.disabledImage = PROXYBUTTONDISABLED;
proxyButton.toolStyle
= "right";
proxyButton.toolTipText
= MM.MSG_WebServicesRegenToolTipText;
proxyButton.command
= "reGenerateProxy()";
proxyButton.enabled
= "enableRegenerateProxyButton()";
toolBarBtnArray.push(proxyButton);
}
}
return toolBarBtnArray;
}
338
Chapitre 21 : Modèles de serveur
Les modèles de serveur sont les technologies qui permettent d'exécuter des scripts sur un serveur. Lorsqu'ils définissent
un nouveau site, les utilisateurs peuvent indiquer le modèle de serveur qu'ils souhaitent utiliser au niveau du site et au
niveau du document. Ce modèle de serveur gère tous les éléments dynamiques que l'utilisateur ajoute au document.
Les fichiers de configuration des modèles de serveur sont stockés dans le dossier Configuration/ServerModels. Chaque
modèle de serveur dispose, au sein de ce dossier, d'un fichier HTML particulier qui implémente l'ensemble des
fonctions requises.
Personnalisation des modèles de serveur
Vous pouvez personnaliser certaines des fonctionnalités d'un modèle de serveur en utilisant les fonctions disponibles
dans l'API des modèles de serveur.
Lorsqu'ils démarrent Adobe Dreamweaver pour la première fois, les nouveaux utilisateurs sont invités à indiquer les
modèles de serveur qu'ils souhaitent utiliser. Pour les cas où l'utilisateur n'indique aucun modèle de serveur, vous
pouvez créer une boîte de dialogue dynamique l'invitant à suivre les étapes nécessaires. Cette boîte de dialogue
apparaîtra lorsque l'utilisateur essaiera d'insérer un objet de serveur. Pour plus d'informations sur la création de cette
boîte de dialogue, voir les fonctions « getSetupSteps() » à la page 331 et « setupStepsCompleted() » à la page 332.
Vous pouvez décider de créer un modèle de serveur spécialisé. Adobe vous conseille de créer un modèle de serveur
entièrement nouveau plutôt que de modifier l'un de ceux fournis avec Dreamweaver. Pour plus d'informations sur la
création de nouveaux types de documents pris en charge par un modèle de serveur, voir « Types de documents
extensibles dans Dreamweaver » à la page 14.
Lorsque vous créez un modèle de serveur, vous devez implémenter la fonction canRecognizeDocument() dans votre
fichier de modèle de serveur. Cette fonction indique à Dreamweaver le niveau de priorité qu'il doit attribuer au modèle
de serveur en matière de gestion des extensions de fichier lorsque plusieurs modèles de serveur revendiquent une
extension précise.
Fonctions de l'API des modèles de serveur
Cette section décrit les fonctions qui permettent de configurer les modèles de serveur pour Dreamweaver.
canRecognizeDocument()
Disponibilité
Dreamweaver MX.
Description
Lors de l'ouverture d'un document (et lorsque plusieurs modèles de serveur revendiquent une extension de fichier),
Dreamweaver appelle cette fonction pour chacun des modèles de serveur associés à l'extension afin de voir si l'une des
fonctions peut établir que le document lui appartient. Si plusieurs modèles de serveur revendiquent l'extension de
fichier, Dreamweaver accorde la priorité à celui renvoyant le nombre entier le plus élevé.
EXTENSION DE DREAMWEAVER CS4 339
Modèles de serveur
Remarque : Dans la mesure où tous les modèles de serveur de Dreamweaver renvoient la valeur 1, les modèles de serveur
tiers peuvent avoir la priorité au niveau d'une extension de fichier.
Arguments
dom
L'argument dom correspond à l'objet de document Adobe, renvoyé par la fonction
dreamweaver.getDocumentDOM().
Valeurs renvoyées
Dreamweaver attend un nombre entier indiquant la priorité que vous accordez au modèle de serveur pour l'extension
de fichier. Cette fonction doit renvoyer la valeur -1 si le modèle de serveur ne revendique pas l'extension de fichier;
dans les autres cas de figure, elle doit renvoyer une valeur supérieure à zéro.
Exemple
Dans l'exemple suivant, si l'utilisateur ouvre un document JavaScript pour le modèle de serveur en cours, le code
renvoie la valeur 2. Cette valeur permet au modèle de serveur courant d'être prioritaire sur le modèle de serveur par
défaut de Dreamweaver.
var retVal = -1;
var langRE = /@\s*language\s*=\s*(\"|\')?javascript(\"|\')?/i;
// Search for the string language="javascript"
var oHTML = dom.documentElement.outerHTML;
if (oHTML.search(langRE) > -1)
retVal = 2;
return retVal;
getFileExtensions()
Disponibilité
Dreamweaver UltraDev 1, déconseillée dans Dreamweaver MX.
Description
Renvoie les extensions de fichier compatibles avec un modèle de serveur. Par exemple, le modèle de serveur ASP prend
en charge les extensions de fichier.asp et.htm. Cette fonction renvoie un tableau de chaînes ; Dreamweaver utilise ces
chaînes pour compléter la liste Extension de page par défaut figurant dans la catégorie Serveur d'application de la boîte
de dialogue Définition du site.
Remarque : La liste Extension de page par défaut n'existe que dans Dreamweaver version 4 ou antérieure. Dans
Dreamweaver MX et les versions ultérieures, la boîte de dialogue Définition du site ne répertorie pas les paramètres
relatifs aux extensions de fichier. Au lieu de cela, Dreamweaver lit le fichier Extensions.txt et analyse l'élément dans le
fichier mmDocumentTypes.xml. Pour plus d'informations sur ces deux fichiers et l'élément documenttype, voir « Types
de documents extensibles dans Dreamweaver » à la page 14.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau de chaînes représentant les extensions de fichier autorisées.
EXTENSION DE DREAMWEAVER CS4 340
Modèles de serveur
getLanguageSignatures()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie un objet qui décrit la méthode et les signatures de tableau utilisées par le langage de script. La
fonction getLanguageSignatures() permet d'associer des mappages de signatures génériques à des mappages
spécifiques au langage pour les éléments suivants :
• Fonction
• Constructeurs
• Code de dépôt (valeurs renvoyées)
• Tableaux
• Exceptions
• Mappages des types de données pour les types de données primitifs
La fonction getLanguageSignatures() renvoie une table de mappage des déclarations de signature. Les
développeurs d'extensions peuvent se servir de cette table de mappage pour produire des blocs de code spécifiques au
langage que Dreamweaver place dans la page (en se basant sur le modèle de serveur adapté à la page) lorsqu'un
utilisateur effectue un glisser-déplacer sur une méthode relative à des services Web, par exemple.
Pour obtenir des exemples de rédaction de cette fonction, voir les fichiers d'implémentation HTML des modèles de
serveur JSP et ASP.Net. Les fichiers d'implémentation des modèles de serveur se trouvent dans le dossier
Configuration/ServerModels.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un objet définissant les signatures du langage de script. Cet objet doit mapper les signatures
génériques à celles spécifiques au langage.
getServerExtension()
Disponibilité
Dreamweaver UltraDev 4, déconseillée dans Dreamweaver MX.
Description
Cette fonction renvoie l'extension par défaut des fichiers exploitant le modèle de serveur en cours. L'objet
serverModel est défini sur le modèle de serveur du site sélectionné si aucun document utilisateur n'est sélectionné.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne représentant les extensions de fichier prises en charge.
EXTENSION DE DREAMWEAVER CS4 341
Modèles de serveur
getServerInfo()
Disponibilité
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étés spécifiques, également accessibles au moyen des fonctions JavaScript suivantes :
dom.serverModel.getServerName()
dom.serverModel.getServerLanguage()
dom.serverModel.getServerVersion()
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un objet contenant les propriétés du modèle de serveur.
Exemple
var obj = new Object();
obj.serverName = "ASP";
obj.serverLanguage = "JavaScript";
obj.serverVersion = "2.0";
...
return obj;
getServerLanguages()
Disponibilité
Dreamweaver UltraDev 1, déconseillée dans Dreamweaver MX.
Description
Cette fonction renvoie les langages de script pris en charge d'un modèle de serveur avec un tableau de chaînes.
Dreamweaver utilise ces chaînes pour compléter la liste Langage de script par défaut figurant dans la catégorie Serveur
d'application de la boîte de dialogue Définition du site.
Remarque : La liste Langage de script par défaut existe uniquement dans Dreamweaver 4 et les antérieures. Dans
Dreamweaver MX et les versions ultérieures, la boîte de dialogue Définition du site ne répertorie pas les langages de script
pris en charge et la fonction getServerLanguages() n'est pas utilisée. La raison pour laquelle la version MX de
Dreamweaver n'utilise pas cette fonction est que chaque modèle de serveur ne dispose dans cette version du programme
que d'un seul langage de serveur.
Dans les versions antérieures de Dreamweaver, un modèle de serveur pouvait prendre en charge plusieurs langages de
script ; le modèle de serveur ASP, par exemple, prend en charge JavaScript et VBScript.
Si vous souhaitez qu'un fichier du dossier ServerFormats s'applique uniquement à un langage de script spécifique,
ajoutez l'instruction suivante de manière à ce qu'elle figure sur la première ligne du fichier HTML :
<!-- SCRIPTING-LANGUAGE=XXX -->
EXTENSION DE DREAMWEAVER CS4 342
Modèles de serveur
Dans cet exemple, XXX représente le langage de script. Cette instruction génère l'apparition du comportement de
serveur dans le menu Plus (+) du panneau Comportements de serveur uniquement lorsque le langage de script
sélectionné est XXX.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau de chaînes représentant les langages de script pris en charge.
getServerModelExtDataNameUD4()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie le nom de l'implémentation du modèle de serveur que Dreamweaver doit utiliser lorsqu'il
accède à des fichiers de données d'extension UltraDev4, qui résident dans le dossier Configurations/ExtensionData.
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne, telle que "ASP/JavaScript".
getServerModelDelimiters()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie les délimiteurs de scripts que le serveur d'application utilise et indique si chaque délimiteur peut
participer à la fusion des blocs de code. Vous pouvez accéder à la valeur renvoyée depuis le code JavaScript, en appelant
la fonction dom.serverModel.getDelimiters().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets dans lequel chaque objet comporte les trois propriétés suivantes :
• La propriété startPattern est une expression régulière qui correspond au délimiteur d'ouverture du script (tel que <%).
• La propriété endPattern est une expression régulière qui correspond au délimiteur de fermeture du script (tel que %>).
• La propriété participateInMerge est une valeur booléenne qui indique si le contenu entouré des délimiteurs utilisés
doit (true) ou non (false) prendre part à la fusion de blocs.
EXTENSION DE DREAMWEAVER CS4 343
Modèles de serveur
getServerModelDisplayName()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie le nom qui doit s'afficher dans l'interface utilisateur pour le modèle de serveur. Vous pouvez
accéder à cette valeur depuis le code JavaScript, en appelant la fonction dom.serverModel.getDisplayName().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne, telle que "ASP JavaScript".
getServerModelFolderName()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie le nom du dossier à utiliser pour le modèle de serveur dans le dossier Configuration. Vous
pouvez accéder à cette valeur depuis le code JavaScript, en appelant la fonction
dom.serverModel.getFolderName().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend une chaîne, telle que "ASP_JS".
getServerSupportsCharset()
Disponibilité
Dreamweaver MX.
Description
Cette fonction renvoie une valeur true si le serveur en cours prend en charge le jeu de caractères spécifié. Dans
JavaScript, vous pouvez déterminer si le modèle de serveur prend en charge un jeu de caractères donné en appelant la
fonction dom.serverModel.getServerSupportsCharset().
Arguments
metaCharSetString
L'argument metaCharSetString est une chaîne qui stocke la valeur de l'attribut "charset=" des documents.
EXTENSION DE DREAMWEAVER CS4 344
Modèles de serveur
Valeurs renvoyées
Dreamweaver attend une valeur booléenne.
getVersionArray()
Disponibilité
Dreamweaver UltraDev 1, déconseillée dans Dreamweaver MX.
Description
Cette fonction extrait le mappage de technologies de serveur et de numéros de version. Cette fonction est appelée par
dom.serverModel.getServerVersion().
Arguments
Aucun.
Valeurs renvoyées
Dreamweaver attend un tableau d'objets de version, chacun étant doté d'un nom et d'une valeur, comme indiqué dans
les exemples suivants :
•
ASP version 2.0
•
ADODB version 2.1
345
Chapitre 22 : Traducteurs de données
Les traducteurs de données traduisent les marques spécialisées en code qu'Adobe Dreamweaver peut lire et afficher.
Parmi les marques spécialisées, citons les inclusions côté 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ères ou des blocs de code. Tous les traducteurs de données (blocs/balises ou attributs)
sont des fichiers HTML.
Il peut arriver que la traduction de données implique des opérations complexes qui ne peuvent pas être exécutées à
l'aide de JavaScript ou qui peuvent l'être de maniè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 également le guide « Extensions C » à la page 364.
Le tableau ci-dessous recense les fichiers utilisés pour créer un traducteur de données.
Chemin
Fichier
Description
Configuration/ThirdPartyTags/
langage.xml
Contient des informations sur les balises dans le
langage de marquage.
Configuration/ThirdPartyTags/
langage.gif
Icônes des balises dans le langage.
Configuration/Translators/
langage.htm
Contient des fonctions JavaScript associées au
traducteur de données.
Fonctionnement des traducteurs de données
Dreamweaver traite tous les fichiers de traducteur de la même façon, qu'ils convertissent des balises entières ou
uniquement des attributs. Au dé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êchant de la définir.
Remarque : Pour éviter que des erreurs JavaScript n'affectent le démarrage, les erreurs détectées dans un fichier de
traducteur ne sont signalées qu'après le chargement de tous les traducteurs. Pour plus d'informations sur le débogage de
traducteurs, voir « Recherche de bogues dans le traducteur » à la page 352.
Dreamweaver appelle également la fonction translateMarkup() dans tous les fichiers de traducteur appropriés
(comme indiqué dans les préfé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érations suivantes :
• Ouverture d'un fichier dans Dreamweaver
• Retour au mode Création après avoir effectué des modifications dans le panneau HTML ou le mode Code
• Modification des propriétés d'un objet dans le document actif
• Insertion d'un objet (à l'aide de la barre ou du menu Insertion)
• Actualisation du document actif après sa modification dans une autre application
• Application d'un modèle au document
• Collage ou déplacement d'un contenu vers ou à l'intérieur de la fenêtre de document
EXTENSION DE DREAMWEAVER CS4 346
Traducteurs de données
• Enregistrement des modifications dans un fichier dépendant
• Appel d'une commande, d'un comportement, d'un comportement de serveur, d'un inspecteur Propriétés ou de
toute autre extension qui définit la propriété innerHTML ou outerHTML d'un objet de balise ou la propriété data
d'un objet de commentaire
• Sélection de Fichier > Convertir > Format compatible avec les navigateurs 3.0
• Sélection de Modifier > Convertir > Conversion des tableaux en divs PA
• Sélection de Modifier > Convertir > 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ée
Détermination du type de traducteur à utiliser
Tous les traducteurs doivent contenir les fonctions getTranslatorInfo() et translateMarkup() et doivent résider
dans le dossier Configuration/Translators. Ils se distinguent toutefois par le type de code qu'ils insèrent dans le
document de l'utilisateur et par la façon dont ce code doit être contrôlé, comme indiqué dans la liste suivante :
• Pour traduire de petites parties de balises serveur qui déterminent des valeurs d'attribut ou ajoutent
conditionnellement des attributs à une balise HTML standard, vous devez écrire un traducteur d'attributs. Les
balises HTML standard contenant des attributs traduits peuvent être contrôlées à l'aide des inspecteurs Propriétés
intégrés à Dreamweaver. Il n'est pas nécessaire d'écrire un inspecteur Propriétés personnalisé (voir « Ajout d'un
attribut traduit à une balise » à la page 346).
• Pour traduire une balise entière (une inclusion côté serveur, par exemple) ou un bloc de code (JavaScript,
ColdFusion, PHP ou tout autre script), vous devez écrire un traducteur de blocs/balises. Le code généré par un
traducteur de blocs/balises ne peut pas être contrôlé à l'aide des inspecteurs Propriétés intégrés à Dreamweaver.
Vous devez rédiger un inspecteur personnalisé pour le contenu traduit si vous souhaitez que les utilisateurs
puissent modifier les propriétés du code d'origine (voir « Verrouillage des balises ou des blocs de code traduits » à
la page 348).
Ajout d'un attribut traduit à une balise
La traduction des attributs est liée à la capacité de l'analyseur Dreamweaver à ignorer le balisage de serveur. Par défaut,
Dreamweaver ignore déjà 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ébut et de fin sont différents, vous devez modifier la base de
données de balises tierces pour assurer le bon fonctionnement de votre traducteur. Pour plus d'informations sur la
façon de modifier la base de données de balises propriétaires, voir « Personnalisation de Dreamweaver » dans
Utilisation de Dreamweaver.
Lorsque Dreamweaver gère la conservation du balisage de serveur d'origine, le traducteur génère une valeur d'attribut
valide qui s'affiche dans la fenê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ée une valeur d'attribut ayant un effet visible dans la fenêtre de document en ajoutant un attribut
spécial, mmTranslatedValue, à 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és avec le document.
EXTENSION DE DREAMWEAVER CS4 347
Traducteurs de données
L'attribut mmTranslatedValue doit être unique à l'intérieur de la balise. S'il est probable que le traducteur devra
traduire plusieurs attributs dans une même balise, ajoutez-lui une routine qui ajoute des numéros à l'attribut
mmTranslatedValue (par exemple, mmTranslatedValue1, mmTranslatedValue2, etc.).
La valeur de l'attribut mmTranslatedValue doit être une chaîne codée en URL contenant au moins une paire
attribut/valeur valide. Cela signifie que mmTranslatedValue="src=%22open.jpg%22" est une traduction valide pour
src="<? if (dayType == weekday) then open.jpg else closed.jpg" ?> et <? if (dayType == weekday)
then src="open.jpg" else src="closed.jpg" ?>. Comme mmTranslatedValue="%22open.jpg%22" ne
contient que la valeur, et pas l'attribut, il n'est valide pour aucun des exemples.
Traduction de plusieurs attributs à la fois
L'attribut mmTranslatedValue peut contenir plusieurs paires attribut/valeur valides. Examinez le code non traduit
suivant :
<img <? if (dayType==weekday) then src="open.jpg" width="320" height="100" else
src="closed.jpg" width="100" height="320" ?> alt="We're open 24 hours a day from
12:01am Monday until 11:59pm Friday">
L'exemple suivant indique comment se présente le balisage après traduction :
<img <? if (dayType==weekday) then src="open.jpg" width="320" height="100" else
src="closed.jpg" width="100" height="320" ?>
mmTranslatedValue="src=%22open.jpg%22 width=%22320%22 height=%22100%22"
alt="We're open 24 hours a day from 12:01am Monday until 11:59pm Friday">
Les espaces entre les paires attribut/valeur dans l'attribut mmTranslatedValue ne sont pas codés. Etant donné que
Dreamweaver recherche ces espaces lorsqu'il essaie de restituer la valeur traduite, chaque paire attribut/valeur de
l'attribut mmTranslatedValue doit être codée séparément, puis toutes les paires doivent être de nouveau regroupées
pour former l'ensemble de l'attribut mmTranslatedValue. Vous trouverez un exemple de ce processus dans la section
« Exemple de traducteur d'attributs simple » à la page 353.
Inspection des attributs traduits
Les attributs traduits ne né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ésenté dans un inspecteur Propriétés,
Dreamweaver l'affiche dans l'inspecteur Propriétés.
Le balisage s'affiche, qu'il soit associé ou non à un traducteur. Le traducteur s'exécute chaque fois que l'utilisateur
modifie le balisage de serveur indiqué dans l'inspecteur Propriétés.
Lorsque le balisage de serveur contrôle plusieurs attributs dans une balise, il n'apparaît pas dans l'inspecteur Propriétés.
Toutefois, l'éclair indique qu'il existe un balisage traduit pour l'élément sélectionné.
Remarque : L'icône en forme d'éclair n'apparaît pas lorsque du texte ou des cellules, des lignes ou des colonnes de tableau
sont sélectionné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étés sont modifiables. Les utilisateurs peuvent entrer des valeurs pour les
attributs contrôlés par le balisage de serveur. Il en résulte des attributs en double. Si une valeur traduite et une valeur
ordinaire sont toutes deux définies pour un attribut précis, Dreamweaver affiche la valeur traduite dans la fenêtre
Document, décide si votre traducteur recherche les attributs en double et les supprime.
EXTENSION DE DREAMWEAVER CS4 348
Traducteurs de données
Verrouillage des balises ou des blocs de code traduits
En règle générale, vous attendez d'un traducteur qu'il modifie le balisage de façon à 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é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 écrit dans le fichier. Le contenu non traduit est ce qui apparaît
en mode Code.
La syntaxe des balises XML est indiquée dans l'exemple suivant :
<MM:BeginLock translatorClass="translatorClass" ¬
type="tagNameOrType" depFiles="dependentFilesList" ¬
orig="encodedOriginalMarkup">
Translated content
<MM:EndLock>
Dans cet exemple, les valeurs ont la signification suivante :
• La valeur translatorClass correspond à l'identificateur unique pour le traducteur. C'est la première chaîne du
tableau que renvoie la fonction getTranslatorInfo().
• La valeur tagNameOrType est une chaîne qui identifie le type de balisage (ou le nom de balise associé) du contenu
verrouillé. Cette chaîne ne peut contenir que des caractères alphanumériques, des traits d'union (-) ou des
caractères de soulignement (_). Vous pouvez vérifier cette valeur dans la fonction canInspectSelection() d'un
inspecteur Propriétés personnalisé pour déterminer si cet inspecteur est adapté au contenu. Pour plus
d'informations, voir « Création d'inspecteurs Propriétés pour du contenu verrouillé » à la page 349. Un contenu
verrouillé ne peut pas être contrôlé par les inspecteurs Propriétés intégrés de Dreamweaver. Par exemple, la
spécification de type="IMG" n'entraîne pas l'affichage de l'inspecteur d'images.
• La valeur dependentFilesList est une chaîne qui contient une liste de fichiers séparés par des virgules dont dépend
le balisage verrouillé. Les fichiers sont référencés sous la forme d'URL relatives au document de l'utilisateur. Si
l'utilisateur met à 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îne qui contient le balisage d'origine non traduit et codé à l'aide d'un
extrait de code URL (utilisez %22 pour ", %3C pour <, %3E pour > et %25 pour %). La façon la plus rapide de coder
une chaîne en URL consiste à utiliser la méthode escape(). Par exemple, si myString est égal à '<img
src="foo.gif">', escape(myString) renvoie %3Cimg%20src=%22foo.gif%22%3E.
L'exemple suivant montre la partie de code verrouillée pouvant être générée à partir de la traduction de l'inclusion côté
serveur <!--#include virtual="/footer.html" --> :
EXTENSION DE DREAMWEAVER CS4 349
Traducteurs de données
<MM:BeginLock translatorClass="MM_SSI" type="ssi" ¬
depFiles="C:\sites\webdev\footer.html" orig="%3C!--#include ¬
virtual=%22/footer.html%22%20--%3E">
<!-- begin footer -->
<CENTER>
<HR SIZE=1 NOSHADE WIDTH=100%>
<BR>
[<A TARGET="_top" HREF="/">home</A>]
[<A TARGET="_top" HREF="/products/">products</A>]
[<A TARGET="_top" HREF="/services/">services</A>]
[<A TARGET="_top" HREF="/support/">support</A>]
[<A TARGET="_top" HREF="/company/">about us</A>]
[<A TARGET="_top" HREF="/help/">help</A>]
</CENTER>
<!-- end footer -->
<MM:EndLock>
La création d'un traducteur qui verrouille du code dans une balise script risque de provoquer un échec. Par exemple,
considérons le code suivant :
<script language="javascript">
<!-function foo() {
alert('<bean:message key="show.message"/>');
}
// -->
</script>
Créez ensuite un traducteur pour la balise bean:message. Dans ce cas, le traducteur échoue, car vous créez une section
MM:BeginLock au sein d'une autre section MM:BeginLock. Une solution de contournement consiste à créer une
enveloppe JSP autour de la balise bean:message qui utilise plusieurs balises JSP standard, telles que <%=
My_lookup.lookup("show.message") %>. Dans ce cas, le traducteur ignore ce code et la traduction aboutit.
Création d'inspecteurs Propriétés pour du contenu
verrouillé
Une fois que vous avez créé un traducteur, vous devez créer un inspecteur Propriétés pour le contenu afin de permettre
à l'utilisateur d'en modifier les propriétés (le fichier à inclure ou l'une des conditions d'une instruction conditionnelle,
par exemple). Le contrôle d'un contenu traduit pose un problème particulier pour les raisons suivantes :
• L'utilisateur peut décider de modifier les propriétés du contenu traduit. Dans ce cas, ces modifications doivent être
répercutées dans le contenu non traduit.
• Le DOM (modè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été 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ôlez sont différentes avant et après la traduction.
Un commentaire de l'inspecteur Propriétés pour la balise HAPPY non traduite peut ressembler, par exemple, au code
suivant :
EXTENSION DE DREAMWEAVER CS4 350
Traducteurs de données
<!-- tag:HAPPY,priority:5,selection:exact,hline,vline, attrName:xxx,¬ attrValue:yyy -->
Par contre, un commentaire de ce même inspecteur Propriétés pour la balise HAPPY traduite ressemblerait au code
suivant :
<!-- tag:*LOCKED*,priority:5,selection:within,hline,vline -->
La fonction canInspectSelection() de l'inspecteur Propriétés HAPPY non traduit est simple. Le type selection
correspondant à exact, elle peut renvoyer la valeur true sans autre analyse. Pour l'inspecteur Propriétés de la balise
HAPPY traduite, cette fonction est plus complexe. Le mot clé *LOCKED* indique que l'inspecteur est approprié
lorsque la sélection se trouve à l'intérieur d'une région verrouillée, mais comme un document peut comporter
plusieurs régions verrouillées, des vérifications supplémentaires sont nécessaires pour déterminer si l'inspecteur
correspond à cette région précise.
Le contrôle d'un contenu traduit présente un problème supplémentaire. Lorsque vous appelez la fonction
dom.getSelection(), les valeurs renvoyées par défaut sont des décalages dans la source non traduite. Pour
étendre la sélection de façon à sélectionner uniquement la région verrouillée, utilisez la mé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ème argument permet de vous assurer que vous restez dans les limites
de la balise de verrouillage de début lorsque vous traduisez les décalages d'octets en nœud. Si vous utilisez
offsets[1] comme deuxième argument, vous risquez de sélectionner le nœud situé au-dessus du verrou.
Une fois la sélection effectuée et après vous être assuré que nodeType est réglé sur node.ELEMENT_NODE), vous
pouvez contrôler l'attribut type pour vérifier que la région verrouillée correspond à cet inspecteur Propriétés,
comme indiqué dans l'exemple suivant :
if (theSelection.nodeType == node.ELEMENT_NODE && ¬
theSelection.getAttribute('type') == 'happy'){
return true;
}else{
return false
}
Pour renseigner les zones de texte de l'inspecteur Propriétés pour la balise traduite, vous devez analyser la valeur de
l'attribut orig. Par exemple, si le code non traduit est <HAPPY TIME="22"> et que l'inspecteur Propriétés contient
une zone de texte Time, vous devez extraire la valeur de l'attribut TIME de la chaîne orig :
EXTENSION DE DREAMWEAVER CS4 351
Traducteurs de donné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("ORIG"));
// Convert the string to lowercase for processing
var origAttLC = origAtt.toLowerCase();
var timeStart = origAttLC.indexOf('time="');
var timeEnd = origAttLC.indexOf('"',timeStart+6);
var timeValue = origAtt.substring(timeStart+6,timeEnd);
document.layers['timelayer'].document.timeForm.timefield.value = timeValue;
}
Après avoir analysé l'attribut orig en vue de renseigner les zones de texte de l'inspecteur Propriétés pour la balise
traduite, vous devrez probablement dé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égion
verrouillée. Vous pouvez contourner ce problème en modifiant le balisage d'origine puis en procédant à une
nouvelle traduction.
L'inspecteur Propriétés des SSI traduites (fichier ssi_translated.js du dossier Configuration/Inspectors) démontre
cette technique avec sa fonction setComment(). Au lieu de réécrire l'attribut orig, l'inspecteur assemble un
nouveau commentaire de SSI. Il insère ce commentaire dans le document, remplaçant l'ancien en réécrivant le
contenu du document, ce qui génère un nouvel attribut orig. Le code suivant résume cette technique :
// Assemble the new include comment. radioStr and URL are
// variables defined earlier in the code.
newInc = "<!--#include " + radioStr + "=" + '"' + URL + '"' + " -->";
// 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);
EXTENSION DE DREAMWEAVER CS4 352
Traducteurs de données
Recherche de bogues dans le traducteur
Si la fonction translateMarkup() contient certains types d'erreur, le traducteur se charge correctement, mais il
échoue sans afficher de message d'erreur si vous essayer de l'appeler. Bien que cette panne discrète empêche
Dreamweaver de devenir instable, elle peut ralentir le développement, surtout lorsque vous devez rechercher une
erreur de syntaxe mineure dans plusieurs lignes de code.
Si l'exécution du traducteur échoue, une méthode de débogage efficace consiste à convertir le traducteur en
commande, en procé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ébut du document, entre les balises SCRIPT, ajoutez la fonction suivante :
function commandButtons(){
return new Array( "OK","translateMarkup(dreamweaver.¬
getDocumentPath('document'), dreamweaver.getSiteRoot(), ¬
dreamweaver.getDocumentDOM().documentElement.outerHTML); ¬
window.close()", "Cancel", "window.close()");
}
3 A la fin de la fonction translateMarkup(), appliquez un commentaire à la ligne
returnsuivieParUneValeurQuelconque et remplacez-la par
dreamweaver.getDocumentDOM().documentElement.outerHTML = suivieParUneValeurQuelconque,
comme indiqué 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 :
<body>
<form>
Hello.
</form>
</body>
5 Redémarrez Dreamweaver, puis sélectionnez la commande relative à votre traducteur dans le menu Commandes.
Lorsque vous cliquez sur OK, la fonction translateMarkup() est appelée et simule une traduction.
Si aucun message d'erreur ne s'affiche et que la traduction continue d'échouer, il est probable que votre code
contienne une erreur de logique.
6 Ajoutez des instructions alert() à des points stratégiques de la fonction translateMarkup() de façon à vous
assurer que vous touchez les ramifications appropriées et à vérifier les valeurs des variables et des propriétés à des
points différents :
for (var i=0; i< foo.length; i++){
alert("we're at the top of foo.length array, and the value of i is " + i);
/* rest of loop */
}
7 Une fois les instructions alert() ajoutées, choisissez votre commande dans le menu Commandes, cliquez sur
Annuler, puis choisissez-la de nouveau. Cette opération recharge le fichier de commandes en intégrant vos
modifications.
EXTENSION DE DREAMWEAVER CS4 353
Traducteurs de données
Exemple de traducteur d'attributs simple
Pour mieux comprendre le principe de la traduction d'attributs, il peut être utile d'examiner un exemple. Le traducteur
suivant est un balisage Poco (Pound Conditional), une syntaxe quelque peu similaire à ASP ou PHP.
Pour créer le traducteur d'attribut, créez une balise tagspec, une icône et un traducteur d'attribut.
Création de la balise tagspec
La première étape pour assurer le bon fonctionnement de ce traducteur consiste à créer une balise tagspec pour le
balisage Poco afin d'éviter que Dreamweaver n'analyse les instructions Poco non traduites.
1 Créez un document vierge.
2 Entrez le code suivant :
<tagspec tag_name="poco" start_string="<#" end_string="#>" ¬
detect_in_attribute="true" icon="poco.gif" icon_width="17" ¬
icon_height="15"></tagspec>
3 Enregistrez le fichier sous le nom poco.xml dans le dossier Configuration/ThirdPartyTags.
Pour obtenir un exemple de création de la balise tagspec, consultez le fichier Tags.xml dans le dossier
Configuration/ThirdPartyTags.
Création de l'icône
Créez ensuite l'icône associée aux balises Poco.
1 Créez un fichier d'image de 18 x 18 pixels pour l'icône des balises Poco.
2 Enregistrez le fichier sous le nom poco.gif dans le dossier Configuration/ThirdPartyTags.
Création du traducteur d'attributs
Créez un fichier HTML contenant les fonctions requises pour le traducteur d'attributs.
1 Créez un document vierge.
2 Entrez le code suivant :
EXTENSION DE DREAMWEAVER CS4 354
Traducteurs de données
<html>
<head>
<title>Conditional Translator</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<script language="JavaScript">
/*************************************************************
* This translator handles the following statement syntaxes: *
* <# if (condition) then foo else bar #>
*
* <# if (condition) then att="foo" else att="bar" #>
*
* <# if (condition) then att1="foo" att2="jinkies"
*
* att3="jeepers" else att1="bar" att2="zoinks" #>
*
*
*
* 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 = "";
// String to manage space between encoded attributes
var start = inStr.indexOf('<# 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 <#, 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 <#
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 <# conditional that hasn't been
// translated.
while (start != -1){
back3FromStart = start-3;
EXTENSION DE DREAMWEAVER CS4 355
Traducteurs de données
end = outStr.indexOf(' #>',start);
equalSign = outStr.indexOf('="<# 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 > 0; i--){
if (outStr.charAt(i) == " "){
attName = outStr.substring(i+1,equalSign);
break;
}
}
transValue = attName + '="' + trueValue + '"';
transAtt = ' mmTranslatedValue' + count + '="' + ¬
escape(transValue) + '"';
outStr = outStr.substring(0,end+4) + transAtt + ¬
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 > 1){
transAtt = ' mmTranslatedValue' + count + '="'
for (var j=0; j < tokens.length; j++){
tokens[j] = escape(tokens[j]);
if (j>0){
spacer=" ";
}
transAtt += spacer + tokens[j];
}
transAtt += '"';
outStr = outStr.substring(0,end+3) + transAtt + ¬
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 + '="' + ¬
escape(transValue) + '"';
outStr = outStr.substring(0,end+3) + transAtt + ¬
outStr.substring(end+3);
}
// Increment the counter so that the next instance
// of mmTranslatedValue will have a unique name, and
// then find the next <# conditional in the code.
count++;
EXTENSION DE DREAMWEAVER CS4 356
Traducteurs de données
start = outStr.indexOf('<# if',end);
}
// Return the translated string.
return outStr
}
function getTranslatorInfo(){
returnArray = new Array(7);
returnArray[0] = "Pound_Conditional";
returnArray[1] = "Pound Conditional Translator";
returnArray[2] = "2";
returnArray[3] = "html";
returnArray[4] = "htm";
returnArray[5] = "1";
returnArray[6] = "<#";
returnArray[7] = "byString";
returnArray[8] = "50";
return returnArray
//
//
//
//
//
//
//
//
The
The
The
The
The
The
The
translatorClass
title
number of extensions
first extension
second extension
number of expressions
first expression
//
}
</script>
</head>
<body>
</body>
</html>
3 Enregistrez le fichier sous le nom poco.htm dans le dossier Configuration/Translators.
Exemple de traducteur de blocs/balises simple
Pour vous aider à comprendre la traduction, examinez un traducteur entièrement écrit en JavaScript, qui n'utilise de
bibliothèque C pour aucune fonctionnalité. Le traducteur suivant serait plus efficace s'il était écrit en C, mais sa version
JavaScript est plus simple et constitue de ce fait un exemple idéal pour illustrer le fonctionnement des traducteurs.
Comme la plupart des traducteurs, celui-ci est conçu pour émuler le comportement d'un serveur. Supposons que votre
serveur Web soit configuré pour remplacer la balise KENT par la photo d'un technicien différent selon le jour de la
semaine, l'heure de la journée ou la plate-forme de l'utilisateur. Le traducteur exécute la même opération, mais
uniquement localement.
Création du traducteur de blocs/balises
1 Créez un document vierge.
2 Entrez le code suivant :
EXTENSION DE DREAMWEAVER CS4 357
Traducteurs de données
<html>
<head>
<title>Kent Tag Translator</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<script language="JavaScript">
/**********************************************************
* 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] = "DREAMWEAVER_TEAM";
returnArray[1] = "Kent Tags";
returnArray[2] = "0";
returnArray[3] = "1";
returnArray[4] = "<kent";
returnArray[5] = "byExpression";
return returnArray;
//
//
//
//
//
//
The translatorClass
The title
The number of extensions
The number of expressions
Expression
run if the file contains "<kent"
}
/**************************************************************************
* 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 = "";
// The string to be returned after translation
var start = inStr.indexOf('<kent>'); // 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 = "";
// The string to be returned after translation
//If the document does not contain any content, terminate the translation.
if ( inStr.length <= 0 ){
return "";
}
// 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
EXTENSION DE DREAMWEAVER CS4 358
Traducteurs de donné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('<kent>');
}
// 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 = '<IMG SRC="/' + image + '" WIDTH="320" HEIGHT="240" ALT="Kent">\n';
// 1st part of the opening lock tag. The remainder of the tag is assembled
below.
var start = '<MM:BeginLock translatorClass="DREAMWEAVER_TEAM" type="kent"';
// The closing lock tag.
var end = '<MM:EndLock>';
//Assemble the lock tags and the replacement HTML.
var replCode = start + ' depFiles="' + depFiles + '"';
replCode = replCode + ' orig="%3Ckent%3E">\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 & time.
var day = today.getUTCDay();
// Day of the week in the GMT time zone.
// 0=Sunday, 1=Monday, and so on.
EXTENSION DE DREAMWEAVER CS4 359
Traducteurs de donné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 "Win32",
// all Macs as "MacPPC".
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 < 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 < 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 >= 10 && SFhour <= 12){
imageRef = "images/kent_tiredAndIrritated.jpg";
//Or else it's between 1pm and 3pm, inclusive
}else if (SFhour >= 13 && SFhour <= 15){
imageRef ="images/kent_hungry.jpg";
//Or else it's between 4pm and 5pm, inclusive
}else if (SFhour >= 16 && SFhour <= 17){
//If user is on Mac, show Kent working on Mac
if (platform == "MacPPC"){
imageRef = "images/kent_gettingStartedOnMac.jpg";
//If user is on Win, show Kent working on Win
}else{
imageRef = "images/kent_gettingStartedOnWin.jpg";
}
//Or else it's after 6pm but before the stroke of midnight
}else if (SFhour >= 18){
//If it's Saturday
if (day == 6){
imageRef = "images/kent_dancing.jpg";
//If it's not Saturday, check the user's platform
}else if (platform == "MacPPC"){
imageRef = "images/kent_hardAtWorkOnMac.jpg";
EXTENSION DE DREAMWEAVER CS4 360
Traducteurs de données
}else{
imageRef = "images/kent_hardAtWorkOnWin.jpg";
}
}else{
imageRef = "images/kent_sleeping.jpg";
}
//If it's after midnight and before 10am, or anytime on Sunday
}else{
imageRef = "images/kent_sleeping.jpg";
}
return imageRef;
}
</script>
</head>
<body>
</body>
</html>
3 Enregistrez le fichier sous le nom kent.htm dans le dossier Configuration/Translators.
Fonctions de l'API du traducteur de données
Cette section décrit les fonctions utilisées pour dé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ées
Tableau de chaînes. Les éléments du tableau doivent apparaître dans l'ordre suivant :
1 La chaîne translatorClass identifie le traducteur de façon unique. Cette chaîne doit commencer par une lettre et
contenir uniquement des caractères alphanumériques, des traits d'union (-) et des caractères de soulignement (_).
2 La chaîne title décrit le traducteur en 40 caractères maximum.
3 La chaîne nExtensions indique le nombre d'extensions de fichier qui suivent. Si nExtensions est égal à zéro, le
traducteur peut s'exécuter sur n'importe quel fichier. Si nExtensions est égal à zéro, nRegExps est l'élément suivant
dans le tableau.
4 La chaîne extension indique une extension de fichier ("htm" ou "SHTML", par exemple) compatible avec ce
traducteur. Cette chaîne ne distingue pas les majuscules des minuscules et ne doit pas commencer par un point. Le
tableau doit contenir le même nombre d'éléments extension que celui spécifié dans nExtensions.
5 La chaîne nRegExps indique le nombre d'expressions régulières qui suivent. Si nRegExps est égal à zéro, runDefault
est l'élément suivant dans le tableau.
EXTENSION DE DREAMWEAVER CS4 361
Traducteurs de données
6 La chaîne regExps indique une expression régulière que vous pouvez vérifier. Le tableau doit contenir le même
nombre d'éléments regExps que celui spécifié dans nRegExps, et au moins l'un des éléments regExps doit
correspondre à une partie du code source du document pour que le traducteur puisse traiter un fichier.
7 La chaîne runDefault indique le moment d'exécution du traducteur. La liste suivante indique les valeurs de chaîne
possibles :
Chaîne
Définition
"allFiles"
Le traducteur s'exécute systématiquement.
"noFiles"
Le traducteur ne s'exécute jamais.
"byExtension"
Le traducteur s'exécute lorsque les fichiers sont dotés de l'une des extensions spécifiées.
"byExpression"
Le traducteur s'exécute lorsque le document contient une correspondance pour l'une des expressions
régulières spécifiées.
"bystring"
Le traducteur s'exécute lorsque le document contient une correspondance pour l'une des chaînes
spécifiées.
Remarque : Si vous définissez runDefault sur "byExtension" sans spécifier d'extension (voir l'étape 4), l'effet
produit est le même que celui obtenu avec la valeur "allFiles". Si vous définissez runDefault sur
"byExpression" sans spécifier d'expression (voir l'étape 6), l'effet produit est le même que celui obtenu avec la valeur
"noFiles".
8 La chaîne priority indique la priorité par défaut pour l'exécution de ce traducteur. Cette priorité est un nombre
compris entre 0 et 100. Si vous ne définissez pas de priorité, sa valeur par défaut est 100. La priorité maximale est
0 et la priorité minimale, 100. Lorsque plusieurs traducteurs s'appliquent à un document, ce paramètre détermine
l'ordre dans lequel ils sont appliqués. La priorité la plus haute est appliquée en premier. Lorsque plusieurs
traducteurs ont la même priorité, ils sont appliqués dans l'ordre alphabétique par translatorClass.
Exemple
Dans l'exemple suivant, la fonction getTranslatorInfo() fournit des informations relatives à un traducteur pour les
inclusions côté serveur :
function getTranslatorInfo(){
var transArray = new Array(11);
transArray[0] = "SSI";
transArray[1] = "Server-Side Includes";
transArray[2] = "4";
transArray[3] = "htm";
transArray[4] = "stm";
transArray[5] = "html";
transArray[6] = "shtml";
transArray[7] = "2";
transArray[8] = "<!--#include file";
transArray[9] = "<!--#include virtual";
transArray[10] = "byExtension";
transArray[11] = "50";
return transArray;
}
EXTENSION DE DREAMWEAVER CS4 362
Traducteurs de données
translateDOM()
Disponibilité
Dreamweaver CS3.
Description
Dreamweaver effectue deux passes de traduction. La première porte sur tous les traducteurs et appelle les fonctions
translateMarkup(). Une fois ces fonctions appelées, la deuxième passe appelle les fonctions translateDOM(). La
valeur dom qui est transmise correspond à la valeur dom à traduire. Les seules modifications qui sont autorisées pendant
la deuxième passe sont celles qui portent sur les attributs traduits.
Arguments
dom, sourceStr
• Argument dom.
• L'argument sourceStr est identique à la chaîne transmise par translateMarkup. Elle est fournie pour référence,
mais l'opération de traduction doit se faire intégralement sur l'argument dom et non pas sourceStr.
Valeurs renvoyé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("div1");
if (div1){
div1.style.display = "none";
}
}
translateMarkup()
Description
Cette fonction effectue la traduction.
Arguments
docName, siteRoot, docContent
• L'argument docName est une chaîne qui contient l'URL de type file:// du document à traduire.
• L'argument siteRoot est une chaîne qui contient l'URL de type file:// de la racine du site où se trouve le document à
traduire. Si le document se trouve en dehors d'un site, cette chaîne peut être vide.
• L'argument docContent est une chaîne qui indique le contenu du document.
Valeurs renvoyées
Soit une chaîne qui contient le document traduit, soit une chaîne vide si rien n'est traduit.
EXTENSION DE DREAMWEAVER CS4 363
Traducteurs de données
Exemple
L'instance suivante de la fonction translateMarkup() appelle la fonction C translateASP() contenue dans une
DLL (Windows) ou dans une bibliothèque de code (Macintosh) appelée ASPTrans :
function translateMarkup(docName, siteRoot, docContent){
var translatedString = "";
if (docContent.length > 0){
translatedString = ASPTrans.translateASP(docName, siteRoot, ¬
docContent);
}
return translatedString;
}
Pour consulter un exemple intégralement en JavaScript, voir « Exemple de traducteur d'attributs simple » à la page 353
ou « Exemple de traducteur de blocs/balises simple » à la page 356.
liveDataTranslateMarkup()
Disponibilité
Dreamweaver UltraDev 1.
Description
Cette fonction traduit les documents lorsque l'utilisateur utilise la fenêtre Live Data. Lorsque l'utilisateur sélectionne
la commande Affichage > 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îne qui contient l'URL de type file:// du document à traduire.
• L'argument siteRoot est une chaîne qui contient l'URL de type file:// de la racine du site où se trouve le document à
traduire. Si le document se trouve en dehors d'un site, cette chaîne peut être vide.
• L'argument docContent est une chaîne qui indique le contenu du document.
Valeurs renvoyées
Soit une chaîne qui contient le document traduit, soit une chaî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èque de code (Macintosh) appelée ASPTrans :
function liveDataTranslateMarkup(docName, siteRoot, docContent){
var translatedString = "";
if (docContent.length > 0){
translatedString = ASPTrans.translateASP(docName, siteRoot, docContent);
}
return translatedString;
}
364
Chapitre 23 : Extensions C
Les extensions C vous permettent d'implémenter des fichiers d'extension Adobe Dreamweaver en combinant du code
JavaScript et votre propre code C. Créez des fonctions en langage C, intégrez-les à une DLL ou à une bibliothèque
partagée, enregistrez la bibliothèque dans le sous-dossier Configuration/JSExtensions du dossier de l'application
Dreamweaver, puis appelez ces fonctions à partir de JavaScript à l'aide de l'interpréteur JavaScript intégré à
Dreamweaver.
Supposons, par exemple, que vous souhaitiez définir un objet Dreamweaver permettant d'insérer dans le document
actif le contenu d'un fichier spécifié par l'utilisateur. Etant donné que le code JavaScript côté client ne prend pas en
charge les E/S de fichier, vous devez créer une fonction en C pour fournir cette fonctionnalité.
Intégration des fonctions C
Vous pouvez utiliser le codeHTML et JavaScript ci-dessous pour créer un objet simple d'insertion du texte d'un fichier.
La fonction objectTag() appelle la fonction C readContentsOfFile(), stockée dans une bibliothèque appelée
maBibliothèque.
<HTML>
<HEAD>
<SCRIPT>
function objectTag() {
fileName = document.forms[0].myFile.value;
return myLibrary.readContentsOfFile(fileName);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter the name of the file to be inserted:
<INPUT TYPE="file" NAME="myFile">
</FORM>
</BODY>
</HTML>
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ées JavaScript et les
fonctions figurant dans la fonction readContentsOfFile(), consultez la section « Extensions C et interpréteur
JavaScript » à la page 366.
EXTENSION DE DREAMWEAVER CS4 365
Extensions C
JSBool
readContentsOfFile(JSContext *cx, JSObject *obj, unsigned int ¬
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, "Wrong number of arguments", 0);
return JS_FALSE;
}
/* Convert the argument to a string */
fileName = JS_ValueToString(cx, argv[0], &length);
if (fileName == NULL){
JS_ReportError(cx, "The argument must be a string", 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écute correctement et ne provoque pas d'erreur
JavaScript, vous devez enregistrer la fonction avec l'interpréteur JavaScript en ajoutant une fonction MM_Init() à votre
bibliothèque. Lorsque Dreamweaver charge la bibliothèque au dé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ée à la bibliothèque maBibliothèque:
void
MM_Init()
{
JS_DefineFunction("readContentsOfFile", readContentsOfFile, 1);
}
Votre bibliothè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
EXTENSION DE DREAMWEAVER CS4 366
Extensions C
Remarque : La bibliothèque peut être implémentée en C ou en C++, mais le fichier qui contient la fonction MM_Init()
et la macro MM_STATE doivent être implémentés en C. En effet, le compilateur C++ modifie les noms de fonction, ce qui
rend impossible la détection de la fonction MM_Init() par Dreamweaver.
Extensions C et interpréteur JavaScript
Dans votre bibliothèque, le code C doit interagir avec l'interpréteur JavaScript de Dreamweaver à trois moments
distincts :
• Au démarrage, pour enregistrer les fonctions de la bibliothèque
• Lorsque la fonction est appelée, pour analyser les arguments que JavaScript transmet à C
• Avant le retour de la fonction, pour compresser la valeur renvoyée
Pour accomplir ces tâches, l'interpréteur définit plusieurs types de données et affiche une API. Les définitions des types
de données et des fonctions répertoriées dans cette section apparaissent dans le fichier mm_jsapi.h. Pour que votre
bibliothèque fonctionne correctement, vous devez inclure le fichier mm_jsapi.h et la ligne suivante au début de tous
les fichiers de votre bibliothèque :
#include "mm_jsapi.h"
L'inclusion du fichier mm_jsapi.h a pour effet d'inclure, à son tour, le fichier mm_jsapi_environment.h, qui définit la
structure MM_Environment.
Types de données
L'interpréteur JavaScript définit les types de données suivants.
typedef struct JSContext JSContext
Un pointeur sur ce type de données opaque est transmis à 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ées opaque est transmis à la fonction de niveau C. Ce type de données représente un
objet pouvant correspondre à un objet de tableau ou tout autre type d'objet.
typedef struct JSVal JSVal
Une structure de données opaque pouvant contenir un nombre entier ou un pointeur vers un nombre à virgule
flottante, une chaîne ou un objet. Certaines des fonctions de l'API permettent de lire les valeurs des arguments de
fonction à partir du contenu d'une structure JSVal et d'autres permettent d'écrire la valeur renvoyée par la fonction en
rédigeant une structure JSVal.
typedef enum { JS_FALSE = 0, JS_TRUE = 1 } JSBool
Type de données simple qui stocke une valeur booléenne.
EXTENSION DE DREAMWEAVER CS4 367
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écrit les implémentations C des fonctions JavaScript dans les situations suivantes :
• cx est un pointeur vers une structure JSContext opaque qui doit être transmis à certaines fonctions de l'API
JavaScript. Cette variable contient le contexte d’exécution de l’interpréteur.
• obj est un pointeur vers l'objet dans le contexte duquel le script s'exécute. Pendant l'exécution du script, le mot clé
this désigne cet objet.
• argc correspond au nombre d'arguments transmis à la fonction.
• Le pointeur argv pointe sur un tableau de structures jsval. La longueur du tableau correspond au nombre
d’éléments défini par argc.
• Le pointeur rval pointe sur une structure jsval. La valeur renvoyée par la fonction doit être écrite dans *rval.
La fonction renvoie la valeur JS_TRUE si elle s’exécute correctement, et JS_FALSE dans le cas contraire. Si la fonction
renvoie la valeur JS_FALSE, l'exécution du script en cours s'arrête et un message d'erreur apparaît.
JSBool JS_DefineFunction()
Description
Cette fonction enregistre une fonction C avec l'interpréteur JavaScript dans Dreamweaver. Une fois que la fonction
JS_DefineFunction() a enregistré la fonction C spécifiée dans l'argument call, vous pouvez l'appeler dans un script
JavaScript en utilisant le nom spécifié dans l'argument name. L'argument name fait la distinction entre majuscules et
minuscules.
En règle générale, cette fonction est appelée depuis la fonction MM_Init(), que Dreamweaver appelle au démarrage.
Arguments
char *name, JSNativecall, unsigned int nargs
• name est le nom de la fonction tel qu'il apparaît dans JavaScript.
• call est un pointeur vers une fonction C. La fonction doit accepter les mêmes arguments que readContentsOfFile
et renvoyer une valeur JSBool qui indique si son exécution a réussi ou pas.
• nargs est le nombre d'arguments que la fonction doit recevoir.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
EXTENSION DE DREAMWEAVER CS4 368
Extensions C
char *JS_ValueToString()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en chaîne (si possible) et
renvoie la valeur convertie à l'appelant.
Remarque : Ne modifiez pas le pointeur de tampon renvoyé. Il pourrait endommager les structures de données de
l'interpréteur JavaScript. Pour modifier la chaîne, copiez ses caractères dans un autre tampon et créez une nouvelle chaîne
JavaScript.
Arguments
JSContext *cx, JSVal v, unsigned integer *pLength
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis à la fonction JavaScript.
• L'argument v est la structure JSVal à partir de laquelle Dreamweaver extrait la chaîne.
• L’argument *pLength est un pointeur vers un entier non signé. Cette fonction définit *plength sur la longueur de
la chaîne (en octets).
Valeurs renvoyées
Un pointeur vers une chaîne terminée par un octet nul en cas de succès, ou la valeur null en cas d’échec. La routine
d'appel ne doit pas libérer cette chaîne lorsqu'elle a terminé.
JSBool JS_ValueToInteger()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en nombre entier (si
possible) et renvoie la valeur convertie à l'appelant.
Arguments
JSContext *cx, JSVal v, long *lp
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• L’argument v est la structure JSVal dont l’entier doit être extrait.
• lp est un pointeur vers un nombre entier de 4 octets. Cette fonction stocke la valeur convertie dans *lp.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_ValueToDouble()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en un double (si possible)
et renvoie la valeur convertie à l'appelant.
EXTENSION DE DREAMWEAVER CS4 369
Extensions C
Arguments
JSContext *cx, JSVal v, double *dp
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• L’argument v est la structure JSValdont le double doit être extrait.
• dp est un pointeur vers un réel double de 8 octets. Cette fonction stocke la valeur convertie dans *dp.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_ValueToBoolean()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en valeur booléenne (si
possible) et renvoie la valeur convertie à l'appelant.
Arguments
JSContext *cx, JSVal v, JSBool *bp
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• L’argument v est la structure JSVal dont la valeur booléenne doit être extraite.
• bp est un pointeur vers une valeur booléenne JSBool. Cette fonction stocke la valeur convertie dans *bp.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_ValueToObject()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en objet (si possible) et
renvoie la valeur convertie à l'appelant. Si l'objet correspond à 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 à la fonction JavaScript.
• L’argument v est la structure JSValdont l’objet doit être extrait.
• op est un pointeur vers un pointeur JSObject. Cette fonction stocke la valeur convertie dans *op.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
EXTENSION DE DREAMWEAVER CS4 370
Extensions C
JS_ValueToUCString()
Description
Cette fonction extrait un argument de fonction à partir d'une structure JSVal, le convertit en chaîne (si possible) et
renvoie la valeur convertie à l'appelant.
Remarque : Ne modifiez pas le pointeur de tampon renvoyé. Il pourrait endommager les structures de données de
l'interpréteur JavaScript. Pour modifier la chaîne, copiez ses caractères dans un autre tampon et créez une nouvelle chaîne
JavaScript.
Arguments
JSContext *cx, JSVal v, unsigned int *pLength
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis à la fonction JavaScript.
• L'argument v est la structure JSVal à partir de laquelle Dreamweaver extrait la chaîne.
• L’argument *pLength est un pointeur vers un entier non signé. Cette fonction définit *plength sur la longueur de
la chaîne (en octets).
Valeurs renvoyées
Un pointeur vers une chaîne UTF-8 terminée par un octet nul en cas de succès, ou la valeur null en cas d’échec. La
routine d'appel ne doit pas libérer cette chaîne lorsqu'elle a terminé.
JSBool JS_StringToValue()
Description
Cette fonction stocke la valeur renvoyée d'une chaîne dans une structure JSVal. Elle alloue un nouvel objet de chaîne
JavaScript.
Arguments
JSContext *cx, JSVal *bytes, size_t sz, JSVal*vp
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis à la fonction JavaScript.
• L’argument bytes est la chaîne à stocker dans la structure JSVal. La chaîne étant copiée, l'appelant doit la libérer
lorsqu'elle n'est plus nécessaire. Si la taille de la chaîne n’est pas spécifiée (voir l’argument sz), la chaîne doit
se terminer par un octet de valeur nulle.
•
sz indique la taille de la chaîne en octets. Si la valeur de sz est 0, la longueur de la chaîne terminée
par un octet de valeur nulle est calculée automatiquement.
• L’argument *vp est un pointeur sur la structure JSVal dans laquelle le contenu de la chaîne doit être copié.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
EXTENSION DE DREAMWEAVER CS4 371
Extensions C
JSBool JS_UCStringToValue()
Description
Cette fonction stocke la valeur renvoyée d'une chaîne dans une structure JSVal. Elle alloue un nouvel objet de chaîne
JavaScript.
Arguments
JSContext *cx , JSVal *bytes, size_tsz, JSVal *vp
• L’argument *cx est le pointeur opaque sur JSContext qui est transmis à la fonction JavaScript.
• L’argument *bytes est la chaîne à stocker dans la structure JSVal. La chaîne étant copiée, l'appelant doit la libérer
lorsqu'elle n'est plus nécessaire. Si la taille de la chaîne n’est pas spécifiée (voir l’argument sz), la chaîne doit
se terminer par un octet de valeur nulle.
•
sz indique la taille de la chaîne en octets. Si la valeur de sz est 0, la longueur de la chaîne terminée
par un octet de valeur nulle est calculée automatiquement.
• L’argument *vp est un pointeur sur la structure JSVal dans laquelle le contenu de la chaîne doit être copié.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec
Remarque : La méthode JS_UCStringToValue() est à tous égards identique à JSBool JS_StringToValue(), à ceci
près qu'elle renvoie une chaîne UTF-8.
JSBool JS_DoubleToValue()
Description
Cette fonction stocke la valeur renvoyée d'un nombre à virgule flottante dans une structure JSVal.
Arguments
JSContext *cx, double dv, JSVal *vp
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• dv est un nombre à virgule flottante de 8 octets.
• L’argument vp est un pointeur vers la structure JSVal dans laquelle le contenu du double doit être copié.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSVal JS_BooleanToValue()
Description
Cette fonction stocke dans une structure JSVal la valeur booléenne renvoyée.
Arguments
JSBool bv
• L'argument bv est une valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
EXTENSION DE DREAMWEAVER CS4 372
Extensions C
Valeurs renvoyées
Structure JSVal qui contient la valeur booléenne que vous avez transmise à 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ées
Structure JSVal qui contient le nombre entier que vous avez transmis à la fonction en tant qu'argument.
JSVal JS_ObjectToValue()
Description
Cette fonction stocke la valeur renvoyée d'un objet dans une structure JSVal. Utilise la fonction JS_
NewArrayObject() pour créer un objet de tableau et utilise JS_SetElement() pour en définir le contenu.
Arguments
JSObject *obj
obj est un pointeur vers l'objet JSObject que vous voulez convertir en structure JSVal.
Valeurs renvoyées
Structure JSVal qui contient l'objet que vous avez transmis à la fonction en tant qu'argument.
char *JS_ObjectType()
Description
A partir d'une réfé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 "Document". S'il s'agit d'un nœud dans le document, elle renvoie "Element". Pour
un objet tableau, la fonction renvoie "Array".
Remarque : Ne modifiez pas le pointeur tampon renvoyé, car cela pourrait endommager les structures des données de
l'interpréteur JavaScript.
Arguments
JSObject *obj
En principe, cet argument est transmis et converti à l'aide de JS_ValueToObject().
Valeurs renvoyées
Un pointeur sur une chaîne terminée par un octet nul. L'appelant ne doit pas libérer cette chaîne une fois l'opération
effectuée.
EXTENSION DE DREAMWEAVER CS4 373
Extensions C
JSObject *JS_NewArrayObject()
Description
Cette fonction cré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 à la fonction JavaScript.
• length correspond au nombre d'éléments que le tableau peut contenir.
• L’argument v est un pointeur facultatif vers les structures jsval à stocker dans le tableau. Si la valeur renvoyée est
différente de null, v correspond à un tableau contenant des éléments length. Si la valeur renvoyée est null, le
contenu initial de l’objet tableau est non défini (undefined). Il peut être défini à l’aide de la fonction
JS_SetElement().
Valeurs renvoyées
Un pointeur vers un nouvel objet de tableau (array) ou la valeur null en cas d'échec de l'exécution de la fonction.
long JS_GetArrayLength()
Description
A partir d'un pointeur vers un objet de tableau, extrait le nombre d'éléments contenus dans le tableau.
Arguments
JSContext *cx, JSObject*obj
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
Valeurs renvoyées
Le nombre d’éléments du tableau, ou -1 en cas d’échec.
JSBool JS_GetElement()
Description
Cette fonction lit un seul élément d'un objet de tableau.
Arguments
JSContext *cx, JSObject *obj, unsigned int index, JSVal *v
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
• index est un index des nombres entiers du tableau. Le premier élément est l'index 0, le dernier élément est l'index
(length - 1).
• v est un pointeur vers une structure jsval dans laquelle sera copié le contenu de la structure JSVal figurant dans
le tableau.
EXTENSION DE DREAMWEAVER CS4 374
Extensions C
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_SetElement()
Description
Cette fonction écrit un seul élément d'un objet de tableau.
Arguments
JSContext *cx, JSObject *obj, unsigned int index, JSVal *v
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• obj est un pointeur vers un objet de tableau.
• index est un index des nombres entiers du tableau. Le premier élément est l'index 0, le dernier élément est l'index
(length - 1).
• v est un pointeur vers une structure JSVal dont le contenu doit être copié dans la structure JSVal du tableau.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_ExecuteScript()
Description
Cette fonction compile et exécute une chaîne JavaScript. Si le script renvoie une valeur, celle-ci apparaît dans *rval.
Arguments
JSContext *cx, JSObject *obj, char *script, unsigned intsz, JSVal *rval
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• obj est un pointeur vers l'objet dans le contexte duquel le script s'exécute. Pendant l'exécution du script, le mot clé
this désigne cet objet. En général, il s'agit du pointeur JSObject qui a été transmis à la fonction JavaScript.
• script est une chaîne qui contient le code JavaScript. Si la taille de la chaîne n'est pas spécifiée (voir l'argument sz),
la chaîne doit se terminer par un 0.
• sz indique la taille de la chaîne en octets. Si sz a pour valeur 0, la longueur de la chaîne se terminant par 0 est calculée
automatiquement.
• rval est un pointeur vers une seule structure JSVal. La valeur renvoyée pour la fonction est stockée dans *rval.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
JSBool JS_ReportError()
Description
Cette fonction dé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 à utilisateur la raison de l'échec du script (par exemple wrong number of arguments).
EXTENSION DE DREAMWEAVER CS4 375
Extensions C
Arguments
JSContext *cx, char *error, size_t sz
• cx est le pointeur JSContext opaque transmis à la fonction JavaScript.
• error est une chaîne qui contient le message d'erreur. La chaîne est copiée de façon à ce que l'appelant puisse la
libérer lorsqu'elle ne sera plus nécessaire. Si la taille de la chaîne n'est pas spécifiée (voir l'argument sz), la chaîne
doit se terminer par un 0.
• sz indique la taille de la chaîne en octets. Si la valeur de sz est 0, la longueur de la chaîne terminée par un octet de
valeur nulle est automatiquement calculée.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
API de configuration multi-utilisateur et d'accès aux
fichiers
Adobe recommande de toujours utiliser l'API de configuration multi-utilisateur et d'accès aux fichiers pour accéder
au système de fichiers par l'intermédiaire d'extensions C. Pour les fichiers autres que les fichiers de configuration, les
fonctions accèdent directement au fichier ou dossier spécifié.
Dreamweaver prend en charge les configurations multi-utilisateur pour les systèmes Windows XP, Windows 2000 et
Mac OS X.
Dreamweaver est généralement installé dans un dossier à accès restreint, tel que C:\Program Folders sous Windows.
De ce fait, seuls les utilisateurs disposant de droits d'accès de type administrateur peuvent modifier le dossier
Configuration de Dreamweaver. Pour permettre aux utilisateurs travaillant dans des environnements multi-utilisateur
de créer et de gérer des configurations distinctes, Dreamweaver crée un dossier de configuration séparé pour chacun
d'entre eux. Chaque fois que Dreamweaver ou une extension JavaScript écrit dans le dossier Configuration de
Dreamweaver, Dreamweaver écrit automatiquement dans le dossier Configuration de l'utilisateur à la place. Ainsi,
Dreamweaver permet à chaque utilisateur de personnaliser les paramètres de configuration respectifs, sans aucune
incidence sur les configurations personnalisées des autres utilisateurs.
Dreamweaver crée le dossier Configuration de l'utilisateur à un emplacement dans lequel l'utilisateur dispose de tous
les droits d'accès en lecture/écriture. L'emplacement du dossier Configuration varie selon la plate-forme utilisateur.
Sous Windows 2000 et Windows XP :
<drive>:\Documents and Settings\<username>\Application Data\Adobe\\
Dreamweaver CS4\Configuration
Remarque : Sous Windows XP, il se peut que ce dossier se trouve dans un dossier caché.
Sous MacOS X :
<drive>:Users:<username>:Library:Application Support:Adobe:Dreamweaver CS4:Configuration
EXTENSION DE DREAMWEAVER CS4 376
Extensions C
Il est fréquent que les extensions JavaScript soient amenées à ouvrir des fichiers et à écrire dans le dossier
Configuration. Elles peuvent accéder au système de fichiers en utilisant DWFile ou MMNotes, ou en transmettant une
URL à la fonction dreamweaver.getDocumentDOM(). En général, lorsqu'une extension accède au systè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ès en se reportant à l'élément dom.URL d'un document ouvert et en ajoutant le nom du
fichier. Une extension peut également obtenir le chemin d'accès en se reportant à l'élément dom.URL et en extrayant le
nom du fichier. La fonction dw.getConfigurationPath() et l'élément dom.URL renvoient toujours une URL du
dossier Configuration de Dreamweaver, mê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ès et vérifie d'abord le dossier Configuration de l'utilisateur. Si une extension JavaScript enregistre des
donné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 CS4/Configuration/Objects/Common/Table.htm, Dreamweaver recherche le fichier Table.htm file
dans le dossier C:\Documents and Settings\nom d'utilisateur\adobe\Dreamweaver
CS4\Configuration\Objects\Common et, si ce fichier existe, c'est celui-ci qu'il emploie.
Les extensions C, ou les bibliothèques partagées, doivent utiliser l'API de configuration multi-utilisateur et d'accès aux
fichiers pour lire et écrire dans le dossier Configuration de Dreamweaver. L'utilisation de l'API d'accès aux fichiers et
de configuration multi-utilisateur permet à Dreamweaver de lire et d'écrire dans le dossier Configuration de
l'utilisateur. Elle évite en outre que les opérations sur les fichiers n'échouent en raison d'autorisations d'accès
insuffisantes. Si les fichiers dans le dossier Configuration de Dreamweaver auquel accède votre extension C sont créés
dans JavaScript avec des manipulations DWFile, MMNotes ou DOM, utilisez l'API de configuration multiutilisateur
et d'accè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èrent aucune modification pour pouvoir écrire dans le dossier
Configuration de l'utilisateur. Seules les bibliothèques C partagées qui écrivent dans le dossier Configuration doivent être
mises à jour afin d'utiliser les fonctions de l'API de configuration multi-utilisateur et d'accès aux fichiers.
Lorsque vous supprimez un fichier du dossier Configuration de Dreamweaver, Dreamweaver ajoute une entrée vers
un fichier de masque. Cette entrée est ajoutée afin d'indiquer quels fichiers du dossier Configuration ne doivent pas
être visibles dans l'interface utilisateur. Un fichier ou dossier masqué n'existera pas pour Dreamweaver, même s'il peut
exister physiquement dans le dossier.
Supposons par exemple que vous ayez utilisé la corbeille du panneau Fragments de code pour supprimer un dossier
appelé javascript et un fichier appelé onepixelborder.csn. Dans ce cas, Dreamweaver écrit un fichier nommé
mm_deleted_files.xml dans le dossier Configuration de l'utilisateur, ressemblant à ceci :
<?xml version = "1.0" encoding="utf-8" ?>
<deleteditems>
<item name="snippets/javascript/" />
<item name="snippets/html/onepixelborder.csn" />
</deleteditems>
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 également tous les fichiers du dossier Configuration/Snippets de
Dreamweaver, à l'exception du dossier Configuration/Snippets/javascript et du fichier
Configuration/Snippets/html/onepixelborder.csn. La liste de fichiers ainsi trouvés est ajoutée au panneau Fragments
de code.
EXTENSION DE DREAMWEAVER CS4 377
Extensions C
Si une extension C appelle la fonction MM_ConfigFileExists() de l'URL file:///c|Program Files/Adobe
/Adobe Dreamweaver CS4/Configuration/Snippets/javascript/onepixelborder.csn, cette dernière renvoie
la valeur false. De même, si une extension JavaScript essaie d'appeler la fonction dw.getDocumentDom
("file:///c|Program Files/Adobe/Adobe Dreamweaver
CS4/Configuration/Snippets/javascript/onepixelborder.csn"), la valeur renvoyée est null.
Modifiez le fichier mm_deleted_files.xml pour empêcher d'afficher des fichiers dans l'interface utilisateur, tels que des
objets ou un contenu prêt à l'emploi dans une nouvelle boî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é
Dreamweaver MX.
Description
Cette fonction extrait une liste répertoriant les dossiers ou les fichiers (ou les deux à la fois) du dossier spécifié. Si vous
spé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ès filtrage par mm_deleted_files.xml.
Arguments
char *fileURL, char *constraints
• char *fileUrl est un pointeur vers une chaîne qui nomme le dossier dont vous souhaitez obtenir le contenu. La
chaîne doit se présenter sous la forme d'une URL de fichier (file://). Cette chaîne peut comporter les caractères
génériques suivants : astérisques (*) et points d'interrogation (?). Utilisez les astérisques (*) pour représenter un ou
plusieurs caractères indéterminés et les points d'interrogation (?) pour représenter un seul caractère indéterminé.
• L'argument char *contstraints peut être files ou directories ou encore une valeur null. Si vous précisez null,
la fonction MM_GetConfigFolderList() renvoie des fichiers et des dossiers.
Valeurs renvoyé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ès filtrage par le fichier mm_deleted_files.xml.
Exemples
JSObject *jsobj_array;
jsobj_array = MM_GetConfigFolderList("file:///¬
c|/Program Files/Adobe/Adobe Dreamweaver CS3/Configuration", "directories" );
JSBool MM_ConfigFileExists()
Disponibilité
Dreamweaver MX.
Description
Cette fonction vérifie si le fichier spécifié 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érifie également si le
nom du fichier est répertorié dans le fichier mm_deleted_files.xml. Si tel est le cas, la fonction renvoie la valeur false.
EXTENSION DE DREAMWEAVER CS4 378
Extensions C
Arguments
char *fileUrl
char *fileUrl est un pointeur vers une chaîne qui nomme le fichier souhaité, sous la forme d'une URL de type file://.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
Exemple
char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt";
int fileno = 0;
if(MM_ConfigFileExists(dwConfig))
{
fileno = MM_OpenConfigFile(dwConfig, "read");
}
int MM_OpenConfigFile()
Disponibilité
Dreamweaver MX.
Description
Cette fonction ouvre le fichier et renvoie son identificateur dans le système d'exploitation. Vous pouvez utiliser cet
identificateur dans des appels à des fonctions de fichiers systè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 à des fins d'écriture, la
fonction crée le fichier dans le dossier de configuration de l'utilisateur, même s'il existe dans le dossier Configuration
de Dreamweaver.
Remarque : Si vous souhaitez commencer par lire le fichier, ouvrez-le en mode "read". Lorsque vous souhaitez écrire
dans le fichier, fermez l'identificateur de lecture et rouvrez le fichier en mode "write" ou "append".
Arguments
char *fileURL, char *mode
• char *fileURL est un pointeur vers une chaîne qui nomme le fichier en cours d'ouverture, exprimé sous la forme
d'une URL de fichier (file://). S'il indique un chemin d'accès dans le dossier Configuration de Dreamweaver, la
fonction MM_OpenConfigFile() commence par déterminer le chemin d'accès avant d'ouvrir le fichier.
• char *mode pointe vers une chaîne qui indique la façon dont vous souhaitez ouvrir le fichier. Vous avez le choix
entre null, "read", "write" et "append". Si vous spécifiez "write" et que le fichier n'existe pas, la fonction
MM_OpenconfigFile() le crée. Si vous spécifiez "write", la fonction MM_OpenConfigFile() ouvre le fichier en
mode de partage exclusif. Si vous spécifiez "read", MM_OpenConfigFile() ouvre le fichier en mode de partage non
exclusif.
Si vous ouvrez le fichier en mode "write", toutes les données existant dans le fichier sont tronquées avant que les
nouvelles données ne soient écrites. Si vous ouvrez le fichier en mode "append", toutes les nouvelles données sont
ajoutées à la fin du fichier.
EXTENSION DE DREAMWEAVER CS4 379
Extensions C
Valeurs renvoyées
Nombre entier représentant l'identificateur du fichier dans le système d'exploitation. Renvoie la valeur -1 si le fichier
est introuvable ou n'existe pas.
Exemple
char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt";
int = fileno;
if(MM_ConfigFileExists(dwConfig))
{
fileno = MM_OpenConfigFile(dwConfig, "read");
}
JSBool MM_GetConfigFileAttributes()
Disponibilité
Dreamweaver MX.
Description
Cette fonction trouve le fichier et en renvoie les attributs. Vous pouvez dé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î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ès dans le dossier
Configuration de Dreamweaver, la fonction MM_GetConfigFileAttributes() commence par déterminer le
chemin d'accès à utiliser avant d'ouvrir le fichier.
• L'argument unsigned long *attrs représente l'adresse d'un nombre entier contenant les bits d'attribut renvoyés (voir
« JSBool MM_SetConfigFileAttributes() » à la page 380 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 à laquelle le fichier a été
modifié pour la dernière fois. Cette heure correspond à la valeur horaire du système d'exploitation. Pour plus
d'informations sur la valeur horaire du systè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 à laquelle le fichier a été
créé. Cette heure correspond à la valeur horaire du système d'exploitation. Pour plus d'informations sur la valeur
horaire du système d'exploitation, voir DWfile.getCreationDate() dans le Guide des API de Dreamweaver.
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec. Renvoie la valeur
JS_FALSE si le fichier n'existe pas ou si une erreur se produit pendant l'obtention des attributs.
EXTENSION DE DREAMWEAVER CS4 380
Extensions C
Exemple
char dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt";
unsigned long attrs;
unsigned long filesize;
unsigned long modtime;
unsigned long createtime;
MM_GetConfigAttributes(dwConfig, &attrs, &filesize, &modtime, &createtime);
JSBool MM_SetConfigFileAttributes()
Disponibilité
Dreamweaver MX.
Description
Cette fonction applique les attributs que vous spécifiez pour le fichier, s'ils diffèrent des attributs actuels.
Si l'URL de fichier spécifiée décrit un chemin d'accè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é.
Arguments
char *fileURL, unsigned long attrs
• char *fileURL est un pointeur vers une chaîne qui nomme le fichier dont vous souhaitez définir les attributs,
exprimé sous la forme d'une URL de fichier (file://).
• unsigned long attrs spécifie les bits d'attribut à appliquer au fichier. Vous pouvez utiliser l'opérateur logique OR dans
les constantes suivantes pour définir les attributs :
MM_FILEATTR_NORMAL
MM_FILEATTR_RDONLY
MM_FILEATTR_HIDDEN
MM_FILEATTR_SYSTEM
MM_FILEATTR_SUBDIR
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec. Renvoie JS_FALSE si le
fichier n'existe pas ou s'il va être supprimé.
Exemple
char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/
Configuration/Extensions.txt";
unsigned long attrs;
attrs = (MM_FILEATTR_NORMAL | MM_FILEATTR_RDONLY);
int fileno = 0;
if(MM_SetConfigFileAttrs(dwConfig, attrs))
{
fileno = MM_OpenConfigFile(dwConfig);
}
EXTENSION DE DREAMWEAVER CS4 381
Extensions C
JSBool MM_CreateConfigFolder()
Disponibilité
Dreamweaver MX.
Description
Cette fonction crée un dossier à l'emplacement spécifié.
Si l'argument fileURL indique un dossier dans le dossier Configuration de Dreamweaver, la fonction cré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ée le dossier ainsi que tous ses dossiers parents dans le chemin d'accès, si ceux-ci n'existent
pas déjà.
Arguments
char *fileURL
• char *fileURL est un pointeur vers une chaîne qui nomme le dossier de configuration à créer, exprimé sous la forme
d'une URL de fichier (file://).
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
Exemple
char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 ­
/Configuration/Extensions.txt";
MM_CreateConfigFolder(dwConfig);
JSBool MM_RemoveConfigFolder()
Disponibilité
Dreamweaver MX.
Description
Cette fonction supprime le dossier, ainsi que ses fichiers et sous-dossiers. Si le sous-dossier ré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îne qui nomme le dossier à supprimer, exprimé sous la forme d'une URL
de fichier (file://).
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
Exemple
char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 ­
/Configuration/Objects";
MM_RemoveConfigFolder(dwConfig);
EXTENSION DE DREAMWEAVER CS4 382
Extensions C
JSBool MM_DeleteConfigFile()
Disponibilité
Dreamweaver MX.
Description
Cette fonction supprime le fichier le cas échéant. Si le fichier réside à un niveau infé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écifié.
Arguments
char *fileURL
• char *fileURL est un pointeur vers une chaîne qui nomme le dossier de configuration à supprimer, exprimé sous la
forme d'une URL de fichier (file://).
Valeurs renvoyées
Valeur booléenne : JS_TRUE indique le succès de l'opération ; JS_FALSE indique son échec.
Exemple
char dwConfig = "file:///c:|Program Files/Adobe/Adobe Dreamweaver CS3
/Configuration/Objects/insertbar.xml";
MM_DeleteConfigFile(dwConfig);
Appel d'une fonction C à partir de JavaScript
A présent que vous savez comment fonctionnent les extensionsC dans Dreamweaver et que vous connaissez les
fonctions et les types de données sur lesquels elles reposent, vous allez apprendre à construire une bibliothèque et à
appeler une fonction.
L'exemple qui suit nécessite les cinq fichiers suivants situé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ête mm_jsapi.h comprend des définitions des types de données et de fonctions qui sont décrites
dans la section « Extensions C et interpréteur JavaScript » à la page 366.
• Le fichier mm_jsapi_environment.h définit la structure MM_Environment.h.
• Le fichier MMInfo.h fournit un accès à l'API de Design Notes.
• Le fichier d'exemple Sample.c définit la fonction computeSum().
• Le fichier Make Sample.mak permet de créer le fichier Sample.c source dans une DLL avec Microsoft Visual C++.
Sample.mcp est un fichier équivalent destiné à créer un bundle Mach-O par le biais de Metrowerks CodeWarrior
et Sample.xcode est un fichier équivalent pour Apple Xcode. Si vous utilisez un autre outil, vous pouvez créer votre
propre fichier Make.
EXTENSION DE DREAMWEAVER CS4 383
Extensions C
Création de la DLL sous Windows avec VS.Net 2003
1 Chosissez Fichier > Ouvrir, puis sélectionnez Sample.mak en définissant le type de fichier sur Tous les fichiers (*.*).
(VS.Net 2003 n'ouvre pas directement les fichiers MAK.) Vous êtes invité à confirmer que vous souhaitez convertir
le projet au nouveau format.
2 Choisissez Générer > Générer la solution.
Une fois l'opération de génération terminée, le fichier Sample.dll apparaît dans le dossier qui contient Sample.mak (ou
dans l'un de ses sous-dossiers).
Création de la DLL sous Windows avec Microsoft Visual C++
1 Dans Microsoft Visual C++, choisissez Fichier > Ouvrir un espace de travail, puis sélectionnez Sample.mak.
2 Choisissez Générer > Tout reconstruire.
Une fois l'opération de génération terminée, le fichier Sample.dll apparaît dans le dossier qui contient Sample.mak (ou
dans l'un de ses sous-dossiers).
Création de la bibliothèque partagée sur Macintosh au moyen de Metrowerks CodeWarrior 9 ou ultérieur
1 Ouvrez Sample.mcp.
2 Compilez le projet (Project > Make) pour générer un bundle Mach-O.
Une fois la compilation terminée, le fichier Sample.bundle apparaît dans le dossier qui contient Sample.mcp.
Remarque : Le bundle Mach-O qui est généré doit être utilisé dans Dreamweaver 8 ou une version plus récente. Les
versions précédentes de Dreamweaverne le reconnaissent pas.
Création de la bibliothèque partagée sur Macintosh au moyen de Apple Xcode 1.5 ou ultérieur
1 Ouvrez Sample.xcode.
2 Compilez le projet (Build > Build) pour générer un bundle Mach-O.
Une fois la compilation terminée, le fichier Sample.bundle apparaît dans le dossier de compilation en regard du fichier
Sample.xcode.
Remarque : Le bundle Mach-O qui est généré doit être utilisé dans Dreamweaver 8 ou une version plus récente. Les
versions précédentes de Dreamweaverne le reconnaissent pas.
Appel de la fonction computeSum() à partir de l'objet Insérer barre horizontale
1 Dans le dossier Configuration du dossier de l'application Dreamweaver, créez un dossier appelé JSExtensions.
2 Copiez le fichier Sample.dll (Windows) ou Sample.bundle (Macintosh) dans le dossier JSExtensions.
3 Dans un é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)); à la fonction objectTag(), comme indiqué dans l'exemple
ci-dessous :
function objectTag() {
// Return the html tag that should be inserted
alert(Sample.computeSum(2,2));
return "<HR>";
}
5 Enregistrez le fichier et redémarrez Dreamweaver.
Pour exécuter la fonction computeSum(), sélectionnez Insertion > HTML > Barre horizontale.
Une boîte de dialogue contenant le chiffre 4 (résultat de la somme de 2 plus 2) s'affiche.
384
Chapitre 24 : Dossier Shared
Le dossier Shared est le lieu de stockage central des fonctions utilitaires, des classes et des images utilisées
communément par toutes les extensions. Toutes les extensions peuvent référencer les fichiers dans les sous-dossiers
du dossier Shared. Vous pouvez également ajouter des utilitaires communs à ceux déjà fournis par Adobe
Dreamweaver. Les dossiers Configuration multi-utilisateur installés pour les utilisateurs des plates-formes Windows
XP, Windows 2000 et MacOs X contiennent également un dossier Shared autorisant les personnalisations. Par
exemple, lorsque vous installez une extension à partir d'Adobe Exchange, vous remarquerez peut-être que la nouvelle
extension ajoute des données à votre dossier Configuration/Shared utilisateur plutô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 « Dossiers de configuration multi-utilisateur » à la page 83.
Contenu du dossier Shared
Le dossier Shared est divisé en sous-dossiers qui contiennent des fichiers partagés par plusieurs extensions,
notamment des fonctions permettant entre autres de naviguer dans le système de dossiers des utilisateurs, d'insérer
une commande d'arborescence et de créer des grilles modifiables.
Remarque : Les fichiers JavaScript du dossier Shared contiennent des commentaires dans le code qui fournissent des
dé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ègle générale, vous serez amené à utiliser les fonctions et ressources des dossiers Common et MM ou à 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écents et forment l'interface formelle avec le dossier Shared. Les fichiers des autres dossiers risquent quant à eux
de ne pas être à jour.
Le dossier Shared contient plus spécifiquement les dossiers présentés ci-dessous.
Dossier Common
Le dossier Common contient des scripts et des classes partagés à utiliser dans les extensions de tiers.
Fichier
Description
CodeBehindMgr.js
Contient les fonctions permettant de créer un document code-behind. Un document code-behind
permet de créer des pages distinctes qui séparent le code relatif à la logique de l'interface utilisateur
(UI) du code relatif à une conception d'interface utilisateur. Les méthodes de JSCodeBehindMgr
définies dans ce fichier permettent de créer de nouveaux documents code-behind et de gérer le lien
vers les documents de conception.
ColumnValueNodeClass.js
Contient des fonctions permettant d'associer les colonnes des bases de données à des valeurs. Les
méthodes de ColumnValueNode définies dans ce fichier permettent d'obtenir et de définir plusieurs
valeurs et propriétés d'une colonne de base de données. Dreamweaver utilise cette classe de stockage
lorsqu'il applique et inspecte des objets d'opérations de modification (insertion et mise à jour
d'enregistrements) et lorsqu'il utilise la classe SQLStatement.
CompilerClass.js
Contient des fonctions pour une classe de base utilisée par CompilerASPNetCSharp et
CompilerASPNVBNet mais peut être étendu de façon à prendre en charge d'autres compilateurs.
EXTENSION DE DREAMWEAVER CS4 385
Dossier Shared
Fichier
Description
DataSourceClass.js
Contient des fonctions qui définissent la structure de renvoi pour « findDynamicSources() » à la
page 316.
DBTreeControlClass.js
Contient des fonctions qui créent une commande d'arborescence de base de données. Cette classe
permet de créer et d'interagir avec une commande d'arborescence de base de données. Pour créer
une commande d'arborescence de base de données comme celle des comportements de serveurs de
jeux d'enregistrements avancés, créez une liste <select> spéciale avec type="mmdatabasetree"
dans votre fichier HTML. Joignez une classe CBTreeControl à la commande HTML en transmettant
le nom de la liste <select> à l'é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étés des objets et des
comportements de serveur pour les contrôles de formulaires ASP.NET qui sont traduits.
dwscripts.js
Vous trouverez dans le fichier principal des fonctions utiles à toutes les extensions Dreamweaver. Il
comprend des fonctions permettant d'utiliser des chaî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é très largement
dans l'implémentation des comportements de serveur dans Dreamweaver.
dwscriptsServer.js
Ce fichier est une extension du fichier dwscripts.js. Il contient des fonctions spécifiques aux modèles
de serveur. Un grand nombre de ces fonctions sont utilisées pour travailler avec les comportements
de serveur.
GridControlClass.js
Utilisez cette classe pour créer et manipuler une grille modifiable. Vous devez ajouter une liste de
sélection spéciale à votre page HTML et y joindre cette classe dans JavaScript pour manipuler la grille.
ImageButtonClass.js
Cette classe facilite le contrôle de l'aspect du bouton: pression, survol de souris pendant pression,
survol de souris et désactivé pendant pression.
ListControlClass.js
Contient des fonctions permettant de gérer une balise <select>. Egalement appelé contrôle de liste.
Les méthodes de l'objet ListControl dans ce fichier permettent d'obtenir, de définir et de changer
la valeur de la commande SELECT.
PageSettingsASPNet.js
Contient des fonctions qui définissent les propriétés d'un document ASP.NET.
RadioGroupClass.js
Contient les fonctions permettant de définir et de gérer un groupe de boutons radio. Les méthodes de
l'objet RadioGroup de ce fichier permettent de dé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ôler leur comportement.
SBDatabaseCallClass.js
Sous-classe de la classe ServerBehavior. Cette classe comprend des fonctionnalités spécifiques
à la création d'appels de bases de données, par exemple l'appel d'une procédure stocké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 être créée et utilisée seule. Pour l'utiliser, vous devez définir
SBDatabaseCall() comme sous-classe et implémenter les fonctions d'espace réservé.
Dreamweaver utilise cette classe pour implémenter ses comportements de serveur de jeux
d'enregistrements et de procédures stockées.
ServerBehaviorClass.js
Contient des fonctions permettant de communiquer des informations concernant les comportements
de serveur à Dreamweaver. Vous pouvez définir cette classe en sous-classe lorsque vous implémentez
vos comportements de serveur.
ServerSettingsASPNet.js
Contient des fonctions permettant de stocker les propriétés d'un serveur ASP.NET.
SQLStatementClass.js
Contient des fonctions permettant de créer et de modifier des instructions SQL telles que SELECT,
INSERT, UPDATE, DELETE et des instructions de procédures stockées.
tagDialogsCmn.js
Contient des fonctions visant à vous aider à développer des boîtes de dialogue de balise
personnalisées. Les méthodes de l'objet tagDialog définies dans ce fichier modifient les attributs et
les valeurs d'une balise particulière.
EXTENSION DE DREAMWEAVER CS4 386
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éthodes de l'objet TagEdit définies dans ce fichier permettent d'obtenir et de définir la valeur,
les attributs et les enfants d'une balise.
TreeControlClass.js
Contient des fonctions permettant de gérer une commande d'arborescence dans Dreamweaver. Les
méthodes de l'objet TreeControl définies dans ce fichier permettent d'obtenir, de définir et
d'organiser les valeurs dans une arborescence. Vous devez joindre cette classe à une balise
MM:TREECONTROL spéciale dans votre page HTML pour gérer la fonctionnalité de la commande
d'arborescence.
XMLPropSheetClass.js
Contient des fonctions permettant de gérer l'emplacement et les valeurs d'une fiche de propriétés
XML.
Dossier MM
Le dossier MM contient les scripts, les images et les classes partagés utilisés par les extensions fournies avec
Dreamweaver, comme les scripts de création d'une barre de navigation, de spécification des appels préchargés et de
dé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ées aux composants Adobe ColdFusion. Les fonctions permettent
d'analyser les attributs depuis la balise d'ouverture d'un nœud donné, 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 événements, de notifier les parties des
événements à partir du fichier menus.xml et d'ajouter des notificateurs d'événement au fichier
menus.xml.
FlashObjects.js
Contient des fonctions permettant de mettre à jour un sélecteur de couleur, de vérifier la couleur
hexadécimale, de vérifier un lien absolu, d'ajouter une extension à un nom de fichier, de générer des
messages d'erreur, de définir des attributs Flash, de vérifier un lien vers un objet Flash, etc.
insertFireworksHTML.js
Contient des fonctions permettant d'insérer du code HTML provenant d'Adobe Fireworks CS3 dans les
documents Dreamweaver. Les fonctions permettent de vérifier si le document en cours est un
document Fireworks, d'insérer du code HTML Fireworks au point d'insertion, de mettre à jour le bloc
de style Fireworks par rapport à Dreamweaver, etc. Contient également des fonctions utilitaires
apparentées.
jumpMenuUI.js
Contient des fonctions à utiliser avec l'objet menu de reroutage et le comportement menu de
reroutage. Les fonctions permettent de compléter les options de menus, de créer une é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
éléments de la barre de navigation. Comprend des fonctions permettant d'ajouter, de supprimer et de
manipuler des éléments de la barre de navigation.
NBInit.js
Contient des fonctions liées aux comportements des images de barre de navigation.
pageEncodings.js
Définit différents codes de langue.
preload.js
Contient des fonctions permettant d'ajouter et de supprimer des appels d'images pré chargées dans
le gestionnaire BODY/onLoad MM_preloadImages.
EXTENSION DE DREAMWEAVER CS4 387
Dossier Shared
Fichier
Description
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éterminent l'interface à afficher,
simple ou avancée. Héberge également des fonctionnalités partagées entre les implémentations de
l'interface utilisateur et permet de passer d'une interface utilisateur à une autre.
sbUtils.js
Contient des fonctions partagées à utiliser dans les comportements de serveur Adobe. La classe
dwscripts du dossier Configuration/Shared/Common/Scripts contient des utilitaires plus généraux.
setText.js
Contient des fonctions permettant de quitter une chaîne d'expression, de revenir à une chaîne
d'expression et d'extraire une chaî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éfinir le pointeur de la souris en icône de main ou en pointeur et
de vérifier le type et la version du navigateur.
Le dossier Scripts contient é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ôle de case à cocher dans votre extension HTML.
FileClass.js
Contient une classe représentant un fichier dans le système de fichiers. Les chemins sont représentés
par des URL pour garantir la compatibilité entre plates-formes. Les mé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é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ée et gère une liste de paires nom/valeur. Les noms peuvent comporter n'importe quels caractères.
Les valeurs peuvent être vides, mais elles ne peuvent pas être définies sur null, qui reviendrait à les
supprimer.
PageControlClass.js
Exemple d'une classe de page à utiliser avec la classe TabControl. Consultez la description de
TabControlClass.js.
PreferencesClass.js
Contient un objet et des méthodes contenant toutes les informations de préfé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 à créer une extension ayant plusieurs onglets, page.lastUnload().
Dossier CMN
Le dossier CMN contient les fonctions utilitaires suivantes :
EXTENSION DE DREAMWEAVER CS4 388
Dossier Shared
Fichier
Description
dateID.js
Contient deux fonctions, createDateID() et decipherDateID(). Pour trois chaînes données,
"dayFormat", "dateFormat" et "timeFormat", createDateID() crée un ID pour chacune
d'elles. Appliquée à une plage de dates, la fonction decipherDateID() renvoie une plage
contenant trois éléments : dayFormat, dateFormat et timeFormat.
displayHelp.js
Contient une fonction permettant d'afficher le document d'aide spécifié.
docInfo.js
Contient des fonctions qui fournissent des informations sur le document de l'utilisateur. Ces fonctions
permettent d'effectuer des opérations telles que le renvoi d'un tableau de références d'objets pour un
type de navigateur et une balise spécifiés, le renvoi de toutes les instances d'un nom de balise spécifié,
la recherche d'une balise qui entoure la sélection en cours, etc.
DOM.js
Contient des fonctions d'aide géné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é, de
créer une liste de nœuds à partir du nœud de départ spécifié, de vérifier si une balise donnée est
contenue dans une autre balise, d'effectuer diverses opérations sur les fonctions de comportement,
etc.
enableControl.js
Contient une fonction, SetEnabled(), qui permet d'activer ou de désactiver une commande en
fonction des arguments qu'elle reçoit. Il est possible d'activer une commande déjà activée ou de
désactiver une commande déjà désactivée.
errmsg.js
Contient des fonctions de connexion pour accumuler la sortie de tracés dans un tableau de pages de
connexion qui apparaissent dans une boîte de dialogue.
file.js
Contient des fonctions en rapport avec des opérations sur les fichiers. Ces fonctions permettent à
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éterminer si un document spécifié a
été enregistré sur le site en cours et de renvoyer son chemin relatif, ou de déterminer si un fichier
spécifié est ouvert.
form.js
Contient des fonctions permettant d'ajouter un formulaire autour d'une chaîne de texte donnée si un
formulaire n'existe pas déjà dans le document ou l'élément PA en cours. Comprend des fonctions
permettant de déterminer si un objet est un élément PA et si le point d'insertion se trouve à l'intérieur
d'un formulaire.
handler.js
Contient des fonctions permettant d'obtenir une fonction pour un gestionnaire d'événement,
d'ajouter une fonction à un gestionnaire d'événement et de supprimer une fonction d'un gestionnaire
d'événement.
helper.js
Contient diverses fonctions utiles permettant de remplacer le codage, de rétablir les guillemets ("), de
vérifier si un nœud se trouve dans une plage de sélection et de vérifier s'il existe des noms d'objets en
double.
insertion.js
Contient la fonction insertIntoDocument(), qui insère une chaîne de texte dans un document au
point d'insertion. Contient également les fonctions de prise en charge getHigherBlockTag() et
arrContains(). La fonction getHigherBlockTag() permet d'obtenir le prochain blockTag le
plus élevé, comme défini dans le tableau blockTag. La fonction arrContains() permet de localiser
un élément spécifié dans un tableau.
localText.js
Variables réservées, non destinées à un usage général. Utilisez Startup/mminit.htm à la place ou
utilisez les chaînes provenant des fichiers Dreamweaver Configuration/Strings/*.xml.
menuItem.js
Contient des fonctions qui ajoutent ou suppriment des valeurs d'un élément de menu.
niceName.js
Contient des fonctions permettant de convertir un tableau de références Object en un tableau de
noms plus simples.
quickString.js
Contient des fonctions permettant de regrouper des chaînes de petite taille sans avoir à allouer de la
mémoire à chaque fois.
EXTENSION DE DREAMWEAVER CS4 389
Dossier Shared
Fichier
Description
string.js
Contient un ensemble générique de fonctions permettant de manipuler et d'analyser des chaî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èles Dreamweaver. Ces fonctions permettent d'insérer
une région modifiable dans un document, d'insérer une région répétée dans un document, de
rechercher une région modifiable spécifiée dans un document, etc.
UI.js
Contient des fonctions génériques qui contrôlent l'interface utilisateur. Ces fonctions permettent de
localiser un objet désigné dans le document en cours, de charger les options de liste de sélection avec
des chaînes localisées, de renvoyer la valeur de l'attribut d'une option sélectionnée et d'envelopper le
message d'une alerte.
Autres dossiers
La liste suivante décrit les autres dossiers intéressants du dossier Shared :
Dossier Controls Le dossier Controls contient les éléments utilisés pour créer un comportement de serveur. Ces
contrôles comprennent des interfaces pour les menus de texte et de jeux d'enregistrements.
Remarque : Ces contrôles sont utilisés par le Créateur de comportements de serveur de Dreamweaver et par de nombreux
comportements de serveur de Dreamweaver, mais certains sont utiles pour gérer un contrôle dans votre extension.
Fireworks Le dossier Fireworks contient les fichiers de prise en charge pour l'intégration de Fireworks.
UltraDev Dreamweaver conserve ce dossier principalement pour des raisons de compatibilité. Il ne doit pas être utilisé
pour les nouvelles extensions. Utilisez le dossier Dreamweaver Configuration/Shared/Common, qui contient
également la majeure partie de cette fonctionnalité. Voir « Dossier Common » à la page 384.
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és les plus courantes et les plus récentes.
Les extensions peuvent utiliser les ressources du dossier Shared pour leur propre fonctionnalité. Un objet, une
commande ou une autre extension peuvent spé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ê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 :
<script language="javascript"
src="../../Shared/Common/Scripts/ListControlClass.js"></script>
<script language="javascript" src="Hyperlink.js"></script>
Si vous ouvrez le fichier Hyperlink.js apparenté, les lignes suivantes s'affichent :
LIST_LINKS = new ListControl('linkPath');
et
LIST_TARGETS = new ListControl('linkTarget');
EXTENSION DE DREAMWEAVER CS4 390
Dossier Shared
Avec les nouvelles déclarations new listControl, Hyperlink.js définit deux nouveaux objets ListControl. Le code du
fichier Hyperlink.htm les joint ensuite aux commandes SELECT du formulaire, comme suit :
<td
align="left"> <input name="linkText" type="text" class="basicTextField" value="">
et
<td align="left" nowrap><select name="linkPath" class="basicTextField" editable="true">
Le script Hyperlink.js peut maintenant appeler les méthodes ou obtenir les propriétés des objets LIST_LINKS ou
LIST_TARGETS pour qu'ils interagissent avec les commandes SELECT du formulaire.
391
Index
A
action, balise 156
activate, balise 157
arguments
receiveArguments() 174
transmis depuis la balise menuitem 162
B
balise à Sélecteur de balises
ajout 222
addDynamicSource() 314
arguments, attribut 195
balise d'élément 13
Affichage en direct
arrêt, commandes 83
balise Insertbar.xml
à propos 77
aide, affichage 85
aspect des boîtes de dialogue 5
hiérarchie 112
balise property
alert() 102
assistance, fonctions dans les
comportements 247
analyzeServerBehavior() 264
attribut blockStart
ancrage de barres d'outils 178
description 62
balise searchPattern 285, 286
API d'extension, types 80
valeur customText 63
balise tagspec 7
API de la fenêtre de résultats 206
valeur innerTag 63
balise XML
API de vérification des problèmes 135
valeur innerText 62
API de vérification des problèmes de
compatibilité du navigateur 133
valeur nameTag 64
API, types
à propos 46
validation du code 72
codehints 38
toolbar 181
valeur nameTagScript 64
balise, objet 107
valeur outerTag 63
balises
commande de barre d'outils 195
attribut Crosstag, indicateurs de code 37
commandes 147
attribut image 115, 191
commandes de menu 171
attribute, balise 296
attributes 296
comportement de serveur 264
attributes, balise 296
closeTag 297
comportements 252
attributs
delete 291
enregistrement 220
balises de fichiers EDML
éditeur de balises 223
arguments 195
display 296
extensibilité de niveau C 367
balises d'éléments de barre d'outils 190
group 273, 274
fenêtre de résultats 206
checked 116, 193
groupParticipant 278
formatage des données 319
colorRect 192
groupParticipants 277
formats de serveur 321
command 117, 195
insertText 281
inspecteur Propriétés 231
disabledImage 191
openTag 295
modèle de serveur 338
domRequired 193
participant 279
objets 128
enabled 116, 193
quickSearch 280
panneau Composants 328
file 117, 193
searchPattern 285
panneau flottant 240
id 115, 190
searchPatterns 284, 292
problèmes 135
image 115, 191
title 276
rapports 209
label 192
translation 293
sources de données 314
menu_ID 192
translations 293
traducteur de données 345
overImage 191
translator 292
application, balise 24
showIf 190
updatePattern 289, 290
applyBehavior() 252
tooltip 191
applyFormat() 321
update 194
applyFormatDefinition() 322
value 193
searchPattern 286
applySB() 270
width 192
balises propriétaires
applyServerBehavior() 265
attributs traduits
updatePatterns 289
balises EDML
applyTag() 224
individuels 346
modification de la couleur de
surbrillance 10
appName, propriété 109
inspection 347
personnalisation de l'interprétation 6
appVersion, propriété 109
multiples 347
prévention de la correction 10
arborescence, XML 102
recherche dans les balises 107
Architecture de Dreamweaver 260
attributs, propriété 107
tagspec 7
balises traduites, inspection 349
EXTENSION DE DREAMWEAVER CS4 392
Index
balises, éléments de barre d'outils 185
bouton radio, objet 102
balise charStart 52
barre d'outils de codage
bouton, objet 102
balise commentEnd 53
brackets, balise
balise commentStart 52
personnalisation 28
barre d'outils, à propos des extensions 80
barre Insertion
coloration du code 51
button, balise 114, 185
ajout d'objets 119
fichier de définition 112
balise cssImport 53
balise cssMedia 53
balise cssProperty 53
balise cssSelector 54
fichiers d'objet 111
C
C, extensions 364
modification 118
cadre applicatif Spry, indicateurs de code 32
balise defaultAttribute 55
calque, objet 102
balise defaultTag 55
à propos du comportement 177
canAcceptBehavior() 254
balise defaultText 55
à propos du comportement des
commandes 178
canAcceptCommand() 164, 167, 172, 179,
196
balise endOfLineComment 56
ancrage 178
canApplyServerBehavior() 266
balise functionKeyword 56
API de commande 195
canDrag, attribut 115
balise idChar1 56
attributs des balises 181, 190
canInsertObject() 128
balise idCharRest 57
balises d'éléments 185
canRecognizeDocument() 338
balise ignoreCase 57
button, balise 185
case à cocher, objet 102
balise ignoreMMTParams 57
checkbutton, balise 186
category, balise 113
balise ignoreTags 58
colorpicker, balise 189
chaîne, objet 102
balise isLocked 58
combobox, balise 188
chaînes localisées 16
balise keyword 58
contrôles 177
chaînes, localisables 87
balise keywords 58
création 177
charEnd, balise
balise numbers 59
barres d'outils
définition de fichier 181
dropdown, balise 188
editcontrol, balise 189
fichier de commande simple 179
coloration du code 52
charEsc, balise
coloration du code 52
charStart, balise
balise cssValue 54
balise entity 56
balise operators 59
balise regexp 60
balise sampleText 60
balise scheme 49
include/, balise 183
coloration du code 52
itemref/, balise 184
checkbutton, balise 114, 186
balise stringEnd 61
itemtype/, balise 183
checked, attribut 116, 193
balise stringEsc 62
menubutton, balise 187
childNodes, propriété
balise stringStart 61
balise searchPattern 61
radiobutton, balise 186
des objets de balise 107
balise tagGroup 62
separator, balise 184
des objets de commentaire 108
exemple de texte CSS 70
toolbar, balise 181
des objets de document 105
exemple de texte JavaScript 71
toolbars.xml, fichier 177
des objets texte 108
exemples 69
beginReporting() 210
Class, dossier 387
fichier 48
behaviorFunction() 253
clearInterval() 102
JavaScript 70
bibliothèques de balises 213
clearTimeout() 102
modification de modèles 68
block, balise 260
close() 102
style, fichier Colors.xml 48
blockEnd, balise, coloration du code 50
closeTag, balise 297
blockStart, balise
CMN, dossier 387
colorpicker, balise 189
coloration des délimiteurs de bloc de
modèle 62
colorRect, attribut 192
blur() 102
body, propriété 105
coloration du code
coloration du code 51
boîte de dialogue
ajout 123
à propos 47
balise blockEnd 50
boîtes de dialogue, personnalisation de
l'aspect 5
balise blockStart 51
booléen, objet 102
balise charEnd 52
bouton de couleur 96
balise charEsc 52
balise brackets 51
traitement de modèles 64
Colors.xml, fichier 48
combobox, balise 188
command, attribut 117, 195
commandButtons() 147, 172, 211
commande d'arborescence
manipulation du contenu 96
EXTENSION DE DREAMWEAVER CS4 393
Index
ajout aux menus 140
dossiers 83, 375
désinstallation dans une configuration
multi-utilisateur 13
ajout de fichiers SWF Flash 97
personnalisation 11
détection, compatibilité du navigateur 133
barre d'outils 178
réinstallation et désinstallation 13
disabledImage, attribut 191
commandes de menu 150
suppression de fichiers de
configuration 12
display, balise 296
commandes
exemple de code 140
configuration multi-utilisateur
displayHelp()
confirm() 102
dans l'API de comportement de
serveur 267
à propos 92
constantes de nœud 102
dans l'API de l'inspecteur Propriétés 232
ajout 92
contenu verrouillé, inspection 349
dans l'API de panneau flottant 240
création 93
Conventions, dans ce manuel 3
dans l'API de sources de données 315
commandes de base de données 92
copyServerBehavior() 266
dans l'API des objets 129
commandes de grille de variables 93
Création d'une extension 2
dans les API de comportement 255
commandes de menu
cssImport, balise
expérience utilisateur 139
commandes d'arborescence
à propos 160
exemple de code 163
expérience utilisateur 162
extensions, à propos 80
modification 159
commandes JavaScript personnalisées 90
commentEnd, balise
coloration du code 53
commentStart, balise
coloration du code 52
compatibilité du navigateur, détection 133
comportement de serveur
exemple 261
configureSettings() 211
coloration du code 53
cssMedia, balise
coloration du code 53
cssProperty, balise
coloration du code 53
cssSelector, balise
coloration du code 54
css-support, balise
validation du code 72
cssValue, balise
coloration du code 54
customText, valeur
blockStart 63
fichiers participant 261
résolution du modèle de recherche 301
comportements
D
data, propriété
des objets de commentaire 108
des objets texte 108
API 252
dataSource, attribut 275
exemple de code 248
date, objet 102
expérience utilisateur 246
defaultAttribute, balise
fonctions d'assistance 247
fonctions obligatoires 252
insertion de plusieurs fonctions 247
comportements de serveur
dossiers et fichiers 260
Document Object Model
spécification DOM de niveau 1 102
document, balise 25
document, ouverture 23
documentEdited() 240
documentElement, propriété 105
documents par défaut, personnalisation 4
DOM de document utilisateur et d'extension
distinction 102
DOM de Dreamweaver 102
à propos 101
domRequired, attribut 193
Données dynamiques, boîte de dialogue 305
extensions, à propos 81
fichiers groupe 260
dans les fichiers d'objet 129
DOCTYPE, instructions 89
coloration du code 55
defaultTag, balise
coloration du code 55
defaultText, balise
coloration du code 55
dossier menu, enregistrement du fichier de
commandes 165
dossier Shared
contenu 384
contenu du dossier Common 384
dossiers supplémentaires 389
dossiers et fichiers, comportement de
serveur 260
Dreamweaver CS4
nouvelles fonctionnalités 2
dreamweaver, objet 109
Dreamweaver, personnalisation 4
dropdown, balise 188
fonctions dwscripts 269
delete, balise 291
mise à jour 302
deleteBehavior() 255
applySB() 270
recherche 297
deleteditems, balise 12
deleteSB() 271
suppression 303
deleteDynamicSource() 314
findSBs() 269
techniques 297
deleteFormat() 323
vue d'ensemble 259
deleteSB() 271
dwscripts functions
composant de service, ajout 327
deleteServerBehavior() 267
E
editcontrol, balise 189
conceptions de pages 4
deleteType, attribut 291
editDynamicSource() 315
démarrage, commandes 83
description, balise 39
EXTENSION DE DREAMWEAVER CS4 394
Index
éditeur de balise
Extension Manager
isOptional, attribut 288
création 219, 223
instructions 88
limitSearch, attribut 287, 294
exemples 219
utilisation 87
location, attribut 281
éditeurs de balises 213
EDML, balises
whereToSearch, attribut 284
EDML, fichiers
extension Script Editor
code JavaScript 237
extensions
name, attribut 278
nodeParamName, attribut 283
paramName, attribut 290
à propos de 1
paramNames, attribut 286
à propos 260
affichage de l'aide 85
partType, attribut 278
balises de fichiers Groupe 273
commande de bouton couleur 96
selectParticipant, attribut 277
modification 271
comment Dreamweaver traite
JavaScript 85
serverBehavior, attribut 274
contenu du dossier Shared 384
translationType, attribut 294
fonctionnalités 80
version, attribut 280
structure EDML 273
élément de menu
création 239
enabled, attribut 116, 193
endOfLineComment, balise
coloration du code 56
endReporting() 210
entity, balise
coloration du code 56
envoyer, objet 102
escape() 102
espace de travail
à propos 178
présentations, personnalisation 24
événements
dans les fichiers d'extension 102
rôle dans les comportements 246
installation 1
subType, attribut 275
whereToSearch, attribut 293
extensions d'inspecteur, à propos 81
Fichier Formats.xml 319
extensions de boîte de dialogue de balises, à
propos 80
fichier Groupe, balises 273
extensions de commande, à propos 80
extensions de comportement, à propos 81
extensions de composant, à propos 81
extensions de document 21
extensions de fragment de code, à propos 82
extensions de panneau, à propos 81
extensions de rapport, à propos 80
extensions de source de données
à propos 81
documents ColdFusion 307
fichier insertbar.xml
modification 122
fichier JavaScript
création 308
fichier menus.xml
à propos 150
action, balise 156
activate, balise 157
menu, balise 151
menubar, balise 151
menuitem, balise 152
event, balise 47
extensions de traducteur de données, à
propos 81
exemple
Extensions et dossiers de configuration 82
override, balise 157
boîte de dialogue Flash 97
extensions, rechargement 84
separator, balise 154
extension de rapport autonome 207
Extensions.txt, fichier 21
shortcut, balise 155
mode En direct 78
exemples
modification 158
shortcutlist, balise 154
barre d'outils simple 179
F
fenêtre, objet 102
éditeur de balises 219
fichier CodeHints.xml
tool, balise 156
fichier mm_deleted_files.xml
à propos 12
extension de comportement 248
contenu 33, 34
balise deleteditems 12
extension du menu Commandes 140
description 32
balise item 13
menus dynamiques 166
panneau flottant 235
Problèmes 133
rapport de site 205
traducteur d'attributs 353
fichier de définition de balise
création 220
fichier de définition de source de données
création 307
fichier mm_jsapi.h
exemple 382
inclusion 366
fichiers
fichier de définition, type de document 14
chaîne XML 86
expressions régulières dans les fichiers
EDML 272
fichier de script 261
CodeHints.xml 33
extensibilité de niveau C, dans les
traducteurs 345, 366
fichier EDML
extension
création 2
localisation 86
Extension Data Markup Language
(EDML) 260
comportement de serveur 261
création 308
fichier EDML, balises
insertbar.xml 119
menus.xml 150
mm_deleted_files.xml 12
MMDocumentTypes.xml 14
attribute 296
SpryCodeHints.xml 34
dataSource, attribut 275
toolbars.xml 177
deleteType, attribut 291
XML 102
EXTENSION DE DREAMWEAVER CS4 395
Index
fichiers apparentés 75
à propos 75
fichiers apparentés, API 77
fichiers d'action 246
isDOMRequired() 148
fonctions de l'API de panneau flottant
receiveArguments() 149
displayHelp() 240
windowDimensions() 149
documentEdited() 240
fonctions d'API des commandes de menu
getDockingSide() 241
Fichiers d'inspecteur Propriétés 226
canAcceptCommand() 172
initialPosition() 241
fichiers de chaîne 86
commandButtons() 172
initialTabs() 242
fichiers de commande de prise en charge
getDynamicContent() 172
isATarget() 242
isCommandChecked() 173
isAvailableInCodeView() 243
fichiers de mappage, raccourcis clavier 29
receiveArguments() 174
isResizable() 243
Fichiers de source de données 305
setMenuText() 175
fichiers EDML
windowDimensions() 175
création 311
utilisation d'expressions régulières 272
fichiers groupe
comportement de serveur 260
fichiers JavaScript externes 85
fichiers XML
fonctions d'API des rapports
rapports autonomes 206
fonctions de l'API de commande de barre
d'outils
canAcceptCommand() 196
selectionChanged() 237, 244
fonctions de l'API de rapports
beginReporting() 210
commandButtons() 211
configureSettings() 211
endReporting() 210
processfile() 209
à propos 102
getCurrentValue() 196
chaîne 86
getDynamicContent() 197
CodeHints.xml 33
getMenuID() 198
JS_BooleanToValue() 371
Formats.xml 319
getUpdateFrequency() 199
JS_DefineFunction() 367
insertbar.xml 119
isCommandChecked() 200
JS_DoubleToValue() 371
menus.xml 150
isDOMRequired() 201
JS_ExecuteScript() 374
MMDocumentTypes.xml 14
receiveArguments() 202
JS_GetArrayLength() 373
SpryCodeHints.xml 34
showIf() 202
JS_GetElement() 373
fichiers XMl
toolbars.xml 177
file, attribut 117, 193
findDynamicSources() 316
findIssue() 135
findSBs() 269
findServerBehaviors() 268
Flash SWF, fichiers, affichage dans
Dreamweaver 97
fonctions de l'API de comportement de
serveur
analyzeServerBehavior() 264
applyServerBehavior() 265
canApplyServerBehavior() 266
copyServerBehavior() 266
deleteServerBehavior() 267
displayHelp() 267
findServerBehaviors() 268
focus() 102
inspectServerBehavior() 268
fonction, objet 102
pasteServerBehavior() 269
fonctions C
fonctions de l'API de formats de serveur
appel depuis JavaScript 382
applyFormat() 321
dans le fichier mm_jsapi.h 366
applyFormatDefinition() 322
fonctions d'API de comportement
deleteFormat() 323
applyBehavior() 252
formatDynamicDataRef() 323
behaviorFunction() 253
inspectFormatDefinition() 324
canAcceptBehavior() 254
fonctions de l'API de l'éditeur de balises
deleteBehavior() 255
applyTag() 224
displayHelp() 255
inspectTag() 223
identifyBehaviorArguments() 255
validateTag() 224
inspectBehavior() 257
windowDimensions() 258
fonctions d'API des commandes
canAcceptCommand() 147
commandButtons() 147
fonctions de l'API de l'inspecteur Propriétés
canInspectSelection() 231
displayHelp() 232
inspectSelection() 232
windowDimensions() 211
fonctions de l'API des extensions C
JS_IntegerToValue() 372
JS_NewArrayObject() 373
JS_ObjectToValue() 372
JS_ObjectType() 372
JS_ReportError() 374
JS_SetElement() 374
JS_StringToValue() 370
JS_UCStringToValue() 371
JS_ValueToBoolean() 369
JS_ValueToDouble() 368
JS_ValueToInteger() 368
JS_ValueToObject() 369
JS_ValueToString() 368
JS_ValueToUCString() 370
JSNative 367
MM_ConfigFileExists() 377
MM_CreateConfigFolder() 381
MM_DeleteConfigFile() 382
MM_GetConfigFileAttributes() 379
MM_GetConfigFolderList() 377
MM_OpenConfigFile() 378
MM_RemoveConfigFolder() 381
MM_SetConfigFileAttributes() 380
fonctions de l'API des modèles de serveur
à propos 338
canRecognizeDocument() 338
EXTENSION DE DREAMWEAVER CS4 396
Index
getFileExtensions() 339
formats de serveur 319
getVersionArray() 344
getLanguageSignatures() 340
formulaire (champ), objet 102
groupParticipant, balise 278
getServerExtension() 340
formulaire, objet 102
groupParticipants, balise 277
getServerInfo() 341
FTP, mappages
getServerLanguages() 341
modification 13
getServerModelDelimiters() 342
function, balise 42
H
handleDesignViewDrop() 333
getServerModelDisplayName() 343
functionKeyword, balise
handleDoubleClick() 334
getServerModelExtDataNameUD4() 342
coloration du code 56
getServerModelFolderName() 343
getServerSupportsCharset() 343
getVersionArray() 344
fonctions de l'API des objets
canInsertObject() 128
pour les objets de balise 107
G
generateDynamicDataRef() 316
generateDynamicSourceBindings() 317
gestionnaires d'événement
displayHelp() 129
renvoi d'une valeur 247
insertObject() 130
gestionnaires d'événements
isDOMRequired() 129
objectTag() 131
dans les boîtes de dialogue de
comportement 246
windowDimensions() 131
dans les fichiers d'extension 85
fonctions de l'API des sources de données
hasChildNodes()
pour les objets de commentaire 108
pour les objets de document 105
pour les objets texte 108
hasTranslatedAttributes() 107
havePreviewTarget() 168
hline 226
HTML
mise en forme par défaut, modification 74
propriétés inner/outer 107
getAffectedBrowserDisplayNames() 137
addDynamicSource() 314
getAffectedBrowserProfiles() 136
deleteDynamicSource() 314
getAttribute() 107
I
Icône du marqueur de script 244
displayHelp() 315
getCodeViewDropCode() 330
id, attribut 115, 190
editDynamicSource() 315
getComponentChildren() 328
idChar1, balise
findDynamicSources() 316
getContextMenuId() 329
generateDynamicDataRef() 316
getCurrentValue() 180, 196
generateDynamicSourceBindings() 317
getDockingSide() 241
inspectDynamicDataRef() 318
getDynamicContent() 172, 197
identifyBehaviorArguments() 255
getElementsByAttributeName,
propriété 106, 108
ignoreCase, balise
fonctions de l'API du panneau Composants
getCodeViewDropCode() 330
getComponentChildren() 328
getContextMenuId() 329
getSetupSteps() 331
handleDesignViewDrop() 333
handleDoubleClick() 334
setupStepsCompleted() 332
toolbarControls() 335
fonctions de l'API du traducteur de
données 360
getElementsByTagName()
pour les objets de balise 107
pour les objets de document 105
getFileExtensions() 339
getIssueDescription() 138
getIssueID() 137
getIssueName() 137
getLanguageSignatures() 340
getMenuID() 198
getTranslatorInfo() 360
getServerExtension() 340
liveDataTranslateMarkup() 363
getServerInfo() 341
translateDOM() 362
getServerLanguages() 341
translateMarkup() 362
getServerModelDelimiters() 342
fonctions JavaScript
ajout 120
getServerModelDisplayName() 343
getServerModelExtDataNameUD4() 342
fonctions, déconseillées 3
getServerModelFolderName() 343
formatage des données
getServerSupportsCharset() 343
à propos 319
getSetupSteps() 331
appel des fonctions 321
getTranslatedAttribute() 107
formatDynamicDataRef() 323
getTranslatorInfo() 360
formats 319
getUpdateFrequency() 199
coloration du code 56
idCharRest, balise
coloration du code 57
coloration du code 57
ignoreMMTParams, balise
coloration du code 57
ignoreTags, balise
coloration du code 58
image de la barre Insertion
création 122
image, objet 102
include/, balise 183
indicateurs de code
à propos 32, 82
balise codehints 38
balise description 39
balise function 42
balise menu 40
balise menugroup 39
balise menuitem 41
balise method 43
balise optionparammenu 45
balise parammenu 44
balise property 46
déclaration des classes 36
EXTENSION DE DREAMWEAVER CS4 397
Index
event 47
item() 102
JavaScript 34
itemref/, balise 184
optionparammenuitem 46
itemtype/, balise 183
masqué (champ), objet 102
parammenuitem 44
indicateurs de code JavaScript 34
informations sur la langue 109
initialPosition() 241
M
manipulation du contenu de commande
d'arborescence 96
J
JavaScript
commandes 90
math, objet 102
menu
modification 159
initialTabs() 242
fichiers externes 85
menu Commandes, modification 161
innerHTML, propriété 107
URL 85
menu déroulant de la barre Insertion
innerTag, valeur
blockStart 63
JS_BooleanToValue() 371
JS_DefineFunction() 367
construction 125
menu Insertion
ajout d'objets 119
innerText, valeur, blockStart 62
JS_DoubleToValue() 371
insertbar, balise 113
JS_ExecuteScript() 374
menu_ID, attribut 192
insertbar.xml, fichier 111, 119
JS_GetArrayLength() 373
menu, balise 40, 151
insertObject() 130
JS_GetElement() 373
menubar, balise 151
insertText, balise 281
JS_IntegerToValue() 372
menubutton, balise 113, 187
inspectBehavior() 257
JS_NewArrayObject() 373
menugroup, balise 39
inspectDynamicDataRef() 318
JS_ObjectToValue() 372
menuitem, balise 41, 152
inspecteur de liaison 305
JS_ObjectType() 372
menus
inspecteurs Propriétés
JS_ReportError() 374
à propos 82
attributs traduits 347
JS_SetElement() 374
commandes 161
commentaires en tête de fichier 226
JS_StringToValue() 370
modification 158
exemple de code 228
JS_UCStringToValue() 371
expérience utilisateur 227
JS_ValueToBoolean() 369
modification, déroulants et
contextuels 160
icône éclair 347
JS_ValueToDouble() 368
mot clé *LOCKED* 349
JS_ValueToInteger() 368
personnalisés 226
JS_ValueToObject() 369
pour contenu verrouillé 349
JS_ValueToString() 368
structure des fichiers 226
JS_ValueToUCString() 370
vue d'ensemble 226
JSBool, valeur booléenne 366
inspectFormatDefinition() 324
JSContext, type de données 366
inspectServerBehavior() 268
JSNative 367
inspectTag() 223
JSObject, type de données 366
installation d'une extension 1
jsval 366
Intégration de Photoshop 99
interface utilisateur d'extension 88
interface utilisateur de l'éditeur de balises
création 221
interpréteur JavaScript
extensions C 366
K
keyword, balise
coloration du code 58
keywords, balise
coloration du code 58
types de données 366
isATarget() 242
isAvailableInCodeView() 243
L
label, attribut 192
isCommandChecked() 173, 200
limitSearch, attribut 287, 294
isdomrequired, attribut 153
listes de sélection modifiables 90
isDOMRequired() 129, 148, 201
listes modifiables 90
isLocked, balise
liveDataTranslateMarkup() 363
coloration du code 58
isOptional, attribut 288
isResizable() 243
localisation 86
location, attribut 281
menus dynamiques
exemple de code 166
expérience utilisateur 162
method, balise 43
MM_ConfigFileExists() 377
MM_CreateConfigFolder() 381
MM_DeleteConfigFile() 382
mm_deleted_files.xml, fichier
syntaxe de la balise 12
MM_GetConfigFileAttributes() 379
MM_GetConfigFolderList() 377
MM_OpenConfigFile() 378
MM_RemoveConfigFolder() 381
MM_returnValue 247
MM_SetConfigFileAttributes() 380
MM, dossier 386
MM\
TREECOLUMN, balise 94
TREENODE, balise 94
MMDocumentTypes.xml, fichier 14
Mode Fractionnement vertical 75
modèle d'objet de document
à propos 101
arborescence 101
Dreamweaver 102
EXTENSION DE DREAMWEAVER CS4 398
Index
modèles de serveur
O
objectTag() 131
panelframe, balise 25
à propos 338
extensions, à propos 81
objet commentaire 108
panneau Composants
modèles dynamiques 20
modification
éléments de menu 158
modèles, coloration du code 68
modification du type de fichier par défaut 5
Modifier la liste de formats, menu
contextuel Plus (+) 320
objet de document
propriétés et méthodes du DOM de
niveau 1 105
propriétés et méthodes du DOM
Netscape 102
objet de la barre Insertion
copie 118
mot clé *LOCKED* 349
création d'une nouvelle catégorie 119
mot de passe (champ), objet 102
déplacement 118
exemple 120
N
name, attribut 117, 278
extensions, à propos 80
nameTag, valeur
suppression 118
blockStart 64
nameTagScript, valeur
blockStart 64
modification de l'ordre 118
objet, objet 102
objets
ajout à la barre Insertion 119
navigateur cible, validation du code 72
ajout de fichiers SWF Flash 97
navigateur, objet 102
composants 111
nextSibling, propriété 103, 106, 107, 108
création 111
Node.COMMENT_NODE 102
fonctionnement des fichiers 119
Node.DOCUMENT_NODE 102
Objets dynamiques 99
Node.ELEMENT_NODE 102
objets dynamiques
Node.TEXT_NODE 102
exemple 99
nodelist, objet 102
objets texte 108
nodeParamName, attribut 283
onBlur, événement 102
nodeType, propriété
onChange, événement 102
panelset, balise 24
commande d'arborescence 327
extension 325
fichiers 326
panneaux flottants 234
exemple 235
expérience utilisateur 234
extensions, à propos 81
performances 244
parammenu, balise 44
parammenuitem, balise 44
paramName, attribut 290
paramNames, attribut 286
parentNode, propriété
des objets de balise 107
des objets de commentaire 108
des objets de document 105
des objets texte 108
parentWindow, propriété 105
participant, balise 279
Participant, fichiers 261
partType, attribut 278
pasteServerBehavior() 269
personnalisation
aspect des boîtes de dialogue 5
conceptions de pages 4
des objets de balise 107
onClick, événement 102
dans un environnement multiutilisateur 11
des objets de commentaire 108
onFocus, événement 102
documents par défaut 4
des objets de document 105
onLoad, événement 102
Dreamweaver 1
des objets texte 108
onMouseOver, événement 102
interprétation de balises propriétaires 6
nombre, objet 102
onResize, événement 102
panneau Composants 326
nouvelle source de données
openTag, attribut 295
présentations de l'espace de travail 24
test 313
operators, balise
coloration du code 59
plates-formes multi-utilisateur, dossier
Configuration 21, 375
nouvelles fonctionnalités de Dreamweaver
CS4 2
option, objet 102
previousSibling, propriété 103, 106, 107, 108
nœud d'élément 107
optionparammenu, balise 45
processFile() 209
nœud de document 105
optionparammenuitem, balise 46
profils de navigateur
nœud de texte 108
outerHTML, propriété 107
balise css-support 72
nœuds
outerTag, valeur
balise property 72
à propos 102
blockStart 63
arborescence DOM 101
ouverture d'un document 23
commandes d'arborescence 102
overImage, attributs 191
numbers, balise
override, balise 157
coloration du code 59
P
panel, balise 27
panelcontainer, balise 26
balise value 73
Q
quickSearch, balise 280, 298
EXTENSION DE DREAMWEAVER CS4 399
Index
R
raccourcis clavier
setTimeout() 102, 244
traducteurs de données
setupStepsCompleted() 332
débogage 352
fichiers de mappage 29
share-in-memory 304
expérience utilisateur 345
modification 159
shortcut, balise 155
pour attributs 346
radiobutton, balise 186
shortcutlist, balise 154
pour balises ou blocs de code 348
rapports
showif, attribut 116, 190
autonomes 207
showIf() 202
site 204
types 346
traitement de modèles
Shutdown, dossier 83
caractères d'échappement 66
rapports autonomes 206, 207
site, objet 110
caractères génériques 65
rapports de site
site, objet, propriétés de 109
coloration du code 64
à propos 204
Startup, dossier 83
longueur maximale de chaîne 67
fonctionnement 204
stringEnd, balise
receiveArguments() 149, 164, 170, 174, 180,
202
rechargement d'extensions 84
rechargement des extensions 84
regexp, balise
coloration du code 60
coloration du code 61
stringEsc, balise
coloration du code 62
stringStart, balise
coloration du code 61
priorité 67
translateDOM() 362
translateMarkup() 362
translation, balise 293
translations, balise 293
translationType, attribut 294
subType, attribut 275
translator, balise 292
regexp, objet 102
système d'exploitation, userxd5 s 109
TREECOLUMN, balise 94
réinstallation, dans une configuration multiutilisateur 13
systemScript, propriété 109
TREENODE, balise 94
removeAttribute() 107
resizeTo() 102
résolution du modèle de recherche 301
rétablir, objet 102
S
sampleText, balise
coloration du code 60
scénarios, fonctions de l'API des
comportements de serveur
appel 263
scheme, balise
coloration du code 49
Script Editor, extension
T
tableau, objet 102
type de fichier, modification du type par
défaut 5
types de documents
tag, attribut 117
à propos 81
tagGroup, balise
balises dans le fichier de définition 16
coloration du code 62
extensibles 14
tagName, propriété 107
extensions 21
Terminologie des fichiers apparentés 76
fichier de définition 14, 16
textarea, objet 102
fichier de définition, règles 23
texte (champ), objet 102
localisation 16, 22
Texte dynamique, boîte de dialogue 305
modèles dynamiques 20
title, balise 276
tool, balise 156
ouverture, procédure 23
types de documents extensibles 14
toolbar, balise 181
Scripts, sous-dossier 386
toolbars.xml, fichier 177, 181
U
unescape() 102
searchPattern, balise
tooltip, attribut 191
update, attribut 194
traducteurs
updatePattern, balise 289, 290
panneau flottant 235
coloration du code 61
toolbarControls() 335
searchPatterns, balise 284, 292
attribut 346
updatePatterns, balise 289
select() 102
bloc/balise 348
updateScript() 238
Sélecteur de balises 217
débogage 352
URL, propriété 105
sélection, exact/within 226
traducteurs d'attributs
utilisation du dossier Shared 389
sélection, objet 102
à propos 346
selectionChanged() 237, 244
création 346
selectParticipant, attribut 277
débogage 352
V
valeurs intégrées, chaînes localisables 87
separator, balise 115, 154, 184
exemple de code 353
validateTag() 224
serverBehavior, attribut 274
traducteurs de blocs/balises
validation de code 72
setAttribute() 107
à propos 346
value, attribut 193
setInterval() 102
débogage 352
value, balise
setMenuText() 165, 175
exemple de code 356
validation du code 73
EXTENSION DE DREAMWEAVER CS4 400
Index
VBScript 246
vérification de la compatibilité du
navigateur 133
version, attribut 280
vline 226
W
W3C 102
whereToSearch, attribut 284, 293
width, attribut 192
window.close() 102
windowDimensions()
dans l'API des commandes 149
dans l'API des objets 131
dans l'API des rapports 211
dans les actions de comportement 258
dans les commandes de menu 175
X
XML
arborescence 102
structure 273
">