JavaFX: Suns neue Produktfamilie

JavaFX ist eine neue Reihe von Produkten und Technologien, die man zum Erstellen von Rich Internet Applications (RIAs) verwenden kann. JavaFX besteht derzeit aus JavaFX-Script und JavaFX-Mobile. ZDNet wirft einen Blick auf die neue Sun-Familie.

Mit JavaFX^[1] tritt Sun Microsystems gegen Konkurrenten wie Adobe AIR^[2] und Microsofts Silverlight^[3]-Technologie an. Auf den Punkt gebracht: AIR ermöglicht Flex- und DHTML-Entwicklern das Erstellen von Anwendungen für den Desktop; Silverlight ermöglicht Entwicklern das Erstellen von Rich-Media-Anwendungen, die im Browser ausgeführt werden; mit JavaFX-Script^[4] können Entwickler komplexe Benutzerschnittstellen für Java-Anwendungen erstellen.

Wie sehen die aktuellen JavaFX-Produkte aus?

JavaFX-Mobile^[5] ist eine komplette Betriebssystem- und Applikationsumgebung für mobile Anwendungen auf der Basis von Java und Linux. Mit JavaFX-Script steht Content-Entwicklern eine hochproduktive Scriptsprache zur Verfügung, die in Verbindung mit Java-Technologie das Erstellen von Rich-Media und Content erleichtern soll. JavaFX-Script bildet dabei das Herzstück der JavaFX-Familie und ist der interessanteste Bestandteil der Produktpalette. Deshalb nimmt Sun auch an, dass Entwickler "JavaFX-Script" einfach zu "JavaFX" verkürzen werden.

JavaFX-Script soll das Erstellen komplexer Benutzerschnittstellen für Java-Clients erleichtern. Es ist in Java implementiert und verwendet Java-APIs für 2D- und 3D-Grafiken sowie verschiedene Steuerelemente für die Benutzeroberfläche. JavaFX-Script unterstützt eine deklarative Syntax für die UI-Definition. Diese ähnelt der von Microsoft für XAML^[6] und von Adobe für MXML verwendeten UI-Definition, basiert aber nicht auf XML. Im Prinzip ist dies eine echte Programmiersprache und nicht nur ein Markup-Tool. Man kann also eine ganze Anwendung in JavaFX-Script schreiben.

Wer JavaFX-Anwendungen direkt mit der IDE schreiben will, sollte am besten JDK 6 mit Netbeans 5.5.1 oder 6.0^[7] herunterladen und dann ebenso wie das JavaFX-Script-Plugin für NetBeans 5.5.1^[8] oder das für NetBeans 6.0^[9] installieren. Außerdem gibt es noch ein JavaFX-Plugin für Eclipse^[10].

Es existiert auch eine separate Initiative namens OpenJFX-Compiler^[11]. Sie hat sich die Entwicklung eines JavaFX-Compilers zum Ziel gesetzt, um JavaFX-Scripts direkt und ohne Zwischenschritte in JVM-Klassendateien (Bytecode) übersetzen zu können. Dieser Compiler befindet sich allerdings noch in einem sehr frühen Design- und Implementierungsstadium. Hier die obligatorische "Hello-World"-Anwendung (Listing 1):

import javafx.ui.*; Frame { title: "Hello World JavaFX" width: 300 height: 100 content: Box { content: [Label { text: "Hello World" toolTipText: "Tool tip" font: Font { size: 18 } border: EmptyBorder { top: 10 left: 10 } background: Color { blue: 255 green: 255 red: 255 } }] } visible: true }

Damit diese Anwendung in NetBeans 5.5 läuft, müssen folgende Schritte ausgeführt werden:

• NetBeans 5.5 starten.
• Aus dem Hauptmenü Datei | Neues Projekt wählen.
• Im neuen Projektfenster die Kategorie Allgemein auswählen, Java-Anwendungs-Projekt wählen und auf Weiter klicken.
• Im Fenster Neue Java-Anwendung "FXExample" in das Textfeld für den Projektnamen eingeben.
• In demselben Fenster mithilfe der Schaltfläche Durchsuchen einen Speicherort für das Projekt auswählen.
• Die Kästchen Als Hauptprojekt einrichten und Hauptklasse erstellen deaktivieren und dann auf Fertigstellen klicken.
• Mit der rechten Maustaste auf FXExample | Quellpakete klicken und Datei/Ordner | Neu wählen.
• Im Fenster Neue Datei die Kategorie Sonstige auswählen, als Dateityp JavaFX-Datei markieren und auf Weiter klicken.
• Im Fenster Neue JavaFX-Datei als Dateiname "HelloWorld" und als Ordnername src eingeben, danach auf Fertigstellen klicken.
• Anschließend den Code aus Listing 1 in HelloWorld.fx kopieren.
• Mit der rechten Maustaste auf das FXExample-Projekt klicken und Eigenschaften auswählen.
• In den FXExample-Projekteigenschaften den Knoten Ausführen aus den Kategorien auswählen.
• Im Textfeld als Wert "Hello World" eingeben und auf OK klicken.
• Schließlich mit der rechten Maustaste auf das FXExample-Projekt klicken und die Option Projekt ausführen wählen.

Wenn alles funktioniert, sollte die "Hello-World"-Anwendung ausgeführt werden und etwa so aussehen:

Nun soll eine etwas komplexere Anwendung erstellt werden: ein Fenster mit dem Textfeld, einer Reihe von Schaltflächen und zugeordneten Klick-Reaktionen. Hierzu muss man den Schaltflächen das Äquivalent von Action-Listeners hinzufügen.

Da Schaltflächen eingefügt werden sollen, gibt es in diesem Frame mehrere Komponenten. Bei traditioneller GUI-Programmierung müsste man dazu Layout-Manager verwenden. Für folgendes Beispiel wird auf ein vereinfachtes Layout zurückgegriffen: Flow-Layout. In JavaFX-Script erleichtern einige nützliche Klassen namens xx-Panel den Programmierern das Leben. Für ein Flow-Layout gibt es ein Flow-Panel. Listing 2 zeigt den Code der neuen Anwendung:

import javafx.ui.*; var win = Frame { title: "Second JavaFX application" width: 200 height: 100 content: FlowPanel { // Anmerkung 1 content: [ TextField { editable: false value: "Hello, Text" width: 100 }, Button { text: "a" }, Button { text: "b" }, Button { text: "Clear" }, // Anmerkung 1 ] } // Anmerkung 1 visible: true // zeigt den Frame an };

Alle Komponenten des Flow-Panels sind als ein Array von Komponenten aufgeführt, markiert durch die Symbole [ und ]. Die einzelnen Komponenten werden durch Kommata voneinander getrennt. Auch nach der letzten Komponente kann noch ein Komma stehen, das allerdings ignoriert wird.

Als Reaktion auf das Anklicken der Schaltflächen soll sich jetzt der Wert des Textfeldes ändern. Dazu muss die Java-Konsole angezeigt oder JavaFX über die Befehlszeile ausgeführt werden, um die Ergebnisse von System.out.println zu sehen. Hier die neue Version (Listing 3):

import javafx.ui.*; import java.lang.System; // Anmerkung 1 var win = Frame { title: " Second JavaFX application" width: 200 height: 100 content: FlowPanel { content: [ TextField { editable: false value: "Hello, Text" width: 100 }, Button { text: "a" action: operation() { System.out.println("'a' clicked"); } }, Button { text: "b" action: operation() { System.out.println("'b' clicked"); } }, Button { text: "Clear" action: operation() { System.out.println("'clear' clicked"); } }, ] } visible: true // zeigt den Frame an. };

Es ist recht einfach, einen Action-Listener hinzuzufügen: Man definiert einfach eine operation(), die das gewünschte Verhalten festlegt. Allerdings soll hier ja der Text im Textfeld geändert werden, und das ist so noch nicht möglich. Man beachte auch die Importanweisung: Fast jede Klasse muss ausdrücklich importiert werden. Es gibt keine pauschale Importanweisung wie in Java mit java.lang.*.

In JavaFX lassen sich beliebige neue Klassen definieren und Variablen zuordnen, so wie die Frames in den Beispielen oben.

Es gibt außerdem ein sehr interessantes Feature namens Binding, mit dem man den Wert bestimmter Attribute von anderen abhängig machen kann. So lässt sich etwa das Attribut text des Textfeldes von einem Wert abhängig machen, auf den die Schaltflächen leichteren Zugriff haben. Listing 4 zeigt die neue Version mit zusätzlichem Binding und Datenmodell:

import javafx.ui.*; import java.lang.System; class TextValue { attribute value: String; operation clear(); // Anmerkung1 } operation TextValue.clear() { // Anmerkung 1 value = ""; } var model = TextValue { // Anmerkung 2 value: "Hello, Model" }; var win = Frame { title: "Second JavaFX applications" width: 200 height: 100 content: FlowPanel { content: [ TextField { editable: false value: bind model.value // Anmerkung 3 width: 100 }, Button { text: "a" action: operation() { model.value = model.value.concat("a"); // Anmerkung 4 } }, Button { text: "b" action: operation() { model.value = model.value.concat("b");// Anmerkung 4 } }, Button { text: "Clear" action: operation() { model.clear(); // Anmerkung 5 } }, ] } visible: true // zeigt den Frame an };

Es gibt drei neue Einträge am Anfang der Datei: eine Klassendefinition, eine Methodendefinition und eine Variablendeklaration. Die Klassendefinition legt die für ein Objekt vorhandenen Werte (Attribute) und Methoden (Operations) fest. Das Wert-Attribut des Textfeldes (Anmerkung 3) ist verändert. Jetzt wird der Ausgangswert nicht gleich bei der Deklaration des Textfeldes angegeben, sondern das Textfeld soll den Wert von model.value verwenden.

Die Benutzung des Schlüsselworts bind bewirkt, dass das Textfeld jedes Mal aktualisiert wird, wenn sich der Wert von model.value ändert. Es gilt auch zu beachten, dass das Binding in beide Richtungen funktioniert: Wäre das Textfeld editierbar, würde jede Änderung dort auch in model.value auftauchen. In den mit Anmerkung 4 markierten Zeilen wurden die Schaltflächen a und b so verändert, dass beim Anklicken jeweils "a" oder "b" an den String angehängt und so der Wert des Modells verändert wird. Leider kann man hier nicht bequemerweise den "+"-Operator verwenden. Er ist nämlich nicht zur Verwendung mit Strings geeignet.

Etwas vermisst man jedoch in der Original-Spezifikation: Jedesmal, wenn sich das Textfeld ändert, soll dessen Inhalt über standard.output ausgegeben werden. Leider gibt es keine Syntax, um der bind-Anweisung Code hinzuzufügen. Es lässt sich hier keine Ausgabe über system.output einfügen. Als Ausweg bleibt aber die Verwendung von Triggern, einem weiteren Feature von JavaFX, das ähnlich wie das Binding funktioniert. Damit wird eine Aktion ausgelöst, sobald sich ein Attribut ändert. Trigger sind freilich leistungsfähiger, als es bei diesem einfachen Verwendungsbeispiel deutlich wird. Ergänzt man den folgenden Code, resultiert daraus ein funktionierender Trigger:

trigger on TextValue.value[oldValue] = newValue { System.out.println("old:".concat(oldValue).concat("; new:").concat(newValue)); }

JavaFX-Script bietet eine Vielzahl von Funktionen für Daten-Binding und Komponenteneinrichtung. Wer das Framework wirklich voll ausnutzen will, sollte auf jeden Fall Scripts schreiben, die die Vorteile von Daten-Binding und Komponenteneinrichtung nutzen.

Fazit

Laut dem Sun-Mitarbeiter Joshua Marinacci ist JavaFX-Script eine neue Programmiersprache, die maßgeblich für Animationen und Grafiken^[12] entwickelt wurde. Der Namensbestandteil "Script" ist jedoch etwas unglücklich gewählt. Denn die Sprache ist statisch typisiert und wird schon bald direkt in JVM-Bytecode kompiliert werden. Allerdings stimmt die Bezeichnung insofern, als es bei JavaFX-Script darum geht, rasch Komponenten zusammenzufügen, die in einer anderen Programmiersprache geschrieben sind, vor allem in Java.

JavaFX-Mobile repräsentiert die nächste Generation von Java auf Mobilgeräten. Bis auf den Betriebssystemkernel handelt es sich dabei um einen vollständigen mobilen Stack, der in Java geschrieben ist. Er ist von JavaSE abgeleitet und unterstützt JavaFX-Script ebenso wie Swing.

Wer mehr über die neue Programmiersprache JavaFX-Script erfahren möchte, sollte sich Suns exzellentes zweiteiliges Tutorial anschauen:

• JavaFX-Script-Lehrgang, Teil 1. Eine Einführung für Java-Programmierer^[13]
• JavaFX-Script-Lehrgang, Teil 2. Verbindung mit einem Remote-Server mittels JavaFX und RMI^[14]

URLs in diesem Artikel:
[1] = http://www.sun.com/software/javafx/
[2] = http://labs.adobe.com/technologies/air/
[3] = http://www.zdnet.de/builder/webdesign/0,39023554,39159522,00.htm
[4] = http://www.sun.com/software/javafx/script/index.jsp
[5] = http://www.sun.com/software/javafx/mobile/
[6] = http://www.zdnet.de/news/software/0,39023144,39136566,00.htm
[7] = http://java.sun.com/javase/downloads/netbeans.html
[8] = https://openjfx.dev.java.net/javafx-nb55-plugin-install.html
[9] = https://openjfx.dev.java.net/javafx-nb60-plugin-install.html
[10] = https://openjfx.dev.java.net/javafx-eclipse-plugin-install.html
[11] = https://openjfx-compiler.dev.java.net/
[12] = http://weblogs.java.net/blog/joshy/archive/2007/09/javafx_javafx_s.html
[13] = http://java.sun.com/developer/technicalArticles/scripting/javafxpart1/
[14] = http://java.sun.com/developer/technicalArticles/scripting/javafxpart2/