Première partie : Création
Vous pouvez modifier à votre guise cette interface, qui n’est rien d’autre qu’un fichier HTML.
Mais ATTENTION : si vous commencez à modifier l’interface, à l’embellir, à tout régler au pixel près, puis que vous constatez que quelque chose ne fonctionne pas dans le code lui-même, il vous faudra repasser par Modifier un comportement serveur pour corriger le ou les blocs de codes fautifs, et faisant cela, Dreamweaver va écraser le fichier HTM que vous aurez mis tant de temps à peaufiner…
Donc le principe est simple : assurez-vous d’abord que tout fonctionne parfaitement, comme vous le souhaitez, au niveau du code. Faites et refaites des tests!
Selon ce que doit faire votre comportement, rentrez des valeurs absurdes dans les champs de l’interface, essayez de prévoir ce que vont faire d’autres utilisateurs, poussez le bouchon au maximum, de façon à couvrir tous les cas de figures, surtout si vous pensez partager votre extension avec la communauté Dreamweaver.
Dans le pire des cas, si vous avez déjà travaillé sur le fichier HTML, pensez à le sauvegarder avant de modifier le comportement, ceci afin de pouvoir récupérer des éléments de l’interface par copier/coller.
Pour aller plus loin
Quand un comportement a été créé, Dreamweaver génère 3 fichiers ou plus, mais toujours 3 au minimum (cela dépend du nombre de Blocs de Code que l’on a demandé):
- Un fichier HTML qui contient l’interface, ainsi que le Javascript nécessaire au fonctionnement du comportement.
- Un fichier EDML qu’on appelle Fichier de groupe, qui contient les informations sur le comportement comme un tout.
- Un fichier EDML pour chaque Bloc de Code, qu’on appelle Fichier participant, qui contient le informations propres au bloc de code en question.
Les fichiers EDML (Extension Data Markup Language) sont des fichiers XML. Ils contiennent le code d’exécution du comportement.
Dans le cas de notre comportement, nous avons quatre fichiers :
Figure 1.
Pour les systèmes d’exploitation multi-utilisateurs Window XP, Windows 2000, NT et Macintosh OS X, Dreamweaver MX crée un dossier de configuration distinct pour chaque utilisateur (en complément du dossier ConfigurationDreamweaver disponible dans Program Files).
- Sur Windows, les fichiers seront donc accessibles par ce chemin :
Lecteur:Documents and SettingsPROFILApplication DataMacromediaDreamweaver MX 2004ConfigurationServerBehaviors + Modèle de serveur - Sur Mac OS X:
Lecteur:Users:USERNAME:Library:Application Support:Macromedia:Dreamweaver MX 2004:Configuration:ServerBehaviors + Modèle de serveur
Note : par défaut dans Windows, ces dossiers sont cachés. Pour en activer l’affichage sous Win XP :
- Dans l’explorateur > menu Outils > Options des dossiers > Affichage > Fichiers et dossiers cachés > Afficher les dossiers et fichiers cachés.
Tout ce qui va suivre à présent est valable pour TOUTES les extensions. Donc outre les comportements serveurs, sont concernés également les objets, commandes, comportements, panneaux (floater).
Modifier l’interface
Vous pouvez donc ouvrir ce fichier ConvertirDate.htm directement dans Dreamweaver.
Ce qu’on trouve dans ce fichier :
- Tout d’abord le formulaire correspondant à l’interface du comportement, avec deux champs de type <SELECT> (Voir la section Types de champs) :
Figure 2.Les valeurs de ces champs ont été placé par Dreamweaver. Puisque ce sont des valeurs fournies par un jeu d’enregistrements, nous n’avons pas à y toucher. Lors de l’utilisation du comportement, DW détectera automatiquement la présence ou non d’un ou plusieurs jeux d’enregistrement et affectera à nos champs les valeurs adéquates.
- On constate également que les boutons OK et Annuler n’apparaissent pas. Ils sont en effet fournis directement par Dreamweaver via son API et nous n’avons donc aucun contrôle sur eux. Nous pourrons par contre plus tard rajouter nous-même un bouton Aide .
- Si vous passez en mode Code, vous voyez en début de fichier des lignes générées par Dream :
<!– auto-generated=true –>
<!DOCTYPE HTML SYSTEM « -//Macromedia//DWExtension layout-engine 5.0//dialog »>C’est cette ligne qui fait appel au moteur interne de Dreamweaver pour donner cette apparence à la page, et donc à la boite de dialogue du comportement.
- Puis vous trouvez les appels aux Javascripts externes nécessaires au fonctionnement du comportement :
<script src= »../../Shared/Common/Scripts/dwscripts.js »></script>
<script src= »../../Shared/Common/Scripts/dwscriptsServer.js »></script>
etc… - Par défaut, DW a créé et placé les fichiers HTML et EDML, dans le dossier PHP_MYSQL. Vous pouvez très bien les placer dans un sous-dossier de votre choix, mais dans ce cas il faudra impérativement penser à modifier les chemins d’accès à ces scripts.
Concernant notre comportement, voici les modifications que nous avons apportées :
- Remplacer l’étiquette Recordset par Jeu d’enregistrement
- Formater proprement l’étiquette du champ Date
- Réduire la taille des champs du formulaire. Pour cela, faites un clic doit sur le champ Jeu d’enregistrement par exemple, sélectionnez l’option Modifier la balise <select>
Figure 3.
et dans l’éditeur de balises, catégorie Feuille de style, remplacer la valeur 300px dans le champ Style par 150px. Il se peut que les valeurs affichées chez vous soient différentes, tout dépend de la version de Dreamweaver que vous utilisez (MX ou MX 2004). Répétez l’opération pour le champ Date.
Recharger l’extension
Quand toutes vos modifications sont terminées, vous devez recharger l’extension pour que ces changements soient pris en compte par DMX.
Il n’est pas nécessaire de redémarrer Dreamweaver pour cela : il existe un menu « caché » qui permet d’effectuer l’opération sans fermer et réouvrir le logiciel.
Pour DMX :
Dans le panneau Insertion , en haut à droite, vous avez le bouton des Options . Cliquez dessus en maintenant la touche CONTROLE enfoncée.
 |
| Figure 4. |
| Note : Pour DMX 2004 ce menu n’est accessible que si le panneau Insertion est affiché sous forme d’onglets, et non pas comme Menu. |
Pour DMX 2004 :
Si la barre Insertion est affichée sous forme de menus, maintenez la touche CONTROLE enfoncée en cliquant sur n’importe quelle catégorie.
Figure 5.
Ce menu sert uniquement à recharger des extensions déjà créées. Si vous le lancez quand vous créez votre extension pour la première fois, Dreamweaver risque d’avoir des comportements imprévisibles. De même, selon les modifications que vous avez apportées à une extension, il peut être bon de temps à autre de fermer complètement Dreamweaver et de le réouvrir.
Figure 6.
Notre interface a meilleure mine…
{mospagebreak}
Ajouter un bouton d’aide
Il y a plusieurs possibiltés pour insérer des textes d’aide au sein d’une extension.
La première est de l’insérer directement dans la boite de dialogue, sous les champs de formulaire, à condition qu’elle soit courte, deux ou trois lignes maximum.
Tout dépendra donc en fait de la complexité de l’extension, des différentes options qu’elle propose, qui peuvent demander des explications plus ou moins longues, le but étant de ne pas noyer les informations principales de l’interface dans un flot de texte parasite.
La deuxième est d’ajouter un bouton d’aide à l’interface.
Le bouton d’aide est un simple bouton de formulaire, mais nous ne pouvons pas l’insérer nous même. Il faut passer par une fonction spéciale de l’API de DW.
Bien que faisant partie de l’API des extensions, cette fonction doit être insérée manuellement. Elle n’est pas propre aux comportements serveur. Quelque soit le type d’extension que vous créez (objets, commandes etc), c’est par cette fonction que vous pourrez apporter une aide à une extension.
A la fin du code Javascript du fichier HTM, rajoutez les lignes suivantes :
function displayHelp() {
var theHelpFile;
theHelpFile = dw.getConfigurationPath() + ‘/ExtensionsHelp/FlashXpress/ConvertirDate.htm’;
dreamweaver.browseDocument(theHelpFile);
}
L’insertion de la fonction displayHelp() provoque automatiquement l’apparition d’un bouton Aide, situé sous les boutons OK et Annuler .
Il s’agit ici de récupérer dans une variable (theHelpFile) le chemin d’accès au dossier Configuration de Dreamweaver grâce à dw.getConfigurationPath() puis de lui rajouter le chemin vers le dossier ExtensionsHelp avec éventuellement un sous-dossier dans lequel on stocke nos fichiers d’aide.
Le dossier ExtensionsHelp a été créé par MM dans votre profil utilisateur. Il est destiné justement à regrouper tous les fichiers d’aide que chaque extension est susceptible d’installer. Ces fichiers d’aide sont de simples fichiers HTML et il est de coutume de les stocker dans un sous-dossier approprié pour éviter une accumulation de fichiers dans le dossier principal, comme ici où je ai créé un dossier FXP : /ExtensionsHelp/FlashXpress. Sachant de plus que de nombreuses extensions installent des fichiers d’aide (avec leurs propres images), l’utilisateur peut s’y perdre facilement si on ne s’impose pas un mimimum de rigueur.
Dans le cas que nous venons d’exposer, le fichier d’aide est directement accessible sur le disque dur de l’utilsateur, en local. C’est à notre avis la meilleure solution car plutôt qu’un fichier en local, on aurait pu aussi préciser une URL sur un site distant, mais cette méthode oblige l’utilisateur a avoir une connexion ouverte (tout le monde – et loin de là d’ailleurs – n’a pas de connexion permanente, cable, ADSL..) et peut être pénalisante si le réseau est encombré.
Ici pour illustrer nos propos, nous avons ajouté un texte d’aide directement dans l’interface et ajouter aussi le bouton Aide .
Pour le texte d’aide, nous avons inséré un simple tableau sous le tableau principal. Notez que nous avons donné une couleur de fond différente au texte.
L’aide est le seul élément de l’interface qui puisse contenir une autre couleur que la couleur par défaut affectée par Dreamweaver. Macromedia recommande d’utiliser la couleur #D3D3D3, à savoir un gris plus sombre que le reste de la boite de dialogue. Notez aussi que nous en avons aussi profité pour glisser le logo ainsi que le nom de l’auteur 
Cela aussi, c’est le seul élément « externe » au comportement, que Macromedia permet de mettre en avant sur l’interface. L’image du logo a été incorporé non pas comme image simple (balise <IMG>) mais comme champ d’image (balise <INPUT>).
Figure 7.
Le logo peut avoir un lien amenant directement à votre site (ou même sur une page particulière dans votre site, pourquoi pas), mais vous ne pouvez pas utiliser de lien HTML classique :
<a href= »http://www.monsite.com »>Logo</a> ne fonctionnera pas dans l’environnement Dreamweaver. Il nous faudra utiliser une fonction interne de l’API de Dream, destinée à de multiples usages, avec entre autres celui de permettre l’accès à une URL.
- Sélectionnez l’image, faites un clic droit, choisissez Modifier la balise <input>.
- Dans l’éditeur de balises, sélectionnez Evénements > onClick et rentrez la syntaxe suivante :
onClick=’dreamweaver.browseDocument(« http://www.flashxpress.net »)’
Figure 8.
Bien sur remplacez flashxpress.net par autre chose…
Les conseils de Macromedia pour l’interface
Les conseils qui suivent sont des lignes de conduite, en aucun cas obligatoires, mais que Macromedia recommande de suivre.
(Notamment si vous souhaitez plus tard soumettre votre extension sur le site Macromedia Exchange). Ces conseils sont d’ailleurs valables pour toutes les extensions que vous créez (objets, commandes, etc.).
L’objectif principal est de respecter l’environnement Dreamweaver afin de ne pas dérouter l’utilisateur. Votre extension doit s’intégrer harmonieusement au reste du logiciel.
L’utilisateur est habitué au design des autres comportements, il s’attend à trouver des interfaces semblables, des façons de présenter plus ou moins identiques.
- Pour régler la longueur des champs n’utilisez pas des syntaxes telles que size= »40″, utilisez des styles en ligne comme :
<select style= »width:150px » name= »Recordset »>
ceci en raison de problèmes d’affichage sur les Mac.
Vous pouvez même faire des styles internes. - Si vous avez des champs de type boutons-radio, ou cases à cocher, au moins un devrait être coché par défaut. C’est un cas de figure qui peut revenir très souvent, quelque soit le type de champ : il s’agit simplement de proposer des valeurs par défaut à l’utilisateur.
- La taille globale de la boite de dialoque du comportement est déterminé par DMX, en fonction des objets qu’il y trouve. On peut contraindre les dimensions de cette fenêtre à l’aide de la fonction JS windowDimensions(), mais Macromedia déconseille de l’utiliser et conseille de laisser Dreamweaver gérer cela.
- Dreamweaver a généré un tableau HTML automatiquement pour le rendu du formulaire et des champs de formulaire. Il est déconseillé de forcer des valeurs pour ce tableau: hauteur, largeur, espacement des cellules, remplissage des cellules. C’est DW qui doit le gérer (ceci dit il ne le fait pas touojurs correctement, dans ce cas vous pouvez faire vous-même les ajustements nécessaires).
- Ne pas utiliser de couleur de fond pour le tableau ou la page, à l’exception des tableaux contenant les textes d’aide. Pour que ces textes se distinguent clairement du reste de l’UI, Macromedia propose d’utiliser la couleur #D3D3D3.
- Les étiquettes des champs de formulaire doivent apparaitre à gauche du champ de formulaire, alignés à droite dans leur cellule et ne pas comporter de retour à la ligne. Chaque mot des étiquettes doit commencer par une majuscule (mais cette recommandation vient du fait que ce système de majuscule en début de mot est courant aux Etats-Unis, alors que ça n’existe pas dans nos standards européens).
ConvertirDate.mxp (