Howto – Touchscreen Komponenten mit JavaFX und Adobe Illustrator

In diesem Howto wird gezeigt wie Interaktionskomponenten für Touchscreen Systeme mit Adobe Illustrator erstellt werden können, um diese mittels JavaFX interaktiv in einer GUI einzubinden. Dies geschieht exemplarisch anhand des in einer Bachelorarbeit entwickelten GUI-Entwurfs für ein Fussgänger-Navigationssystems der UnibwM.

Wichtige Elemente für die GUI eines Touchscreen Systems sind neben Buttons v.a. Elemente zur Auswahl von Listenelementen und Einstellungen. Aus diesem Grund zeigt das vorliegende Howto neben Buttons auch das Erstellen von Dropdown-Elementen und Layern für Texte. Dabei ist der grundlegen Aufbau dieser Elemete gleich, nur im Aussehen unterscheiden sie sich.

Zunächst betrachten wir einen Screenshot der GUI des oben verlinkten Navigationssystems.

[singlepic id=564 h=618 float=center]

Grundsätzlich muss zwischen zwei Arten von Elementen unterschieden werden, zum Einen die, die zur Laufzeit erst erstellt werden und zum Andern die Elemente, die aus bestehenden Dateien gelanden werden. In dieser GUI sind die grauen Elemente des Hintergrunds sowie alle Button-Texte durch den Programmcode erzeugt. Bei den Hintergrundelementen geschieht dies, da sie sehr simple sind und so variabel an die Fenstergröße anpasst werden können. Die Texte werden durch den Namen der Buttons bestimmt und sind daher durch den Programmcode realisiert.

Erstellen von Hintergrundelementen einer Gui

Zunächst werfen wir einen Blick auf die einfachen Element, die nicht interaktiv verwendet werden, und ihre Realisierung in JavaFX.

[singlepic id=321 w=618 float=center]

Die Hintergrundfläche wird durch ein einfaches graues Rechteck realisiert. Dabei muss jedes Element das in der GUI angezeigt wird einem “content” zugeordnet werden. Was es damit genau auf sich hat wird später genauer erklärt.

var rect = Rectangle {
	x: 0  y: 0
	width: FWIDTH  height: FHRaster*(1+4*BLayer)
	fill: Color.LIGHTGRAY
}
insert rect into gui.content;

Linien oder Texte können einer Oberfläche direkt oder einem anderen Objekt zugeordnet werden.

var ddbHline = Line {
	startX: 0  startY: FHRaster*(1+3+4*BLayer)
	endX: FWIDTH  endY: FHRaster*(1+3+4*BLayer)
}
insert ddbHline into ddbFrame.content;

var text = Text {
	font: Font { size: 16 *rate }
	content: BTitle[type]
}
insert text into buttons.content;

Komplexere Elemente können mithilfe der von Sun bzw. inzwischen Oracle bereitgestellten JavaFX Production Suit in Adobe Illustrator erstellt werden und nach dem Exportieren als “FXZ-Datei” eingebunden werden[ref]Details zum Export aus AI in eine “FXZ-Datei” im Artikel “Howto zum Export von JavaFX Dateien durch Production Suite“[/ref]. Im Beispiel der GUI des Fussgänger- Navigationssystems wurden die Buttons zur Auswahl der Navigation sowie zur Steuerung der Karte in AI erstellt. Wie diese nach dem Export in das Programm eingebunden werden, beschriebt der letzte Abschnitt dieses Howtos. Zunächst wird jedoch erklärt, wie solche Elemente in AI erzeugt werden.

Erstellung der Buttons für das Fussgängernavigationssystem

Zunächst wurde ein erster Entwurf der erforderlichen grafischen Elemente von einer Designerin anhand von GUI Mock-Ups erstellt. Diese Elemente wurden anschließend weiter bearbeitet und an die Vorstellungen der grafischen Oberfläche angepasst.

Normale Buttons

Die Abbildung zeigt den Button aus dem Mock-Up links, sowie den von der Grafikerin erstellten Button, mit zwei unterschiedlichen Zuständen (Mitte). Rechts befinden sich die Zustände, nachdem sie an das vorgegebene Farbschema angepasst wurden.

[singlepic id=316 w=618 float=center]

Die Buttons besitzen eine Grundfläche und entsprechende Layer. Durch einen mehrfarbigen Hintergrund und weitere Effekte können verschiedene Abstufungen geschafft werden. Hierzu muss es einen Layer geben, in dem Texte oder Symbole eingefügt werden können. Die nachfolgende Abbildung zeigt eine sinnvolle Anordnung der Layer und ihre Bezeichnung, um sie in der GUI zu verwenden.

[singlepic id=315 w=618 float=center]

Die Buttons benötigen sinnvollerweise aussagekräftigen Icons, um ihrer Funktionalität zu beschreiben. Die meisten der hier verwendeten Icons stammen von der Internetseite „The Noun Projekt“. Diese Seite sammelt spezielle Symbole, auch Piktogramme genannt, die auf der ganzen Welt einheitlich verwendet werden, um einen bestimmten Zweck auszudrücken. Bei dem sehr hilfreichen Projekt geht es im Prinzip darum, eine visuelle Sprache zu erzeugen, die es ermöglicht, jkulturunabhängig ausschließlich anhand der verwendeten Symbole zu kommunizieren.

[singlepic id=335 w=618 float=center]

Die Problematik einer nicht fest definierten Sprache ist jedoch, dass man sie schnell missverstehen kann. Die verwendeten Icons müssen daher gut überlegt sein. Im Falle der zu Grunde liegenden Bachelor Arbeit wurden zu jeder Aktion mehrere unterschiedliche Buttons erstellt, die dann durch eine kurze Benutzerstudie bewertet wurden. Fall keines der Standard-Icons ausreichend gut wiedererkannt wird, kann es durchaus notwendig sein, eigne Icons zu entwickeln. Dies geschah im vorliegenden Fall beispielsweise für den Button “militärisch” der Navigationssoftware, da die Seite “The Noun Projekt” keine sinnvollen Möglichkeiten bat. Die folgende Abbildung zeigt einige der erstellten Icons.

[singlepic id=317 w=618 float=center]

Dropdown Listen

Für die GUI des Navigationssystem wurde eine eigene Dropdown Box entwickelt. Das Konzept der Dropdown Boxen ist in den folgenden Abbildungen gezeigt. Die Form und Anordnung der Elemente ist an die der Navigationsführung der Cityterminals 2.0 angelehnt. Die linke Abbildung zeigt die Umsetzung auf einem Cityterminal. In der rechten Abbildung ist das entwickelte Mock-Up-Konzept und die grafisch verfeinerte Realisierung zu sehen.

[nggtags Gallery=”Dropdown Menü”]

Alle Dropdown Elemente sind im Grunde aufgebaut wie ein normaler Button. Durch die verschiedenen Formen ist es möglich die Zustände, wie geschlossene oder geöffnete Boxen, voneinander abzuheben. Wie bereits beim Button, kann als Inhalt hier genauso zwischen Text oder Symbolen gewählt werden.

Leiste zum Zoomen

[singlepic id=320 w=150]

Die in der Abbildung gezeigte Leiste zum Zoomen der Lagekarte funktioniert über zwei Buttons sowie den Schiebregler in der Mitte. Derartige Elemente sind mit JavaFX natürlich individuell erstellbar und können der GUI eine Vielzahl neuer Funktionen geben.

Sowohl die Textfelder als auch die Leiste wurden an Farben und Formen des vorgegebenen Designs angepasst und fügen sich somit gut in das Gesamtbild. Die einfachen Buttons der GUI haben dabei zwei verschieden abgestufte Orangetöne. Die Textfelder sind grau und können auch durch orange hervorgehoben zu werden (z.B. für einen aktiven Zustand). Alle Elemente dieser Abbildung zusammen erzeugen die GUI der Navigationssoftware. Wie diese in JavaFX eingebunden werden, zeigt der folgende Abschnitt.

[singlepic id=262 w=618 ]

Einbinden exportierter FXZ-Dateien

Um nach einem Export die Daten verwenden zu können müssen sie in JavaFX geladen werden und entsprechend dem “content” zugeordnet werden. Das Laden der Elemente wird durch folgendes Codefragment realisiert.

fxdGUI = FXDNode {
	url: "{__DIR__}GUI.fxz"
	backgroundLoading: true
	placeholder: Text { x: 10 y: 10 content: "Loading Gui ..."}
	loader: FXDLoader {
		onDone: function() {
			//Aufruf der Funktion zur Erstellung der GUI
			loadGUI();
		}
	}
};

Das Positionieren in der GUI sowie das endgültige Hinzufügen geschieht durch folgende Ausschnitte aus dem Programmcode:

var button = fxdGUI.getNode(BTitle[type]);
var duplicate = Duplicator.duplicate(button);

//Button wird zuerst an die Koodinate 0,0 gesetzt
duplicate.translateX = -(duplicate.impl_getPivotX()-(duplicate.layoutBounds.width/2)*duplicate.scaleX);
duplicate.translateY = -(duplicate.impl_getPivotY()-(duplicate.layoutBounds.height/2)*duplicate.scaleY);
duplicate.onMouseClicked=buttonpressed;

insert duplicate into buttons.content;
insert text into buttons.content;

Ein wesentlicher Vorteil einer Umsetzung der GUI mit JavaFX und Adobe Illustrator ist die Trennung zwischen Programmierer und Designer. So kann bei guter Programm-Realisierung die GUI vom Designer verändert werden ohne das dabei der Quellcode geändert werden muss. Beispielsweise reicht es, wenn der Designer einen neuen Button erzeugt und ihn nach einem gegeben Muster benennt. Beim nächsten Erneuern der GUI übernimmt der Code den Button einfach und fügt ihn zum “content” hinzu.

Abschließend noch ein kurzer Einblick in den Aufbau und die Komponenten einer JavaFX Oberfläche. Der gesamte Frame einer Anwendung in JavaFX ist vom Typ „Stage“. Diese ist einzigartig und definiert Aussehen und Eigenschaften des Frames. Weiterhin beinhaltet die “Stage” genau eine „Scene“, welche sozusagen den Inhalt der Oberfläche bestimmt. Alle Elemente die in der GUI zu sehen sein sollen, müssen entweder direkt in dieser „Scene“ aufgeführt sein oder in einem anderen Element (Container), welches sich in der „Scene“ befindet.

Für jede Klasse, die einen Knotenpunkt darstellt, ist die Variable “content“ die Referenz auf alle Folgeknoten. Somit ist die „Stage“ quasi das Programmfenster und die Scene der Wurzelknoten zu einem Baum, der alle Elemente der GUI beinhaltet. Zur Verdeutlichung dient findet sich unten noch die folgende Grafik der Oracle-Website. Alle starren Elemente der GUI werden dabei dem “content” der gleichnamigen Variablen hinzugefügt, welche direkt in der Scene auftaucht:

[singlepic id=259 w=540]