13.5 Panels 
Eine konsequente Weiterentwicklung der Scripting-Technologie bei Creative-Suite-Programmen ist die Kombination von JavaScript mit Flash und dessen Programmiersprache ActionScript, die mit der Übernahme von Macromedia ins Produkt-Portfolio von Adobe gewandert ist.
Abbildung 13.38 Identisches User Interface mit JavaScript und Flash im Dialog Dateiinformation
Beispielsweise können sich Flash-Dateien (»*.swf«) über JavaScript mit Photoshop »unterhalten«. Flash zeichnet sich durch die Möglichkeit aus, schnell interaktive Oberflächen zu schaffen, die noch dazu plattformunabhängig sind. Die Schnittstelle hat zwar schon mit Photoshop CS3 funktioniert, doch wurde sie kaum genutzt. Mit der Creative Suite 4 hat Adobe dieses Zusammenspiel nicht nur mit Namen und Dokumentation versehen, sondern nutzt es auch selbst. z. B. beim Dialog von Datei • Dateiinformation. Dieser Dialog zeigt bereits die typischen Oberflächenelemente von Flash.
Abbildung 13.39 Schema zum Erstellen und zur Funktionsweise von Panels
Wie man sieht, sind beide Dialoge innerhalb des Betriebssystemfensters identisch aufgebaut.
13.5.1 Grundsätzliche Funktionsweise
Im Gegensatz zur Interaktion zwischen JavaScript und Photoshop, an der nur zwei Partner beteiligt sind, hat man es bei den Panels mit drei Stationen zu tun, die miteinander kommunizieren müssen. Flash stellt das User Interface zur Verfügung, JavaScript ist die Schnittstelle, und Photoshop führt die Befehle aus. Diese Kommunikation muss in beide Richtungen gehen, denn man braucht ja auf der Benutzeroberfläche auch Rückmeldungen aus dem Inneren von Photoshop.
13.5.2 Panels erstellen
Panels sind eine Kombination aus Flash- und JavaScript-Dateien, deren Zusammenspiel bei Panels allerdings nicht so ganz einfach zu durchschauen ist. Bevor wir später ein einfaches Beispiel näher betrachten, sei deshalb zuvor der Grundaufbau geschildert.
Schauen wir zunächst den oberen Teil des Schemas an. Adobe Flash und meist zusätzlich Adobe Flex Builder sind für die Elemente der Benutzeroberfläche zuständig, wobei Flex (sehr vereinfacht) nichts anderes ist als ein Baukasten (Entwicklungsumgebung) für User-Interface-Elemente aus gebrauchsfertigen Flash-Dateien (Komponenten), der gerade für solche Zwecke viel Arbeit spart. Flex gibt wie Flash auch SWF-Dateien aus. Das ExtendScript Toolkit liefert die JavaScript-Dateien.
Im Betrieb (unterer Teil »Ausführen« des Schemas) ist es etwas komplizierter. Man liest das am besten von rechts. Die JavaScript-Datei kommuniziert mit Photoshop in beide Richtungen, indem sie direkt auf das Objektmodell von Photoshop zugreift, dorthin Befehle gibt und umgekehrt Zustände abfragt. Die Benutzeroberfläche wird von der Flash-Datei zur Verfügung gestellt. Diese kann nicht direkt mit Photoshop reden. Sie ruft in die eine Richtung Javascript-Funktionen auf, die Photoshop-Befehle auslösen. Damit das User Interface auch Rückmeldungen von Photoshop auswerten und darstellen kann, gibt die JavaScript-Datei solche Daten in Form von XML, das Flash gut versteht, an die Flash-Datei zurück. Damit diese Kommunikation reibungslos verläuft, muss die Flash-Datei wissen, wie Photoshops Objektmodell funktioniert. Das steht in der CSXS-Bibliothek (Creative Suite eXtensible Services), die beim fertigen Panel in die Flash-Datei eingebettet wird und diese Informationen im Betrieb an die Flash-Datei weitergibt.
13.5.3 Aufbau eines Panels
Im Folgenden soll mit einem eigenen Farbwähler demonstriert werden, welche Arbeitsschritte für ein solches Panel nötig sind. Die Werkzeuge für das Erstellen eines Panels werden nicht mit Ihrer Creative Suite 4-Installation mitgeliefert. Sie finden ein Paket mit einer ganze Reihe von Beispielen (darunter auch das diesem Abschnitt zugrunde liegende) unter www.adobe.com/devnet/photoshop und dort im Artikel »Photoshop Panel Developer´s Guide«. Detailliertere Informationen finden Sie zusätzlich noch hier: labs.adobe.com/wiki/index.php/PatchPanel. Für das Erstellen der Benutzeroberfläche wird der Einfachheit halber meist der Adobe Flex Builder 3 benutzt.
Abbildung 13.40 Einfacher Farbwähler als Beispiel für ein eigenes Photoshop-Panel
| Daten auf der DVD |
|
Sie finden die Dateien zu diesem Beispiel auf der Buch-DVD unter Beispieldateien/13_Automatisieren/Panels/GD_ColorPicker. |
Funktionaler Teil: JavaScript | Dieser Teil wird mit dem Extend-Script Toolkit bearbeitet. Der Kern des Codes besteht aus vier Funktionen, die jeweils die Vordergrund- und die Hintergrundfarbe in Photoshop setzen und umgekehrt von dort auslesen und per XML an die Flash-Oberfläche weitergeben können. Zwei Hilfsfunktionen sorgen für die Umwandlung der Farbwerte in ein für Photoshop verständliches Format (translateColor) und für die Übersetzung der Werte von Photoshop in das Flash-kompatible XML (convertToXML).
Abbildung 13.41 Funktionaler Code in der JavaScript-Datei
Für die Vordergrundfarbe wird zuerst die Funktion setForeground() definiert, die Photoshop über app. foregroundColor() einen entsprechenden Wert übergibt. Das Gleiche tut die Funktion setBackground() für die Hintergrundfarbe. In die andere Richtung geht es mit getForeground() und getBackground(). Damit werden die aktuellen Photoshop-Werte als XML-Zeichenketten an Flash übergeben.
User Interface | Die Benutzeroberfläche basiert auf der Flex-Technologie. Der dazugehörige MXML-Code wurde in diesem Fall im Flex Builder erstellt.
Abbildung 13.42 Gestaltung der Oberfläche in Flex Builder 3
| Adobe Flex |
|
Flex ist eine Technologie für das Design und die Programmierung von interaktiven Anwendungen, die sowohl im Webbrowser auf der Basis des Flash-Plugins als auch lokal als AIR-Anwendung (Adobe Integrated Runtime) laufen. Flex basiert auf dem XML-Dialekt MXML, den man mit dem Adobe Flex Builder bearbeitet (ab 215 €, 60-Tage-Testversion unter: www.adobe.com/de/products/flex). Alternativ können technisch versiertere Nutzer auf das kostenlose Entwicklungskit (SDK) für Entwicklungsumgebungen wie Eclipse zurückgreifen (labs.adobe.com/technologies/flex). |
Da wir hier hauptsächlich das User Interface erstellen wollen, ist es natürlich angenehm, dass Flex Builder eine grafische Oberfläche (Design) hat, auf der sich das einfach gestalten lässt.
Flex Builder arbeitet auf der Basis eines Projekts, das wir mit allen beteiligten Dateien im Flex Navigator sehen. Markiert ist hier die Kerndatei »ColorPicker.mxml«. Flex Builder bringt eine ganze Bibliothek an gebrauchsfertigen User-Interface-Elementen (Components) mit, die man im Hauptfenster einfach per Drag&Drop platzieren kann. Ausgewählt ist hier die Komponente ColorPicker, die einen einfachen Farbwähler zur Verfügung stellt. Unter Outline kann man die Struktur des Dokuments sehen. Sie ist hier sehr einfach. Auf der rechten Seite werden unter Flex Properties die Eigenschaften des gerade ausgewählten Elements angezeigt, hier das Hintergrundbild mit seinem Dateipfad und der Größe.
Nun müssen wir noch die Oberfläche mit Leben versehen.
Abbildung 13.43 Der ColorPicker in der Ansicht Design (oben) und die Funktion, die er aufruft in der Codeansicht (unten)
Zu fast jedem User-Interface-Element gehören mehr oder weniger viele Ereignisse (»Events«). Hier interessiert uns das Ereignis On change, also wann die Farbe geändert wird. Bei diesem Ereignis wird eine Funktion (changePSForeground()) aufgerufen (Abbildung 13.43, unten), die den geänderten Wert des Elements weitergibt bzw. auswertet.
Abbildung 13.44 Einbinden der CSXS-Bibliothek
Damit das funktioniert, brauchen wir die CSXS-Bibliothek, die im Kopf der MXML-Datei mit import eingebunden wird und die Befehle bereithält, die die Kommunikation mit Photoshop über das JavaScript sicherstellt.
Abbildung 13.45 Die Kommunikationsfunktionen der CSXS-Bibliothek
Die eigentliche Definition der Oberfläche findet mit wenigen und anschaulichen Zeilen MXML-Code am Schluss der Datei statt.
Abbildung 13.46 Code für die Elemente der Benutzeroberfläche
Abbildung 13.47 Die wichtigsten Dateien im Flex-Projekt
Ausgabe | Um die MXML-Datei zu testen, wird sie nach einem Klick auf den Button Run als SWF-Datei ausgegeben, in eine HTML-Datei eingebettet und im Standardbrowser angezeigt. Wenn das Projekt fertig ist, geschieht im Prinzip das Gleiche, wenn man über File • Export • Release Build geht. Wir brauchen hier aber nur die SWF-Datei, die JSX-Datei und das Hintergrundbild. Die CSXS-Bibliothek und die MXML-Datei werden nicht ausgegeben, sondern betten ihren Code nur in die SWF-Datei ein. Nun muss man nur noch die JSX- und die SWF-Datei gemeinsam mit dem Hintergrundbild im Photoshop-Programmordner in Plugins/Panels kopieren. Nach dem nächsten Start von Photoshop finden Sie es unter Fenster • Erweiterungen.
Abbildung 13.48 Installiertes Panel in Photoshops Plugin-Ordner
Abbildung 13.49 Icons für den Button des Panels im Normalzustand (links) und im Rollover-Zustand (rechts)
Für den Button, der in der Photoshop-Palette für unser neues Panel erscheint, kann man noch statt des Standard-»Lego«-Icons, das Photoshop dafür vorsieht, eigene Grafiken verwenden. Sie dürfen Transparenzen enthalten, müssen 32 x 32 Pixel groß sein, im PNG-Format vorliegen, mit dem gleichen Namen beginnen wie die JSX-Datei, und der Name muss mit »Normal« bzw. »Roll-over« ergänzt werden ( in Abbildung 13.48).
Vorteil des neuen Farbwählers ist die Tatsache, dass er permanent zur Verfügung steht und nicht erst wie sonst mit einem Klick auf das Feld für Vordergrund- und Hintergrundfarbe in der Werkzeugleiste von Photoshop aufgerufen werden muss.
Weitere Beispiele für Panels | Noch gibt es nicht allzu viele Panels. Eine Auswahl können Sie unter share.studio.adobe.com herunterladen, wenn sie von dort aus über »Photoshop« zu »Flash Panels« weitergehen.
Abbildung 13.50 Beispiele für eigene Panels
Der GridMaker (Abbildung 13.50, links) wurde bereits in Ab-schnitt 11.11 erwähnt. Eine sehr fortgeschrittene Version des Farbwählers, der sich an Photoshops Original orientiert, zeigt Abbildung 13.50 in der Mitte. Sie kann man unter anastasiy.com kostenlos herunterladen. Leider funktioniert sie bis jetzt nur für die Vordergrundfarbe. Das Panel »Daily Photoshop Tip« (Abbildung 13.50, rechts) ist ein schönes Beispiel dafür, dass man mit Panels auch Internetverbindungen aufbauen kann. Dieses Panel listet verschiedene Tipps von Adobes Photoshop- und Lightroom-Spezialistin Julieanne Kost auf. Sie finden es hier: www.jkost.com/photoshop.html.
Die Möglichkeiten, die das Photoshop-Scripting zusammen mit den neuen Panels und dem nun viel leichteren Erstellen von Benutzeroberflächen bietet, lassen sich derzeit noch gar nicht abschätzen. Vor allem der mögliche Netz- und Dateizugriff macht dieses Werkzeug sehr mächtig. Auch kommerzielle Anwendungen der Panels werden nicht lange auf sich warten lassen.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
