uml-based web engineering (uwe)

Sevilla – June 2007 – Nora Koch 15

UML-based Web Engineering (UWE)

� Software engineering approach for Web domain

� Based on OMG standards, such as UML, MDA, OCL, XMI, …

� Domain specific modeling language (DSL)

� MOF-based metamodel, OCL constraints

� Open source CASE tool support


UWE in a Nutshell

� UWE is a an engineering approach for the development of Web applications

� Main characteristic is the use of UML for all models� “pure” UML whenever possible� UML extension for Web specific features UML profile

� Focuses on systematisation and automatic generation

� UWE comprises� a modelling language for the graphical representation of models of Web applications� a method (technique) supporting semi-automatic generation � a metamodel for UWE modelling elements� a process supporting the development life-cycle of Web applications� a case-tool supporting the development of Web applications

� ArgoUWE editor for the design � set of transformations for model-to-model and model-to-code transformations


Modelling Language UWE


Why UML?

� UML is a graphical language for specifying, constructing and documenting software artifacts

� UML is a de facto industry standard and an OMG standard� UML includes

� notation� diagram types� Object Constraints Language (OCL)� metamodel� well-formedness rules

� UML does not provide a development process

How expressive is UML for the development of Web applications?� UML does not include specific Web model elements� UML defines extension mechanisms � UML profiles


“Pure” UML for Modelling Web Applications

ShoppingCart«presentation class»

ShoppingCart«trace»

«realize» «realize» design class

DBShoppingCart

: ApplicationServer

JSPShoppingCart

: Web Server

ClientShoppingCart

: Web Browser

«use»

«use»

UML component

physical node

UML dependency

� Use of UML (without extension) whenever possible

� Example: UML deployment diagram used to document � physical nodes

� distribution of web components


UML Profiles

� UML extension is called a UML profileif based on extension mechanisms provided by UML� stereotypes for new metaclasses

� domain specific: EJB «bean», «session», «entity», …

� defined in the UML: «metaclass», «trace», «file», …

� tagged values for metaattributes

� OCL constraints for invariants, pre- and postconditions

� UML profile = light weight extensioneases

tool support

� Heavy weight extension� uses other diagram types not defined in the UML� uses different notation


Analysis and Design Models in UWE

� Analysis models of a Web application� functional requirements are specified by

� use case model � workflows

� data (content) requirements are specified by� domain model

� Design models of a Web application

� information aspects� content model

� hypertext structure and navigation functionality � navigation model

� layout schema� presentation model

� functionality� process model� adaptivity model


Example: Simple Music Portal

� Inspired by www.mp3.com� offers albums for downloading � contains information about albums, songs, singer, composer, and publisher � this information is available for free� registered users can search albums and download them � for downloading they need to have enough credit on their prepaid account� accounts are rechargeable� provides a guided tour through the Web application


Modelling Requirements with UWE

� Use cases are the most appropriate/used technique for modelling requirements� Graphical visualization by UML use case diagram

� to model required functionality� distinguishes between navigation and process use cases

� Modeling constructs� «navigation»

� «web process»

(in ArgoUWE normal use case)


Modelling Business Processes

��

��

��

��

��

UML Metaclass

� ��

� ��

��

��

��

��

RE Element

Icon

?

� Business process can be modelled as workflows� Workflows are visualized by UML activity diagram

� set of actions� control flow elements as decisions, merges, forks, joins, etc.� object flows including relevant objects (instance of classes)

� Example: Download Album


Content Modelling

� Representation with “pure” UML is sufficient � no additional semantics required� UML class diagram

� UML class diagrams used at analysis-level and design-level

� domain concepts represented by classes� units of information� users of the system (user model)

� relationship between concepts represented by associations

� whole/part relationship shown by aggregations and composition

� hierarchical dependencies depicted by generalization/specialization (inheritance)

� multiplicities� …


Navigation Modelling

� Goals� to represent nodes and links of the hypertext structure� to design navigation paths � to avoid disorientation and cognitive overload

� Result: navigation model� represented by a UML class diagram� uses specific modelling elements for Web concepts

� Modelling elements� basic elements� access primitives

� Other methodologies� own notation for hypertext elements� different diagram types: UML state diagram or own diagram type


Basic Navigation Elements

� Stereotypes for basic navigation elements� «navigation class»

� «navigation link»

� Navigation elements used to model the core hypertext structure

� navigation class specifies a hypertext node visited by a user through browsing

(related to a content class)

� navigation link specifies a hyperlink used to access the target navigation object

from the source navigation object


Navigation Model: Hypertext Structure


Access Primitives

� Additional elements for the selection of one target navigation element from

a set of instances of a navigation element � index

� guidedTour

� query

� Shortcuts for more complex constructs (if represented in UML without

extension)

��


Access Primitive: Index

� Index specifies direct access to all instances of the target by providing a list

of all elements from which one can be selected to continue navigating in the

Web application� 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»


Access Primitives: Query and Guided Tour

� Query represents the possibility to search for instances of the target node where instances are selected based on the property FilterExpression � UML stereotype: «query»

� GuidedTour provides sequential access to instances of the target node � order in the sequential access is given by a property SortExpression

� different options may be specified � circular access to the instances

� access is triggered by a user-interaction

� UML stereotype: «guidedTour»

��

��


Navigation Model Elements: Menu and External Links

� Menus are used to structure the outgoing links from a node� associated to a navigation class by composition

� consists of a set of links to heterogeneous elements, such as indexes, guided tours, queries, instances instances of navigation classes or other menus

� UML stereotype: «menu»

� External Links are links pointing to nodes that

do not belong to the Web application

� UML stereotype:«external link»


Navigation Model: Hypertext Structure


Modelling Navigation

� Systematic enhancement of the navigation structure model by � indexes for all navigation links which have multiplicity > 1 at the directed association end � menus for all navigation classes with more than 1 outgoing association

� Design decision to include� guided tour instead of index� queries� tagged value home to indicate starting point of the application (node without ingoing

links)� tagged value landmark to indicate that a node is reachable from everywhere (all other

nodes include a link to the landmark node)

� Construction of views of the navigation space� partial views if the number of nodes is large� different views for different users� different views for different environments


Modelling Processes in UWE

� Navigation model of a Web application � represents the static information structure accessible to a user of the system � specifies browsing (navigation) functionality

� Process model � represent the dynamic aspects of a Web application� specifies functionality, such as transactions and complex workflows of activities

� Process modelling consists of� definition of process classes (for non-navigation use cases)� integration of these process classes in the navigation model� description of the behaviour through a process flow

� represented as UML activity diagram


Process Elements

� Process class represents the process through which the user will be guided in the Web application� for complex process that require more than a single class, an additional process model

is built

� UML stereotype: «process class»

� Process link is used to model the association between a «navigation class» and a «process class» � indicates entry points and exit points of processes within the navigation structure

� UML stereotype: «process link»


Navigation Model: Including Web Processes


Modelling the Process Flow

� The behavior of a Web process is defined by the process flow model� represented by an UML activity diagram� result of the refinement of the activity diagram drawn for requirements specification� no need of use of stereotypes

� Process flow consists of� flow of execution represented by activity nodes connected by activity edges� control nodes that provide flow-of-control constructs, such as decisions and

synchronization � object nodes that represent data flowing along object flow edges or pins associated to

the actions� semantic of activities is based on control and data token flows, similar to Petri nets


Requirements: UML Activity Diagrams for Login


Process Model: UML Activity Diagram: Login


Modelling Presentation

� Representation of layout for the underlying navigation and process models� is an abstract presentation � concrete presentation requires specification of additional physical properties of the

layout� colour� position

� Presentation classes represent Web pages or part of pages � composition of user interface elements � hierarchical composition of presentation elements

� UML class diagram for the structure of the presentation� using UML container notation

� UML interaction diagram (sequence diagrams) � used for modelling behaviour of presentation classes (classical UML)

� Alternative: development of a prototype


Presentation Model Elements

� «presentation class» groups a set of user interface elements representing a logic unit of presentation

� «page» is a presentation class that contains all elements that will be presented together to the user as response to one request

� user interface elements � «anchor»

� «text»

� «image»

� «form»

� «anchored collection»

� …


Modelling Adaptivity

UWE uses a technique called Aspect-Oriented Modelling (AOM) for the construction of models to specify adaptive Web applications

� What are adaptive Web applications?

� What is AOM?


Adaptive Web Applications

� Adaptation for� user properties: knowledge, tasks, preferences, interests� context properties: location (place and time) & platform (HW, SW, network)

� Update of a user model / context model� observation of the user behaviour or environment by the system

� Techniques for adaptation� content adaptation

� inserting and removing text/multimedia features� content variants

� navigation adaptation� link ordering� link annotation� link hiding� link generation

� presentation adaptation� modality adaptation (audio or text)� language selection� layout variants (resizing of fonts, images, changing colours)


Aspect-Oriented Modelling (AOM) in a Nutshell

� AOM identifies and defines

� join point: well-defined place in a model / program where additional

features can be attached

� pointcut: set of join points

� advices: feature to add/execute at a join point

� AOM specifies a weaving process (composition) of

� core functional modules (elements of a pointcut)

� aspects (defined by an advice)


Modelling Adaptivity

� Specification of � pointcuts (including conditions) and � advices

� Weaving the result into the web application based on � current state of the user model � information provided by link traversal

� Example: links only visible for registered users to� download album � recharge


Outline

� Web Engineering Methodologies

� Modelling of Web Applications

� UWE Approach� Modelling Language

� CASE Tool

� Metamodel

� Development Process


CASE Tool ArgoUWE


Tool Support for UWE

� Goal� support of UWE notation for design of Web applications

� separation of concerns (navigation, process, presentation,…)� implementation of UWE development process allowing for semi-automatic model

generation

� support of model validation checking models consistency

� code generation


ArgoUWE

� Extension of ArgoUML� advantages

� open source UML CASE tool

� design critics for checking model consistency� XMI output as basis for code generation

� disadvantages� still based on UML 1.x � inherited usability problems

� Implemented as a plugin for ArgoUML 0.16 � extends the NSUML library with the UWE metamodel

� developed within the scope of a couple of diploma theses

� Main difficulty� lack of ArgoUML evolution towards UML 2.0

� Currently we are developing plugins for other CASE tools


Model Validation

� Consistency checks for model correctness

� ArgoUML offers cognitive design critics � background thread

� warning mechanism for model inconsistencies

� wizard for design improvement

� uses critics pane for the critiques

� displays wizards comments in detail pane

� ArgoUWE extends the design critics features� inherits from ArgoUML (e.g. name collision)

� is extended by wellformedness constraints of UWE (e.g. relationship between use case and process model)


Modelling with UWE Stereotypes


Modelling Navigation with ArgoUWE


Metamodel for UWE


UWE Metamodel

� UWE Metamodel is defined as a conservative extension of UML 2.0� model elements of the UML metamodel are not modified� all new elements are related by inheritance to at least one model element of the UML� use of OCL to specify additional semantics of the new elements

� UWE extension� Core� Adaptivity


UWE Metamodel Characteristics

� UWE metamodel is profileable� mapping to a UML profile is possible

� UWE metamodel is MOF compatible � uses XML metadata interchange format (XMI)

� UWE metamodel� reflects separation of concerns in the structure of Core� shows cross-cutting aspect of adaptation


UWE Metamodel: Requirements Model

� Model elements grouped in packages� WebRE Behaviour� WebRE Structure

� Defines relationships among elements � inheritance (e.g. search defined

as an extended browse)� associations (e.g. a browse

requires a source and a target node)

context Search inv: self.parameters -> forAll

(p | p.location -> includes (self.source))

� Defines invariants (OCL constraints)

(see stereotypes used in the example)


UWE Profile: Requirements

� UML stereotype for each concept of the requirements package of the UWE metamodel

� Extends relationship� UML metaclass

� Advantages� no need to specify complete semantic of

new modelling elements� use of all UML CASE tools supporting

UML profiles for modelling Web applications


UWE Metamodel: Navigation



UWE Profile: Navigation

� UML stereotypes for Web specific concepts used for the specification of the hypertext structure

� Extends relationships

� UML metaclasses


Meta-associations of the Metamodel

� Representation using associations derived from the UML metamodel

� association {subsets target} for association between NavigationLink and

NavigationClass

� association {subsets ownedProperty} for composition between NavigationClass and

NavigationProperty

� Representation stereotyping UML metaclass Dependency� aggregation between NavigationClass and Menu� association between AccessPrimitive and NavigationProperty, leading to the following

constraint

context Dependencyinv: self.stereotypes->

includes("Primitive2Property") implies(self.client.stereotypes->

includes("AccessPrimitive") andself.supplier.stereotypes->

includes("NavigationProperty"))

where client and supplier denote the ends of the Dependency relationship


UWE Metamodel: Presentation



UWE Profile: Presentation


UML Extension for Aspects

� Lightweight extension of UML � An Aspect stereotype as an extension of UML metaclass Package

composing� Pointcut package that references to all model elements on which� Advice package is applied

� Pointcut and Advice packages may contain OCL constraints detailing� conditions for the application of the aspect� effects of the aspect


UWE Metamodel: Adaptivity

� NavigationAnnotation stereotype to model link adaptation� related to Link� navigation annotations are attached to navigation links


UWE Development Process


� 1999 - 2003 � based on the Unified Process (UP) � development is supported by a set of workflows� based on concepts of role, activity, artifact, tool, ...

� 2003 – 2004� incorporation of elements of agile process

Evolution ��

� since 2005� based on the model-driven development (MDD) principles

� Model-Driven Architecture (MDA) standard of the OMG


Model-Driven Development Approaches

� MDD approaches require languages for� specification of models

� description of metamodels

� definition of model transformationsM

odels

Model transform

ations

Meta m

odelsMDD

� MDD in the Web Domain� several methods propose modelling

� OOHDM, OO-H, UWE, WebML, Hera,…� separation of concerns� similar Web specific modeling elements� different notations

� some methods define metamodels for modelling languages� OO-H, UWE, W2000, WebML, …

� few approaches address model transformations� OOWS, UWE, WebSA, …

� MDD approaches based on� models and model transformations


MDD Principles: Models and Metamodels

� Models� computational independent model (CIM)� platform independent model (PIM)� platform specific model (PSM)

«instantiate»

«instantiate»

UWE ApplicationModel

UWE

MOF

UML

M3

M2

M1

«metamodel»

«metamodel»

«metamodel»

� Metamodels� definition of concepts and relationships among

concepts� compatibility with the OMG metamodelling

architecture � MOF meta-metamodel

� XMI interchange format → tool compatibility (theoretically)

� static semantics given by OCL constraints(well-formedness rules)

� basis for tool support


MDD Principles: Model Transformations

� Model transformations� CIM�PIM, PIM�PIM, PIM�PSM

� Model transformation languages� general programming languages

� Java

� graph transformation languages � Attribute Graph Grammar (AGG)

� query/view/transformation languages� QVT� ATL

� OMG standards� MOF, UML, OCL, XMI, QVT


Model transformation pattern (J. Bézivin, 2004)

Model Transformations

� Translation performed by a transformation engine

� Transformation engine executes rules

� Transformation rules are � defined at metamodel level

� applied at model level

� Set of rules � seen as a model

� with a metamodel

� Metamodels are based on

a metametamodel

� Translate between source and target models� instances of same or different metamodel


Model transformation pattern (J. Bézivin, 2004)

Model Transformations

� Translation performed by a transformation engine

� Transformation engine executes rules

� Transformation rules are � defined at metamodel level

� applied at model level

� Set of rules � seen as a model

� with a metamodel

� Metamodels are based on

a metametamodel

� Translate between source and target models� Instances of same or different metamodel


Model-Driven Process of UWE

� Types of models in UWE � requirements model (CIM)

� models for J2EE, .Struts (PSM)

� functional models (PIM)� content model� navigation model

� …

� architecture models (PIM)

� integration models (PIM)

� Graphical representation of the process� process as UML activity diagram

� model transformations as stereotyped UML actions

� models as UML object flow states

� implicit initial and final state


UWE Development Process Requirements to Functional Models


Music Portal Example (excerpt)

� Requirements model� UML use case diagrams

� UML activity diagrams

� Web requirements engineering profile (WebRE)� WebUser,

� navigation, WebProcess

� browse, search, …

� content, node, …


Transformation Requirements to Content (1)

� Source: requirements model (UML activity diagram)� objects input for Web actions

� objects result of Web actions

� Target: content model � classes of the content model

� Profile-based transformation


Transformation Requirements to Content (2)

� Model transformation language� Query View Transformation (QVT)

� textual notation

� Transformation rule

transformation ReqContent2ContentClass (webre:WebRE,uwe:UWE) {

top relation R1 {

checkonly domain webre c: Content {name = n};

enforce domain uwe cc: Class {name = n}; }

top relation R2 {cn: String;

checkonly domain webre p: Property {namespace=c:

Content{}, name = cn};

enforce domain uwe p1: Property {namespace = cc: Class{};

name = cn }

when {R1 (c,cc);}

}

}


Transformation Requirements to Navigation Elements (1)

� Source: requirements model (UML activity diagram)� search action� content and node object flow states

� Target: navigation model � query and index class� navigation class � navigation link

� Pattern-based transformation


Transformation Requirements to Navigation Elements (2)

� Model transformation language� QVT� graphical notation

� Transformation rule


Construction of Functional Models

� UWE metamodel and UWE profile� navigation elements: navigation class, navigation link, index, …

� presentation elements: presentation class, anchor, image, …

� Case tool ArgoUWE� extension of ArgoUML

� provides stereotypes

� supports (semi-)automatic execution of transformations


Transformation Content to Navigation (1)

� Marking elements � identification of classes of the content

model that are relevant for the navigation view

� task performed by designer

� Semi-automatic transformation

� Content2Navigation� generates navigation classes from

content classes

� adds a navigation links based on associations of the content model


Transformation Content to Navigation (2)

� Implementation � Java within CASE tool ArgoUWE

� ATL (ATLAS Transformation Language)

� ATL transformation rule

rule Class2NavigationClass {

from c : UWE!Class ( c.oclIsTypeOf( UWE!Class ) )

to nc : UWE!NavigationClass (

name <- c.name,

ownedAttribute <- c.ownedAttribute->select( p |

p.association.oclIsUndefined() ) )

}


Refinement of Navigation Model

� Improvement based on patterns � index for associations with multiplicity greater than one at the directed

association end

� menu for navigation classes with multiple outgoing associations

� Implementation � Java in ArgoUWE

� ATL


Integration with Architecture Models

� Web Software Architecture (WebSA) approach*� domain specific language for modelling architectural views of Web applications

� subsystem model� configuration model� integration model

� UML profile of architectural modelling elements� Web component� Web port� Web connector� server page,

� etc.

� QVT-like transformations

*Santiago Melía, University of Alicante, PhD Thesis (2007)

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'’


Generating “Big Picture” Model

� Generation of an integrated functional model (“big picture” )� transformation target UML state machine for integration of content, navigation and

process models

� graph transformation language

� tool: Attributed Graph Grammar System (AGG)

� validation of correctness by model checking


Big Picture: Transformation of Navigation Model

� capture navigation nodes as states (with parameters for data)

� Example: music portal: transformation for navigation node “song”


Big Picture: Transformation of Business Process


Big Picture: Example Transformation of Business Process


Model Validation

� Model transformations for Web applications based on UWE and its UML-based metamodel

� Graph transformations into integrating UML state machine

� Model validation by model checking using Hugo/RT (http://www.pst.ifi.lmu.de/projekte/hugo)

� Automation of transformation process using Attribute Graph Grammars (AGG)


Generation of Web Applications

� UWE uses a transformational approach� to generate data model and presentation layer

� based on content, navigation structure and presentation models

� transformation rules from UWE content model to Java beans

� transformation rules from UWE presentation model to Java Server Pages (JSPs)

� UWE uses an interpretational approach� using a virtual machine

� to interpret the process model (activity diagrams)

� configuration data for the virtual machine is generated from process and navigation model

� Implemented so far � using the Spring framework

� transformations defined in ATLAS Transformation Language (ATL)


Features of Model Transformations

� MDD Type � CIM to PIM, PIM to PIM, PIM to PSM

� Complexity� simple, merge

� Use of marks� types, stereotypes, patterns, explicit marks

� Execution type� automatic, semi-automatic, manual

� Implementation technique� general programming language

� graph transformation

� model transformation language


Classification of UWE Model Transformations

QVT-P, ATLautomaticpatternsmergePIM to PSMIntegration2J2EE

QVT-PautomaticUWE & WebSAprofile

mergePIM to PIMFunctional&Architecture2Integration

graph trans-formations

automaticpatternsmergePIM to PIMFunctional2BigPicture

Javaautomaticstyle guidemergePIM to PIMStyleAdjustment

automatic

automatic

automatic

semi-automatic

manual

automatic

Execution

Java, ATLUWE profilesimplePIM to PIMNavigation2Presentation

QVTWebRE profilemergeCIM to PIMReq2Navigation

JavaUWE profile & patterns

simplePIM to PIMNavigationRefinement

Java, ATLnavigation relevance

simplePIM to PIMContent2Navigation

--simpleCIM to PIMReq2Architecture

QVTWebRE profilesimpleCIM to PIMReq2Content

TechniquesMarksComplexityTypeCharacteristicsTransformation


UWE: Current State and Future Work

� Focus on systematisation and automatic generation

� Following the model-driven approach

� Use of UML notation for graphical representation

� Ongoing work

� Main focus on case-tool support

� Final objective to cover all relevant aspects in the development life- cycle of Web applications


� Web engineering methodologies� since 1993 many methods

� data-oriented, hypertext-oriented, object-oriented, software-oriented

� WebML, WSDM, OOHDM, UWE, WAE,…

� Modelling of Web applications� four dimensions by modelling Web applications

� UWE is a modelling language� UML Profile for modelling navigation, presentation,

process, adaptivity, …

� UWE has a metamodel� conservative and profileable

� UWE defines a model-driven development process

� based on model transformations

� focus on the use of model transformation languages such as ATL and QVT

Summary


Literature

� Web Engineering: Systematic Development of Web ApplicationsGerti Kappel, Birgid Pröll, Siegfried Reich, Werner Retschitzegger (eds.) dpunkt-verlag (German version), 2003,John Wiley & Sons (English version), 2006.

� Web Engineering: Modelling and Implementing Web ApplicationsG. Rossi, O. Pastor, D. Schwabe, L. Olsina (eds.), Springer (2007), to appear.

� Metamodelling the Requirements of Web Systems María José Escalona and Nora Koch2nd International Conference on Web Information Systems and Technologies (WebIST'06), Setubal, Portugal, pages 310-317. INSTICC, 2006.

� Modelling Adaptivity with AspectsHubert Baumeister, Alexander Knapp, Nora Koch and Gefei Zhang5th International Conference on Web Engineering (ICWE 2005), Sydney, Australia, LNCS 3579, 406-416, 2005.

� Modelling Business Processes in Web Applications with ArgoUWEAlexander Knapp, Nora Koch and Hanns-Martin Hassler7th International Conference on the Unified Modeling Language (UML 2004), Lisboa, Portugal, LNCS 3273, 69-83, 2004.

� Model-Driven Generation of Web Applications in UWEAndreas Kraus, Alexander Knapp and Nora Koch3rd International Workshop on Model-Driven Web Engineering (MDWE 2006), Como, Italy, to appear


Muchas gracias! �

Nora Koch

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

uwe (at) pst.ifi.lmu.de

uml-based web engineering (uwe)

Technology