Webkrauts

Kleine Werkzeugkunde: Die API von Dreamweaver

Jeder kennt den kommerziellen Editor Dreamweaver, einige nutzen ihn, doch nur wenige wissen von seinen versteckten Stärken. Getreu dem Motto »(er)kenne Dein Werkzeug« gibt Henry Zeitler einen kleinen Einblick in die Nutzung der API von Dreamweaver anhand von praktischen Beispielen.

Dreamweaver ist ein Editor mit Tradition. Bereits im Dezember 1997 veröffentlichte Macromedia seine erste Version und bereits von Anfang an wird sein Nutzen und die Qualität des erzeugten Codes kontrovers diskutiert.

Ich habe auf Dreamweaver MX gelernt und meine erste Internetseite entstand mit seiner Hilfe – damals noch ein Tabellenlayout in der WYSIWYG-Ansicht und der Code war schlecht. Das lag nicht unbedingt am Editor…
Heute benutze ich ihn immer noch mit Version CS3 und das nicht aus Gewohnheit. Ich arbeite ausschließlich in der Code-Ansicht, erstelle standardkonforme Webseiten und genieße die Vorteile seines großen Funktionsumfangs, die einen schnellen und optimierten Workflow ermöglichen.

Dreamweaver ist ein mächtiges Werkzeug. Es wartet von Hause aus schon mit vielen Funktionen und Shortkeys auf. Trotzdem kommt irgendwann die Situation, in welcher der Entwickler einen Shortkey und eine bestimmte Automatisierung vermisst. Die begrenzte Funktionalität der Snippets kann da nicht immer weiterhelfen. Um meinen Workflow zu optimieren und nervige Tipperei zu vermeiden möchte ich meine eigene Funktion schreiben und diese auf ein Tastaturkürzel legen.
Hier kommt die API ins Spiel. Über sie bin ich in der Lage, das Programm zu reorganisieren, meinen Bedürfnissen anzupassen und um fehlenden Funktionen zu erweitern oder bestehende umzuschreiben.

Die Vorbereitung

Um zu starten brauchen wir natürlich in erster Linie den Adobe Dreamweaver (zum Probieren reicht auch erstmal eine Dreamweaver CS5-Testversion). Befehle in Dreamweaver bestehen aus zwei Komponenten – einer HTML- und einer JavaScript-Datei – und sie werden über einen XML-Baum in die Benutzeroberfläche eingebunden. Grundkenntnisse in den drei Bereichen erleichtern den Einstieg erheblich.

Desweiteren muss nach der Installation der »Dreamweaver«-Ordner mit den Unterordnern »Configuration« und weiter »Menus« auf der Festplatte ausfindig gemacht werden. Dieser befindet sich nicht im Installationsordner, sondern in den Benutzer- bzw. User-Ordnern (bei Vista z. B. C:\Users\"Name"\AppData\Roaming\Macromedia\Dreamweaver\Configuration\Menus).

Um Problemen vorzubeugen, sollte vorher eine Kopie der aktuellen Datei menus.xml angelegt werden.

Ladet nun die vorbereitete zip-Datei (52 KB) herunter und kopiert den Inhalt in den Menus-Ordner. Die neuen Befehle werden nach dem nächsten Start von Dreamweaver angezeigt und sind aktiv.
Um die folgenden Erläuterungen besser nachvollziehen zu können, sollten alle Dateien des entpackten ZIPs mit Dreamweaver geöffnet werden.

Ärmel hochkrempeln und los geht's!

Dem aufmerksamen Beobachter fällt natürlich sofort der neue Menüpunkt in der horizontalen Menüleiste auf. Beim anklicken von »Webkrauts« öffnet sich ein Dropdown mit »ListAll«, »BreakAll« und »AllToNav« und den zugewiesenen Shortkey. Wenn wir jetzt mehrere Zeilen Text markieren und zum Beispiel Strg+Alt+D drücken oder den entsprechenden Menüpunkt auswählen, werden automatisch die Zeilenumbrüche erkannt und in Listenpunkte umgewandelt. Das Gleiche gilt für die Funktionen »BreakAll« (erzeugt einen br am Zeilenende) und »AllToNav«, welche die Listenfunktion »ListAll« erweitert und einen Anchor-Tag ergänzt, um die Basis für eine Navigation zu erstellen.

Diese vorgefertigten Befehle dienen natürlich nur als Beispiele für den Einstieg. Ich denke, je nach Ausprägung der JavaScript-Kenntnisse lässt sich da allerhand anstellen und es sind nicht nur HTML-Tags möglich.

So werden die Befehle angewendet – Screencast

Dreamweaver liest den Code im Bearbeitungsfenster genau wie den Quellcode einer Internetseite. Dadurch wird die direkte Manipulation durch JavaScript erst möglich. Bevor die Befehle also greifen können, muss Dreamweaver das DOM vollständig erfasst haben. Sollte mal keine Reaktion auf die Befehle erfolgen, hilft deshalb ein Klick auf den Button »Aktualisieren«. Das gilt allgemein für die Anwendung von Funktionen in Dreamweaver.

Der neue Befehl

Befehle in Dreamweaver bestehen immer aus zwei Komponenten: einer HTML- und einer JavaScript-Datei. Die HTML-Datei ist lediglich dafür zuständig, die Javascript-Datei zu laden, einzubetten und die entsprechende Funktion im Body-Tag durch »onLoad« auszuführen. Wichtig ist es, daran zu denken, die Bezeichnungen der Datei und der Funktion hier anzupassen.

Der HTML-Code am Beispiel der ListAll()-Funktion sieht (etwas gekürzt) so aus:

Die JavaScript-Datei dagegen enthält die Programmierung für den Befehl. Hier bekommen wir es mit allerhand Dreamweaver-spezifischen Funktionen zu tun. Die Funktion »canAcceptCommand()« testet zum Beispiel, ob das Menüelement abgeblendet werden soll (Rückgabe: false) oder aktiv geschaltet wird. Außerdem wird hier noch festgestellt, auf welchem Teil innerhalb von Dreamweaver der Eingabefokus liegt (»dw.getFocus()«) und die Selektion aus dem DOM ausgelesen (»dw.getDocumentDOM()«).
Diese komplette erste Funktion ist ein Standard und muss für unsere Zwecke nicht modifiziert werden. Wer will, kann sich im API-Referenzhandbuch unter der »Hilfe« damit näher befassen.
Den Kern bildet die jeweils zweite Funktion »ListAll()«, »BreakAll()« bzw. »AllToNav()« und hier können wir uns austoben. Jeder, der Grundkenntnisse in JavaScript besitzt, kann leicht nachvollziehen was hier passiert. Kurz beschrieben am Beispiel der Funktion »ListAll()«:

1. Zuerst wird die Selektion im DOM aufgerufen.
2. Es werden die Zeilenumbrüche durch </li>\n\t<li> ersetzt. Bei \n und \t handelt es sich um Regular Expressions für einen Zeilenumbruch und einen Tab.
3. Am Ende der Liste wird </li>\n</ul> eingefügt.
4. Am Anfang der Liste wird <ul>\n\t<li> eingefügt.

Für eine bessere Übersicht habe ich die wichtigsten Zeilen nochmal in der Datei kommentiert. Ein Blick auf den Quellcode der jeweiligen Datei verdeutlicht, wie sie modifiziert wird. Wer will, kann hier auch seine eigene Funktion einmal ausprobieren. Man kann nicht viel kaputt machen.

Der neue Menüpunkt

Die dritte und letzte Datei im Bunde ist eine .xml-Datei (menus.xml). Sie hat mit dem Befehl selbst nichts zu tun, denn hier werden alle Menüs und ihre Inhalte samt Shortkeys festgelegt und beim Start von Dreamweaver initiiert. Über diese Datei lässt sich die gesamte Menüstruktur und ihre Funktionen sowie deren Tastaturkürzel reorganisieren. Der Aufbau des XML-Baums ist leicht nachzuvollziehen.
Ganz am Ende der Datei habe ich unsere zusätzlichen Menüpunkte eingefügt. Ein neuer Hauptmenüpunkt wird in unserem Beispiel mit <menu id="Webkraut_Edit" name="Webkrauts"> erstellt und alle Unterpunkte mit <menuitem id="WK_Edit_ListAll" name="ListAll" key="Cmd+Alt+L" file="Menus/ListAll.htm" arguments="'ListAll'" /> aufgelistet. Dabei gilt: »key« bezeichnet den Shortkey, »file« den Pfad und Dateinamen der HTML-Datei und »name« den Menüeintrag. Der Pfad kann beliebig angegeben werden. Ab einer gewissen Anzahl von eigenen Funktionen sollte man über eine eigene Ordnerstruktur nachdenken. Will man ein eigenes Tastaturkürzel anlegen, sollte man mit der Suchfunktion vorher prüfen, ob es wirklich noch nicht anderweitig genutzt wird.

Der neue Menüpunkt und seine Funktionen und überhaupt alle Änderungen werden immer erst nach dem nächsten Start von Dreamweaver initiiert.

Lust bekommen?

Ich hoffe ich konnte mit diesem Artikel einen schnellen Einstieg in ein komplexes Themengebiet schaffen, dessen Vertiefung durchaus lohnenswert ist. Die Idee, sich mit der API von Dreamweaver zu befassen und das Programm ein wenig anzupassen, entstand mit der Version 8. Die neuen Funktionen habe ich einfach in Version CS3 migriert. Bleibt abzuwarten welche Möglichkeiten sich mit Version CS5 ergeben werden.

Die Dateien als .zip-Archiv zum downloaden

Webkrauts_Menue.zip (52 KB)

Weiterführende Links

• Accessing Dreamweaver's JavaScript API
• Dreamweaver erweitern
• Extending Dreamweaver CS4