Cr?er une extension simple pour Dreamweaver

Introduction

Ceci est une tentative de traduction du tutorial proposé par dwfaq.com : www.dwfaq.com/Tutorials/Extensions/simple_object.asp

Apprennez comment créer un fichier MXI avant de commencer.

Comment construire une extension simple, mais utile de Dreamweaver

Je vais vous montrer comment faire une extension, ce qui vous permettra de créer des liens avancés d'email dans l'interface utilisateur de dreamweaver. Ok, il existe déjà beaucoup d'extensions pour faire ceci, mais l'exemple est simple et il vous donnera une bonne idée de la manière dont une extension fonctionne.

Théorie:

L' API de Dreamweaver (interface de programmation d'application) est employé pour ajouter des extensions au programme afin d'ajouter une plus grande fonctionnalité au logiciel. Ces extensions peuvent être des objets, des comportements, des panneaux, des commandes de menu, etc... Le type le plus simple d'extension est un objet. Un objet insère simplement le code dans une page HTML. Il peut également recueillir de l'information pour l'insérer dans la page.

L'extension que nous allons faire ici sera un objet. Nous emploierons un formulaire pour recueillir l'information et notre script l'insérera dans le document HTML.

Quels documents devrons-nous créer?

Nous pourrions uniquement utiliser un document HTML pour créer notre extension. N'importe qui voulant employer l'extension devrait copier la page dans leur dossier dreamweaver/configuration/objects/common. L'icône de Dreamweaver par défaut serait employée dans le panneau d'objets. Mais nous n'allons pas la faire de cette façon.

Nous voulons que nos utilisateurs puissent installer l'extension par Extension manager en double-cliquant dessus l'extension sera installée dans le dossier approprié. Nous voulons également avoir une petite icône personnalisée dans le panneau d'objet. Pour réaliser tout ceci que nous devons créer juste trois dossiers, notre document HTML, notre icône GIF et un fichier mxi.

Je sais ce que sont des fichiers HTML et GIF, mais qu'es-ce qu'un fichier mxi?

Le fichier mxi diffuse toutes les informations sur le nom de l'extension qui l'a écrit, quel est le type d'extension , quels fichiers installer et où ils doivent être installés. Nous n'allons pas écrire un fichier mxi à partir de zéro. Nous avons des choses bien meilleures à faire ainsi nous allons juste prendre un fichier mxi existant et changer le peu que nous avons besoin. Alors nous changerons le titre et enregistrerons le fichier. Facile!

Quelle sorte de fichier GIF devons-nous créer?

Le fichier GIF sera aux maximum de taille 18x18 pixels. Si le fichier GIF est de plus grande dimension, DW le rétrécira.

A propos du fichier HTML?

Le fichier sera tout à fait simple. Un peu du Javascript et d'un formulaire, c'est tout.

Par quoi commencons-nous ?

OK, d'abord nous devons décider ce que nous voulons réaliser. Dans ce cas-ci nous voulons créer un lien mailto dans Dreamweaver sans devoir saisir le code. Ainsi nous devrons comprendre la structure d'un lien de mailto. C'est quelque chose comme ceci:

<a href="mailto:?To=email&
Subject=Subjecttext&cc=ccemail&body=message>Email</a>

ou alors :

<a href="mailto:email?
Subject=Subjecttext&cc=ccemail&body=message>Email</a>

Les deux formats sont acceptables. Nous utiliserons le premier.

La majeure partie du lien ne changera jamais. Il peut y avoir jusqu'à cinq variables dans un lien de mailto. Je les ai accentuées dans les exemples ci-dessus. Les deux seuls qui sont exigés pour fonctionner sont le mail et le texte du lien qui apparaîtra dans le navigateur. Ainsi nous devrons déclarer cinq variables en notre script et nous aurons cinq champs entrés dans notre formulaire.

Créer le fichier HTML. Partie 1 - L'interface.

La première chose à faire est d'ouvrir un nouveau document dans Dreamweaver et de lui donner un titre. Le titre que vous donnez ce document apparaîtra comme message quand vous passerez la souris au-dessus de l'icône dans le panneau d'objets, donc choisissez bien. Nous allons appeler le nôtre "lien avancé de Mailto". Maintenant enregistrez le document, de préférence dans un dossier vide mis de côté pour la construction de votre extension. Donnez-lui un nom signicatif. J'ai appelé le mien mailto_link.html.

Après nous construisons notre formulaire avec Insertion > Formulaire. Dans l'inspecteur de propriété, donnez au formulaire un nom. Dans ce cas-ci, appelons-le "emailform".

À l'intérieur du formulaire nous placerons un tableau avec Insertion > Tableau. Nous avons cinq champs possibles à entrer et nous devrons mettre un certain texte pour chacun d'eux, ainsi faisons ce tableau avec cinq rangées et deux colonnes.

Maintenant nous ajoutons nos éléments de formulaire et le texte. Nous mettrons notre texte sur le côté gauche et nos champs de texte du côté droit. Nous mettrons deux boutons dans la rangée inférieure, une du côté gauche et une du côté droit. Quand nous avons fini, nous enlèverons l'attribut de largeur du tableau.

Maintenant tout que nous devons faire est nommer chacun des champs de texte. Cliquez à l'intérieur du premier et nommez le champ dans l'inspecteur de propriété. Nous l'appellerons linktext.

Répétez l'opération pour chaque champ. Nous les appellerons emailtext, subtext, cctext et bodytext.

Enfin, supprimez la couleur de fond pour votre page.

L'interface est faite !

Créer le fichier HTML. Partie 2 - Le Javascript.

L'interface est faite à ce stade et devrait sembler quelque chose comme ceci .

Maintenant nous devons ajouter le script qui lui donnera une certaine fonctionnalité. Ce script entrera dans le corps du document, juste au-dessus de notre formulaire.

Tag d'ouverture de script. Il indique que c'est du Javascript.

function objectTag(form) {

La fonction objectTag est établie dans l'API de Dreamweaver et, une fois exécutée, insérera ce qu'elle renvoie dans un document HTML. Nous voulons que les résultats de notre script soient insérés dans un document HTML ainsi que c'est la fonction parfaite pour ce qu'on veut faire.

var emailcc=""; var emailbody=""; var email=""; var emailsubject=""; var mailtext="";

Déclarez les variables que nous allons employer. Il y en a une pour chaque champ de saisie de texte de notre formulaire. Nous ne leur donnons pas de valeur.

if (document.emailform.linktext.value != ""){ mailtext=document.emailform.linktext.value; } else {mailtext=""; }

Si la valeur du champ de linktext dans le formulaire appelée emailform dans ce document n'est pas vide, donner alors la valeur de notre variable linktext à ce qui a été entré dans ce champ par l'utilisateur.

if (document.emailform.emailtext.value != ""){ email='\?to\=' + document.emailform.emailtext.value; } else {email=; }''

Si la valeur du champ emailtext n'est pas vide, donner alors la valeur de notre variable "email" à ce qui a été entré dans ce champ par l'utilisateur précédé de "?to = ". si rien n'était écrit, on le laisse blanc. Ce sera l'email du destinataire dans notre lien de mailto. Vous noterez dans le script que ? et = sont précédés avec un antislash. Ces caractères sont réservés en Javascript et doivent "être échappés" s'ils doivent être employés dans une chaine. L'antislash est le caractère d'évasion de Javascript.

if (document.emailform.subtext.value != ""){ emailsubject='\&subject\=' + escape(document.emailform.subtext.value); } else {emailsubject=; }''

De même... escape est une fonction de Javascript qui convertit tout caractère réservé ou les caractères spéciaux en hexadécimal et nous l'employons ici au cas où nous aurions besoin d'espaces dans notre sujet. À moins que les espaces soient codés ils casseront notre URL.

if (document.emailform.cctext.value != ""){ emailcc='\&cc\=' + document.emailform.cctext.value; } else {emailcc=""; }

De même...

if (document.emailform.bodytext.value != ""){ emailbody='\&body\=' + escape(document.emailform.bodytext.value); } else {emailbody=; }''

De même avec escape...

if (document.emailform.emailtext.value != ""){ return ('<A HREF=\"mailto:' + email + emailsubject + emailcc + emailbody +'\">' + mailtext + '</A>'); } else { return(""); }

De même...

}</script>

Fin du script

Le document terminé devrait ressembler à cela

Si vous copiez le document fini dans votre dossier dreamweaver/configuration/objects/common maintenant, l'extension fonctionnerait déjà. Mais il serait beaucoup mieux si nous pouvions l'installer par le Extension manager. Pour faire ceci nous avons juste besoin de deux fichiers supplémentaires, d'un fichier GIF pour notre icône et d'un fichier mxi. Faisons le fichier GIF d'abord.

Créer le fichier GIF

Voici la partie "graphique", mais ce fichier de GIF va être très simple en fait. Il sera fonctionnel parce qu'il servira à distinguer notre extension des autres dans le panneau d'objets. J'ai créer juste un carré de 25x25 pixels avec un cercle ou deux ans dedans (Dreamweaver le montrera à 18x18 mais il est plus facile de travailler dessus à 25x25). On peut utiliser Firewoks par exemple pour faire ce fichier.

Voici le résultat :

Important: Vérifiez que vous enregistrez votre fichier de GIF dans le même dossier que votre fichier HTML. Il doit également avoir exactement le même nom que le fichier HTML. Seul le fichier mxp peut avoir un nom différent. J'ai appelé le mien mailto_link.gif et mon fichier HTML s'appelle mailto_link.html

Créer le fichier MXI

Nous n'allons pas nous donner plus de travail que nécessaire, donc nous modifierons juste un fichier mxi existant pour qu'il convienne à notre extension. Il a besoin seulement de quelques changements et cela fonctionnera. Voici ce à quoi ressemble le fichier dans à un éditeur de texte.

Le wiki provoquant des troubles, laisser le code tel quel aurait inséré des erreurs, donc pour voir le code cliquez ici

Les seuls champs que nous devons changer sont le nom de l'extension, la version, le nom de l'auteur, les instructions d'utilisateur, la description et les noms de fichiers. Changez-les dans l'éditeur de texte de votre choix. Vous pouvez télécharger un que j'ai fini ici

Empaqueter et installer l'extension

La première chose d'abord, vérifions que nous avons tout ce que nous avons besoin. Assurez-vous que le fichier mxi, le fichier GIF et le fichier HTML sont dans le même dossier.

Important

Assurez-vous que la seule différence dans les noms de fichier des dossiers de GIF et de HTML est l'extension (dans mon cas je les ai appelés mailto_link.gif et mailto_link.html), et que la référence à ces fichiers dans le dossier Mxi est correcte.

Vous pouvez donner au dossier Mxi n'importe quel nom (il ne peut pas être plus long que 23 caractères comprenant l'extension .mxi). Une fois que nous avons tout ensemble nous lancons Extension Manager.

Faites Fichier > empaqueter une extension. Une boite de dialogue apparaîtra. Choisissez votre fichier Mxi que vous avez créé. En cliquant sur OK, Extension manager va vous créer le fichier mxp, qui servira à l'installation de votre extension.

Ensuite, pour installer l'extension, il vous suffira, comme aux autres personnes de double cliquer sur le fichier mxp pour lancer l'installation.

Retour aux tutoriaux