Sie sind auf Seite 1von 41

UML im Web-Engineering

Nora Koch
Ludwig-Maximilians-Universitt Mnchen und F.A.S.T. Gesellschaft fr angewandte Software Technologie mbH

Arbeitskreis UML der GI Mnchen, 7.6.2005

Web Umfeld

Web-Software

basiert auf den Technologien & Standards des World Wide Web Consortium (W3C) bietet Web-spezifische Ressourcen (Inhalte, Dienste) ber eine spezielle Benutzerschnittstelle (den Browser) an kurze Entwicklungszyklen kontinuierlich nderungen an den Anforderungen Mangel an Dokumentation bergangslsungen mittels quick & dirty Implementierung Wiederverwendung durch copy & paste Verzgerungen & Budget-Probleme hnliche Situation wie bei der Softwareentwicklung in den 60er Jahre

Web-Projekte

UML im Web Engineering Nora Koch

07.06.2005

Inhalt

Web-Engineering Web-Software

Eigenschaften Methoden zur Entwicklung Modellierung

UML Anstze Werkzeuge Trends im Web-Engineering

UML im Web Engineering Nora Koch

07.06.2005

Web Engineering

Neue Disziplin zur Entwicklung von WebSoftware (seit Ende der 90er Jahre) Ziel: Systematische Entwicklung von hochqualitativer Web-Software anhand von Methoden, Techniken, Prozesse und Werkzeuge untersttzen Wo sind die Unterschiede zur Software Engineering?

Alter Wein in neuen Schluchen?

Nicht-Linearitt der Hypertextstruktur Selbsterklrbarkeit Multimedialitt Dokumentencharakter unbekannte Nutzer Multikulturalitt

im Produkt (Web-Software)

in der Nutzung (sozialen Kontext)

UML im Web Engineering Nora Koch

07.06.2005

Web Software Charakteristika



weitere Unterschiede

Globalitt Verfgbarkeit Client/Server Prinzip unterschiedliche Endgerte unreife Technologien Multidisziplinre Projektmitarbeiter Parallelitt und Flexibilitt

Nutzung (natrliches Umfeld)

Nutzung (technischer Natur)

Entwicklung

kontinuierlich nderungen der Anforderung Schnelllebigkeit

Evolution
ISO Standard zur Bewertung der Qualitt von Software (ISO/IEC-9126-1)

UML im Web Engineering Nora Koch

07.06.2005

Inkrementelle Komplexitt der Web-Software


complexity

semantic web personalized portal-oriented * collaborative workflow-based transactional interactive informative 1992 2005
07.06.2005 6

Source: Web Engineering, Kappel et al. d-punkt Verlag (October 2003)

UML im Web Engineering Nora Koch

Methoden zur Entwicklung von Web-Software


Dataoriented
1993 1994 1995 1996 1997 1998 1999 2000 2001 HERA 2002 2003 2004
UML im Web Engineering Nora Koch 07.06.2005

Hypertextoriented
HDM

OO-oriented

Processoriented

Implementationoriented

EORM RMM HDM-Lite WSDM OO-Method SOHDM RNA HFPM WAE WebML W2000 UWE eW3DT OOHDM Web Composition

OOWS

OOH

NDT WebSA
7

Methoden zur Entwicklung von Web-Software


EORM eW3DT HDM HERA HFPM NDT OO-H OOHDM OO-Method OOWS RMM RNA SOHDM UWE W2000 WAE Web Composition WebML WebSA WSDM Enhanced Object Relationship Model Extended World Wide Web Design Technique Hypertext Design Model Hypertext Flexible Process Modeling Navigational Development Technique Object-Oriented Hypermedia Method Object-Oriented Hypermedia Design Method Object-Oriented Method Object-Oriented Web Solution Relationship Management Methodology Relationship-Navigation Analysis Scenario-based Hypermedia Design Method UML-based Web Engineering Web Application Extension Web Modeling Language Web Software Architecture Web Site Design Method
07.06.2005 8

UML im Web Engineering Nora Koch

Modellierung der Web-Software


Ebenen
Prsentation Hypertext Content Phasen Adaptivitt

Struktur
Verhalten Aspekte

Analyse

Entwurf

Implementierung Test

Modellierungsprozess

von der Information gesteuert (content first) von der Prsentation gesteuert (layout first) von den Technologien gesteuert (test first)
Source: Kappel et al. Web Engineering, d-punkt (2003)

UML im Web Engineering Nora Koch

07.06.2005

UML Anstze im Web Engineering


UML Profiles

Web Application Extension (WAE) W2000 UML-based Web Engineering (UWE) Web Software Architecture (WebSA)

partiell UML-basiert

OOHDM OO-H OOWS

UML im Web Engineering Nora Koch

07.06.2005

10

Web Application Extension (WAE)



Stereotypen fr die logische Sicht

Client page, Server page, HTML form (Klassen) link, build, submit, forward, redirect (Assoziationen)

ClientPage

Target

Stereotypes fr Framesets

Serv erPage

Form

Frameset, Target (Klassen) Targeted Link (Assoziation)

Stereotypen fr die Komponentensicht

Frameset

JSP page

Static Page, Dynamic Page (Komponenten)


Stereotypes for JSP tags

Tag library (Paket) JSP tag (Klasse) Tag (Abhngigkeitsbeziehung)

link submit

build redirect

Jim Conallen (1999, 2003)

UML im Web Engineering Nora Koch

07.06.2005

11

W2000

Stereotypen des Hyperstrukturpakets

Entity, Component Semantic Association


Stereotypen des Navigationspakets

<<NodeType>> Node

Node, NLink Cluster (Navigation, Semantic, Structural,)


Stereotypen fr Paket gemeinsame Elemente

<<EntityType>> Entity

Center, Segment, Slot


Stereotypen fr Zugriffsstrukturen

<<Center>> Center

Collection, Collection Center


Stereotypen des Prsentationspakets

<<CollectionType>> Collection

Unit, Page, Section, Link


Fr alle Elemente: Unterscheidung zwischen typed und single
UWA Projekt, Politecnico di Milano (2001)

UML im Web Engineering Nora Koch

07.06.2005

12

UML-based Web Engineering (UWE)



Stereotypen zur Navigationsmodellierung

NavigationNode, NavigationClass (Klasse) NavigationLink (Assoziation) Index, GuidedTour, Query, Menu (Klassen)

navigation class navigation link

Stereotypen zur Modelierung von Worksflows

ProcessNode (Klasse) ProcessLink (Assoziation)


Stereotypen zur Prsentationsmodellierung

?
index guided tour query menu

PresentationUnit, Page, Anchor,.. (Klassen)


Stereotypen zur Modellierung der Adaptivitt
aspect

node

Aspect, Pointcut, Advice (Pakete) Node (Zustand) NavigationAnnotation (Klasse)

navigation

Stereotypen zur Anforderungsmodellierung

Navigation (Use Case)


UML im Web Engineering Nora Koch 07.06.2005

Institut fr Informatik der LMU Mnchen (1999) 13

UML zur Beschreibung


der UWE-Modellierungselemente

UML-Darstellung der Semantik der Modellierungselemente


index MyIndex

z.B. Index spezifiziert eine Klasse


von Composite-Objekten

Index beinhaltet eine Reihe von


Index-Items

* MyIndexItem
name: String

navigation class MyNavigationClass

Jeder Index-Item hat einen Namen


hat und einen Link zu einer Instanz der Navigationsklasse besitzt

OCL Constraints fr detaillierte Spezifikation


MyIndex

navigation class MyNavigationClass

UML im Web Engineering Nora Koch

07.06.2005

14

UML-based Web Engineering (UWE)


mehr als ein UML Profile

UWE Ansatz besteht aus

MOF Metamodell fr Web-spezifische Konzepte UML Profile zur Modellierung von Web-Software MDA-basierte Techniken zur systematischen und semi-automatischen Generierung von Web-Anwendungen Entwicklungsprozess (Unified Process basiert) Werkzeug (ArgoUWE)

Ziele von UWE

Techniken und Methoden fr den gesamten Lebenszyklus von WebSoftware bereitstellen auf Standards basieren: UML, MOF, MDA, QVT, XMI, XML, Open-Source Werkzeuge bereitstellen
LMU Mnchen: Hubert Baumeister, Rolf Hennicker, Alexander Knapp, Nora Koch, Andreas Kraus, Martin Wirsing, Gefei Zhang (seit 1999)

UML im Web Engineering Nora Koch

07.06.2005

15

UWE Metamodell
(Ausschnitt)
NavigationNode +source
1 +target ...

isLandmark : Boolean

+outLinks * +inLinks * *

Link
isAutomatic : Boolean

NavigationClass
isRoot : Boolean

{subsets target} 1..*

{subsets inLinks}

Navigation Link

Process Link

{subsets ownedAttribute} {ordered} 0..1 * inv: Menu has at least one outgoing Link self.isKindOf (Menu) implies self.outLinks.size > 1

Access Primitives

...

Navigation Attribute

+accessedAttributes

Index

Query

Guided Tour

Menu

Spezifikation der Web spezifische


UML im Web Engineering Nora Koch 07.06.2005

Sprache (DSL) MOF-basiertes Metamodell Statische Semantik mittels OCL constraints (Well-formedness rules)
16

UWE Metamodell & UML Profile fr UWE



UWE Metamodell ist die Basis fr
UWEMetamodel:: sterotype

UWE Profile CASE-Tool & Code Generierung Modellberprfung Vergleich und Integration unterschiedlichen Methoden

Menu

Menu

metaclass

Class

UML Profile fr UWE verwendet UML Erweiterungsmechanismen (light weighted Profile)

sterotype

Stereotypen Tagged Values Constraints zur Spezialisierung von UML


Assoziationen

NavigationNode

sterotype

sterotype

NavigationClass

Menu

UML im Web Engineering Nora Koch

07.06.2005

17

UWE: Vorgehen bei der Modellierung



Requirements Model

UWE legt Richtlinien zur Modellierung fest UWE definiert auf Metamodellebene Abhngigkeitsbeziehungen zwischen den Modellen


<<trace>>

<<trace>> <<trace>>

Content
<<trace>>

Navigation
<<trace>> <<trace>> <<trace>>

Presentation

<<trace>>

Erstellung der Modelle

<<trace>>

Adaptation

systematisch semi-automatisch werkzeuguntersttzt

UML im Web Engineering Nora Koch

07.06.2005

18

Modellierung der Anforderungen



Use Case Diagramme UWE Erweiterung

Unterscheidung zwischen
Prozess- und Navigationsanwendungsfllen
Search ProductItems navigation

Select ProductItems navigation

<<extend>>

AddTo ShoppingCart

ViewCart NonRegisteredUser

UWE Stereotype
navigation

W2000 Unterscheidung auf Diagrammebene Aktivittsdiagramme fr die Modellierung der Ablufe

LogIn

<<extend>> Checkout

Customer PrintInvoice <<include>>

UML im Web Engineering Nora Koch

07.06.2005

19

Content Modellierung

UML Klassendiagramm fr die Struktur der Problemdomne (Inhalt) Klassen zur Darstellung von

Einheiten von textueller Information Multimediaelemente


Auswahl der Navigationsrelevanten Klassen UML Sequenzdiagramme oder Zustandsdiagramme fr die Modellierung des Verhaltens
Book Product DVD
name price 1

ShoppingCart
add() checkout()

Customer
name 1..* 0..1 creditCard

1 * ShoppingCart Item * quantity * Address


+deliveryAddress 1 street zip-code 0..1 country 1

CD

* OrderItem
quantity

* Order
orderID invoiceNumber sendInvoice() 1

+invoiceAddress

UML im Web Engineering Nora Koch

07.06.2005

20

Semi-automatische Konstruktion der Navigationssicht


1. eine Navigationsklasse fr jede navigationsrelevante Content-Klasse erstellen 2. (optional) Attribute fr nicht relevante Klassen zu anderen Navigationsklassen hinzufgen 3. Mapping fr Navigationslinks der Navigationssicht auf die Assoziationen der Content-Sicht realisieren 4. Multiplizitten und Rollennamen von Assoziationen, Aggregationen und Kompositionen der Content-Sicht zu entsprechenden Elementen der Navigationssicht transferieren 5. Navigations-Links, basierend auf den Szenarien von dem Anforderungsmodell hinzufgen 6. Shortcuts definieren, d.h. zustzliche Navigations-Links hinzufgen, um die Lnge der Navigationspfade zu reduzieren Automatisierung Schritte 1, 3, 4

UML im Web Engineering Nora Koch

07.06.2005

21

Navigationsmodellierung

navigation link navigation link Homepage navigation link +shoppingCart 0..1

navigation link 1 +customer

ShoppingCart navigation link +books 1..* 1..* +products navigation link Book Product ShoppingCartItem +shopping 0..* CartItems

Customer navigation link +orders 0..*

Order navigation link +orderItems 1..*

navigation link OrderItem

UML im Web Engineering Nora Koch

07.06.2005

22

Verfeinerung der Navigationssicht


1. Ein Index zu allen Navigations-Links hinzufgen, die Multiplizitt > 1 beim gerichteten Assoziationsende haben (ein Index-Item fr jedes Navigationsobjekt) 2. (optional) Index durch GuidedTour ersetzen 3. (optional) Eine Suche (Query) hinzufgen, um eine Untermenge von Navigationsobjekte auszuwhlen 4. zustzliches Navigations-Link von der Zugriffsprimitive zur Navigationsklasse des Zieles hinzufgen 5. Rollennamen von der Navigationsklasse zu der hinzugefgten Zugriffsprimitive versetzen 6. Multiplizitten auf 1 setzen 7. . Automatisierung Schritte 1, 5, 6
23

UML im Web Engineering Nora Koch

07.06.2005

Navigationsmodellierung

navigation link navigation link Homepage navigation link +shoppingCart 0..1

navigation link 1 +customer

ShoppingCart navigation link +books 1..* 1..* +products navigation link Book Product ShoppingCartItem +shopping 0..* CartItems

Customer navigation link +orders 0..*

Order navigation link +orderItems 1..*

navigation link OrderItem

UML im Web Engineering Nora Koch

07.06.2005

24

Navigationsmodellierung (2)

Automatische Ergnzung von
Homepage

Indexen
Book Recommendation SelectedResults 1..* 1..* 0..1

Customer

OrderList

0..* Book Product ShoppingCart Customer Orders 0..* Order

ShoppingCartItems OrderItems 0..* 0..* OrderItem 25

ShoppingCartItem

UML im Web Engineering Nora Koch

07.06.2005

Navigationsmodellierung (2)

Automatische Ergnzung von
Homepage

Indexen
Entwicklerentscheidungen zu
? Book SearchProducts Recommendation SelectedResults 1..* 1..* 0..1

Guided tours Queries

Customer

OrderList

0..* Book Product ShoppingCart Customer Orders 0..* Order

ShoppingCartItems OrderItems 0..* 0..* OrderItem 26

ShoppingCartItem

UML im Web Engineering Nora Koch

07.06.2005

Navigationsmodellierung (2)

Homepage

Automatisches Ergnzung von

Indexen
Entwicklerentscheidungen zu
? Book SearchProducts Recommendation SelectedResults 1..* 1..*

MainMenu

Guided tours Queries


Automatisches Hinzufgen von

0..1

Customer

OrderList 0..*

Book

Product

ShoppingCart

0..* Customer Orders Order

Mens
ShoppingCartItems

OrderItems 0..* 0..*

ShoppingCartItem UML im Web Engineering Nora Koch 07.06.2005

OrderItem 27

Navigationsmodellierung (2)

Homepage

Automatisches Ergnzung von

Indexen
Entwicklerentscheidungen zu
? Book SearchProducts Recommendation SelectedResults 1..* 1..*

MainMenu AccountInfo

Guided tours Queries


Automatisches Hinzufgen von

0..1

Customer

OrderList 0..*

Book

Product

ShoppingCart

0..* Customer Orders Order

Mens
Optionales Hinzufgen von
ShoppingCartItems

Indexen Mens

OrderItems 0..* 0..*

ShoppingCartItem UML im Web Engineering Nora Koch 07.06.2005

OrderItem 28

Web Software Architecture (WebSA)



MDA Ansatz PIMs fr Analyse & Design
Web Functional Viewpoint Functional Models (OO-H,UWE) Web Architectural Viewpoint

Subsystem Model

Configuration Model

funktionale Modelle Architekturmodelle

Analysis Merge

T1 Models to Model Transformation

PSMs fr Implementierung Transformationen zum Mapping & Merging der Modelle


Platform Independent Design

Integration Model

T2 Implementation

T2'

T2'

QVT Transformationsregelnsprachen

QVT-P ATL
UML im Web Engineering Nora Koch

J2EE models

.NET models

Other models

S. Mela, J. Gomez, C. Cachero Universidad de Alicante (2004) 07.06.2005 29

WebSA Profile

UML Profile fr die Modellierung von Architektursichten von Web-Systemen
UserInterface UI

Subsystemmodell (Schichtendarstellung) Konfigurationsmodell (Komponentensicht) Integrationsmodell der funktionalen Sicht (UWE,


OO-H, etc) und der Architektursicht

Business Logic Logic

Architektur-Modellierungselemente

User Interface Business Logic Physical Data Web component Web port Web connector Server page Session ..
07.06.2005 30
Session Statefull ASession

WebComponent A

WebPort Provided WebInterface Required WebInterface

UML im Web Engineering Nora Koch

Werkzeuguntersttzung

CASE-Tools

fr die Erstellung und Pflege der Modelle zur Konsistenzberprfung Basis fr die automatische Codegenerierung modellgetriebene Entwicklung

Werkzeugarten
IBM Rational Modeller, Magic Draw, Enterprise Architect WebRatio, VisualWADE, ArgoUWE
prototypische Entwicklung

FrontPage Flash DreamWeaver

UML im Web Engineering Nora Koch

07.06.2005

31

CASE-Tool ArgoUWE

ArgoUWE ist als Plugin fr das Open-Source ArgoUML implementiert erweitert die NSUML Bibliothek mit dem UWE Metamodell Ausgabeformat fr Modelle ist XMI als Basis fr Codegenerierung

untersttzt die systematische Konstruktion von Web-Software stellt die Icons fr die spezifischen UWE Modellelemente zur Verfgung Modelle werden mittels Transformationen semi-automatisch generiert untersttzt separate Modelle fr Content, Hypertextstruktur, Prsentation und Workflows fhrt Modellvalidierung parallel zur Erstellung der Modelle durch (OCLbasiertes Modell-Checking) design critics
ArgoUWE download www.pst.ifi.lmu.de/projekte/argouwe

UML im Web Engineering Nora Koch

07.06.2005

32

Modellierung mit ArgoUWE


Anforderungsanalyse

Search ProductItems

AddTo ShoppingCart

Select ProductItems

SignIn

ViewCart Checkout

UML im Web Engineering Nora Koch

07.06.2005

33

Modellierung mit ArgoUWE


Content-Modellierung

manuelle Markierung der Klassen des konzeptuellen Modells (Content), die fr die Navigation relevant sind Automatische Generierung des Navigationsmodell Unterschiedliche Navigations-Sichten auf das Content-Modell

UML im Web Engineering Nora Koch

07.06.2005

34

Modellierung mit ArgoUWE


Semi-automatische Erstellung des Navigationsmodells
manuelles Hinzufgen von Navigationsklassen und Navigationslinks automatische Generierung von Indexen

manuelle Integration von Prozesselementen

automatische Generierung von Menus

UML im Web Engineering Nora Koch

07.06.2005

35

Modellierung mit ArgoUWE


Validierung

ArgoUML cognitive design critics Mechanismus produzert

Liste von Modell


inkonsistenzen Verbesserungsvorschlge frs Design

ArgoUWE erweitert diese auf der Basis von

wellformedness
constraints of UWE

UML im Web Engineering Nora Koch

07.06.2005

36

Ausblick fr UWE

Modelltransformationen fr Anforderungsmodellen Werkzeuguntersttzter MDA-Prozess zur Entwicklung von Web-Software Semi-automatisches Testen Analyse der Mchtigkeit der Aspektorientierte Modellierung Integration zu anderen Methoden Anwendung auf komplexere Fallbeispiele

UML im Web Engineering Nora Koch

07.06.2005

37

Trends in Web Engineering



Andere nicht angesprochene Bereiche im Web Engineering

Testen und Qualittsaspekte von Web Software Implementierungstechnologien nicht-funktionale Anforderungen

Trends

Rolle der Anforderungsanalyse Modellgesteuerter-Ansatz (MDA) vs. Agile Methode Relevanz der CASE-Wekzeuge Standards-basierte Entwicklung UML zur Modellierung

von vielen und vielfltigen Methoden in Richtung einer Unified Web Method ?
UML im Web Engineering Nora Koch 07.06.2005 38

Vision fr die Entwicklung von Web-Software


Dataoriented
1993 1994 1995 1996 1997 1998 1999 2000 2001 Hera 2002 2003 2004 OOWS OOH NDT WebSA WebML W2000 UWE eW3DT RMM HDM-Lite WSDM OO-Method SOHDM RNA HFPM WAE OOHDM Web Composition

Hypertextoriented
HDM

OO-oriented

Processoriented

Implementationoriented

EORM

200X
UML im Web Engineering Nora Koch

?
07.06.2005 39

References

Hypermedia & the Web An Engineering Approach, David Lowe & Wendy Hall John Wiley & Sohn (1999) Building Web Applications with UML. Jim Conallen. Addison-Wesley (2003) Web Engineering: Systematic Development of Web Applications. Gerti Kappel, Birgid Prll, Siegfried Reich, Werner Retschitzeger (Eds.) dpunkt-verlag (2003) Web Engineering. Rainer Dumke, Mathias Lother, Cornelius Wille, Fritz Zbrog. Pearson (2003) UWE: http://www.pst.ifi.lmu.de/projekte/uwe ArgoUWE: http//www.pst.ifi.lmu.de/projekte/argouwe MAEWA: http://www.pst.ifi.lmu.de/projekte/maewa/

UML im Web Engineering Nora Koch

07.06.2005

40

Vielen Dank fr Ihre Aufmerksamkeit!


Nora Koch
nora.koch (at) pst.ifi.lmu.de www.pst.ifi.lmu.de/~kochn

uwe (at) pst.ifi.lmu.de www.pst.ifi.lmu.de/projekte/uwe

UML im Web Engineering Nora Koch

07.06.2005

41