JavaFX Layout and Controls

JavaFX 8-Systemvoraussetzungen

• Grundsätzlich verwendbar mit Java7 ab Version 4.x (?)

• Standard in Java8

mit Java8 arbeiten

System-VM auf Java8 umstellen (sonst gibt es Probleme mit eclipse!)

Dann in eclipse Projekt anlegen mit New > Other > JavaFX Project

Der Scene Graph

• Basisstruktur der grafischen Oberflächen mit FX

Quelle Rheinjug / Saxonia Systems / http://youtu.be/hYW4TRoFgXA

Der Scene Graph • Stage enthält zu jeder Zeit eine Scene

– kann aber ausgetauscht werden Navigation

• Scene enthält Nodes

• Node kann sein – Pane

– Group

– WebView

– UI-Element

– Shape (2D, 3D)

– View (Image, Media)

– Canvas

– ....

Parent (enthält Nodes)

Panes mit Layouts

Panes • sind "Setzkästen" für Elemente

• haben ein "Layout", d.h. eine typische Anordnung

• erhalten die Anordnung robust bei Größenveränderungen

• können geschachtelt werden

• sind Parents – haben ein List-Attribut "children", deshalb Hinzufügen über myPane.getChildren().add(...) oder ...addAll(...)

• weitere wichtige Panes: GridPane, AnchorPane, SplitPane

VBox

VBox + HBox, ...

BorderPane

• Standard-Layout für Webseiten: – Kopf- ud Fußzeile

– Rechter und linker Rand

– Inhaltsbereich in der Mitte

• Was nicht besetzt ist, nimmt keinen Raum ein: bottom

top

left center right

BorderPane

Layout-Spicker

Quelle: http://www.dummies.com/how-to/content/javafx-for-dummies-cheat-sheet.html

VBox, HBox

Layout-Aufgabe

Zum Nachlesen

http://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm #JFXLY102

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

JavaFX Controls UI-Elemente, früher auch "Widgets" genannt

Quelle: H. Vogelsang, www.iwi.hs-karlsruhe.de/~voho0001/I2/Vorlesung/I22-GUIsMitJavaFX.pdf

Die komplette Übersicht

http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm#JFXUI336

ControlsFX Library

Wem das nicht reicht, der findet im Open Source Projekt ControlsFX jede Menge Material:

Einfache Interaktion

Interaktion • Jedem Control kann Interaktivität hinzugefügt werden • Die GUI erkennt verschiedenste Interaktions-Ereignisse

– Mausklick – Mausbewegung, Dragbewegung – linke, rechte Maustaste – Taste gedrückt, losgelassen – Entertaste – Selektion – ...

• Für jedes Ereignis wird ein von der GUI ein Event-Objekt erzeugt, das die erforderlichen Infos enthält (z.B. "worauf geklickt?")

• Den Controls können durch "SetOn..."-Methoden Event-Handler hinzugefügt werden.

• Wir beginnen mit "ActionEvents", wie z.B. Knopfdruck und Enter • Die anderen Events kommen später...

Aktion des Login-Knopfes

EventHandler des Login-Knopfes

• LoginHandler ist innere Klasse (in Main05)

• Zweck: Controls (btn und userTextField) sollen bekannt sein

• Beide dürfen aber nicht lokal in start() sein, sondern müssen Attribute werden:

Anonyme innere Klasse

• Viel unnötiger Code: Der Klassenname wird nur 1x benötigt!

• Deshalb üblicherweise anonyme innere Klasse: Deklaration und Instanziierung in einem Schritt

Brrrr - hässlich, aber üblich!

Die elegante Lambda-Lösung • Dies ist ein Überfall Vorgriff - Theorie folgt später

• Ein Lambda-Ausdruck ist eine namenlose Methode (also etwas Anonymes), die (als Objekt) weitergegeben werden kann

• (Heißt in Skriptsprachen Closure)

• Syntax in Java 8

• Block mit einer Parameterliste einem Pfeil und einem Methodenrumpf

(String first, String second) -> {

if (first.length() < second.length()) return -1;

else if (first.length() > second.length()) return 1;

else return 0;

}

public int compare(String first, String second {

Als Methode nicht weitergebbar – müsste noch in

eine Klasse gekapselt werden. Lambda-Ausdrücke haben so eine (unsichtbare)

Kapsel

Lambda statt anonym

Guter Stil

Nicht mehr innere Klasse, nur noch private

Methode

Noch Lust auf eine ComboBox?

• in "handle" sichtbar setzen...

Das sollte für die ersten Gehversuche reichen

Was fehlt? Weitere Events

Navigation und Message Panes Malen und Media