Przykład prostego panelu ruchomego

Szukaj

Ostatnia aktualizacja 21 maj 2021

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.

Utworzenie ruchomych paneli

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.

Tworzenie nagłówka pliku HTML

Utwórz nowy, pusty dokument.

Wpisz następujące informacje:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

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:

Tworzenie dwóch ruchomych paneli

Za nagłówkiem pliku HTML wstaw następujący kod:

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

Programowanie kodu JavaScript

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

selectionChanged(): czy jest zaznaczony symbol skryptu?

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:

Dodanie funkcji selectionChanged()

Otwórz plik scriptEditor.htm zapisany w folderze Configuration/Floaters.

Wprowadź następujący kod w sekcji nagłówka pliku.

 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'; 
    } 
}

Zapisz plik.

updateScript(): zapisuje zmiany

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.

Otwórz plik scriptEditor.htm zapisany w folderze Configuration/Floaters.

Wprowadź następujący kod w sekcji nagłówka pliku.

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

Zapisz plik.

Tworzenie pozycji menu

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:

Pozycja dla rozszerzenia Edytor skryptów

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

Otwórz plik menus.xml zapisany w folderze Configuration/Menus.
odszukaj znacznik rozpoczynający się od tekstu <menuitem name="Tile _Vertically" i umieść punkt wstawiania za znakiem /> zamykającym ten znacznik.

W nowym wierszu wstaw następujący kod:

 <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

Zapisz plik.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Przykład prostego panelu ruchomego

Utworzenie ruchomych paneli

Programowanie kodu JavaScript

Tworzenie pozycji menu

Pomoc dostępna szybciej i łatwiej

Udostępnij tę stronę

Zapytaj społeczność

Skontaktuj się z nami