Out-of-Home Displays werden an unterschiedlichsten öffentlichen Orten immer häufiger für Produkt- und Unternehmenswerbung verwenden. Gleichzeitig steigt das Interesse an Gestensteuerung und anderen modernen Interaktionsmöglichkeiten mit Großbildschirmen durch den Erfolg von Spielekonsolen wie beispielsweise Microsoft Kinect stetig an. Vor diesem Hintergrund liefert der folgende Beitrag zunächst eine kurze Einführung in den Themenbereich „Out-of-Home Displays“ sowie die damit verbundenen Begriffe „Ubiquitous Computing“ und „Pervasive Advertising“. Anschließend werden mögliche Klassifikationskriterien zur Strukturierung  von Out-of-Home Displays erarbeitet und anhand von Beispielen vorgestellt. Am Ende des Artikels erfolgt ein kurzer Ausblick über Nutzungsparadigmen von Out-of-Home Displays, die sich auf die Verbesserung der Informationsversorgung innerhalb von Unternehmen übertragen lassen.

Motivation

Interaktive Großbildschirme und andere Display-Technologien sind mittlerweile allgegenwärtig und werden ständig weiterentwickelt ¹. Geeignete Nutzungskonzepte mit informationellem Mehrwert für die unternehmensinterne Zusammenarbeit fehlen jedoch, obwohl sich die bereits erfolgreich angewendeten Methoden im Bereich Pervasive Advertising z.T. durchaus auf den Unternehmenskontext übertragen werden könnten. Um dies in einem ersten Schritt zu ermöglichen, werden im vorliegenden Artikel verschiedene Konzepte von Out-of-Home Displays vorgestellt und klassifiziert.

Begriffsdefinitionen

Um für die spätere Beschreibung verschiedener Anwendungen eine ausreichende Begriffsbasis zu schaffen, werden im folgenden Kapitel zunächst die Begriffe „Out-of-Home-Displays“ sowie die damit verbundenen Wissenschaftsbereiche  „Ubiquitous Computing“ und „Pervasive Advertising“ kurz vorgestellt.

Out-of-Home Displays

Der Begriff “Out-of-Home-Displays”, resp. “Out-of-Home-Media” stellt eine Erweiterung und Weiterentwicklung des vor allem im angelsächsischen Raums verbreiteten Begriffs der “Outdoor Media” dar.(Stalder, Ursula) ²

Out-of-Home-Displays bezeichnen damit alle digitalen Kommunikationsträger, die außerhalb des eigenen Hauses verwendet werden. Sie beruhen auf gemeinsamen technischen Grundlagen und haben gemeinsame medienspezifische Eigenschaften, z.B. Technologie, Informationsgehalt oder Eingabemöglichkeiten, die unterschiedlich genutzt werden. Es existieren unterschiedliche Anwendungsformen für Out-of-Home Displays. Die meisten Anwendungsgebiete sind vergleichbar mit konventionellen Werbe-, Unterhaltungs- und Informationssystemen, wobei sich vier Bereiche herauskristallisieren:

• Out-of Home-Medien: Infoterminals, Kiosksysteme, etc.
• Bild-Medien: TV, Videoclips, Film, Podcasts, etc.
• Display-Medien: TV, PC, Web, MP3-Player, etc.
• Netzwerk-Medien: Websites, Management-Informationssystemen, etc.

Diese unterschiedlichen Anwendungsgebiete lassen eine Kategorisierung nach verschiedenen konkreten Ausprägungen zu. Ihr Kontext als eigenständige Mediengruppe im medialen, sozialen und räumlichen Umfeld sind dabei die maßgebende Eigenschaft ³.

Ubiquitous Computing

Der Begriff des „Ubiquitous Computing“ ⁴ beschreibt die allgegenwärtige Informationsverarbeitung, die Datenzugriffsmöglichkeit und die Vernetzung des Alltages mit „intelligenten“ Maschinen und Geräten. Interaktivität, Automatisierung und Ubiquität sind die Eigenschaften, die für dieses Prinzip stehen und im Rahmen von E-Commerce-Szenarien und webbasierten Geschäftsprozessen nutzbar gemacht werden können ⁵. Das scheinbare Verschwinden der Technologie ist die mitunter wichtigste Eigenschaft:

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.(Weiser, Mark) ⁶

Für dessen Verwirklichung werden drei Teilen benötigt: günstige und leistungsstarke Computer, Software für ubiquitäre Anwendungen und ein Netzwerk, das alles miteinander verbindet. Anhand dieser aufgezählten Punkte fügt sich Pervasive Computing „unsichtbar“ in die Umwelt ein und verändert das Leben der Gesellschaft ⁷. Neue Technologien wie Sensoren, Netzwerke, Verarbeitungs- und Speichereinheiten ermöglichen die drei Kernprinzipen: Automation, Interactivity und Ubiquity ⁸.

Pervasive Advertising

Pervasive Advertising ist eine Zusammenführung der Fachrichtungen Pervasive Computing und Advertising. Advertising beschäftigt sich mit jeglicher Entwicklung von Werbung, um bei potentiellen Kunden Informationen zu vermitteln, Emotionen zu wecken und Reaktionen auszulösen. Neue Erkenntnisse aus der Marktforschung ⁹ argumentieren für das Einbinden von neuen effektiveren und insbesondere ubiquitären Technologien in die Werbung. Aus der Verbindung der beiden Fachrichtungen Advertising und Pervasive (Ubiquitous) Computing geht Pervasive Advertising hervor. Daraus ergibt sich die Möglichkeit, die bestehende Art der Werbung zu verändern. Besonders Personalisierung und das Kreieren eines positiven Verkaufserlebnisses stehen im Vordergrund.

„Pervasive advertising is the use of pervasive computing technologies for advertising purposes.”(Müller et al.) ⁸

Durch die Verbindung mit Ubiquitous Computing bietet Pervasive Advertising im Vergleich zu traditionellen Werbemitteln, wie Plakatwänden oder Litfaßsäulen, fortgeschrittene Darstellungsmöglichkeiten. Pervasive Advertising beschäftigt sich u.a. mit:

• Symmetric Communication: Das Abgeben der Bestimmungsrechte der Werbemittelbetreiber in die Hände der Nutzer; der Kunde erhält bei der Auswahl der Werbung ein Eintscheidungsrecht. ¹⁰
• The Long Tail: Auch Kleinanbietern ist es möglich, durch geringen Einsatz eine effektive und individualisierte Werbekampagne zu starten. ¹¹
• Experiences: Neugier und das Interesse von Personen an neuen, unbekannten Systemen; Die visuellen Eindrücke, das Gefühlte und das daraus Reflektierte sind die drei Ebenen, die Pervasive Advertising anspricht. ¹²
• Personalization and Context Adaptivity: Speichern von Vorlieben und Verhalten von Zielgruppen oder -personen, um den Kontext, in dem eine Werbung steht, besser zu erfassen und für die Darstellung der Werbung berücksichtigen zu können. ⁸
• Audience Measurement: Messung von Reaktionen der Passanten oder Nutzer, um den Erfolg oder Misserfolg einer Werbekampagne in Zahlen und Daten noch exakter beschreiben zu können. ¹³
• Automated Persuasion: Überzeugungskraft von Pervasive Displays, die auf die allgegenwärtige, teilweise unterbewusste Wahrnehmung setzt, um das Verhalten von Passanten zu beeinflussen und Kunden anzulocken. ¹⁴.

Beispiele für Out-of-Home Displays

In der folgenden Kategorisierung werden die verschiedene Beispiele für Out-of-Home Displays entsprechend ihrer Nutzung näher beschrieben und kurz voneinander abgegrenzt.

Produktmedien

Produktmedien zeichnen sich durch Bildschirme mit Information, Werbung und Unterhaltungsangeboten an belebten Plätzen aus.

Carrefour Live, Schweiz

Die Carrefour Market-Kette mit über 1000 Filialen nutzt ein neues Netzwerk von Bildschirmen, das neben Produktnachrichten auch lokale Werbung und allgemeine Unterhaltung bietet ¹⁵.

Carrefour Live, Schweiz ¹⁶

Carrefour Live, Schweiz ¹⁶

BBC Launch Kampagne, New York

Während der BBC Launch Kampagne wurden dramatische Fotografien aus Nachrichtensendungen dargestellt, die das Interesse der amerikanischen Bevölkerung an internationalen Nachrichten stärken sollten. Die Rezipienten konnten mit ihrem Handy über wichtige Fragen abstimmen und haben damit unbewusst ein Stimmungsbild der Bevölkerung zu verschiedenen Themen erzeugt ¹⁷.

BBC Launch Kampagne, New York ¹⁸

BBC Launch Kampagne, New York ¹⁸

Architekturmedien

Architekturmedien werden als Markenrepräsentationen in verschiedenen Größenkategorien eingesetzt. Siesind zum einen ein mediales System zur Markeninszenierung (eingebettet in die Architektur), das im Außenbereich an Gebäudefronten oder kompletten Gebäude angebracht ist und zum anderen eine zukunftsträchtige architektonische Inszenierung einer Marke mit Hilfe moderner Technik und Design, um deren Ansehen zu steigern.

Uniqa Tower, Wien

Die Versicherungsgesellschaft Uniqa repräsentiert über die Fassade des Towers hinweg die Unternehmensphilosophie durch die abstrakten und gegenständlichen Motive ¹⁹. Für die visuelle Gestaltung wurde die gesamte Gebäudeoberfläche von mehr als 7000m², bestehend aus einer zweischaligen Glasfassade, genutzt ²⁰.

Uniqa Tower, Wien ²¹

Uniqa Tower, Wien ²¹

Swarovski Kristallwelten, Wattens

Die Firma Swarovski hat in Wattens, Österreich, eine Fantasiewelt geschaffen, die sich über 8500m² erstreckt und das Motto „The Art of Crystal Fiction“ trägt ²².

Swarovski Kristallwelten, Wattens ²³

Swarovski Kristallwelten, Wattens ²³

Forschungsmedien

Forschungsmedien sind interaktive (beispielsweise gestengesteuerte) Displays, die heute meist noch nicht in öffentlichen Anwendungen genutzt werden, sondern sich in der Entwicklung befinden. Es handelt sich meist um Prototypen, die zur Erforschung und Verbesserung von Gestensteuerung, Fingererkennung, 3D-Koordinaten-Verfolgung oder Multi-User-Nutzbarkeit dienen ²⁴. Potential ist im Spiele-, Unternehmens-, E-Learning- und Simulationssektor vorhanden ²⁵. Die Steuerung erfolgt über Bewegung der Hände und Finger, welche über verschiedene Kamerasysteme eingefangen digitalisiert und umgesetzt werden.

Omnitouch

Das System besteht aus einer Kamera und einem Pico-Projektor, die zusammen überall einen Touchscreen erzeugen können ²⁶.

Omnitouch ²⁷

Omnitouch ²⁷

iPoint Presenter

Mit dem iPoint Presenter, einer Entwicklung des Fraunhofer Heinrich-Hertz-Instituts, sollt die Mensch-Computer Interaktion, wie sie aus dem Film „Minority Report“ bekannt ist, verwirklicht werden ²⁸. Die Technologie ermöglicht es dem Nutzer, den Computer mittels einfacher Gesten auch ohne direkte Berührung zu bedienen ²⁹.

iPoint Presenter ³⁰

iPoint Presenter ³¹

Kulturell-Informelle Medien

Als viertes Einsatzgebiet existieren kulturell-informelle Medien, die sich durch interaktive Informations- und Orientierungssysteme, sowie digitale künstlerische Gestaltungsmöglichkeiten im öffentlichen Raum abgrenzen lassen.

Spots Facade, Berlin

Die Spots Medienfassade in Berlin besteht aus 1800 Leuchtstoffröhren, die in einer Matrix angeordnet und individuell steuerbar sind. Das Gebäude am Potsdamer Platz ist elf Stockwerke hoch und wurde durch die Glasvorhangfassade zu einem riesigen, 1350m² großen Display ³².

Spots Facade, Berlin ³³

Spots Facade, Berlin ³³

ibex Touchboard, Luzern

Seit dem 01. Januar 2010 ist in der Lobby des Hotels Continental in Luzern das Ibex Touchboard aufgestellt. Das Informations-Tool bietet den hauseigenen Gästen Informationen über das Wetter, aktuelle Nachrichten, lokale Veranstaltungen, Webcam-Übertragungen, z.B. vom Gipfel des nächsten Berges, Kino- und Restauranttipps und vieles mehr ³⁴.

ibex Touchboard, Luzern ³⁵

ibex Touchboard, Luzern ³⁵

Klassifizierung von Out-of-Home Displays

Die verschiedenen Out-of-Home Displays können nach den folgenden Vergleichskriterien klassifiziert werden. Diese Kriterien werden im Anschluss anhand eines Beispiels in einer Klassifizierungstabelle dargestellt.

Vergleichkriterien

• Anzeigetechnologie: Dieses Kriterium gibt die genutzte Displaytechnologie an, basierend auf den Herstellerangaben oder weiterführender Literatur.
• Größe: Als Größe wird bei Bildschirmen die Diagonale in Zoll oder die Maße in Quadratmeter angegeben.
• Betrachtungs- /Benutzungsabstand: Je nach Funktion des Displays gibt es entweder nur einen Betrachtungs- oder aber zusätzlich einen Benutzungsabstand. Diese Abstände sind in vier Zonen eingeteilt: Eine persönliche Interaktions-, eine subtile Interaktions-, eine implizite Interaktions- und eine Außenzone ³⁶.
• Multiuserfähigkeit: Multiuserfähigkeit beschreibt die Eigenschaft eines Displays, mit mehreren Benutzern gleichzeitig zu interagieren ³⁷.
• Nutzung: Die vorgestellten Modelle können entweder interaktiv sein oder zur reinen Darstellung verwendet werden.
• Verwendungszweck: Die Verwendungszwecke beinhalten z.B. Werbung, Informationsversorgung, Aufmerksamkeitserregung oder Markenrepräsentation und sind eng mit der Zuordnung in die jeweilige Kategorie verbunden.
• Informationsgehalt: Dieses Kriterium gibt das Verhältnis von reiner Werbung und Informationen an, z.B. Aktualität von Nachrichten.
• Eingabe: Die Eingabe an Displays kann über fünf Kategorien erfolgen: optisch, haptisch, akustisch, über Peripheriegeräte und Umwelteinflüsse.
• Ausgabe: Im Vergleich zur Eingabe existieren bei der Ausgabe des Displays an Rezipienten vier Kategorien: optisch, haptisch, akustisch und Peripheriegeräte.
• Umgebung: Out-of-Home Displays finden sich quasi überall im öffentlichen Raum ¹. Dieses Kriterium liefert daher eine Einschränkung der genaueren Umgebung, in der das System installiert wurde.
• Kategorie: Die Out-of-Home Displays werden in die im vorherigen Abschnitt vorgestellten Kategorien zugeordnet.

Beispiel: Hauptbahnhof Zürich

Das e-advertising Unternehmen hat im 2. Untergeschoss des Bahnhofs den ersten interaktiven Ad Screen der Schweiz eingerichtet. Auf dem Display wird abwechselnd, im 30 min Takt, Werbung für Coca-Cola und den VW Golf GTI angezeigt. Durch eine neue Softwaretechnik, die von der Vanija GmbH bereitgestellt wurde, soll die Werbung realistischer werden ³⁸.

Hauptbahnhof Zürich ³⁹

Mehrwerte für Unternehmen

Aus den betrachteten Out-of-Home Displays können verschiedene potenzielle Mehrwerte beim Einsatz von Großbildschirmen zur Verbesserung der Informationsversorgung in Unternehmen abgeleitet werden:

• User Attraction und die Nutzung von Mobile Devices wie im Beispiel der BBC Launch Kampagne: Dadurch wird die Attraktivität gesteigert und zur Interaktion mit einem eigenen Gerät, z.B. einem Smartphone angeregt.
• Gestensteuerung als moderne Interaktionsmöglichkeit wie im Beispiel des iPoint Presenter: Durch diese moderne Form der Interaktion kann die Steuerung intuitiver gestaltet und für ein größeres Zielpublikum nutzbar gemacht werden.
• Mehrbenutzerfähigkeit, bzw. die Mehrbetrachterfähigkeit, wodurch mehrere Personen gleichzeitig an einem Display arbeiten können: Das kollaborative Arbeiten kann effektiver und einfacher durchgeführt werden.
• Die Informationsdarstellung auf einem Display: Aus dem Beispiel des iBex Touchboard können geeignete Visualisierungsarten abgeleitet werden, um die benötigten Informationen auf sinnvolle Weise darzustellen. Dadurch kann ein Informationsüberfluss verhindert werden.

Zusammenfassung

Out-of-Home Displays sind mittlerweile allgegenwärtig und werden ständig weiterentwickelt ¹. Geeignete Nutzungskonzepte mit informationellem Mehrwert für Unternehmen fehlen jedoch. Neue Visualisierungs- und Interaktionsmöglichkeiten, z.B. Multi-Touch, Gestensteuerung oder synchron-mehrbenutzerfähige Darstellung finden aktuell fast ausschließlich Anwendung in der Werbe- und Unterhaltungsbranche.

Gestensteuerungsmöglichkeiten werden beispielsweise bereits durch verschiedene Systeme erfolgreich erforscht ^{24 25 40 41}.
Schwerpunktmäßiger Nutzungskontext sind allerdings Unterhaltungssysteme ⁴² , obwohl Gestensteuerung als zukunftsträchtiges Interaktionsverfahren gilt. Out-of-Home-Medien bieten darüber hinaus viele weitere Verwendungsmöglichkeiten ⁴³. Durch Übertragung der Konzepte können Unternehmen die vorhandenen Mehrwerte für sich nutzen, um die unternehmensweite Informationsversorgung  zu verbessern.

Diesbezügliche Ansätze finden sich u.a. hier auf der Plattform im Bereich CommunityMirrors – Interaktiven Großbildschirmen zur Verbesserung der peripheren Informationsversorgung im Unternehmenskontext.

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.

Fussgängernavigation Startscreen ¹

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.

GUI - Hintergrund ¹

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 ². 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.

Umsetzung der Mock- Ups ¹

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.

Aufbau der Button-Ebenen ³

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.

Verwendete Piktogramme ⁴

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.

Button Icons ¹

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.

Dropdown Elemente ¹

Institution auswählen (1) ¹

Institution auswählen (2) ¹

Institution auswählen (3) ¹

Institution auswählen (4) ¹

Navigationsfuhrung Cityterminal ¹

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

Zoom Leiste ¹

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.

Elemente der GUI des Navigationssystems ¹

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:

Aufbau JavaFX Frame ⁵