2. JavaFX. Komponentenbasierte Software- Entwicklung. Prof. Dr. Stephan Kleuker

Transkript

1 2. JavaFX Beispiel für Komponenten-Architektur Graphische Oberflächen mit Schachtel-in-Schachtel-Prinzip Konfiguration über get/set Konfiguration über FXML Event-Verarbeitung Data-Binding und Properties als Kommunikationsmechanismus 99

2 JavaFX - kurze Historie Zunächst SWT (Abstract Window Toolkit), dann ab Java 1.2 Swing (nur in Java, gleiches Look-and-Feel) 2008: JavaFX 1.x in eigener Sprache JavaFX Script; ursprüngliche Idee Flash abzulösen (klappt nicht wirklich, HTML 5 unendlich bessere Alternative) 2011: JavaFX 2.0 klarer Fokus auf Client-Oberflächen; Nutzbarkeit über Browser bleibt vorhanden (Lauffähigkeit hängt von Sicherheitseinstellungen ab) JavaFX: Trennung zwischen Spezifikation der Oberfläche und fachlichem Code; einfache Code-Anbindung an Oberfläche; gestaltbar u.a. mit CSS Zusammenspiel mit Adobe Illustrator und Photoshop Wenn notwendig JavaFX in Swing und auch Swing in JavaFX einbettbar (-> Migrationsprojekte) 100

3 Basis-Prinzip von Oberflächen Schachtel in Schachtel (auch hierarchisch genannt; Baum) Jede Schachtel kann mehrere sichtbare GUI-Elemente enthalten Jede Schachtel kann eigene Gestaltungsmöglichkeiten haben, die geerbt, vererbt und überschrieben werden Jedem GUI-Element und jeder umgebenden Schachtel können Steuerungselemente zugeordnet werden Jedes Steuerelemente reagieren auf einzelne Events (Knopf über Maus, linke Maustaste auf Knopf gedrückt, ) Es kann mehrere Reaktionen auf ein Event in gleichem GUI- Element und in verschiedenen oberen Schachteln geben GUI-Elemente sind Komponenten 101

4 Erstes Beispiel (1/5) Knopf dreht sich beim Klicken etwas um eigene Achse Wenn Knopf wieder an Ursprungsposition, wird verbrauchte Zeit angezeigt nur eine Bühne (oft) nur eine Szene (meist) ab hier gestalten Stage Scene AnchorPane Schachtel mit Layout Button Label GUI-Komponenten 102

5 Erstes Beispiel (2/5) import java.time.duration; import java.time.localtime; import javafx.application.application; import javafx.application.platform; import javafx.scene.scene; import javafx.scene.control.button; import javafx.scene.control.label; import javafx.scene.layout.anchorpane; import javafx.stage.stage; muss so erben public class KbSEJavaFXErsteDirekt extends Application { private double value = 0; private boolean aktiv = true; private LocalTime start = LocalTime.now(); Winkel in Grad 103

6 Erstes Beispiel public void start(stage primarystage) { Label lbl = new Label("Zeit"); Button btn = new Button ("Dreh mich"); btn.setonaction(e -> { if (this.aktiv) { this.value += 40; btn.setrotate(value); if (this.value >= 360d) { this.aktiv = false; btn.setdisable(true); ); Duration dur = Duration.between(start, LocalTime.now()); double zeit = dur.getseconds()*1e9 + dur.getnano(); lbl.settext("" + zeit/1e9); diese Methode muss überschrieben werden ActionEvent e; Verarbeitung mit Lambda-Ausdruck konfigurieren mit set Date/Time API seit Java 8 104

7 Erstes Beispiel (4/5) lbl.setlayoutx(11); lbl.setlayouty(79); btn.setlayoutx(27); btn.setlayouty(33); AnchorPane root = new AnchorPane(); root.getchildren().add(btn); root.getchildren().add(lbl); Pane für das Layout; hinzufügen immer zu children immer Wurzel in Scene- Objekt einbetten Scene scene = new Scene(root, 130, 110); primarystage.settitle("dreher"); primarystage.setscene(scene); primarystage.setoncloserequest(e -> Platform.exit()); primarystage.show(); Komponentenbasierte Software- immer eine Scene der einen Stage zuordnen 105

8 Erstes Beispiel (5/5) public static void main(string[] args) { Application.launch(args); Genereller Aufbau erben von Application muss Methode überschreiben: public void start(stage primarystage) kann Methoden überschreiben: public void init() // einmal zu Beginn public void stop() // einmal am Ende Start über Application.launch() [!!!, eigener Classloader] 106

9 Erinnerung: Grundregeln der Ergonomie Erinnern Sie sich an Regeln des guten Designs Fast nie mit absoluten Werten arbeiten Hinweise: Hier stehen nur Konzepte im Vordergrund Im Mittelpunkt: Aufbau, Kombination und Kommunikation von Komponenten Bei weitem werden nicht alle Gestaltungsmöglichkeiten vorgestellt 107

10 Aufbauvarianten für JavaFX-GUIs grundsätzlich immer Oberfläche durch Programmierung vollständig erstellbar und damit gestaltbar Variante: GUI-Aufbau mit FXML beschreiben wieder Baumstruktur viele Attribute zur detaillierten Gestaltung Gestaltung in CSS auslagerbar ( fast CSS3) Verknüpfung zum Code wird über bestimmte Attribute hergestellt FXML mit GUI-Designer-Werkzeug Scene Builder (JavaFX- Programm) erstellbar 108

11 FXML-Beispiel (1/10): Aufgabe generell gleiche Basisaufgabe mit drehendem Knopf verbrauchte Zeit soll mitlaufen (-> eigener Thread) Klick auf Label (?!?) links-unten soll Programm neu starten 109

12 FXML-Beispiel (2/10): GUI.fxml (1/2) generell sinnvoll durch Scene Builder generieren lassen Anfang mit PI (Processing Instructions) <?xml version="1.0" encoding="utf-8"?> <?import javafx.geometry.*?> <?import javafx.scene.effect.*?> <?import java.lang.*?> <?import java.net.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> 110

13 FXML-Beispiel (3/10): GUI.fxml (2/2) <AnchorPane id="anchorpane" prefheight="137.0" prefwidth="195.0" styleclass="mainfxmlclass" xmlns=" xmlns:fx=" fx:controller="kbsejavafxmitfxml.guicontroller"> <stylesheets> <URL /> </stylesheets> <children> <Button fx:id="btn" layoutx="27.0" layouty="33.0" mnemonicparsing="false" onaction="#klicken" text="dreh mich" /> <Label fx:id="lbl" layoutx="14.0" layouty="95.0" onmousepressed="#reset" text="zeit"/> </children> </AnchorPane> 111

14 FXML-Beispiel (4/10): GUIController (1/3) package kbsejavafxmitfxml; import java.net.url; import java.util.resourcebundle; import javafx.event.actionevent; import javafx.fxml.fxml; import javafx.fxml.initializable; import javafx.scene.control.button; import javafx.scene.control.label; muss realisieren public class GUIController implements Initializable private Button private Label lbl; // fx:id="btn" // fx:id="lbl" fx:id und Variablennamen müssen übereinstimmen 112

15 FXML-Beispiel (5/10): GUIController (2/3) private Uhr uhr; private double value = 0; private boolean aktiv = true; public void klicken(actionevent event) { if (this.aktiv) { this.value += 40; this.btn.setrotate(value); if(this.value >= 360d){ this.aktiv = false; this.btn.setdisable(true); this.uhr.stoppeuhr(); 113

16 FXML-Beispiel (6/10): GUIController (3/3) public void reset(){ // Eventparameter darf fehlen if(! this.aktiv){ this.value = 0; this.btn.setrotate(value); this.aktiv = true; this.btn.setdisable(false); this.uhr.starteuhr(); einzige public void initialize(url url, ResourceBundle rb) { System.out.println("url: "+url+"\nrb: "+rb); this.uhr = new Uhr(this.lbl); new Thread(uhr).start(); wäre reset private, dann muss Methode annotiert sein 114

17 FXML-Beispiel (7/10): Application public class KbSEJavaFXMitFXML extends Application public void start(stage stage) throws Exception { setuseragentstylesheet(stylesheet_caspian); Parent root = FXMLLoader.load(getClass().getResource("GUI.fxml")); Scene scene = new Scene(root); stage.setscene(scene); stage.setoncloserequest(e -> System.exit(0)); stage.show(); public static void main(string[] args) { launch(args); 115

18 FXML-Beispiel (8/10): basis.css.mainfxmlclass { -fx-background-color: aquamarine; -fx-font-size: 24.label{ -fx-text-fill:blue 116

19 FXML-Beispiel (9/10): Uhr (1/2) public class Uhr implements Runnable { private long zeit; private boolean uhrlaeuft = false; private Label uhranzeige; public Uhr(Label uhranzeige) { this.uhranzeige = uhranzeige; this.starteuhr(); public void starteuhr() { this.zeit = (new Date()).getTime(); uhrlaeuft = true; public int stoppeuhr() { uhrlaeuft = false; return (int) (((new Date()).getTime()) this.zeit); 117

20 FXML-Beispiel (10/10): Uhr public void run() { while (true) { if (this.uhrlaeuft) { long tmp = ((new Date()).getTime()) - this.zeit; Platform.runLater(() -> { uhranzeige.settext((tmp / 1000d) + ""); ); try { Thread.sleep(100); catch (InterruptedException e) { e.printstacktrace(); 118

21 JavaFX-Thread JavaFX läuft als ein eigener Thread alle Ereignisse landen in einer Queue will man Oberfläche aus anderem Thread bearbeiten, muss Änderung in Queue einfügen Platform.runLater(() -> { uhranzeige.settext((this.zeit / 1000d) + ""); ); ohne Platform.runlater(Runnable): Exception in Application init method java.lang.reflect.invocationtargetexception at sun.reflect.nativemethodaccessorimpl.invoke0(native Method) at sun.reflect.nativemethodaccessorimpl.invoke(nativemethodaccessorimpl.java:62) at sun.reflect.delegatingmethodaccessorimpl.invoke(delegatingmethodaccessorimpl.java:43) at java.lang.reflect.method.invoke(method.java:497) 119

22 Scene Builder u. A. Vorschau Detaileinstellungen Komponenten strukturiert nach Themen GUI-Hierarchie zur präzisen Auswahl Arbeitsfläche 120

23 Event-Behandlung Bei einer Aktion wird das Ereignis von der Wurzel des Scene Graphen schrittweise zur benutzten Komponente durchgeleitet (Event Capturing) jede Komponente kann auf Ereignis mit Filter reagieren und ggfls. Weiterleitung verhindern (consume) Zielkomponente erhält Event und kann dies mit einem Handler bearbeiten wird Ereignis nicht konsumiert, wird es schrittweise wieder an darüber liegende Komponenten weitergegeben (Event Bubbling) jede Komponente kann auf Ereignis mit Filter reagieren und ggfls. Weiterleitung verhindern (consume) 121

24 Capturing und Bubbling C wird geklickt Jeder Filter (EventHandler) kann Event verarbeiten, dann keine Weiterleitung A B C Klick Filter A Filter A Filter B Filter B Filter C Filter B 122

25 Analyse Event-Behandlung (1/4) public class EvHdl implements EventHandler{ private boolean consume; private String ausgabe; public EvHdl(boolean consume, String ausgabe) { this.consume = consume; this.ausgabe = public void handle(event event) { System.out.println(this.ausgabe); if(this.consume){ event.consume(); 123

26 Analyse Event-Behandlung public void start(stage stage) { Button btn = new Button("Button"); Label lbl = new Label("Label"); VBox root = new VBox(btn,lbl); Scene scene = new Scene(root, 120, 50); EventType et = MouseEvent.MOUSE_CLICKED; btn.addeventfilter(et, new EvHdl(false,"Fbtn")); btn.addeventhandler(et, new EvHdl(false,"Hbtn")); lbl.addeventfilter(et, new EvHdl(false,"Flbl")); lbl.addeventhandler(et, new EvHdl(false,"Hlbl")); root.addeventfilter(et, new EvHdl(false,"Froot")); root.addeventhandler(et, new EvHdl(false,"Hroot")); scene.addeventfilter(et, new EvHdl(false,"Fscene")); scene.addeventhandler(et, new EvHdl(false,"Hscene")); stage.setscene(scene); stage.setoncloserequest(e -> System.exit(0)); stage.show(); 124

27 Analyse Event-Behandlung (3/4): Klickausgabe Fscene Froot Fbtn Hbtn Button konsumiert Event per default Fscene Froot Flbl Hlbl Hroot Hscene Fscene Froot Hroot Hscene 125

28 Analyse Event-Behandlung (4/4): Klickausgabe root.addeventfilter(et, new EvHdl(true,"Froot")); Fscene Froot Fscene Froot Fscene Froot 126

29 Properties in JavaFX Oftmals soll auf Änderung von Komponenten reagiert werden Ansatz: Exemplarvariable wird als Property Observable, mit Möglichkeit sich bei Variable an- und abzumelden gibt Klassen wie StringProperty, DoubleProperty weitere Vereinfachung mit Bindings Idee: Objekt möchte in seiner Exemplarvariablen immer den Wert einer anderen Exemplarvariablen eines anderen Objekts haben (unidirectional Binding) Erweiterung: zwei Exemplarvariablen sollen immer gleichen Wert haben, können beide geändert werden (bidirectional Binding) es entsteht ein Kommunikationsmechanismus für Komponenten 127

30 Beispielklasse mit Property (1/2) public class Person { private StringProperty name = new SimpleStringProperty(); public String getname(){ return this.name.get(); public void setname(string name){ this.name.set(name); public StringProperty nameproperty(){ return this.name; 128

31 Beispielklasse mit Property (2/2) // nur Beispiel: Objekt beobachtet Aenderungen von sich // selbst (generell untypisch) public Person(){ this.name.addlistener((obs,alt,neu) -> System.out.println("von "+alt+" nach "+neu)); public void dialog(){ String eingabe=""; while (!eingabe.equals("x")){ eingabe = new Scanner(System.in).next(); this.setname(eingabe); 129

32 Binding-Beispiel public void start(stage primarystage) { TextField tf1 = new TextField(); TextField tf2 = new TextField(); TextField tf3 = new TextField(); TextField tf4 = new TextField(); tf1.textproperty().bindbidirectional(tf2.textproperty()); tf3.textproperty().bind(tf2.textproperty()); VBox vbox = new VBox(tf1,tf2,tf3,tf4); Scene scene = new Scene(vbox); primarystage.setscene(scene); primarystage.setoncloserequest(e -> System.exit(0)); primarystage.show(); Person p = new Person(); tf4.textproperty().bind(p.nameproperty()); new Thread(() -> p.dialog()).start(); 130

33 Binding-Beispiel (2/3) Eingaben im ersten Feld werden automatisch im zweiten und dritten Feld sichtbar Eingaben im zweiten Feld werden automatisch im ersten und dritten Feld sichtbar Eingaben im dritten und vierten Feld sind nicht möglich 131

34 Binding-Beispiel (3/3) 132

35 Beispiel: Propertynutzung (1/3) Anforderung: Erst wenn in beiden Textfeldern Eingaben erfolgt sind, soll der Knopf klickbar sein Ansatz: Neue BooleanProperty, die gewünschten Knopfzustand enthält, Knopfeigenschaft meldet sich da an 133

36 Beispiel: Propertynutzung public void start(stage primarystage) { Button btn = new Button("LogIn"); TextField tf1 = new TextField(); TextField tf2 = new TextField(); VBox vbox = new VBox(tf1, tf2); GridPane gp = new GridPane(); gp.addrow(0, vbox, btn); BooleanProperty boolp = new SimpleBooleanProperty(true); boolp.bind(tf1.textproperty().isempty().or(tf2.textproperty().isempty()) ); btn.disableproperty().bind(boolp); Scene scene = new Scene(gp); primarystage.setscene(scene); primarystage.setoncloserequest(e -> Platform.exit()); primarystage.show(); 134

37 Beispiel: Propertynutzung (3/3) Nachteil des vorherigen Ansatzes: Auch Leerzeichen werden als Eingabe angesehen flexiblere, etwas aufwändigere Variante für gelben Kasten BooleanProperty boolp = new SimpleBooleanProperty(true); EventHandler<KeyEvent> handler = e -> boolp.set(tf1.gettext().trim().isempty() tf2.gettext().trim().isempty()); tf1.setonkeyreleased(handler); // Typed, Pressed geht nicht, da tf2.setonkeyreleased(handler); // sonst letztes Zeichen fehlt btn.disableproperty().bind(boolp); 135

38 Beispiel: Listen (1/5) links Auswahlbox (drop-down; nur ein Element wählbar) rechts Auswahlkasten (Liste, mehrere Elemente markierbar) 136

39 Beispiel: Listen (2/5) public class JavaFXListen extends Application { private ChoiceBox<Person> chb; private ListView<Person> lv; //private ComboBox<Person> cob; private ObservableList<Person> auswahl; //neue, //threadsichere Collection private String[] namen ={"Leila", "Oleg", "Ute", "Uwe"; private void neueauswahl(string wer, Person wahl){ System.out.println(wer + ": " + wahl + " ListView:" + this.lv.getselectionmodel().getselecteditems()); 137

40 Beispiel: Listen public void init(){ this.auswahl = FXCollections.observableArrayList(); for(string n:this.namen){ this.auswahl.add(new Person(n)); this.chb = new ChoiceBox<>(); this.chb.setitems(this.auswahl); this.chb.getselectionmodel().selecteditemproperty().addlistener((obj,alt,neu) -> neueauswahl("chb",neu)); this.lv = new ListView<>(); this.lv.setitems(this.auswahl); this.lv.getselectionmodel().setselectionmode(selectionmode.multiple); this.lv.setonmouseclicked(e -> neueauswahl("mouse",null)); 138

41 Beispiel: Listen public void start(stage primarystage) { GridPane root = new GridPane(); root.add(this.chb, 0, 0); root.add(this.lv, 1, 0); root.getcolumnconstraints().add(new ColumnConstraints(80)); root.getcolumnconstraints().add(new ColumnConstraints(100)); GridPane.setHalignment(this.chb, HPos.CENTER); GridPane.setValignment(this.chb, VPos.TOP); Scene scene = new Scene(root,190,130); primarystage.settitle("auswahlen"); primarystage.setscene(scene); primarystage.setoncloserequest(e -> System.exit(0)); primarystage.show(); 139

42 Beispiel: Listen (5/5) Ausgabe danach: chb: Oleg ListView:[] Ausgabe danach: mouse: null ListView:[Leila] Strg-Taste gedrückt gehalten, Ausgabe danach mouse: null ListView:[Leila, Ute] 140

43 kleiner Ausblick JavaFX Java-Code in FXML-Datei möglich JavaScript-Code in FMXL-Datei möglich viele, viele GUI-Elemente nicht-kommerzielle und kommerzielle Erweiterungen einfache Standardtechnologien zur Anbindung an Webserver automatisierbares GUI-Testing 141