Worum geht es?Umsetzung
ZusammenfassungEnde
Modellierung von Benutzerschnittstelleneiner Web-Applikation mit UML
Analyse und Modellierung von prozessorientierten Systemen -Sommersemester 2008
Helko Glathe
01. Juli 2008
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Overview
1 Worum geht es?MotivationZiel
2 UmsetzungZusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
3 Zusammenfassung
4 Ende
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
MotivationZiel
Definition
Die Benutzerschnittstelle eines Softwaresystems ist zunehmend als einekomplexe Softwarekomponente anzusehen. Sie spielt eine außerstwichtige Rolle fur die “Usability” eines Softwaresystems.
Problem:
Die Problembeschreibung (fur Benutzerschnittstellen) erfolgt haufigausschließlich in einem technischen Losungsraum.
Es fehlt hierbei dennoch an:
einer domanenspezifischen Problembeschreibung sowie
anwendungsbereichabhangigen und sichtenspezifischenAbstraktionen.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
MotivationZiel
U.a. entstehen hierdurch folgende Probleme:
Unubersichtlichkeit in den Ergebnissen der Implementierung.
Der Fokus liegt haufig auf unwesentlichen Dingen.
Schlechte Wartbarkeit.
Geringere Nutzerakzeptanz.
Hohere Fehleranfalligkeit.
u.v.m.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
MotivationZiel
Abstraktion bei der Web-Applikations-Entwicklung hinsichtlich folgenderFragestellungen:
1 Was soll der Nutzer mit einer Web-Applikation tun konnen?
2 Welche Informationen muss das System enthalten?
3 Welche Informationen werden dem Nutzer zur Verfugung gestelltund wie kann er durch diese Informationen navigieren?
4 Wie werden dem Nutzer Informationen prasentiert und wie kann ermit dem System interagieren?
Das Ziel ist ein
methodisches und modellgetriebenes Vorgehen (Model DrivenEngineering) beim Erstellen dieser Sichten und weitestgehendautomatische Transformation zwischen den Sichten bis hin zueinsetzbarem Quellcode.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE — UML-based Web Engineering
Prozess und Notation zur Erstellung von Webanwendungen
Folgt dem MDA-Ansatz (MOF-konforme Metamodelle undQVT-Transformationen)
CIM, PIM und PSM entstehen weiterhin durch MDA
Zusatzliche Sichtenbildung des PIM zum spezielleren Vorgehen beimWeb-Engineering
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE Design Schritte
klassische Anforderungsdefinition
Akteure mit Use Cases etc. fur funktionale Anforderungen
klassisches Konzeptionsdesign
Modellierung der AnwendungsdomaneInhaltsmodellierung: Klassendiagramme fur Informationsstrukturen(Inhaltsmodell)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE Design Schritte
klassische Anforderungsdefinition
Akteure mit Use Cases etc. fur funktionale Anforderungen
klassisches Konzeptionsdesign
Modellierung der AnwendungsdomaneInhaltsmodellierung: Klassendiagramme fur Informationsstrukturen(Inhaltsmodell)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE Design Schritte
Navigationsdesign
Basiert auf InhaltsmodellAbstrakte Beschreibung der Navigationsmoglichkeiten einesBenutzersIdentifizierung von Navigationselementen
Prasentationsdesign
Platzierung der Navigationselemente und Informationen inabstrakten Sichten (UI Views)
Implementierung
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE Design Schritte
Navigationsdesign
Basiert auf InhaltsmodellAbstrakte Beschreibung der Navigationsmoglichkeiten einesBenutzersIdentifizierung von Navigationselementen
Prasentationsdesign
Platzierung der Navigationselemente und Informationen inabstrakten Sichten (UI Views)
Implementierung
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UWE Design Schritte
Navigationsdesign
Basiert auf InhaltsmodellAbstrakte Beschreibung der Navigationsmoglichkeiten einesBenutzersIdentifizierung von Navigationselementen
Prasentationsdesign
Platzierung der Navigationselemente und Informationen inabstrakten Sichten (UI Views)
Implementierung
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Modelle des UWE Design Prozesses
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Wie fangt die Entwicklung einer Web-Applikation an?
Was soll der Nutzer mit einer Web-Applikation tun konnen?
Welche Informationen muss das System enthalten?
Beispiel-Web-Applikation “Company”
Die “Company” mochte sich im Internet prasentieren. Hierzu sollenallgemeine Informationen uber die “Company” via Internet abrufbar sein.Daruber hinaus konnen Informationen zum Geschaftsfuhrer, zu Projekten,zu samtlichen Geschaftsstellen und deren Mitarbeitern abgerufen werden.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Anwendungsfalle zum Beispiel “Company”
WebAppUser
Company
Show head of company
Search employeeof department
Show employeesof department
Show projects ofdepartment
Show tour through projects of company
Show employeesof company Show company infos
Show departmentsof company
ud: Use Cases of Company Example
WebAppUser
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Informationsstruktur zum Beispiel “Company”
Employee
−Name:String−Birthdate :Date−Position :String
Project
−Name:String−Cost :String−Start :Date−End:Date−Abstract :String−Description :String
Department
−Adress :String−Name:String
Company
−Name:String−Kind :String−Description :String−MainEmailAdress :String
cd: Information structure of Company Example
departments+1..*
projects+
1..*employees+
1..*
employees+ 1..* projects+
1..*
head+
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Beginn der Entwicklung der Benutzerschnittstelle
Welche Informationen werden dem Nutzer zur Verfugung gestellt?
Wie kann er durch diese Informationen navigieren?
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Metamodell zu Navigationsmodellen
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Notation zu Navigationselementen
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Konstruktionsschritte eines Navigationsmodells
1 Relevante Klassen des konzeptuellen Modells werdenNavigationsklassen (siehe Use Cases)
2 Zusatzliche Attribute fur relevante Informationen weggelassenerKonzeptionsklassen
3 Definition zusatzlicher direkter Assoziationen zur Vermeidung vonUmwegen
4 Zugriffselemente werden zur Realisierung der Navigation definiert(z.B. Indizes oder Suchen)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Konstruktionsschritte eines Navigationsmodells
1 Relevante Klassen des konzeptuellen Modells werdenNavigationsklassen (siehe Use Cases)
2 Zusatzliche Attribute fur relevante Informationen weggelassenerKonzeptionsklassen
3 Definition zusatzlicher direkter Assoziationen zur Vermeidung vonUmwegen
4 Zugriffselemente werden zur Realisierung der Navigation definiert(z.B. Indizes oder Suchen)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Konstruktionsschritte eines Navigationsmodells
1 Relevante Klassen des konzeptuellen Modells werdenNavigationsklassen (siehe Use Cases)
2 Zusatzliche Attribute fur relevante Informationen weggelassenerKonzeptionsklassen
3 Definition zusatzlicher direkter Assoziationen zur Vermeidung vonUmwegen
4 Zugriffselemente werden zur Realisierung der Navigation definiert(z.B. Indizes oder Suchen)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Konstruktionsschritte eines Navigationsmodells
1 Relevante Klassen des konzeptuellen Modells werdenNavigationsklassen (siehe Use Cases)
2 Zusatzliche Attribute fur relevante Informationen weggelassenerKonzeptionsklassen
3 Definition zusatzlicher direkter Assoziationen zur Vermeidung vonUmwegen
4 Zugriffselemente werden zur Realisierung der Navigation definiert(z.B. Indizes oder Suchen)
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Navigationsmodell zum Beispiel “Company”
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Erste Uberlegungen zur optischen Reprasentation derBenutzerschnittstelle
Abstrakt Uberlegungen, welche Navigationsstrukturen wieprasentiert werden.
Ubergange zwischen einzelnen Prasentationen definieren.
Grundlage fur prototypische Umsetzung
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
UML Erweiterung zum Sketching und Storyboarding
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Sketching Methode
Definition
Zu Beginn wird zu jeder Sicht einer Hauptbenutzerschnittstelle eingrober/abstrakter Entwurf angefertigt. Entscheidung daruber, wieNavigationsklassen reprasentiert und wie auf sie zugegriffen wird.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Beispiel: Sicht der Company
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Storyboarding Methode
Definition
Nach Erstellung abstrakter Benutzersichten werden Szenarios definiert, indenen die Sequenzen zu zeigender Benutzersichten durch moglicheNavigationen des Nutzers definiert werden.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Beispiel: Storyboard zum zeigen der Company-Fuhrungund der Geschaftsstellen
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Sketching und Storyboarding im Uberblick
1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.
2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.
3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.
4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.
5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Sketching und Storyboarding im Uberblick
1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.
2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.
3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.
4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.
5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Sketching und Storyboarding im Uberblick
1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.
2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.
3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.
4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.
5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Sketching und Storyboarding im Uberblick
1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.
2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.
3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.
4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.
5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Sketching und Storyboarding im Uberblick
1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.
2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.
3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.
4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.
5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Was ist ein Prasentationsmodell?
Positionierung von Interaktions- und Informationselementen.
Welche Informations- bzw. Interaktionselemente werden durchInteraktion ersetzt?
Definition
Ein Prasentationsmodell definiert, welche Informationen undNavigationselemente an welcher Stelle dem Benutzer prasentiert werden.Z.B. welche Inhalte und Navigationselemente in Fenstern oder Teileneines Fensters dargestellt werden sollen und welche dieser Inhalte durchBenutzung eines Verweises entfernt bzw. ersetzt werden.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Metamodell zum Prasentationsmodell
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Prasentationsmodell (Ausschnitt) zum Beispiel “Company”
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Baus eines Prasentationsmodells
Definition
Entscheidung daruber, wieviele Fenster bzw. Framesets und derenUntergliederung in Frames dem Benutzer dargestellt werden.
1 Festlegung, ob ein oder mehrere Fenster verwendet werden.
2 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Framesein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten).
3 Transformation der Prasentationsklassen abstrakter Sichten inWebseiten.
4 Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einerWebseite.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Baus eines Prasentationsmodells
Definition
Entscheidung daruber, wieviele Fenster bzw. Framesets und derenUntergliederung in Frames dem Benutzer dargestellt werden.
1 Festlegung, ob ein oder mehrere Fenster verwendet werden.
2 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Framesein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten).
3 Transformation der Prasentationsklassen abstrakter Sichten inWebseiten.
4 Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einerWebseite.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Baus eines Prasentationsmodells
Definition
Entscheidung daruber, wieviele Fenster bzw. Framesets und derenUntergliederung in Frames dem Benutzer dargestellt werden.
1 Festlegung, ob ein oder mehrere Fenster verwendet werden.
2 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Framesein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten).
3 Transformation der Prasentationsklassen abstrakter Sichten inWebseiten.
4 Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einerWebseite.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte des Baus eines Prasentationsmodells
Definition
Entscheidung daruber, wieviele Fenster bzw. Framesets und derenUntergliederung in Frames dem Benutzer dargestellt werden.
1 Festlegung, ob ein oder mehrere Fenster verwendet werden.
2 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Framesein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten).
3 Transformation der Prasentationsklassen abstrakter Sichten inWebseiten.
4 Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einerWebseite.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Prasentationsfluss zum Beispiel “Company”
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung
Schritte zur Definition eines Prasentationsflusses
1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.
2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.
3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.
4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.
5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.
6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Was wurde in diesem Vortrag vermittelt?
Methodisches Vorgehen zur Erstellung von Web-Applikationen(Anforderungsdefinition − > Konzept(Inhaltsmodell − > Navigation− > Prasentation) − > Implementierung).
Prazise Notation zur technologieunabhangigen Definition einerWeb-Applikation
Wiederverwendung und Erweiterung des UML-Metamodells (UMLProfiles).
Semiautomatischer Ansatz (teilweise automatisierte Transformation).
Modellgetriebener Ansatz wird unterstutzt und folgt dem Prinzip derMDA.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML
Worum geht es?Umsetzung
ZusammenfassungEnde
Diskussion mit dem Publikum
Verwendete Literatur:
R. Hennicker and N. Koch.Modeling the user interface of web applications with uml, 2001.
Alexander Knapp, Nora Koch, Martin Wirsing, and Gefei Zhang.UWE – Ein Ansatz zur modellgetriebenen Entwicklung vonWebanwendungen.i-com, (6):5–12, March 2007.
James A. Landay and Brad A. Myers.Sketching storyboards to illustrate interface behaviors.In CHI Conference Companion, pages 193–194, 1996.
Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML