uml-based web engineering

38
1 UML-Based Web Engineering Nora Koch joint work with Gefei Zhang, Martin Wirsing, Andreas Kraus, Alexander Knapp, Rolf Hennicker and Hubert Baumeister Web Engineering Group Ludwig-Maximilians-Universität München (LMU) Sevilla, 21.4.2005 UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 2 Web Projects main problems business goals are not fulfilled delays in relation to project plan project exceeds budget system delivered does not have required functionality deliverables are of poor quality current situation (similar to software development around 1960) individual, quick & dirty implementations reuse based on copy & paste missing documentation incremental complexity of web applications and web services

Upload: elliando-dias

Post on 06-May-2015

4.254 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: UML-Based Web Engineering

1

UML-Based Web EngineeringNora Koch

joint work with Gefei Zhang, Martin Wirsing, Andreas Kraus, Alexander Knapp, Rolf Hennicker and Hubert Baumeister

Web Engineering GroupLudwig-Maximilians-Universität München (LMU)

Sevilla, 21.4.2005

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 2

Web Projects

main problemsbusiness goals are not fulfilled

delays in relation to project plan

project exceeds budget

system delivered does not have required functionality

deliverables are of poor quality

current situation (similar to software development around 1960) individual, quick & dirty implementations

reuse based on copy & paste

missing documentation

incremental complexity of web applications and web services

Page 2: UML-Based Web Engineering

2

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 3

Methodologies for Web Development

HDM1993

1994

1995

1996

1997

1998

1999

2000

2001

2002

RMM

EORM

OOHDM

WSDM

SOHDM RNA HFPM

WAE

WebML UWEW2000

2003 OOH

OO-Method

OOWS

Web Composition

NDT

Data-oriented

Process-orientedOO-oriented Implementation-

orientedHypertext-oriented

HDM-Lite

2004 WebSA

eW3DT

Hera

M. J. Escalona,2004

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 4

Methodologies for Web Development

EORM Enhanced Object Relationship ModeleW3DT Extended World Wide Web Design TechniqueHDM Hypertext Design ModelHeraHFPM Hypertext Flexible Process ModelingNDT Navigational Development Technique

OO-H Object-Oriented Hypermedia MethodOO-Method Object-Oriented MethodOOHDM Object-Oriented Hypermedia Design MethodOOWS Object-Oriented Web Solution

RMM Relationship Management MethodologyRNA Relationship-Navigation AnalysisSOHDM Scenario-based Hypermedia Design MethodUWE UML-based Web Engineering

W2000 WAE Web Application ExtensionWeb CompositionWebML Web Modeling LanguageWebSA Web Software ArchitectureWSDM Web Site Design Method

Page 3: UML-Based Web Engineering

3

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 5

Contents

UWE: A Web Engineering ApproachModelling with UML and UWE (Notation)Modelling supported by UWE MethodMetamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 6

What is UWE?

UWE is a an engineering approach for the development of web applicationsmain characteristic is the use of UML for all modelsfocuses on systematisation and automatic generationUWE comprises

a notation for the graphical representation of the model elementsa method (technique) supporting semi-automatic generation a metamodel for UWE modelling elementsa process supporting the development life-cycle of web applications

a case-tool ArgoUWE supporting the design of web applications

(UWE is also a German male name)

Page 4: UML-Based Web Engineering

4

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 7

Web-based Systems / Web Applications

characteristicsbased on the hypermedia paradigm

nodes & linkstext & multimedia

omnipresent due to the nature of the webglobal and permanent availabilitycomfortable and unified accessdistributed information / servicesproducible by “everybody“

dynamic developmentincremental number of web pages continuous improvement of existing web applications (content, links, layout)offer of new services

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 8

Categories of Web Applications

informative

com

plex

ity

time

interactive

transactional

workflow-based

collaborative

semantic web

personalized

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

portal-oriented *

Page 5: UML-Based Web Engineering

5

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 9

Why UML?

UML is a graphical language for specifying, constructing and documenting software artifactsUML is a de facto industry and a OMG standardUML includes

notationdiagram typesmetamodelObject Constraints Language (OCL) for invariants, pre- and post-conditionwell-formedness rules

UML is neither a method nor a process

How expressive is UML for the development of web applications?UML does not include specific web modelling elementsUML defines extension mechanisms UML profiles

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 10

UML Profiles

UML extension is a UML profile if it only uses the extension mechanisms provided by the UML

stereotypes

tagged values

OCL constraints UML profile = light weight extension

heavy weight extensionuses other diagram types not defined in the UMLuses different notation

easestool support

article.date> user.lastVisitNewArticles

«index»

{adaptation=annotated}

Page 6: UML-Based Web Engineering

6

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 11

Contents

Web Engineering ApproachModelling with UML and UWE Notation

Requirement of Web ApplicationsContent, Hypertext Structure and PresentationWorkflow-based Web ApplicationsAdaptivity with AspectsWeb Architecture

Modelling supported by UWE MethodMetamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 12

Dimensions of Web Modelling

aspects

structure

behaviour

phases

levels

content

presentation

analysis

adaptivity

implementationdesign

hypertext

modelling process information-driven ("content first") presentation-driven ("layout first")functionality-driven ("test first") agile process

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

requirements analysis

Page 7: UML-Based Web Engineering

7

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 13

Modelling Requirements of Web ApplicationsCase Study: e-Shop

distinction between “normal”/standard use cases and navigation use casesUWE Stereotype <<navigation>>

W2000 makes the distinction at diagram level: two use case diagrams

UML use case diagrams are used to describe web application functionalityUWE extension

<<include>>

Customer

SelectProductItems

<<navigation>>

<<extend>>

<<navigation>>

<<extend>>

NonRegisteredUser

AddToShoppingCart

Checkout PrintInvoice

LogIn

ViewCartSearchProductItems

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 14

Refining the Requirements SpecificationCase Study: e-Shop – checkout process

use cases complemented with

textual specificationactivity diagrams

UML activity diagrams for visual representation of workflows

[ error ]

AddNewCustomer

LogIn

[ error ] [ newCustomer ]

SetOptions

[ returningCustomer ]

PlaceOrderexit/ delete Items ShoppingCart

PrintInvoice

newCustomer : Customer

newOrder : Order

[ change ]to model the business logic of the applicationUML call states and sub-activitiessub-activities can further be refined

Page 8: UML-Based Web Engineering

8

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 15

goalto model problem domainto separate content from hypertext / navigation structure and presentation

Content Modelling in UWE

UML class diagrams for the structure UML sequence diagrams or UML state charts for the behaviour

sequence diagrams are used to visualize messages between objects showing how they collaborate (messages between user and web application)state diagrams capture states of objects and show actions that lead to state transitions

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 16

Content Modelling: StructureCase Study: e-Shop

DVD

Book

CDOrderItemquantity

CustomernamecreditCard

ShoppingCartadd()checkout() 0..11..*

Addressstreetzip-codecountry1

+deliveryAddress

0..1

**

ShoppingCartItem

quantity

1*

OrderorderIDinvoiceNumbersendInvoice()

1+invoiceAddress

1

Productnameprice *1

*

*

*

UML class diagrams at analysis-level and design-levelclasses to represent

units of textual informationmultimedia elements

associations, aggregations to show relationships between classesinheritance to show hierarchies between classes

Page 9: UML-Based Web Engineering

9

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 17

goalsto represent nodes and links of the hypertext structureto design of navigation paths to avoid disorientation and cognitive overload

result: navigation structure modelUML class diagramspecific modelling elements

other methodologiesown notation for hypertext elementsdifferent diagrammatic representation of hypertext models

Navigation Modelling in UWE

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 18

stereotypes for basic navigation elements«navigation class»

«navigation link»

basic navigation elementsnavigation class specifies the hypertext nodes is visited by a user through browsing (a navigation class will be given the same name of the domain class which it maps)

navigation link specifies that the target navigation object is accessed by navigation from the source navigation object

Navigation Modelling Elements (1)

«navigation link»«navigation class»

Class Nameattributesoperations

Page 10: UML-Based Web Engineering

10

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 19

Navigation Structure Model (First Step)Case Study: e-Shop

1..*

+customer1

+shoppingCartItems 0..*

0..1+shoppingCart 0..1

+orderItems 1..*

+orders 0..*

+product

+products1..*

Homepage«navigation class»

Product«navigation class»

ShoppingCart«navigation class»

ShoppingCartItem«navigation class»

OrderItem«navigation class»

Order«navigation class»

Book«navigation class»

Customer«navigation class»

+books

«navigation link»

«navigation link»

«navigation link»

«navigation link»

«navigation link»

«navigation link»

«navigation link»

«navigation link»

«navigation link»

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 20

additional navigation elements

for the selection of one navigation target from a set of navigation elements

«index»

«guidedTour»

«query»

«menu»

UWE Access Primitives

MyIndex MyGuidedTour MyQuery

?

MyMenu

Page 11: UML-Based Web Engineering

11

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 21

Navigation Modelling Elements (3)

modelling element: index specifies a class of composite objects

contains an arbitrary number of index items

each index item is an object which has a name and owns a link to an instance of a navigation class

UML stereotype: «index»

«index»

MyIndex

name: String

MyIndexItem * 1 «navigation class»

MyNavigationClass

*

MyIndex

«navigation class»

MyNavigationClass

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 22

Navigation Structure Model (Second Step)Case Study: e-Shop

Book

Customer

Homepage

BookRecommendation

1..*OrderList

CustomerOrders Order

0..*

0..*

?

SearchProducts

ShoppingCartItemsOrderItems

SelectedResults

ShoppingCartItem

0..*

OrderItem

0..*

ShoppingCart

0..1

Product

1..*

Enhancement of the navigation structure model by access structures:

indexes guided tours queries

Page 12: UML-Based Web Engineering

12

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 23

Navigation Structure Model (Third Step)Case Study: e-Shop

ShoppingCartItem OrderItem

BookRecommendation

1..*

AccountInfo

OrderList

CustomerOrders

0..*

0..*

MainMenu

?

SearchProducts

ShoppingCartItemsOrderItems

SelectedResults

0..* 0..*

0..11..*

Book

Customer

Homepage

Order

ShoppingCartProduct

Enhancement of the navigation structure model by menusUse of a set of diagrams (different views of the navigation space) if the number of nodes is large

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 24

Process Modelling in UWE

goalsto model the process of a workflow driven web application

result definition of process classes (for non-navigation use cases)construction of a process structure modeldescription of the behaviour through a process flow and object flow with a UML activity diagramintegration of the process classes in the navigation structure model

Page 13: UML-Based Web Engineering

13

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 25

Process Modelling Elements

«process class»models a class whose instances are needed by the user during execution of a process

«process link»models the association between a «navigation class» and a «process class» indicating entry points and exit points of processes within the navigation structure

«process class»Class Name

attributesoperations

«process link»

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 26

Process Structure ModelCase Study: e-Shop

Structural view is partially derived from the content modelProcess state is defined explicitly and implicitly by associationsIncludes user input data

0..1

0..1

0..10..1

1 1

0..1

Checkout«process class»

- state:CheckoutActivityState

+ changeState()

CustomersetPaymentOptions()

«process class»ShoppingCart

+ placeOrder():Order

«process class»

Order

+ sendInvoice()

«process class»

PaymentOptions- creditCardNumber- creditCardExpire- payment :PaymentType

+ checkCreditCard() : Boolean

«process class»

CheckoutActivityState-welcome-items-shipping-….

«enumeration»

PaymentType

-moneyOrder-creditCard

«enumeration»

Page 14: UML-Based Web Engineering

14

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 27

Process Flow and Object FlowCase Study: e-Shop

Refinement of the process model of the analysis phase

AddNewCustomer

SetOptions

setPaymentOptions(Customer)

placeOrder(ShoppingCart)

[ customer->notEmpty() ] [ customer->isEmpty() ]

sendInvoice(Order)

SignIn

SetPassword

[ newCustomer ]

[ returningCustomer ]«transactional»

«transactional»

«transactional»

«transactional»Distinction between subactivity state and call stateCall states used for

change operationsdata validation

: Customer«process class»

: Order«process class»

: ShoppingCart

«process class»

new : Customer«process class»

: PaymentOptions«process class»

Object flow statesof process classes used for modelling user input/output

Transactions modelled by stereotypes («transactional»)

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 28

Process Modelling (1)Case Study: e-Shop

including process classes and process links before enhancing with access structures

1..*

+customer1

+shoppingCartItems 0..*

0..1+shoppingCart 0..1

+orderItems 1..*

+orders0..*

+product

1..*+products 1..*

Homepage«navigation class»

Product«navigation class»

ShoppingCart«navigation class»

ShoppingCartItem«navigation class»

OrderItem«navigation class»

Order«navigation class»

Book«navigation class»

Customer«navigation class»

AddToCart«process class»

«process link»

«processlink»

«process link»

SignIn«process class»

«process link»

Checkout«process class»

«processlink»

Page 15: UML-Based Web Engineering

15

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 29

goalrepresentation of the structure and the behaviour of the user interface

characteristics definition of pages as a hierarchical composition of presentation elementssupported by few methodsalternative: development of a prototype

resultsclass diagram for the structure of the presentation (in UML container notation)dynamic interaction diagram (sequence diagrams) for the behaviour

Presentation Modelling in UWE

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 30

UWE Modelling Elements for PresentationCase Study: e-Shop

«page»Conference

«presentation class»ConferencePaper

«text»SubmissionDate

«text»PaperTitle

«anchor»Authors

«text»Abstract

«anchor»fullPaper (Pdf)

«button»ReviewForm

«text»PaperID

«page» is a presentation group that contains all elements that will be presented together to the user as response to one request «presentation class» groups a set of user interface elements representing a logic unit of presentationuser interface elements

«anchor»«text»«image»«button»

Page 16: UML-Based Web Engineering

16

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 31

Aspect Oriented Modelling (AOM) in UWE

access control modelled by aspects

pointcut

«aspect»Access Control

Checkout«process class»

ShoppingCart«navigation class»

navigation adaptivity modelled by aspects

link annotationlink orderinglink hidinglink generation

weaving the result into the web application

advice

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 32

Contents

Web Engineering ApproachModelling with UML and UWE NotationModelling supported by UWE Method

From Requirements to Analysis ModelsGeneration of Navigation ModelGeneration of Presentation ModelApplying MDA PrinciplesTransformation of Models

Metamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

Page 17: UML-Based Web Engineering

17

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 33

UWE Method

guidelines for the construction of the modelsset of steps for each modelrelationship between models

model construction issystematic semi-automatictool-supported

Content Navigation Presentation

<<trace>>

RequirementsModel

<<trace>><<trace>>

<<trace>> <<trace>>

Adaptation

<<trace>>

<<trace>>

<<trace>>

<<trace>>

Process

<<trace>>

<<trace>>

<<trace>>

<<trace>>

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 34

Building Requirements Models

build the use case modelfind the relevant actors for the applicationidentify the uses cases that define the functionality of the applicationestablish which actor will be involved in which use casedefine includes and extends relationships between use casesuse inheritance for actors and use casesdistinguish between navigation use cases and “normal” use cases (stereotype)

build an activity diagram for each non-navigational and non-trivial use caseidentify activitiesdefine transitions between activitiesassign objects related to those activities

automationassignment of activity diagram to each non-navigational use case.

Page 18: UML-Based Web Engineering

18

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 35

Modelling Requirements of Web ApplicationsCase Study: Online Library

UML use case diagram

UML activity diagrams

Reader

RegisteredReader

Findpublication

Look atnew articles

Findarticle

Modifypreferences

No results

Enterarticle title

[count>1]

Displayarticle

Selectarticle

[count=1] [count=0]

Producearticle list<<navigation>>

<<navigation>>

<<navigation>>

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 36

Building the Domain/Content Model

build a class diagramfind classes for the objects identified in the activity diagramsidentify attributes and operations for these classesdetermine relationships between classes (associations, aggregations. compositions)define inheritance hierarchies, if appropriatedadd constraints

mark conceptual classes that are relevant for navigation structure

automationgeneration of classes based on objects of the activity diagrams

Page 19: UML-Based Web Engineering

19

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 37

Content ModelCase Study: Online Library

Publicationtitle: Stringdate: Date

Authorname: Stringe-mail: String

Library

name: String

*

* 1..*

1..*

keywords

1..*articles

articlesauthors

authors

1..*

publications

library

Article

title: Stringabstract: Stringcomplete: URL

deletePublication

Keyword

word: String

rolename

multiplicity 1..*

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 38

Building the Navigation Model (First Step)

build a class diagram1. create a navigation class for each navigation relevant content class

(navigation classes map to content classes)2. add attributes of omitted classes (if required) to navigation classes

(attributes of a navigation class maps to a attributes of other content class)

3. map navigation links of navigation model to associations of content model

4. transform aggregations and compositions into navigation links5. map attributes of navigation classes to attributes of content classes6. transfer multiplicities and role names of associations, aggregations and

compositions of content model to corresponding modelling elements of the navigation model

7. add navigation links based on the scenarios of the use case model 8. add shortcuts, i.e. additional navigation links to reduce length of

navigation pathautomation

steps 1, 3, 4, 5, 6

Page 20: UML-Based Web Engineering

20

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 39

Article

Author

Library

1..*

1..*

Publication

1..*

articles

publications

articles

authors1..*

1..*Keyword

1..*

*

*

Navigation Structure Model (First Step) Case Study: Online Library

UML stereotyped classdiagrams

/keyword

define derivedattributes

select classes relevant for navigation

«navigation link»

keep associations as navigation links

inv: /keyword = self.ContentModel::publication.keyword

add constraints

1..*visitedarticles

1..*

authors

add additional associations

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 40

Building the Navigation Model (Second Step)

refine the class diagram1. add an index to all navigation links, which have multiplicity > 1 at the

directed association end (one index item for each navigation object)2. (optional) replace index by guided tour3. (optional) add a query to select a subset of navigation objects4. add an additional navigation link from access primitive to target

navigation class5. move role names from the navigation class to the access primitive6. set multiplicities to one7. add constraints for invariants and pre-/post-conditions8. ….

automationsteps 1, 5, 6

Page 21: UML-Based Web Engineering

21

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 41

Navigation Structure Model (Second Step)Case Study: Online Library

Author

Publication1..*

1..*

*

Library

1..*

publications

authorsallAuthors

publications

authors

allAuthors

?query

index

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 42

Navigation Structure Model (Second Step)Case Study: Online Library

Author

Publication1..*

1..*

*

Library

1..*

publications

authorsallAuthors

?

publications

authors

allAuthors

menuLibraryM

Page 22: UML-Based Web Engineering

22

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 43

Model Driven Development (MDD)

OMG Standard MDA (model driven architecture)object-oriented modelsUML as modelling languagemodel transformation to convert a model of a system to another modelOMG terminology:

CIM: computation independent model

PIM : platform independent model

PSM: platform specific model

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 44

a domain specific language to model the architectural views of a web application:

subsystem modelconfiguration model integration model

UML profile with architectural modelling elementsweb componentweb portweb connectorserver pageetc.

Web Software Architecture (WebSA)

«WebComponent»A

WebPortProvided WebInterface

Required WebInterface

«WebComponent»A

WebPortProvided WebInterface

Required WebInterface

«WebComponent»A

WebPortProvided WebInterface

Required WebInterface

«WebComponent »A

«WebComponent »

B [1{4}]

«WebComponent »A

«WebComponent »:B [4]

«WebComponent »A

«WebComponent »

B [1{4}]

«WebComponent »A

«WebComponent »:B [4]

«WebComponent »A

«WebComponent »

B [1{4}]

«WebComponent »A

«WebComponent »:B [4]

Page 23: UML-Based Web Engineering

23

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 45

WebSA: MDA-based Development Process

types of modelsanalysis: functional and architectural

design

implementation

transformations for mapping & merging models

transformation language QVT-P

*Melía, University of Alicante (2004)

FunctionalModels

(OO-H,UWE)

T1

J2EE models .NET models Other models

T2'

Web Functional Viewpoint Web Architectural Viewpoint

Merge Models to ModelTransformation

SubsystemModel

ConfigurationModel

Analysis

PlatformIndependent Design

Implementation

Integration Model

T2 T2'’

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 46

Contents

Web Engineering ApproachModelling with UML and UWE NotationModelling supported by UWE MethodMetamodel for UWE

Extension of UML MetamodelUML Profile

Tool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

Page 24: UML-Based Web Engineering

24

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 47

Need of a Metamodel

to provide a formal semantic of the modelling elementsfor tool support and code generation for model checkingas instrument to compare and integrate different web methodologies

to go towards a common metamodel for web methodologies unification at high level of abstraction for each methodology

different development processesuse of subsets of modeling elements (like UML)different notations (concrete syntax)model transformation from one methodology to another

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 48

UWE Metamodel

definition of concepts and relationships among conceptscompatibility with the OMG metamodeling architecture MOF meta-metamodel

XMI interchange format → tool compatibility (theoretically)

conservative extension of the UML 1.5 metamodelstatic semantics given by OCL constraints(well-formedness rules)basis for the planned open tool suite OpenUWE

«instanceOf»

«instanceOf»

ApplicationModel

UWE

MOF

UML

M3

M2

M1

«metamodel»

«metamodel»

«metamodel»

Page 25: UML-Based Web Engineering

25

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 49

Foundation

ModelManagement

BehavioralElements

UWE

Foundation

BehavioralElements

ModelManagement

Foundation

ModelManagement

BehavioralElements

Package Structure

= UML Metamodel

= UWE Metamodel

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 50

Package Structure

UWEModel

ManagementBehavioralElements

Foundation

Foundation

Behavioral Elements Model Management

Core

ContextUser Environment

PresentationNavigationConceptual

Adaptation Process

Process

Page 26: UML-Based Web Engineering

26

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 51

UWE Navigation Package

Class

NavigationNode

Navigation Class ExternalNodeMenu

isLandmark: Boolean

Association

Link

ExternalLink ProcessLinkNavigationalLink

isAutomatic: Boolean

+source +outLinks

{derived}

{derived}

+inLinks+target

url: String

*

*1

1..*1..*

* *0..1

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 52

example of a well-formedness rule:

“Navigation attributes are derived from from conceptual attributes.

as OCL constraint:

context NavigationClassinv: self.feature->select( oclIsKindOf(NavigationAttribute) ).derivedFromAttributes->

forAll( f | self.derivedFrom.transitiveClosure->exists(feature=f) )

Metamodelling UWE Method

ConceptualAttribute(UWE.Foundation.Core.Conceptual)

ConceptualClass(UWE.Foundation.Core.Conceptual)

NavigationNode

Attribute(Foundation.Core)

NavigationAttribute

NavigationClass

*+derivedFromAttributes*

*+derivedFrom1

* <<implicit>>

Page 27: UML-Based Web Engineering

27

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 53

classes → elements with stereotype

notation

<<navigation class>>MyNavigationClass

attributes → tagged values

<<navigation class>>MyNavigationClass

{isLandmark}

UML Profile

systematic rules for mapping a metamodel to a UML profile:

abstract syntax

NavigationClass

NavigationNodeisLandmark : Boolean

inheritance → inheritance among stereotypesrepeated mapping of attributes and associations

«navigation node»

«navigation class»

associations → tagged values or associations (for classifiers)

<<navigation class>>MyNavigationClass

{isLandmark,derivedFrom=MyCClass}

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 54

Contents

Web Engineering ApproachModelling with UML and UWE NotationModelling supported by UWE MethodMetamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

Page 28: UML-Based Web Engineering

28

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 55

ArgoUWE

designed for the systematic construction of Web applicationsprovides specific notation for Web applicationsallows for separation of concerns: domain, navigation, presentation and business processessupports the UWE method performing semi-automatic model generationproduces XMI output as basis for code generationsupports model validationextends the NSUML library with the UWE metamodel

implemented as a plugin for ArgoUML

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 56

ArgoUWE*

supports notation of UWE and method of UWE

ArgoUWE extension of open source ArgoUML

model checker based on OCL constraints

generates XMI

*www.pst.ifi.lmu.de/projekte/argouwe

Page 29: UML-Based Web Engineering

29

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 57

Modeling with ArgoUWE: Use Casese-shop

Checkout

SignIn

AddToShoppingCart

SelectProductItems

ViewCart

SearchProductItems

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 58

Modeling with ArgoUWE: Conceptual Model

manual marking of conceptual classes as navigation relevantautomatic generation of navigation classesdifferent navigation views for same domain model

Page 30: UML-Based Web Engineering

30

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 59

Semi-automatic Navigation Model Generation

automatic generation of indexes

automatic generation of menus

manual adding of navigation classes and navigation links

manual integration of process features

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 60

Consistency Check & Design Critics

ArgoUML cognitive design critics background threadwarning mechanism for model inconsistencieswizard for design improvementuses critics pane for the critiques

displays wizards comments in detail pane

ArgoUWE design critics featuresinherits from ArgoUML (e.g. name collision)is extended by all wellformedness constraints of UWE (e.g. relationship between use case and process model)

Page 31: UML-Based Web Engineering

31

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 61

Consistency Check & Design Critics

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 62

ArgoUWE: Plugin Architecture

Novosoft UML library (NSUML)

graph editingframework (GEF)

open-sourceArgoUML

Java Plugin

XML/XMI generator

ArgoUWE plugin

PropertyPanel Critic

UML / UWE model

Model Facade & Factories

ArgoUML

UWE Diagram

FigEdgeFigNode

Graph Model

Page 32: UML-Based Web Engineering

32

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 63

improvement of the tool usabilitycode generationenhancement with modeling elements to build platform specific web modelsdefinition of transformations rules from PIMs to PSMs (based on the MDA principles)ArgoUWE extension for mobile and personalized web applicationsmigration to another tool supporting UML 2.0 notation?

Future Steps in the Development of ArgoUWE

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 64

Contents

Web Engineering ApproachModelling with UML and UWE NotationModelling supported by UWE MethodMetamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

Page 33: UML-Based Web Engineering

33

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 65

Process Tailoring

process to domain to company to area to project

„Tailoring“ of general processesto specific development,

such as for the development of web applications

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 66

Requirements for a Web Process

short release cyclesdevelopment in 3 to 6 months on averageheterogeneous development teamstrong competitive market

separation of concernschange management

continuous update of the contentchanges in the hypertext structurefrequent improvement of the user interfaceadaptation to new technologies and standards

Page 34: UML-Based Web Engineering

34

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 67

UWE Development Process

based on Unified Process (UP) was defined in 1999requires update with incorporation of elements of agile process (best practice)development is supported by a set of workflowsbased on concepts of role, activity, artifact, tool, etc. similar: Conallen's approach

WAE: Web Application ExtensionRUP-based

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 68

Visual Representation of the Process

ProjectManagement

Risk Management

Iteration Planing

Iteration Evaluation

DevelopmentProcess

RequirementsCapture

Analysis & Design

Implemen-tation

Quality Management

ValidationVerification

Testing

Iteration Workflow

Page 35: UML-Based Web Engineering

35

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 69

UWE: Risk Management

ActionListfor risk strategy

EvaluateRisks

IdentifyRisks

Project Manager

AnalyseRisk Impact

Prioritise Risks

Define Actionsfor Risk Strategy

Risk List

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 70

How is the UWE process defined?

by workflows (visual representation)by guidelines/checklists for the activities

e.g. elicit user navigation needsWhat information do users want to see at first glance?What kind of searches will they perform?How can the length of navigation paths be optimised?…

by skill lists for experts (workers) needed for each activitye.g. multimedia designer

knowledge of tools for creation and manipulation of images, videos, audios, …experience in design, integration and synchronisation of multimedia elementscreativity skills…

by description of artifactse.g. templates for risk list, iteration plan, use case description,…

Page 36: UML-Based Web Engineering

36

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 71

Contents

Web Engineering ApproachModelling with UML and UWE NotationModelling supported by UWE MethodMetamodel for UWETool support with ArgoUWEUWE Development ProcessFuture Work and Trends in Web Engineering

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 72

Future Work: UML-based Web Engineering

Topicscomplete migration to UML 2.0emphasis on requirements engineering tool supported MDA processextension of tool support: e.g. plug in for eclipsefocus on generation and testing analysis of the power of aspect-oriented modelling for UWE

Resourcesfunding of the DFG German Research Office for 2005 -2007 two PhD Thesis students final work (e.g. extensions to ArgoUWE, eclipse plug-in)

Page 37: UML-Based Web Engineering

37

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 73

focus on requirements engineering

model driven vs. agile development

emphasis on tool support

domain specific language (DSL) based on UML

from overhelming diversity of methodologies towards a „Unified Web Modeling Language“ ?

Trends in Web Engineering

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 74

Vision for Web Application Development

HDM1993

1994

1995

1996

1997

1998

1999

2000

2001

2002

RMM

EORM

OOHDM

WSDM

SOHDM RNA HFPM

WAE

WebML UWEW2000

2003 OOH

OO-Method

OOWS

Web Composition

NDT

Data-oriented

Process-orientedOO-oriented Implementation-

orientedHypertext-oriented

HDM-Lite

2004 WebSA

eW3DT

Hera

?

Page 38: UML-Based Web Engineering

38

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 75

References

UWE: http://www.pst.ifi.lmu.de/projekte/uweArgoUWE: http//www.pst.ifi.lmu.de/projekte/argouwewww.pst.informatik.uni-muenchen.de/~kochn/

OMG UML Specification v. 1.5 - OMG document formal [03-03-01]OMG UML 2.0 Superstructure RfP - OMG [ad/09-09-02]

Hypermedia & the Web – An Engineering Approach, David Lowe & Wendy Hall John Wiley & Sohn (1999)

Designing Data-Intensive Web Applications. Stefano Ceri, Piero Fraternali, Aldo Bongio, Marco Brambilla, Sara Comai, Maristella Matera. Morgan-Kaufmann (2003)

Building Web Applications with UML. Jim Conallen. Addison-Wesley (2003)

Web Engineering: Systematic Development of Web Applications. Gerti Kappel, Birgid Pröll, Siegfried Reich, Werner Retschitzeger (Eds.) dpunkt-verlag (German Version, 2003), English version to appear October 2005

UML-Based Web Engineering © Nora Koch Sevilla, 21.04.2005, 76

Muchas gracias! ☺

Nora Kochnora.koch (at) pst.ifi.lmu.dewww.pst.informatik.uni-muenchen.de/~kochn

uwe (at) pst.ifi.lmu.de