31
JavaFX Layout and Controls
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
