Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame...

48
Einführung in die Programmierung für Nebenfach Medieninformatik Beat Rossmy, Michael Kirsch

Transcript of Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame...

Page 1: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Einführung in die Programmierung für

Nebenfach Medieninformatik

Beat Rossmy, Michael Kirsch

Page 2: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Direct Feedback - Socrative

2

• Eure Mitarbeit ist uns wichtig!

• Installiert euch dazu die kostenlose App „Socrative Student“ auf Eurem Smartphone oder nutzt das Webinterface unterhttp://b.socrative.com/login/student/

• Anonymer Login über den Raumnamen:

MSMJ0KRQ

Page 3: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Objekte und MethodenVerwendung von IntelliJ, Klassen, Konzepte,

Objekte, Verhalten von Objekten bei Java Swing, ActionListener

Beat Rossmy, Michael Kirsch

Page 4: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

4

Verspätete Kurzvorstellung

:-)

Page 5: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Wer bin ich?

5

• Michael Kirsch (30 Jahre)

• Berufsausbildung zum Fachinformatiker (Anwendungsentwicklung)

• B.Sc. Hochschule Hof (Technische Informatik)

• Auslandsaufenthalt am International Institute of Information Technology Bangalore / Indien (M.Eng.)

• M.Sc. LMU München (Informatik)

• Softwarearchitekt / Softwareentwickler bei

Page 6: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Jambit - Where Innovation Works

6

Page 7: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Jambit - Where Innovation Works

7

Page 8: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Jambit - Where Innovation Works

8

Page 9: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Jambit - Where Innovation Works

9

Page 10: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Jambit - Where Innovation Works

10

Page 11: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

11

Where to find the code?

Page 12: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Github - source code repository

12

• Github www.github.com

• Versionsverwaltung für Softwareprojekte

• Weitere Informationen hier: https://t3n.de/news/eigentlich-github-472886/

• Alle Beispiele aus der Vorlesung gibt es hier: https://github.com/waspmuc/eipnf1718

Page 13: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

13

Quiztime :)

Page 14: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

14

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

Page 15: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

15

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

Page 16: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

16

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

A: Das Ergebnis lautet: 7 Das Ergebnis lautet: 7

B: Das Ergebnis lautet: 7 Das Ergebnis lautet: 7

C: Das Ergebnis lautet: 7 Das Ergebnis lautet: 14

D: Das Ergebnis lautet: 14 Das Ergebnis lautet: 7

Page 17: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

17

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

A: Das Ergebnis lautet: 7 Das Ergebnis lautet: 7

B: Das Ergebnis lautet: 7 Das Ergebnis lautet: 7

C: Das Ergebnis lautet: 7 Das Ergebnis lautet: 14

D: Das Ergebnis lautet: 14 Das Ergebnis lautet: 7

Page 18: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

18

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

Page 19: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

19

Quiztime - Raumnummer

MSMJ0KRQ

Page 20: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

20

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

A: 0

B: Das Programm funktioniert so nicht!

C: i + a

D: 100004

Page 21: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

21

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Welche Ausgabe erzeugt das folgende Programm?

A: 0

B: Das Programm funktioniert so nicht!

C: i + a

D: 100004

Page 22: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

22

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Was wird benötigt, um Java zu programmieren UND das Programm auszuführen?

A: Gute Drogen und viel Hoffnung

B: Die JRE (Java Runtime Environment) reicht aus

C: Das neue Macbook mit Touch Bar, 16 GB Arbeitsspeicher für 3199,00€

D: JDK (Java Development Kit) und JRE (Java Runtime Environment)

Page 23: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

23

Quiztime - Raumnummer

MSMJ0KRQ

Quiz: Was wird benötigt, um Java zu programmieren UND das Programm auszuführen?

A: Gute Drogen und viel Hoffnung

B: Die JRE (Java Runtime Environment) reicht aus

C: Das neue Macbook mit Touch Bar, 16 GB Arbeitsspeicher für 3199,00€

D: JDK (Java Development Kit) und JRE (Java Runtime Environment)

Page 24: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Inhalt

24

I. Einleitung 1. Wie geht es weiter? 2. Java Swing

II. Theorie 1. GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener

III. Anwendung 1. Java Swing in Action

IV. Verknüpfung 1. Beginn Eures Projekts

V. Ausblick 1. Nächste Vorlesung 2. Übung

Page 25: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Übersicht - Wie geht es weiter?

25

Einführung in die Programmierung

Processing Java

Typen und Operatoren

Kontroll-Strukturen

Grundlagen aus Processing

Klassen und Objekte

Gültigkeit und Konventionen

Methoden Arrays

Konstruktoren Eingaben-verarbeitung

Animationen …

Swing

Objekte/Klassen …

Page 26: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

26

Einleitung

Page 27: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Wie geht es weiter?

27

• Einführung in Java Swing (Oberflächenprogrammierung)

• Alle folgenden Vorlesungen bauen auf Eurem Projekt auf und es werden Stück für Stück neue Techniken vermittelt, damit Ihr Euer Spiel entwickeln könnt

• Dieses Mal: Einfache Oberflächen, Grafiken und ActionListener

Page 28: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

• Reihenfolge abhängig von Verwendung der Objekte

• Objekten werden Eigenschaften und Verhalten zugewiesen

• Definition von eigenen Datentypen bzw. Klassen (bspw. Adressbucheintrag oder Klasse Mensch)

Zwei Arten (Paradigmen) von Programmierung

28

• Fest definierte Reihenfolge des Ablaufs

• Sequentielle Abarbeitung

• Verwendung von einfachen Datentypen (bspw. int, double)

Prozedural (Anfänge der Programmierung)

Objektorientiert(seit den 90er Jahren)

Page 29: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Java Swing

29

• Mit Swing werden Oberflächen oder auch GUI (Graphical User Interfaces) entwickelt

• Es besteht u.a. aus vielen verschiedenen Komponenten (JFrame, JPanel, JButton, JTextfield, …)

• Diese Komponenten sind Objekte!

• Viele Beispiele unterhttps://docs.oracle.com/javase/tutorial/uiswing/examples/components/

• Aufbau (siehe Abbildung)

Page 30: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

30

Theorie

Page 31: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

GUI in Java

31

• Am Anfang gab es Terminals

• Anschließend kamen mehr und mehr grafische Anwendungen auf

• Anfangs noch einfach und funktional (Maus- & Tastatursteuerung)

Page 32: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

GUI in Java

32

• Später komplexer und schicker (Einfache und Multitouch-Gesten)

• In Java ist das alles ebenfalls möglich

• Bibliothek in Java zur GUI-Programmierung: AWT bzw. SWING

• Swing ist wie Lego: Es werden Komponenten ineinander „gesteckt“

• AWT wurde später durch SWING abgelöst, aber manche Komponenten von AWT sind in SWING verfügbar

Page 33: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Aufbau von Swing

33

Vererbungshierarchie in Java (alles von Component abgeleitet)

Page 34: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

JFrame

34

Einfacher JFrame

Page 35: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

JFrame & JPanel

35

Ein JFrame enthält mehrere JPanels

Page 36: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

JFrame & JPanel

36

ActionListener reagieren auf Actions (bspw. Tastendrücke)

Page 37: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

37

Anwendung

Page 38: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

JFrame

38

• Einfacher JFrame mit der Größe 600x800 Pixel

Page 39: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

JPanel in JFrame

39

• JPanel in einem JFrame

Page 40: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

KeyListener

40

• KeyListener ermöglichen die Abfrage von Tastatureingaben

• Verwendung von KeyListener in zwei Varianten

• Implementierung des Interfaces KeyListener

• Implementierung in einer anonymen inneren Klasse

• Damit ein Fenster Key-Events abfragen kann, muss es im Fokus stehen

spielfeld.setFocusable(true); //Aktivierung der „Fokusierbarkeit“

• KeyListener können die folgenden drei Events abfragen public void keyTyped(KeyEvent e)public void keyPressed(KeyEvent e)public void keyReleased(KeyEvent e)

Page 41: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

KeyListener

41

Page 42: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

42

Verknüpfung

Page 43: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Pong in Java (JPong)

43

Page 44: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Ausblick

44

Page 45: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

45

• In den Übungen werden die Inhalte der heutigen Vorlesung vertieft

• Selbst Spielfeld erstellen

• Ball erstellen und bewegen

• Ball auf Spielfeld halten (Grenzen)

• Nach der letzten Übung, wird eine Musterlösung bereitgestellt

• Nach der Vorlesung wird euch ein “Code-Grundgerüst” bereitgestellt

• Im neuen Jahr werden wir wir Animationen einführen

Ausblick

Page 46: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Fragen?

46

Page 47: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

47

Page 48: Einführung in die Programmierung für Nebenfach ... · GUI in Java 2. Aufbau von Swing 3. JFrame 4. JPanel 5. ActionListener III. Anwendung 1. Java Swing in Action IV. Verknüpfung

Vielen Dank für Eure Zeit

48