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.

In diesem Howto wird kurz erklärt, welche Software für das Arbeiten mit JavaFX 2.0 benötigt wird und wo diese erhältlich ist. Dabei orientiert sich das Tutorial an den aktuellsten Komponenten, die mit der Veröffentlichung der neuen Version 2.0 von JavaFX erschienen sind. Die Software ist zum Verfassungszeitpunkt dieses Artikels nur für 32-Bit-Windows Betriebssysteme erhältlich.

Im Mai 2011 ist die neue Version von JavaFX erschienen, nachdem der Umgebung in der jüngsten Vergangenheit immer größere Anwendung zuteil wurde. Dieses Howto stellt alle benötigten Komponten, die zum Entwickeln mit JavaFX 2.0 erforderlich sind, mit einer minimalistischen Konfigurationsanleitung zusammen.

Installation

Bevor im nächsten Abschnitt eine minimalistische Beispielsanwendung erstellt wird, müssen zunächst alle erforderlichen Komponenten installiert werden.

Java SE 6 JDK

Für das Arbeiten mit JavaFX  2.0 ist mind. Java SE 6 JDK Update 24 ¹ erforderlich.

1. Java SE 6 Update 25 JDK downloaden.
2. Zur Installation .exe-Datei ausführen.

JavaFX 2.0 SDK (inkl. Runtime)

Zusätzlich zur Java-Entwicklungsumgebung wird das JavaFX SDK benötigt.

1. JavaFX SDK  Zip-Archiv downloaden.
2. Archive auf lokalem System entpacken und darin befindliche .exe-Datei entsprechend nachfolgendem Screenshot ausführen.

Install SDK ²

Netbeans 7.0 und JavaFX Plugin

Als integrierte Entwicklungsumgebung wird aktuell lediglich die Netbeans IDE, nicht aber Eclipse unterstützt. Zur Integration von JavaFX wird ein zusätzliches Plugin benötigt.

1. Aktuellen Netbeans 7.0 Installer (Java SE/EE/all) downloaden.
2. Installer für die Basis Version von Netbeans ausführen.
3. Zip-Archiv JavaFX Plugin für Netbeans downloaden
4. Archive auf dem lokalen System entpacken.
5. Netbeans IDE starten.
6. In der Menü-Leiste „Tools“ wählen und  auf „Plugins“ klicken, vgl. Abb. Install Plugin 1.
7. Register“ Downloaded“ wählen und auf „Add Plugins…“ klicken, vgl. Abb. Install Plugin 2.
8. Im neu geöffneten Fenster zu den zuvor entpacketen Dateien navigieren, vgl. Abb. Install Plugin 3 & 4.
9. Alle entpackten NBM-Dateien auswählen und „Open“ klicken, vgl. Abb. Install Plugin 5.
10. Abschließend auf „Install“ klicken und den Anweisungen des Netbeans Installer folgen, vgl. Abb. Install Plugin 6.

Die notwendigen Komponenten zum Arbeiten mit JavaFX sind damit installiert und eingerichtet.

Adobe Integration – JavaFX Production Suite

Neben der Standardentwicklungsumgebung ist das Arbeiten mit Adobe Illustrator in Kombination mit der JavaFX Plugin Production Suite für vektorbasierten Grafiken sehr empfehlenswert, da die Vektordaten ohne Qualitätsverlust übernommen werden können. Eine Testversion der verschiedenen Adobe Produkt kann bei Bedarf auf der Adobe Produktseite heruntergeladen werden.

Die Production Suite ist zur Zeit noch nicht expliziet für JavaFX 2.0 verfügbar, zur älteren Version 1.3.1 gibt es hier eine Downloadmöglichkeit. Nach der Installation findet sich die Exportmöglichkeit des Plugins in Adobe Illustator unter Datei > Save for JavaFX… .

Hallo Welt! Beispielanwendung

Nachdem alle Voraussetzungen geschaffen sind, zeigt dieser Abschnitt kurz den groben Aufbau einer Anwendung mit JavaFX 2.0 anhand eines beispielhaften Hallo Welt! Programms. Bei der Verwendung von Netbeans muss der Code hierfür noch nicht einmal selbst geschrieben werden, da dieser bei jedem Erzeugen einer JavaFX Main Class automatisch mit erstellt wird.

Als erstes wird eine Class Datei erzeugt, um zu sehen wie das von Netbeans erstellte Programm aussieht:

1. Netbeans starten, sofern nicht noch geöffnet.
2. Unter „File“ auf „New Projekt“ bzw. auf den orangnen Ordner unter der Menüleiste klicken, vgl. Abb.“New Projekt 1.
3. In der Kategorie „Java“ „Java FX Application“ auswählen und dann „Next“ klicken, vgl. Abb. New Projekt 2.
4. Unter „Project Name“ kann ein beliebiger Name gewählt werden.
5. „Finish“ klicken, vgl. Abb. New Projekt 3.

Anschließend öffnet sich eine neue Main Class mit dem neu erstellten Hello World! Beispielprogramm.

Die neue Version von JavaFX versucht sich wieder mehr an der ursprünglichen Java Programmierung zu orientieren. So ist zum Beispiel die Main Class von Typ „.java“ und nicht wie früher von Typ „.fx“. Weiterhin gibt es nun auch wieder eine echte main Methode wie schon in Java.

    public static void main(String[] args) {
        Application.launch(HelloWorld.class, args);
    }

Der „Lauch“- Befehl in der Main Methode führt die statische Methode „Start“ der darin angegebenen Klasse aus. Gleich geblieben im Vergleich zu früheren Versionen von JavaFx ist der Aufbau im Sinne einer „Stage“ und der beinhalteten „Scene“, wie die folgende Abbildung zeigt:

Aufbau JavaFX Frame ³

Die nachfolgenden Befehle erzeugen die angesprochene Stage und ihre Scene sowie eine Variable, die später den Inhalt der Application beinhalten soll. Alle Objekte, die der Variable „root“ zugeordnet werden, sind später auch im Programm zu sehen.

        primaryStage.setTitle("Hello World");
        Group root = new Group();
        Scene scene = new Scene(root, 300, 250, Color.LIGHTGREEN);

Dies trifft zum Beispiel auf den folgenden Button „btn“ zu, der zunächst definiert und dann mit einer Aktion belegt wird. Durch das Hinzufügen zu den Kindern des Wurzelelements taucht er im später sichtbaren Content-Bereich auf.

        Button btn = new Button();
        btn.setLayoutX(100);
        btn.setLayoutY(80);
        btn.setText("Hello World");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            public void handle(ActionEvent event) {
                System.out.println("Hello World");
            }
        });
        root.getChildren().add(btn);

Durch drücken von „F6″ oder dem grünen Pfeil unter der Menüleiste kann das Programm gestartet werden.