Vorlesung Software-Engineering I

Transkript

1 Vorlesung Software-Engineering I im 3. und 4. Semester 08. SW-Architektur Benutzeroberfläche (GUI) DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH Software-Architektur: Sichten Hierarchien: ConceptMap UML Mock-Up Abläufe: BPMN UML Entwurf Daten: ERM UML Zustände: UML (Pattern) DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 2

2 Überblick UseCase/Anwendungsfall: User-Story/Anforderung: Als Mitarbeiter möchte ich verschiedene Geräte (z.b. Notebook, Beamer) ausleihen können, damit wir nicht jedes Gerät selbst kaufen müssen. Wenn ich es nicht mehr benötige gebe ich es wieder zurück. ausleihen zurückgeben Ablauf/Workflow: <<extends>> benutzen User-Interface/ Benutzeroberfläche: DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 3 Daten in der Architektur - Ebenen Benutzer- Anzeigefelder, GUI-Elemente oberfläche Eingabefelder Strukturen, Variablen Objekte, Attribute Programmspeicher Datenablage Datenbank, Datei Tabellen, Felder DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 4

3 GUI-Entwürfe in der Software-Architektur Prototyp (Funktions-oder Design-Prototyp) Mock-Up (Design-Dummy) Wireframe (Drahtmodell Aufrufhierarchie) GUI-n-Typen: Menü Listen n Reports Meldungen/Status Webansichten Software-Ergonomie: Aufgabenangemessenheit Selbsterklärend Robustheit, Fehlertoleranz Individualisierbarkeit, Anpassbarkeit Unterstützung: Frameworks (.NET, Swing, GWT) Pattern/Muster (MVC, Observer) OS-Styles (Windows, Unix, Mac) DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 5 Was kommt vom Kunden? => Skizzen von Benutzeroberflächen mit Interaktionen und Daten! DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 6

4 Beispiel: Ausleihliste - Einzelmasken ausleihen zurückgeben <<extends>> benutzen Ausleihen benutzen Gegen- stand Rückgabe DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 7 Beispiel: Ausleihliste nhierarchie (Aufrufe) Menü [Anwendung] Ausleihliste Ausleihen (Modal) Zurückgeben (Modal) Suchen Drucken Export Historie DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 8

5 Best Practice: User Experience - Sketching Den Weg des Anwenders durch Die Anwendung entwerfen. Die Benutzbarkeit von Anwendungen mit Paper-Prototypen Prototypen testen. DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 9 Quelle: de Best Practice: User Experience - Eye Tracking DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 10

6 Best Practice: Framework Rahmen für eine neue Applikation bereitstellen (Entwurfsmuster ) Bereitstellung von Runtime-Funktionalitäten (Login, DB-Connect, Rechteverwaltung, Errorhandler, Locking, etc.) Wiederverwendung von allgemeinen Funktionen Vererbbare Objekte für Standard-Funktionalitäten - Datenaufbereitung (Laden, Speichern, Locking, Export, Drucken etc.) - Benutzeroberfläche (Menü, Buttons, etc.) Bereitstellung von Funktionen zur Mehrsprachigkeit der Anwendung etc. Vorteile: Sehr schnelles Aufsetzen einer neuen Applikation möglich Zeitersparniss durch Verwendung von fertigen Komponenten Look and Feel beim Anderer immer gleich -> weniger Schulung, schnellere Einführung Nachteile: Höhere Einarbeitung -> Framework muss erlernt werden Mehraufwand durch Framework-Erstellung, -Dokumentation und -Weiterentwicklung DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 11 Best Practice: Modell-View-Controller -Pattern (Modell/Präsentation/Steuerung) Quelle: Wikipedia Oft kombiniert mit Observer-Pattern (Beobachter, Listener) Strategy-Pattern (Vorgehen, Regeln) Modell (model) Das Modell enthält die darzustellenden Daten und gegebenenfalls auch die Geschäftslogik. Präsentation (view) Die Präsentationsschicht ist für die Darstellung der benötigten Daten aus dem Modell und die Entgegennahme von Benutzerinteraktionen zuständig. Sie kennt sowohl ihre Steuerung als auch das Modell, dessen Daten sie präsentiert, ist aber nicht für die Weiterverarbeitung der vom Benutzer übergebenen Daten zuständig. Steuerung (controller) Die Steuerung verwaltet eine oder mehrere Präsentationen, nimmt von ihnen Benutzeraktionen entgegen, wertet diese aus und agiert entsprechend. Zu jeder Präsentation existiert ein Modell. Es ist nicht die Aufgabe der Steuerung, Daten zu manipulieren. Die Steuerung entscheidet aufgrund der Benutzeraktion in der Präsentation, welche Daten im Modell geändert werden müssen. Sie enthält weiterhin Mechanismen, um die Benutzerinteraktionen der Präsentation einzuschränken. DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 12

7 Beispiel: Festo Framework für PowerBuilder (MVC-Pattern) CHOOSE CASE Modus CASE Reload SetReadonly(TRUE) SetBK_Color( Gray ) CASE Edit SetReadonly(FALSE) SetBK_Color( White ) END CHOOSE Open Window Function Anzeige DataWindow Vorteile: Trennung Daten von Ansicht, verschiedene Ansichten möglich. Datensicht auch ohne Ansicht ausführbar (auto. Prozesse) Einfacher Austausch der DB. Einfacher Austausch der GUI (z.b. Mehrsprachigkeit) ReUse, kein doppelter Code CHOOSE CASE Modus User Edit Save Cancel Reload Print Reload Trigger Cancel Save Edit Event Menue Function Daten CASE Reload DB.Retrive(ID) CASE Save Save DB.Commit(ID) CASE Cancel DB.Rollback(ID) DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 13 DB END CHOOSE Beachten: Designvorgaben durch Corporate Design der Firma DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 14

8 Tools (free) zum GUI-Entwurf Balsamiq Online: DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 15 Fragen: DHBW-Stuttgart/Frank M. Hoyer SWE1-08.SW-Architektur - GUI 23. Oktober 2010 geändert: 24. Oktober 2013, FMH 16