Es bietet eine gute Möglichkeit die Entkopplung der einzelnen Schichten einzuhalten und mit der Kombination von Facelets, kann sogar ein Grafiker einfacher damit arbeiten.

Bei JSF sind bestimmte “Aktionen” einer Methode zugeordnet. (Methode aus dem ManagedBean, normale Klasse welche in faces-config.xml festgeleg wird, bzw. bei Spring-Einsatz kann man das auch weglassen). D.h. eine Aktion “Kunde anlegen”, welches als Button dargestellt wird, wird mit der Methode CustomerController.add() gebunden.

Oft funktioniert das auch ohne Probleme. Man füllt das Formular aus und drückt den Button. JSF konstruiert den ComponentTree, stellt die Daten wieder in die Objekte und sollte irgendwann auch unsere Methode CustomerController.add() aufrufen. Jaein.

<h:form enctype=”multipart/form-data”>

Man beachte <code>enctype=”multipart/form-data” </code>. Das ist das Problem. Ein einfaches

<h:form>

funktioniert. Dann wird die Methode wieder auch aufgerufen!

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/

Themen sind u.a.:

• Architektur und Entwicklung
• IT Sicherheit
• Webentwicklung
• JEE, PHP etc
• Brainstorming

Auf ein Neues!