medientechnik ss16 Übung 1 - medieninformatik
TRANSCRIPT
![Page 1: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/1.jpg)
Medientechnik Sommersemester 2016
Übung 01 (Einführung in Java FX)
Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz Medientechnik SS 2016 - Übung 01 - 1
![Page 2: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/2.jpg)
Terminübersicht
Medientechnik SS 2016 - Übung 01 - 2 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Nr Zeitraum Thema
1 18.04. - 21.04. Organisatorisches, Bildbearbeitung
2 09.05. - 12.05. JavaFX Einführung (GUIs, Szenengraph)
3 17.05. - 19.05. Design Patterns: MVC, Observer
4 23.05. - 25.05. FXML, Bildfilter
5 30.05. - 02.06. Videobearbeitung
6 06.06. - 09.06. Video Streams mit JavaFX
7 20.06. - 23.06. Audiobearbeitung
8 27.06. - 30.06. Multimedia mit JavaFX
![Page 3: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/3.jpg)
Agenda
• Einführung in JavaFX – Application Klasse
– GUI Elemente
– Layouting
• Breakout Session
• Wrap-Up Quiz
• Vorbesprechung Übungsblatt 1
Medientechnik SS 2016 - Übung 01 - 3 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 4: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/4.jpg)
Der Anfang von Java GUIs: AWT
Medientechnik SS 2016 - Übung 01 - 4 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 5: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/5.jpg)
Kurz darauf: Java Swing
Medientechnik SS 2016 - Übung 01 - 5 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 6: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/6.jpg)
Und jetzt: JavaFX!
Medientechnik SS 2016 - Übung 01 - 6 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 7: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/7.jpg)
JavaFX 8 - Features
• FXML – Markup Sprache, die auf XML basiert
– Einfacheres Layouting von GUIs
• CSS für Styling ist sehr einfach
• Moderne Plattformen werden unterstützt, z.B. Multi-Touch
• 3D Viewer
• Mit dem Scene Builder kann man GUIs zusammenklicken
• Aktuelles Java wird unterstützt
• JavaScript Kompatibilität mit “Nashorn”
Medientechnik SS 2016 - Übung 01 - 7 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 8: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/8.jpg)
Anforderungen
• Java Development Kit 1.8 (JDK) enthält JavaFX http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
• Entwicklungsumgebungen: – Netbeans (im CIP Pool vorinstalliert)
– IntelliJ IDEA Community Edition
– Eclipse
• Dokumentation: – Überblick: http://docs.oracle.com/javase/8/javase-
clienttechnologies.htm
– API: http://docs.oracle.com/javase/8/javafx/api/toc.htm
Medientechnik SS 2016 - Übung 01 - 8 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 9: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/9.jpg)
Die Application Klasse
• public void start(Stage primaryStage) throws Exception
– der Ausgangspunkt für alle JavaFX Programme
– wird automatisch aufgerufen, sobald das Programm bereit ist, die GUI anzuzeigen.
diese Methode wird von uns überschrieben
• public static void launch(String... args)
– darf nur ein einziges Mal aufgerufen werden
– wird meistens direkt in der main() Methode aufgerufen. Falls man eine externe Klasse als GUI starten möchte, geht das so: Application.launch(MyGUI.class,args);
Medientechnik SS 2016 - Übung 01 - 9 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 10: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/10.jpg)
Beispiel
import javafx.application.Application; import javafx.stage.Stage; public class HelloWorld extends Application{ public void start(Stage primaryStage) throws Exception { } public static void main(String[] args){ launch(args); } }
Medientechnik SS 2016 - Übung 01 - 10 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz HelloWorld1.java
![Page 11: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/11.jpg)
Programm ausführen
• Option 1: Kommandozeile – zuerst kompilieren: javac packageName/Klasse.java
– ausführen: java packageName.Klasse
– Unter Windows ist zu beachten: Der Pfad zum JDK muss sich in der Umgebungsvariable “PATH” befinden
• Option 2: “Run” Dialog von der IDE – Konfiguration notwendig (Klasse mit main-Methode definieren)
– auf Dauer komfortabler
Medientechnik SS 2016 - Übung 01 - 11 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 12: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/12.jpg)
IntelliJ IDEA Tutorial
• Eure Tutoren Noyan und Monika haben für euch alles vorbereitet: http://www.medien.ifi.lmu.de/lehre/ss16/mt/uebung/ressourcen/mt_help_01.pdf
Medientechnik SS 2016 - Übung 01 - 12 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 13: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/13.jpg)
Beispiel Konfiguration in IDEA
Medientechnik SS 2016 - Übung 01 - 13 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 14: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/14.jpg)
HelloWorld - Ergebnis?
• Es ist nichts zu sehen!
• Wir brauchen eine “Szene” für die GUI
Medientechnik SS 2016 - Übung 01 - 14 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 15: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/15.jpg)
Bühne und Szene
• GUI Elemente brauchen eine “Szene”
• Ein Programm hat “Bühnen”, die aus Szenen bestehen, z.B. Hauptbildschirm + Einstellungen
• Wichtigste Klasse: javafx.scene.Scene; (Doku) – Beispiel Konstruktor: Scene scene = new Scene(root,width,height);
– root: Container Element, z.B. VBox, FlowPane, GridPane, BorderPane,…
Medientechnik SS 2016 - Übung 01 - 15 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
htt
ps:
//w
ww
.flic
kr.c
om
/ph
oto
s/1
07
85
43
2@
N03
/757
129
040
4 A
uth
or:
Gro
um
e C
C-B
Y-SA
![Page 16: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/16.jpg)
Layout
• Die “Anordnung” der Elemente innerhalb einer Szene wird objektorientiert modelliert
• Es gibt verschiedene Klassen, die als Container für andere Elemente eingesetzt werden können.
Medientechnik SS 2016 - Übung 01 - 16 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Container
Element A Element B
![Page 17: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/17.jpg)
Hello World 2: FlowPane + Scene
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.FlowPane; import javafx.stage.Stage; public class HelloWorld2 extends Application { public void start(Stage primaryStage) throws Exception { int width = 200, height = 200; FlowPane flowPane = new FlowPane(); Scene scene = new Scene(flowPane, width, height); primaryStage.setTitle("Hello World"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args){ launch(args); } }
Medientechnik SS 2016 - Übung 01 - 17 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz HelloWorld2.java
![Page 18: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/18.jpg)
Szenengraph
• Ein Graph besteht aus “Knoten” und “Kanten”.
• Besondere Knoten: – root: Wurzelknoten
– branch: Zweig
– leaf: Blatt = Ende eines Zweigs
• Die Knoten im Szenengraph sind entweder GUI Elemente oder Container, die wieder verschachtelt sind
Medientechnik SS 2016 - Übung 01 - 18 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
root VBox
leaf Label “Hihi”
branch HBox
leaf Button “bar”
leaf Button “foo”
![Page 19: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/19.jpg)
Szenengraph Beispiel
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class SceneGraph extends Application { public void start(Stage primaryStage) throws Exception { int width = 200, height = 100; VBox root = new VBox(); Label leaf1 = new Label("Hihi"); HBox branch = new HBox(); Button leftButton = new Button("foo"); Button rightButton = new Button("bar"); root.getChildren().add(leaf1); root.getChildren().add(branch); branch.getChildren().add(leftButton); branch.getChildren().add(rightButton); Scene scene = new Scene(root, width, height); primaryStage.setTitle("Szenengraph"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args){ launch(args); } }
Medientechnik SS 2016 - Übung 01 - 19 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz SceneGraph.java
![Page 20: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/20.jpg)
Break Out: Eingabefelder
• Am Beispiel “SceneGraph.java” weiterarbeiten
• Material hier downloaden: www.medien.ifi.lmu.de/lehre/ss16/mt/uebung/ressourcen/mt_material01.zip
• Jetzt hinzufügen: – Text Eingabefeld
– Passwort Eingabefeld
• Zeit: 8 Minuten.
Medientechnik SS 2016 - Übung 01 - 20 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 21: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/21.jpg)
Yaca (Yet another Calculator)
• Ziel für heutige Übung: “Taschenrechner GUI” – Elemente kennenlernen & einsetzen
– Anordnung mit Layout Panes
• Nächste Übung: – Events
– MVC
– Observer
Medientechnik SS 2016 - Übung 01 - 21 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 22: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/22.jpg)
Projekt erstellen
• IDE starten (ggf. workspace festlegen)
• Neues Java(FX) Projekt “MT-Uebung” anlegen
• [optional] Modul “uebung01” erstellen.
• 2 neue Klassen erstellen (am besten ohne package) – Yaca.java: erbt von Application
– Main.java: zum Starten des Programms
Medientechnik SS 2016 - Übung 01 - 22 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 23: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/23.jpg)
Startpunkt des Programms: Main.java
import javafx.application.Application; public class Main { public static void main(String[] args){ Application.launch(Yaca.class,args); } }
Medientechnik SS 2016 - Übung 01 - 23 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Main.java
![Page 24: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/24.jpg)
Basis GUI: Yaca.java
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class Yaca extends Application { public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.sizeToScene(); primaryStage.setTitle("Yet another Calculator! (Yaca)"); primaryStage.show(); } }
Medientechnik SS 2016 - Übung 01 - 24 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Yaca.java
![Page 25: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/25.jpg)
Ergebnis …
Medientechnik SS 2016 - Übung 01 - 25 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 26: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/26.jpg)
Buttons
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class Yaca extends Application { public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); Button calculateButton = new Button("Calculate!"); Button resetButton = new Button("Clear"); root.setLeft(calculateButton); root.setBottom(resetButton); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.sizeToScene(); primaryStage.setTitle("Yet another Calculator! (Yaca)"); primaryStage.show(); } }
Medientechnik SS 2016 - Übung 01 - 26 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Yaca.java
![Page 27: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/27.jpg)
Better Layout with FlowPane
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.BorderPane; import javafx.scene.layout.FlowPane; import javafx.stage.Stage; public class Yaca extends Application { public void start(Stage primaryStage) throws Exception { BorderPane root = new BorderPane(); Button calculateButton = new Button("Calculate!"); Button resetButton = new Button("Clear"); FlowPane bottomRow = new FlowPane(); bottomRow.getChildren().addAll( calculateButton, resetButton ); root.setBottom(bottomRow); Scene scene = new Scene(root); primaryStage.setScene(scene); primaryStage.sizeToScene(); primaryStage.setTitle("Yet another Calculator! (Yaca)"); primaryStage.show(); } }
Medientechnik SS 2016 - Übung 01 - 27 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Yaca.java
![Page 28: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/28.jpg)
Top Row & Text Fields
import … public class Yaca extends Application { public void start(Stage primaryStage) throws Exception { […] FlowPane topRow = new FlowPane(); TextField firstNumberField = new TextField(); TextField secondNumberField = new TextField(); TextField resultField = new TextField(); topRow.getChildren().addAll( firstNumberField, secondNumberField, resultField ); bottomRow.getChildren().addAll( calculateButton, resetButton ); root.setTop(topRow); root.setBottom(bottomRow); […] } }
Medientechnik SS 2016 - Übung 01 - 28 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Yaca.java
![Page 29: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/29.jpg)
ComboBox & Label
import … public class Yaca extends Application { public void start(Stage primaryStage) throws Exception { […] Label equalsLabel = new Label("="); ObservableList<String> operators = FXCollections.observableArrayList("+", "-", "*", "/"); ComboBox<String> operatorBox = new ComboBox<String>(operators); topRow.getChildren().addAll( firstNumberField, operatorBox, secondNumberField, equalsLabel, resultField ); […] } }
Medientechnik SS 2016 - Übung 01 - 29 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
Yaca.java
![Page 30: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/30.jpg)
Breakout:
• Die GUI is jetzt fast komplett.
• Aufgaben: – Breite der Textfelder sinnvoll begrenzen, sodass sie in eine Zeile
passen
– Standard-Wert für die Textfelder
– Standard-Operator in der ComboBox programmatisch festlegen
– Ergebnisfeld als “read-only” setzen
– Textfelder dürfen nur Zahlen enthalten
– Abstand (Padding oder Margin) einfügen, damit die Elemente nicht “aneinander kleben”
– Inhalt der einzelnen FlowPane Elemente zentrieren
• Zeit: 20 Minuten, danach gemeinsame Besprechung
Medientechnik SS 2016 - Übung 01 - 30 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 31: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/31.jpg)
Wrap-Up Quiz
1. Welche Methode der Application Klasse muss überschrieben werden? Welche Parameter nimmt sie?
2. Wofür braucht man „Szenen“?
3. Wie heißt die Markup Sprache, mit der JavaFX GUIs definiert werden können?
4. Welche GUI Technologie war die „Mutter aller Java GUIs“?
5. Wie heißt die Klasse mit der man ein Dropdown erzeugen kann?
6. Wodurch unterscheiden sich FlowPane und BorderPane?
Medientechnik SS 2016 - Übung 01 - 31 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 32: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/32.jpg)
WELCHE FRAGEN HABT IHR? Vielen Dank!
Medientechnik SS 2016 - Übung 01 - 32 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz
![Page 33: Medientechnik SS16 Übung 1 - Medieninformatik](https://reader031.vdocuments.mx/reader031/viewer/2022012018/615ca183f109f70eeb447cc1/html5/thumbnails/33.jpg)
Material & Links
• MMP Folien: Emanuel von Zezschwitz, http://www.medien.ifi.lmu.de/lehre/ss15/mmp/
• Tutorials: – https://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm
– http://code.makery.ch/library/javafx-8-tutorial/
– http://www.javafxtutorials.com/
• IDE specific – Scene Builder in IntelliJ IDEA:
https://docs.oracle.com/javafx/scenebuilder/1/use_java_ides/sb-with-intellij.htm
Medientechnik SS 2016 - Übung 01 - 33 Ludwig-Maximilians-Universität München - LFE Medieninformatik - Tobias Seitz