Home

pdf, ca. 3,8 MB - Persönliche Webseiten der Informatik

1. Fallstudie CSharp Microsoft Visual C NET Entwurf test cs Entwurf E j la xj Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe gd 6 40 BA o o E B Debug y gb aProvider UE AI B a o ama is E ar soja E H Toolbox ax urf Kunde Kundeneu cs Entwurf Angebot angebotneu cs Entwurf Angebot Angebot cs Entwurf testes Entwurf Angebot A 4 x Projektmappen Explorer Fallstudi A X Zustandsdiagrammedit aloa Bla h Zeiger El u Projektmappe Fallstudie CSharp 1 Projek Zustand Drag Feedback 5 El Fallstudie CSharp 2 Startzustand El al Verweise E Y Angebot 2 Zustandsuebergang EN Angebot cs 5 Zustand 5 8 AngebotNeu cs amp Startzustand aj ES Angebotsanzeige cs 2 Zustandsuebergang ngebotserstellung cs ngebotspflege cs o zustand ngebotssuche cs 5 Bestellung E Kunde 8 Kunde cs Kundenanzeige cs E Kundenerstellung cs 8 KundeNeu cs ES Kundenpflege cs E Kundensuche cs 5 App ico 4 assemblyInfo cs E Fassade cs 8 Pizzaservice cs 8 test cs Eigene Benutzersteue 5 Daten KI Komponenten m Sag Aufgabenliste ES Buildfehler angezeigte Aufgaben gefiltert x Zwischenablagering 1 M Beschreibung S Ber A A AA Ausgabe AX gt Bereit JL Abb 34 Dragfeedback 73 Parameter Beschreibung object hitObject Das zur ckgebene Objekt einer zuvor aufgerufenen GetHitTest Met
2. A35 Line Color Property Zustand ber diese Property kann die Linienfarbe eines Zustandes angesehen oder editiert werden Nice to have 44 A36 Line Color Property ber diese Property kann die Nice to have Startzustand Linienfarbe eines Startzustandes angesehen oder editiert werden A37 Background Color ber diese Property kann die Nice to have Property Zustand F llfarbe eines Zustandes angesehen oder editiert werden A38 Background Color ber diese Property kann die Nice to have Property Startzustand F llfarbe eines Startzustandes angesehen oder editiert werden A39 Font Property Zustand ber diese Property kann die Nice to have Schriftart und Schriftgr e f r einen Zustandes angesehen oder editiert werden A40 Font Property ber diese Property kann die Nice to have Startzustand Schriftart und Schriftgr e f r einen Startzustand angesehen oder editiert werden A41 Notiz Property Zustand ber diese Property kann die Notiz Should have f r einen Zustand angesehen oder editiert werden A42 Notiz Property ber diese Property kann die Notiz Should have Startzustand f r einen Startzustand angesehen und editiert werden A43 Notiz Property ber diese Property kann die Notiz Should have Zustands bergang f r einen Zustands bergang angesehen und editiert werden A44 Event Property ber diese Property kann das Must have
3. Es wird Code in mehreren Sprachen u a in Visual Basic C J und C erzeugt Der erzeugte Code ist gut lesbar und bersichtlich Wird eine GUI Komponente gel scht so werden alle betreffenden Codestellen dieser Komponente abgesehen von den Event Methoden gel scht Dies hat den Vorteil dass in diesen Event Methoden einprogrammierter Code beim L schen bzw Ver ndern der GUI nicht verloren geht Anderseits kann es dazu f hren dass im Code noch berfl ssige Methoden erhalten bleiben die nirgends mehr aufgerufen werden Diese Methoden m ssen vom Entwickler manuell gel scht werden was wiederum mehr Aufwand mit sich bringt Der generierte Code enth lt Kommentare die zu besserer Nachvollziehbarkeit des Codes f hren 2 4 3 Folgerung Die untersuchten GUI Builder Jigloo und das Produkt von Visual Studio Net weisen unterschiedliche St rken und Schw chen auf Die Vorteile von Eclipse sind dass es frei verf gbar und sehr gut f r die Entwicklung von Java Programmen geeignet ist Visual Studio Net hingegen ist nicht frei benutzbar Die Besonderheit von Visual Studio Net liegt eindeutig in der Unterst tzung mehrerer Programmiersprachen So k nnen Anwender in der Programmiersprache ihrer Wahl entwickeln Beide Produkte bieten eine einheitliche Oberfl che Die Oberfl che ist durch die klare Aufteilung in mehrere voneinander abgegrenzte Komponenten anschaulich Sie ist nicht mit unn tigen Details berladen Die Pal
4. 3 W hlen Sie entweder aus der Liste eine bestehende GUI Maske aus und best tigen dies mit dem Button OK oder geben Sie unter dem Eingabefeld Name den Namen f r die zu erzeugende GUI Maske ein Achten sie dabei darauf in welchen Pfad in der GUI Auswahlliste sie sich gerade befinden In diesem Pfad wird ihre Maske beim Erzeugen abgelegt Wenn Sie den Namen der zu erzeugenden Maske eingeben haben best tigen Sie dies mit dem Button Erzeugen Die GUI Referenz ist danach dem Zustand zugewiesen w hlen Sie ein GUI Formular aus w hlen Sie eine GUI Formular aus Fallstudie CSharp Kunde E Kundenanzeige cs E Kundenerstellung cs El Kundenpflege cs E Kundensuche cs Zielpfad 3 Bestellung FabudsCshapranda 3 Angebot neue GUI Form anlegen Abbrechen 131 4 6 GUI Maske Zuweisung eines Zustands ndern Um die GUI Maske Zuweisung eines Zustands zu ndern gehen Sie wie folgt vor 1 Markieren Sie ihren zu ndernden Zustand 2 Klicken Sie im Eigentschaftsfenster beim Property GUIReferenz den Button an Eigenschaften zustandi SUIT ZustandsdiagrammE JE BackColor L White Bezeichnung zustandi BorderColor Black Groesse 111 103 GUIReferenz 3 W hlen Sie entweder aus der Liste eine bestehende GUI Maske aus und best tigen dies mit dem Button OK oder geben Sie unter dem Eingabefeld Name den Namen f r die zu neu erzeuge
5. 9 8 Zustandsdiagrarr O webservice System Web Services System Web Services 1 0 5000 0 C B Y Bestellung Bestellung cs Elemente hinzuf gen entfernen System Web UI Webeontrols System Web 1 0 5000 0 4 a Pak z SUIT ZustandsdiagrammEditor SUIT 1 0 2515 28071 le M d z Elemente alphabetisch sortieren n SUIT Zustandsdiagrammeditor SUIT 1 0 232 22 i a an de Listenansicht Qu SUIT Zustandsdiagrammeditor SUIT 1 0 2327 30422 Kundenerieios Registerkarte hinzuf gen M zustandsuebergang SUIT ZustandsciagrammEditor SUIT 1 0 2515 28071 c E Kundenerstellun Alle Registerkarten anzeigen lzustandsuebergang SUIT ZustandsdiagrammEditor SUIT 1 0 2327 30422 le 8 KundeNeu cs rn Kundenpflege cs Kundensuche cs Sprache Invariante Sprache Invariantes Land E AssemblyInfo cs Fassade cs Pizzaservice cs a Durchsuchen App ico Version 1 0 2327 30422 Retail BE A Elgene Benutzersteuerelemente y Aufgabenliste 21 Buildfehler angezeigte Aufgaben gefiltert q x Zwischenablagering v pecena z 2 Allgemein 4 gt Ausgabe a Xl rl Bereit Abb 29 Toolbox nach dem Hinzuf gen der Toolboxitems f r das Zustandsdiagramm Um den Vorgang des Einf gens der Komponenten in die Toolbox zu automatisieren implementiert die Designer Klasse ZustandsdiagrammDesigner die Methode addToolBoxlItems auf diese Weise muss diese
6. Abb 58 Login Verfahren in SUIT Zustandsdiagramm Notation Erweitert Abbildung 3 zeigt nun dass das Ereignis Login Click die Aktion UserVerifying startet und diese Aktion sowohl zum Folgezustand Arbeitsumgebung als auch rekursiv zu sich selbst f hrt Durch die zwei Transitionen die beide auf das Ereignis Login Click reagieren und beide die Aktion UserVerifying ansto en jedoch andere Folgezust nde aufweisen wird hier der verzweigte Dialogablauf dargestellt Allerdings darf man sich hier nicht irref hren lassen denn dieses Diagramm beschreibt nicht den Sachverhalt der in Abb 56 durch ein Interaktionsdiagramm beschrieben worden ist Auch in dem Diagramm in Abb 58 ist keinerlei Semantik ber den R ckgabewert der UserVerifying Funktion enthalten und w rde im Falle einer Simulation sogar dazu f hren dass v llig unklar w re welche der Zust nde und somit welche Maske nun im Falle eines Login Click Ereignis aktiv w re Daher sollte der SUIT Anwender m glichst solche Diagramme vermeiden Der SUIT Zustandsdiagrammeditor erlaubt zwar die Erstellung solcher Transitionen die auf dasselbe Ereignis reagieren aber zu unterschiedlichen Folgezust nde f hren Der SUIT Anwender sollte jedoch hiervon absehen da es sonst zu unvorhersehbaren Problemen in der Simulation kommen kann Der SUIT Zustandsdiagrammeditor in der aktuellen Version hat keinerlei Sicherheitsabfragen gegen solche unklaren Dialogverzweigungen Diese Sicherheit
7. Background Color Property Zustand Erf llt Nice to have A38 Background Color Property Startzustand Erf llt Nice to have A39 Font Property Zustand Erf llt Nice to have A40 Font Property Startzustand Erf llt Nice to have A41 Notiz Property Zustand Erf llt Should have A42 Notiz Property Startzustand Erf llt Should have A43 Notiz Property Zustands bergang Erf llt Should have A44 Event Property Zustands bergang Erf llt Must have A45 Action Property Erf llt Must have A46 In Property Zustands bergang Erf llt Must have A47 Out property Erf llt Must have A48 Points Property Zustands bergang Erf llt Should have A49 Gr e von Zust nden mit dem Mauscursor Erf llt Should have ndern A50 Die Position eines Zustandes ber Drag amp Erf llt Should have Drop ndern A51 Die Position eines Startzustandes ber Erf llt Should have Drag amp Drop ndern A52 Die Position eines Zustandes ber Drag amp Erf llt Should have Drop ndern A53 Die Position eines Zustands bergangs ber Erf llt Should have Drag amp Drop ndern A54 Verschieben von Zust nden Erf llt Should have A55 Speicherung vom Zustandsdiagramm als Erf llt Nice to have Bilddatei A56 Speicherung von Zustanddiagramm als Code Erf llt Must have A57 nderung im Zustandsdiagrammcode Erf llt Should have Reverse Engeenering A58 Vergr ern des Zeichenblattes Erf llt Should have A60 Drucken eines Zustdandsdiagramms nicht erf l
8. 2i DynamicProperties ControlEventAction E Ein Dialog Fenster erscheint in dem Sie die GUI Maske die Sie beim ausgehenden Zustand des Zustands bergangs zugewiesen haben sehen k nnen Je nachdem wie ihre GUI Maske aussieht gibt es Screenshot EE EventActionChooser Kundenanzeige efundene Kunden IstKunde anlegen bearbeiten 133 also hier Abweichung von den folgenden Ereignisausl sendes Control emdZurueck W hlen Sie das Event aus auf dem reagiert werden soll BackColorChanged BackgroundlmageChanged BindingContextChanged CausesYalidationChanged ChangeUlCues ContextMenuChanged Control dded ControlRemoved CursorChanged Disposed DockChanged DoubleClick DragDrop DragEnter DragLeave DragOver EnabledChanged Enter FontChanged ForeColorChanged HandleCreated Methodenname der Action die ausgef hrt werden soll neueSuchd Abbrechen DK W hlen Sie im ihre GUI Masken Ansicht linkes Fensterbereich des Dialogs das Control aus auf dessen Ereignis reagiert werden soll und w hlen Sie dann das Ereignis aus der Liste rechts im Fenster aus Geben Sie den Namen der Action dann in dieses Feld ein H andleCreated Methodenname der Action die ausgef hrt werden soll Abbrechen OK 6 Best tigen Sie nun mit dem Button OK Ihr Zustands bergang sollte nun erfolgreich das ausgew hlte Event und Action zugewiesen sein 4 8 Event und A
9. Aktionen muss vom Anwender nachtr glich implementiert werden Allein f r das Zustandsdiagramm des Gesamtsystems Pizzaservice wurden 23 Methoden automatisch generiert Bei gro en Systemen ist die Menge der im Zustandsdiagramm definierten Aktionen entsprechend umfangreicher Die automatische Generierung dieser Methoden in einer Fassade w rde den manuellen Programmieraufwand erheblich reduzieren 88 Folgender Fassaden Ausschnitt wurde von SUIT f r das Zustandsdiagramm in Abb 48 erzeugt public class Fassade public static void angebot_bearbeiten object sender System Eventirgs e Output WriteLine angebot_bearbeiten invoked public static void angebot suchen object sender System Eventirgs e Output WriteLine angebot_suchen invoked public static void show_angebotssuche object sender System Event rgs e Output WriteLine show _angebotssuche invoked lt ssummary gt Code generated by FassadeGenerator Don t change next statement Change to this statement may cause exception if the code is regenerated jii lt summary gt public static System IO TextWriter Output System Console Out Abb 49 Ein Ausschnitt der Fassade zum Zustandsdiagramm in Abb 48 In der Simulationsansicht von SUIT kann man sich nun das bereits modellierte Verhalten des Pizzaservicesystems ansehen Der aktive Zustand in dem auf eine Benutzereingabe gewartet wird wird in der Simulationsansicht fa
10. Das Objekt das von einem zuvor aufgerufenen GetHitTest zur ckgeben wurde Int X Die Offset Anzahl zu dem Zustandselement in der X Richtung IntY Die Offset Anzahl zu den Zustandselement in der Y Richtung Point initialPoint Der Punkt an dem dieser Drag initialsiert wurde zu den Zustandselement in der Y Richtung Tabelle 15 Parameter von Drag 74 onClick public virtual void onClick Mouse onClick wird ausgef hrt wenn auf das Zustandsdiagrammelement geklickt wurde onClick ist virtual und kann in einer von ZDiagrammElementDesigner abgeleiteten Klasse berschrieben werden EventArgs me EnvDT E DTE DTE Parameter Beschreibung MouseEventArgs me Die Argumente f r den Mouse Event EnvDTE DTE DTE Der DTE des hostest Tabelle 16 Parameter von onClick 6 6 Fazit Die in Kapitel 4 beschriebenen funktionalen Anforderungen an SUIT wurden bewertet ob sie als erf llt oder nicht erf llt gelten k nnen Weiterhin wurden die technischen Besonderheiten bei der Umsetzung von SUIT in Net beschrieben damit wurde ein kleiner Einblick in Net gew hrt SUIT kann weiterentwickelt werden Zu diesem Zweck wurden die Schnittstellen zu SUIT beschrieben 75 7 Fallstudie 7 1 Einleitung Ziel der vorliegenden Bachelor Arbeit ist die Entwicklung eines Tools mit dem auf der Basis von Zustandsdiagrammen und Fensterentw rfen eine Benutzungs
11. System Drawing Color White this startzustandl Bezeichnung startzustandl this startzustandl BorderColor System Drawing Color Black this startzustandl Groesse new System Drawing Size 100 100 this startzustandl GUIReferenz Fallstudie CSharp Maskel cs this startzustandl Info null So sieht am Beispiel des Startzustands aus Abb 30 der in SUIT automatisch generierte Code in C aus CodeDom ist jedoch mit der jetzigen Version f r die sprachunabh ngigen Generierung der Fassade nicht ausreichend da das CodeDom Model im vorliegenden Net Framework Version 1 1 f r Objekte die nicht von Typ IComponent sind noch nicht komplette Sprachunabh ngigkeit realisiert F r die Fassadengenerierung wird die Klasse FileCodeModel benutzt Diese erm glicht den Zugriff auf die Methoden innerhalb der Fassade FileCodeModel ist im EnvDTE Namespace definiert Folgender Codeausschnitt zeigt die zu dem Beispiel aus Abb 30 generierte Fassade 63 namespace WindowsApplication3 lt summary gt Zusammenfassung f r Fassade lt summary gt public class Fassade public static void suchen object sender System EventArgs e Output WriteLine suchen invoked lt summary gt Code generated by FassadeGenerator Don t change next statement Change to this statement may cause exception if the code is regenerated lt summary gt public static System IO TextWriter Output System Conso
12. Type DesignerTypeName Type DesignerBaseType wird vor der Klassendeklaration aufgerufen Dieser Code initialisiert eine neue Instanz der DesignerAttribute Klasse mit den Typen des Designers und der Designerbasisklasse Mit dem Parameter Type DesignerTypeName wird der zuzuordnende Designer bergeben In unserem Code ist es der ZustandsdiagrammDesigner typeof IRootDesigner sagt aus dass der ZustandsdiagrammDesigner vom Typ IRootDesigner ist Ein Designer vom Typ IRootDesigner wird beim Doppelklick auf die Klasse angezeigt Er ist der Stammdesigner und befindet sich an der h chsten Position 6 4 3 Programmiersprachunabh ngigkeit in der Codegenerierung in Net Verwenden von CodeDom NET stellt den Code Document Object Model CodeDom Mechanismus zur Verf gung um die logische Struktur des Quellcodes zu beschreiben CodeDom Elemente werden miteinander verbunden sodass eine Datenstruktur entsteht die die Struktur von Quellcode abbildet Jede Klasse Methode Variable etc ist ein eigenes Objekt das instanziert und zum Diagramm hinzugef gt werden muss Im Folgenden wird an einem Beispielcode aus CodeDom die Erzeugung eines CodeDom Diagramm demonstriert 61 Beispiel In c Point myPoint new Point 10 10 in VB Dim myPoint As Point New Point 10 10 Im Beispielcode wird ein Objekt der Klasse Point mit seinen x und y Koordinaten erzeugt Aus diesem Programmiercode wird nun demonstriert wie eine CodeDom Struktur
13. berlegungen die sich skizzenhaft in Form von Masken mit GUI Komponenten wiederfinden Was z B aus dem Zustandsdiagramm nicht hervorgeht ist die Information dass durch das Bet tigen des Buttons Suche das Ereignis suche_click ausgel st wird Das bedeutet dass die Beziehung zwischen der GUI Komponente und dem durch den Dialogwechsel auszul senden Ereignis fehlt Im Modell aus Abb 1 ist sie jedoch nachvollziehbar Ziel ist es also das Zustandsdiagramm um Maskenskizzen zu erweitern Dazu ist es erforderlich jede Skizze einem Zustand zuzuordnen Siehe dazu Abb 4 1 Buch 2 Buch Buchsuche Buchliste Suche_click Buchsuche Buchinfo Abb 4 Zustandsdiagramm Literatur Suche um die Maskenskizzen angereichert 10 Die gesamten Informationen aus dem Ursprungsmodell in Abb 1 wurden in Form eines Zustandsdiagramms und Fensterskizzen beschrieben Dialogabl ufe der Buchsuche wurden in Form eines Zustandsdiagramms modelliert Hierzu wurden Zust nde Zustands berg nge und Ereignisse definiert und die Zust nde Skizzen zugeordnet In Abb 1 und im Modell in Abb 4 handelt es sich letztendlich um dasselbe Modell Das Modell aus Abb 1 ist durch den Versuch die Dialogabl ufe in ihrer Reihenfolge darzustellen entstanden Bei diesem Vorgang ist intuitiv also eher unbeabsichtigt ein Zustandsdiagramm entstanden Das Modell in Abb 4 bildet auch den Versuch die Dialogabl ufe in ihrer Reihenfolge darzustellen mit dem Unterschied da
14. glichkeit per Drag amp Drop Verfahren und Properties Einstellungen sein Zustandsdiagramm aufzubauen zu editieren und zu entwickeln Dabei wurde das Ziel gesetzt dass der Zustandsdiagramm Designer sich m glichst nahtlos in die Net Entwicklungsumgebung integriert siehe Abschnitt 5 2 So wurde die schon aus dem GUI Builder bekannte Toolbox beim Zustandsdiagramm Designer um neue Elemente erweitert wie z B Zustand und Zustands bergang Hierbei wird das Ziel verfolgt dass SUIT sich mit wenig Aufwand weiterentwickeln l sst Im Falle einer Weiterentwicklung kann die Toolbox ohne einen gro en Aufwand um weitere Zustandsdiagrammelemente erg nzt werden Um diese Erg nzung zu erm glichen wurde eine abstrakte Oberklasse ZustandsdiagrammElement angelegt von der alle Toolbox Elemente f r den Zustandsdiagramm Designer erben muss Der Zustandseditor von SUIT ist so angelegt dass er alle Elemente von Typ ZustandsdiagrammElement akzeptiert Will man also den SUIT Zustandsdiagrammeditor um weitere Elemente erweitern so muss man eine Klasse definieren die von ZustandsdiagrammElement erbt Abb 25 zeigt die Vererbungsstruktur der Elemente die zur Zeit in SUIT unterst tzt werden ZustandsdiagrammElement Startzustand Abb 25 Vererbungsbaum der Elemente in SUIT Zustandsdiagramm Designer Zustands bergang 51 In Abb 25 l sst sich erkennen dass alle zur Zeit im SUIT unterst tzten Elemente Zustand Startzustand und Zustand be
15. i 8 Pizzaservice cs y B test cs E A O DS O O O OO EOS TEGO ESAS DEDOS OOO EA 1 Daten 4 Komponenten Aufgabenliste 22 Buildfehl te Aufgab filtert x Windows Forms fg zen 2 ler angezeigte Aufgaben gel 3 a Zwischenablagering mM Peschirepung er Allgemein I u E z EA Ausgabe a x wj Bereit Abb 33 SUIT Zustandsdiagramm mit DragFeedback Die Komponente Zustand mit dem Namen zustand1 w rde bei einem Methodenaufruf von IsInRect true liefern weil sie sich im Rechteck befindet Dagegen liefert das Komponenten Object mit dem Namen zustand2 bei s nRect false weil sich zustand2 au erhalb des rechteckigen Bereichs befindet GetCursor public virtual Cursor GetCursor object hitObject GetCursor gibt den Maus Cursor f r den bergebenden HitObjekt zur ck Handelt es sich bei dem bergebenen hitObject um HitLeft oder HitRight so wird ein Cursor Object zur ckgegeben mit zwei horizontalen Spitzen West Ost Ist es aber ein HitTop oder HitBottom Object gibt GetCursor ein Cursor Object mit zwei vertikalen Spitzen Nord S d Bei einem HitUpperLeft oder HitLowerRight ist es ein Cursor mit zwei diagonalen Spitzen Nordwest S dost Handelt es sich um HitUpperRight oder HitLowerLeft ist der Cursor zwei diagonale Spitzen Nordost S dwest Ansonsten gibt die Methode GetCursor einen Cursor Object mit vier Spitzen die nach Nord S d Ost und West zeigen zur ck siehe Tabelle 8 Die Methode GetCursor ist v
16. nnen die Eigenschaften eines Startzustandes angesehen oder editiert werden Must have A26 Property Ansicht Zustands bergang ber diese Property Ansicht k nnen die Eigenschaften eines Zustands bergangs angesehen und editiert werden Must have A27 Position Property Zustand ber diese Property kann die Position eines Zustandes angesehen oder editiert werden Must have A28 Position Property Startzustand ber diese Property kann die Position eines Startzustandes angesehen und editiert werden Must have A29 Gr e Property Zustand ber diese Property kann die Gr e eines Zustandes angesehen oder editiert werden Must have A30 Gr e Property Startzustand ber diese Property kann die Gr e eines Anfangzustand angesehen oder editiert werden Must have A31 Text Property Zustand ber diese Property kann die Beschriftung eines Zustandes angesehen oder editiert werden Must have A32 Text Property Startzustand ber diese Property kann die Beschriftung eines Startzustandes angesehen oder editiert werden Must have A33 Masken Property Zustand ber diese Property kann den Eintrag Referenz der Maske eines Zustandes angesehen oder editiert werden Must have A34 Masken Property Startzustand ber diese Property kann den Eintrag der Maske Referenz eines Startzustandes angesehen oder editiert werden Must have
17. oooocnoocccooocccnonccinnncconnncninnos 101 9 2 6 Konsistenzverlust in sp teren Phasen oooooonnncccnnonccnnnccconnncnonnncononocononccnonnccnonnccnnnos 104 9 4 Fatit nrn aien PAULI NE EELUL SEES IE E ATE E BL GELNEURUERER a a 105 EOS USD ER cds 106 19 1 Einleitung asien een 106 192 Erweiterungen von SU a a E E aE 106 10 2 1 Erweiterung Hierarchie 2 2 u a E E E R EEE ERE 106 10 2 2 Erweiterung Konsistenzerhaltung oooococnonccnnonocononcnononccnnnnncnnnnnccnnnccnnnnccnoncccnnnos 107 IS Fait NN 111 PERES E LI A A A AA A a aS 112 Quellen asada ias 113 Abbild ngsyerzeichni as 114 A RO 116 Mder tes ee E 117 Anhan t e a edge 120 Ben utzer aNd DC r a a e E a EAS 121 Kl ssendiagramnM ae Eike 139 1 Einleitung Die Softwaremodellierung besitzt im Software Entwicklungsprozess einen hohen Stellenwert Hier hat sich in der objektorientierten Software Entwicklung UML in wenigen Jahren als Standardsprache durchgesetzt UML bietet neun Typen von Diagrammen doch keins davon geht auf die Erfordernisse beim Entwurf von Benutzungsschnittstellen ein obwohl noch vor wenigen Jahren eine Studie von Myers und Rosson ergab dass ca 50 des Gesamtaufwandes eines Softwareprojektes alleine f r die Programmierung der graphischen Benutzungsschnittstelle notwendig war MyersRosson92 Gr nde hierf r sind unter anderem fehlende Methoden und unzureichende Werkzeuge Ein wesentliches Bestreben dieser Bachelor Arbeit ist es den Entwickler b
18. t SUIT SUIT erzeugt aus einem Modell automatisch Prototypen Weiterhin wird das Modell in SUIT zur automatischen Codegenerierung genutzt Prototypen k nnen in SUIT bis zur fertigen Anwendung weiterentwickelt werden Ende des Textes Noura Haji amp Vinh Phu Phan Title of the paper Developing User Interface with state diagram and window designs Keywords User Interface GUI state diagram Prototyping Abstract The main object of this bachelor s thesis is to support the developer in building user interfaces Due to missing methods and insufficient tools the former development effort is extraordinary This bachelor s thesis presents a method to create user interfaces by means of state diagrams and window designs The solution to implement this method was to combine the functionality of a GUI builder with a state diagram editor and to integrate this into the software development process This solution is called SUIT SUIT takes a model and creates automatically prototypes and code The prototypes which are built in SUIT can be developed to running software applications End of text Erkl rung Hiermit versichern wir dass wir diese Arbeit selbst ndig verfasst haben und keine anderen als die angegebenen Quellen und Hilfsmittel verwendet wurden Hamburg 19 Januar 2007 Vinh Phu Phan Hamburg 19 Januar 2007 Noura Haji Danksagung An dieser Stelle m chten wir allen danken die bei der Entstehung dieser Arbeit mitgewirkt habe
19. 444s s s40sseenenannnennenennnan nennen nennen en nenn 7 8 9 11 12 13 14 15 16 17 18 28 30 31 34 37 38 40 41 76 78 80 83 84 86 88 90 100 101 104 105 106 107 108 111 112 Bildsehirmmasken a se es ee an ra dad leed 12 14 16 38 Cc GOIEDo Mae iii 50 51 52 61 62 63 Codegenerierung ccoococccccncncncococononcnnnnnnonncnnnrnnnncnrnnnnnnnrnroroncnnnss 12 14 21 24 50 51 52 61 90 93 95 101 102 103 D Dial gwechsel r run en BE DI 34 E Eclips Sra n a ab he ee Hole ner ae iaa 18 19 24 Elementar Werkzeug ns A paa 15 78 79 80 87 Endlicher Automat 22222022sssennsennennnnnnennnnnnennnnnennnenennnnnnnennnnenenennnsnnnenennennen 9 30 31 40 ENAZUSTINA O ee SE E A ETET 38 39 Entscheidungstabelle 4u4u4040nananennennnanannnnnnnnannnne nen nnnnnnnnnnannnnn een nnnnen 33 37 40 ENVDTE 2 2 A A a E ES 48 63 65 66 F EallstUdiSia cata Di 76 Fassa endend 13 14 17 18 31 37 40 41 46 52 53 54 58 63 64 88 89 90 91 92 95 98 99 106 112 Fassaden Pattern cui A A A Aa ee 52 Fensterentwurl 2 3 asada a adas 13 14 15 16 17 18 28 30 31 37 40 76 80 86 90 91 92 95 97 99 105 106 112 Ele Go de M dem A A Hrn 63 Funktionale Komponente occooccccocccocococnccccncnoncnccncnnnrncncn rra nn nn nn nana nnnnnnennnincnnenenanenennananes 13 53 G GUI B llder aiii e 11 12 14 15 16 17 18 19 22 23 24 25 28 29
20. Ausblick dar ber gegeben werden wie sich SUIT weiterentwickeln l sst SUIT erf llt in der aktuellen Version die von uns erhofften Ziele die wir in der Vision siehe 1 2 beschrieben haben Benutzungsschnittstellen lassen sich in SUIT mit Hilfe von Zustandsdiagrammen und Fensterentw rfen modellieren und das schon recht in den fr hen Etappen der Softwareentwicklung Die Simulationskomponente erm glich es den Kunden einen Prototyp schnell vorzulegen und die Fassaden Generierung nimmt dem Entwickler Programmierarbeit ab und bietet eine gute Schnittstelle zur Weiterentwicklung der mit SUIT modellierten Prototypen F r die n chste SUIT Version sollen die Aspekte der Konsistenzhaltung und Hierarchie neue prim re Ziele sein Um diese Ziele zu erreichen bedarf es Erweiterungen an SUIT die in Abschnitt 10 2 erl utert werden Im Abschnitt 10 3 folgt dann ein Fazit 10 2 Erweiterungen von SUIT F r die folgenden SUIT Versionen k nnen zwei prim re Ziele gesetzt werden Zun chst soll die M glichkeit geboten werden das gesamte Zustandsdiagramm Modell aufzuteilen und somit besser zu strukturieren Diese Erweiterung soll in Abschnitt 10 2 1 erl utert werden Abschnitt 10 2 2 bezieht sich dann auf Erweiterungen an SUIT die auf die Konsistenzerhaltung zwischen dem SUIT Zustandsdiagramm Modell der tats chlichen Benutzungsschnittstelle zielen 10 2 1 Erweiterung Hierarchie SUIT wurde bisher nur bei kleineren Projekten getestet In diesen Projek
21. Drag amp Drop Verfahren auf die en per Drag amp Drop Zeichenfl che platziert werden Gr e von Die Gr e kann direkt beim Together Should have Zust nden beim Platzieren per Drag amp Drop ge ndert Erzeugen ndern werden Farbliche Zust nde k nnen in verschiedenen Together Nice to have Hervorhebung Farben dargestellt werden Visio Gr e des Das Zeichenblatt kann verkleinert Visio Nice to have Zeichenblattes oder vergr ert werden ndern Format des Es kann zwischen einem Visio Nice to have Zeichenblattes Querformat oder einem Hochformat ausgew hlt werden Formatieren von Text und andere Beschriftungen Visio Nice to have Text k nnen beliebig formatiert werden Formatierung F r jedes Element kann eine Visio Nice to have Muster F llmuster definiert werden Formatierung Linienbreite Linienfarbe Kann f r Visio Nice to have Linie jedes Element beliebig definiert werden Druckansicht Eine Druckansicht kann vor dem Visio Nice to have Drucken angezeigt werden Tabelle 2 Neu erkannte Anforderungen aus Visio und Together 2 6 Fazit Die Erzeugung von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen ist in der Literatur bisher noch nicht beschrieben worden Die Recherche nach einem Werkzeug das die in 1 2 1 beschriebene Methode umsetzt ergab dementsprechend kein Ergebnis Es sind zwar GUI Builder zur Gestaltung graphischer Oberfl chen oder Zustandsdiagramm Editoren zum Ers
22. Eigenschaften im Eigenschaftsfenster Abb 31 angezeigt so kann f r jede Eigenschaft definiert werden ob es sich bei dieser Eigenschaft um eine schreibgesch tzte Eigenschaft oder um eine Lese Schreib Eigenschaft handelt Eigenschaften die den System Component Model ReadOnlyAttribute Konstruktor mit dem Wert true versehen sind sind schreibgesch tzt 6 4 5 Aufrufen des GUI Designers in SUIT EnvDTE DTE DTE dient zur Automatisierung und Erweiterbarkeit von Visual Studio Mit einem DTE Object k nnen Prozesse in Visual Studio wie z B das Kompilieren von Projekten und der Zugriff auf Elemente der Entwicklungsumgebung wie z B der Zugriff auf den GUI Builder von Visual Studio automatisiert werden DTE am Beispiel des Aufruf des GUI Builder in SUIT Der Aufruf des GUI Builders in SUIT ist notwendig da z B bei einem Doppelklick auf einem Zustand der GUI Builder mit der dem Zustand zugeordneten Maske ge ffnet wird Diese kann dann bearbeitet werden F r den Aufruf des GUI Builders ben tigt man ein Objekt der Enwticklungsumgebung angeboten durch das DTE Objekt im Namespace EnvDTE Ein Objekt des Typs DTE repr sentiert unter anderem alle bestehenden Projekte mit den darin enthaltenen Dateien alle Konstanten etc innerhalb der Entwicklungsumgebung Ist das DTE Objekt erst einmal bei der Hand kann man sich das Projekt holen das die GUI Datei enth lt Hat man nun das Projekt in der sich die GUI Datei befindet so kann man sich ein Obj
23. Entsorgung der Felder werden in SUIT nicht ber cksichtigt um diese muss sich der Anwender selbst k mmern siehe Abschnitt 3 4 Dadurch ist dem Anwender trotz vorgegebenen Fassade Pattern gen gend Freiraum gelassen um seinen eigene Designentwurfe einzubringen Dennoch sorgt diese durch die Fassade erzwungene Entkoppelung daf r dass eine saubere Trennung von Funktionalit t und View stattfinden muss sodass der Anwender mehr oder minder verpflichtet ist auf Softwareengeneeringssicht ein gutes Entwurfskonzept zu realisieren 5 5 Fazit Die SUIT Architektur gliedert sich in die bestehende Visual Studio Net Architektur ein SUIT verh lt sich hierbei in der Handhabung wie eine Net Klassenbibliothek Die interne SUIT Architektur l sst sich in drei eigen entwickelte Komponenten Zustandsdiagramm 53 Komponente Simulationskomponente und Codegenierungskomponente und eine fremdentwickelte Komponente GUI Designer Komponete unterteilen Durch die automatische Fassaden Generierung wird eine Schnittstelle zu sauberen Trennung zwischen der Interaktionskomponente und der Funktionalen Komponente angeboten die der SUIT Anwender bei dem Entwurf seines Zielsystem Architektur ber cksichtigen muss 54 6 Umsetzung von SUIT 6 1 Einleitung Dieses Kapitel gibt einen kleinen Einblick in die Umsetzung von SUIT In Abschnitt 6 2 wird darauf eingegangen welche der Anforderung im Anforderungskapitel siehe Kapitel 4 umgesetzt wurden
24. Entwicklung von SUIT In Kapitel 3 wird die Theorie der Erzeugung von Benutzungsschnittstellen in Form von endlichen Automaten und Fensterentw rfen dargelegt In Abgrenzung von der Theorie Denerts der Erzeugung von Benutzungsschnittstellen mit Interaktionsdiagrammen und Fensterentw rfen wird die im Rahmen dieser Bachelor Arbeit geplante Vorgehensweise der Erzeugung von Benutzungsschnittstellen auf Basis von Zustandsdiagrammen und Fensterentw rfen beschrieben In Kapitel 4 werden alle Anforderungen an SUIT dargelegt und klassifiziert in Kapitel 5 die SUIT Architektur beschrieben Im dritten Bereich der Arbeit wird die Umsetzung von SUIT dargestellt und nach verschiedenen Gesichtspunkten untersucht und beurteilt In Kapitel 6 wird ein kleiner Einblick in die Umsetzung von SUIT gegeben Au erdem wird auf Besonderheiten bei der Realisierung von SUIT und auf die im Rahmen der Umsetzung verwendeten Technologien eingegangen In Kapitel 7 wird am Beispiel einer Fallstudie der praktische Einsatz von SUIT demonstriert In Kapitel 8 folgt eine Analyse des Usabiliy Tests dem SUIT mit Hilfe von Testpersonen unterzogen wurde Hierdurch soll SUIT auf seine Praxistauglichkeit hin untersucht werden Der vierte Teil der Arbeit besteht aus den Kapiteln 9 und 10 In Kapitel 9 werden die M glichkeiten und Grenzen von SUIT beschrieben Und in Kapitel 10 folgt ein Ausblick dar ber wie sich SUIT weiterentwickeln l sst Hier werden f r SUIT sinnvolle Erweiteru
25. Kundendaten arbeitet Diese Kunden geben Bestellungen aus die auch von dieser Benutzungsschnittstelle verwaltet 101 werden sollen ber das Hauptmen in dem sich das System zu Anfang befindet kann der Anwender entscheiden ob er Kunden oder Bestelldaten ansehen will Je nachdem was der Anwender ansehen will bekommt er eine Liste mit der bersicht alle Kunden oder Bestelldaten In diesen bersichtslisten kann der Anwender dann die Details der Daten zu einem Kunden sofern er vorher im Hauptmen die Kundenliste ausgew hlt hat oder zu einer Bestellung anfordern und manipulieren Zu einer detaillierten Beschreibung einer Bestellung geh rt ein Kunde der diese Bestellung aufgegeben hat Dieser Kunde kann im Bestelldetail angezeigt und bearbeitet werden Daher ist die Kunden Maske Kunde cs sowohl ber den Weg der Kundenliste als auch ber die Bestellliste erreichbar Diese Kunden Maske wird wie in Abb 55 zu erkennen in zwei Zust nden Kunde und KundeBestellung benutzt Eine Wiederreferenzierung von Masken in unterschiedlichen Zust nden ist in manchen F llen also sinnvoll und wird von SUIT unterst tzt Diese unterst tzte Funktionalit t macht jedoch die Codegenerierung f r den Aufruf des Folgezustands und somit die Folgemaske komplexer als sie ist Das Problem bei der Codegenierung des Folgemaskeaufrufs besteht darin zu entscheiden an welcher Stelle dieser Code generiert werden muss Es gibt dort drei m gliche Ans
26. Object HitBottom Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am unteren Rand ber hrt hat object HitLeft Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am linken Rand ber hrt hat object HitRight Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am rechten Rand ber hrt hat object HitTop Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am oberen Rand ber hrt hat object HitLowerLeft Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am unteren linken Rand ber hrt hat object HitLowerRight Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am unteren rechten Rand ber hrt hat object HitUpperLeft Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am oberen linken Rand ber hrt hat object HitUpperRight Wird gesetzt wenn die Maus ein ZustandsdiagrammElement am oberen rechten Rand ber hrt hat Size myAdornmentDimensions Liefert die Gr e des Verzierungvierecks das beim Selektieren eines Elementes in Designer gezeichnet werden soll Tabelle 9 Statische Variablen der Klasse ZDiagrammElementDesigner Wird eine Klasse von ZDiagrammElementDesigner abgeleitet muss die folgende Methode implementieren BoundingBox public abstract Rectangle BoundingBox get set Dieser Property gibt einen Rechteckigen Bereich f r das Element zur ck anhand dessen ermittelt wird welcher Bereich neu gezeichnet werden muss
27. Startzustand Zustandsuebergang startzustand Alternativ k nnen Sie ein Startzustand durch ein Doppelklick auf des Element Startzustand in der Toolbox Kategorie Zustandsdiagrammeditor Elemente erzeugen 128 4 3 Erzeugung eines Zustands Bevor Sie einen Zustand erzeugen k nnen m ssen Sie ein Zustandsdiagramm erzeugt haben Siehe 4 1 Offnen Sie dieses Zustandsdiagramm in seiner Designer Ansicht Um nun einen Zustand per Drag amp Drop zu erzeugen gehen Sie wie folgt vor 1 W hlen Sie aus der Toolbox unter der Kategorie Zustandsdiagrammeditor Elemente das Element Zustand aus Toolbox 2x Zustandsdiagrammeditor El RK Zeiger amp Zustand g8 Startzustand Zustandsuebergang 2 Ziehen Sie nun per Drag amp Drop auf ihre Zeichenfl che einen Rahmen der die Gr e und Position ihres Zustands beschreiben soll Fallstudie CSharp Microsoft Visual C NET Entwurf Datei Bearbeiten Ansicht Projekt Erstellen Debuggen De Du 40 sam Toolbox 2x Startseite Pizzaservice cs Entw Zustandsdiagrammeditor El KR Zeiger 433 Zustand ee ee Startzustand Zustandsuebergang 3 Beim Loslassen der Maus also beim best tigen des Drag amp Drops sollte ihr Zustand erzeugt worden sein 75 Fallstudie CSharp Microsoft Visual CF NET Entwur Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Dal 0 6 Sug Oro Toolbox 2x Startseite Pizzaservice cs Entwu Zustandsdiagrammeditor El A
28. Tool existiert das diese Methode umsetzt Unsere Recherche nach solch einem Tool best tigte unsere Vermutung siehe Kapitel 2 Daher ist Ziel dieser Bachelor Arbeit solch ein Tool zu realisieren 1 2 2 Vision SUIT SUIT steht f r Statechart User Interface Tool Es handelt sich um das Tool das im Rahmen dieser Bachelor Arbeit entwickelt werden soll SUIT soll die in der Vision in Abschnitt 1 2 1 13 beschriebene Methode umsetzen Es unterst tzt also die Modellierung von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen SUIT erm glicht die Modellierung des dynamischen Verhaltens einer Benutzungsschnittstelle in Form eines Zustandsdiagramms Das in SUIT erstellte Zustandsdiagramm kann um die Informationen der Bildschirmmasken angereichert werden In ihm wird festgehalten welche Maske auf dem Bildschirm in einem Zustand dargestellt werden soll Auf diese Art und Weise wird die L cke zwischen der Modellierung des dynamischen Verhaltens einer Benutzungsschnittstelle und die graphische Gestaltung ihrer Oberfl che geschlossen In SUIT wird au erdem noch erreicht dass der in die Modellierung in Form von Zustandsdiagrammen und Fensterentw rfen investierte Aufwand in den Entwicklungsprozess mehr integriert wird SUIT steigert den Nutzen eines Modells indem aus dem Modell automatisch Code in Form einer Fassade generiert werden kann Dar ber hinaus kann das Modell simuliert werden Die Simulation dient dazu das
29. Vorgehensweise in Abgrenzung zur Vorgehensweise von Denert dargestellt und diskutiert In Abschnitt 3 5 wird ein Fazit aus den berlegungen gezogen 3 2 Benutzungsschnittstellen auf Basis von endlichen Automaten und Fensterentw rfen Die zustandsbasierte Modellierung stellt eine M glichkeit dar das Verhalten von Benutzungsschnittstellen zu spezifizieren Die Benutzungsschnittstelle eines Systems kann als eine endliche Menge von Zust nden und Zustands berg ngen modelliert werden In Abh ngigkeit von einer bestimmten Eingabe wechselt der Zustandsautomat von einem Zustand in einen anderen Welche Eingaben m glich sind ist vom aktuellen Zustand des Systems abh ngig Eingaben verursachen Zustands berg nge und dienen dem Benutzer zum Navigieren in den endlichen Automaten Eine Benutzungsschnittstelle besteht in der Regel aus einer Menge von Masken zwischen denen durch Eingabeaktionen Men auswahl OK Button usw hin und her gewechselt werden kann Werden Masken bzw Dialogboxen als Zust nde aufgefasst und Eingabeaktionen als Kanten berg nge so k nnen die Navigationsm glichkeiten durch die Bedienoberfl che als endlicher Automat modelliert werden In jedem Zustand wartet das System auf eine Benutzereingabe Ein Mausklick auf einen Button z B ist ein Ereignis das eine Aktion ausl st die einen Zustandswechsel in den Folgezustand bewirken kann Bei der Modellierung einer Benutzungsschnittstelle eines Systems in Form eines endl
30. Zust nde und ihre berg nge Transitionen Zustandsdiagramme beschreiben das Verhalten eines Systems als eine Menge von Zust nden und Zustands berg ngen Ein Zustand beschreibt das System zu einem bestimmten Zeitpunkt Ein Zustands bergang ist ein Zeitpunkt an dem das System einen gegebenen Zustand verl sst und in einen neuen Zustand bergeht Er ist durch ein Ereignis und eine Aktion spezifiziert Aktionen werden im Zustandsdiagramm dadurch ausgel st dass ein bergang stattgefunden hat Im Rahmen dieser Bachelor Arbeit wurden flache Zustandsdiagramme f r die Modellierung gew hlt Die praktische Begr ndung daf r liegt in dem Vorhaben diese im Rahmen der n chsten Version auf Statecharts zu erweitern sofern sich die Erzeugung von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen mit SUIT als praxistauglich erweist Statecharts wurden von Harel entwickelt sie erweitern Zustandsdiagramme um Hierarchieebenen und Parallelit t Sie wurden urspr nglich informell vorgestellt Eine erste formale Beschreibung erfolgte dann in Harel 1987 Zustandsdiagramme k nnen sich bei der Modellierung umfangreicher Benutzungsschnittstellen als problematisch erweisen da sie keine Hierarchie und keine Modularit t erm glichen Statecharts erweitern Zustandsdiagramme unter anderem um Hierarchie und erleichtern somit das Modellieren dynamischen Verhaltens von Systemen Die Einf hrung von Hierarchie in Statecharts verhinde
31. Zustand eine Maske zugeordnet werden Die Zuordnung wird in einer Maskentabelle erfasst 3 3 5 Dialogwechsel Wird ein Dialog verlassen um zu einem anderen zu wechseln bestehen bzgl der Behandlung des verlassenen Dialogs zwei grunds tzliche Alternativen 1 Die in ihm erfassten Daten werden verworfen oder best tigt dadurch ist er abgeschlossen 2 Wird der Dialog weder verworfen noch best tigt bleibt er offen Die Bearbeitung der Daten ist nur unterbrochen oder suspendiert Daher ist eine R ckkehr zu ihm m glich Wird der Dialog unterbrochen durch einen Dialogwechsel so wird der jeweils aktuelle Zustand zwischengespeichert Kehrt der Anwender zu ihm zur ck befindet sich der Dialog weiterhin in genau diesem gespeicherten Zustand Eine spezielle Variante besteht darin einen Dialog zu unterbrechen um eine neue Inkarnation desselben Dialogs mit anderen Daten zu erm glichen Die Anzahl der Inkarnationen eines Dialogs kann festgelegt werden 34 1 Ist sie O wird der Dialog bei einem Wechsel zu einem anderen Dialog abgeschlossen Der aktuelle Zustand wird nicht gespeichert bei einem erneuten Aufruf wird daher der Initialzustand wiederhergestellt 2 Ist sie maximal 1 wird immer nur die zeitlich letzte Inkarnation gespeichert so dass eine R ckkehr zu diesem Dialog m glich ist 3 Ist sie gt 1 ist die Festlegung einer Regel erforderlich nach der zu einem bestimmten Dialog zur ckgekehrt wird M gliche Altern
32. Zustands bergang Ereignis worauf der Zustands bergang reagieren soll angesehen und editiert werden A45 Action Property ber diese Property kann die Must have auszuf hrende Aktion bei einem Zustands bergang angesehen oder editiert werden A46 In Property Der hineinf hrende Zustand eines Must have Zustands bergang Zustands bergangs A47 Out property Der hinausf hrende Zustand eines Must have Zustands bergangs A48 Points Property Gibt eine Liste aller Knickpunkte Should have Zustands bergang eines Zustands bergangs A49 Gr e von Zust nden mit Durch das Ziehen mit dem Should have dem Mauscursor ndern Mauscursor an den Ecken eines Zustands kann die Gr e des Zustands ver ndert werden A50 Die Position eines Die Position eines selektierten Should have Zustandes ber Drag amp Zustandes kann ber Drag amp Drop Drop ndern ge ndert werden A51 Die Position eines Die Position eines selektierten Should have Startzustandes ber Drag amp Drop ndern Startzustandes kann ber Drag amp Drop ge ndert werden 45 A52 Die Position eines Die Position eines selektierten Should have Zustandes ber Drag amp Zustandes kann ber Drag amp Drop Drop ndern ge ndert werden A53 Die Position eines Die Position eines selektierten Should have Zustands bergangs ber Zustands bergang kann ber Drag Drag amp Drop ndern amp Drop ge
33. angelegt bekommen haben und den Designer Ansicht f r diese neue Klasse sehen 4 2 Erzeugen eines Startzustand Bevor Sie einen Startzustand erzeugen k nnen m ssen Sie ein Zustandsdiagramm erzeugt haben Siehe 4 1 Offnen Sie dieses Zustandsdiagramm in seiner Designer Ansicht Um nun einen Startzustand per Drag amp Drop zu erzeugen gehen Sie wie folgt vor 1 W hlen Sie aus der Toolbox unter der Kategorie Zustandsdiagrammeditor Elemente das Element Startzustand aus Ea Toolbox 32 Zustandsdiagrammeditor Elemente Rh Zeiger 5 Zustand E Startzustand 5 Zustandsuebergang xogqjooL 127 2 Ziehen Sie nun per Drag amp Drop auf ihre Zeichenfl che einen Rahmen der die Gr e und Position ihres Startzustands beschreiben soll Fallstudie CSharp Microsoft Visual C NET Entwurf Zus Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten E a w sugg De Toolbox n X Startseite Pizzaservice cs Entwurf An Zustandsdiagrammeditor El K Zeiger Zustand Ed Startzustand Zustandsuebergang A A nn nenn 3 Beim Loslassen der Maus also beim best tigen des Drag amp Drops sollte ihr Startzustand erzeugt worden sein Fallstudie CSharp Microsoft Visual C NET Entwurf Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten T a ad K v gt Toolbox q x Startseite Pizzaservice cs Entwurf Zustandsdiagrammeditor El RK Zeiger ES Zustand g8
34. die M glichkeit ihr Zustandsdiagramm zu entwerfen Wenn Sie wie empfohlen mit CF Projekten arbeiten k nnen Sie den Zustandsdiagramm Projektltem Template f r C Projekte installieren und ein Zustandsdiagramm per Template erzeugen lassen Die Installation des C Templates finden sie in Abschnitt 2 2 1 beschrieben Um ein Zustandsdiagramm per Template zu erzeugen gehen Sie wie folgt vor 1 W hlen Sie folgende Men aus Datei gt Neues Element hinzuf gen Datei Bearbeiten nsicht Projekt Erstellen Debuggen Neu gt ffnen gt Schlie en en Neues Element hinzuf gen Stro Umschalt 4 2 Es erscheint nun ein neues Dialog in dem Sie eine Liste der Kategorien sehen W hlen Sie aus dieser Liste folgenden Pfad Lokale Projekte Zustandsdiagramm W hlen Sie danach die Vorlage Benutzerschnittstellen Zustandsdiagramm aus 126 Neues Element hinzuf gen Fallstudie CSharp Kategorien vorlagen Lokale Projektelemente 3 Benutzeroberfl che Y Code Benutzerschnittstellen E Daten Zustandsdiagramm Y web 3 Dienstprogramm 3 Ressourcen 3 Zustandsdiagramm Zustandsdiagramm um den Ablauf einer Benutzerschnittstelle zu modellieren Name Zustandsdiagrammi cs Abbrechen Hilfe 3 Geben Sie nun einen Namen f r ihr Zustandsdiagramm ein und best tigen den Vorgang mit einem Klick auf den Button ffnen Sie sollten nun eine Zustandsdiagramm Klasse in ihrem Projekt
35. erzeugen zu finden sein a Name Zustandsdiagramm2 B DynamicProperties 3 Klicken Sie auf die Option Simulieren 8 Jal M gt als BMP speichern 137 4 Sie sollten nun das Simulationsfenster sehen in der Sie ihr Zustandsdiagramm Modell zu sehen ist Simulation ER Run W Start Zur ck Click goBackKundeToStart emdAngsteisverwallung Click show _angebotssuchel Bestellung Piz emdKundenverwaltung Click show_kundensucheO zaservice cs Zur ck Click goBaciAngebolTostaril gt Bereit zur 5 Bereit zur dAngebofSuchen Click 7 sh botssuch Angebotssuche a aaa ia i BUGA des Kundensuche Angebot Ange Kunde Kunden botssuche cs suche cs Jayansuapuny Toys YOJO Vayansapunypus Quauyaune Sunaysad XI AOP abbrechen CIERT canoslBestellungl le BungegsegTmous YONI Bunye Seg po fen Click Tkunden_suchen 5 Zum Ausf hren der Simulation dr cken Sie auf Run Nun sollten Sie ihre Benutzungsschnittstelle durchsimulieren k nnen Simulation Tipp Sie k nnen das Simulationsfenster w hrend der Simulation schlie en ohne das die Simulation abgebrochen wird So k nnen Sie dem Kunden ein Prototyp vorf hren ohne Ihn mit dem Zustandsdiagrammmodell zu konfrontieren 138 Klassendiagramm Zustandsdiagramm E Class Component SP ZustandsdiagrammElementContainer Zustand
36. modelliert wurde Zustandsdiagramm Designer Legende A erzeugt B B A benutzt B B benutzt A B A benutzt B Abb 24 Zusammenspiel der SUIT Komponenten 50 In Abb 24 erkennt man dass SUIT sich aus 3 Komponenten der Zustandsdiagramm Komponente Codegenerierungskomponente und der Simulationskomponente zusammensetzt Die GUI Designer Komponente des Net Frameworks wird von der Zustandskomponente immer dann mitbenutzt wenn der Anwender aus seinem Zustandsdiagramm heraus den GUI Builder aufrufen will Dies geschieht zum Beispiel dann wenn der Anwender einem Zustand eine GUI Maske zuordnen will Durch das Einbinden von SUIT ber Bibliothekenverweise an das Anwender Projekt bekommt der Anwender die M glichkeit Zustandsdiagramme in Anwendungscode zu erzeugen Dieser Code der in einer beliebigen Net Sprache geschrieben sein kann wird durch die Zustandsdiagramm Komponente als grafisches Zustandsdiagramm umgesetzt und im Zustandsdiagramm Designer angezeigt Dieses Net sprach bergreifende Einlesen und Speichern von Code ist dank dem CodeDomsSerializer m glich der in Net f r jedes Objekt dass das IComponent Interface implementiert ein CodeDom Objekt erzeugen und dieses dann serialisieren kann Ein CodeDom Objekt ist ein Objekt Model das Quellcode repr sentiert Es sprachunabh ngig konzipiert vergleiche Kapitel 6 Der Zustandsdiagramm Designer ist Bestandteil der Zustandsdiagramm Komponente und bietet dem Anwender die M
37. ndert werden A54 Verschieben von Ein Zustand kann ber Drag amp Drop Should have Zust nden auf der Zeichenfl che hin und her verschoben werden A55 Speicherung vom Erstellte Zustandsdiagramme Nice to have Zustandsdiagramm als k nnen als bmp Datei gespeichert Bilddatei werden A56 Speicherung von Erstellte Zustandsdiagramme Must have Zustanddiagramm als k nnen als Code gespeichert werden Code A57 nderung im nderung im Should have Zustandsdiagrammcode Zustandsdiagrammcode f hren zu Reverse Engeneering nderungen in Zustandsdiagramm Editor Ansicht A58 Vergr ern des Das Zeichenblatt kann bei Bedarf Should have Zeichenblattes vergr ert werden A60 Drucken eines Erstellte Zustandsdiagramme Nice to have Zustdandsdiagramms k nnen seitenorientiert gedruckt werden A61 Simulieren eines Zustandsdiagramme k nnen Must have Zustandsdiagramms simuliert werden A62 Loggen im Alle Aktionen werden zur bersicht Should have Simulationsmodus ausgegeben A63 Simulationsansicht Es gibt eine Simulationsansicht in Nice to have der das zu simulierenden Zustandsdiagramm dargestellt wird Hier werden alle aktiven Zust nde farblich hervorgehoben A64 Scrollen Wenn der Zeichenbereich des Must have Zustanddiagramms gr er ist als der Anzeigebereich des Monitors erscheinen Scrollbalken die ein Scrollen des Anzeigebereichs des aktuellen Zustandsdiagramms auf einem anderen Anzeigebereich des Zustandsdiagramms erm gliche
38. sich in die Entwicklungsumgebung integrieren Durch diese Integration in die Entwicklungsumgebung soll der Anwender die M glichkeit haben nicht noch extra ein weiteres zu erlernendes eigenst ndiges Programm zu bedienen sondern in seiner ihm mehr oder minder wohlbekannten Entwicklungsumgebung eine Zusatzkomponente zu erhalten die ihm in seiner Entwicklungst tigkeit hilft SUIT verfolgt daher den Ansatz sich m glichst nahtlos in die Entwicklungsumgebung zu integrieren und sich in der Bedienung und Handhabung hnlich wie die Entwicklungsumgebung selbst zu verhalten Diese Integration ist jedoch nur m glich wenn die Entwicklungsumgebung eine Integration erlaubt sie durch geeignete Schnittstellen unterst tzt Microsofts Visual Studio NET bietet f r die Integration das Automatisierungsmodell EnvDTE und die Design Time Architektur in NET erlaubt es auf Designerfunktionalit ten wie z B die GUI Builder Funktionalit ten von Visual Studio NET zuzugreifen siehe Kapitel 6 Durch die Integration von SUIT in Visual Studio NET ist die M glichkeit gegeben ber diese Schnittstellen auf die Entwicklungsumgebung selbst bzw auf die in Visual Studio NET integrierten GUI Builder zuzugreifen Somit muss eine wichtige Komponente f r SUIT nicht mehr selbst entwickeln werden Wie sich SUIT nun in die bestehende NET Architektur integriert zeigt Abb 23 48 Microsoft Visual Studio Einbinden von NET Bibliotheken die im Anwendg pr
39. tze die auf den ersten Blick alle ihre Berechtigung haben A Code f r den Aufruf der Folgemaske wird in der Aktion selbst generiert B Code f r den Aufruf der Folgemaske wird in der vorigen Maske generiert C Zur Laufzeit wird mit Hilfe des Zustandsdiagrammmodels bestimmt welche Folgemaske aufgerufen wird F r die Generierung nach M glichkeit A sprich folgendes in Abb 55 sind einige Aktionen mit den Namen AnzeigeKundenliste AnzeigeBestellungsliste AnzeigeBestelldetails und AnzeigeKunde zu sehen Diese Aktionen sind von den Namen her so gew hlt dass der Schluss nahe liegt diese Aktionen sorgen f r den Aufruf der entsprechenden Folgemaske wie z B die Kundenliste oder die Bestellliste Der Code f r den Folgemaskeaufruf sollte also bei diesen Aktionen idealerweise in der Aktion selbst generiert werden Nur im Umkehrschluss sind solche Funktionen eigentlich berfl ssig wenn sie als Funktionalit t nur den Aufruf der Folgemasken haben Diese Informationen sind im Modell schon in den Transitionen durch deren Folgezustand enthalten und m ssen nicht durch eine entsprechend benannte Aktion zus tzlich in das Modell eingebaut werden Da jedoch in der aktuellen SUIT Zustandsdiagramm Notation zu jeder Transition ein Ereignis und eine Aktion angegeben werden muss sind AnzeigeKundeliste AnzeigeBestellungsliste AnzeigeBestellungdetails und AnzeigeKunde notwendig damit eine dieser Transitionen angegeben werden kann Die Not
40. ufe einer Benutzungsschnittstelle mit Hilfe von Zustandsdiagrammen modelliert werden Wenn also Masken Zust nde und die Pfeile zwischen den Masken die Zustands berg nge abbilden l sst sich das Modell in Abb 1 wie folgt in die Form eines Zustandsdiagramms berf hren o Abb 2 Zustandsdiagramm Literatur Suche Das Zustandsdiagramm in Abb 2 beschreibt zwar die Reihenfolge der Dialogabl ufe wie sie im Modell in Abb I enthalten sind aber nicht den kompletten Sachverhalt der dort dargestellt ist Die Information unter welchen Bedingungen ein Dialogwechsel stattfindet ist nicht in Abb 2 beschrieben Denn aus Abb 1 ist ersichtlich dass beim Klicken auf dem Button Suche ein Dialogwechsel zu der Folgemaske Buchliste erfolgt und beim Klicken auf den Button Details die Maske Buchinfo angezeigt werden Gerade diese Information fehlt jedoch im Zustandsdiagramm in Abb 2 Um sie soll es nun angereichert werden Dies ist m glich denn in einem Zustandsdiagramm k nnen Ereignisse definiert werden die einen Zustandswechsel hervorrufen Das Zustandsdiagramm von Abb 2 soll also um die Informationen der Ereignisse erg nzt werden dies wird in Abb 3 dargestellt o Details_click Abb 3 Zustandsdiagramm Literatur Suche um die Ereignisse angereichert Vergleicht man das Modell aus Abb 1 und das nunmehr entstandene Zustandsdiagramm Abb 3 erkennt man dass dieses immer noch nicht alle Details abbildet Was fehlt sind die
41. und Angebotsverwaltungswerkzeug wurden bereits mit SUIT in Form von Zustandsdiagrammen und Fensterentw rfen modelliert siehe Abb 36 und Abb 41 Daher w re es sinnvoll diese Ergebnisse als zusammengesetzte Zust nde also Zust nde die die bereits modellierten Zustandsdiagramme repr sentieren in das Zustandsdiagramm des Kombi Werkzeugs Bestellverwaltungskombiwerkzeug zu integrieren Die Verschachtelung von Zustandsdiagrammen und somit die Definition von zusammengesetzten Zust nden ist eine Anforderung die wir erkannt haben Sie tr gt ganz entscheidend zur Reduzierung der Komplexit t eines Modells bei und unterst tzt den Werkzeuggedanken des WAM Ansatzes Die bereits identifizierten Werkzeuge werden im 86 Zustandsdiagramm des Gesamtsystems klar erkennbar da sie als zusammengesetzte Zust nde im Modell visualisiert werden Die Verschachtelung von Zustandsdiagrammen ist im Rahmen der vorliegenden Implementierung von SUIT noch nicht m glich Die Realisierung dieser Anforderung wird im Rahmen der n chsten Version geplant 7 3 7 Integration der Werkzeuge zum Gesamtsystem Die Vorgehensweise der Untergliederung eines Gesamtsystems in Teilwerkzeuge hat sich wie bereits erw hnt in der Softwareentwicklung bew hrt Sie f rdert die Verst ndlichkeit verringert die Komplexit t eines Systems und erh ht die Wiederverwendbarkeit Das Pizzaservicesystem wurde in die zwei einfachen elementaren Werkzeuge Kunden
42. wesentlich da sie die Weichen f r das weitere Vorgehen stellt Denn mit der Entscheidung f r einen bestimmten GUI Builder f llt die Entscheidung f r eine bestimmte Entwicklungsumgebung f r SUIT 18 2 4 1 Jigloo CloudGardens Jigloo GUI Builder Jigloo 3 9 5 ist ein Add In f r Eclipse Eclipse ist ein Open Source Projekt Die Entwicklungsumgebung ist frei verf gbar und gut f r die Entwicklung von Javaprogrammen geeignet Eclipse wird nicht installiert sondern kann als Java Anwendung sofort ausgef hrt werden Oberfl che Java NewJFrame java Eclipse Platform u lal xi Eile Edit HTML Tidy Source Refactor Navigate Search Project Run PHP Apache Window Help Sao Er abbl 0 Q JEFO a 7 Imal zi IS O9 vr E ava gt B foo php 5 NewJFrame java X a Containers Components More Components Menu Custom MEN E XO 23 4 Em g B BE S Extra components gt Non visual components F H this JFrame Border w ag m E a m mi Properties Layout Events Properties Value xl E size 332 270 iv text jButton1 k u toolTipText vpublic class NewJFrame extends javax swing JFrame Expert action bnbnb v z k x actionCommand n TESSE main method to display this JFrame actionMap javax swing ActionMa y ee static void main String args allgnmentX oo E z s E alignmenty 0 5 NewJFrame inst new NewJFrame i O fl inst setVisible true autoscro 988 borderPainted Y t
43. 0 aspx 12 01 07 WindowBuilderPro http www windowbuilderpro com 13 01 07 VisualEditor http www eclipse org vep WebContent main php 13 01 07 113 Abbildungsverzeichnis ADO TESTA Rank 8 Abb 2 Zustandsdiagramm Literatur Suche 2 22 td 9 Abb 3 Zustandsdiagramm Literatur Suche um die Ereignisse angereichert 10 Abb 4 Zustandsdiagramm Literatur Suche um die Maskenskizzen angereichert 10 Abb 5 Zustandsdiagramm Literatur Suche um die Masken angereichert u 11 Abb 6 Zustandsdiagramm Literatur Suche um die Aktionen angereichert 12 Abb 7 Fassade sa ae enden ie leise 13 ADb Einsatz von SUIT isc 15 Abb 9 M0 in BI nasse Tegernsee 19 Abb210 Die Palette helles ii A EAE EASA 20 Abb 11 Property Fenster in Jiglo0 unse a 20 Abb 12 Von Jigloo generierter Code Ausschnitt einer GUI mit 2 JButtons u 21 Abb 13 Code Ausschnitt einer GUI mit 2 JButtons und ActionListener in Jigloo 22 Abb 14 integrierter GUI Builder von Microsoft Visual Studio Net 2003 ursn seen 23 Pl Pogeiker 2a Inn neiaeslie 25 ADD LO VISO A AR 26 Abb 17 Interaktionsdiagramm eines Geldausgabeautomaten aus Denert 1992 32 Abb 18 Spezifikation einer Aktion mittels Entscheidungstabelle Denert 1992 36 Abb 19 Zustand iii ea 39 Abb 20 Startz stand arte le Deals ee o dd 39
44. 31 41 48 49 50 51 52 59 61 65 93 100 GUEKOMpo ente iia A A Ruine 10 20 21 22 23 24 117 NAM Te ee ee 34 35 107 110 111 Interaktionsdiagramm 2224444444HHn nennen nennen en en nenn nn en nenn 31 32 33 34 37 107 108 109 Interaktionskomponente 4s4444sssenennenenanannnenenenannn nennen nn 13 31 52 53 54 99 112 J UELLE e rs E er ee ee nee rennen 19 20 21 22 K Klassendiagramm iu A HEBT BIER 57 Kombi Werkzeug 2 5 EEE ER Ri IH 15 78 86 87 Komponente orrei m a anne ne Raten HART ine Fre 4 48 49 50 51 52 53 54 Konsistenzerhaltung 4 44444444 nannnenennnnnennenenannnnn nennen 104 105 106 107 109 111 M PE nee nen ne ren 8 9 12 14 18 21 30 34 38 39 43 44 46 51 65 80 81 82 83 84 86 101 102 103 104 109 110 111 Modellierung reisean an kana Ara iA PE A LAKAN ESAERA KE 7 9 11 14 15 17 26 30 31 34 37 40 80 92 93 94 95 97 100 104 105 109 112 N Navigation se ON 30 38 Notati n reis irrita ad hc 15 32 37 39 O 0107 16 1110 microcadena rante tadas anos 11 12 17 24 38 P Proto png sierra ana ala IRE Maren a DA 14 92 99 107 108 110 111 S SINUlAHON sn nenne 14 18 31 38 41 46 49 51 52 54 58 88 89 92 93 94 95 96 99 104 106 108 109 110 111 SimulatidnSanSiCAt umi irar a aan aaa A a aiaa ae aa aeeti iaaa 46 56 89 Sprach nabhang OKOE lion een E nee ange E et re 61 63 SIEPA Ke u
45. Abb 21 Zustandsubergane cn ee 40 Abb 22 Rekursiver Zustandsubersangs iran 40 Abb 23 Integration von SUIT in die Microsoft Visual Studio Net Architektur 49 Abb 24 Zusammenspiel der SUIT Komponenten u 22442204422sernnennnensnnennnennnn essen 50 Abb 25 Vererbungsbaum der Elemente in SUIT Zustandsdiagramm Designer 31 Abb 26 Architektur des Zielsystem mit Fassade oooooonnccnnnnnnococonnnonnnonnncnn nono nnnnnnnrnn corn n cnn ncnnnno 53 Abb 27 Ausschnitt aus dem Klassendiagramm 2240022440022000sssnsnnnnnnnnnnnnnnennnnnannnn 57 Abb 28 Toolbox vor dem Hinzuf gen der Toolboxitems f r das Zustandsdiagramm 60 Abb 29 Toolbox nach dem Hinzuf gen der Toolboxitems f r das Zustandsdiagramm 60 Abb U Zustandschasramm isa 63 Abb 31 Eigenschaftsfenster im Zustandsdiagrammeditor u 220s2ner sn snnernnennner nennen 64 Abb 32 Visual Studio net in der Ansicht von SUIT u 2220022002200r se nnnennnnennersnnennnen 67 Abb 33 SUIT Zustandsdiagramm mit DragFeedback 2202200s2ner see ennennnnennnen seen 12 ADD34 Dragfeedback 2 2 A Eee 73 Abb 35 Anwendungsfalldiagramm Pizzaservice uuussuessnersnnesnnennnnennnnnsnnennnennnnennnen nennen 79 Abb 36 Diagramm der Benutzungsschnittstelle des Angebotsverwaltungswerkzeugs 80 Abb 37 Maskeder Altigebotsuches aa sans am ae 81 ADb 38 Maske der Angeb tanze
46. Bereichung f r die Benutzer Entwickler Kommunikation dar Prototypen k nnen erstellt werden von Benutzern getestet und falls Verbesserungsw nsche existieren entsprechend ge ndert werden Nur wenn die Erstellung von Prototypen schnell genug ist sind mehrere Prototypingzyklen m glich in denen der Prototyp iterativ verbessert wird Sind z B nderungen erforderlich so kann das modellierte Zustandsdiagramm in SUIT angepasst werden und schon hat man einen neuen Prototyp den man dem Kunden vorzeigen kann Die Fassaden Genierung hingegen nimmt dem Entwickler Programmieraufwand ab und kann damit dazu beitragen Kosten und Zeit zu sparen Die Fassaden Klasse stellt eine Schnittstelle zwischen der Funktions und Interaktionskomponente dar und bietet somit eine M glichkeit den erzeugten Prototypen weiter zu entwickeln so dass der Prototyp nicht als Wegwerfprototyp angesehen werden muss Die Fassaden Genierung ist so angelegt dass bei nderungen im Zustandsdiagramm Modell und erneuten Genierung der Fassade bereits in der Fassaden Klasse von Anwender hinzuimplementierter Code nicht verloren geht So bietet SUIT nicht nur ein Tool zum schnellen Erzeugen von explorativen Prototypen von Benutzungsschnittstellen sondern diese Prototypen sollen und k nnen sogar weiter entwickelt 99 werden Diese M glichkeit ist ihm gegeben da SUIT sich in Visual Studio Net integriert und somit der Entwickler schon in seiner Entwicklungsumgebung ist Die Vort
47. ControlEvent ctionHelper ControlEventActionHelper Class GUIReferenzConverter 57 GUIRefHelper GUIRefHelper 183
48. Die Scroll Position auf die umgerechnet werden soll Diese Position ist bereits vom Zoom Faktor ber cksichtig worden und kann einfach zum Punkt addiert werden Float Zoom der Zoom Faktor auf der umgerechnet werden soll Color backColor Die Hintergrundfarbe die hinter den Elementen sind Wird oft gebraucht f r das Reverisble Feedback Tabelle 6 Parameter von DrawCreateDragFeedback delete public virtual void delete Zustandsdiagramm myDiagram IDesignerHost myHost Die Methode delete ist virtual d h sie kann in einer abgeleiteten Klasse berschrieben werden delete dient dem L schen einer Komponente Das L schen ist Komponentenabh ngig so m ssen z B beim L schen eines Zustands alle hinein und hinausf hrenden Zustands berg nge mitgel scht werden Wird die Methode delete in der Unterklasse nicht berschrieben so wird die Funktionalit t von delete geerbt Die vererbte delete Methode bewirkt dass eine Komponente nur sich selbst l scht 68 Parameter Beschreibung Zustandsdiagramm myDiagram Das Zustandsdiagramm Object von dem die Komponente gel scht werden soll IDesignerHost myHost myHost ist ein Objekt zum Verwalten von Designertransaktionen und Komponenten und Komponenten Tabelle 7 Parameter von delete initialize public abstract bool initialize Design ZustandsdiagrammDesigner designer String name Point startPunkt Point endPunkt ZustandsdiagrammElement star
49. Druckansicht Von gro er Bedeutung ist auch die M glichkeit ein Diagramm in Microsoft Office Word Dokumente zu integrieren und von dort aus direkt zu ndern Ein wesentlicher Nachteil von Visio liegt darin dass Visio auch f r nichtkommerzielle Zwecke nicht frei erh ltlich ist 2 5 3 Folgerung Im Rahmen der Analyse der Zustandsdiagramm Editoren haben wir eine gr ere Menge Anforderungen f r die Eigenentwicklung eines Werkzeuges erkannt Im Folgenden werden die in Together und Visio bereits identifizierten Anforderungen die f r die Realisierung des Tools dieser Bachelor Arbeit sinnvoll sind aufgelistet Jede Anforderung wurde nach den Kriterien must have should have oder nice to have klassifiziert Abk rzung Beschreibung der Anforderung Erkanntin Klassifikation Rastermuster Rastermuster zum Positionieren Together Should have von Zustandsdiagrammelementen Notizfelder Kommentare oder Beschreibungen Together Nice to have k nnen in Notizfelder eingetragen werden 27 Description Jeder Zustand hat einen Together Should have Property Description Property in dem zustandsspezifische Informationen eingetragen werden k nnen Platzieren von Zust nde k nnen per Drag amp Drop Together Should have Zust nden per Verfahren auf der Zeichenfl che Drag amp Drop platziert werden Platzieren von Zustands berg nge k nnen per Together Should have Zustands berg ng
50. Funktionsf lle von Together und Visio bietet eine Vielzahl von Gesichtspunkten um neue Anforderungen zu gewinnen 2 5 1 Together 6 2 Borland Together 6 2 test File Edit Search View Project Run Deploy Selection Tools Help brsBolad 201 ERRE PEST D DiD O worspacs v JE Explorer m o x 32 Designer w alasa Beer E Pr Aaz Eo E Y test ul 83 lt default gt Ol amp untitled Oli R E al af ej 5 Editor a P En o Progress I insert int car Abb 15 Together Together ist ein kostenpflichtiges UML Modellierungstool von Borland Es ist ein m chtiges Tool das mehrere Diagrammtypen unterst tzt und dem Entwickler Code Generierung in mehreren Programmiersprachen bietet 25 Im Rahmen unserer Bachelor Arbeit betrachten wir jedoch nur die Modellierung in Form von Zustandsdiagrammen in Together Der Zustandsdiagrammeditor ist sehr benutzerfreundlich Rastermuster dienen der Orientierung beim Zustandsmodell Entwurf Es bietet u a Notizfelder zum Hinzuf gen von Kommentaren Description als Properties f r einen Zustand als weiterer Kommentarm glichkeit an etc Praktisch ist auch das Anlegen von Zust nden da die Gr e und Position bereits w hrend der Platzierung per Drag and Drop festgelegt werden kann Um Zustandsdiagramme m glichst bersichtlich und aussagekr ftig zu gestalt
51. INDOWS Microsoft NET CHWINDOWSIMirrasnft NFT System Security System ServiceProcess dll System Web dll System Web Mobile dll System Web RegularExpressi System Web Services dil System Windows Forms dll System Xml dll vJ5BrowserStubLib vjscor vJSharpCodeProvider vislih W hlen Sie SUIT dll durch Durchsuchen Ausw hlen A f e Kompor T Konpenentenname m lon T Ok Abbrechen Hilfe 4 Best tigen Sie Ihre Auswahl mit Klicken des OK Buttons Nun sollte SUIT in ihrem Projekt eingebunden sein 125 4 Bedienung des SUIT Zustandsdia grammeditors Der SUIT Zustandsdiagrammeditor in der aktuellen SUIT Version Vers 1 00 unterst tzt alle Net Sprachen Zustandsdiagramm Klassen k nnen mit dem Editor in allen Sprachen erzeugt werden jedoch geht das Generieren der Fassade und die Simulation in der vorliegende Version nur mit C Projekten Daher wird empfohlen diese SUIT Version einschlie lich nur in C Projekten zu verwenden 4 1 Erzeugung eines Zustandsdiagramm Um ein SUIT Zustandsdiagramm zu erzeugen erstellen Sie eine Klasse die von SUIT ZustandsdiagrammEditor Zustandsdiagramm erbt Um von SUIT Zustandsdia grammEditor Zustandsdiagramm erben zu k nnen sollten Sie die SUIT Klassenbibliothek in ihrem Projekt eingebunden haben siehe hierzu Abschnitt 3 ffnen Sie diese Klasse in der Design Ansicht mit Visual Studio Net 2003 um den SUIT Zustandsdiagrammeditor aufzurufen Sie haben nun
52. Kundensuche cs lt gt Be a a a a a 8 Zustandsdiagrammi cs E App ico Offset E AssemblyInfo cs a Fassade cs 8 Pizzaservice cs gt Eigene Benutzersteuer 7 Aufgabenliste 2 Buildfehler angezeigte Aufgaben gefiltert Zwischenablagering MH la Beschreibung Allgemein 4 Ausgabe xl an a x Bereit Abb 32 Visual Studio net in der Ansicht von SUIT 67 Parameter Beschreibung ZustandsdiagrammElement startElement Das ZustandsdiagrammElement das an der Position des startPoint angesiedet ist Ist null wenn an den startPoint kein Element vorhanden ist Point startPoint Der Start Punkt an dem der Drag begann Dieser Punkt ist dem DragControl gebunden und nicht global daher muss er noch mit screenOffset addiert werden ZustandsdiagrammElement endElement Das ZustandsdiagrammElement das an der Position des endPoint angesiedet ist Ist null wenn an den endPoint kein Element vorhanden ist Point endPoint Der End Punkt an dem der Drag endet Dieser Punkt ist dem DragControl gebunden und nicht global daher muss er noch mit screenOffset addiert werden Point myScreenOffset Dieses Offset kann zu den Point Koordinaten addiert werden um sie zu den globalen Koordinaten zu konvertieren so dass mit diesen Koordinaten die DrawReversible Methode in ControlPaint direkt verwendet werden kann Point scrollPos
53. Noura Haji amp Vinh Phu Phan Erzeugung von Benutzungsschnittstellen auf Basis von Zustandsdiagrammen und Fensterentw rfen Bachelorarbeit eingereicht im Rahmen der Bachelorpr fung im Studiengang Angewandte Informatik am Department Informatik der Fakult t Technik und Informatik der Hochschule f r Angewandte Wissenschaften Hamburg Betreuender Pr fer Prof Dr J rg Raasch Zweitgutachter Prof Dr rer nat Christoph Klauck Abgegeben am 19 Januar 2007 Noura Haji amp Vinh Phu Phan Thema der Bachelorarbeit Erzeugung von Benutzungsschnittstellen auf Basis von Zustandsdiagrammen und Fensterentw rfen Stichworte Benutzungsschnittstelle GUI Zustandsdiagramme Prototyping Kurzzusammenfassung Dem Entwickler bei der Erstellung von Benutzungsschnittstellen eine angemessene Unterst tzung zu bieten ist ein wesentliches Bestreben dieser Bachelor Arbeit Bisher ist die Entwicklung von Benutzungsschnittstellen mit erheblichem Aufwand verbunden Gr nde daf r sind fehlende Methoden und unzureichende Werkzeuge In dieser Bachelor Arbeit wird die Methode der Erzeugung von Benutzungsschnittstellen mit Hilfe von Zustandsdiagrammen und Fensterentw rfen vorgestellt F r die Umsetzung dieser Methode wurde eine L sung entwickelt die die Funktionalit t eines GUI Builders mit der eines Zustandsdiagrammeditors zweckm ig kombiniert und beide Komponenten in geeigneter Wiese in den Softwareentwicklungsprozess integriert Diese L sung hei
54. Suchen Click suchen dia ai Details cs Zurueck Click zurueck Abb 60 Inkarnationsbeispiel Zustandsdiagramm Abb 60 beschreibt eine allgemeine Suche In Dialog Suche wird nach Eingabe eines Suchwortes und Bet tigen des Suchbuttons in die Folgemaske SuchErgebnis gewechselt In dieser Maske werden alle passenden Suchergebnisse aufgelistet Nach Auswahl eines 110 bestimmten Suchergebnisses und Bet tigen der Taste Details wird zur Detailansicht gewechselt Beim Zur ckkehren in dem Dialog der Suchergebnisse ist es w nschenswert wenn dieser Dialog noch offen ist so dass eine R ckkehr zu den in ihm bereits angezeigten Suchergebnissen m glich ist Die Daten der Suche d rfen also nicht verloren gehen Es muss der jeweils aktuelle Stand zwischengespeichert werden Kehrt der Benutzer zu ihm zur ck befindet sich der Dialog weiterhin in genau diesem gespeicherten Zustand Um dies erreichen zu k nnen muss f r den Dialog der Suchergebnisse eine Inkarnation definiert werden Mit der Definition von Inkarnationen wird vorgegeben ob beim Unterbrechen eines Dialogs der jeweils aktuelle Zustand zwischengespeichert wird oder nicht Hier in unserem Beispiel z B ist es sinnvoll beim Zur ckkehren von Details zu SuchErgebnis die Suchergebnisse noch anzeigbar sind Im Dialog Details k nnen hingegen die Daten also die Anzeige der Details eines Suchergebnisses verloren gehen also nicht zwischengespeichert werden Es muss also die M glichkeit
55. Vorteil der Sprachunabh ngigkeit Werden Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen beschrieben Kann das entstandene Modell in einer beliebigen Programmiersprache umgesetzt werden Im Rahmen dieser Bachelor Arbeit beschr nken wir uns jedoch auf eine bestimmte Programmiersprache Interaktionskomponente Fassade zeigelnfoFuerBuch suche Funktionale Komponente Abb 7 Fassade Zustandsdiagramme besitzen also gen gend Ausdruckskraft um das dynamische Verhalten von Benutzungsschnittstellen vollst ndig zu spezifizieren In einem Zustandsdiagramm stehen die Interaktionen des Benutzers mit dem System ihre Reihenfolge und die von ihm wahrnehmbaren Zustands nderungen im Vordergrund Eine GUI befindet sich immer f r einen gewissen Zeitraum in einem bestimmten Zustand Ein Zustand markiert eine Stelle im Dialogablauf an der das System auf eine Eingabe des Benutzers wartet Benutzereingaben wie z B das Dr cken eines Buttons mit der Maus l sen Ereignisse aus Ereignisse sto en Aktionen an Nach Ausf hrung der Aktion gelangt die Benutzungsschnittstelle in den Folgezustand Die Methode Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen zu modellieren und das entstandene Zustandsdiagramm zu simulieren und aus dem Modell Code in Form einer Fassade automatisch zu generieren ist jedoch in der verf gbaren Literatur nicht beschrieben Daher liegt die Vermutung nahe dass noch kein
56. Zeiger 8 Zustand amp Startzustand 2 Zustandsuebergang zustand Alternativ k nnen Sie ein Zustand durch ein Doppelklick auf des Element Zustand in der Toolbox Kategorie Zustandsdiagrammeditor Elemente erzeugen 129 4 4 Erzeugung eines Zustands bergang Bevor Sie einen Zustands bergang erzeugen k nnen m ssen Sie ein Zustandsdiagramm erzeugt haben Siehe 4 1 ffnen Sie dieses Zustandsdiagramm in seiner Designer Ansicht Sie sollten au erdem wenigsten einen Zustand oder Startzustand erzeugt haben siehe Abschnitt 4 2 und 4 3 um rekursive Zustands berg nge und wenigsten zwei Zust nde haben um normale Zustands berg nge erzeugen zu k nnen Um einen Zustand bergang zu erzeugen gehen Sie wie folgt vor 1 W hlen Sie aus der Toolbox unter der Kategorie Zustandsdiagrammeditor Elemente das Element Zustands bergang aus Toolbox ax Zustandsdiagrammeditor El RK Zeiger ES Zustand Ed Startzustand 2 Zustandsuebergang Ziehen Sie nun per Drag amp Drop auf ihre Zeichenfl che einen Zustands bergang Es kann sich hierbei um einen rekursiven oder normalen Zustands bergang handeln Der Zustands bergang muss in die Pfeilrichtung gezogen werden 73 Fallstudie CSharp Microsoft Visual C NET Entwurf Zustandsdiagramm1 cs Entwurf Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe oa ad NQ Debug ob Toolbox x Startseite Pizzaservice cs E
57. Zustand berg nge aus und erm glichen somit das Navigieren durch das Interaktionsdiagramm Diese kann erfolgen durch 33 Das Bet tigen einer Funktionstaste Durch Men auswahl Durch Eingabe eines Kommandos in einem bestimmten Feld Oder implizit durch Dateninhalt die Steuerinformation liegt dabei meist in der Unterscheidung ob der Schl ssel eines Datenobjekts und oder der zugeh rige Fachinhalt eingegeben wurde oder nicht Denert 1992 Seite 132 Denert unterscheidet zwischen globalen virtuellen Tasten und speziellen virtuellen Tasten Die speziellen virtuellen Tasten sind nicht allgemein g ltig Sie werden in einer Entscheidungstabelle spezifiziert Globale virtuelle Tasten sind Virtuelle Tasten die unabh ngig vom aktuellen Zustand immer dasselbe bewirken wie z B das Vor und R ckw rtsbl ttern in Informationen oder den Aufruf der Hilfe Sie k nnen einmalig systemweit definiert werden In der Tabelle der globalen virtuellen Tasten werden die Standard Interaktionen und ihre Realisierung beschrieben es wird festgehalten welche Aktionen sie anstofen und in welchem Folgezustand sie das System berf hren Auf diese Weise m ssen wiederkehrende virtuelle Tasten nicht in jedem Zustand neu definiert werden die Interaktionsdiagramme werden somit nicht mit redundanten Informationen berladen 3 3 4 IAD Zust nde und Masken Bei der Modellierung einer Benutzungsschnittstelle in Form von Interaktionsdiagrammen kann jedem
58. agramm in Abb 35 entnehmen kann benutzen die Anwendungsf lle Angebot ndern Angebot anlegen und Angebot l schen den Anwendungsfall Angebot suchen Daher muss eine Angebotssuche ausgef hrt werden ehe eine weitere Aktion auf ein Angebot erfolgen kann Damit ist eine bestimmte Reihenfolge vorgegeben Wird nun dieser Ablauf durch ein Zustandsdiagramm beschrieben ergeben sich daraus vier Zust nde die wie folgt benannt werden k nnen bereit zur Suche Anzeige der Angebotsdaten bereit zum Angebotanlegen und bereit zur Angebots nderung Jedem Zustand ist eine Maske zugeordnet 3 Bereit zum cmdAnlegen Click geheZu_angebot_anlegen Er egen cmdAnlegen Click angebot_anlegen gt x bot ng 1 cmd bbrechen Click angebotanlegen_abbruch ae Bereit zur Bereit zur Anzeige der gt bot Angebitssuche cmdSuchen Click angebot_suchen gt Angebotsdaten A a O Pedo Angebotl nge le Angebot nge cmdSpeichern Click angebot_speichem Angebot nge botssuche cs cmdZurueck Click geheZu_Angebotsuche botsanzeige cs botspflege cs cmdAbbrechen Click angebotaenderung_abbrechen Deisplege e3 Abb 36 Diagramm der Benutzungsschnittstelle des Angebotsverwaltungswerkzeugs 80 Das Zustandsdiagramm der Benutzungsschnittstelle des Angebotsverwaltungswerkzeugs in Abb 36 wurde in SUIT erstellt Jedem Zustand inner
59. agramm wurde das dynamische Verhalten des Pizzaservicesystems beschrieben Hier wurden Zust nde und Zustands berg nge definiert Jedem Zustand wurde eine Maske zugeordnet die Zustands berg nge wurden mit Beschriftungen f r Ereignisse und Aktionen versehen Damit war der Prototyp fertig gestellt Im Rahmen dieser Fallstudie hat SUIT am Beispiel des Pizzaservicesystems eine gro e Praxistauglichkeit bewiesen Mit einem geringen Aufwand wurde aus dem Modell automatisch ein Prototyp erstellt Dar ber hinaus hat SUIT eine Fassade zur Weiterentwicklung automatisch generiert Wenn also der Prototyp nicht als Wegwerfsoftware realisiert wird Kann er zu einem ausgereiften System weiterentwickelt werden Es kann festgehalten werden dass SUIT mindesten f r Systeme der Gr enordnung des Pizzaservicesystems praxistauglich ist Die Praxistauglichkeit bei komplexeren Systemen muss noch im Rahmen gro er Projekte berpr ft werden Die in diesem Kapitel verwendete Vorgehensweise hat wie bereits erw hnt prim r das Ziel zu demonstrieren wie SUIT eingesetzt werden kann Der Anwendungsbereich des Pizzaservicesystems wurde hierf r nur grob analysiert F r einen Einsatz von SUIT f r das Erzeugen von Benutzungsschnittstellen in der Praxis ist eine detailliertere Anforderungsanalyse empfehlenswert als im Rahmen der Fallstudie durchgef hrt wurde Auf diese Weise k nnen Prototypen erfolgreich entwickelt werden die f rdernd in der Entwickler und B
60. aktionsdiagramm eignet sich zwar daf r die wesentlichen Abl ufe verst ndlich nachvollziehbar und bildhaft zu visualisieren Werden jedoch zu viele Details und Sonderf lle in einem Interaktionsdiagramm dargestellt kann es wie bereits erw hnt schnell unverst ndlich und un bersichtlich werden F r das Interaktionsdiagramm des Geldautomaten in Abb 17 sieht der von Denert verwendete Code Denert 1992 wie folgt aus Zustand Z1 Ger t geschlossen SK Scheckkarte pr fen Falls ok Ger t ffnen gt Z2 Falls nok gt Z1 Zustand Z2 Scheckkarte gepr ft Ghz Geheimzahl pr fen Falls ok gt Z3 Falls nok gt Z2 Abb Ger t schlie en gt Z1 Zustand Z3 Geheimzahl ok Kto Kontostand drucken gt Z3 Aus gt ZA Abb Ger t schlie en gt Z1 Zustand4 zahlungsbereit Bst Geld ausgeben Ger t schlie en gt Z1 Abb Ger t schlie en gt Z1 In Z1 z B ist nur die virtuelle Taste siehe Abschnitt 3 3 2 SK zul ssig Das Bet tigen dieser Taste st t die Aktion Scheckkarte pr fen an Wurde die Aktion erfolgreich ausgef hrt ok wird die n chste Aktion Ger t ffnen angesto en das System gelangt in den Folgezustand Z2 Ansonsten kehrt das System zu Z1 zur ck 3 3 2 Virtuelle Tasten Das Konzept der virtuellen Tasten beinhaltet jegliche Art dialogsteuernder Information Denert 1992 Die physische Realisierung einer virtuellen Taste kann unterschiedlich sein Virtuelle Tasten l sen
61. alten Es ist also m glich diese Informationen aus dem Model zu entnehmen um die Codegenerierung f r den Folgezustand also das Anzeigen der Folgemaske zu automatisieren Jedoch sind beim Generieren dieser Codestellen die f r das Aufrufen deren Folgemaske zust ndig sein werden einige Dinge zu beachten Wo soll der Code generiert werden In der Transition angebenden Aktion also in der dazugeh rigen Aktionsmethodendeklarationen der Fassade oder doch lieber in der Maske Klasse selbst Egal wo der Code hingeneriert wird beide Stellen h tten ihre Vor und Nachteile Um diese Vor und Nachteile zu erl utern soll folgendes Beispiel genutzt werden Abb 55 zeigt ein SUIT Zustandsdiagramm das das dynamische Verhalten einer kleinen noch unvollst ndigen Benutzungsschnittstelle beschreiben soll Hauptmen Bestellungsliste Bestellung Click 4nzeigeBestellungsliste l Hauptmen cs Bestellungsliste cs m O V i 14 V T 3 x poy V N E lt de 2 2 G u T E 5 y KundenListe 3 KundeBearbeiten Click 4nzeigeKunde KundenListe cs 2 0 BestellungDetails Click 4nzeigeBestellDetails KundeBestellung Bestelldetails Kunde cs BestellungDetails cs Kunde KundeBearbeiten Click AnzeigeKunde Speichern Click SpeichernKunde Kunde cs Qapunyulayalads y yay Ulayorado gt 55 SUIT Zustandsdiagrammbeispiel In Abb 55 wird eine Benutzungsschnittstelle modelliert die mit
62. ame Nachname Telefonnummer Stra e Hnr PLZ abbrechen speichern Abb 45 Maske der Kundenpflege Vom Zustand Anzeige der Kundendaten bzw der entsprechenden Maske aus kann man ber die Taste zur ck wieder in die Suchmaske also zum Zustand bereit zur Suche zur ckkehren 85 7 3 6 Bestellverwaltungskombiwerkzeug Wie dem Anwendungsfalldiagramm in Abb 35 entnommen werden kann nutzt der Anwendungsfall Bestellung aufnehmen die fachlichen Dienstleistungen des Kundenverwaltungswerkzeug und des Angebotsverwaltungswerkzeug Daher handelt es sich im Sinne von Z llighofen Z llighoven 1998 um ein Kombi Werkzeug das zur Erledigung seiner Aufgabe verschiedene fachliche Dienstleistungen kombiniert und softwaretechnisch aus existierenden Subwerkzeugen zusammengesetzt ist Bestellung Vorname Nachname Telefonnummer Strasse Hnr PLZ Ort Bestellungen Kunde suchen Angebot suchen abbrechen ok Abb 46 Maske der Bestellung Wird der Anwendungsfall Bestellung aufnehmen durch ein Zustandsdiagramm beschrieben ergibt sich der Zustand Bereit zum Bestellen mit der entsprechenden Maske in Abb 46 von welcher aus nach Bet tigen der Taste Kunde suchen in das Kundenverwaltungswerkzeug und durch Bet tigen der Taste Angebot suchen in das Angebotsverwaltungswerkzeug verzweigt werden kann Die Benutzungsschnittstellen der beiden Werkzeuge Kundenverwaltungswerkzeug
63. anden Dateien und Verzeichnisse wenn der Kopiervorgang Sie darauf hinweist 124 3 Einbindung von SUIT ins Projekt 1 Um SUIT in ihrem Projekt einzubinden m ssen Sie zuerst ihr Projekt laden oder neu anlegen 2 W hlen Sie nun folgende Men s aus Projekt gt Verweis hinzuf gen a Yo Y L Projekt Erstellen Debuggen Extras Fenster Hilfe Windows Form hinzuf gen Geerbtes Formular hinzuf gen Benutzersteuerelement hinzuf gen Geerbtes Steuerelement hinzuf gen Komponente hinzuf gen Klasse hinzuf gen E El El y E Neues Element hinzuf gen Strg Umschalt 4 3 vorhandenes Element hinzuf gen Umschalt Alt A Aus Projekt ausschlie en Alle Dateien anzeigen Verweis hinzuf gen A him Fiinam E 3 Suchen Sie nun nach der die SUIT Library indem Sie auf Durchsuchen klicken Standardm ig unter C Programme SUIT SUIT dll ein Doppelklick aus Verweis hinzuf gen NET com Projekte Komponentenname Version Pfad 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 1 0 5000 0 7 0 5000 0 1 0 5 C WINDOWS Microsoft NET C WINDOWS Microsoft NET CHWINDOWS Microsoft NET C WINDOWS Microsoft NET CHWINDOWS Microsoft NET CA WINDOWS Microsoft NET C AWINDOWS Microsoft NET C WINDOWS Microsoft NET C WINDOWS Microsoft NET CHWINDOWS Microsoft NET CHW
64. assaden Klasse wird die Schnittstelle angeboten die diese Interaktionskomponente mit der Funktionalen Komponente kommunizieren l sst Abb 26 zeigt die dadurch entstehende Architektur des Anwendungssystems 52 Interaktionskomponente GUI Mit Hilfe von SUIT entworfen Fassade Von SUIT generierte Klasse mit Methodenk pfen Funktionale Komponente Vom Entwickler zu implementieren Abb 26 Architektur des Zielsystem mit Fassade Die Interaktionskomponente wird durch SUIT dahingehend angereichert dass die Aktionen die im SUIT Zustandsdiagramm angegeben werden auch aufgerufen werden wenn das zur Aktion zugeh rige Ereignis ausgel st wird Dieser Methodenaufruf ruft die Methodendeklaration in der Fassaden Klasse auf von der der Anwender durch nachtr gliches Ausimplementieren auf die entsprechenden Klassen der Funktionalen Komponente delegieren kann So ist die Interaktionskomponente nur an die Fassade gekoppelt Der Entwurf der funktionalen Komponente ist dem Anwender berlassen sodass trotz einer von SUIT vorgegebenen Zielsystem Architektur gen gend Freiheiten in Bezug auf die die Gestaltung seines Systems gegeben ist Auch ist die Gestaltung der Interaktionskomponente die Gestaltung der GUI dem Anwender frei berlassen und SUIT bietet sich hier nur als unterst tzendes Tool f r Gestaltung und Entwurf der Interaktionskomponente an Die Auswertung der Benutzereingaben und die Pr sentation der Ausgaben die Ver und
65. ativen sind die zeitlich letzte Inkarnation LIFO Kellerprinzip wird gew hlt die erste Inkarnation FIFO Warteschlangenprinzip wird gew hlt die Wahl ist durch den Anwender vorzunehmen daher muss ihm eine Selektionsm glichkeit angeboten werden Beim bergang von einem Dialog zu einem anderen sind bzgl ihrer Behandlung vier M glichkeiten gegeben der alte Dialog wird verlassen und ein neuer begonnen der alte Dialog wird verlassen und ein offener wieder aufgenommen der alte Dialog wird unterbrochen und ein neuer begonnen der alte Dialog wird unterbrochen und ein offener wieder aufgenommen Diese M glichkeiten m ssen nicht vollst ndig realisiert bzw erlaubt sein Zwar ist meist ein flexibler Wechsel zwischen Dialogen w nschenswert aber es kann erforderlich sein den Zugang zu einem Dialog nicht von jedem anderen aus zu erm glichen sondern jeweils zu beschr nken Dies geschieht dadurch dass er an Bedingungen gekn pft wird z B indem ein Passwort oder f r den zweiten Dialog ben tigte Daten bergeben werden 3 3 6 IAD Aktionen Bei IADs werden au erdem die Aktionen einbezogen die durch das Bet tigen der virtuellen Taste angesto en werden Wie sind diese Aktionen zu spezifizieren Da in den Aktionen dialogspezifische Daten bearbeitet werden kann dies nur f r den einzelnen Dialog erfolgen Um eine Aktion zu spezifizieren ist der spezifische Dialog auf die von ihm auszul sende Aktion hin zu analysiere
66. aufgebaut werden kann Als erstes wird eine Variablendeklaration vom Typ Point mit dem Namen myPoint erzeugt CodeVariableDeclarationStatement myPointVariable myPointVariable new CodeVariableDeclarationStatement typeof Point myPoint Als n chstes wird ein Objekt des Typs Point erzeugt das benutzt wird um die Variable myPoint zu initialisieren Es werden hier die X und Y Koordinaten in einem CodePrimitiveExpression Objekt als primitive Datentypen dargestellt CodeExpression parameters new CodeExpression new CodePrimitiveExpression 10 new CodePrimitiveExpression 10 Es wird eine Instanz des Typs Point mit den Parametern x und y erstellt CodeObjectCreateExpression initializer initializer new CodeObjectCreateExpression typeof Point parameters Schlie lich wird dem initializer also die Instanz des Typs Point die variablen Deklaration zugewiesen myPointVariable InitExpression initializer So kann also jeder Programmiercode in Form einer CodeDom Struktur die sprachunabh ngig ist beschrieben werden Mit Hilfe von CodeDom kann Quellprogramm sprachunabh ngig dargestellt werden F r die Serialisierung des Zustandsdiagramms in SUIT ist es jedoch nicht notwendig eine CodeDom Struktur selbst zu erzeugen Net bietet hierf r in System ComponentModel Design Serialization Namespace Klassen an Component implementiert Klassen von System ComponentModel Desi
67. bei gro en Benutzungsschnittstellen bew hrt l sst sich erst sagen wenn SUIT in der Praxis wirklich zum Einsatz kommt Die ersten Tests lassen jedoch Positives erhoffen 112 Quellen Denert 1992 Ernst Denert Software Engineering Springer Verlag 1992 eclipse http www eclipse org 11 11 2006 Gamma 2004 Erich Gamma Richard Helm Ralph E Johnson Entwurfsmuster Elemente wiederverwendbarer objektorientierter Software Addison Wesley in Pearson Education Deutschland 2004 Harel 1987 David Harel Statecharts A Visual Formalism for Complex Systems Science of Computer Programming 1987 Jigloo3 9 5 http www cloudgarden com jigloo v 3 9 5 11 11 2006 Together http www borland com us products together index html 11 11 2006 MyersRosson92 B A Myers and M B Rosson Survey on user interface programming In SIGCHT 92 Human Factors in Computing Systems May 1992 Visio2003 http office microsoft com de de visio default aspx 11 11 2006 Visual Studio Net 2003 http www microsoft com germany msdn library visualtools UeberblickUeberVisualStudioN ET2003 mspx mfr true 11 11 2006 Z llighoven 1998 Z llighoven Heinz Das objektorientierte Konstruktionshandbuch Heidelberg dpunkt Verl 1998 CodeDom http windowsforms net articles shapedesigner aspx 12 01 07 uselab http users informatik haw hamburg de use lab 12 01 07 msdn attribute http msdn2 microsoft com de de library system attribute VS 8
68. bklappbar A3 Erzeugen eines Zustandes Ein Zustand kann per Drag amp Drop Must have per Drag amp Drop von der Toolbox auf die Zeichenfl che platziert werden Die Gr e ist nicht vorgegeben und wird beim Erzeugen beliebig definiert A4 Erzeugen eines Ein Anfangszustand kann per Drag Must have Anfangszustandes per amp Drop von der Toolbox auf die Drag amp Drop Zeichenfl che platziert werden Die Gr e ist nicht vorgegeben und wird beim Erzeugen beliebig definiert AS Erzeugen eines Zustandes Mit einem Doppelklick auf das Icon Should have per Doppelklick Zustand in der Toolbox wird ein Zustand fester Gr e auf die Zeichenfl che platziert A6 Erzeugen eines Mit einem Doppelklick auf das Icon Should have Startzustand per Startzustand in der Toolbox wird ein Doppelklick Startzustand fester Gr e auf die Zeichenfl che platziert A7 Erzeugen eines Ein Zustands bergang wird per Must have Zustands bergang Drag amp Drop von der Toolbox auf Transition per die Zeichenfl che platziert Jeder Drag amp Drop Zustands bergang muss einen hineinf hrenden und einen hinausf hrenden Zustand haben AS Erzeugen eines rekursiven Rekursive Zustands berg nge sollen Should have Zustands bergangs erlaubt sein A9 L schen eines Zustandes Ist ein Zustand selektiert wird er Must have beim Dr cken der Entf Taste gel scht Die eingehenden und ausgehenden Zustands berg nge werden gel scht A10 L s
69. botssuche cs 0 Uee ngel abbrechen Glick cancelBestellung Quauyaune Bunjajsad y AD AOpUI BunsyssgTmoys AAD Bunye sss Pu Qayansuapuny moys yao USyansapunypua Bereit zum Bestellen cmdSuchen Click fangebot_suchen cmdSuchen Click kunden_sucheni JeyonsepunynzaysB AA FASSUNZP emdZurueck Clek 7 gehezu 2 Bestellung Be Anzeige der stellung cs Anzeigen der Angebotsdaten Kundendaten Kunde Kunden Angebot Angeb anzeige cs otsanzeige cs cmdBearbeiten Click geheZu_angebot_bearbeiten cmdSpechern Click angebot_speichem emdAnlegen Click geheZu_angebot_anlegen Quabajue jogaue ya y usbaluypua Juorugge usBeuejogeBuE 40D USYISIG YPU lt md nlegen Click geheZu_KundeAnlegenf Oyoniqqe Bundapuaeuapuna y yI YING pura Quiayoarads uajepuapuny y yao Ulayoredspulo lt mdAbbrechen CIcK Tangebotaendenung_abbrechen cmdBearbeiten Click geheZu_kundeBearbeiten Bereit zur Kundendaten Anderung Bereit zur Angebot Anderung Bereit zum Kunden anlegen Bereit zum Angebot anlegen Angebot Angebot serstellung cs Angebot Ange botspflege cs Kunde Kunden Kunde Kunden pflege cs erstellung cs Abb 48 Diagramm der Benutzungsschnittstelle des Gesamtsystems SUIT erzeugt aus den im Zustandsdiagramm bereits definierten Aktionen eine Fassade F r jede Aktion wird automatisch eine Methode generiert Die fachliche Funktionalit t dieser
70. chen eines Ist ein Startzustand selektiert wird Must Have Startzustandes er beim Dr cken der Entf Taste gel scht Alle hinausgehenden Zustands berg nge werden gel scht 42 All L schen eines Zustands bergangs Ist ein Zustands bergang selektiert wird er beim Dr cken der Entf Taste gel scht Must have A12 Zustands berg nge Knickpunkte In einem Zustands bergang k nnen Knickpunkte definiert werden um eine gewinkelte Darstellung eines Zustands bergangs zu erm glichen Should have A13 Notizfeld Ein Notizfeld ist ein Zustandsdiagrammelement das auch aus der Toolbox selektiert und frei auf die Zeichenfl che platziert werden kann Nice to have A14 Selektieren Ein Anfangszustand Zustand oder Zustands bergang kann mit der Maus selektiert werden Must have AI15 Selektieren des gesamten Zustandsdiagramms Ein Zustandsdiagramm kann mit der Maus selektiert werden Should have Al6 Undo redo Es gibt eine Undo Funktionalit t die den letzten Bearbeitungsschritt r ckg ngig macht und eine redo Funktionalt t die den letzten Bearbeitungsschritt wiederholt Die Undo Funktion dient der Korrektur von fehlerhaften Eingaben und die Redo Funktion macht eine Korrektur r ckg ngig Should have A17 Mehrfachselektion von Zust nden Mehrere Zust nde k nnen durch Umrahmen mit dem Mauscursor gruppiert werden um darauf ein
71. cklung darstellt Dies deutet darauf hin dass es daf r bisher an geeigneten Tools mangelt 98 9 M glichkeiten und Grenzen von SUIT 9 1 Einleitung In diesem Kapitel soll auf die M glichkeiten und Grenzen von SUIT eingegangen werden die im Laufe der Bachelor Arbeit aufgefallen sind Ob SUIT die erhofften Vorteile in der Vision erf llt oder nicht wird in Abschnitt 9 2 erl utert Diese Grenzen von SUIT sollen in Abschnitt 9 3 aufgezeigt und ihre Ursachen erl utert werden In Abschnitt 9 4 folgt ein Fazit zu diesem Kapiteln 9 2 M glichkeiten von SUIT Die Methode Benutzungsschnittstellen mit Hilfe von Zustandsdiagrammen und Fensterentw rfen zu entwerfen wurde mit SUIT umgesetzt Erste praktische Tests haben ergeben dass SUIT eine gute Basis bietet Benutzungsschnittstellen schnell und kosteng nstig zu entwerfen Die Usability Tests zu dieser Methodik Benutzungsschnittstellen zu entwerfen hatten gezeigt dass alle Tester diese Vorgehensweise als leicht verst ndlich betrachten und ohne gro es Umdenken Zustandsdiagrammmodelle ihres Benutzungsschnittstellensystem intuitiv entwerfen k nnten siehe Kapitel 8 Die Simulationskomponente kann schon in den fr hen Phasen der Softwareentwicklung zum Einsatz kommen Sie erm glicht ohne eine Zeile Code geschrieben zu haben einen Prototyp der zu entwickelnden Benutzungsschnittstelle zu erzeugen Die Simulationskomponente bietet die M glichkeit des Rapid Prototyping und stellt damit eine
72. ction eines Zustands bergang ndern Um Event und Action eines Zustands bergangs zu ndern gehen Sie wie folgt vor 1 Markieren Sie den Zustands bergang dessen Event und Action ge ndert werden soll 2 Klicken Sie im Eigenschaftsfenster beim Property ControlEventAction den Button an se Eigenschaften zustandsuebe ie DynamicProperties gangi SUIT Zustandsdiagramr Y ControlEvent ckion 3 Ein Dialog Fenster erscheint in dem Sie die GUI Maske die Sie beim ausgehenden Zustand des Zustands bergangs zugewiesen haben sehen k nnen Je nachdem wie ihre GUI Maske aussieht gibt es also hier Abweichung von den folgenden Screenshot 134 EE EventActionChooser Kundenanzeige Ereignisausl sendes Control emdZurueck fistKunde W hlen Sie das Event aus auf dem reagiert I werden soll BackColorChanged BackgroundlmageChanged BindingContextChanged CausesYalidationChanged ChangelllCues ContextMenuChanged Control dded ControlRemoved CursorChanged DoubleClick DragDrop DragEnter DragLeave DragOver EnabledChanged Enter FontChanged ForeColorChanged GiveFeedback GotFocus HandleCreated Methodenname der Action die ausgef hrt werden soll neueSuchd Abbrechen DK 4 W hlen Sie im ihre GUI Masken Ansicht linkes Fensterbereich des Dialogs das Control aus auf dessen Ereignis reagiert werden soll und w hlen Sie dann das Ereignis aus der L
73. das Zustandsdiagramm Die Toolboxelemente m ssen nun in der Toolbox platziert werden damit sie in ihr erscheinen Das Hinzuf gen der bereits definierten Komponenten kann manuell ber die Visual Studio Oberfl che erfolgen Mit einem rechten Mausklick auf der Toolbox k nnen diese Elemente ber die Option Elementen hinzuf gen entfernen ausgew hlt und hinzugef gt werden Siehe dazu Abb 29 Fallstudie CSharp Microsoft Visual C NET Entwurf Angebot Zustandsdiagramm1 cs Entwurf EJES Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe SUSsUgkBbr gt E B Debug y 9 HitLeft Bear aa ze jon s la ml bbotNeu cs Angebot Angebot cs Angebot Angebots lung cs Entwurf Kunde KundeNeu cs Entwurf Angebot Zustan i cs Entwurf 4 gt x Proj enExpl 4 X Zustandsdiagrammeditor Elemente F asias Rh Zeiger Schritt 2 1 Projektmappe Fallstudie C 2 Zustand S El Fallstudie CSharp 63 Startzustand Schritt 1 Toolbox anpassen f xl i en amp Zustandsuebergang NET Framework Komponenten comsteuerelemente l 8 Angebot cs M ausschneiden 8 AngebotNeu cs Ea Angebotsanzeigt Kopier al Microsoft VisualBasic Compati Microsoft WisualBasic Compatibility 7 0 5 al a O webclient Systern Net System 1 0 5000 0 Q Angebotssuche X L schen O Webcontrol System Web UI WebControl System Web 1 0 5000 0
74. dem Zustand kann eine Maske zugeordnet Zust nden werden Speicherung von Zustanddiagrammen Das Zustandsdiagramm muss gespeichert werden k nnen Simulation Das Zustandsdiagramm kann simuliert werden Fassade Es wird eine Fassade generiert werden GUI Masken Ereignisse den Es muss die M glichkeit geben Ereignisse der Zustands bergang zuweisen GUI Maske den Zustands bergang zuzuweisen Tabelle 1 Notwendige Anforderungen an SUIT 2 3 Existierende Tools Im Rahmen dieses Kapitels wurde untersucht ob es auf dem Markt Tools f r die Erzeugung von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen existieren Als Leitfaden f r die Untersuchung diente die grobe Anforderungstabelle aus 2 2 Die Recherche nach bereits existierenden kommerziellen oder nicht kommerziellen Softwarel sungen ergab jedoch kein Ergebnis f r eine der Vision entsprechende Gesamtl sung 2 4 GUI Builder Als Entwicklungsumgebung f r die Entwicklung von SUIT kommen insbesondere Eclipse eclipse und Microsoft Visual Studio Net Visual Studio Net 2003 in Betracht Microsoft Visual Studio verf gt ber einen fest eingebauten GUI Builder Eclipse kann mit einem beliebigen GUI Builder Plugin ausgestattet werden Die drei bekanntesten Produkte sind Jigloo Jigloo 3 9 5 Window Builder Pro WindowBuilderPro und Visual Editor VisualEditor Bei der Analyse haben wir uns f r Eclipse auf Jigloo beschr nkt Die Analyse der GUI Builder ist
75. der SUIT Zustandsdiagramm Notation Jedoch l sst sich eine Benutzungsschnittstelle in ihrer endg ltigen Version niemals komplett ohne die Informationen ber die Funktionalit t wie z B R ckgabewerte einzelner Funktionen beschreiben die durchaus Einfluss auf den Dialogverlauf nehmen K nnen F r das SUIT Zustandsdiagramm Modell k nnten diese fehlenden funktionalen Elemente in den sp teren Etappen der Softwareentwicklung bedeuten dass es seine Konsistenz verliert da eben nicht der komplette Dialogverlauf einer Benutzungsschnittstelle unter Ber cksichtigung der funktionalen Implementierung im Modell selbst abbildbar ist So kann zwar der mit SUIT entstandene Prototyp zum Weiterentwickeln genutzt werden jedoch ist es wahrscheinlich dass das SUIT Zustandsdiagramm Modell sp ter seine G ltigkeit verliert Diese Konsistenzerhaltung und die damit verbunden SUIT Zustandsdiagramm Notation Erweiterungen k nnten als prim res Ziel f r die folgenden SUIT Versionen angesehen werden Diese m glichen Erweiterungen und deren Ursachen sofern sie uns jetzt bekannt sind werden im Kapitel Ausblick siehe Kapitel 10 erl utert Es sollte bei diesem Versuch jedoch beachtet werden dass SUIT dadurch sein prim res Ziel fr h in der Softwareentwicklung eingesetzt werden zu k nnen nicht wieder verliert 104 9 4 Fazit SUIT erf llt in ersten Tests unsere Erwartungen und schient wenigstens f r kleine Einplatzsysteme praxistauglich einsetzbar zu s
76. diagtamme nee kun 31 3 3 2 Virt elle Tasten 00 A A Ei 33 3 3 4 IAD Zust nde und Masken nen a a 34 323 9 Dialos wechseln 2 BER 34 3 3 0 ITAD Aktionen vetar dd 35 3 4 Die in dieser Arbeit gew hlte Vorgehensweise oooooonccononcccnoncccnoncnononcnononcconancconncconnnoss 37 3 4 1 Vorgehensweise mit ZustandsdiagraMMeN oooooocccnonoccnoncnononcnononcnonnnononnncnnnnncnnanncnnns 37 342 SUIT No tion A A A A RS 39 O ies 40 ANIOTAETUN ab ao ES 41 2 EMEN S Dale Denim 41 4 2 funktionale Anforderungen iii R a 41 e S A e VA EEOSE N PENEEEREEIIE CPRENRERER ER TIREETENEEEISE EES 47 SOUL LI Atchilekt r O ne 48 A O e A E A 48 5 2 SUIT Architektur Zusammenhang mit VS Net coooocccnccccconcccconcncnnnnnononcnononcnonnncconnnccnnnnnss 48 3 3 Interne SULT Archrtekt r a a a ta 49 5 4 Architektur des Zielsystems nu se ikea 52 32 Fazil E E S 53 Umsetzung FOSTER a 55 6 1 Einleitung unica diia bai 3 6 2 mseseizie Anforderungsen da ididia 55 0 3 POMO din 57 6 4 Besonderheiten rn Aa A OS 59 6 4 1 Erweiterung der Toolbox um Zustandsdiagramm Elemente ueen 59 6 4 2 ffnen mit dem Zustandsdiagramm Designer in VS Net n eneeeeen 61 6 4 3 Programmiersprachunabh ngigkeit in der Codegenerierung in Net 61 6 4 4 Das Anzeigen von Eigenschaften in einem Eigenschaftsfenster 64 6 4 5 Aufrufen des GUI Designers in SUIT 2200222200ssssenssnsenssnnennsnnnnnnnnnnnnannnn 65 6 5 schnittste
77. dschirmmasken erlaubt In der vorliegenden SUIT Version ist es noch nicht m glich auf ein externes Visual Studio Projekt zuzugreifen selbst wenn das externe Projekt sich auf demselben Rechner befinden w rde So ist ein verteiltes Benutzungsschnittstellensystem nicht mit SUIT zu modellieren bzw nicht ohne dass der Programmierer selber Hand anlegt und die externen Bildschirmmasken programmiertechnisch seinem Projekt zug nglich macht Diese projekt bergreifende Bildschirmmasken Referenzierung der Zust nde im SUIT Zustandsdiagramm Editor ist f r die n chste Version geplant Durch diese Einschr nkung der Referenzierung ist es daher auch nicht m glich dass auf Web Benutzungsschnittstellen zugegriffen werden kann da zurzeit auch noch keine Referenzierung von Web Seiten erlaubt ist Um dies zu erm glichen m sste neben einer GUI Builder Komponente SUIT um einen Web Seiten Editor erweitert werden Von dieser Komponente wurde in dieser SUIT Version abgesehen da eine Untersuchung der zustandsbasierten Modellierung von Benutzungsschnittstellen auch ohne die Web Seiten Editor Komponente m glich ist und diese Untersuchung prim res Ziel dieser Bachelor Arbeit ist 100 9 3 2 Codegenerierung f r den Aufruf des Folgezustands Mit dem SUIT Zustandsdiagrammeditor wird der Dialogverlauf einer Benutzungsschnittstelle modelliert Die Informationen welche Maske bei bestimmten Ereignissen angezeigt wird sind also in dem Zustandsdiagrammmodel enth
78. e Operation auszuf hren wie z B Copy amp Paste Should have A18 Rastermuster Ein Rastermuster dient der Orientierung beim Anlegen zu Zust nden Should have A19 Zoom Das erstellte Zustandsdiagramm kann in seiner Ansicht vergr ert oder verkleinert werden Should have A20 Neuanlegen von Masken Von jedem Zustand aus kann per Doppelklick der integrierte GUI Builder von Visual Studio aufgerufen werden und dem Zustand kann eine Maske generiert werden Must have A21 Zuordnung von Masken per Doppelklick Wurde einem Zustand noch keine Maske zugeordnet so werden nach einem Doppelklick auf dem Zustand alle bereits im Project definierten GUI Masken angezeigt Es kann eine Maske ausgew hlt werden oder neu angelegt werden Must have 43 A22 Zuordnung von Masken im Property Fenster Wurde einem Zustand noch keine Maske zugeordnet kann im Property Fenster im Masken Property eine Referenz auf eine GUI Klasse eingetragen werden Must have A23 Andern von Masken Ist einem Zustand eine Maske zugeordnet kann diese mit einem Doppelklick auf dem Zustand aufgerufen werden Dann k nnen nderungen vorgenommen werden Must have A24 Property Ansicht Zustand ber diese Property Ansicht k nnen die Eigenschaften eines Zustands angesehen und editiert werden Must have A25 Property Ansicht Startzustand ber diese Property Ansicht k
79. ei der Erstellung von Benutzungsschnittstellen angemessen zu unterst tzen F r diesen Zweck wird im Rahmen dieser Bachelor Arbeit ein Werkzeug f r die Erzeugung von Benutzungsschnittstellen auf Basis von Zustandsdiagrammen und Fensterentw rfen realisiert 1 1 Motivation Zum Entwurf von Benutzungsschnittstellen ist es ab einer bestimmten Gr e unerl sslich ein Modell ihres dynamischen Verhaltens zu entwickeln Daf r ist ein geeignetes Tool erforderlich Viele auf dem Markt angebotenen Modellierungstools dienen allerdings in erster Linie nur der Modellierung Diese Tools k nnen eher als Graphikprogramme angesehen werden da sie haupts chlich den Anwender beim Erstellen von Diagrammen unterst tzen Die Diagramme k nnen aber letztendlich nur gespeichert oder ausgedruckt werden Aus Sicht des Programmierers und Software Entwicklers w re es jedoch w nschenswert aus einem formal eindeutigen Modell m glichst viele der niedergelegten Informationen zur automatischen Erzeugung von Code f r die Benutzungsschnittstelle weiter zu verwenden In einigen F llen k nnen Modelle w hrend der Spezifikation bereits so detailliert beschrieben werden dass aus ihnen zumindest ein Programmger st wenn nicht sogar ausf hrbarer Code automatisch generiert werden k nnte Weiterhin ist es erstrebenswert aus einem Modell einen lauff higen Prototypen zu erstellen das in den fr hen Phasen der Softwareentwicklung zum Einsatz kommen kann Modelle sollten n
80. eile die wir in der Vision beschrieben haben scheinen sich also mit SUIT erf llt zu haben SUIT erf llt also in der Hinsicht unsere Erwartungen Jedoch haben wir auch Grenzen an SUIT entdeckt die in Abschnitt 9 3 genauer erl utert werden Unter anderem ist eine dieser Grenzen von SUIT das Entwickeln von verteilten Benutzungsschnittstellen siehe 9 3 1 So beschr nkt sich SUIT erstmal nur auf Einzelplatzsystemen Ein kleines Einplatzsystem f r einen Pizzaservice siehe Fallstudie wurde mit SUIT ansatzweise entwickelt Anhand der Fallstudie hat sich SUIT f r solche Benutzungsschnittstellen als gut geeignet erwiesen Wie tauglich SUIT f r die Entwicklung von gr eren Benutzungsschnittstellen ist l sst sich erst genau sagen wenn SUIT wirklich zum praktischen Einsatz kommt 9 3 Erl uterung der Grenzen In diesem Abschnitt werden die erkannten Grenzen von SUIT im Laufe der Bachelor Arbeit erl utert und aufgezeigt Es sollen die Ursachen festgestellt werden und m gliche L sungen angeboten werden Diese L sungen sofern realisierbar k nnen dann f r die n chste Version von SUIT umgesetzt werden 9 3 1 Verteilte Benutzungsschnittstellen Mit SUIT l sst sich nicht der Dialogablauf von Benutzungsschnittstellen modellieren deren Bildschirmmasken sich auf mehreren Rechnern befinden Dies hat als Ursache dass der SUIT Zustandsdiagramm Editor keine projekt bergreifende geschweige denn rechner bergreifende Referenzierung der Bil
81. ein Verteilte Benutzungssysteme sind mit SUIT noch nicht modellierbar Der Code f r den Aufruf der Folgemaske wird mit SUIT noch nicht automatisch geniert da der Ort f r die Erstellung nur vom Programmierer selbst sinnvoll bestimmt werden kann Durch die einfache SUIT Zustandsdiagramm Notation erm glich SUIT dem Anwender Benutzungsschnittstellen m glichst in den fr hen Etappen der Softwareentwicklung einzusetzen ohne sein Zielsystem und dessen Anforderungen vollst ndig kennen zu m ssen Diese berschaubare Notation erm glich es auch dem Anwender die Methodik Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen ohne gro e Einarbeitung umsetzen und verstehen zu k nnen Durch das nicht Ber cksichtigen der Funktionalit t in der Modellierung kann es dazu kommen dass in sp teren Etappen der Softwareentwicklung in denen die Funktionen ausimplementiert werden die Konsistenz zwischen den Zustandsdiagramm Modell und der Benutzungsschnittstelle verloren geht Diese Konsistenzerhaltung und die daf r n tigen Erweiterungen in der SUIT Zustandsdiagramm Notation sollen im Kapitel Ausblick erl utert werden Wie SUIT sich letztendlich bei gro en Projekten bew hrt wird sich erst dann zeigen wenn SUIT wirklich zum praktischen Einsatz in gro en Projekten kommt Doch die Ergebnisse der Usability Tests und der Fallstudie lassen Positives erhoffen 105 10 Ausblick 10 1 Einleitung In diesem Kapitel soll ein
82. ekt der EnvDTE Projectltem erzeugen der auf die GUI Datei zeigt ProjectItem Schnittstelle stellt ein Element in einem Projekt dar in unserem Falle ist es die GUI Datei die beim Doppelklick angezeigt werden soll Hat man nun das Projektitem also das Element aus dem Projekt hier die GUI Datei so kann diese ge ffnet werden Soll nun diese GUI Datei in der Ansicht des GUI Builders ge ffnet werden kann dies mit Hilfe der Klasse Constants im Namespace EnvDTE definiert werden Die Klasse Constants definiert vsViewKindDesigner um eine Datei in der Designer Ansicht also in der Ansicht des GUI Builders anzuzeigen Folgender PseudoCode zeigt diese Vorgehensweise Zuerst holt man sich das aktuelle Projekt Als Parameter werden der Pseudo_Methode getProject den Namen der GUI Datei und einen Objekt der Klasse EnvDTE DTE myDTE 65 bergeben myDTE enth lt alle bestehenden Projekte der Entwicklungsumgebung Visual Studio Net EnvDTE Project pr getProject GUI_Datei_Name myDTE Hat man nun das aktuelle Projekt so erzeugt man ein Objekt der Klasse Projectltem das die zu ffnende GUI Datei als Element darstellt EnvDTE ProjectItem myGUI getProjektItem GUI Datei Name Hat man nun ein Projektitem der GUI erzeugt so kann dieses in der GUI Builder Ansicht ge ffnet werden myGUI Open EnvDTE Constants vsViewKindDesigner 6 5 Schnittstelle von SUIT Um SUIT um ein weiteres Zustandsdiagra
83. en anlegen Abb 39 Maske der Angebotserstellung Vom Zustand Anzeige der Angebotsdaten mit der Maske der Angebotsanzeige aus kann die Taste bearbeiten bet tigt werden Dies f hrt zu der Aktion geheZu_angebot_bearbeiten Es wird zum Folgezustand bereit zur Angebots nderung gewechselt In dieser Maske kann man ber die beiden Tasten abbrechen und speichern und die dazugeh renden Aktionen in den Zustand Anzeige der Angebotsdaten zur ckkehren Angebotsdatenpflege Angebotdaten pflegen Bestellnummer Name Kategorie Preis Beschreibung abbrechen speichern Abb 40 Maske der Angebotsdatenpflege 82 Vom Zustand Anzeige der Angebotsdaten aus kann man ber die Taste l schen nach Anklicken des zu l schenden Angebots oder durch Anklicken der Taste zur ck wieder in die Suchmaske zur ckkehren also zum Zustand bereit zur Suche 7 3 5 Kundenverwaltungswerkzeug Wie man dem Anwendungsfalldiagramm in Abb 35 entnehmen kann benutzen die Anwendungsf lle Kunden anlegen Kunden l schen und Kundendaten pflegen den Anwendungsfall Kunden suchen Daher muss eine Kundensuche ausgef hrt werden ehe eine weitere Aktion bez glich eines Kunden erfolgen kann Damit ist eine bestimmte Reihenfolge vorgegeben Wird dieser Ablauf durch ein Zustandsdiagramm beschrieben ergeben sich daraus vier Zust nde die wie folgt benannt werde
84. en Entwicklungsphasen kommt man jedoch nicht an der funktionalen Implementierung vorbei Werden vom SUIT Anwender in diesen Phasen Funktionen ausimplementiert die auf den Dialogverlauf der Benutzungsschnittstelle Einfluss nehmen so sind diese nicht in dem Modell abbildbar In diesem Abschnitt widmen wir uns m glichen Konsistenzverlust Ursachen und Notationserweiterung So kann ein neues prim res Ziel der n chsten SUIT Version darin liegen Konsistenzerhaltung f r die sp teren Etappen der Softwareentwicklung zu gew hrleisten um die Weiterentwicklung des mit SUIT erzeugten Prototyps zu optimieren In Abschnitt 10 2 2 1 wird auf die Konsistenzverlust Ursache eingegangen die durch dialogablaufsteuernde Aktionsr ckgabewerte verursacht werden Abschnitt 10 2 2 2 geht dann auf die Konsistenzverlust Ursache Inkarnationen ein 10 2 2 1 Dialogsverlaufsteuernde Aktionsr ckgabewerte Ein Hauptgrund f r diesen Konsistenzverlust in der Implementierungsphase sehen wir in der fehlenden M glichkeit dialogsverlaufsteuernde Aktionsr ckgabewerte zu modellieren R ckgabewerte von Aktionen m gen zum Zeitpunkt der Analyse noch nicht zu hundert Prozent bekannt sein sie k nnen jedoch Einfluss auf den Dialogverlauf haben Eine totale Missachtung der funktionalen Implementierung vom Modell f hrt daher leicht zu einem Konsistenzverlust des Models Um das Problem der dialogsverlaufsteuernden R ckgabewerte einer Aktion zu veranschaulichen soll das Beispiel de
85. en Zu diesem Zweck sind ein Zustandsdiagrammeditor und ein GUI Builder unabdingbar Es existieren sowohl kommerzielle als auch nichtkommerzielle Zustandsdiagrammeditoren und GUI Builder auf dem Markt siehe Marktanalyse in Kapitel 2 Daher liegt die berlegung nahe jeweils eines dieser Produkte sofern es erweiterbar und integrierbar ist wieder zu verwenden In diesem Fall w re die Realisierung eines eigenen GUI Builders oder Zustandsdiagrammeditors berfl ssig Die Kommunikation zwischen dem GUI Builder und dem Zustandsdiagrammeditor muss durch eine eigene Komponente realisiert werden Der Vorteil dieser L sung liegt in der M glichkeit der Wiederverwendung bereits bestehender Komponenten 14 Trotzdem haben wir uns zur Umsetzung des Tools dieser Bachelor Arbeit daf r entschieden einen eigenen Zustandsdiagrammeditor zu realisieren da es unser Ziel ist einen speziell f r Benutzungsschnittstellen ma geschneiderten Zustandsdiagrammeditor zu entwickeln Im Rahmen dieser Bachelor Arbeit soll ein explorativer Prototyp erstellt werden Es soll berpr ft werden ob die Idee Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen zu entwickeln praxistauglich ist Stellt sich anschlie end heraus dass Zustandsdiagramme in der jetzigen Notation f r die Modellierung des dynamischen Verhaltens von Benutzungsschnittstellen unzureichend sind so kann man mit einer eigenen Realisierung flexibler auf neue Erkenntnisse reagi
86. en k nnen Zust nde in verschiedenen Farben dargestellt werden Zust nde k nnen ineinander verschachtelt werden Nachteilig beim Zustandsdiagrammeditor von Together sind die hohen Anspr che an die Hardware Au erdem stellt er derart viele Funktionalit ten zur Verf gung dass der berblick leicht verloren gehen kann Ein weiterer wichtiger Nachteil besteht darin dass Together sogar bei der Verwendung f r nichtkommerzielle Zwecke kostenpflichtig ist Der Zustandsdiagrammeditor von Together bietet keine Druckansicht 2 5 2 MS Visio Zeichnungi Microsoft Visio 5 3 Datei Bearbeiten Ansicht Einf gen Format Extras Shape UML fenster 2 Frage hier eingeben vr ox D0 Bda 7442 ax 9 0 18 5 1 A 9 7 0 Arial Shapes Nach Shapes suchen Geben Sie Ihren Suchbegril y E UML Aktivitat E UML Kollaboration E UML Komponente E uM verteilung El UML Sequenz E UML Zustandsdiagramm H UML Statische Struktur El UML Anwendungsfall 4 gt gt Zustandsdiagramm 1 Zeichenblatt 1 1 Abb 16 Visio Microsoft Visio 2003 ist ein Bestandteil des Microsoft Office Systems Es bietet dem Anwender die M glichkeit Informationen in Form verschiedener Diagrammtypen abzubilden Im Rahmen unserer Bachelor Arbeit beschr nken wir uns jedoch auf die Modellierung in Form von Zustandsdiagrammen in Microsoft Visio 26 Der Zustandsdiagrammeditor bietet eine sehr benutzerfreundliche Zeichen
87. enen Ablauflogik ausf hren 5 4 Architektur des Zielsystems Durch die Codegenerierungskomponente von SUIT wird f r den Anwender Code erzeugt Jedoch beschr nkt sich dieser automatisch erzeugte Code nur auf eine Fassaden Klasse die die Methodenk pfe der im Zustandsdiagramm angebenden Aktionen deklariert Die Ausimplementierung also die eigentliche Funktionalit t kann nur vom Anwender selbst entwickelt und programmiert werden Eine automatische Codegenerierung f r die dahinter liegende Funktionalit t ist nicht m glich da die n tigen Informationen hierzu nicht aus dem Zustandsdiagramm entnommen werden k nnen Durch die Generierung einer Fassaden Klasse wird dem Anwender also schon ein gewisses Entwurfsmuster ein Pattern vorgeben das somit auch eine gewisse Entwurfsentscheidung f r den Anwender darstellt Es entsteht eine Vorgabe in der Architektur des Zielprogramms das vom Anwender mit Hilfe von SUIT entwickelt werden soll Diese Architektur soll in diesem Abschnitt vorgestellt und deren Vorteile erl utert werden Das Fassaden Pattern Gamma 2004 hat den Vorteil dass es den Klient im unserem Fall die Interaktionskomponente vom Subsystem die Funktionskomponente voneinander entkoppelt und eine starke Kopplung somit vermieden werden kann Die Interaktionskomponente also die Komponente die die GUI enth lt wird mit Hilfe von SUIT und dem in SUIT integrierten GUI Builder entworfen Durch die automatisch generierte F
88. enh nge zwischen den Anwendungsf llen untereinander und zwischen ihnen und den beteiligten Akteuren beschrieben werden Dieses Diagramm bietet den Ausgangspunkt f r den n chsten Schritt der Identifizierung von Werkzeugen Um den Entwurf bzw die Identifikation von Werkzeugen zu erleichtern wird in Z llighoven 1998 zus tzlich die Beschreibung von Szenarien empfohlen Dies ist bei der vorliegenden Fallstudie nicht erforderlich da es sich nicht um ein komplexes schwer berschaubares System handelt In unserem Beispiel bietet ein Anwendungsfalldiagramm ausreichend Anhaltspunkte um Werkzeuge zu erkennen Im Folgenden werden einige weitere Begriffe gem Z llighoven 1998 Seite 48 verwendet Ein einfaches Werkzeug besitzt anwendungsfachlich eine elementare Funktionalit t Softwaretechnisch besitzt es keine Sub Werkzeuge Ein Kombi Werkzeug kombiniert verschiedene fachliche Dienstleistungen zur Erledigung einer komplexen Aufgabe Softwaretechnisch ist es aus existierenden Sub Werkzeugen zusammengesetzt Ist ein Werkzeug als technische Komponente innerhalb eines anderen Werkzeugs eingesetzt so wird es als Sub Werkzeug bezeichnet Nach ihrer Identifikation werden die Werkzeuge wiederum zu einem Gesamtsystem kombiniert Diese Vorgehensweise demonstriert wie mit dem Tool der vorliegenden Arbeit eine Benutzungsschnittstelle f r ein vollst ndiges System Pizzaservicesystem modelliert werden kann 78 B
89. enutzerkommunikation eingesetzt werden k nnen Sie k nnten als Hilfsmittel dienen um die Richtigkeit einer Anforderungsanalyse sicherzustellen Anschlie end k nnen sie einem voll einsatzf higen und kompletten Softwaresystem weiterentwickelt werden 90 8 Usability 8 1 Einleitung Thema dieses Kapitels ist der Usabiliy Test dem SUIT mit Hilfe von vier Testpersonen unterzogen wurde Die Usability Tests wurden nach zwei Hinsichten untersucht 1 ging es um die Benutzbarkeit von SUIT selbst 2 um die Praxistauglichkeit der Methode die SUIT umsetzt das Modellieren von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen 8 2 Usability Aufgabe Jeder Testperson wurde eine Aufgabe gestellt die sie st rungsfrei bearbeiten sollte Die Aufgabe bestand darin anhand eines Beispiels Suche nach Literatur siehe n chster Abschnitt in SUIT ein Zustandsdiagramm zu entwerfen das den beschriebenen Ablauf der Literatursuche modelliert und dieses um die ben tigten Masken anreichert Es sollte eine Fassaden Klasse erzeugt und das Modell simuliert werden Beispiel Suche nach Literatur Martina hat sich dazu entschieden ihr Referat ber das Thema Geschichte der Dinosaurier anzufertigen und ist nun auf Literatursuche Sie begibt sich deshalb in die Bibliothek setzt sich an einen Rechner und ffnet die Seite des Katalogs der Bibliothek Daraufhin ffnet das System den Suchdialog mit Eingabefeldern f r die m glic
90. er erneut die Adresse einzugeben wird daher auf die Haustelefonnummer zur ckgegriffen Au erdem dient sie f r R ckrufe an den Kunden Eine Kundennummer ist bei einem Pizzaservice System nicht praxistauglich und wird daher nicht verwendet Ist der Kunde nicht im System bekannt werden seine Kundendaten wie z B Anschrift Name etc angefragt und dem System vermittelt Ist der Kunde schon im System registriert k nnen gegebenenfalls die Kundendaten gepflegt und bei Anderungen aktualisiert werden Nun kann der Mitarbeiter die Bestellungen des Kunden entgegen nehmen Dabei berpr ft das System ob die gew nschten Artikel vorhanden sind Ist die Bestellung abgegeben wird diese in Form einer Rechnung ausgedruckt die an die K che weitergereicht wird Hier werden die bestellten Pizzen gem der weitergereichten Rechnung gebacken auslieferungsreif verpackt und samt Rechnung einem Fahrer zum Ausliefern weitergereicht Konnte eine Auslieferung aus irgendeinem Grund nicht erfolgreich abgewickelt werden z B weil der Kunde nicht angetroffen wurde wird dem System mitgeteilt dass die Auslieferung nicht erfolgreich abgeschlossen werden konnte Dar ber hinaus muss das System dem Anwender eine M glichkeit bieten seine Stammdaten zu pflegen 7 3 Schrittweise Erzeugung des Prototyps 7 3 1 Vorgehensweise Die Entwicklung des Prototyps erfolgt unter Einbeziehung von Konzepten des WAM Ansatzes Z llighoven 1998 Es wird zun chst unter V
91. er Benutzungsschnittstelle in Form eines Zustandsdiagramm modelliert und die Bildschirmmasken generiert kommt die Simulationskomponente zum Einsatz gt Codegenerator Aus dem erstellten Zustandsdiagramm erzeugt der Codegenerator von SUIT eine Fassade der Funktionskomponente Im Folgenden werden tabellarisch siehe Tabelle 2 alle funktionalen Anforderungen an SUIT aufgelistet Jede Anforderung wird einer der folgenden drei Klassifikationen zugeordnet gt Must have dies sind Anforderungen die SUIT erf llen muss Sie werden im Rahmen dieser Bachelor Arbeit realisiert gt Should have dies sind m gliche Erg nzungen die SUIT bereichern w rden und im Rahmen dieser Bachelor Arbeit soweit es zeitlich m glich ist realisiert werden 41 gt Nice to have dies sind m gliche Erg nzungen die SUIT bereichern w rden und im Rahmen dieser Bachelor Arbeit soweit es zeitlich m glich ist realisiert werden Wobei die Should have Anforderungen h her priorisiert sind als die Nice to have Anforderungen ID Abk rzung Beschreibung der Anforderung Klassifikation Al Erzeugen einer Eine Zustandsdiagrammdatei wird Must have Zustandsdiagrammklasse erzeugt die das Zustandsdiagramm des Anwenders beschreibt A2 Toolbox Der Zustandsdiagramm Editor Must have verf gt ber eine Toolbox in der Zust nde Startzust nde und Zustands berg nge symbolisch angezeigt werden Die Toolbox ist auf und a
92. eren Erfordern z B neue Erkenntnisse eine Ab nderung der Notation des Zustandsdiagramms so kann diese nderung problemlos vorgenommen werden Eine eigene Implementierung bietet mehr Flexibilit t um auf nderungen der Anforderungen und auf neue Erkenntnisse zu reagieren Daher besteht unser Vorgehen darin f r das Tool dieser Bachelor Arbeit einen existierenden GUI Builder wiederzuverwenden und einen eigenen Zustandsdiagrammeditor zu implementieren 1 2 4 Einsatz SUIT Szenarien Use Cases Elementar Werkzeuge Aufgaben Kombi Werkzeug Simulation Code Generierung Abb 8 Einsatz von SUIT Bildschirm BSS Masken Modellierung Abb 8 zeigt die Etappen an in denen das Tool dieser Bachelor Arbeit zum Einsatz kommen kann Dieser Einsatz erfolgt in der Regel nachdem die im WAM Ansatz Z llighoven 1998 beschriebenen Werkzeuge identifiziert worden sind Arbeitsabl ufe lassen sich in Szenarien beschreiben Mit Hilfe von Szenarien werden Use Cases identifiziert Anhand der Anwendungsf lle und Szenarien werden wiederkehrende Aufgaben erkannt und zu Elementar Werkzeugen zusammengefasst Bei komplexen Aufgaben k nnen elementare Werkzeuge zu einem Kombi Werkzeug kombiniert werden Diese Zusammenf hrung von Subwerkzeugen zu einem Kombi Werkzeug wird im WAM Entwurfsmuster Werkzeugkomposition beschrieben Z llighoven 1998 An diesem Punkt kommt das Tool dieser Bachelor Arbeit zum Einsatz SUIT schreibt jedoch ke
93. erierung von Code in Form einer Fassade Alle Details einer Benutzungsschnittstelle abzudecken steht daher bisher nicht im Zentrum der Aufmerksamkeit Sollte sich die Modellierung von Benutzungsschnittstellen mithilfe von Zustandsdiagrammen und Fensterentw rfen jedoch als praxistauglich erweisen w rde die Erweiterung des Tools in dieser Richtung eine Bereicherung bedeuten 40 4 Anforderungen 4 1 Einleitung Das im Rahmen diese Bachelor Arbeit zu implementierende Tool SUIT wird in die Entwicklungsumgebung Miscrosoft Visual Studio NET integriert SUIT verf gt nicht ber einen eigenen GUI Builder sondern nutzt die Funktionalit ten des GUI Builders von Visual Studio Die Implementierung eines eigenen GUI Builder wird im Rahmen dieser Bachelor Arbeit nicht geplant In Abschnitt 4 2 werden alle funktionalen Anforderungen an SUIT beschrieben und klassifiziert In 4 3 folgt ein Fazit 4 2 funktionale Anforderungen SUIT ist in drei Module aufgeteilt gt Zustandsdiagramm Editor Mit dem Zustandsdiagrammeditor werden das komplette dynamische Verhalten einer Benutzungsschnittstelle und die Gestaltung ihrer graphischen Oberfl che beschrieben Der Zustandsdiagrammeditor ist der wesentliche Teil dieser Arbeit Es handelt sich hierbei um einen graphischen Editor zum Editieren von Zustandsdiagrammen mit der Besonderheit dass der Editor den integrierten GUI Builder von Visual Studio nutzt gt Simulator Wurde das dynamische Verhalten ein
94. erwendung der Metapher Werkzeug und Material des WAM Ansatzes versucht die Materialien zu erkennen und das Gesamtsystem in einzelne Werkzeuge aufzuteilen Die Werkzeug und Material Metapher des WAM Ansatzes hat sich bei den immer komplexer werdenden Anwendungen als sehr fruchtbar erwiesen Denn je gr er ein Softwaresystem ist desto schwieriger wird es f r den einzelnen das Ganze komplett zu berblicken Somit w rde die Untergliederung eines Gesamtsystems in Werkzeugen die Verst ndlichkeit erh hen und die Komplexit t reduzieren 77 Der detaillierte Entwurf von Materialien ist in diesem Abschnitt kein prim res Ziel Der Schwerpunkt liegt auf der interaktiven Pr sentation und Handhabung des Materials Diese fallen in die Zust ndigkeit des Werkzeugs Ein Werkzeug pr sentiert Materialien gem ihrem Verwendungszusammenhang und erm glicht ihre Sondierung und Manipulation Es vergegenst ndlicht immer wiederkehrende Arbeitst tigkeiten welche an Materialien ausgef hrt werden Materialien k nnen nach Z llighoven 1998 sondiert und manipuliert werden Sie werden durch Werkzeuge bearbeitet Da es sich hier nicht um ein komplexes System handelt bietet das Anwendungsfalldiagramm ausreichend Anhaltspunkte f r Werkzeuge so dass in diesem Abschnitt auf die Beschreibung von Szenarien verzichtet wird Das Gesamtsystem hier Pizzaservicesystem wird zun chst in einem Anwendungsfalldiagramm siehe Abb 35 dargestellt in dem die Zusamm
95. estellung abgeben use Kunde gt Y uses Kunde anlegen Dante uc a Kunde l schen Kundendaten pflegen Angebot ndern uses USeS Angebot suchen K Angebot anlegen Y uses uses uses Angebot l schen D Bestellung ausliefern Berichte anzeigen Fahrer Abb 35 Anwendungsfalldiagramm Pizzaservice Mitarbeiter 7 3 2 Identifikation der elementaren Werkzeuge Das auf der vorgenommenen Ist Analyse beruhende Anwendungsfalldiagramm des zu entwickelnden Pizzaservicesystems ist in Abb 35 aufgef hrt Dem Anwendungsfalldiagramm kann eine Gruppierung also gleichartige Handlungen an hnlichen Datens tzen entnommen werden Diese bilden die ersten Anhaltpunkte f r Werkzeuge Die Anwendungsf lle Kunden suchen Kunden anlegen Kunden l schen und Kunden pflegen sind zusammengeh rige Anwendungsf lle hier werden Kundendaten bearbeitet Die Anwendungsf lle Angebot suchen Angebot ndern Angebot anlegen und Angebot l schen bearbeiten Angebotsdaten Dies legt nahe Kundendaten und Angebotsdaten als Materialien zu betrachten Dieser Betrachtungsweise nach k nnen zwei elementare Werkzeuge Kundenverwaltungswerkzeug und Angebotsverwaltungswerkzeug identifiziert werden Pr sentation und Manipulation von Kundendaten und Angebotsdaten sind ausschlie lich ber diese Werkzeuge m glich Kundendaten z B k nnen ber das Kundenverwaltungs
96. estellungDetails cs oder KundenListe cs sein muss Wenn also der Code nicht allgemein in der Aktion geniert werden kann so w re es als zweite M glichkeit die Codegenerierung nach M glichkeit B zu untersuchen M glichkeit B geniert den Code f r den Aufruf der Folgemaske in der vorigen Maske Im Beispiel der Abb 55 w rde das bedeuten dass in der Maske Hauptmen cs selbst der Code hinterlegt wird der daf r sorgt dass beim Klicken auf Bestellung die Maske Bestellungsliste cs und beim Klicken auf Kunden die Maske Kundenliste cs aufgerufen werden In der Maske Hauptmen cs den Code f r den Aufruf zu erzeugen scheint also in diesem Fall gut zu funktionieren Funktioniert dies auch in den meisten F llen so gibt es auch hier wieder Masken wo die Codeerstellung des Aufrufs der Folgemaske nicht in der Maske selbst erzeugt werden kann In Abb 55 wird die Maske Kunden cs in zwei Zust nden verwendet W rde nun also der Code der Folgemaske in der Maske Kunde cs hinterlegt werden so w re nicht klar was die Folgemaske sein wird im Falle das Speichern geklickt w rde Speichern Click f hrt bei dem Zustand KundeBestellung zur ck zu BestellDetails cs w hrend beim Zustand Kunde zu KundenListe cs gegangen werden muss Der Code f r den Aufruf der Folgemaske w rde also bei Kunden cs dazu f hren dass f r Speichern Klick keine klare Folgemaske definiert werden kann ohne zu ber cksichtigen in welchem Zustand wir uns gerade befinden Dieses Pr
97. ette ist sowohl bei Jigloo als auch beim GUI Builder von Visual Studio gut erreichbar Die Bedienung des GUI Builders in Visual Studio ist sehr praktisch Hier werden im Gegensatz zu Jigloo mehrere Operationen zum Einf gen von GUI Komponenten auf dem Designer unterst tzt Ein weiterer Vorteil in der Bedienung bei Visual Studio liegt eindeutig in der M glichkeit die Gr e einer GUI Komponente direkt beim Erzeugen beliebig zu definieren so dass sie nicht nachtr glich ge ndert werden muss 2 4 4 Fazit Die Ergebnisse der Analyse haben dazu gef hrt dass wir uns f r Visual Studio entschieden haben Der Hauptgrund ist die Flexibilit t die durch die M glichkeit der Programmierung und der Codegenerierung in mehreren Sprachen gegeben ist Der Anwender kann die 24 Programmiersprache w hlen die f r eine Probleml sung am besten geeignet ist er ist in Grenzen nicht an eine bestimmte Programmiersprache gebunden Au erdem ist der GUI Builder in Visual Studio ein fester Bestandteil der Entwicklungsumgebung und erfordert somit keine weiteren Installationen Dar ber hinaus bietet der GUI Builder in Visual Studio dem Anwender mehr M glichkeiten bei der Bedienung Der Anwender ist somit nicht an eine bestimmte Vorgehensweise zum Erzeugen von GUI Komponenten gebunden 2 5 Zustandsdiagramm Editoren Im Rahmen dieser Analyse haben wir uns auf die Zustandsdiagramm Editoren von Together Together und MS Visio Visio2003 beschr nkt Die gro e
98. frei erh ltlich Die Entwicklungsumgebung unterst tzt die Entwicklung von Anwendungen f r die Net Plattform Es werden unter anderem die Programmiersprachen Visual Basic C J und C unterst tzt 22 Oberfl che gui_test Microsoft Visual J NET Entwurf Formi jsl Entwurf la xl Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Format Extras Fenster Hilfe U Sug eeoa p Debug vi rd Nue Beste aa az E ls oa Et Toolbox A x Objektbrowser Startseite Form1 jsl Entwurf 4 b x Projektmappen Explorer qui_test 4 X Daten calla Komponenter T Projektmappe gui_test 1 Projekt Windows Forms S EH gui_test Zeiger El ba Verweise 5 EES W AssemblyInfo jsl A Form1 jsl ab Button bi TextBox A Label B MainMenu M CheckBox RadioButton GroupBox E PictureBox i Panel ES ListBox E checkedListBox o Projektmappen Ex 24 Klassenansicht ComboBox e 57 DataGrid Eigenschaften a 3 ListView Formi System Windows Forms Form v 23 TabControl i E 7 B TreeView Font Microsoft Sans Serif 4 Zwischenablage v ForeColor MM Controlrext Allgemein FormBorderStyle Sizable RightToLeft No Ausgabe 2x Text Formi D Ei Text Der Text im Steuerelement Y Aufgabenliste El Ausgabe I Eigenschaften Dynamische Hilfe Bereit Abb 14 integ
99. gegeben werden abh ngig vom Dialog eine Inkarnation festzulegen F r eine fr he Simulation und damit ein fr hes Prototyping ist die Betrachtungsweise der Inkarnationen der Masken noch unn tig Teilweise ist es in dieser fr hen Phase sogar noch nicht mal bekannt ob und welche Inkarnationen f r eine Maske zu erwarten sind In den sp teren Etappen der Softwareentwicklung ist es jedoch in einigen F llen unerl sslich Inkarnationen f r die Masken zu bestimmen sofern aus dem Zustandsdiagrammmodell der Code f r Dialogwechsel automatisch generiert bzw zur Laufzeit der Dialogwechsel bestimmt werden soll Da die aktuelle SUIT Version den Dialogwechseln nicht automatisiert und diese Aufgabe dem SUIT Anwender berl sst siehe dazu Abschnitt 9 2 4 ist die aktuelle Zustandsdiagrammnotation ohne die Informationen ber die Inkarnationen der Masken v llig ausreichend Die fehlende M glichkeit mit der SUIT Zustandsdiagrammnotation Informationen ber die Inkarnationen der Masken abzulegen kann sobald der SUIT Anwender die Dialogwechsel in seinem Benutzungsschnittstellensystem einprogrammiert f hren dazu dass das Zustandsdiagrammmodel seine Konsistenz verliert In den sp teren Phasen ist also damit zu rechnen dass die Konsistenz zwischen Modell und Benutzungsschnittstelle dadurch verloren geht 10 3 Fazit Die n chste Version von SUIT kann dahingehen erweitert werden das sie Hierarchien unterst tzt Dies bietet dem Anwender die M gl
100. gn Serialization Namespace In SUIT sind beide Klassen Zustandsdiagramm und ZustandsdiagrammElement von Component abgeleitet und erben somit die Funktionalit t der von Component implementierten Klassen F r die berf hrung der CodeDom Struktur in Programmiercode dienen die in den System CodeDom Compiler Namespace bereitgestellten Funktionen System CodeDom Com piler Namespace enth lt Klassen f r das Generieren und Kompilieren von Quellcode in einer unterst tzten Programmiersprache Das Zustandsdiagramm ist in SUIT Sprachunabh ngig realisiert Dies wird durch die Benutzung 62 von CodeDom von Net erm glicht Im Folgenden wird ein Ausschnitt des in SUIT generierten Codes f r das Zustandsdiagramm aus Abb 30 gezeigt startzustand zustand Maskel cs suchen Click suchen Maske2 cs Abb 30 Zustandsdiagramm public class Beispiel SUIT ZustandsdiagrammEditor Zustandsdiagramm private SUIT ZustandsdiagrammEditor Startzustand startzustandl private SUIT ZustandsdiagrammEditor Zustand zustandl private SUIT ZustandsdiagrammEditor Zustandsuebergang zustandsuebergangl region Zustandsdiagramm Designer generated code private void InitializeComponent this startzustandl new SUIT ZustandsdiagrammEditor Startzustand this zustandl new SUIT ZustandsdiagrammEditor Zustand this zustandsuebergangl new SUIT ZustandsdiagrammEditor Zustandsuebergang startzustandl this startzustandl BackColor
101. halb des Zustandsdiagramms wurde eine Maske zugeordnet Zu Beginn befindet sich die Benutzungsschnittstelle im Zustand bereit zur Suche um die zu bearbeitende Tupelmenge durch den Benutzer spezifizieren zu lassen Angebotssuche Suchkriterien eingeben Bestellnummer Name Kategorie Preis zur ck Suchen Abb 37 Maske der Angebotsuche Durch das Bet tigen der Taste suche in der Maske der Angebotssuche Abb 37 wird die Aktion Angebot_suchen angesto en Die Benutzungsschnittstelle gelangt in den Folgezustand Anzeige der Angebotsdaten Dieser ist der zentrale Zustand des Zustandsdiagramms von dem aus die verschiedenen Operationen wie Angebot ndern Angebot l schen usw ausgef hrt werden k nnen Anbebotsanzeige Gefundene Angebote anlegen loschen bearbeiten zur ck 81 Abb 38 Maske der Angebotanzeige Durch das Bet tigen der Taste anlegen in der Maske der Angebotanzeige Abb 38 wird die Aktion geheZu_angebot_anlegen angesto en Die Benutzungsschnittstelle wechselt in den Zustand bereit zum Angebotsanlegen hier sind nur noch der Abbruch oder das Erfassen m glich Beide Tasten in der Maske Angebotserstellung in Abb 39 sto en jeweils eine Aktion an und f hren zum Zustand Anzeige der Angebotsdaten zur ck Angeboiserstellung Angebotdaten pflegen Bestellnummer Name Kategorie Preis Beschreibung abbrech
102. hen Suchkriterien Da Martina sich erst einmal einen grunds tzlichen berblick ber ihr Themengebiet verschaffen m chte gibt sie im Eingabefeld suchen den Text Dinosaurier ein und klickt mit der Maus den Button suche an Kurze Zeit sp ter pr sentiert das System die Ergebnisse in einer Liste mit mehreren Eintr gen Neben interessanten Titeln wie australische Dinosaurier finden sich darin auch weniger relevante Titel Martina klickt auf den Titel eines f r ihr Referat n tzlich erscheinenden Buches notiert sich die Signatur und geht zu den Regalen hin ber 8 3 Testverlauf Als Kriterien f r die Auswahl der Testpersonen legten wir fest dass sie Informatik oder technische Informatik studieren und die Vorlesung Software Engineering besuchen oder 91 besucht haben Auf diese Weise sollten nur Testpersonen ausgew hlt werden die Kenntnisse in der Modellierung und in Prototyping mitbringen Vor dem Usability Test fand ein Vorgespr ch statt Anhand eines kleinen mit SUIT gestalteten Beispiels wurde die Testperson mit der Methode Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen zu modellieren und mit der Bedienung von SUIT vertraut gemacht Anschlie end erhielt die Testperson die Aufgabe die sie selbst ndig zu l sen hatte Nach jedem Test fand dann ein Nachgespr ch statt in dem die Testperson einzeln ber die im Folgenden genannten Punkte befragt wurde Das Nachgespr ch l sst sich in drei Ha
103. hen wird auch das Verhalten der Testperson aufgezeichnet Zu diesem Zweck sind im Usability Labor mehrere Kameras aufgestellt W hrend der Aufnahme kann die Testperson durch lautes Denken ihre Eindr cke bei der Benutzung von SUIT schildern w hrend sie die Aufgabe l st Im Usability Labor werden diese Schilderungen durch Ton und Videoaufnahmen aufgezeichnet Aus den spontanen u erungen der Testperson kann man bei der Auswertung Schl sse dar ber ziehen wie die Testperson mit SUIT zurechtgekommen ist Au erdem findet nach jedem Test ein Nachgespr ch statt in dem die Testperson ihre Erfahrungen mit SUIT schildern und Verbesserungsvorschl ge u ern kann Insbesondere kann sie Auskunft dar ber geben an welchen Stellen sie Schwierigkeiten bei der Benutzung hatte All diese Beobachtungen und u erungen flie en in die Auswertung des Usability Tests ein 8 4 1 Erste Testperson Die Testperson hat noch keine Erfahrung mit der Entwicklungsumgebung Visual Studio Sie hat bereits einmal Zustandsdiagramme erstellt jedoch nicht im Zusammenhang mit Benutzungsschnittstellen und nicht in der Kombination von Zustandsdiagrammeditor und GUI Builder wie sie in SUIT vorliegt Bisher hat ihr eine Methode oder Vorgehensweise gefehlt mit der sie schnell und einfach Prototypen erstellen kann Die Kombination von GUI Builder und Zustandsdiagrammeditor und somit die M glichkeit Zust nden Masken zuzuordnen ist ihr zug nglich und erscheint ihr sehr i
104. hnittstelle besteht aus einer Vielzahl einzelner Elemente wie z B der Handhabung des Dialogwechsels siehe Abschnitt 2 2 5 und der Analyse der Benutzereingaben etc Alle Elemente zu ber cksichtigen ist wie bereits erw hnt nicht unser prim res Ziel Wir verzichten z B auf die Auswertung von Benutzereingaben wie sie Denert in Abschnitt 2 2 6 vornimmt Die Simulation eines Systems an seiner Benutzungsschnittstelle soll eine vertraute Anschauung der Bildschirmmasken und abl ufe bieten Um das dynamische Verhalten einer Benutzungsschnittstelle in den fr hen Phasen der Softwareentwicklung zu beschreiben ist die Auswertung von Benutzereingaben nicht erforderlich da zu diesem Zeitpunkt die dahinter stehende Funktionalit t noch nicht detailliert bekannt ist Von uns werden ber cksichtigt e Zustandsdiagramme Diese beschreiben das dynamische Verhalten einer Benutzungsschnittstelle Zustandsdiagramme bestehen aus Zust nden und Zustands berg ngen Bei den Zust nden unterscheidet man zwischen normalen Zust nden und dem Anfangzustand e Aktivit t ist eine Operation die beim Eintritt in einem Zustand ausgef hrt werden Es handelt sich hierbei um einen Verweis auf dem den Zustand zugeordneten ausf hrbaren Maskencode e Ereignisse dies stellt bei unserem Verfahren die Entsprechung zu den virtuellen Tasten Denerts dar Durch ein Ereignis wird eine Information an das System bertragen Ein Beispiel f r ein Ereignis k nnte z B das Be
105. hode Color backColor Die Hintergrundfarbe die hinter den Elementen ist Wird oft gebraucht f r das Reversible Feedback Point screenOffset Dieses Offset kann zu den Elementkoordinaten addiert werden um sie zu den globalen Koordinaten zu konvertieren so dass mit diesen Koordinaten die DrawReversible Methode in ControlPaint direkt verwendet werden kann Point mouseOffset Das aktuelle Offset von der Maus zur der Position wo der Drag begonnen hat Point scrollPos Die Scroll Position auf die umgerechnet werden soll Diese Position ist bereits vom Zoomfaktor ber cksichtigt worden und kann einfach zum Punkt addiert werden Float Zoom der Zoomfaktor auf den umgerechnet werden soll Point initialPoint Der Punkt an dem dieser Drag initialsiert wurde zu dem Zustandselement in der Y Richtung Tabelle 14 Parameter von DrawDragFeedback Drag public abstract void Drag object hitObject int x int y Point initialPoint Drag wird aufgerufen am Ende eines erfolgreichen Drags um die neue Position Gr e eines Zustandselements zu aktualisieren Die X und Y Werte sind relativ zu dem Drag so dass sie einfach zu den Koordinaten des Komponents hinzuaddiert werden k nnen Das Objekt dass von GetHitTest zur ckgeliefert wurde wird weitergegeben so dass die Methode Drag wei ob die Komponente vergr ert verschoben usw werden soll Parameter Beschreibung object hitObject
106. ichen Automaten kann daher jedem Zustand eine Maske zugeordnet werden F r eine Anwendung dieses Ansatzes ist eine ber zeichnerische Modelleditoren hinausgehende Unterst tzung durch ein Werkzeug sinnvoll Ein Schritt in diese Richtung ist die Implementierung eines graphischen Editors der die zustandsbasierte Modellierung von 30 Benutzungsschnittstellen unterst tzt Der Editor sollte dar ber hinaus ber einen integrierten GUI Builder zur Gestaltung der graphischen Oberfl che verf gen Auf dieser berlegung basiert die Idee zu SUIT Dieses Werkzeug bereichert die Visual Studio Umgebung um einen Zustandsdiagrammeditor mit dem integrierten GUI Builder von Visual Studio eine Simulationskomponente und einen Codegenerator Siehe 1 2 SUIT bietet damit die M glichkeit das dynamische Verhalten von Benutzungsschnittstellen auf Basis von Zustandsdiagrammen und Fensterentw rfen zu modellieren das entstandene Modell zu simulieren und aus dem Modell das Codeger st f r eine Fassade in einer Net Sprache zu generieren Die Simulationsm glichkeit erm glicht eine explorative Vorgehensweise Ziel ist es das Systemverhalten unter dynamischen Aspekten aufzuzeigen Es wird ein Prototyp als Kommunikationsmedium entwickelt der dazu dienen soll die Anforderungen an das zu implementierende System zu verstehen und zu verfeinern Durch die Visualisierung anhand der Simulation erh lt der Anwender ein Bild des zuk nftigen Systems und kann somit f
107. ichkeit sein Modell zu strukturieren um bersichtlichkeit in gr eren Projekten zu gew hrleisten Die Konsistenzerhaltung zwischen dem Modell und der Benutzungsschnittstellen k nnte ein weiteres wichtiges Ziel der n chsten SUIT Version sein Hierf r m sste die aktuelle SUIT Zustandsdiagramm Notation um die Modellierungsm glichkeit von dialogablaufsteuernden Aktionsr ckgabewerte und Inkarnationen der Masken erweitert werden Dialogablaufsteuernde Aktionsr ckgabewerte k nnen mit der Einf hrung der Statecharts W chter Bedingung Harel 1987 realisiert werden Es sollte bei diesen Erweiterung immer ber cksichtig werden dass die aktuellen positiven Eigenschaften von SUIT wie z B die M glichkeit in den fr hen Etappen der Softwareentwicklung zu Simulieren nicht verloren gehen 111 11 Resume Im Rahmen dieser Bachelor Arbeit wurde SUIT entwickelt In SUIT kann das dynamische Verhalten einer Benutzungsschnittstelle mit Hilfe von Zustandsdiagrammen und Fensterentw rfen modelliert werden Das Modell einer Benutzungsschnittstelle kann in SUIT simuliert und aus dem Modell automatisch Code in Form einer Fassade generiert werden Die Modellierung von Benutzungsschnittstellen mit endlichen Automaten und Fensterentw rfen wird in der Literatur abgesehen von ein paar Ausnahmen wie Denert in Denert 1992 kaum angesprochen Auch ergab die im Rahmen der Marktanalyse durchgef hrte Suche nach einem existierenden Tool dass die Methode der Benut
108. icht nur als Vorlage dienen sondern gewinnbringend f r die Weiterentwicklung einer Benutzungsschnittstelle eingesetzt werden Ziel ist es also die Modellierung von Benutzungsschnittstellen mehr in den Softwareentwicklungsproze zu integrieren und damit den Nutzen eines Modells zu steigern 1 2 Vision 1 2 1 Methode Beim Entwurf von Benutzungsschnittstellen geht ein Entwickler gew hnlich so vor dass er ein Modell ihres Verhaltens entwirft er skizziert bildhaft die Masken und legt die Reihenfolge ihres Ablaufs fest Abb 1 zeigt ein m gliches Beispiel solch eines Modells Buchsuche 1 Buch 2 Buch Abb 1 Literatur Suche Abb 1 beschreibt die Dialogabl ufe der Literatur Suche in Form von Masken Die Benutzungsschnittstelle befindet sich zu jedem Zeitpunkt in einer von mehreren Masken Benutzereingaben f hren dazu dass zwischen den Masken hin und her navigiert werden kann Die Skizze der Maske Buchsuche im Beispiel besitzt ein Eingabefeld in dem der Suchbegriff eingegeben wird Klickt man auf den Button Suche so gelangt man in die n chste Maske Buchliste Hier werden alle zu dem Suchbegriff passenden B cher aufgelistet Wird nun ein Buch aus der Liste ausgew hlt wechselt man durch einen Klick auf Details zu der Folgemaske Buchinfo in der die Details des ausgew hlten Buches angezeigt werden Ein solches Modell wie das beschriebene entsteht intuitiv allein aufgrund des Versuchs die Abl ufe in einer Benu
109. ige ana 82 Abb 39 Maske der Angebotserstellung mortis lic desa iiageciiirbiciia n 82 Abb 40 Maske der Angebotsdatenpflege oooocconnncccnoncccnonccononcnononcnonnncnonnncnononcnonnccnnnnccnnnncnnns 82 Abb 41 Diagramm der Benutzungsschnittstelle des Kundenverwaltungswerkzeugs 83 ADbb 42 Maske der Kundens che od een 84 Abb 43 Maske der Kundenanzeigen een a 84 Abb 44 Maske der Kundenerstell une essen en Besen 85 Abb 45 Maske der Kundenpflese u A ELLE 85 Abb 46 Maske der Bestellung ask 86 Abb 47 Startmaske des Gesamtsystems Pizzaservice uursnscssssesssssenssnnennsnennnnnnnnnennnnnannnn 87 Abb 48 Diagramm der Benutzungsschnittstelle des GesamtsysteMS ooooocccnoncccnocccononccnnnnnnnns 88 Abb 49 Ein Ausschnitt der Fassade zum Zustandsdiagramm in Abb 48 89 Abb 50 Pizzasystem in der Simulationsansicht von SUIT ursersnesnnennnnessneesnneennen 89 Abb 51 L sung der ersten Tesiperson ans eeln 94 Abb 52 L sung der zweiten Testperson anussah anna 95 Abb 53 L sung der dritten Testperson anal e ee 96 Abb 54 L sung der vierten Testpers n cintia tania derribada 97 Abb 55 SUIT Zustandsdiagrammbeispiel 200022000022000nssnsensennnnnnnennnneennnnnnnn ann 101 Abb 56 Darstellung eines Login Verfahren in Form eines Interaktionsdiagrammes 108 Abb 57 Darstellung eines Login Verfahren in SUIT Zustandsdiagramm Notation 108 Abb 58 Login Verfahren
110. im L schen von GUI Komponenten werden Best tigungsfenster angezeigt die im Falle einer L schung mit OK best tigt werden m ssen Wenn mehrere GUI Komponenten erzeugt werden m ssen wirkt diese st ndige Abfrage st rend und macht die Bedienung unkomfortabel Codegenerierung Durch die Formatierung mit Hilfe von Tabulatoren l sst sich der erzeugte Java Code bersichtlich und anschaulich darstellen private void initGUI try setDefaultCloseOperation WindovConstants DISPOSE ON CLOSE getContentPane setLayout null jButtoni new JButton getContentPane add jButtoni jButtonl setText jButtonl jButtonl setBounds 28 21 140 28 jButton2 new JButton getContentPane add jButton2 B jButton2 setText jButton2 jButton2 setBounds 217 21 140 25 setSize 400 300 catch Exception e e printStackTrace Abb 12 Von Jigloo generierter Code Ausschnitt einer GUI mit 2 JButtons Abb 12 stellt einen generierten Code Ausschnitt von Jigloo dar Die dazugeh rige Maske besteht aus zwei JButtons JButtonl A und JButton2 B In Jigloo werden alle zu einer erzeugten GUI Komponente geh rigen Codestellen in geschweifte Klammern gesetzt Wird z B der JButtonl entfernt so wird der dazugeh rige Code Block A gel scht Manuell generierter Code innerhalb dieser Klammernbl cke gehen beim L schen der betreffenden GUI Komponente daher verloren 21 private void initGUI tr
111. in SUIT Zustandsdiagramm Notation Erweitert 109 115 Tabellenverzeichnis Tabelle 1 Notwendige Anforderungen an SUIT 2uc22uursunesnneennnensnersnnennnennnnnsnnen nennen 18 Tabelle 2 Neu erkannte Anforderungen aus Visio und Together uuesssssnesenenenn 28 Tabelle 3 Die Anforderungen an SUIT una usa a sen en 46 Tabelle 4 Parameter von draw n E ini a 66 Tabelle 5 Parameter von DrawCreateDragFeedback 240422440422000sssnnnnnnnenennnenen 68 Tabelle6 Paramelerson delle 2a As 69 Tabelle 7 Parameter von initialize rss pa an 69 Tabelle 8 Statische Variablen der Klasse ZDiagrammElementDesigner e 70 Tabelle9 Parameter von Gte is 71 Tabelle 10 Parameter von ds rare 71 Tabelle LI Parameter VON GE CUE ale 12 Tabelle 12 Parameter von DrawAdornments 2200222000220000ssnsonssnnenssnnnnnnnnnnnnnnnnnanennnanenn 13 Tabelle 13 Parameter von DrawDragFeedback oooonoconononncnonnnonnonocnnnnonnoonccnonocononoconnnec nnoccnos 74 Tabelle 14 Parameter von Di ii 74 Tabelle 15 Parameter von onClick aiii is 75 116 Index A ARONA A AA id A 12 13 30 31 33 34 35 36 37 38 40 e TR 11 12 38 39 Anwendungsfalldiagramm ooocococcccccccncocnoncncnnnnnnnnccnnnnnnonnncn conca nrnnn nena nnnnncnnrnnninincnnenicn 76 78 79 ATENITEKIUR re di sd 48 49 50 51 52 53 B Benutzereingaben s npn ie a A AL fe 8 13 36 40 Benutzungsschnittstelle
112. ind mit virtuellen Tasten siehe Abschnitt 3 3 2 beschriftet Aktionen werden dadurch ausgel st dass ein bergang stattgefunden hat Zwischen zwei Zust nden k nnen eine bis mehrere Aktionen ausgef hrt werden Im Unterschied zu den endlichen Automaten werden Aktionen in einem Interaktionsdiagramm als eigenst ndige Elemente in Form eines Rechteckes dargestellt Eine Aktion kann mehrere Ausg nge besitzen Jeder Ausgang ist mit einem Aktionsergebnis versehen 31 Im Folgenden wird in Abb 17 das Interaktionsdiagramm eines Geldausgabeautomaten aus Denert 1992 beispielhaft dargestellt GA gt Ger t geschlossen nok Scheckkarte pr fen ok Ger t Ger t ffnen schlie en Abbruch 2 Ghz nok Geheimzahl pr fen ok 7 Geheimzahl ok Kto Kontostand drucken Abbruch 01 Zahlungsbereit B Geld ausgeben Abb 17 Interaktionsdiagramm eines Geldausgabeautomaten aus Denert 1992 Abbruch 3 Aus st Neben der graphischen Notation in Form von Interaktionsdiagrammen benutzt Denert aus Gr nden der Ubersichtlichkeit einen Interaktionsdiagramm Code um das Modell exakter zu 32 spezifizieren und es nicht mit Details und Sonderf llen zu berladen Im Interaktionsdiagramm Code werden alle Zust nde des Interaktionsdiagramms angefangen vom Initialzustand aufgelistet F r jeden Zustand werden alle ausgehenden Zustands berg nge erfasst und die durch sie angesto enen Aktionen sowie der Folgezustand beschrieben Ein Inter
113. ine bestimmte Reihenfolge der Arbeitsabfolgen vor Abb 8 beschreibt die g ngige Vorgehensweise Wichtig ist dass die Anforderungen an eine Benutzungsschnittstelle erkannt worden sind um daraus ein Modell ihres dynamischen Verhalten in SUIT modellieren und aus diesem einen Prototyp generieren zu k nnen Ein detailliertes Verst ndnis der Anforderungen ist jedoch keine Vorraussetzung da SUIT aus einem Modell einen Prototyp erstellt um diesen dem Anwender fr hzeitig vorzuf hren und mit ihm die Anforderungen der Benutzungsschnittstelle abzustimmen 15 In diesem Tool werden Dialogabl ufe der bereits identifizierten Werkzeuge in Form von Zustandsdiagrammen modelliert und den Zust nden Bildschirmmasken zugeordnet Das Tool generiert aus dem entstandenen Modell Code Au erdem kann das Modell simuliert werden Der praktische Einsatz von SUIT wird in der Fallstudie siehe Kapitel 7 detailliert beschrieben 1 3 Aufbau der Arbeit Im zweiten Kapitel wird die Notwendigkeit der Realisierung von SUIT begr ndet Im ersten Schritt wird eine Marktanalyse unternommen die feststellen soll ob bereits Tools f r die Erzeugung von Benutzungsschnittstellen und Fensterentw rfen auf dem Markt existieren Da diese Untersuchung zu keinem positiven Ergebnis kommt werden im zweiten Schritt auf dem Markt existierende Komponenten von SUIT GUI Builder und Zustandsdiagramm Editor analysiert Die n chsten drei Kapitel dienen der theoretischen Grundlegung der
114. ines Prototyps in SUIT aus ihrer Sicht sehr schnell und einfach vonstatten Die Erstellung 94 von Prototypen in Form von Zustandsdiagrammen und Fensterentw rfen fiel der Testperson nicht schwer Die Testperson bewertet es sehr positiv dass in der Fassade einprogrammierter Code durch eine nderung im Zustandsdiagramm nicht verloren geht Die Bedienung in SUIT weist aus Sicht der Testperson keine M ngel auf W re SUIT nicht in Visual Studio integriert w rde sie das Tool gerne benutzen F r die L sung der Usability Aufgabe hat die Testperson dreizehn Minuten gebraucht siehe CD Usability test02 avi So sieht das Ergebnis der Testperson aus CD Usability Test 2 Test 2 sIn startzustand En zustan SucheEingabe cs Ergebnisseanzeigen cs g g OsePI3EOD 7 4919 Luopag zustand Detail nzeige cs Abb 52 L sung der zweiten Testperson 8 4 3 Dritte Testperson Die Testperson bringt keine Erfahrung in Visual Studio mit Sie beurteilt die Umgebung als gew hnungsbed rftig und zu berladen F r die Erstellung von Zustandsdiagrammen hat die Testperson bisher Together oder Poseidon benutzt Au erdem besitzt sie Erfahrung mit der Entwicklung von Prototypen sie hat diese allerdings immer manuell erstellt was im Verh ltnis zu SUIT mehr Programmieraufwand erfordert hat Nach Aussage der Testperson werde mit SUIT ein einfaches Design erm glicht Die Simulation biete ihr eine gute Hilfe Die Modellierung in F
115. irtual und kann in einer von ZDiagrammElementDesigner abgeleiteten Klasse berschrieben werden Parameter Beschreibung object hitObject Ein Objekt dass von einer GetHitTest Methode zur ckgeliefert wurde Tabelle 12 Parameter von GetCursor 22 DrawAdornments public abstract void DrawAdornments Graphics g bool primary Die Methode DrawAdornments wird aufgerufen wenn das Element selektiert wurde Diese Methode zeichnet den Selektionsrahmen um das Element Parameter Beschreibung Graphics g Das Graphics Objekt auf das der Selektionsrahmen zu zeichnen ist Bool primary primary ist true wenn das selektierte Element das prim re Selektierte Element ist Dieser Parameter ist bei Mehrfachauswahl Interessant Tabelle 13 Parameter von DrawAdornments DrawDragFeedback public abstract void DrawDragFeedback object hitObject Color backColor Point screenOffset Point mouseOffset Point scrollPos float zoom Point initialPoint DrawDragFeedback wird benutzt um den Drag Feedback Abb 34 beim Resizing f r den User aufzuzeichnen DrawFeedback sollte so zeichnen das der erste Aufruf das Feedback an der angegebenen Position zeichnet und der zweite Aufruf es wieder l scht Siehe dazu DrawCreateDragFeedback Hier k nnen die Methoden der Klasse ControlPaint benutzt werden da diese Methoden wie DrawReversibleLine oder DraReversibleFrame unterst tzt
116. ist wenn das Element in dem bergebenden Rechteck r enthalten ist ansonsten false Parameter Beschreibung Rectangle r Das Rechteck das den Bereich beschreibt in dem berpr ft wird ob dieses Element in diesem Bereich enthalten ist Tabelle 11 Parameter von IsInRect 71 Fallstudie CSharp Microsoft Visual C NET Entwurf test cs Entwurf d laj x Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe a 0 40 iren oa dA p Debug rg aProvider DBABRL3 Beat amaia Ss je gt a EH Toolbox 2 X urf Kunde KundeNeu cs Entwurf AngebotlAngebotNeu cs Entwurf Angebot Angebot cs Entwurf test cs Entwurf Angebot amp 4 X Projektmappen Explorer Fallstudi AX Zustandsdiagrammeit Bess 3 8 h Zeiger H 1 Projektmappe Fallstudie CSharp 1 Projel 3 Zustand E EN Fallstudie CSharp Startzustand E E verweise 2 Zustandsueb E Angebot ustandsuebergang 8 Angebot cs amp Zustand 8 AngebotNeu cs Startzustand ES Angebotsanzeige cs 3 Zustandsuebergang startzustand E Angebotserstellung cs Angebotspflege cs El Angebotssuche cs Bestellung B A Kunde 8 Kunde cs Kundenanzeige cs Kundenerstellung cs KundeNeu cs Kundenpflege cs ES Kundensuche cs B App ico CHH AssemblyInfo cs E Fassade cs zustand2 7 zustand
117. iste rechts im Fenster aus 5 Geben Sie den Namen der Action dann in dieses Feld ein HandleCreated ds Methodenname der Action die ausgef hrt werden soll Abbrechen OK 6 Best tigen Sie nun mit dem Button OK Ihr Zustands bergang sollte nun erfolgreich den neuen Event und Action zugewiesen sein 4 9 L schen von Elementen aus dem Zustandsdiagramm Bearbeiten Ansicht Projekt x R ckg ngig Strg Z Markieren Sie das zu l schenden Element im Zustandsdiagramm Designer und dr cken Sie entweder die Korb Strg C Taste entf oder w hlen das Men Bearbeiten gt L schen y aus N X L schen Entf 135 5 Fassadengenerierung Bevor die Fassaden Klasse generiert werden kann muss ein Zustandsdiagramm erzeugt und in der Design Ansicht ge ffnet werden siehe Abschnitt 4 1 ACHTUNG Bedenken Sie jedoch dass die Fassadengenierung in der vorliegenden SUIT Version nur C Projekte unterst tzt Um eine Fassaden Klasse zu genieren gehen Sie wie folgt vor 1 Markieren Sie das Zustandsdiagramm in dem Sie auf eine freie Stelle der Zeichenfl che des Zustandsdiagramm Designers anklicken 2 Im Eigenschaftsfenster sollte nun die Eigenschaften des Zustandsdiagramms erscheinen und unterhalb der Liste eine Option Fassade erzeugen zu finden sein Eigenschaften n X Zustandsdiagramm2 SUIT Zustandsdiagramn Y DynamicProperties E Fassade erzeugen Simulieren Diagramm als BMP ST
118. iten ein die Simulation in der Ansicht des Zustandsdiagramms 93 ablaufen lassen und die Dialogabl ufe anhand des von ihm modellierten Zustandsdiagramms nachvollziehen Dem Kunden hingegen der in der Regel weniger an Details interessiert sei k nnte daher die Simulation in Form einer blo en Abfolge von Masken so wie sie ihn sp ter als Software vorliegt pr sentiert werden In der gesamten Video und Tonaufzeichnung auch der Formulierung ihrer Eindr cke wirkt die Testperson entspannt sie erledigte die Testaufgabe sicher und ohne Schwierigkeiten Insgesamt hat die Testperson zweiundzwanzig Minuten f r die L sung der Usability Aufgabe ben tigt siehe CD Usability testOl avi Im Folgenden wird in Abb 51 das Ergebnis der ersten Testperson aufgezeigt CD Usability Test 1 Test 1 sIn startzustand Formi cs estarten Click suchen 77 zustand zustand2 y cHeckedListBox1 Click ausw Ergebnis cs Buchauswahl cs Abb 51 L sung der ersten Testperson 8 4 2 Zweite Testperson Die Testperson hat noch nicht mit der Entwicklungsumgebung Visual Studio gearbeitet Sie ist dieser gegen ber reserviert und abgeneigt sie zu benutzen Als in hohem Ma e st rend empfindet sie die Toolbox in Visual Studio die den Designer verdeckt Die Testperson bringt Erfahrung in der Zustandsdiagrammmodellierung mit sie hat auch bereits einmal Prototypen erstellt Vor dem Hintergrund dieser Erfahrung geht die Erstellung e
119. ktion f hrt die Suche aus Es bietet sich also an das Zustandsdiagramm um Informationen der auszuf hrenden Aktionen anzureichern Buchsuche Buchliste Suche_click suche Do Buchsuche Do Buchliste GUI GUI Details_click zeigelnfoFuerBuch Buchinfo Do Buchinfo GUI Abb 6 Zustandsdiagramm Literatur Suche um die Aktionen angereichert Wie in Abb 6 dargestellt wurde das Zustandsdiagramm aus Abb 5 um die Aktionen erg nzt Suche_click z B l st die Aktion suche aus Ist das dynamische Verhalten einer Benutzungsschnittstelle erstmal in der in Abb 6 beschriebenen Form er ffnet es uns eine neue M glichkeit die der automatischen Codegenerierung Informationen an einem Zustandsdiagramm k nnen dazu benutzt werden 12 um automatisch Code zu generieren Die im Zustandsdiagramm aus Abb 6 definierten Aktionen suche und zeigelnfoFuerBuch lassen sich automatisch genieren und die dahinter liegende Funktionalit t Kann dann sp ter implementiert werden Es kann also eine Klasse automatisch erzeugt werden die alle Methodendeklarationen enth lt eine so genannte Fassaden Klasse Die Fassaden Klasse ist eine Schnittstelle zwischen der Interaktionskomponente und der Funktionskomponente Sie soll dazu dienen Implementierungsdetails zu verbergen So ruft die Interaktionskomponente Funktionen der Fassaden Klasse auf Diese wiederum ruft Funktionen der Funktionskomponente auf Abb 7 Diese Methode bietet dar ber hinaus den
120. le Out public Fassade TODO F gen Sie hier die Konstruktorlogik hinzu Wie im Code ersichtlich wird wurde f r das Zustandsdiagramm aus Abb 30 eine Fassade automatisch generiert Das Zustandsdiagramm besteht aus einem Zustands bergang vom Startzustandl zu Zustandl Auf dem Zustands bergang ist die Aktion suchen definiert Die Aktion findet man als Methodenrumpf in der Fassade wieder 6 4 4 Das Anzeigen von Eigenschaften in einem Eigenschaftsfenster Eigenschaften xl startzustand1 SUIT ZustandsdiagrammeEditor Startzustand X 4 E Name startzustand1 El Konfigurationen DynamicProperties E Sonstiges BackColor _ White Bezeichnung startzustand1 BorderColor MM Black Groesse 100 100 GUIReferenz WindowsApplication3 Maske1 cs Info Position 97 196 TextColor MA Red Textfont Arial 10pt Abb 31 Eigenschaftsfenster im Zustandsdiagrammeditor 64 Instance Variablen die ber getter und setter Methoden verf gen werden standardm ig als Eigenschaften im Eigenschaftsfenster angezeigt Mit der BrowsableAttribute Klasse kann definiert werden ob eine Eigenschaft im Eigenschaftsfenster Abb 31 angezeigt werden soll Der Zustandsdiagrammeditor zeigt im Eigenschaftsfenster die Eigenschaften nicht an die mit dem Browsable Konstruktor mit dem Wert false gekennzeichnet sind Standardm ig ist jede Eigenschaft mit dem BrowsableAttribute Konstruktor mit dem Wert true markiert Werden
121. lle von SUITE les Dil 66 6 3 1 ZustandsdiasrammBlement ss eine 66 6 5 2 2DiastammElementDesipner a an ass 69 0 0 Fazit ee Be See 75 Ball Studie E E E E E E E T EE 76 Tl Eleinte ein E e A ee 76 TZ Ise Analyse eiin EL A a A 76 7 3 Schrittweise Erzeugung des Prototyps coooccononoccnoncccnoncnononncconnnccnnnnccnnncnononcnnnncnnonnccnnnos 77 Tl Vorgehensweise a era 77 7 3 2 Identifikation der elementaren Werkzeuge oocoococnnococooncccnnancnnoncnonnnccnnnncnnonncnnnnnnos 79 7 3 3 Entwicklung der Benutzungsschnittstelle auf Basis eines Zustandsdiagramms 80 7 3 4 Angebotsverwaltungswerkzeug u 222uusssseessnnnensnnnennnnnennnnnnnnnnnnsnnnsnsnnnensnensnennnnn 80 7 3 5 Kundenverwaltungswerkzeug PA en 83 7 3 6 Bestellverwalt ngskombiwerkzeug ua aaa kenn 86 7 3 7 Integration der Werkzeuge zum Gesamtsystem uucsssessssesssnnenssnnnsnenenennnnennn nn 87 TA FAZIT een we ee See 90 A O OO O 91 SS O 91 8 2 Usability Aufgabe nun E R A EEE 91 8 3 Testverlauf ss ee een 91 A N E E A 92 8 4 1 Erste Testperson iia pd E E E ua 93 8 42 Zweite Testpersoi i sne a e E E E E A OAE 94 SE Dritte E sense ER 95 SAA Vierte Tesiperson arena 96 BI Far ee en ee ee 97 M glichkeiten und Grenzen von SUIT uni een 99 OS Einleitine A A A E 99 9 2 M glichkeiten von SUIT unse Rein 99 9 Erlauterung der Grenzen lassen ee 100 9 3 1 Verteilte Benutzungsschnittstellen 22252 a Me 100 9 3 2 Codegenerierung f r den Aufruf des FolgezustandS
122. llt Must have A12 Zustands berg nge Knickpunkte Erf llt Should have A13 Notizfeld nicht erf llt Nice to have A14 Selektieren Erf llt Must have A15 Selektieren des gesamten nicht erf llt Should have Zustandsdiagramms A16 Undo redo Erf llt Should have A17 Mehrfachselektion von Zust nden Erf llt Should have A18 Rastermuster Erf llt Should have A19 Zoom Erf llt Should have A20 Neuanlegen von Masken Erf llt Must have 55 A21 Zuordnung von Masken per Doppelklick Erf llt Must have A22 Zuordnung von Masken im Property Fenster Erf llt Must have A23 ndern von Masken Erf llt Must have A24 Property Ansicht Zustand Erf llt Must have A25 Property Ansicht Startzustand Erf llt Must have A26 Property Ansicht Zustands bergang Erf llt Must have A27 Position Property Zustand Erf llt Must have A28 Position Property Startzustand Erf llt Must have A29 Gr e Property Zustand Erf llt Must have A30 Gr e Property Startzustand Erf llt Must have A31 Text Property Zustand Erf llt Must have A32 Text Property Startzustand Erf llt Must have A33 Masken Property Zustand Erf llt Must have A34 Masken Property Startzustand Erf llt Must have A35 Line Color Property Zustand Erf llt Nice to have A36 Line Color Property Startzustand Erf llt Nice to have A37
123. lt eine Zustandsdiagrammelement Komponente dar ZustandsdiagrammElement stellt Methoden zum Zeichnen zum L schen und zur Initialisierung von Zustandsdiagramm Elementen bereit Zustandsdiagramm ist von Component abgeleitet Diese Klasse stellt ein Zustandsdiagramm dar Die Klasse Zustandsdiagramm verwaltet eine Liste von Zustandsdiagrammelementen Zustand ist eine Unterklasse der Klasse ZustandsdiagrammElement Sie stellt einen Zustand dar Sie implementiert die abstrakten Methoden von ZustandsdiagrammElement Startzustand erweitet die Klasse Zustand um eine Startzustandkomponente Zustandsuebergang ist von ZustandsdiagrammElement abgeleitet und stellt einen Zustands bergang dar In Zustandsuebergang werden die abstrakten Methoden von ZustandsdiagrammElement implementiert ZustandsdiagrammDesigner stellt einen Designer bereit der das Verhalten eines Zustandsdiagramms im Entwurfsmodus erweitert Der ZustandsdiagrammDesigner ist Bestandteil der Zustandsdiagramm Komponente und bietet dem Anwender die M glichkeit per Drag amp Drop Verfahren und ber Properties Einstellungen sein Zustandsdiagramm aufzubauen zu editieren und zu entwickeln Vom ZustandsdiagrammDesigner aus kann die Fassadengenerierung und die Simulation angesto en werden ZDiagrammElementDesigner ist eine abstrakte Klasse Sie stellt einen Designer bereit der das Verhalten einer Komponente vom Typ ZustandsdiagrammElement im Entwurfsmodus erweitert Sie bietet Methoden zum E
124. lt Nice to have A61 Simulieren eines Zustandsdiagramms Erf llt Must have A62 Loggen im Simulationsmodus Erf llt Should have A63 Simulationsansicht Erf llt Nice to have A64 Scrollen Erf llt Must have 56 A65 Generierung von Code Erf llt Must have A66 Generierung von Code in anderen Sprachen nicht erf llt Nice to have A67 Statechart Editor nicht erf llt Nice to have A68 GUI Masken Ereignisse den Erf llt Must have Zustands bergang zuweisen Tabelle 4 Umgesetzte Anforderungen 6 3 Programmstruktur Im Folgenden wird ein Ausschnitt aus dem Klassendiagramm von SUIT dargestellt Das vollst ndige Klassendiagramm befindet sich im Anhang Zustandsdiagramm Y ZustandsdiagrammDesigner Y Class Class Component ComponentDesigner Zustandsdiagramm lement X ZDiagramme lementDesiner Y Abstract Class Abstract Class Component ComponentDesigner Zustand E Zustandsuebergang Y ZustandDesigner Y ZustandsuebergangDesigner Class Class Class ZustandsdiagrammElement ZustandsdiagrammElement ZDiagrammElementDesigner ZDiagrammElementDesigner Startzustand Y FassadeGenerator E SimulationGUI Y Class Class Zustand Form Abb 27 Ausschnitt aus dem Klassendiagramm Abb 27 zeigt einen Ausschnitt aus dem Klassendiagramm von SUIT In diesem Ausschnitt sind bis auf die Vererbungsbeziehungen keine weiteren Beziehungen i
125. mmelement zu erweitern muss e eine von ZustandsdiagrammElement abgeleitete Komponente e cine von ZDiagrammElementDesigner abgeleitete Designerklasse implementiert werden 6 5 1 ZustandsdiagrammElement ZustandsdiagrammElement ist eine abstrakte Klasse Sie stellt eine Komponente dar Um SUIT um neue Komponenten erweitern zu k nnen muss diese Klasse geerbt werden Die Schnittstelle ZustandsdiagrammElement implementiert folgenden abstrakten Methoden draw public abstract void draw Graphics g Diese Methode draw dient zum Zeichnen von der Komponente Parameter Beschreibung Graphics g Das Graphics Objekt auf die die Komponente zu zeichnen ist Tabelle 5 Parameter von draw 66 DrawCreateDragFeedback public abstract void DrawCreateDragFeedback ZustandsdiagrammElement start Element Point startPoint ZustandsdiagrammElement endElement Point endPoint Point myScreenOffset Color backColor Point scrollPos float zoom Die Methode DrawCreateDragFeedback erm glicht dem Benutzer w hrend einer Drag amp Drop Operation beim Erzeugen einer Komponente ein Visuelles Feedback anzuzeigen Das Rechteck auf Abb 32 visualisiert ein Feedback beim Erzeugen eines Zustands per Drag amp Drop DrawCreateDragFeedback sollte so zeichnen das der erste Aufruf das Feedback an der angegebenen Position zeichnet und der zweite Aufruf es wieder l scht In DrawCreateDragFeedback bietet es sich an die Methode
126. n A65 Generierung von Code Generierung einer Fassade in c Must have A66 Generierung von Code in Generierung einer Fassade in allen Nice to have anderen Sprachen Net Sprachen A67 Statechart Editor Der Zustandsdiagramm Editor wird Nice to have auf ein Statechart Editor erweitert A68 GUI Masken Ereignisse Es muss die M glichkeit geben Must have den Zustands bergang zuweisen Ereignisse der GUI Maske den Zustands bergang zuzuweisen Tabelle 3 Die Anforderungen an SUIT 46 4 3 Fazit Es wurden die funktionalen Anforderungen an SUIT beschrieben und klassifiziert Kriterium der Klassifikation war ob Anforderungen konstitutiv oder optional sind d h durch SUIT erf llt werden m ssen oder m gliche Erg nzungen darstellen 47 5 SUIT Architektur 5 1 Einleitung In dem folgenden Kapitel soll die Architektur von SUIT beschrieben werden Durch die Integration in die Entwicklungsumgebung Microsoft Visual Studio NET sind gewisse Rahmenbedingungen f r die Architektur vorgegeben In Abschnitt 5 2 soll die architektonische Sicht beschrieben werden wie sich SUIT in die Entwicklungsumgebung integriert Im Abschnitt 5 3 wird dann auf den internen Aufbau von SUIT und seine Komponenten eingegangen und erl utert Abschnitt 5 4 behandelt die Architektur des Zielprogramms das mit Hilfe von SUIT entwickelt werden soll Im Abschnitt 5 5 folgt dann ein Fazit 5 2 SUIT Architektur Zusammenhang mit VS Net SUIT soll
127. n Ausgangspunkt sind die verschiedenen Felder und Feldinhalte des Dialogs f r den eine Aktion ausgel st wird In bestimmten Feldern werden Daten neu eingegeben ge ndert oder gel scht Dies bildet die Grundlage f r die Bearbeitung der entsprechenden Gesch ftsvorf lle durch welche wiederum mittelbar oder unmittelbar Sachbearbeiter mit Teilaufgaben beauftragt werden 35 Ef n n T Ef Eingabefeld Ef2 n A Gv Gesch tfsvorfall n neu eingegeben kK ge ndert Efm n Los gel scht Gvi X Gv2 x x X War X Gvn X Abb 18 Spezifikation einer Aktion mittels Entscheidungstabelle Denert 1992 Um die Abh ngigkeiten von Feldinhalten und Gesch ftsvorf llen bzw Sachbearbeiterauftr gen bersichtlich darzustellen kann die Entscheidungstabelle verwendet werden siehe Abb 18 F r jede Aktion eines Dialogs muss eine eigene Spezifikation erfolgen Die Entscheidungstabelle f r TJAD Aktionen Abb 18 enth lt zwei Teile den Bedingungs und den Aktionsteil Im Bedingungsteil obere H lfte werden die Felder untereinander aufgelistet deren Inhalte in der Aktion zu bearbeiten sind Es wird nun spaltenweise analysiert welche verschiedenen Eingaben neu eingegeben ge ndert gel scht f r diese Felder im Hinblick auf eine Aktion zusammenh ngen K nnen Im Aktionsteil untere H lfte werden die potentiell zu bearbeitenden Gesch ftsvorf lle evtl auch die unmittelbar anzusto enden Sachbearbeiterauftr ge untereinande
128. n Die Benutzungsschnittstelle gelangt in den Folgezustand Anzeige der Kundendaten Dieser ist der zentrale Zustand des Zustandsdiagramms von dem aus die verschiedenen Operationen wie Kunde anlegen Kunde l schen usw ausgef hrt werden k nnen H Kundenanzeige Gefundene Kunden anlegen l schen bearbeiten zur ck Abb 43 Maske der Kundenanzeigen Durch das Bet tigen der Taste anlegen in der Maske der Kundenerstellung in Abb 44 wird die Aktion geheZu_KundeAnlegen angesto en Die Benutzungsschnittstelle wechselt in den Zustand Bereit zum Kundenanlegen in der entsprechenden Maske sind nur noch der Abbruch oder das Erfassen m glich Beide Tasten sto en jeweils eine Aktion an und f hren zum Zustand Anzeige der Kundendaten zur ck 84 Kundenerstellung Kunde anlegen Vorname Nachname Telefonnummer Stra e Hnr PLZ abbrechen anlegen Abb 44 Maske der Kundenerstellung Vom Zustand Anzeige der Kundendaten mit der Maske in Abb 43 aus kann die Taste bearbeiten bet tigt werden Dies f hrt zu der Aktion geheZu_KundeBearbeiten Es wird zum Folgezustand Bereit zur Kundendaten nderung gewechselt In der entsprechenden Maske Abb 45 kann man ber die beiden Tasten abbrechen und speichern und die dazugeh renden Aktionen in den Zustand Anzeige der Kundendaten zur ckkehren Kundenpflege Kundendaten pflegen Wom
129. n Insbesondere bedanken wir uns bei unseren Betreuer Prof Dr J Raasch der uns mit seinen Ratschl gen und seiner Hilfe immer zur Seite stand Ebenso m chten wir uns bei Prof Dr rer nat C Klauck bedanken der als Zweitgutachter uns offen mit Ratschl gen und Anregungen geholfen hat Unser Dank richtet sich auch an die freiwilligen Tester die im Usability Labor sich an SUIT herangetraut haben und uns mit ihren Meinungen und Kommentaren bzgl des Tools weitergeholfen haben Inhaltsverzeichnis Einleitune usa A T7 LEMOA ee tds a a a do 7 I EP VISTO A A LES IFESPORNEEIEESSEIE EURER 8 1 2 1 Methode A akedunfels 8 E22V SION SUTE ee ee el 13 1 23 SUM Komp nenten iii bai 14 1 2 4 Email its cascos 13 13 Aufbauder ari 16 Marktanalyse O O 17 2 1 PACO A A E A A A AE A AA a E 17 2 2 Grobe Anforderungen latas 17 AA aa e e E E E AAE Aa 18 24 GUL B ilder spionne ada 18 A A A E E ROA 19 2 4 2 Integrierter GUI Builder von Microsoft Visual Studio Net ursneenn 22 2 4 3 Folgenins dd 24 DAA Fat ee id o eo eds ee le o ido 24 2 9 Zustandsdiagramm Editoren it A A A 25 23 1 E sine 23 29 2 MSY son en ans ee nee 26 2 5 3 Folgemine nun 21 28 VA a nenne an en E T 28 o Theorie sent A EN 30 TO 30 3 2 Benutzungsschnittstellen auf Basis von endlichen Automaten und Fensterentwirfen 30 3 3 Vorgehensweise mit Interaktionsdiagrammen oooooccnoncccnoncncnonnnononononononononcnnnnncconnccnnnnno 31 3 3 1 Interaktions
130. n Kreis zum Zustand hineinf hrt Bezeichnung Maske cs Abb 20 Startzustand 39 Transition Zustands bergang Ein normaler Zustands bergang Abb 21 wird als Pfeil zwischen zwei Zust nden visualisiert Ein rekursiver Zustands bergang Abb 22 f hrt zum Ausgangzustand zur ck Die Transitionsbeschriftung besteht aus einem Ereignis und einer Aktion Ereignis Aktion Bezeichnung Bezeichnung Maske cs P Maske cs Abb 21 Zustands bergang Bezeichnung Maske cs Ereignis Aktion Abb 22 Rekursiver Zustands bergang 3 5 Fazit Der zustandsbasierte Ansatz die Modellierung von Benutzungsschnittstellen mithilfe endlicher Automaten und Fensterentw rfe wird sowohl von Denert in seiner Vorgehensweise bei der Spezifikation einer Benutzungsschnittstellen als auch im Rahmen dieser Bachelor Arbeit zur Modellierung einer Benutzungsschnittstelle verfolgt Denert ber cksichtigt wie bereits erw hnt eine Vielzahl einzelner Elemente die f r die Spezifikation einer Benutzungsschnittstelle eigentlich unerl sslich sind Einige davon wurden in Abschnitt 2 2 beschrieben Er besch ftigt sich unter anderem mit der Handhabung eines Dialogwechsels und f hrt Entscheidungstabellen zur Analyse von Benutzereingaben ein z B f r die Spezifikation einer Aktion wie sie in Abschnitt 2 2 6 beschrieben wurde Der Schwerpunkt bei der Entwicklung von SUIT liegt auf der schnellen Prototypenerstellung und der automatischen Gen
131. n der Abbildung dargestellt Dies l sst sich auf die Benutzung von Attribut Klassen in Net begriinden Die Attribute Klassen ordnen einer Klasse vordefinierte Systeminformationen oder benutzerdefinierte Informationen zu siehe dazu msdn attribute Es handelt sich hierbei um Definitionen die in einer Klasse zwischen zwei eckigen Klammern beschrieben werden Die Klassem stehen also durch die Definition der Attribute Klassen miteinander in Beziehung Die in UML bekannten Beziehungen wie Aggregationen oder Kompositionen kann hier nicht immer definiert werden da die Beziehungen durch die Attribute Klassen zustande kommen 37 Die Klassen in SUIT lassen sich wie anhand des Klassendiagramms Abb 27 erkennbar grob in Designer und Zustandsdiagrammelemente einteilen Die Designer Klassen und die Komponentenklassen der Zustandsdiagrammelemente und des Zustandsdiagramms Jede Designer Klasse ist eine Klasse vom Typ ZustandsdiagrammElement oder Zustandsdiagramm zugeordnet Die Designerklasse ZustandsdiagrammDesigner z B ist der Klasse Zustandsdiagramm zugeordnet Die Designerklassen erweitern das Verhalten der Komponenten Zustandsdiagrammelemente und Zustandsdiagramm zur Entwurfszeit Sie bieten Operationen zum L schen Erzeugen und Editieren dieser Komponenten Die Komponentenklassen repr sentieren dagegen die Daten der einzelnen Zustandsdiagrammkomponenten ZustandsdiagrammElement ist eine abstrakte Klasse von Component abgeleitet Sie stel
132. n k nnen bereit zur Suche Anzeige der Kundendaten bereit zum Kundenanlegen Zustand ist eine Maske zugeordnet Das Zustandsdiagramm inkl der Zuordnung der Masken wird in Abb 41 gezeigt Bereit zur Kundensuche Kunde Kunden suche cs und bereit zur Kundendatenpflege Jedem gt Bereit zum IstKunde Click geheZu_KundeAnlegen Kunden anlegen Anzeigen der emdSuchen Click kunden_suchen Kundendaten Kunde Kunden cmdZurueck Click geheZu_KundeSuche anzeige cs cmdAnlegen Click kunde_anlegen cmdAbbruch Chck angebotanlegen_abbruch Kunde Kunden erstellung cs Bereit zur cmdBearbeiten Click geheZu_KundeBearbeiten Kundendaten nderung cmdSpeichern Click kundendaten_speichern Kunde Kunden cmdAbbruch Click kundenaenderung_abbruch pflege cs Abb 41 Diagramm der Benutzungsschnittstelle des Kundenverwaltungswerkzeugs Zu Beginn befindet sich die Benutzungsschnittstelle im Zustand Bereit zur Kundensuche um die zu bearbeitenden Kundendaten durch den Benutzer spezifizieren zu lassen 83 Kundensuche Suchkriterien eingeben Vorname Nachname Telefonnummer Stra e Hnr Il zur ck Suchen Abb 42 Maske der Kundensuche Durch das Bet tigen der Taste Suchen in der Maske der Kundensuche in Abb 42 wird die Aktion geheZu_KundeSuchen angesto e
133. n von ControlPaint zu benutzen ControlPaint bietet Methoden wie DrawReversibleFrame und DrawReversibleLine DrawReversibleFrame zeichnet einen umkehrbaren Rahmen auf dem Bildschirm w hrend DrawReversibleLine eine umkehrbare Linie auf dem Bildschirm zeichnet Die DrawRevisible Methoden von ControlPaint nutzen beim Zeichnen die globalen Koordinaten einer Komponente Die globalen Koordinaten beschreiben die Lage der graphischen Komponenten aus der Sicht des Anwenders Die globalen Koordinaten sind bezogen auf die gesamte Bildschirmfl che In DrawCreateDragFeedback sollte deshalb zus tzlich noch das Offset des Bildschirms der aktuelle Zoomfaktor und die Scrollposition ber cksichtigt werden um aus den relativen Koordinaten diese sind nur auf die Zeichenfl che bezogen die globalen Koordinatenwerte umzurechnen Siehe dazu Abb 32 laj xj Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten as Fenster Hilfe Offset S WesuUg Br n o A Debug a EA E ES t ale Projektmappen Explorer Fallstudie C 4 X EIER 8 Projektmappe Fallstudie CSharp 1 Projekt E EN Fallstudie CSharp El La verweise E Y Angebot S Angebot cs relative Koordinate A pirata El Angebotserstellung cs Angebotspflege cs Angebotssuche cs E Y Bestellung Bestellung cs E Pizzaservice cs E I Kunde 8 Kunde cs E Kundenanzeige cs Kundenerstellung cs a a 2 Zustandsuebergang BE ScrollPos KundeNeu cs Kundenpflege cs i i
134. nde GUI Maske ein Achten sie dabei darauf in Welchen Pfad in der GUI Auswahlliste sie sich gerade befinden In diesem Pfad wird ihre beim Erzeugen abgelegt Wenn Sie den Namen des zu erzeugenen Maske eingeben haben best tigen Sie dies mit dem Button Erzeugen Die neue GUI Referenz ist danach dem Zustand zugewiesen W hlen Sie ein GUI Formular aus W hlen Sie eine GUI Formular aus Fallstudie CSharp Kunde EN Kundenanzeige cs E Kundenerstellung cs El Kundenpflege cs Kundensuche cs Zielpfad 3 Bestellung 3 Angebot neue GUI Form anlegen m A Abbrechen DK 132 4 7 Zuweisung von Event und Action zu einem Zustands bergang Um Event und Action zu einem Zustands bergang zuzuweisen sollten Sie ein Zustandsdiagramm erzeugt und dieses in der Designer Ansicht ge ffnet haben siehe Abschnitt 4 1 Au erdem sollte der zuzuweisende Zustand oder Startzustand erzeugt worden sein siehe Abschnitt 4 4 und dem ausgehenden Zustand des Zustands bergang eine GUI Maske zugewiesen sein siehe Abschnitt 4 5 Um Event und Action zu einem Zustands bergang zuzuweisen gehen Sie wie folgt vor 1 Markieren Sie den Zustands bergang der Event und Action zugewiesen bekommen soll Doppelklicken Sie nun auf diesen Zustands bergang oder klicken Sie im Eigenschaftsfenster beim Property ControlEvent Action den Button an Eigenschaften zustandsuebergangi SUIT Zustandsdiagramr
135. ndet dass die Simulation eine gute Veranschaulichung f r den Kunden bietet F r sie bietet SUIT eine wesentliche Erleichterung in der Prototypenerstellung da in SUIT nderungen schnell im Zustandsdiagramm vorgenommen und simuliert werden k nnen 96 Die Testperson u ert aber auch dass sich m glicherweise bei der Modellierung gr erer Systeme die Modellierung in Form von Zustandsdiagrammen als problematisch erweisen k nnte Bez glich der Bedienung von SUIT hat die Testperson keine Verbesserungsw nsche ge u ert jedoch wei sie dass die Arbeit in SUIT die Einarbeitung in Visual Studio voraussetzt Die Testperson hat siebzehn Minuten f r die Bearbeitung der Usability Aufgabe gebraucht siehe CD Usability test04 avi So sieht das Ergebnis der vierten Testperson aus CD Usability Test 4 Test 4 s1n zustand Ergebnis cs startzustand Den cs zustand2 Details cs Abb 54 L sung der vierten Testperson 8 5 Fazit Insgesamt hat keine Testperson mehr als f nfundzwanzig Minuten f r die Erledigung der Usability Aufgabe gebraucht Das ist f r uns aus mehreren Gr nden ein positives Ergebnis Erstens wurden die Testpersonen mit einem neuen Tool und einer ihnen bisher unbekannten Methode der Modellierung von Benutzungsschnittstellen mit Hilfe von Zustandsdiagrammen und GUI Buildern konfrontiert zweitens besa keine Testperson Erfahrung mit Visual Studio der Entwicklungsumgebung in die SUIT i
136. ngsvorschl ge gemacht und diskutiert In Kapitel 11 folgt das Resum Folgende Aufteilung fand im Rahmen der Ausarbeitung statt Kapitel 2 4 und 7 wurden von Noura Haji bearbeitet Kapitel 2 5 9 und 10 wurden von Vinh Phu Phan bearbeitet Die restlichen Kapiteln 2 1 2 2 2 3 3 4 5 6 8 und 11 sind durch gemeinsame Arbeit entstanden 16 2 Marktanalyse 2 1 Einleitung Ein Ziel dieser Marktanalyse ist es zu berpr fen ob bereits Tools f r die Erzeugung von Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen auf dem Markt existieren Als Leitfaden f r die Untersuchung diente eine grobe Anforderungsliste an SUIT die im Abschnitt 2 2 angegeben wird Das Ergebnis dieser Untersuchung folgt in Abschnitt 2 3 Der im Rahmen unserer Bachelor Arbeit zu entwickelnde Prototyp SUIT hat als Anforderung grafische Oberfl chen anhand von Zustandsdiagrammen und Fensterentw rfen zu erzeugen Unabdingbar f r ihn sind daher ein Zustandsdiagramm Editor und ein integrierbarer GUI Builder Siehe 1 2 3 Im Abschnitt 2 4 werden vorhandene GUI Builder zur Erzeugung graphischer Benutzeroberfl chen betrachtet Diese Analyse hat das Hauptziel einen geeigneten GUI Builder zwecks Wiederverwendung f r das Tool dieser Bachelor Arbeit zu finden Im Abschnitt 2 5 werden vorhandene Zustandsdiagramm Editoren untersucht Das Hauptaugenmerk liegt hierbei auf der Suche nach neuen Anforderungen da im Rahmen dieser Bachelo
137. ntegriert ist Der Usability Test hat ergeben dass die Methode Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen zu modellieren anschaulich und intuitiv ist 97 Diese Denkweise ist keiner der vier Testpersonen schwer gefallen Alle Testpersonen haben die Aufgabe sicher erledigt Die Erstellung von Prototypen in Form eines Modells dessen Ergebnis simulierbar ist beurteilen alle sehr positiv da dies keinerlei Programmieraufwand erfordert Die Fassade bietet f r alle Testpersonen einen weiteren Vorteil da sie den zus tzlichen Programmieraufwand reduziert Zwei der Testpersonen besa en keine Erfahrung in der Prototyperstellung Gr nde daf r sind die bisher fehlenden Methoden und Werkzeuge mit denen eine schnelle und einfache Prototyperstellung m glich w re Die anderen zwei Testpersonen besa en Erfahrung in der Erzeugung von Prototypen beschrieben diese jedoch aufgrund der manuellen Vorgehensweise als aufw ndig und unpraktisch Alle Testpersonen u erten sich positiv ber die von SUIT umgesetzte Methode und w rden mit SUIT gerne weitere Erfahrungen machen Bei zwei Testpersonen stellte die Entwicklungsumgebung Visual Studio ein Argument gegen die Benutzung von SUIT dar da beide das Arbeiten mit Visual Studio eher als st rend empfinden Ansonsten beurteilten alle die Bedienung von SUIT als ergonomisch und benutzerfreundlich Insgesamt ergab der Test dass SUIT eine Bereicherung f r die Prototypentwi
138. ntuitiv in der Umsetzung Die ihr bekannten Tools zum Erstellen von Zustandsdiagrammen wie z B Together sind aus ihrer Sicht mit z T unn tigen Funktionalit ten berladen und anders als der Zustandsdiagrammeditor von SUIT un bersichtlich und komplex Die Einf hrung in SUIT gestaltet sich daher einfach SUIT ist au erdem anschaulich so dass man sich wie die Testperson hervorhebt auf die eigentliche Aufgabe konzentrieren kann Ein weiterer Punkt ist dass SUIT anders als Together auf die Modellierung von BSS abzielt Die Vorteile von SUIT liegen f r die Testperson in der drastischen Vereinfachung der Modellierung des dynamischen Verhaltens einer Benutzungsschnittstelle die durch den Einsatz der aufeinander abgestimmten Tools Zustandsdiagrammeditor und GUI Builder zustande kommt Damit ist die Benutzungsfreundlichkeit von SUIT ein entscheidender Vorteil Weiterhin ist f r die Testperson wichtig dass SUIT fr hzeitig ein simulierbares Ergebnis bietet Die Simulation erlaubt schnell Ergebnisse zur Verf gung zu haben Besonders vorteilhaft findet die Testperson die automatische Codegenerierung da sie den Programmieraufwand erheblich reduziert Die Testperson w rde SUIT generell benutzen da dieses nach ihrer Ansicht eine schnelle und einfache Denke erm glicht Au erdem findet die Testperson die M glichkeit der Simulation in verschiedenen Ansichten praktisch Der Entwickler k nne so sch tzt die Testperson die M glichke
139. ntwurf Angebot Angebots ige cs Entwurf Zu Zustandsdiagrammeditor El h Zeiger G Zustand Ed Startzustand 2 Zustandsuebergang zustand Beim Loslassen der Maus also beim best tigen des Drag amp Drops sollte ihr Zustands bergang erzeugt worden sein 72 Fallstudie CSharp Microsoft Visual C NET Entwurf Zustandsdiagramm1 cs Entwurf Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe D s Hg Ks p Debug H Toolbox A Xx Startseite Pizzaservice cs Entwurf Angebot Angebots ige cs Entwurf 21 Zustandsdiagrammeditor El R Zeiger 2 Zustand E Startzustand 3 Zustandsuebergang O startzustand zustand 130 4 5 GUI Maske Zuweisung zu einem Zustand Um eine Maske einen Zustand gilt auch f r Startzustand zuzuweisen sollten Sie einen Zustandsdiagramm erzeugt und diesen in der Designer Ansicht ge ffnet haben siehe Abschnitt 4 1 Au erdem sollte der zuzuweisende Zustand oder Startzustand erzeugt worden sein siehe Abschnitt 4 2 und 4 3 Um einen Zustand eine Maske zuzuweisen gehen Sie wie folgt vor 1 Markieren Sie ihren zuzuweisenden Zustand 2 Doppelklicken Sie nun auf diesen Zustand oder klicken Sie im Eigentschaftsfenster beim Property GUIReferenz den Button an Eigenschaften zustandi SUIT ZustandsdiagrammE Y BackColor L White Bezeichnung zustandi BorderColor Black Groesse 111 103 GUIReferenz E
140. nur wie in Abb 57 darstellen Login Arbeitsum gebung Login Click Userverifying Login cs Abb 57 Darstellung eines Login Verfahrens in SUIT Zustandsdiagramm Notation Abb 57 zeigt dass mit dem Ereignis Login Click die Aktion UserVerifying ausgef hrt wird Jedoch ist hier unabh ngig vom R ckgabewert der Funktion UserVerifying der Folgezustand immer die Arbeitsumgebung Somit ist egal ob nun die Verifizierung OK oder nicht OK war der Anmeldevorgang abgeschlossen Dies ist f r ein fr hes Prototyping wo es nur darum geht den Kunden eine funktionalit tsfreie Benutzungsschnittstelle vorzulegen noch akzeptabel aber zum Beschreiben des endg ltigen Dialogablauf des Benutzungsschnittstellensystem reicht dieses Diagramm nicht mehr aus Da SUIT das Ziel verfolgt m glichst in den fr hen Phasen der Softwareentwicklung zum Einsatz zu kommen und unter anderem m glichst fr h den Kunden einen Prototyp dank der Simulationskomponente vorlegen zu k nnen ist die SUIT Zustandsdiagramm Notation ausreichend Die Gefahr bei dieser Notation ist jedoch dass in den sp teren Phasen es zu einem Konsistenzverlust zwischen Diagramm und Benutzungsschnittstellen kommt Will man den Dialogablauf des Login Vorgang dennoch in SUIT darstellen k nnte ein Diagramm wie in Abb 58 entstehen das mit Vorsicht zu genie en ist 108 Login Arbeitsum Login Click Userverifying gebung Login cs Login Click Userverifying
141. oblem kann dadurch vermieden werden dass die Doppelreferenzierung von Masken verboten wird Will man also eine Maske in einem anderen Zustand wieder verwenden m sste man eine Kopie dieser Maske erzeugen und die Kopie dann referenzieren Jedoch f hrt diese Vorgehensweise zu redundanten Masken die Nachteile in der Wartung und nderungen dieser Masken mit sich bringen SUIT verzichtet aus diesem Grunde auch auf die Erzeugung des Codes f r den Aufruf des Folgezustands in der vorigen Maske selbst Da SUIT weder den Code in der Aktion noch in der vorigen Maske erzeugt muss ein anderer Weg gefunden werden Da bei einer Doppelrefenzierung von Masken in verschieden Zust nden es dazu kommen kann dass eine Maske nur in Zusammenhang mit dem Wissen ber ihren aktuellen Zustand bestimmen kann was ihre Folgemaske ist ist dieser Weg also nur unter Einbeziehung des aktuellen Zustands und somit dem Zustandsdiagrammmodell m glich Der aktuelle Zustand in dem ein Benutzungssystem sich gerade befindet l sst sich nur zur Laufzeit bestimmen Die dritte L sung w re also zur Laufzeit ber eine zus tzliche 103 Komponente zu bestimmen was gerade der aktuelle Zustand ist und was f r ein Zustand somit auch welche Maske beim Ausl sen des Ereignisses folgen muss Diese Komponente arbeitet Hand in Hand mit dem Zustandsdiagramm zur Laufzeit und m sste also zus tzliche Ressourcen beanspruchen die auf Kosten der Ressourcen f r das Benutzungsschni
142. ojekt benutzt Einbinden der SUIT Klassenbibliothek SUIT als DLL Datei werden Benutzung der Net Bibliothken z B die Net Framework Klassenbibliotheken CLR GUI Designer Klassen Betriebssystem Abb 23 Integration von SUIT in die Microsoft Visual Studio Net Architektur Die Architektur in Abb 23 zeigt eine stark vereinfachte Darstellung des Zusammenspiels von Visual Studio und dem Net Framework Aus der Abbildung l sst sich entnehmen dass SUIT sich auf gleicher Stufe wie das Net Framework ansiedelt jedoch die Net Framework Klassenbibliothek mitbenutzt In Microsoft Visual Studio lassen sich Klassenbibliotheken aus dem Net Framework in den Anwendercode einbinden SUIT verh lt sich hier genauso wie eine Net Klassenbibliothek die der Anwender auch ber Visual Studio in seinem Projekt einbinden kann Somit ist die Handhabung von SUIT f r den Anwender nicht anders als er es schon aus den Net Klassenbibliotheken gewohnt war Die Kapselung des Betriebssystems vom Anwendercode also von den Quellcodes die ber Visual Studio geschrieben und verwaltet werden geschieht weiterhin ber das Net Framework SUIT integriert sich hier nahtlos und durchbricht diese Kapselung nicht 5 3 Interne SUIT Architektur In diesem Abschnitt soll auf die wesentlichen Bestandteile von SUIT eingegangen werden SUIT l sst sich auf folgenden 4 Komponenten aufteilen auf die Zustandsdiagramm Komponente a
143. ononononanononcncncnnnnnnaninannnnnn 12 18 37 39 40 42 51 55 56 58 Zustandswechsel r2 2 8 2 22a Rear IR 9 30 119 Anhang 120 Benutzerhandbuch SUIT Version 1 0 Stand 06 01 2007 Inhaltsverzeichnis 1 Systemanforderune o e e 123 NN nn 2 Rn In RE 124 2 1 Install alon AAA A A sei 124 2 2 Installationen von Zustandsdiagramm Template 220022000sssnenennnneennnennnnnn 124 2 2 1 Installation von C Template io 124 3 Einbindung von SUIT ins Projekt econo rita ana 125 4 Bedienung des SUIT Zustandsdiagrammeditor c ocococcccoccnonnconncnoncnonnnono nono ncnononnnnnnnn ccoo corno 126 4 1 Erzeugung eines Zustands diari is 126 4 2 Erzeugen eines Startzustand ae 127 4 3 Erzeugung eines Zustadds rim kenn 129 4 4 Erzeugung eines Zustandsubergang u RR a ta 130 4 5 GUI Maske Zuweisung zu einem Zustand u r 2usssssesssnnenssnnennnnennnnnnnnnnnnnnn anne 131 4 6 GUI Maske Zuweisung eines Zustands ndern u022440022000sssnnesssnennnnnnnnnnnnnnn 132 4 7 Zuweisung von Event und Action zu einem Zustands bergang e 133 4 8 Event und Action eines Zustands bergang ndern u 22400s2sssensennennnnesnnn anne 134 4 9 L schen von Elementen aus dem Zustandsdiagramm oocooocccnnonccnoncnononcnnnonannnnncnnnnnannnn 135 5 Fassadengeneriering suussaeekskeiikek kai bee 136 A RA 137 6 1 Voraussetzung f r die Simulation een 137 6 2 Wie startet man eme Sim
144. orm von Zustandsdiagrammen und Masken ist aus Sicht der Testperson verst ndlich und zug nglich Die automatische Codegenerierung der Fassade sieht 95 die Testperson als positiv an Die Bedienung in SUIT ist f r sie einfach bedarf aber aufgrund der Entwicklungsumgebung Visual Studio einer Einarbeitung Insgesamt findet die Testperson SUIT viel versprechend und w rde dieses Tool gerne benutzen wollen w re es nicht in Visual Studio realisiert Insgesamt hat die Testperson neunzehn Minuten f r die berarbeitung der Usability Aufgabe gebraucht siehe CD Usability test03 avi So sieht das Ergebnis der von der Testperson gel sten Aufgabe aus Abb 53 CD Usability Test 3 Test 3 sIn startzustand1 Formi cs zustand zustand3 Titelanzeige cs Abb 53 L sung der dritten Testperson 8 4 4 Vierte Testperson Die Testperson bringt keine Erfahrung in Visual Studio mit sie beurteilt die Entwicklungsumgebung jedoch nicht negativ Bisher hat die Testperson Together f r die Erstellung von Zustandsdiagrammen benutzt und findet im Vergleich dazu den Zustandsdiagrammeditor in SUIT bersichtlich und anschaulich Die Testperson hat noch keine Prototypen erstellt vermutet aber dass dies einen gro en Programmieraufwand mit sich bringt wenn die Erstellung manuell erfolgt Mit SUIT seien diese dagegen schnell gemacht Die Testperson hat sich bei der Aufgabe schnell zurechtgefunden Die Testperson fi
145. ounds 29 55 400 300 cursor DEFAULT_CURSOR defaultCloseOperation DISPOSE_ON_CLOSE defaultLookAndFeelDecor L false dropTarget extendedState NORMAL v i EA Abb 11 Property Fenster in Jigloo Bedienung Jigloo bietet einen Layout Manager Standardm ig ist ein Border Layout f r das Entwurfsfenster ausgew hlt F r Entwickler die das Arbeiten mit dem Layout Manager nicht gewohnt sind ist es oft irritierend wenn deshalb die eingef gten Komponenten nicht an der gew nschten Stelle erscheinen F r Anf nger die mit dem Konzept der Layout Manager nicht vertraut sind kann es viel M he und Zeit kosten die Oberfl che bedarfsgerecht zu gestalten Grunds tzlich ist es aber auch m glich Komponenten ohne einen Layout Manager in einem Container zu platzieren In diesem Fall sollte das absolute Layout ausgew hlt werden Die 20 Komponenten k nnen mit einem Klick ausgew hlt und mit einem weiteren Klick an der damit zugleich selektierten Stelle der Zeichenfl che eingef gt werden Jigloo unterst tzt nicht das Einf gen von GUI Komponenten ber Drag amp Drop Au erdem kann die Gr e einer GUI Komponente nicht gleich beim Erzeugen ge ndert werden Sie besitzt immer eine vordefinierte Default Gr e Erst nach dem Platzieren auf dem Form Editor kann sie angepasst werden Beim Erzeugen von GUI Komponenten wird ein Fenster zum Best tigen oder ndern von Default Werten angezeigt welches man mit OK best tigen muss Auch be
146. r hzeitig korrigierend eingreifen SUIT erm glicht auch die Weiterentwicklung von Prototypen bis zur einsatzf higen Anwendung da das Tool qualitativ hochwertigen Code erzeugt der nicht verworfen wird sondern bedarfsweise wieder verwendet werden kann SUIT erzeugt eine abstrakte Schnittstelle die Fassade Durch die Trennung der Interaktionskomponente und der Funktionskomponente durch eine Fassade wird ein sauberes nachvollziehbares Design unterst tzt siehe Abschnitt 1 2 3 3 Vorgehensweise mit Interaktionsdiagrammen Im Folgenden wird die Vorgehensweise von Denert beschrieben Denert 1992 Als Beschreibungsmethode zur Modellierung des dynamischen Verhaltens einer Benutzungsschnittstelle dienen hier Interaktionsdiagramme IAD eine Variante endlicher Automaten Es wird jedoch nicht auf alle Details eingegangen die in Denert 1992 bei der Spezifikation einer Benutzungsschnittstelle ber cksichtigt werden 3 3 1 Interaktionsdiagramme Interaktionsdiagramme sind eine Variante endlicher Automaten Die wesentlichen Elemente eines Interaktionsdiagramms sind die Zust nde und die Zustands berg nge In Interaktionsdiagrammen werden die Zust nde als Kreise visualisiert Der Zustand markiert einen Punkt im Dialogablauf in dem das System auf eine Eingabe des Benutzers wartet Der Startzustand wird im Interaktionsdiagramm durch ein Dreieck visualisiert Die Zustands berg nge werden durch Pfeile zwischen den Zust nden dargestellt Die Pfeile s
147. r A ANC 31 39 58 59 61 NAC tn hie REIN Ren 13 37 46 57 106 110 111 SUI Mitin iaa 13 14 15 16 17 18 28 31 37 40 41 42 47 48 49 50 51 52 53 55 57 61 75 80 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 T NO 25 26 27 28 a Kale a 0P ETE ET an eher sen erh een 51 52 55 59 60 61 94 ME E 37 38 39 40 42 55 101 102 103 siehe Zustands bergang U ME en ee Re ed ern ee 7 37 25 57 Ys ability ans ara ea A ee ee nee 91 97 99 105 112 118 V Virtuelle Taste iii N a a A AA E a A 33 34 MSI EAE N EAE AAS AEE EE AEEA EA EE O aia 26 27 28 MISUAl Edi ern ETEA AA E TT E 18 Visual Studio da ann 18 22 23 24 25 28 31 41 48 49 50 52 59 60 61 65 66 93 94 95 96 97 WwW AE E TE E E E E E E T E 109 110 111 WAN ist A E E A A A A ARAE AAE 15 77 Weiterentwicklung oocococococononononcnnononononenononennnnnnnnrnrnene nene nn nn nn enen ann anne nennen 7 17 51 90 106 Window Builder Pro ne ee en Di 18 Z Zustand u a ne 11 12 13 14 17 26 30 31 33 34 35 37 38 39 45 illa to balboas irc cren 51 58 80 83 86 90 103 104 Zustandsdiagramm oocococcccncncoconononcnnnananincnnonanon 9 10 11 12 13 14 17 18 28 37 39 41 42 51 52 53 58 61 62 63 83 86 87 88 89 90 106 108 109 Z standsdiagramm Editor ici aii 17 100 ZUStandS berganNO ococccocococononcnoncncon
148. r Arbeit die Realisierung eines eigenen Zustandsdiagramms Editor geplant ist Im Abschnitt 2 6 folgt ein Fazit 2 2 Grobe Anforderungen SUIT erlaubt die Modellierung des dynamischen Verhaltens von Benutzungsschnittstellen in Form von Zustandsdiagrammen Diese k nnen au erdem um weitere Details der graphischen Oberfl che bereichert werden wobei f r jeden Zustand festgelegt wird welche Masken auf dem Bildschirm dargestellt werden Das erstellte Zustandsdiagramm kann simuliert werden Au erdem wird eine Fassade f r die Weiterentwicklung generiert siehe 1 2 2 Somit bestehen im Groben zwei Anforderungen an SUIT Ben tigt werden Zustandsdiagramm Editor der ber die g ngigen Operationen zum Anlegen eines Zustandsdiagramms verf gt und ein GUI Builder der in den Zustandsdiagramm Editor integriert ist so dass f r jeden Zustand innerhalb des Zustandsdiagramms per Drag amp Drop Masken erzeugt werden k nnen siehe 1 2 3 In Tabelle 1 sind alle notwendigen Anforderungen an SUIT aufgelistet 17 Anforderung Beschreibung Erzeugen eines Zustands Ein Zustand kann auf der Zeichenfl che platziert werden Erzeugen eines Anfangszustandes Ein Anfangzustand kann auf der Zeichenfl che platziert werden Erzeugen eines Zustands bergangs Ein Zustands bergang kann auf der Transition Zeichenfl che platziert werden Neuanlegen von Masken Masken k nnen erzeugt werden Erzeugung von Masken zu den Je
149. r Vorgang nicht mehr manuell durchgef hrt werden Wird eine Klasse vom Typ Zustandsdiagramm mit dem 60 ZustandsdiagrammDesigner ge ffnet so f gt dieser der Toolbox ein Startzustand ein Zustand und ein Zustands bergang Item automatisch hinzu 6 4 2 ffnen mit dem Zustandsdiagramm Designer in VS Net Will man in Visual Studio eine Klasse in der Designeransicht ffnen so kann dies mit einem Doppelklick auf die Klasse erreicht werden Das Anzeigen einer Klasse in der Designeransicht ist nur m glich wenn eine Klasse bereits einem Designer zugeordnet worden ist In Visual Studio werden Klassen die von System Windows Forms Form abgeleitet sind in der Designeransicht des GUI Builders angezeigt Form ist von Component abgeleitet In Net k nnen Komponentenklassen Designerklassen zugeordnet werden Form ist dem Designer GUI Builder zugeordnet Darin liegt begr ndet dass beim ffnen einer Klasse vom Typ Form diese in der Designeransicht des GUI Builders ge ffnet wird In SUIT soll das Zustandsdiagramm in der Zustandsdiagrammdesigner Ansicht ge ffnet werden Es muss also der Komponentenklasse Zustandsdiagramm die Designerklasse Zustandsdigrammdesigner zugeordnet werden Dieser Vorgang wird im Folgenden angezeigt Der Zustandsdigrammdesigner ist der Klasse Zustandsdiagramm durch folgende Code Definition zugeordnet Designer typeof SUIT ZustandsdiagrammEditor Design ZustandsdiagrammDe signer typeof IRootDesigner Designer
150. r aufgelistet F r jeden wird festgelegt von welchen Bedingungen Eingaben im oberen Teil seine Aktivierung abh ngt Eine IAD Aktion kann unterschiedliche Ergebnisse herbeif hren Im IAD selbst werden nur Bezeichnungen f r diese angegeben oder nichts falls nur das Ergebnis o k m glich ist Auch die Ermittlung dieser Ergebnisse Kann nur f r jeden einzelnen Dialog durchgef hrt werden Diese Spezifizierung kann ebenfalls mithilfe einer Entscheidungstabelle vorgenommen werden Der Vorteil einer Entscheidungstabelle zur Analyse von Benutzereingaben besteht vor allem darin dass sie zur vollst ndigen Analyse zwingt da alle theoretisch m glichen Eingaben und ihre Kombinationen dargestellt werden Bestimmte Kombinationen werden andernfalls leicht bersehen da sie als unm glich oder sinnlos eingesch tzt werden Zwingend ist der Einsatz einer Entscheidungstabelle jedoch nicht gelegentlich ist eine verbale Darstellung oder eine Darstellung mittels Pseudocode einfacher und leichter nachzuvollziehen 36 3 4 Die in dieser Arbeit gew hlte Vorgehensweise 3 4 1 Vorgehensweise mit Zustandsdiagrammen Anders als Denert der Interaktionsdiagramme f r die Beschreibung von Benutzungsschnittstellen w hlt wird in dieser Arbeit die Modellierung in Form von Zustandsdiagrammen vorgenommen Zustandsdiagramme basieren wie die von Denert beschriebenen Interaktionsdiagramme auf endlichen Automaten Die Basiselemente eines Zustandsdiagramms sind
151. r benutzerrechteabh ngigen Benutzungsschnittstelle dienen Bei einigen Benutzungsschnittstellen ist der Bildschirmmaskenverlauf abh ngig davon welcher Benutzer gerade am Arbeitsplatz arbeitet Abh ngig von seinen Benutzerrechten bekommt der Benutzer andere Bildschirmmasken angezeigt Diese Benutzungsschnittstellensysteme bieten meist einen Anmeldebildschirm an um den Benutzer zu verifizieren Je nach Zugriffsrecht bekommt der angemeldete Benutzer dann unterschiedliche Masken zu sehen Ist die Verifizierung des Benutzers nicht erfolgreich wird in den meisten benutzerrechteah ngigen Benutzungsschnittstellen der Zugriff auf die Masken verweigert und der Benutzer bleibt beim Anmeldebildschirm So kann dieser Dialogverlauf mit Interaktionsdiagrammen wie in Abb 56 dargestellt werden 107 j j Verifizierung OK its Login Click Us Veribins g Arbeits umgebung Verifizierung fehlgeschlagen Abb 56 Darstellung eines Login Verfahren in Form eines Interaktionsdiagrammes Diese benutzerrechteabh ngigen Benutzungsschnittstellen lassen sich jedoch nicht mit der aktuellen SUIT Zustandsdiagramm Notation darstellen Der Dialogablauf wird also vom R ckgabewert der Verifizierungsfunktion in Abb 56 UserVerifying gesteuert Ein Zustandsdiagramm das so einen Ablauf beschreiben k nnte m sste also um die Informationen des R ckgabewertes der Verifizierungsfunktion erweitert werden In der aktuellen SUIT Version lie e sich dieser Dialogverlauf
152. ramm mit W chterbedingung wie in Abb 59 aussehen Login Arbeitsum gebung Verifizierung OK Login Click Userverifying Login cs Verfizierung fehlgeschlagen Login Click Userverifying Abb 59 Login Verfahren mit W chterbedingung In Falle der dialogablaufsteuernden R ckgabewerte w re die W chterbedingung also das Erf llen eines bestimmten R ckgabewertes Bei dieser Notationserweiterung sollte jedoch bedacht werden dass diese Erweiterung auch in der Simulation ber cksichtig werden sollte So muss in der Simulation diese R ckgabewerte irgendwie schon zur ckgeliefert werden Dies setzt teilweise eine Implementierung der Aktionen voraus Inwiefern diese Implementierung den fr hen Einsatz der Simulation und somit das Prototyping in der fr hen Etappen der Softwareentwicklung behindert muss noch in Rahmen einer ausf hrlichen Analyse untersucht werden Optimal w re wenn diese W chterfunktionen als optional angesehen werden so dass diese funktionalen Details zur den fr hen Etappen der Softwareentwicklung noch nicht modelliert werden muss 10 2 2 2 Inkarnationen der Masken In Kapitel 3 2 5 wurde der Dialogwechsel nach Denert beschrieben Dort wurde der Begriff Inkarnationen von Masken eingef hrt und erl utert Diese M glichkeit die Inkarnationen der Masken zu definieren ist in der aktuellen SUIT Zustandsdiagrammnotation noch nicht vorgesehen Suche SuchErgebnis ais cick TshowDetailst Details Suche cs
153. rbig markiert Erfolgt nun eine Benutzereingabe so wird die Aktion zur besseren Nachvollziehbarkeit ausgegeben Au erdem wird zum Folgezustand gewechselt Im Folgenden ist das Zustandsdiagramm des Pizzaservicesystems in der Simulationsansicht abgebildet Simulation EI EB Pizzaservice Start zul SmdAngsbofsverwallung Cick gehezu_angebolssuchef BestellungiPiz Kundenverwaltung zaservice cs ZUR IGKTgehezu_sEril Angebotsverwaltung Bestellungsverwaltungssystem Bereit zur ick Angebotssuche mdAngebotSuchen Click show_angebotssuche Angebot Ange botssuche cs 2 fe z 2 5 3 OBunnagseg moys PIO Bunyeruanejssgpu gt Oayansuapuny MOUS XONI Uayangepunypu chen Glick Fangebot_suchen 5 Bereit zum l Bestellen A amd Abb 50 Pizzasystem in der Simulationsansicht von SUIT 89 7 4 Fazit Ziel von SUIT ist es schnell und einfach einen Prototyp f r eine Benutzungsschnittstelle zu erzeugen um diese dem Anwender fr hzeitig vorf hren zu k nnen Au erdem soll der manuelle Programmieraufwand m glichst verringert werden Aus den in SUIT erstellten Modellen in Form von Zustandsdiagrammen und Fensterentw rfen sollen so viele Informationen wie m glich zur automatischen Codegenerierung genutzt werden Dieses Ziel wurde im Rahmen dieser Fallstudie am Beispiel eines Pizzaservicesystems exemplarisch erreicht In einem Zustandsdi
154. rgang direkt oder indirekt von ZustandsdiagrammElement erben Durch diese Vererbung werden diese Elemente vom SUIT Zustandsdiagrammeditor als erlaubte Toolbox Elemente erkannt Wie dies vonstatten geht wird in Kapitel 6 erkl rt Das Property Fenster das auch beim mitgelieferten GUI Builder von Visual Studio Net bekannt ist wird auch beim Zustandsdiagramm Designer erneut eingef hrt um dem Anwender eine vertraute Entwicklungsumgebung anzubieten ber den Zustandsdiagramm Designer l sst sich dann die Codegenerierungskomponente aufrufen Die Codegenerierungskomponente generiert anhand des Zustandsdiagramms das vom Zustandsdiagrammdesigner entworfen wurde eine Fassade Klasse die die Methodenk pfe der im Zustandsdiagramm vorkommenden Aktionen definiert Dies sollte urspr nglich ber CodeDom geschehen jedoch stellte sich hier heraus dass das CodeDom Modell in der vorliegenden Net Framework Version 1 1 f r Objekte die nicht von Typ IComponent sind noch nicht komplette Sprachunabh ngiskeit erreicht hat In Kapitel 6 wird auf CodeDom n her eingegangen Die Simulationskomponente wird auch vom Zustandsdiagramm Designer angesto en Sie nutzt die Codegenierungskomponente um die Fassadeklasse zu genieren sofern dies nicht schon vom Anwender eingeleitet wurde Wenn Fassadeklasse und die GUI Masken entworfen sind kann die Codegenierungskomponente anhand des Zustandsdiagramms die GUI Masken kompilieren und nach der im Zustandsdiagramm beschrieb
155. rierter GUI Builder von Microsoft Visual Studio Net 2003 Die Programmoberfl che von Microsoft Visual Studio in der GUI Builder Standard Ansicht besteht aus vier Kernkomponenten Abb 14 e Toolbox Die Palette nennt sich in Visual Studio Toolbox Hier sind die wichtigsten GUI Komponenten verankert Die Toolbox ist mit Komponenten berf llt und wirkt dadurch un bersichtlich e Projektmappen Explorer Hier sind alle Dateien des aktuell ge ffneten Projekts aufgelistet ber dieses Fenster lassen sich neue Dateien gleich welcher Art hinzuf gen und die Projekteigenschaften bearbeiten e Eigenschaftsfenster Hier k nnen die Eigenschaften des im Designer gew hlten Objektes ver ndert werden e Designer ist die Zeichenfl che des GUI Builders Bedienung Die Bedienung beim Einf gen von Komponenten wird durch die M glichkeit der absoluten Positionierung am Raster vereinfacht Der GUI Builder bietet mehrere M glichkeiten GUI Komponenten auf den Designer zu platzieren 23 e Durch Drag Drop k nnen Elemente aus der Toolbox auf den Designer gezogen werden Hierbei kann die Gr e des Elements bereits beim Erzeugen angepasst werden e Nach einem Doppelklick auf die Komponente in der Toolbox erscheinen die bereits angeklickten GUI Komponenten auf dem Designer e Nach einem Klick auf die Komponente in der Toolbox und einen weiterer Klick auf den Designer wird die Komponente an der gew nschten Stelle eingef gt Codegenerierung
156. rmitteln der Mausposition auf einem Zustandsdiagrammelement und stellt Methoden zum Zeichnen bereit ZustandDesigner ist eine von ZDiagrammElementDesigner abgeleitete Klasse Die Klasse ZutandsDesigner erweitert das Verhalten eines Zustands im Entwurfsmodus ZustandsuebergangDesigner ist eine von ZDiagrammElementDesigner abgeleitete Klasse Sie erweitert das Verhalten eines Zustands bergangs im Entwurfsmodus FassadeGenerator ist eine Klasse in der die Fassade des erzeugten Zustandsdiagramms generiert wird 58 6 4 Besonderheiten 6 4 1 Erweiterung der Toolbox um Zustandsdiagramm Elemente Die Toolbox besteht in der Ansicht des GUI Builders in Visual Studio aus einer gro en Anzahl von Toolboxelementen wie Buttons TextBoxes Listen etc Diese Toolbox ist in jedem Designer verf gbar Abh ngig von dem zurzeit verwendeten Designer ist es nicht immer sinnvoll in der Toolbox immer dieselben Toolboxelemente zur Verf gung zu stellen So sind z B Buttons Listen und andere f r den GUI Builder zur Verf gung stehende Toolboxelemente f r den ZustandsdiagrammDesigner uninteressant Stattdessen ergibt es Sinn f r einen ZustandsdiagrammDesigner in der Toolbox Elemente wie z B einen Zustand einen Zustands bergang einen Startzustand etc anzubieten und alle anderen Toolboxelemente zu deaktivieren Um dies zu erreichen benutzten wir einen Filter der es erlaubt nur bestimmte Toolboxelemente in der Toolbox zu aktivieren Damit Objekte der
157. rt dass ein Modell bei komplexen Systemen un bersichtlich wird Die Notation von Harel ist bereits weit verbreitet und wird in der Softwareentwicklung eingesetzt wie z B in UML Einige Statechart Editoren wurden bereits in der von uns durchgef hrten Marktanalyse untersucht Die Realisierung einer Modellierung in Form von Statecharts w rde aber den Rahmen der Bachelor Arbeit sprengen und wird deshalb f r die n chste Version geplant Denert ber cksichtigt bei der Spezifikation von Benutzungsschnittstellen eine gro e Anzahl Details und versucht diese zu einem sinnvollen Ganzen zu verbinden Denert 1992 Wir konzentrieren uns schwerpunktm ig auf die Erzeugung von Benutzungsschnittstellen Prototypen mit Hilfe von Zustandsdiagrammen und Fensterentw rfen und die automatische Generierung einer Fassadenschnittstelle siehe Abschnitt 1 2 Die Erzeugung der Prototypen soll mit m glichst geringem Aufwand erfolgen Sie sollten leicht nderbar und bei Bedarf zu einem ausgereiften System erweiterbar sein Das Hauptziel 37 dabei ist das dynamische Verhalten von Benutzungsschnittstellen in einer relativ fr hen Phase eines Projektes aufzuzeigen und somit eine fr he Kundeneinbindung zu erreichen Dadurch k nnen das Anwendungsprobleme und m gliche L sungen besser untersucht und verstanden werden so dass Fehler fr her als bisher entdeckt und beseitigt werden k nnen und somit weniger Kosten verursachen Die Spezifikation einer Benutzungssc
158. rue E bounds 0 O 392 270 v public NewJFrame buttonGroup E m LES EE S o writable Smart Insert 40 72 Abb 9 Jigloo in Eclipse Abb 9 zeigt die wichtigsten Komponenten von Jigloo in Eclipse in der vollen Ansicht Form Editor GUI Editor Source Editor Quelltext Editor Outline View oben rechts Property Editor unten rechts Bei der standardm igen Einstellung erscheinen Quelltext und GUI wie in Abb 9 zu sehen auf derselben Oberfl che So k nnen durch die gleichzeitige Darstellung von Entwurfsmodus und Quelltext Anderungen im Quelltext auch w hrend der GUI Erzeugung eingesehen werden 19 Die Outline View bietet eine gute bersicht ber alle bereits erzeugten GUI Komponenten Die verf gbaren GUI Komponenten sind in der Palette thematisch geordnet siehe Abb 10 was ihre Bedienung u ert erleichtert Containers Aa More Components Menu Custom Layout 0 PASTER TIT TEER Abb 10 Die Palette in Jigloo Auch der Property Editor Abb 11 ist anschaulich und wohlgeordnet Er besteht aus drei verschiedenen Fenstern e Properties e Layout e Events Properties Layout Events Properties Yalue Basic background 212 208 200 enabled W true focusTraversalPolicy font foreground 0 0 0 iconimage No Image locale Deutsch Deutschland preferredSize 0 0 size 400 300 title H Expert alwaysOnTop O false b
159. sabfrage w re eine m gliche Anforderung der n chsten SUIT Version Zusammenfassend ist mit der aktuellen SUIT Zustandsdiagramm Notation der Dialogverlauf eines Login Verfahren einer Benutzungsschnittstelle nicht Komplett darstellbar F r einen fr hen Prototyp reicht aber die Darstellungsform indem man von dem R ckgabewert der Verifizierungsfunktion absieht und den Anmeldevorgang als immer erfolgreich ansieht Der R ckgabewert einer Aktion ist f r die Modellierung des Zustandsdiagramm in SUIT ohne Belang Durch diese fehlende M glichkeit kann das Modell in den sp teren Phasen nicht mehr exakt die Benutzungsschnittstelle beschreiben wenn diese dialogablaufsteuernde Aktionsr ckgabewerte vom Programmierer selbst einprogrammiert werden m ssen Eine Erweiterung der aktuellen SUIT Zustandsdiagramm Notation m sste also in Betracht gezogen werden wenn f r die n chste SUIT Version die Konsistenzerhaltung prim res Ziel sein soll Eine m gliche Erweiterung der Notation um dialogablaufsteuernde Aktionsr ckgabewerte im Modell modellieren zu k nnen w re die W chter Bedingung die in Harel 1987 f r 109 Statecharts definiert sind Eine W chterbedingung ist eine Bedingung die wahr sein muss damit der bergang zu dem sie geh rt stattfinden kann Mit W chterbedingungen kann dokumentiert werden dass ein bestimmtes Ereignis je nach Bedingung zu unterschiedlichen berg ngen f hrt F r das Login Verfahren Beispiel k nnte eine Diag
160. schnittstelle entwickelt und prototypisch implementiert werden kann Um die Eignung des Tools f r die prototypische Implementierung einer Benutzungsschnittstelle zu demonstrieren wird in diesem Kapitel eine Fallstudie durchgef hrt Die Fallstudie hat die Entwicklung der Benutzungsschnittstelle eines Pizzaservicesystems zum Thema Die Untersuchung hat zwei Ziele Es soll demonstriert werden wie das Tool f r das Entwerfen von Benutzungsschnittstellen mit Hilfe von Zustandsdiagrammen und Fensterentw rfen eingesetzt werden Kann Es ist aufzuzeigen wie der Prototyp einer Benutzungsschnittstelle schrittweise l ckenlos und ohne den Einsatz zus tzlicher Tools erzeugt werden kann Durch die Demonstration anhand einer Fallstudie soll die Praxistauglichkeit des zu entwickelnden Tools berpr ft werden Die Untersuchung unterliegt zugleich einer Beschr nkung des Anspruchs Es ist nicht das Ziel ein lauff higes System zu entwickeln d h ein ausgereiftes Pizzaservicesystem zu entwerfen das auch tats chlich eingesetzt werden kann Daher wird auf eine detaillierte Anforderungsanalyse verzichtet die in der Praxis bei einem Software Entwicklungsprozess unabdingbar w re Eine ausf hrliche Analyse der Fallstudie ist also im Rahmen dieses Kapitels nicht geplant Eine detaillierte Beschreibung der Funktionalit t des zu implementierenden Systems Pizzaservice besitzt keine direkte Relevanz f r die in diesem Kapitel zu beschreibende Vorgehenswei
161. sdiagramm zugeordnet Buchsuche GUI Buchliste GUI und Buchinfo GUI sind Verweise auf den vom GUI Builder generierten Maskencode Dieser Code wird automatisch beim Betreten eines Zustands ausgef hrt Am Anfang befindet sich das Zustandsdiagramm im Zustand Buchsuche und die Operation Buchsuche GUI wird ausgef hrt sodass die Maske Buchsuche erscheint Durch einen Klick auf den Button Suche wird das Ereignis Suche_click ausgel st Das Zustandsdiagramm wechselt zum Folgezustand Buchliste Beim Betreten des Zustands Buchliste wird die Aktivit t Do Buchliste GUI ausgef hrt und es wird die GUI Maske der Buchliste angezeigt Von hier aus kann durch das Ausl sen von Details_click ein Zustands bergang angesto en werden und das Zustandsdiagramm wechselt in den Zustand Buchinfo In Buchinfo wird die Maske Buchinfo auf dem Bildschirm dargestellt Werden die Dialogabl ufe einer Benutzungsschnittstelle in einem formalen eindeutigen Modell beschrieben und das Modell um die Bildschirmmasken angereichert so ist wenig zus tzlicher Aufwand erforderlich um das Modell automatisch simulieren zu k nnen und die Dialogabl ufe gem dem Modell ablaufen zu lassen In einem Zustandsdiagramm k nnen au erdem noch Aktionen definiert werden die ausgef hrt werden wenn ein Ereignis einen Zustands bergang ausl st Im Beispiel der Literatur Suche z B l st ein Klick auf den Button suche ein Ereignis aus Dieses Ereignis st t eine Aktion an Die angesto ene A
162. sdiagrammElementContainer y Class SP ZustandsdiagrammElement Zustandsdiagrammelement S Abstract Class f Component Zustandsuebergang a Class ZustandsdiagrammElement Zustand 3 Class ZustandsdiagrammElement 2 Zustandsuebergang f Startzustand Class Zustand SP ZustanduebergangContainer lt lt ZustanduebergangContainer Class 139 TextBoxWriter Class Textwriter Q ZustandsdiagrammDesigner V Class ComponentDesigner EmbeddedsimulationGUI Y Class Form Zustandsdia SP EmbeddedSimulationGUI SimulationGUI FassadeGenerator Class Form austandsdiagrammvien Class UserControl FassadeGenerator Class 83 83 ZDiagrammE lementDesioner F Abstract Class i i P ComponentDesigner BL enmarcan ControlEventAction Class ControlEvent ction ZustandDesigner ZustandsuebergangDesigner ControlEventactionEditor Class Class ZDiagrammElementDesigner ZDiagrammElementDesigner op et ActionEditor ass UITypeEditor SP GUIRefChooser 2 ControlEvent ctionConverter GUIRefChooser Y EventActionChooser ControlEventActionConverter Class f Class em EventActionChooser StringConverter Class Form 2 GUIReferenzEditor P GUIReferenzConverter GUIReferenzEditor E Class UITypeEditor Class StringConverter Class 140 SP
163. se Die Untersuchung wird in folgenden Schritten vorgenommen Im Abschnitt 7 2 wird eine allgemeine Beschreibung des Ist Zustandes des Pizzaservicesystems gegeben Daraufhin folgt im Abschnitt 7 3 ausgehend von einem Anwendungsfalldiagrammes des Ist Zustandes die schrittweise Erzeugung des Prototyps Mit einem Fazit im Abschnitt 7 4 wird das Kapitel Fallstudie abgeschlossen 7 2 Ist Analyse Das System in dieser Fallstudie verwaltet den Bestellvorgang eines Pizzaservices Ein Kunde der eine Pizza bestellen will ruft bei dem Pizzaservice an um seine Bestellung abzugeben 76 Der Mitarbeiter der diesen Anruf entgegen nimmt soll mit Hilfe des Fallstudie Systems alle Bestellungen berblicken und die Bestellung des Kunden aufnehmen k nnen Ruft ein Kunde an wird bevor die Bestellung entgegen genommen wird berpr ft ob er dem System bekannt ist Dies geschieht durch die Anfrage der Haustelefonnummer des Kunden Die Haustelefonnummer wird als Identifikationskriterium gew hlt weil sie die Anschrift und somit die Lieferadresse eher eindeutig identifiziert als es ber den Namen der Fall ist da in einem Haushalt und somit bei einer Lieferadresse mehrere Personen wohnen k nnen Der Kunde ist so gesehen weniger die Person die die Bestellung aufgegeben hat als der Ort an den die Bestellung ausgeliefert wird Um ein schnelles Auffinden von im System bereits gespeicherten Kunden Adressen zu gew hrleisten ohne dabei immer wied
164. sind Im Abschnitt 6 3 wird die Programmstruktur von SUIT erl utert In Abschnitt 6 4 werden die Besonderheiten der Umsetzung von SUIT und die f r die Umsetzung des Tools verwendeten Net Technologien beschrieben In Abschnitt 6 5 wird die Schnittstelle zu SUIT erl utert In 6 6 folgt ein Fazit 6 2 Umgesetzte Anforderungen Die im Kapitel 4 beschriebenen Anforderungen werden in diesem Abschnitt aufgegriffen Es soll hier erl utert werden welche dieser Anforderung mit der aktuellen SUIT Version realisiert wurden und welche davon noch offen sind Im Folgenden wird eine Tabelle dargestellt die den Status erf llt nicht erf llt der einzelnen Anforderungen wiedergibt ID Abk rzung Status Klassifikation Al Erzeugen einer Zustandsdiagrammklasse Erf llt Must have A2 Toolbox Erf llt Must have A3 Erzeugen eines Zustandes per Drag amp Drop Erf llt Must have A4 Erzeugen eines Anfangszustandes per Drag Erf llt Must have amp Drop AS Erzeugen eines Zustandes per Doppelklick Erf llt Should have A6 Erzeugen eines Startzustand per Doppelklick Erf llt Should have A7 Erzeugen eines Zustands bergang Erf llt Must have Transition per Drag amp Drop AS Erzeugen eines rekursiven Erf llt Should have Zustands bergangs A9 L schen eines Zustandes Erf llt Must have A10 L schen eines Startzustandes Erf llt Must Have All L schen eines Zustands bergangs Erf
165. speiche 3 Klicken Sie auf die Option Fassade erzeugen In Ihrem Projekt sollte nun eine Klasse Fassade zu finden sein Tipp Wenn Sie bereits eine Fassade erzeugt haben wird diese Fassade mit den hier beschriebenen Schritten 1 3 wieder aktualisiert 136 6 Simulation 6 1 Voraussetzung f r die Simulation Bevor Sie simulieren sollten Sie das Zustandsdiagramm erstellt siehe Abschnitt 4 1 und ihr Modell entworfen haben Ihr Modell muss ber einen Startzustand verf gen alle erreichbaren Zust nde sollten eine g ltige GUI Maske zugewiesen bekommen haben Siehe Abschnitt 4 5 und vermeiden Sie in Ihrem Modell unklare Wegverzweigungen wie z B in der unteren Abbildung wo ein Ereignis zu zwei unterschiedliche Zust nde f hrt Login Arbeitsum Login Click Userverifying gebung Login cs Login Click Userverifying Bevor die Simulation ausgef hrt werden kann sollten Sie die Fassaden Klasse genieren lassen und daf r sorgen dass Ihr Projekt fehlerfrei kompilierbar ist 6 2 Wie startet man eine Simulation Um eine Simulation zu starten gehen Sie wie folgt vor 1 Markieren Sie das Zustandsdiagramm in dem Sie auf eine freie Stelle der Zeichenfl che des Zustandsdiagramm Designers anklicken Eigenschaften n X 2 Im Eigenschaftsfenster sollte nun die Zustandsdiagramm2 SUIT Zustandsdiagramn Eigenschaften des Zustandsdiagramms erscheinen und unterhalb der Liste eine GE Option Fassade
166. spezifizierte dynamische Verhalten einer Benutzungsschnittstelle zu berpr fen Da die dynamische Verhaltensspezifikation durch Zustandsdiagramme erfolgt muss die Simulation die Zustandsdiagramme in dem Sinne animieren dass der Ablauf der Zustandsfolgen mit den damit verbundenen Bildschirmmasken graphisch visualisiert wird Die Simulationsm glichkeit erm glicht somit ein exploratives Prototyping Dieses hilft dabei die Kommunikation zwischen den Entwicklern und den Benutzern zu erleichtern Lauff hige Prototypen sind das bestm gliche Kommunikationsmittel ber eine Benutzungsschnittstelle Sie werden in der Anforderungsanalyse angewandt um die Anforderungen von Benutzern an das k nftige System zu identifizieren Mit SUIT sollen Prototypen mit m glichst geringem Aufwand und mit so wenig Kosten wie m glich erstellt werden Au erdem soll es in SUIT die M glichkeit geben Prototypen nicht nur als Wegwerfprototypen zu realisieren sondern diese auch zu einem ausgereiften System weiterentwickeln zu k nnen Die Kosten und der Aufwand im Rahmen der Realisierung einer Benutzungsschnittstelle soll auch durch die automatische Codegenerierung reduziert werden Durch die automatische Erzeugung der Fassade entf llt hiermit ein weiterer manueller Programmieraufwand 1 2 3 SUIT Komponenten Die zentrale Anforderung an das Tool dieser Bachelor Arbeit besteht darin Benutzungsschnittstellen in Form von Zustandsdiagrammen und Bildschirmmasken zu erzeug
167. ss hier das Modell gezielt auf ein Zustandsdiagramm hin entwickelt worden ist Wenn es sich in Abb 1 und Abb 4 um ein und dasselbe Modell handelt kann man doch die Dialogabl ufe gleich in Form eines Zustandsdiagramms wie sie in Abb 4 dargestellt sind modellieren da Zustandsdiagramme viele Konstrukte bieten die f r die Modellierung einer Benutzungsschnittstelle sinnvoll eingesetzt werden k nnen Da es ohnehin n tig ist die Masken zu skizzieren ist es doch zweckm ig diese Skizzen mit Hilfe eines GUI Builders zu erzeugen Das Ergebnis ist dann ein ausf hrbarer Code der Maske In einem Zustandsdiagramm k nnen in jedem Zustand Aktivit ten definiert werden Dabei handelt es sich um Operationen die ausgef hrt werden wenn sich das Zustandsdiagramm in dem Zustand befindet Wurden nun ausf hrbare Skizzen mit einem GUI Builder generiert k nnen diese als Aktivit t in einem Zustand definiert werden Auf diese Weise wird beim Eintreten eines Zustands die dazugeh rige GUI ausgef hrt Im Folgenden Abb 5 ist das Zustandsdiagramm aus Abb 4 dargestellt das um den ausf hrbaren Code der Masken in Form von Aktivit ten angereichert wurde Buchsuche Buchliste Suche_click Do Buchsuche Do Buchliste GUI GUI Details_click Buchinfo Do Buchinfo GUI Abb 5 Zustandsdiagramm Literatur Suche um die Masken angereichert 11 In Abb 5 wurden Masken mit Hilfenahme eines GUI Builders generiert und diese den Zust nden im Zustand
168. standsdiagrammdesigners referenziert und benutzt zu werden Sie erscheinen aber noch nicht auf der Toolbox Abb 28 da sie dieser noch nicht hinzugef gt wurden 39 Fallstudie CSharp Microsoft Visual C NET Entwurf Angebot Zustandsdiagrammi cs Entwurf K laj x Datei Bearbeiten Ansicht Projekt Erstellen Debuggen Daten Extras Fenster Hilfe Sm Sugi Beno p Debug y ql Hitteft Ear Bear aa milano 590 Et Toolbox 9 botneu cs AngebotiAngebot cs Angebot Angebots lung cs Entwurf Kunde Kundeneu cs Entwurf Angebot Zustan 1 cs Entwurf lt gt x Projektmappen Expl 4 X Zustandsdiagrammeditor Elemente Mela 18 X Zeiger T Projektmappe Fallstudie c S EN Fallstudie CSharp a 3 Verweise E Y Angebot 8 Angebot cs 8 AngebotNeu cs Angebotsanzeig Angebotserstell Angebotspflege Angebotssuche Zustandsdiagram B 3 Bestellung Bestellung cs Pizzaservice cs E Kunde Kunde cs ES Kundenanzeige Kundenerstellun Kundeneu cs Kundenpflege c Kundensuche cs App ico E AssemblyInfo cs Fassade cs 8 Pizzaservice cs v 4 Eigene Benutzersteuerelemente Aufgabenliste 21 Buildfehler angezeigte Aufgaben gefiltert mx Zwischenablagerin a Beschreibung gt jemein 4 Ausgabe al Bereit Abb 28 Toolbox vor dem Hinzuf gen der Toolboxitems f r
169. t tigen einer Taste sein Ereignisse l sen wie die virtuellen Tasten bei Denert Zustands berg nge aus Das System kann dabei in jedem Zustand auf verschiedene Ereignisse mit dem Wechsel in andere Zust nde reagieren Mit Hilfe von Ereignissen kann der Benutzer durch das Modell navigieren e Aktionen dies sind Operationen die w hrend einer Transition von einem Zustand zum anderen ausgef hrt werden Eine Aktion wird angesto en wenn ein Ereignis ausgel st wird Die Spezifikation von Aktionen wie sie Denert vornimmt Abschnitt 2 2 6 wird von uns nicht durchgef hrt da diese ber die reine Simulation einer Benutzungsschnittstelle hinausgehen w rde Masken werden in Form von Aktivit ten den Zust nden eines Zustandsdiagramms zugeordnet In jedem Zustand wartet das System auf eine Benutzereingabe Erfolgt eine Benutzereingabe so navigiert das System von einem Zustand zum Folgezustand Gel nge man durch eine Aktion in einen Endzustand so w ren keine weiteren Eingabe und somit keine Navigationsm glichkeiten mehr m glich da ein Endzustand das Ende eines Systems symbolisiert Dem Endzustand wird keine Maske zugeordnet weil keine Eingabe 38 mehr erfolgen darf Wenn man sich also im Endzustand befindet ist keine Maske mehr aktiv Alle Masken sind geschlossen und es ist keine mehr offen Wir verzichten somit auf die Definition eines Endzustands da das Ende eines Systems auch durch das Schlie en aller offenen Masken erreicht
170. tElement ZustandsdiagrammElement endElement initialize dient der Initialisierung einer Komponente bei ihrer Erzeugung Parameter Beschreibung ZustandsdiagrammDesigner designer Ein Designer des Typs ZustandsdiagrammDesigner String name Name der Komponente Point startPunkt Der Start Punkt an dem der Drag begann Dieser Punkt ist dem DragControl gebunden und nicht global daher muss er noch mit screenOffset addiert werden Point endPunkt Der End Punkt an dem der Drag endet Dieser Punkt ist dem DragControl gebunden und nicht global daher muss er noch mit screenOffset addiert werden ZustandsdiagrammElement startElement Das ZustandsgiagrammElement das an der Position des startPoint angesiedet ist Ist null wenn an dem startPoint kein Element vorhanden ist ZustandsdiagrammElement endElement Das ZustandsgiagrammElement das an der Position des endPoint angesiedelt ist Ist null wenn an dem endPoint kein Element vorhanden ist Tabelle 8 Parameter von initialize 6 5 2 ZDiagrammElementDesigner Die abstrakte Klasse ZDiagrammElementDesigner stellt eine Basisdesignerklasse zum Erweitern des Verhaltens einer Komponente im Entwurfsmodus dar ZDiagrammElementDesigner implementiert folgende Static Variablen 69 Static Variable Beschreibung Object HitMove Wird gesetzt wenn die Maus einen Punkt meist irgendwo in der Mitte des ZustandsdiagrammElement ber hrt hat
171. tellen von Zustandsdiagrammen verf gbar Aber ein Werkzeug das die Funktionalit t eines GUI Builders und eines Zustandsdiagramm Editors kombiniert wurde im Rahmen unsere Recherche nicht gefunden Daraus leitet sich die Notwendigkeit ab SUIT zu realisieren Die Implementierung eines eigenen GUI Builders wird nicht geplant siehe 1 2 3 Es wurden deshalb die GUI Builder Jigloo und Visual Studio Net GUI Builder n her betrachtet Die 28 Analyse hat dazu gef hrt dass wir uns f r den integrierten GUI Builder von Visual Studio Net als geeigneter GUI Builder zur Wiederverwendung f r das Tool dieser Bachelor Arbeit entschieden haben Weiterhin wurden die Zustandsdiagramm Editoren von Together und Visio betrachtet um neue sinnvolle Anforderungen f r die Realisierung eines eigenen Zustandsdiagrammeditor in SUIT finden 29 3 Theorie 3 1 Einleitung Den Schwerpunkt dieses Kapitels stellt die Erzeugung von Benutzungsschnittstellen mit Hilfe eines endlichen Automaten und Fensterentw rfen dar In Abschnitt 3 2 wird dieser Ansatz detaillierter erl utert und das im Rahmen dieser Bachelor Arbeit zu implementierende Tool vorgestellt Eine M glichkeit welche in Denert 1992 aufgezeigt wird ist die Modellierung von Benutzungsschnittstellen in Form von Interaktionsdiagrammen Diese Vorgehensweise wird im Rahmen dieses Kapitels in Abschnitt in 3 3 beschrieben In Abschnitt 3 4 wird die von uns im Rahmen dieser Bachelor Arbeit verwendete
172. ten hat ein Zustandsdiagramm gereicht um die gesamte Benutzungsschnittstelle zu beschreiben ohne dass es un bersichtlich wurde Bei gr eren Benutzungsschnittstellen kann diese bersichtlichkeit im Zustandsdiagramm Modell verloren gehen Um bersichtlichkeit zu gew hrleisten muss eine M glichkeit zur logischen Strukturierung des SUIT Zustandsdiagramm Modell geboten werden Diese Strukturierung Kann in Form von Hierarchien realisiert werden Hierarchien bieten hierbei eine M glichkeit ein Zustandsdiagramm in mehrere Teildiagramme zu unterteilen Das aktuelle SUIT Zustandsdiagramm hat den Aspekt der Hierarchie noch nicht integriert Da SUIT sich aber an Statechart Definition anlehnt Kann dies eingebaut werden Statechart bietet die M glichkeit Hierarchien Harel 1987 zu definieren und zu erzeugen In der n chsten SUIT Version sollte um Struktur und bersichtlichkeit einzuf hren diese Hierarchie in die SUIT Zustandsdiagramm Notation eingef hrt werden 106 10 2 2 Erweiterung Konsistenzerhaltung Die aktuelle SUIT Version ber cksichtigt nicht die Implementierungen von Funktionalen Aspekten der Benutzungsschnittstelle Das prim re Ziel von SUIT ist das fr he Prototyping In dieser fr hen Phase hat man noch kein detailliertes Verst ndnis ber die Funktionalit t Daher wurden in der aktuellen SUIT Zustandsdiagramm Notation keinerlei Konstrukte angeboten die diese Funktionalit ten im Modell ber cksichtigen In den sp ter
173. ttstellensystem gehen Au erdem w rde eine Komponente die Teil der Benutzungsschnittstelle werden m sste f r den SUIT Anwender bedeuten dass er eine zus tzliche Komponente in seinem Projekt zu verwalten und verstehen hat Aus diesem Grunde wurde in SUIT auch auf diese Komponente verzichtet In der aktuellen SUIT Version wird somit keinerlei Codegenierung f r den Aufruf des Folgezustands unterst tzt SUIT berl sst dies der Zust ndigkeit des Programmierers da dieser am besten bestimmen kann wie und wo diese Codestellen hingeh ren In der aktuellen SUIT Version wird bei der Simulation mit Hilfe des Zustandsdiagrammmodels bestimmt welcher Zustand der Aktuelle is um dann den entsprechenden Folgezustand Folgemaske aufzurufen Aber f r das endg ltige Benutzungsschnittstellesystem muss der SUIT Anwender selbst daf r sorgen 9 2 6 Konsistenzverlust in sp teren Phasen Mit der jetzigen SUIT Zustandsdiagramm Notation haben wir erreicht dass Benutzungsschnittstellen schnell und verst ndlich mit einem Zustandsdiagramm modelliert werden k nnen Die Usabilty Tests haben gezeigt dass diese unkomplizierte SUIT Zustandsdiagramm Notation stark dazu beigetragen hat diese Methodik der Benutzungsschnittstellen Modellierung verst ndlich und intuitiv umsetzbar zu halten Ziel ist es ein Tool zu bieten das m glichst fr h in den Etappen der Softwareentwicklung zum Einsatz kommt Das Abbilden von funktionalen Elementen war daher nie bestreben
174. tzungsschnittstelle also die auftretenden Abfolgen von Masken und die damit verbundenen Eingaben und Ausgaben zu beschreiben Was durch die obige Abbildung jedoch deutlich wird ist dass dieses Modell aus der Logik der Vorgehensweise heraus ein bestimmtes Muster eine Struktur aufweist Im Modell bilden die Masken die Knoten und die Pfeile mit denen die Masken verbunden werden die Kanten Wird eine Eingabe bet tigt so wird zu der Folgemaske gewechselt Beim n heren Betrachten des Modells handelt es sich um nichts anderes als einen endlichen Automaten Der endliche Automat ist folglich kein Resultat einer besonderen methodischen Vorgehensweise sondern ein Ergebnis das w hrend des bildhaften Entwurfs der Dialogabl ufe durch eine Anzahl von aufeinander folgenden Masken instinktiv entsteht Der endliche Automat ist also kein gezielt anvisiertes Ergebnis So instinktiv wie diese Betrachtungsweise scheint ist sie in der Literatur bis auf einige Ausnahmen wie Denert in Denert 1992 nicht beschrieben Denert beschreibt in Denert 1992 die Modellierung von Benutzungsschnittstellen in Form von Interaktionsdiagrammen diese sind eine Art endlicher Automaten Eine weitere M glichkeit endliche Automaten darzustellen sind Zustandsdiagramme Die Dialogabl ufe lassen sich wie bereits im Modell beschrieben auf einen endlichen Automaten zur ckf hren Endliche Automaten k nnen durch Zustandsdiagramme beschrieben werden Somit k nnen die Dialogabl
175. uf die GUI Builder Komponente auf die Simulationskomponente auf die Codeerzeugungskomponente Auf die Entwicklung eines neuen GUI Builders wurde verzichtet da der GUI Builder von Visual Studio sich hier anbietet wiederbenutzt zu werden und dadurch die Realisierung eines eigenen GUI Builders nicht erforderlich ist Somit kann Entwicklungszeit gespart werden 49 und der Anwender bekommt ein GUI Builder vorgesetzt mit dem er mehr oder minder vertraut ist Es wird somit auf die GUI Builder Komponente zur ckgegriffen die Visual Studio bereits zur Verf gung stellt Dieser Zugriff ist dank des Service Hierarchy Konzept von Net m glich da in Net mit diesem Service auch auf Instanzen des GUI Builder Designer zugegriffen werden kann Durch die Wiederverwendung des bereits in Visual Studios bestehenden GUI Builders l sst sich SUIT letztendlich in 3 eigenen Komponenten und eine fremd entwickelte Komponente aufteilen Abb 24 zeigt das Zusammenspiel dieser Komponenten Visual Studio Anwender Projekt Zustandsdiagramm Fassade Code Code ne a A Einbinden per Serializer NET Framework Zustandsdiagramm Codegenerierungs GUI Komponente komponente Designer Kompo Generiert aus dem Zustandsdiagramm die Fassaden nente Bietet Klassen zur Darstellung KI asse und Erstellung von Zustandsdiagrammen in Designer Ansicht an Simulationskomponente Simuliert den Ablauf des GUI System das mit Hilfe des Zustandsdiagramms
176. ulation Li ds 137 122 1 Systemanforderung SUIT wurde f r die Entwicklungsumgebung Visual Studio Net 2003 von Microsoft entwickelt Um SUIT zu benutzen sind Microsoft Visual Studio Net 2003 und das Microsoft Net Framework Version 1 1 Voraussetzung Getestet und entwickelt wurde SUIT mit dem Net Framework 1 1 4322 SP1 123 2 Installationshinweise 2 1 Installation von SUIT Bitte beachten Sie vor der SUIT Installation die Systemanforderungen in Abschnitt 1 Um SUIT zu Installieren legen Sie die SUIT CD in ihr CD ROM Laufwerk ein und starten Sie die sich auf der CD befundenen Setup exe Folgen Sie den Installationsanweisungen der Setup Routine bis zum erfolgreichen Abschluss der SUIT Installation 2 2 Installationen des Zustandsdiagramm Template In der Aktuellen SUIT Version Vers 1 00 unterst tzt SUIT zur Zeit nur f r die Net Sprache C einen Projectltem Template zur Erzeugung von Zustandsdiagrammklassen Daher gibt es auch nur eine Installaltionsbeschreibung f r das Einrichten des Template f r CF siehe 2 2 1 2 2 1 Installation von C Template Um f r C Projekte das Projektltem BenutzerschnittstellenZustandsdiagramm zu bekommen installieren Sie den C Template Kopieren Sie dazu das ganze Verzeichnis C auf der CD ROM in ihren Visual Studio Net 2003 Verzeichnis Das Visual Studio Net 2003 Verzeichnis finden Sie standardm ig unter C Programme Microsoft Visual Studio NET 2003 berschreiben Sie die vorh
177. umgebung Gitter dienen der Positionierung von Zustandsdiagrammelementen Zustandsdiagrammelemente k nnen somit vertikal oder horizontal ausgerichtet werden indem man sich am Gitter des Zeichenblattes orientiert Anders als in Together erh lt der Benutzer die M glichkeit seine Seite individuell einzurichten Die Gr e des Zeichenblattes kann vom Anwender beliebig definiert werden Die Seite kann im Querformat oder Hochformat dargestellt werden Der Benutzer kann au erdem noch die R nder des Zeichenblattes ndern Die Men s und Symbolleisten in Visio sind mit den Men s und Symbolleisten in anderen Microsoft Office Programmen vergleichbar so dass man standardisierte Verfahren zum ffnen Drucken und Speichern von Diagrammen benutzen kann Zustandsdiagrammelemente k nnen auf vielf ltige Weise hervorgehoben werden durch die Farbe das Muster die Farbe der Linien die das Muster bilden die St rke der Linien etc Au erdem stellt der Zustandsdiagrammeditor von Visio wie alle anderen Microsoft Office Programme verschiedene M glichkeiten zum Formatieren von Text zur Verf gung Ein weiterer Vorteil besteht in der M glichkeit des Hinzuf gens von Hyperlinks zu Zustandsdiagrammelementen denn mit diesen Verkn pfungen kann man zu einer anderen Seite in demselben Diagramm zu einem anderen Visio Diagramm zu einer beliebigen Datei oder zu einer Webseite wechseln Um eine einwandfreie Druckausgabe zu gew hrleisten bietet Visio eine
178. uptthemen gliedern Vorkenntnisse Bedienung und Methode Folgende Fragen wurden der Testperson gestellt Vorkenntnisse 1 Haben Sie schon einmal mit Visual Studio Net gearbeitet 2 Haben Sie schon einmal mit einem Zustandsdiagramm gearbeitet Wenn ja mit welchem Und wie w rden Sie SUIT anhand Ihrer Erfahrungen im Vergleich mit den anderen Zustandsdiagrammeditoren beurteilen 3 Haben Sie schon einmal Prototypen f r BSS erstellt Wenn ja wie umfangreich war der investierte Aufwand Bedienung 4 Wie beurteilen Sie die Bedienung von SUIT Sehen Sie vor allem Schw chen oder St rken in der Bedienung von SUIT Methode 5 Wie beurteilen Sie die Idee den Ansatz BSS mit Hilfe von Zustandsdiagrammen und Fensterentw rfen zu entwerfen F llt Ihnen diese Denkweise schwer 6 W rde die Genierung einer Fassade f r Sie eine Arbeitserleichterung bedeuten 7 Stellt die Simulation f r Sie eine hilfreiche Veranschaulichung ihres Modells dar 8 W rden Sie SUIT f r die Erstellung ihrer n chsten Prototypen nutzen wollen 9 Welche Schwachstellen sehen Sie in SUIT welche Verbesserungsvorschl ge w rden Sie anf hren 8 4 Ergebnisse Der Usability Test fand in einem Usability Labor uselab der Hochschule f r Angewandte Wissenschaften Hamburg statt Alle von der Testperson vorgenommenen Eingaben ber 92 Tastatur und Maus wurden w hrend der Bearbeitung der Testaufgabe in SUIT aufgezeichnet Neben dem Bildschirmgesche
179. verwaltungswerkzeug und Angebotsverwaltungswerkzeug und in das Kombi Werkzeug Bestellverwaltungskombiwerkzeug untergliedert Diese Werkzeuge werden nun miteinander durch ein Zustandsdiagramm Abb 48 wieder zum Gesamtsystem integriert Die Startmaske des Gesamtsystems Pizzaservice ist in Abb 47 zu sehen A Pizzaservice Kundenverwaltung Angebotsverwaltung Bestellungsverwaltungssystem Abb 47 Startmaske des Gesamtsystems Pizzaservice Zu Beginn befindet sich das System im Zustand start Durch das Bet tigen der Taste Kundenverwaltung gelangt das System in das Kundenverwaltungswerkzeug Abb 41 durch Bet tigen der Taste Angebotsverwaltung in das Angebotsverwaltungswerkzeug Abb 36 ber die Taste Bestellverwaltungssystem schlie lich gelangt man in das Bestellverwaltungskombiwerkzeug Abb 48 87 Mit Hilfe des entstandenen Zustandsdiagramms in Abb 48 kann nun das Verhalten der Benutzungschnittstelle des Pizzaservicesystems simuliert werden Das Zustandsdiagramm kann nun von der Simulationskomponenete interpretiert und automatisch ausgef hrt werden Start zur ck Click geheZu_start emdAngebotsverwaltung Click geheZu_angebotssuche BestellungiPiz cmdKundenverwraltung Click show_kundensuche zaservice cs Bereit zur Kundensuche Bereit zur Angebotssuche mdAngebotSuchen Click show_angebotssuche Kunde Kunden suche cs Angebot Ange
180. von ZustandsdiagrammElement erbenden Komponenten Startzustand Zustand und Zustandsuebergang in der Toolbox f r den ZustandsdiagrammDesigner aktiviert werden k nnen m ssen die von System ComponentModel Component abgeleitete Klasse ZustandsdiagrammElement und die Designer Klasse ZustandsdiagrammDesigner vor der Klassendeklaration folgenden Code enthalten ToolboxItemFilter SUIT ZustandsdiagrammEditor ZustandsdiagrammElement ToolboxItemFilterType Require ToolboxlItemFilter String ToolboxltemFilterType gibt die f r ein Toolboxelement zu verwendende Filterzeichenfolge und den Filtertyp an Der ToolboxltemFilterT ype ToolboxItemFilterType Require gibt an dass die Filterzeichenfolge SUIT ZustandsdiagrammEditor ZustandsdiagrammElement f r ein Toolboxelement vorhanden sein muss um ein Toolboxelement zu aktivieren Diese Bedingung ist f r den Startzustand Zustand und Zustands bergang gegeben da diese Klassen von ZustandsdiagrammElement abgeleitet sind und somit die Filterzeichenfolge SUIT ZustandsdiagrammEditor ZustandsdiagrammElement erben Des Weiteren m ssen die Klassen ZustandsdiagrammDesigner und ZustandsdiagrammElement ber eine bereinstimmende Filterzeichenfolge verf gen In unserem Code verf gen beide Klassen ber die Filterzeichenfolge SUIT ZustandsdiagrammEditor ZustandsdiagrammElement Die Toolboxitems vom Typ Startzustand Zustand und Zustandsiibergang erfiillen jetzt die Bedingung innerhalb des Zu
181. wendigkeit dieser Methode k nnte au erdem noch darin liegen dass z B AnzeigeKunde als Funktionalit t h tte daf r zu sorgen dass der ausgesuchte Kunde aus der Datenbank geholt und angezeigt werden muss Jedoch ist das nicht immer der Fall dass beim Zustands bergang eine Aktion ben tigt wird Diesen Mangel soll in der n chsten SUIT Version behoben werden Es ist geplant dass die SUIT Zustandsdiagrammnotation f r die n chste Version auf die Eigenschaft hin erweitert werden kann Aktionen bei Transitionen als eine optionale Angabe anzusehen und nicht mehr als notwendige Pflichtangabe 102 Wenn man unter diesem Aspekt genauer berlegt ist es fragw rdig ob der Code f r den Aufruf der Folgemaske wirklich idealerweise immer in der Aktion generiert werden sollte Dagegen spricht vor allem die Tatsache dass es nicht in jeder Aktion Sinn macht den Code f r den Folgemaskeaufruf zu generieren Da es Aktionen geben kann nach deren Ausf hrung unterschiedliche Folgemasken geladen werden m ssen ist eine Codegenerierung f r den Aufruf der Folgemaske in der Aktion sogar fatal In Abbildung 4 ist eine Aktion SpeichernKunde zu erkennen die in zwei Transitionen benutzt werden Diese zwei Transitionen haben unterschiedliche Folgemasken einmal zur BestellungDetails cs und einmal zu KundenListe cs W rde hier Code f r den Aufruf der Folgemaske in der Aktion SpeichernKunde generiert werden so ist v llig unklar ob nur die Folgemaske nun B
182. wenn sich am Element bzw in seiner Darstellung etwas ver ndert Dies kann z B beim Selektieren durch zeichnen eines Selektionsrahmen erfolgen 70 GetHitTest public abstract object GetHitTest int x int y Diese Methode berpr ft ob das Element mit dem Mauszeiger ber hrt wurde Der Root Designer wird jedes Mal diese Methode aufrufen wenn ein Maus Move Ereignis ausgel st wird Das zur ckgegebene Objekt ist Null wenn die Koordinaten nicht auf dem Element liegen Wenn die Koordinaten auf dem Element sind gibt die Methode ein Identifizierungsobjekt wieder dass der Designer sp ter weiter benutzen kann Dieses R ckgabeobjekt kann der GetCursor DrawDragFeedback und Drag Methode bergeben werden Die Methode GetHitTest gibt ein Object Tabelle 4 zur ck dass die Ber hrung identifiziert Dieser kann null sein wenn der Punkt sich nicht im Element befindet Parameter Beschreibung Int x Die X Koordinate f r den Ber hrungstest Int y Die Y Koordinate f r den Ber hrungstest Tabelle 10 Parameter von GetHitTest IsInRect public abstract bool IsInRect Rectangle r Diese Methode berpr ft ob eine Komponente in einem bergebenden Rechteck r enthalten ist Diese Methode wird bei einer Selektion durch einen rechteckigen Bereich das per Drag amp Drop gezogen worden ist verwendet um zu berpr fen ob das Element in diesem Rechteck enthalten ist Sie gibt einen Boolean Wert zur ck der true
183. werden kann Denn wenn keine Maske mehr offen ist bedeutet das dass man sich in keinem der definierten Zust nde des erstellten Zustandsdiagramms mehr befindet Das Ende eines Systems kann also auch dadurch erreicht werden wenn alle Masken geschlossen werden und keine mehr offen ist Die Einsparung des Endzustands f hrt zur Einsparung vieler Zustands berg nge Die Transitionen die zum Endzustand hinf hren fallen dadurch weg Sie werden im Modell nicht mehr visualisiert Die Einsparung dieser Zustands berg nge erh ht die bersichtlichkeit innerhalb des modellierten Zustandsdiagramms Denn viele GUI Systeme k nnen von jedem Dialog aus beendet werden Das w rde in einem Zustandsdiagramm bedeuten dass von jedem Zustand eine Transition zum Endzustand f hrt Dadurch werden Zustandsdiagramme un bersichtlich und un berschaubar Das Weglassen eines Endzustands f hrt also zur Einsparung vieler Zustands berg nge und verhilft zu erh hter bersichtlichkeit innerhalb des Zustandsdiagramms 3 4 2 SUIT Notation Zustand Ein Zustand Abb 19 wird durch ein Rechteck visualisiert Er enth lt seine Bezeichnung und eine Aktivit t Bei der Aktivit t handelt sich hierbei um eine Referenz auf den ausf hrbaren Maskencode siehe 1 2 Bezeichnung Maske cs Abb 19 Zustand Ein Startzustand Abb 20 besteht aus drei Komponenten ein gef llter Kreis einen Zustands bergang und einen Zustand wobei der Zustands bergang vom gef llte
184. werkzeug angezeigt gepflegt gel scht und neu angelegt werden Bei den beiden identifizierten Werkzeugen handelt es sich um einfache Werkzeuge mit elementarer Funktionalit t da sie wiederkehrende Arbeitsabl ufe wie Kunden suchen oder Kundendaten pflegen unterst tzen 79 Nachdem die elementaren Werkzeuge Kundenverwaltungswerkzeug und Angebotsverwaltungswerkzeug identifiziert worden sind widmen wir uns im Folgenden der graphischen Repr sentation der einzelnen Werkzeuge 7 3 3 Entwicklung der Benutzungsschnittstelle auf Basis eines Zustandsdiagramms Eine Benutzungsschnittstelle besteht in der Regel aus einer Menge von Masken und Dialogboxen zwischen denen durch Eingabeaktionen Men auswahl OK Button usw hin und her gewechselt werden kann In der zustandsbasierten Modellierung befindet sich die Benutzungsschnittstelle immer dann in einem Zustand wenn sie auf eine Eingabe wartet Tritt ein Ereignis z B durch das Bet tigen einer Taste auf so navigiert die Benutzungsschnittstelle von einem Zustand zu einem anderen Zustand Werden also Benutzungsschnittstellen in Form von Zustandsdiagrammen und Fensterentw rfen modelliert so kann jedem Zustand eine Maske zugeordnet werden siehe 1 2 Im Folgenden wird dies zun chst f r die identifizierten Werkzeuge Angebotsverwaltungswerkzeug und Kundenverwaltungswerkzeug in SUIT durchgef hrt 7 3 4 Angebotsverwaltungswerkzeug Wie man dem Anwendungsfalldi
185. y setDefaultClose peration Windowlconstants DISPOSE_ON_CLOSE getContentPane setLayout null i jButtoni new JButton getContentPane add jButtoni jButtonl setText jButtonl jButtonl setBounds 25 21 140 28 jButtonl addictionListener new ActionListener public void actionPerformed ActionEvent evt System out println jButtonl actionPerformed event evt TODO add your code for jButtonl actionPerformed jButton2 new JButton getContentPane add jButton2 jButton2 setText jButton2 jButton2 setBounds 217 21 140 28 pack setSize 400 300 catch Exception e e printStackTrace Abb 13 Code Ausschnitt einer GUI mit 2 JButtons und ActionListener in Jigloo F gt man einer GUI Komponente in Abb 13 JButtonl einen ActionListener vom Typ Anonymous hinzu so wird der Code wie Block A in Abb 8 dargestellt Wird nun in der Methode actionPerformedO Code einprogrammiert wird dieser beim L schen des ActionListeners ber Jigloo ebenfalls gel scht Vorteilhaft ist hierbei jedoch dass beim erneuten Erzeugen eines ActionListeners des Typs Anonymous ber Jigloo der vom Anwender erzeugte Code wieder eingef gt wird sofern noch keine Speicherung des Codes erfolgt ist 2 4 2 Integrierter GUI Builder von Microsoft Visual Studio Net Der GUI Builder ist ein fester Bestandteil von Visual Studio Net Visual Studio Net 2003 Microsoft Visual Studio Net ist nicht
186. zerschnittstellenmodellierung umsetzt kein Ergebnis Es zeigte sich dadurch die Notwendigkeit SUIT zu realisieren Der Einsatz von SUIT in einer Fallstudie am Beispiel eines Pizzalieferservice Systems hat sich als praxistauglich erwiesen Neben einer Fallstudie wurde SUIT noch in einem Usability Labor von freiwilligen Testern getestet Die Tester u erten sich positiv ber die Vorgehensweise Benutzungsschnittstellen mit Hilfe von Zustandsdiagrammen und Fensterentw rfen zu modellieren Alle Testpersonen sind der Meinung dass diese Methode eine gro e Hilfe f r die Erstellung von Benutzungsschnittstellenprototypen darstellt und ihnen manuelle Arbeit in gr erem Umfang erspart Die in der Vision geschilderten Erwartungen an SUIT haben sich im Usability Labor best tigt Die Tester k nnen sich gut vorstellen dass sich durch die schnelle Prototyperzeugung in SUIT die Benutzer Entwickler Kommunikation verbessern w rde Auch die Fassadengenerierung die eine Schnittstelle zwischen der Interaktionskomponente und der funktionalen Komponente darstellt wird von den Testern als positiv eingestuft Die automatische Fassadengenerierung bietet somit eine Schnittstelle zur Weiterentwicklung des Prototyps und nimmt den Programmierern Programmieraufwand ab Die in Rahmen dieser Bachelor Arbeit durchgef hrten Tests an SUIT deuten darauf hin dass SUIT die gew nschten Aussichten die in der Vision beschrieben wurden erf llt Wie sich SUIT letztendlich

pdf, ca. 3,8 MB - Persönliche Webseiten der Informatik

Contents

Download Pdf Manuals

Related Search

Related Contents

pdf, ca. 3,8 MB - Pers&ouml;nliche Webseiten der Informatik

Contents

Download Pdf Manuals

Related Search

Related Contents

pdf, ca. 3,8 MB - Persönliche Webseiten der Informatik