Kategorien
Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung

JavaScript- und Ajax-Schnipsel in Adobe Dreamweaver: Verhalten, Spry und Widgets

Dreamweaver bietet einige Optionen an, Bereiche „interaktiv“ zu gestalten. Der einfachste Weg führt über etwas JavaScript. „Verhalten“ nennt Dreamweaver seine Sammlung von Script-Schnippseln, die sofort eingesetzt werden können. Ergänzend kommen das Spry-Framework oder die Widgets zum Einsatz.

Dreamweaver bietet einige Optionen an, Bereiche „interaktiv“ zu gestalten. Der einfachste Weg führt über etwas JavaScript. „Verhalten“ nennt Dreamweaver seine Sammlung von Script-Schnipseln, die sofort eingesetzt werden können. Ergänzend kommen das Spry-Framework oder die Widgets zum Einsatz.

Verhalten

Dreamweaver bietet zahlreiche Verhalten genannte Skripte an, wie etwa Bilder vorausladen, Formular überprüfen oder Eigenschaft ändern. Falls in der Sammlung von Skripten unter Verhalten noch nicht das gewünschte enthalten ist, so empfehle ich einen Klick auf „Weitere Verhalten“, zu finden im Tag-Inspektor unter dem Reiter Verhalten oder auch über Hilfe > Dreamweaver Exchange. In diesem Online-Service von Adobe kann man für Dreamweaver geordnet in zahlreichen Kategorien dutzende Verhalten entdecken. Auch eine Suchfunktion unterstützt dabei.

Nach dem Download wird das Skript im Adobe Extension Manager geöffnet und installiert. Innerhalb von Dreamweaver zeigt sich die Erweiterung nach einem Neustart im Menü unter Einfügen.

Als ein einfaches Beispiel möchte ich eine kleine Galerie erstellen die dem Anwender erlaubt, verschiedene Aufnahmen vergrößert zu betrachten. Nachdem der Grundaufbau steht und nur noch die Funktion zum Bildertausch fehlt, erhält jedes Foto zunächst eine ID über die Eigenschaften. Diese IDs sind unverzichtbar, damit das JavaScript die einzelnen Bereiche erkennen und verändern kann.

Das erste Bild wird angeklickt und im Tag-Inspektor unter Verhalten und dem Plus-Symbol Bild austauschen ausgewählt. Entdeckt man den Tag-Inspektor nicht auf den ersten Blick, so ruft man ihn einfach über Fenster > Tag-Inspektor auf.

Im Dialog gibt man unter Bilder an, welches ausgetauscht werden soll (natürlich das große bei einem Klick auf das kleine Foto). Und auch der Pfad zum neuen Foto wird dort ausgewählt, man lässt „Bilder vorausladen“ stehen und nimmt das Häkchen bei „Bilder bei onMouseOut wiederherstellen“ weg, damit die Aufnahme nach dem Klick auch stehen bleibt.

Unter Verhalten wird nun das neue JavaScript gelistet, wobei wir noch eine kleine Anpassung vornehmen müssen. Statt „onMouseOver“ sollte dort „onClick“ stehen. Diese Zuweisung eines Verhaltens muss nun auch noch für die anderen Bilder vorgenommen werden.

Das würde schon reichen, um die Fotos auszutauschen. Soll zusätzlich noch eine passende Bildunterschrift angeboten werden, so benötigen auch die Textabschnitte jeweils eine ID. Je Foto, das man später anklicken soll, wird ein Verhalten hinzugefügt. Nun wird allerdings Elemente anzeigen/ausblenden benötigt. Dreamweaver möchte dann noch wissen, welches Element denn eingeblendet und welches ausgeblendet werden soll, was man nach seiner Wahl mit OK bestätigt.

Liegen die Bildunterschriften nicht übereinander, so wählt man sie jeweils aus, geht in den Reiter CSS-Stile und klickt dort auf den Button Neue CSS-Regel. Der Selektor wird ausgewählt und nach dem ersten OK unter Positionierung die Position „absolute“ angeklickt. Da beim Start der Seite zunächst die Bildunterschriften gleichzeitig angezeigt werden, ist eine Auswahl der DIVs nötig, in dem die Bildunterschriften liegen, und der Wechsel zum Reiter AP-Elemente in der Einfügen-Palette, wo die jeweilige Sichtbarkeit entsprechend gesetzt wird.

Spry

Bei Spry handelt es sich um das Ajax-Framework von Adobe. Sehr einfach zu handhaben sind dabei die Spry-Effekte in Dreamweaver. Generell werden die Spry-Funktionen in der Einfügen-Palette unter „Spry“ gelistet. Die Effekte allerdings sind im Tag-Inspektor über Verhalten und einem Klick auf das Plus-Symbol zu erreichen. Dort geht man auf „Effekte“ und bekommt ein halbes Dutzend Optionen geboten.

Um bei dem ersten Beispiel zu bleiben, könnte man das Bild der größeren Ansicht anklicken und danach auf Tag-Inspektor > Verhalten > Effekte > Einblenden/Ausblenden gehen. Das Zielelement ist natürlich die aktuelle Auswahl. Jetzt könnte man noch die Effektdauer, den Effekt sowie Prozentangaben zum Einblendeverhalten bestimmen. Im Tag-Inspektor muss noch „onClick“ auf „onLoad“ geändert werden. Der Wechsel zwischen den Aufnahmen wird nun ansprechend animiert.

Widgets

Um die Namensspielchen rund um JavaScript komplett zu machen, gibt es neben den Verhalten und den Spry-Optionen auch noch Widgets. Dafür bietet Dreamweaver CS5 einen eigenen Browser an, der auf Air-Basis umgesetzt wurde. Nach dem Start präsentiert der Widget Browser schon einige Beispiele, die man direkt installieren könnte.

Interessanter ist aber die gezielte Recherche über die Suchfunktion. Immer können Informationen zum Widget abgerufen und eine funktionsfähige Vorschau geladen werden. Auch der Quellcode lässt sich dabei überprüfen. Einige Widgets bringen Varianten mit, welche die Umsetzung nach eigenen Bedürfnissen doch sehr erleichtern. Auch eine grobe Konfiguration und das Abspeichern des eigenen Presets ist möglich.

Um ein Widget direkt in Dreamweaver zu öffnen, geht man in der Einfügen-Palette in den Bereich „Widget“ und kann dort aus einer Liste auf sämtliche Widgets zugreifen, die installiert wurden. Auch die Vorgaben, also die Presets des Widget, werden dort zur Wahl gestellt. Den zuvor beschriebenen Widget Browser kann man ebenso über dieses Fenster erreichen. Über OK wird das Widget dann hinzugefügt.

Dreamweaver bringt also allerhand Code-Schnipsel mit, die stark auf JavaScript fußen, jedoch ganz unterschiedliche Namen tragen. Jeder Bereich, ob Verhalten, Spry oder Widget, lässt sich dabei für sich erweitern. Generell bilden diese Angebote eine gute Zeitersparnis für den Anwender der Software.

(mm),

Von Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Eine Antwort auf „JavaScript- und Ajax-Schnipsel in Adobe Dreamweaver: Verhalten, Spry und Widgets“

Gut beschrieben. Ich finde allerdings auch, dass die ganzen Funktionen Widgets, Spry und Verhalten gerne unter einem Reiter „Javascript“ gesammelt werden dürften.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.