Create un nuovo documento vuoto.
Ultimo aggiornamento il
3 mag 2021
In questo esempio, creerete un'estensione dell'editor di script che genera un pannello mobile per visualizzare il codice JavaScript alla base di un indicatore dello script selezionato nella vista Progettazione. L'editor di script visualizza il codice JavaScript dell'elemento textarea di un modulo HTML definito in un pannello mobile denominato scriptlayer. Se modificate il codice selezionato nel pannello mobile, l'estensione chiama la funzione updateScript() per salvare le modifiche. Se quando richiamate l'editor di script non avete selezionato un indicatore dello script, l'estensione visualizza il messaggio (no script selected) in un pannello mobile denominato blanklayer.
Questa estensione richiede la creazione di pannelli mobili, la scrittura di codice JavaScript e la creazione di una voce di menu.
Creare i pannelli mobili
La parte iniziale del file HTML per questa estensione contiene le informazioni standard di intestazione e un tag title che inserisce le parole “Script Editor” nella barra del titolo dei pannelli mobili.
Creare l'intestazione del file HTML
-
-
Immette quanto segue:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">
L'estensione definisce due pannelli mobili che visualizzano il messaggio (no script selected) se l'utente non ha selezionato un indicatore dello script o, se selezionato, il codice JavaScript alla base di esso. Il codice seguente definisce questi due pannelli mobili o elementi con posizione assoluta (AP), denominati blanklayer e scriptlayer:
Creare due pannelli mobili
-
Aggiungete il codice seguente dopo l'intestazione del file 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>
-
Salvate il file come scriptEditor.htm nella cartella Configuration/Floaters.
Entrambi i tag div utilizzano l'attributo style per specificare la posizione (absolute), le dimensioni (width:422px e height:181px) e l'impostazione predefinita per visibility (visible) dei pannelli mobili. Il pannello blanklayer utilizza l'attributo center e una serie di ritorni a capo (br) per posizionare il testo al centro del pannello. Il pannello scriptlayer crea un modulo con una singola textarea per visualizzare il codice JavaScript selezionato. Il tag textarea specifica anche che quando si verifica un evento onBlur, che indica che il codice selezionato è stato modificato, la funzione updateScript() è chiamata per salvare il testo modificato nel documento.
Scrivere il codice JavaScript
Il codice JavaScript per l'editor di script è costituito da una funzione del pannello mobile chiamata da Dreamweaver, selectionchanged() e da una funzione definita dall'utente, updateScript().
selectionChanged(): un indicatore dello script è selezionato?
La funzione selectionChanged() determina se nella vista Progettazione è selezionato un indicatore dello script. Un indicatore dello script è visualizzato nella vista Progettazione se è presente una routine JavaScript nella sezione body del documento e se nella sezione Elementi invisibili della finestra di dialogo Preferenze è selezionato Script. La figura seguente mostra l'icona dell'indicatore dello script:
La funzione selectionChanged() chiama prima la funzione dw.getDocumentDOM() per ottenere il DOM (Document Object Model) del documento dell'utente. Quindi chiama la funzione getSelectedNode() per determinare se il nodo selezionato per il documento è innanzitutto un elemento e poi un tag SCRIPT. Se entrambe queste condizioni sono soddisfatte, la funzione selectionChanged() rende visibile il pannello mobile scripteditor e vi carica il codice JavaScript alla base. La funzione imposta anche la proprietà visibility del pannello mobile blanklayer con il valore hidden. La figura seguente mostra il pannello mobile scriptlayer con il codice JavaScript selezionato:
Se il nodo selezionato non è un elemento o un tag script, la funzione selectionChanged imposta il pannello mobile blanklayer come visibile e nasconde il pannello scriptlayer. Il pannello mobile blanklayer visualizza il testo (no script selected), come illustrato nella figura seguente:
Aggiungere la funzione selectionChanged()
-
Aprite il file scriptEditor.htm nella cartella Configuration/Floaters.
-
Immettete il codice seguente nella sezione dell'intestazione del file.
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'; } } -
Salvate il file.
updateScript(): salva le modifiche
La funzione updateScript() salva lo script selezionato quando un evento onBlur si verifica nell'area textarea del pannello scriptlayer. L'elemento del modulo textarea contiene il codice JavaScript e l'evento onBlur si verifica quando il componente textarea è disattivato dall'input.
-
Aprite il file scriptEditor.htm nella cartella Configuration/Floaters.
-
Immettete il codice seguente nella sezione dell'intestazione del file.
/* 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> -
Salvate il file.
Creare una voce di menu
Non è sufficiente salvare il codice dell'editor di script nella cartella Configuration/Floaters. Per caricare il pannello mobile e renderlo visibile, dovete anche chiamare la funzione dw.setFloaterVisibility('scriptEditor',true) o la funzione dw.toggleFloater('scriptEditor'). La modalità più ovvia da cui richiamare l'editor di script è dal menu Finestra, definito nel file menus.xml. Dovete creare il tag menuitem che crea una voce per l'estensione dell'editor di script nel menu Finestra, come illustrato nella figura seguente:
Se selezionate un indicatore dello script nella vista Progettazione per il documento corrente e selezionate la voce di menu Script Editor, Dreamweaver richiama il pannello mobile Script Editor e visualizza il codice JavaScript alla base di esso. Se selezionate la voce di menu quando un indicatore dello script non è stato selezionato, Dreamweaver visualizza il pannello blanklayer che contiene il testo (no script selected).
-
Aprite il file menus.xml nella cartella Configuration/Menus.
-
Individuate il tag che inizia con <menuitem name="Tile _Vertically" e posizionate il punto di inserimento dopo il simbolo di chiusura /> del tag.
-
Su una nuova riga, inserite:
<menuitem name="Script Editor" enabled="true" ¬ command="dw.toggleFloater('scriptEditor')"¬ checked="dw.getFloaterVisibility('scriptEditor')" /> -
Salvate il file.
