Vorlesung Grafische Benutzeroberflächen im SS 2019

Solide Kenntnisse der objektorientierten Programmierung in Java

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 zugrundeliegenden 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.

Darüberhinaus erlangen die Studierenden einen Einblick in die Entwicklung von modernen Weboberflächen und transferieren die zuvor gewonnen theoretischen Erkenntnisse in dieses Umfeld.

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 der 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. der Gestaltung von Dialogen, Data-Binding, Nebenläufigkeit und Anwendungsarchitektur). Neben JavaFX werden weitere moderne Technologie wie beispielweise HTML5/JS betrachtet. Begleitend zur Vorlesung finden Übungen zur Vertiefung der erlernten Konzepte statt.

Ziel der Übung ist es für die folgenden Übungen Arbeitsfähigkeit herzustellen. Nachdem in den letzten Jahren die Heterogenität der Arbeitsgeräte (Studentenlaptops und Rechner im Labor) stark zugenommen hat, soll diese Übung sicherstellen, dass jeder Student Zugriff auf Entwicklungsumgebung und Musterlösungen hat.

Übungsblatt 1

Ziel der Übung ist es ein typisches Eingabeformular in FXML zu erstellen. Wir benutzen dazu das Werkzeug SceneBuilder.

Übungsblatt 2

Ziel der Übung ist es die Oberfläche aus Übung 2 mit Funktionalität zu versehen.

Übungsblatt 3

Ziel der Übung ist es die Oberfläche aus Übung 3 nach dem MVP Muster mit Data Binding weiterzuentwickeln.

Übungsblatt 4

Ziel der Übung ist es, eine Oberfläche bestehend aus Eingabeformular und Diagramm zu erzeugen. Die Oberfläche aus Übung 4 soll dazu als Komponente verwendet und eingebettet werden.

Übungsblatt 5

Ziel der Übung ist es die Oberfläche der vergangenen Übungen um einen Event-Bus zu erweitern. Dieser soll dazu verwendet werden eine Statusanzeige anzubinden (lose Kopplung).

Übungsblatt 6

Ziel der Übung ist es, eine (simuliert) langlaufende Aktion außerhalb des UI-Threads auszuführen. Dem Benutzer soll dabei ein Fortschritt visualisiert werden.

Übungsblatt 7

Ziel der Übung ist es, die bekannte Anwendung in eine Schichtenarchitektur zu überführen. Die Schichten werden dabei als eigene Komponenten umgesetzt. Technisch erfolgt dies als Multi-Projekt-Gradle-Build.

Übungsblatt 8

Wir entwickeln die Webversion unseres Headers aus den vergangenen Übungen.

Übungsblatt 09

Wir verwenden das HTML der letzten Übung um eine kleine laufähige Web-Version des Headers zu erzeugen. Als Framework verwenden wir dazu Angular.

Übungsblatt 10

Ziel der Übungen ist es, eine Angular-Anwendung um Unit- und End-To-End-Tests zu erweitern.

Übungsblatt 11

1. Johan Vos: Pro JavaFX 9
2. Yakov Fain und Anton Moiseev: Angular Development with TypeScript

Weiteführende Themen 3. Jenifer Tidwell: Designing Interfaces 4. Johannes Siedersleben: Moderne Software-Architektur 5. Robert C. Martin: Clean Code