[Comportement serveur] 2 - Mise en forme
Écrit par Thibault Imbert | 31-07-2005
Index de l'article
[Comportement serveur] 2 - Mise en forme
Page 2

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



 
Dernière mise à jour : 13-09-2006