Das Beispiel basiert auf das Tutorial von SUN [1] und wurde um die Eigenschaft erweitert, dass das Applet auch auf dem Desktop verwendet werden kann.

Das Beispiel erstellt eine analoge Uhr, welche man sich auf den Desktop ziehen kann. Der Fokus liegt auf die Implementierung und nicht auf jegliche graphische Feinheiten.

Ein JavaFX Script wie im unteren Listing zu sehen beinhaltet immer eine Stage Klasse. Dies ist der globale Container, der alle weiteren Elemente beinhaltet.

import javafx.scene.Scene;
import javafx.stage.Stage;

var stage = Stage {
      title: "JavaFX Test Clock"
      width: 300
      height: 300
      scene: Scene {
          content: []
     }
}

Da JavaFX eine deklarative Sprache ist, beschreibt man, was man haben will. Dafür gibt es verschiedene Propterties (wie in dem Fall: width, height, scene, content), die man belegen kann.

Ein Stage Container besitzt ein Scene, in dem verschiedene Nodes enthalten sind. Node kann hier als ein graphisches Element (Rectangle, Text, ImageView) angesehen werden. In dem oberen Listing gibt es noch keine Nodes – content ist ein leeres Array.

Eine Uhr besteht aus verschiedenen Kreisen und Linien für die Zeiger. Nun könnte man in dem stage.scene.content diese graphischen Elemente schreiben, da man jedoch etwas strukturierter arbeiten will, kapseln wir die Funktionalität in eine eigene Klasse. Im folgenden Listing ist ein Teil von Clock.fx zu sehen:

public class Clock extends CustomNode {

public var radius: Number = 77;
public var centerX: Number = 144;
public var centerY: Number = 144;

public var hours: Number;
public var minutes: Number;
public var seconds: Number;

public override function create(): Node {
  return Group {
    content: [
     Group {
      transforms: Translate {
        x: centerX
        y: centerY
      }
      content: [
        // displays the number of every third hour
        for (i in [3, 6, 9, 12])
          Text {
             transforms: Translate {
                x: -5,
                y: 5
             }
             fill: Color.GREEN
             font: Font {
               size: 16
             }
             x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3))
             y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3))
             content: "{i}"
          },  //Text

          // display a yellow point for the rest of the
          // hours on the clock
          for (i in [1..12] )
            if (i mod 3 != 0 ) then Circle {
               transforms: Rotate {
                  angle: 30 * i
               }
               centerX: radius
               radius: 3
               fill: Color.YELLOW
            } // if
            else [ ],

            // clock's first center circle
            Circle {
              radius: 5
              fill: Color.DARKRED
            }, //Circle
            // the smaller center circle
            Circle {
              radius: 3
              fill: Color.RED
            }, //Circle
            // the seconds hand
            Line {
              transforms: Rotate {
                angle: bind seconds * 6
              }
              endY: -radius - 3
              strokeWidth: 2
              stroke: Color.VIOLET
            },  //Line
            // the hour hand
            Path {
              transforms: Rotate {
                 angle: bind (hours + minutes / 60) * 30 - 90
              }
              fill: Color.YELLOW
              elements: [
                 MoveTo {
                    x: 4,
                    y: 4
                 },
                 ArcTo {
                    x: 4
                    y: -4
                    radiusX: 1
                    radiusY: 1
                 },
                 LineTo {
                    x: radius - 15
                    y: 0
                 },
              ] //elements
            },  // Path
            // the minutes hand
            Path {
              transforms: Rotate {
                 angle: bind minutes * 6 - 90
              }
              fill: Color.GREEN
              elements: [
                 MoveTo {
                    x: 4,
                    y: 4
                 },
                 ArcTo {
                    x: 4
                    y: -4
                    radiusX: 1
                    radiusY: 1
                 },
                 LineTo {
                    x: radius
                    y: 0
                 },
              ] // elements
            } // Path
       ] // 2. Group content
     } // Group
   ] // Group content
  };  // Group
 } // create()

} // class

Um nun das Drag-and-Drop des Applets zu ermöglichen, erweitert man den Stage um einen sogenannten AppletStageExtension.

stage = Stage {
    title: "JavaFX Test Clock"
    width: 300
    height: 300
    style: StageStyle.TRANSPARENT
    onClose: function() {
        //System.exit(0);
    }
    visible: true
    scene: Scene {
        fill: bind if (inBrowser) Color.WHITE else Color.TRANSPARENT
        content: [
            Clock {},
            // drag controls
            dragArea,
            dragClosers,
            statusText
        ]
    }
    extensions: [
        AppletStageExtension {
            shouldDragStart: function(e): Boolean {
                return inBrowser and e.primaryButtonDown and dragArea.hover;
            }
            onDragStarted: function(): Void {
                inBrowser = false;
            }
            onAppletRestored: function(): Void {
                inBrowser = true;
            }
            useDefaultClose: false
        }
    ]
}

Die Funktion shoudDragStart() gibt an, ob die Drag-Drop-Funktionalität angeboten werden soll, oder nicht.
Anzumerken ist, dass das Property AppletStageExtension.useDefaultClose = false ist, da ein eigenes Close-Symbol erstellt wurde. Beim Betätigen dieses Buttons schließt sich das Applet und kehrt zum Browser zurück – falls dieser noch vorhanden ist.

In dem oberen Listing beinhaltet stage.scene.content noch den Node “dragArea”:

var dragArea:Rectangle = Rectangle {
    x: 155
    y: 30
    width: 420
    height: 25
    fill: Color.RED
    onMouseDragged:function(e:MouseEvent):Void {
        stage.x += e.dragX;
        stage.y += e.dragY;
    }
};

Das ist der Bereich, in dem der Nutzer das Applet herum ziehen kann. In der onMouseDragged() Funktion wird immer die aktuelle Position der Stage gesetzt.

Was passiert, wenn ein Applet auf den Desktop verschoben wird und das Browser-Fenster geschlossen wird? Dann bietet Java die Möglichkeit eine Verknüpfung zu erstellen.
Dabei speichert es ein paar XML-Daten im User-Verzeichnis und setzt eine Verlinkung, um die Daten per Java Webstart zu starten.

Der Inhalt der JNLP-XML-Datei sieht z.B. so aus:

<?xml version="1.0" encoding="UTF-8"?>
<jnlp spec="1.0+" codebase="http://example.net/JavaFXClock" href="JavaFXClock_browser.jnlp">
    <information>
        <title>JavaFXClock</title>
        <vendor>Hafid Haddouti</vendor>
        <homepage href="http://example.net/JavaFXClock"/>
        <description>JavaFXClock</description>
        <offline-allowed/>
        <shortcut>
            <desktop/>
        </shortcut>
    </information>
    <resources>
        <j2se version="1.5+"/>
        <extension name="JavaFX Runtime" href="http://dl.javafx.com/javafx-rt.jnlp"/>
        <jar href="JavaFXClockt.jar" main="true"/>
    </resources>
    <applet-desc name="JavaFXClock" main-class="com.sun.javafx.runtime.adapter.Applet" width="350" height="350">
        <param name="MainJavaFXScript" value="javafxtest.Main">
    </applet-desc>
</jnlp>

Ein Beispiel ist hier zu finde.

Links:
[1] JavaFX Tutorial: http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/

Überblick

Um JavaFX-Anwendung zu nutzen, braucht man standardmäßig nur die aktuelle Java Version. Hier ist Java 1.6.0_11 [3] passend, da diese Version die Fähigkeit anbietet, Applets auf den Desktop zu ziehen. Beim ersten Aufruf einer JavaFX-Anwendung werden die Runtime-Bibliotheken beim ersten Mal runtergeladen, wenn sie nicht vorhanden sind. Bei entsprechender Implimentierung der JavaFX-Anwendung (was ja ein Applet ist), kann man sich das Applet auf den Desktop ziehen. Schließt man dann den Browser, bekommt man die Möglichkeit ein Verweis auf den Desktop zu erstellen, um später das Applet – und nur das Applet, nicht auch den Browser – wieder zu nutzen.

JavaFX kommt auch mit einer neuen Script-Sprache, dem JavaFX Script. JavaFX Script ist eine deklarative kompilierbare Scriptsprache, was auch type inference – und somit implizit auch statische Typen – anbietet.

Entwicklung

Zur Entwicklung. Sun setzt ja bekanntlich auf Netbeans. Das bedeutet in dem Fall, es gibt ein Netbeans-Version [4] mit integriertem JavaFX. Diese Version beinhaltet das JavaFX Software Development Kit, Beispiele und bei Windows noch den JavaFX Mobile Emulator.

Zusätzlich gibt es Plugins für Photoshop und Adobe Illustrator. Mit JavaFX sollen ja auch schöne GUIs erstellt werden und hierfür bietet man Grafikern eine einfache Möglichkeit dies in ihren bekannten Umgebungen zu erstellen. Wie gut diese Plugins funktionieren, kann ich leider nicht sagen.

Für Eclipse-Nutzer gibt es ein veraltetes Plugin [5], hier ist zu hoffen, dass demnächst eine aktuellere Version veröffentlich wird.

Mit Netbeans kann man jedenfalls recht einfach erste JavaFX Anwendungen realisieren. Für die grafische Darstellung kann man eine Palette von vorhandenen Mustern, Transformationen etc nutzen. Jedoch gibt es hier keinen visuellen Designer. Die Palette beinhaltet nur Code-Fragmente, die in den existierenden Code eingefügt werden können. Ob es hier einen Designer geben wird, ist fraglich, da entsprechen Photoshop/Illustrator Plugins existieren.

Features

Die Features dürfen nun auch nicht vergessen werden:

• RIA Plattform für verschiedene Endgeräte
• Einfache Integration für Grafiker
• Gute Unterstützung von Grafiken, 2D, 3D, Video, Audio
• Zugang zu Java-Bibliotheken

Für weitere Details sei auf die Überblicks-Seite in [1] verwiesen.

Links:
[1] JavaFX Überblick: http://javafx.com/about/overview/
[2] JavaFX Getting Started with the Technology: http://javafx.com/docs/gettingstarted/javafx/
[3] Java SE 6 Update Release Notes: http://java.sun.com/javase/6/webnotes/6u11.html
[4] JavaFX Download (for Windows): http://javafx.com/downloads/windows.jsp
[5] OpenJFX Eclipse Plugin v0.0.2: http://download.java.net/general/openjfx/plugins/eclipse/
[6] JavaFX API: http://java.sun.com/javafx/1/docs/api/index.html
[7] JavaFX Script Language: http://java.sun.com/javafx/1/tutorials/core/
[8] JavaFX Language Reference: http://openjfx.java.sun.com/current-build/doc/reference/JavaFXReference.html
[9] JavaFX Blog: http://blogs.sun.com/javafx/