In diesem Howto wird gezeigt, wie aus einer Vektorgrafik in Adobe Illustrator eine FXZ-Datei erstellt werden kann, die zur Programmierung einer entsprechenden Oberfläche in JavaFX benötigt wird. Dazu wird das Plugin der JavaFX Production Suite verwendet, das als Integrationslösung zur Unterstützung solcher Anwendungsfälle von Oracle bereitgestellt wird.

Falls bisher noch keine Runtime-Umgebung für JavaFX installiert wurde, zeigt der zuvor in dieser Serie erschienene Artikel Howto – Erste Schritte mit JavaFX 2.0 alle erforderlichen Voraussetzungen, die für das Programmieren mit JavaFX benötigt werden, sowie allgemeine grundlegende Begriffe und Befehle. Die nachfolgend vorgestellten Schritte stammen z.T. aus dem Getting Started Tutorial zur Production Suite und wurden für den Kontext der Artikelserie zu JavaFX entsprechend angepasst.

Vektorgrafik in Adobe Illustrator

Zunächst betrachten wir eine Grafik mit ihrer Ebenenstruktur in Adobe Illustrator. Bereits beim Erstellen der Grafik muss auf Ebenen und Benennung geachtet werden. Rechts im Bild sind die Ebene mit ihren jeweiligen Gruppierungen gut zu erkennen.

Struktur einer Vektorgrafik ¹

In der abgebildeten Grafik sind alle Zahlen mit ihrem quadratischen Rahmen gruppiert und durchnummeriert. An der Benennung der Elemente kann man ableiten, welche Komponenten später im Programm angesprochen können werden sollen. Alle Objekte, die in JavaFX über ihre ID (Ebenennamen) aufrufbar sein sollen, sollten in Adobe Illustrator mit dem Präfix „JFX:“ versehen werden. Dies bietet sich insbesondere bei Grafiken an, die viele Objekte bzw. Ebenen besitzen, von denen aber nur ein gewisser Teil später im Programm explizit angesprochen werden muss.

Über den Punkt „Datei“ in der Menüleiste erreicht man unter „Save for JavaFX…“ das Plugin. Es öffnet sich das unten abgebildete Exportfenster mit den möglichen Ausgabeoptionen. Wenn später alle Objekte über eine ID angesprochen werden sollen, kann dies in den Ausgabeeinstellungen festgelegt werden.

Exportbeispiel mit Ausgabe optionen ¹

Tranformation in JavaFX-Quelltext

Das Speichern erzeugt die FXZ-Datei zur geöffneten Grafik. Beim Vergleich der originalen Adobe Illustrator Grafik und der exportierten FXZ-Datei ist gut zu erkennen, wie die Benennung im Quelltext der Ausgabedatei in der folgenden Grafik wiederzufinden ist.

Struktur einer FXZ-Datei ²

Zum Ausgabeformat ist noch zu sagen, dass die JavaFX-Ausgabedatei, wie schon angesprochen, im FXZ-Format vorliegt. Dieses beinhaltet eine FXD-Datei, in der die eigentliche textuelle Beschreibung der Grafik enhalten ist. Die textuelle Beschreibung basiert auf XML und beschreibt Element für Element, gegliedert nach den jeweiligen Ebenen. Somit besteht die Ausgabedatei (.fxz) aus der Grafik an sich und der textuellen Beschriebung (.fxd), was sich auch im Wurzeltag „FXD“ in  der Abbildung oben widerspiegelt.

Weiterführenden Informationen zu JavaFX und der JavaFX Production Suite finden sich u.a. auf den Oracle-Seiten JavaFX Tutorials und JavaFX Howtos.