The Expressive Power of
UML-based Web Engineering
(UWE)
Nora Koch and Andreas Kraus
Ludwig-Maximilians University of Munich
Germany
IWWOST´2002, Málaga

Motivation
• UML is a graphical language for
specifying, constructing and documenting
software artifacts
• UML is a de facto industry and a OMG standard
• UML description includes: notation, metamodel,
OCL and semantics
How expressive is UML for
the development of Web applications?
IWWOST´2002
2 /19

Overview
• UWE Methodology
• UML “pure” vs. UML Profile
• UML for
4 Requirements Specification
4 Conceptual, Navigation & Presentation Design
4 Web Scenarios
4 Task Modeling
4 Web Application’s Deployment
• Conclusions & Future Work
IWWOST´2002
3 /19

UWE Methodology
UWE (UML-based Web Engineering) focuses on
4Systematization
4Personalization
4Semi-automatic generation of Web applications
UWE is an object-oriented, iterative and incremental
approach based on the Unified Process
[Jacobson, Booch & Rumbaugh, 1999]
UWE extends our UHDM [Baumeister, Hennicker, Koch
& Mandel, 1998-2000]
IWWOST´2002
4 /19

UWEXML Process Overview
• Semi-automatic generation using
an XML Publishing Framework
Analysis/Design Editor
• Analysis/Design editing with the
«trace»
extended UML modeling tool
ArgoUML
UWEXML Generator
• Processing of the XML design
model descriptions by the
UWEXML Generator
«refine» «refine»/
«import» • Deployment of
4 Presentation XML components
Application XML Publishing
Server Framework 4 RunTime Layer classes
4 EJBs templates & presentation
stylesheets IWWOST´2002
5 /19

UML “pure” vs. UML Profile
tool support &
• “pure” UML interchange
format
• “lightweight” extensions
• “heavyweight” extensions
4 Stereotypes
4 Tagged values «index»
article.date
NewArticles > user.lastVisit
4 Constraints {adaptation=annotated}
should be
• “heavyweight” extensions avoided
IWWOST´2002
6 /19

Object Constraint Language (OCL)
• OCL is used for specifying
4 Invariants
4 Pre & post-conditions
• OCL boolean expression language
4 Basic types & collection types integer, ... set, bag, ...
4 Access to attributes, roles, .. article.keyword
4 Operators +, =, >, implies
4 Quantifiers publication → forAll (...)
4 Pre-defined variables self
IWWOST´2002
7 /19

UML for Requirements Specification
• UML use cases & UML activity diagrams
• Example: Adaptive Online Library
Enter
article title user
Find activity
article Produce
article list
Find [count=1] [count=0]
Reader Display
publication
error
[count>1]
Find Select
author article
system
Display activity
Look at article
new articles
Registered
Reader IWWOST´2002
8 /19

UML for Conceptual Design
UML class diagrams Library
name: String
rolename
deletePublication
library
..
1 * publications
multiplicity Publication 1..*
Keyword
title: String keywords
date: Date word: String
..
1*
* authors articles 1..*
Author Article
name: String * ..
1*
title: String
e-mail: String authors articles abstract: String
complete: URL
IWWOST´2002
9 /19

UML for Navigation Design (1)
Library UML stereotyped
class diagrams
«navigation class» • select classes rele-
vant for navigation
publications 1..* • define derived
authors 1..* attributes
Publication Keyword
* 1..*
/keyword • keep associations
as direct navigability
1..* 1..* authors
Author
• add additional
1..*
associations
* articles
• add constraints
articles 1..* Article
visited 1..*
inv: /keyword = articles
self.ConceptualModel::
IWWOST´2002
publication.keyword.word «direct navigability»
10 /19

UML for Navigation Design (2)
Library
UML stereotyped
query class diagrams
authors
Library • add index if
authors publications multiplicity > 1
Library
? Menu • move rolename
publications
authors
• add queries
menu
{annotated} • add menu (composition)
publications 1..* to navigation class if
authors Publication #outgoing associations
*
/keywords
>1
1..* authors
• menu items name =
rolenames
1..* Author
• add tagged values
authors index IWWOST´2002
11 /19

UML for Presentation Design
UML class diagrams
«presentation class»
Publication
4UML composition notation
to sketch the user interface
Title Date
4Modeling elements are the
stereotyped classes .
.
.
• «text» Complete Authors
• «button» Publication
• «image» .
.
• «anchor» .
• «anchored collection» Keywords Articles
• ...
4Sketches can be linked to
produce storyboards IWWOST´2002
12 /19

UML for Web Scenarios
UML statecharts diagrams
Library + LibraryMenu • To detail parts of
displayed
name submitted navigation &
[searchResult = 0]
menu item 2 selected presentation
SearchAuthorByName • To show control of
displayed synchronisation by
back to home
name submitted multi-windows
[searchResult > 1]
name submitted
AuthorByName [searchResult = 1]
displayed / present author
guard condition
author action
selected Author + AuthorMenu
displayed
transition = state =
IWWOST´2002
user‘s behavior page displayed 13 /19

UML for Task Modeling (1)
• Task modeling stems from the HCI field
• A task is composed by subtasks and/or actions that the user
performs to achieve a goal
UML activity = task
«refine» dependency Delete
used for task publication task input/output
decomposition as object flows
«refine»
[p <> null] «presentation class»
Search DoDelete :Delete
publication [ p = null] publication Publication_OK
temporal order (with branches) IWWOST´2002
between tasks
14 /19

UML for Task Modeling (2)
UML activity diagrams as
Delete
„Roadmaps“ of user publication
interaction with the system
«refine»
[p <> null]
Search DoDelete
publication [p = null] publication
«refine» «presentation class»
«presentation class»
:Delete :Delete
Publication_Error Publication_OK
Enter Select publication
publication name from list
p:Publication
«presentation class» «presentation class»
IWWOST´2002
pn:PublicationName pl:PublicationList 15 /19

UML for Web Application’s Deployment
UML deployment diagram used
to document distribution of : Web Browser
Web application components physical node
«client page»
UML dependency Publication
«use»
: Application : Web Server
Server
«use»
UML
«EJB» «JSP»
component
Publication Publication
«realize» «realize» design class
«trace» «presentation class»
IWWOST´2002
Publication Publication
16 /19

Conclusions
• UWE supports UML-based design for
Web applications
• UWE uses UML “pure” for
4 requirements analysis
4 conceptual model
4 deployment design
4 Web scenarios
4 task modeling
• UWE defines a UML Profile for
4 navigation design
4 presentation design
IWWOST´2002
17 /19

Future Work
We focus on the improvement of UWE
• Case-tool support ArgoUML → ArgoUWE
• UWEXML for the semi-automatic generation
based on design models
IWWOST´2002
18 /19

Thanks for your attention!!
Questions?
For further comments...
kochn@informatik.uni-muenchen.de
krausa@informatik.uni-muenchen.de
IWWOST´2002
19 /19