Kapitel 5: Das Design - Institut für Informatik Augsburg
Werbung
Nach der Analyse kommt . . . Kapitel 5: Das Design SoPra 2008 Kap. 5: Das Design (1/20) 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) 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) Design in F USION 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) Kapitel 5.2: Systemarchitektur Klassische 3-Schichtenarchitektur: 1. User Interface (GUI, “Präsentationsschicht”) 2. System (Business Logic, Anwendungslogik) 3. Datenschicht (Datenbank, Persistenzschicht) GUI • untere Schichten greifen nie auf höhere Schichten zu ⇒ GUI auswechselbar • controller bildet die Systemschnittstelle ⇒ sauberes Interface für Systemoperationen controller Anwendung Daten SoPra 2008 Kap. 5.2: Das Design – Systemarchitektur (5/20) Client-Server Architektur Thick-Client Client 1 C# Programm GUI controller Client N C# Programm ... GUI Systemgrenze controller nach Fusion Anwendung Anwendung Persistenzschicht Persistenzschicht Server DB Kommunikation (SQL, übers Netz) SoPra 2008 Kap. 5.2: Das Design – Systemarchitektur (6/20) Client-Server Architektur Thin-Client WebBrowser Client 1 HTML−Seite WebBrowser ... Client N HTML−Seite Kommunikation (HTTP) Session Thread 1 GUI controller Anwendung ... C# Programm GUI controller Session Thread N Systemgrenze nach Fusion Anwendung Server Persistenzschicht Persistenzschicht Kommunikation (SQL) DB SoPra 2008 Kap. 5.2: Das Design – Systemarchitektur (7/20) 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 Session Thread N GUI controller Systemgrenze nach Fusion Anwendung Server Persistenzschicht Kommunikation (SQL) DB SoPra 2008 Kap. 5.2: Das Design – Systemarchitektur (8/20) Für’s Auge. . . Kapitel 5.3: die GUI Das Graphical User Interface – die GUI • Relevanz – Warum? • Die Grundregel – Wie? • Integration in F USION • Entwurf SoPra 2008 Kap. 5.3: Das Design – die GUI (9/20) 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) Relevanz • eine schlechte GUI kann Software unbrauchbar machen ⋆ umständlich zu bedienen ⋆ verwirrend. . . SoPra 2008 Kap. 5.3: Das Design – die GUI (11/20) 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) Integration in F USION 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) Integration in F USION 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) 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) 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) 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, . . . 7. Iterativer Prozess: 1. – 6. wiederholen bis ’gute’ GUI entsteht SoPra 2008 Kap. 5.3: Das Design – die GUI (17/20) 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) 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 25 Abbruch Weiter Terminwunsch von bis Dauer 8:00 20:00 2h Weiter Zurück 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 Klausur SWT Lst. Reif Zurück Buchen! Buchungswunsch leider nicht erfüllbar. OK Buchung erfolgreich! SoPra 2008 Kap. 5.3: Das Design – die GUI (18/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 #set(B.Vorschlag) Raumwunsch Größe Gebäude Ausstattung 25 Abbruch Weiter Buchungsvorschläge Terminwunsch von bis Dauer 8:00 20:00 2h Zurück VORSCHLÄGE macheVorschläge Weiter 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 #error WUNSCHEINGABE Zurück OK Lst. Reif Buchen! legeBuchungAn.#ok Buchungswunsch leider nicht erfüllbar. Klausur SWT Buchung erfolgreich! OK MAIN SoPra 2008 Kap. 5.3: Das Design – die GUI (19/20) 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 #set(B.Vorschlag) Raumwunsch Größe Gebäude Ausstattung 25 Abbruch Weiter Buchungsvorschläge Terminwunsch von bis Dauer 8:00 20:00 2h Zurück VORSCHLÄGE macheVorschläge Weiter 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 #error WUNSCHEINGABE Buchungswunsch leider nicht erfüllbar. OK Klausur SWT Lst. Reif Zurück Buchen! legeBuchungAn.#ok Buchung erfolgreich! MAIN SoPra 2008 Kap. 5.3: Das Design – die GUI (20/20)
