Vorlesung-GUI-2016

Vorlesung Grafische Benutzeroberflächen 2016

Empfohlene Voraussetzungen

Solide Kenntnisse der objektorientierten Programmierung in Java

Lernziele und Inhalt

Modulziele/Angestrebte Lernergebnisse

Die Studierenden erlernen die ergonomische Gestaltung, den Entwurf und die Programmierung grafischer Oberflächen. Sie können eine Oberfläche so gestalten, dass ein Benutzer damit effektiv und effizient arbeiten kann. Sie können Desktop-Technologien wie JavaFX sachgerecht anwenden. Die Studierenden verstehen die zugrunde liegenden Architekturkonzepte und können diese Technologien einordnen und bewerten. Weiter erhalten sie einen tiefen Einblick in die Grundlagen der Software-Architektur von Systemen mit graphischen Oberflächen.

Inhaltsübersicht

Die Veranstaltung hat drei Schwerpunkte: Entwurf und Architektur von Anwendungen mit grafischer Benutzeroberfläche. Überblick über aktuelle Technologien, Werkzeuge und Methoden für den Bau von Anwendungen mit umfangreichen Anforderungen an die Bedienbarkeit und Interaktion. Praktisches Anwenden der erlernten Techniken im Rahmen von Übungen. Der größte Teil der Veranstaltung verwendet JavaFX. Der Schwerpunkt liegt nicht im Erlernen des eher zufälligen JavaFX-APIs, sondern in der Vermittlung der grundsätzlichen Ideen und Entwurfsmuster. Besonderes Gewicht liegt auf Standardfragen der täglichen Praxis (z.B. Bestätigen/Verwerfen, Data-Binding, Internationalisierung, Nebenläufigkeit und Anwendungsarchitektur). Im Rahmen von Studienarbeiten werden weitere moderne Technologie wie beispielweise .NET/WPF, Android oder HTML5 betrachtet.

Begleitend zur Vorlesung finden Übungen zur Vertiefung der erlernten Konzepte statt.

Inhalt

0. Organisatorisches (Sommersemester 2016)

• Ablauf von Vorlesung und Übung
• Themen und Termine
• Hinweise zur verwendeten Software
• Literatur

1. Grundlagen grafischer Oberflächen

• Historischer Überblick
• Typen grafischer Oberflächen (Terminal, Mobil, Web, Rich-Client)
• Standardprobleme beim Entwurf und der Programmierung
• Ergonomie und Angemessenheit
• Programmierte und deklarierte Oberflächen

Übungsblatt 1

2. Gestaltungsregeln und Layout - Überblick JavaFX

• Gestaltungsregeln
• Grafischer Entwurf - Methoden und Werkzeuge (Styleguides, Mockups)
• Dynamisches Layout – Konzepte und Grundlagen
• Einführung in JavaFX
• Komponenten und Container - Exkurs Composite-Muster
• Layout-Management

Übungsblatt 2

Musterlösung 2

3. Eventgesteuerte Programmierung

• Kontrollfluss in grafischen Oberflächen
• Begriffe der Eventverarbeitung
• Eventverarbeitung in hierarchischen Oberflächen (Bubbling und Capturing)
• Technische Umsetzung
• Ereignisse als Objekte
• Zustellung von Ereignissen
• Behandlung von Ereignissen (Handler, Event-Hierarchie)
• Datenhaltung, Benachrichtigung und Binding

Übungsblatt 3

Musterlösung 3

4. Probleme beim Datenhaushalt

• Das Observer-Muster
• Model-View-Controller – das klassische Modell
• Model-View-Presenter
• Technische Umsetzung
• JavaFX Properties
• JavaFX Binding

Übungsblatt 4

Musterlösung 4

5. GUI Komponenten und Wiederverwendung

• Grundprinzipien und Architektur
• Eigenschaften von Komponenten
• MV* im Großen
• Presentation-Model vs. Business-Model
• Technische Umsetzung
• Bau von GUI Komponenten mit JavaFX
• Wiederverwendung und Schachtelung

Übungsblatt 5

Musterlösung 5

6. Parallelverarbeitung in grafischen Oberflächen

• Motivation – Warum ist parallele Verarbeitung notwendig?
• Umgang mit lang laufenden Aktionen (asynchrone Verarbeitung)
• Technische Umsetzung
• Die Worker Schnittstelle in JavaFX
• Die Klassen Task und Service

Übungsblatt 6

Musterlösung 6

7. Test von grafischen Oberflächen - Gastvortrag: Mario-Leander Reimer

• Manuelles Testen und Test-Driven-Development
• Behavior-Driven-Test-Development
• Das Page-Objekt-Muster
• Testautomation bei JavaFX Oberflächen

Übungsblatt 7

8. Zentrale Anwendungssteuerung – Der Eventbus

• Motivation
• Das Publish-Subscriber Muster
• Technische Umsetzung
• Ein minimaler Eventbus
• Subscription als Annotation

Übungsblatt 8

Musterlösung 8

9. Anwendungsarchitektur

• 2-Tier und 3-Tier Architekturen
• Thin-, FAT- und Smart/Rich-Clients
• Schichten-, Säulen und Komponentenarchitekturen
• Technische Umsetzung
• Trennung von Businesslogik und Oberflächenlogik
• Umsetzung einer Kundensuche mit JavaFX

Übungsblatt 9

Musterlösung 9

10. Grafische Oberflächen im Browser

• Typen von Weboberflächen (Web 1.0, 2.0, 3.0)
• Vor- und Nachteile der heute gängigen Architekturen
• Technische Umsetzung
• CRUD Anwendung mit HTML5 und AngularJS

Demo

Code

Beschreibung

11. Migration von Oberflächencode

• Migration vs Neubau
• Von Swing nach JavaFX
• VUI - Das virtuelle User Interface

Übungsblatt 11

12. Pruefungsvorbereitung

Literatur

Besonders empfohlen

1. Tidwell, J.: Designing Interfaces, O’Reilly, (2005)
2. http://docs.oracle.com/javase/8/javase-clienttechnologies.htm: Online Dokumentation und Tutorials zu JavaFX (2015)
3. Gamma, E., et al.: Design Patterns. Addison-Wesley (1995)

Zusätzlich empfohlen

4. Siedersleben, J.: Moderne Software-Architektur, dpunkt (2004)
5. Fowler, M.: Patterns of Enterprise Application Architecture. Addison-Wesley (2002)
6. Fowler, M.: http://martinfowler.com/eaaDev/uiArchs.html (2006)