W tym przykładzie utworzymy rozszerzenie Edytor skryptów, które będzie wyświetlać ruchomy panel prezentujący kod JavaScript skojarzony z symbolem skryptu zaznaczonym w widoku Projekt. Edytor skryptów wyświetla kod JavaScript w elemencie textarea formularza HTML zdefiniowanego w ruchomym panelu o nazwie scriptlayer. Jeśli zaznaczony kod w ruchomym panelu zostanie zmodyfikowany, rozszerzenie wywoła funkcję updateScript(), aby zapisać wprowadzone zmiany. Jeśli przed wywołaniem Edytora skryptów nie zaznaczono symbolu skryptu, rozszerzenie wyświetli komunikat (nie zaznaczono skryptu) w ruchomym panelu o nazwie blanklayer.
Proces budowy tego rozszerzenia obejmuje utworzenie ruchomych paneli, zaprogramowanie kodu JavaScript i utworzenie pozycji menu.
Początkowa część pliku HTML tego rozszerzenia zawiera standardowe informacje nagłówka oraz znacznik title, który służy do wyświetlenia słów „Edytor skryptów” na pasku tytułu ruchomych paneli.
Rozszerzenie to definiuje dwa ruchome panele, wyświetlające albo komunikat (nie zaznaczono skryptu) — jeśli użytkownik nie zaznaczył symbolu skryptu — albo kod JavaScript związany z zaznaczonym symbolem. Poniższy kod definiuje te dwa panele, które są elementami AP o nazwie blanklayer oraz scriptlayer:
-
<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>
-
Zapisz plik pod nazwą scriptEditor.htm w folderze Configuration/Floaters.
Oba znaczniki div ruchomych paneli używają atrybutu style, aby określić pozycjonowanie bezwzględne (absolute), rozmiar (width:422px, height:181px) oraz domyślne ustawienie widoczności (visible). Panel blanklayer używa atrybutu center i serii znaczników końca wiersza (br), aby wyśrodkować wyświetlany tekst. Panel scriptlayer tworzy formularz z jednym elementem textarea, który będzie wyświetlać zaznaczony kod JavaScript. Znacznik textarea określa także operację wykonywaną w reakcji na zdarzenie onBlur, które oznacza, że zaznaczony kod uległ zmianie: jest wówczas wywoływana funkcja updateScript(), która wstawia zmieniony tekst z powrotem do dokumentu.
Kod JavaScript rozszerzenia Edytor skryptów składa się z jednej funkcji panelu ruchomego, którą wywołuje program Dreamweaver, selectionchanged(), a także jednej funkcji definiowanej przez użytkownika, updateScript().
Funkcja selectionChanged() określa, czy w widoku Projekt został zaznaczony symbol skryptu. Symbol skryptu pojawia się w widoku Projekt wtedy, gdy w sekcji BODY dokumentu znajduje się procedura JavaScript. Jest to symbol wyświetlany tylko wtedy, gdy w oknie dialogowym Preferencje > Elementy niewidoczne zaznaczono pozycję Skrypty. Ikonę skryptu przedstawia poniższa ilustracja:
Funkcja selectionChanged()wywołuje najpierw funkcję dw.getDocumentDOM(), aby uzyskać schemat DOM (Document Object Model) dokumentu użytkownika. Następnie wywoływana jest funkcja getSelectedNode(), aby sprawdzić, czy zaznaczony węzeł tego dokumentu jest po pierwsze elementem, a po drugie znacznikiem SCRIPT. Jeśli oba te warunki są spełnione, to funkcja selectionChanged() włącza widoczność ruchomego panelu scripteditor i wczytuje do niego odpowiedni kod JavaScript. Jednocześnie funkcja zmienia właściwość visibility panelu blanklayer na wartość hidden (ukryty). Na poniższej ilustracji przedstawiono panel scriptlayer z zaznaczonym kodem JavaScript:
Jeśli zaznaczony węzeł nie jest elementem lub nie stanowi znacznika script, funkcja selectionChanged() włączy widoczność ruchomego panelu blanklayer, a ukryje panel scriptlayer. Panel blanklayer wyświetli tekst (nie zaznaczono skryptu), co przedstawiono na poniższej ilustracji:
-
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'; } }
Funkcja updateScript() zapisuje zaznaczony skrypt po wystąpieniu zdarzenia onBlur w elemencie textarea na panelu scriptlayer. Element formularza textarea to obszar tekstowy zawierający kod JavaScript. Zdarzenie onBlur następuje wtedy, gdy element textarea traci aktywność wprowadzania.
-
/* 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>
Samo zapisanie kodu Edytora skryptów w folderze Configuration/Floaters to jeszcze nie wszystko. Trzeba także wywołać funkcję dw.setFloaterVisibility('scriptEditor',true) lub funkcję dw.toggleFloater('scriptEditor'), aby wczytać ten ruchomy panel i włączyć jego widoczność. Typową lokalizacją dla polecenia wywołującego Edytor skryptów będzie menu Okno, które jest zdefiniowane w pliku menus.xml. Aby dodać pozycję Edytor skryptów do menu Okno, tak jak na poniższej ilustracji, należy utworzyć odpowiedni znacznik menuitem:
Jeśli użytkownik zaznaczy symbol skryptu w widoku Projekt bieżącego dokumentu, a następnie wybierze polecenie Edytor skryptów, program Dreamweaver wywoła ruchomy panel Edytor skryptów i wyświetli kod JavaScript powiązany z zaznaczonym symbolem. Natomiast jeśli polecenie to zostanie wybrane w sytuacji, gdy nie jest zaznaczony żaden symbol skryptu, program Dreamweaver wyświetli panel blanklayer z komunikatem (nie zaznaczono skryptu).
Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.