Kapitel 5: Das Design

Transkript

1 Nach der Analyse kommt... Kapitel 5: Das Design SoPra 2008 Kap. 5: Das Design (1/20)

2 Kapitel 5.1: Überblick Was ist Design? Ergebnis der Analyse: abstrakte Definitionen Objektmodell: Klassen, Assoziationen, Attribute Information im System Beziehungen dazwischen Interaktionsmodell, Operationsmodell: von außen sichtbare Operationen Aufgabe des Designs festlegen, wie die in der Analyse beschriebene Funktionalität realisiert wird Ergebnis des Designs objektorientierte Software-Struktur Sammlung interagierender Objekte noch unabhängig von der Programmiersprache SoPra 2008 Kap. 5.1: Das Design Überblick (2/20)

3 Aufgaben 1. Festlegung der Systemarchitektur 2. GUI-Design ( Schnittstellenmodell) 3. Design der Anwendungslogik 4. Datenbank-Entwurf 5. Zusammenspiel der Systemkomponenten SoPra 2008 Kap. 5.1: Das Design Überblick (3/20)

4 Design in FUSION light Zu erstellende Dokumente Objektinteraktionsgraphen (OIGs) Interaktion der Objekte zur Laufzeit Realisierung der im Operationsmodell spezifizierten Funktionalität Klassenbeschreibungen spezifiziert Schnittstelle einer Klasse, d. h. Attribute und Methoden beschreibt, wie Assoziationen implementiert werden besonders wichtig für neue (im Design eingeführte) Klassen SoPra 2008 Kap. 5.1: Das Design Überblick (4/20)

5 Kapitel 5.2: Systemarchitektur Klassische 3-Schichtenarchitektur: 1. User Interface (GUI, Präsentationsschicht ) 2. System (Business Logic, Anwendungslogik) 3. Datenschicht (Datenbank, Persistenzschicht) untere Schichten greifen nie auf höhere Schichten zu GUI auswechselbar controller bildet die Systemschnittstelle sauberes Interface für Systemoperationen GUI controller Anwendung Daten SoPra 2008 Kap. 5.2: Das Design Systemarchitektur (5/20)

6 Client-Server Architektur Thick-Client Client 1 Client N C# Programm C# Programm GUI controller Anwendung... GUI controller Anwendung Systemgrenze nach Fusion Persistenzschicht Persistenzschicht Server Kommunikation (SQL, übers Netz) DB SoPra 2008 Kap. 5.2: Das Design Systemarchitektur (6/20)

7 Client-Server Architektur Thin-Client WebBrowser Client 1 HTML Seite... WebBrowser Client N HTML Seite Kommunikation (HTTP) Session Thread 1 GUI controller Anwendung Persistenzschicht... C# Programm Server GUI controller Anwendung Persistenzschicht Session Thread N Systemgrenze nach Fusion Kommunikation (SQL) DB SoPra 2008 Kap. 5.2: Das Design Systemarchitektur (7/20)

8 Client-Server Architektur Thin-Client (Variante) WebBrowser Client 1 HTML/javascript... WebBrowser Client N HTML/javascript Kommunikation (HTTP) Session Thread 1 GUI controller Anwendung Persistenzschicht... Server GUI controller Anwendung Persistenzschicht Session Thread N Systemgrenze nach Fusion Kommunikation (SQL) DB SoPra 2008 Kap. 5.2: Das Design Systemarchitektur (8/20)

9 Für s Auge... Kapitel 5.3: die GUI Das Graphical User Interface die GUI Relevanz Warum? Die Grundregel Wie? Integration in FUSION Entwurf SoPra 2008 Kap. 5.3: Das Design die GUI (9/20)

10 Relevanz Warum ist die GUI wichtig? Ergonomie schlechte GUI unproduktive Nutzung Die GUI ist das Aushängeschild einer Software Kunde sieht das Innenleben womöglich gar nicht oft wird eine Anwendung nur an ihrer GUI bewertet erster Eindruck zählt: Anwender nicht abschrecken SoPra 2008 Kap. 5.3: Das Design die GUI (10/20)

11 Relevanz eine schlechte GUI kann Software unbrauchbar machen umständlich zu bedienen verwirrend... SoPra 2008 Kap. 5.3: Das Design die GUI (11/20)

12 Grundregel Der Nutzer steht im Mittelpunkt! den menschlichen Arbeitsablauf unterstützen den Nutzer führen Kontext anbieten Begriffswelt des Nutzers verwenden keine Systeminterna in der Oberfläche keine Bezeichner aus der Implementierung, sondern verständliche Begriffe Das System soll sich dem Nutzer anpassen nicht umgekehrt! SoPra 2008 Kap. 5.3: Das Design die GUI (12/20)

13 Integration in FUSION Die GUI realisiert einen Teil der Systemschnittstelle. Dialogführung orientiert sich an den Lebenszyklen GUI kommuniziert mit dem Systemkern über Systemoperationen Controller als Schnittstelle zwischen GUI und Systemklassen Nutzer-Eingaben werden Parameter für Systemoperationen Anbindung durch und an Systemoperationen GUI beschafft sich Informationen über das System Systemoperationen stellen diese zur Verfügung präsentiert diese dem Nutzer Nutzer macht Eingaben und löst Aktionen aus entsprechend parametrisierte Systemoperationen werden angestoßen SoPra 2008 Kap. 5.3: Das Design die GUI (13/20)

14 Integration in FUSION Unabhängigkeit vom Systemkern Mehrere Fenster realisieren zusammen einen Lebenszyklus. Wie kommt die GUI an ihre Daten? Kommunikation nur über Systemoperationen ggf. fehlende Operationen ergänzen Oberfläche darf nur dokumentierte Operationen nutzen kein eigenständiger Zugriff auf Interna GUI und eigentliches System sollten getrennt bleiben GUI unabhängig von Implementierungsdetails Datenaustausch nur über die spezifizierte Schnittstelle modulare, austauschbare GUI SoPra 2008 Kap. 5.3: Das Design die GUI (14/20)

15 Entwurf Die GUI sollte nicht alleine vom Software-Entwickler entworfen werden enge Zusammenarbeit mit dem Kunden Mitarbeit von Psychologen (in großen Projekten) Designern Entwicklung anhand von Prototypen Evaluation durch Fragebögen Statistiken (meist genutzte Funktion, etc.) iterativer Prozess SoPra 2008 Kap. 5.3: Das Design die GUI (15/20)

16 Entwurf Vorgehen Wie kommt man zu einem GUI-Entwurf? 1. Drehbuch der Dialogabfolge aus den Lebenszyklen 2. Welche Informationen sollen dargestellt werden? Woher kommen diese Informationen? Gegebenenfalls fehlende (System-)Operationen ergänzen. 3. Eingabefelder für Nutzer vorsehen lösen oft Systemoperationen aus, in das Drehbuch integrieren SoPra 2008 Kap. 5.3: Das Design die GUI (16/20)

17 Entwurf Vorgehen (2) 4. Layout der einzelnen Dialoge ergonomische Kriterien beachten den Nutzer führen, nicht verwirren sinnvolle Namen und verständliche Meldungen Dialoge klar strukturieren, nicht überladen zusammen gehörende Dinge gruppieren nach Möglichkeit selbsterklärende Dialoge 5. Aufruf einer Systemoperation Vor Aufruf die Parameter aus den Nutzereingaben zusammenstellen 6. Rückmeldung an den Nutzer Statuszeile, Message-Area, Popup-Fenster, Iterativer Prozess: wiederholen bis gute GUI entsteht SoPra 2008 Kap. 5.3: Das Design die GUI (17/20)

18 Beispiel: Einzelbuchung anlegen Lebenszyklus und Dialogabfolge WUNSCHEINGABE ::= machevorschläge(b.wunsch).#set(b.vorschlag). VORSCHLÄGE machevorschläge(b.wunsch).#error. WUNSCHEINGABE MAIN VORSCHLÄGE ::= legebuchungan(b.vorschlag,startzeit,titel).#ok. MAIN WUNSCHEINGABE SoPra 2008 Kap. 5.3: Das Design die GUI (18/20)

19 Beispiel: Einzelbuchung anlegen Lebenszyklus und Dialogabfolge WUNSCHEINGABE ::= machevorschläge(b.wunsch).#set(b.vorschlag). VORSCHLÄGE machevorschläge(b.wunsch).#error. WUNSCHEINGABE MAIN VORSCHLÄGE ::= legebuchungan(b.vorschlag,startzeit,titel).#ok. MAIN WUNSCHEINGABE Raumwunsch Größe Gebäude Ausstattung Abbruch 25 Weiter von bis Terminwunsch Dauer Zurück 8:00 20:00 2h Weiter Buchungsvorschläge Raum 1001P, von 10:00 12:00 Raum 1002P, von 8:00 10:00 Raum 1005, von 15:00 17:00 Raum 1009, von 10:00 12:00 Raum H1, von 18:00 20:00 Raum1010J, von 14:30 16:30 Titel Beschreibung Zurück Klausur SWT Lst. Reif Buchen! Buchungswunsch leider nicht erfüllbar. OK Buchung erfolgreich! SoPra 2008 Kap. 5.3: Das Design die GUI (18/20)

20 Beispiel: Einzelbuchung anlegen Dialogabfolge und Systemoperationen (1) WUNSCHEINGABE ::= machevorschläge(b.wunsch).#set(b.vorschlag). VORSCHLÄGE machevorschläge(b.wunsch).#error. WUNSCHEINGABE MAIN VORSCHLÄGE ::= legebuchungan(b.vorschlag,startzeit,titel).#ok. MAIN WUNSCHEINGABE Raumwunsch Größe Gebäude Ausstattung Abbruch 25 Weiter von bis Terminwunsch Dauer WUNSCHEINGABE Zurück 8:00 20:00 2h Weiter #set(b.vorschlag) machevorschläge #error VORSCHLÄGE Buchungsvorschläge Raum 1001P, von 10:00 12:00 Raum 1002P, von 8:00 10:00 Raum 1005, von 15:00 17:00 Raum 1009, von 10:00 12:00 Raum H1, von 18:00 20:00 Raum1010J, von 14:30 16:30 Titel Beschreibung Zurück Klausur SWT Lst. Reif Buchen! Buchungswunsch leider nicht erfüllbar. OK Buchung erfolgreich! OK legebuchungan.#ok MAIN SoPra 2008 Kap. 5.3: Das Design die GUI (19/20)

21 Beispiel: Einzelbuchung anlegen Dialogabfolge und Systemoperationen (2) WUNSCHEINGABE ::= machevorschläge(b.wunsch).#set(b.vorschlag). VORSCHLÄGE machevorschläge(b.wunsch).#error. WUNSCHEINGABE MAIN VORSCHLÄGE ::= legebuchungan(b.vorschlag,startzeit,titel).#ok. MAIN WUNSCHEINGABE Raumwunsch Größe Gebäude Ausstattung Abbruch 25 Weiter von bis Terminwunsch Dauer WUNSCHEINGABE Zurück 8:00 20:00 2h Weiter #set(b.vorschlag) machevorschläge #error VORSCHLÄGE Buchungsvorschläge Raum 1001P, von 10:00 12:00 Raum 1002P, von 8:00 10:00 Raum 1005, von 15:00 17:00 Raum 1009, von 10:00 12:00 Raum H1, von 18:00 20:00 Raum1010J, von 14:30 16:30 Titel Beschreibung Zurück Klausur SWT Lst. Reif Buchen! Buchungswunsch leider nicht erfüllbar. OK legebuchungan.#ok Buchung erfolgreich! MAIN SoPra 2008 Kap. 5.3: Das Design die GUI (20/20)