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.

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.

    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.

Rédaction 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 :

Icône du marqueur de script
Icône du 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é :

panneau flottant scriptlayer
panneau flottant scriptlayer

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 :

panneau flottant blanklayer
panneau flottant blanklayer

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.

     /* 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 :

Une entrée de l’extension Script Editor
Une entrée de l’extension Script Editor

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.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Du 14 au 16 octobre à Miami Beach et en ligne