WebML and WebRatio - Business process modeling (BPM) and web application modeling

WebML

Designing data-, service-
and process-intensive
applications with WebML

EMN, Nantes, May 12, 2010

Marco Brambilla
Politecnico di Milano and Web Models Srl

http://www.slideshare.net/mbrambil
http://home.dei.polimi.it/mbrambil
http://twitter.com/MarcoBrambi

Agenda

 WebML models and concepts
 WebML development process
 Advanced topics: Web services, BPM, Ajax
 WebRatio 6 BPM
 Industrial cases

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil 2
WebML

WebML

WebML models and concepts

Marco Brambilla

Perceived Needs 1:
lack of model-driven development

 Data-intensive Web site design today is founded on
methodologies stolen from different sectors (DB, software
eng., …)
 Lack of model-driven support of data-intensive Web Sites
• Navigation equal to database structure
• Lot of hand-written code
 Big efforts are requested even for prototyping

WebML

Perceived Needs 2:
increase of sites complexity

 Some factors increase complexity of modern Web sites:
• Multi-device output (PC, PDA, WAP phones, 3rd gen phones, Digital TV,
videotext)
• One-to-one delivery (myYahoo, myCDNOW,…)
 These requirements impact on cost of:
• site development
• site evolution

WebML

Perceived Needs 3:
shortage of IT & art personnel

 Need to rise the level of abstraction
 Available skills can address analysis and high-level design
instead of huge
time-wasting manual coding of ASP pages
 IT technicians can focus on optimization and performance
analysis
 Art people can focus on “creation”

WebML

Advantages of Modeling approach
A rigorous modeling approach:
 Can reduce development efforts (cost and time)
 Allows a more structured development process
 Produces more usable and coherent final results
 Design models are self-documenting and always up-to-date
projects
Immediate prototyping can be achieved

WebML

Requirements for Web modeling
 Expressiveness
• Real-life cases should be expressible
• Frequently used design patterns should be captured
 Ease of use
• Intuitive notation
• Clear semantics
• Consistency checks
 Implementability
• Efficient mapping to physical data structures
• Flexible code generation from behavioral specifications

WebML

WebML purpose
 WebML aims at providing a structured approach to the design
of Data-intensive Web sites
 A set of integrated Models should help designers in high-
quality Web sites production
 All the facets of Web design should be addressed
 Use of old or uncoherent methodologies becomes deprecated

WebML

Target of WebML
 Target: data intensive Web sites
• large amount of data
• interfaces directed to general public
 exploratory
 browsing-oriented
 personalized (1 to 1)
• volatile content, structure, navigation, presentation
 WebML is not the right approach for:
• Small Web sites (Homepages, …)
• Static Web sites

WebML

The WebML models
 WebML: a conceptual language for high-level design of data-
intensive web sites
 Models:
• Content: data organization
• Derivation: redundant data definition
• Composition: definition of site pages as set of subpages and
elementary publishing units
• Navigation: definition of links between pages and between units
• Presentation: positioning of the units in the page and definition of
graphical appearance

WebML

Preview of WebML concepts
 Site = Content + Composition + Navigation + Presentation

entities, units, pages, site views styles
relationships links

navigation +
content composition user models presentation

WebML

Structure Model (1)
 Q: what are the objects published in the site and how they
are related?

 A:
• Entity: an object type in the application domain
• Attribute: scalar property of an entity
• Relationship: A connection between entities
• IS-A hierarchy: classification and grouping

 Compatible with Entity-Relationship
and UML class diagrams

WebML

Structure Model (2)
 Simplified Entity-Relationship model
• Binary relationships between entities
• IS-A hierarchies
• Simple typed
attributes in entities Author Genre
• Derivation model
can be applied for
redundant data
Book

BestSeller

WebML

Relationship cardinality
 Relationship Book_Review
– book2review minCard: 0 maxCard: N
– review2book minCard: 1 maxCard: 1

Book 0..N Review
1..1

It reads: a book may have zero or more reviews,
a review deals with one and only one book

WebML

Cardinality: comment
 Cardinality constraints of relationships are important,
because
• They make the structure schema more readable and expressive
• They can influence the design of the phisical structure of the content
repository (e.g., the schema of the online database of the site)

WebML

Multi-valued attribute
 A multi-value attribute is an attribute for which an object may
have a set of values (e.g., a person may have set of addresses)
 Multi-valued attributes are represented by means of an entity
plus a relationship
 Example: a person has a set of addresses

Person 1..N Address NOTE: the “address”
Value:string entity is a “weak”
1..1
entity, it cannot
exist independently
of the associated
“person” object

WebML

MODEL

Structured attributes
 A structured attribute is an attribute with an internal structure (e.g., an
address may consist of several fields, like civic number, street, city,
province, state, etc..)
 Structured attributes are represented by means of an entity plus a
relationship
 Example: a person has one or more addresses, each address consisting of
number, street, city, province, state

NOTE: the “address”
Person 1..N Address entity is a “weak”
1..1 Number entity, it cannot
Street exist independently
City of the associated
Province
State “person” object

WebML

MODEL

Relationship with attributes
 A relationship with attributes is a description of a property
that refers to a pairs (more generallly to sets) of objects (e.g.,
the grade taken by a student in a course)
 Relationship with attributes are represented by an entity and
two (more generally, several) relationships

Student 0..N Grade 1..1 Course
Value:integer
1..1 0..N

NOTE: the “grade” entity is a
“weak” entity, it cannot
exist independently of the
associate objects
WebML

MODEL

N-ary Relationship
 A N-ary relationship is a relationship involving more than two
entities (N>2)
 N-ary relationships are represented by an entity plus N binary
relationships
 Example: a supplier supplies a part to a department

Part

0..N
1..1
Supplier 0..N Supply 1..1 Department
1..1 0..N

WebML

TECHNIQUES

Structure patterns
 Structure pattern: typical structure design solution, found
very frequently in real Web sites

 Patterns can be combined and used together to achieve
complete information access

WebML

Structure Patterns
 Network skeleton:
Entity3 • Hierarchy skeleton:
Entity1
Entity1 Entity2

 Star skeleton: Entity2

Entity4 Entity3
Entity3

Entity1

Entity5 Entity2

WebML

1. Hierarchy Pattern

Category
Entity1

SubCat
Entity2

E-catalog
Product
Entity3

 A categorization hierarchy
 User can browse the hierarchy from top to bottom (and back)
 Often used in e-commerce applications

WebML

2. Star Pattern

Entity4
BigImg Entity3
TechData

Acme case
Entity1
Item

Entity5
Warranty Entity2
Style

 A main object can be recognized
 A set of informative elements are related to the object
 User can jump from main object to information pages and
back

WebML

3. Network Pattern

Tech-support Entity3
Product

Entity1
Solution Entity2
Tech
site

 A set of elements to be published
 All at the same level of importance
 Every object has detailed description
 User can browse from an object to the related ones
WebML

Pattern combination
 Real web sites are much more complex
 Many problems
CatA1
Category CatB1
Country
can be solved
using patterns
Hierarchy
combined SubCatA1
SubCat SubCatB1
Brand
pattern2
together Hierarchy
pattern1
Object1
Product

Network pattern
Object2
Solution Object3
Tech
Hierarchy Hierarchy
pattern
Category2
SolCat TechCat pattern
Category3

WebML

Derivation Objectives
 Derivation is a modelling phase that makes it possible:

• To augment the content of an entity by adding attributes, either
imported or calculated from related objects.

• To define the population of entities or of relationships, based on some
property of the involved objects.

WebML

WebML OCL
 Derivation consist of writing expressions called “derivation
queries”
 Queries can be expressed using WebML OCL
 Derivable concepts:
• Entities, relationships, attributes
 Derivation queries can be automatically transformed into SQl
views installed in the database

WebML

Derived entities
 Sub-Entities population in ISA hierarchies can be specified by
means of OQL queries
 “A free slot is a slot having 0 reservations”
 WebML OQL: “SuperEntity where count(reservation)=0”

slot
ISA

freeSlot

WebML

Derived attributes
 Attributes of an entity can be derived by associating to them a
query.
 Four types of derived attributes:
• Constant attribute: affiliation: “Politecnico di Milano”
• Imported attributes: maritalName: Self.husband.lastname
• Aggregate attributes: reservation#: count(Self.reservation)
• Calculated attributes: lastPrice: Self.price*discount
 The Self keyword identifies the current entity in which the
attribute is defined

WebML

Imported attribute
 Import a piece of external information into an entity

male female
husband
lastname maritalName

WebML

Calculated attributes
 Total price of order as sum of price of order lines

OL Order
OL2Order
price, qty

 Derivation rules:
OL.TotalPrice = Self.Price * Self.Quantity
Order.TotalPrice = Sum (Self.Order2OL.TotalPrice)
Order.NumLines = Count (Self.Order2OL)

WebML

Derived relationships
 Relationships can be derived by a WebOQL query in two
ways:
• by subsetting and/or concatenating existing relationships
• by matching pairs of objects by means of a condition

 Variable Self denotes the instance of the source entity of the
relationship

WebML

Derived relationships: subsetting
 Subsetting existing relationships:

Artist2RecentAlbum
Artist Album

Artist2Album

WebML

Derived relationships: concatenation
 Concatenating existing relationship:

Album Artist

CompilationArtist
SongAlbum
Song
SongArtist

WebML

Derived relationships: matching pairs
 User2Favorites relates User to all the Articles whose category
appears in the set of the preferred categories in the user profile.

User2Favorites
User Article

User2Article

User2Preference

Category

WebML

Hypertext Model

• Q1: what information is published in the hypertext nodes?
• Q2: how are the hypertext nodes connected?
• Q3: how is the hypertext divided into pages served to the user?

• A1: content units (Composition)
• A2: links (Navigation)
• A3: pages (Composition)

WebML

Composition: examples of Content Units
DATAUNIT
To publish information about
A SINGLE object
(e.g. AuthorDetail)

content

INDEXUNIT
To publish a list of objects
(e.g. IndexOfAuthors)

content

WebML

Composition: examples of Unit rendering
DATAUNIT
Author
first name:XXX
last name:YYY
photo:

Author

INDEXUNIT
Index of Authors

•S. Ceri
•P. Fraternali
•O.Versand

Author
WebML

Hypertext Model: questions

•Q1: what is the experience of the site that the user can
achieve?
•Q2: how is the hypertext divided into pages served to users?
•Q3: what information is published in the hypertext nodes?
•Q4: how are the hypertext nodes connected?

•A1: siteviews
•A2: pages
•A3: content units
•A4: links
WebML

Basic Content Units
DATAUNIT INDEXUNIT MULTIDATAUNIT
Content:
• instances of
an entity

Selector:
• set of
conditions entity entity entity
[Selector] [Selector] [Selector]

ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL

entity entity entity
[Selector] [Selector] [Selector]
WebML

Meaning of Content Units

DATAUNIT INDEXUNIT MULTIDATAUNIT

Author Index of Authors All Authors
first name:XXX
last name:YYY •S. Ceri
photo: •P. Fraternali
•O.Versand

ENTRYUNIT SCROLLERUNIT MULTICHOICE HIERARCHICAL

Insert Your Data Browse Authors Choose Authors Books&Authors
1. Web Applicat.
•Fname 5/12: go to 1/12 Ceri Ceri
•Lname Fraternali Fraternali
   Versand 2. Systems
Tannenbaum
WebML

Content Units
 A WebML unit is the atomic information publishing element
unitX

container

 It is a “view” defined upon a container of objects:
• All the instances of an entity
• Instances of an Entity that meet a selection condition called selector

WebML

Unit input and output

IN unitX OUT

entity

[selector (par 1, .., parN)]
 A unit may need some “context” to be computed
 Each unit exposes input and output parameters
 Input is required to compute the unit itself
• Parameters pre-defined for the unit +
• Other parameters required by the selector of the unit
 Output can be used to compute other unit(s) depending on the current
unit

WebML

Navigation: contextual links

source unit target unit

Author Author

• A contextual link is an oriented connection between two
units (source unit and target unit), normally rendered by
means of anchors or submit buttons
• Purpose of a contextual link:
• Allowing the user to move from one place to another
• Transporting information from one place to another
• Activating a computation (side effect)
WebML

Example of links
Which author’s books? Which book?

p1 p2 p3

Author Book Book
[OID=p1] [author2book(p2)] [OID=p3]

Author Books of YYY Book
first name:James Title:Ulysses
last name:Joyce •Ulysses Price:23$
photo: •The Dubliners Cover:
•Portrait...

WebML

Link Parameters

param

Book
Author [Author2Book(param)]
• Context is transported through links using link parameters
• A link parameter is defined by:
• Name
• Source: one of the output parameters of the source unit
• Target: one of the input parameters of the target unit

WebML

Default Link Parameters

• Whenever possible, link parameters are inferred
from the diagram and need not be explicitly
specified
• Diagrams become simpler and more readable
•Example:

Book
Author [Author2Book]
WebML

Defaults for selectors

• Whenever possible, selectors and their
parameters are inferred from the diagram and
need not be explicitly specified
• Example:

Author Book Book
[author2book]
WebML

Automatic Links

source unit A target unit

Author Author

• An automatic link passes some default context to the
destination unit immediately after the display of the
source unit, without the user intervention
• Subsequently, the user can change the passed context
by choosing a different object, using the anchor(s)
representing the link

WebML

Transport Links

source unit target unit

Book
Author [Author2Book]

• A transport link has a default context that is passed to
the target unit immediately after the display of the
source unit, without the user intervention
• The user cannot change the default context and
therefore the link is not rendered with an anchor

WebML

Examples
 No input links and no
selector: wrong unit!
p1 EntityB
Input parameter: OID
A.oid B.oid of a connected object:
the related object is
shown
EntityB
[Relationship(A2B)]
Input parameter:
param1 B.oid value to be used in
the selector: the
matching object is
EntityB
[B.attr = param1]
shown
WebML

Examples
 No input links: all objects
selOID shown
(B)

EntityB Input parameter: OID
of the source object of
sourceOID selOID the relationship role,
(A) (B)
all related object are
EntityB
shown
[Relationship(A2B)]
Input parameter:
Param1 selOID value to be compared
(B) with the attribute,
matching objects
EntityB
shown
[B.attr = Param1]
WebML

MultiDataUnit

params {OIDs}

Entity
[Selector(params)]
• Multidata units
• Present multiple instances of an entity (SET OF OBJECTS)
• The container is an entity with (optional) selector
• Input parameters requested for the computation of the selector:
• Values for attribute comparisons
• OID of participants to relationships
• Output parameter:
• The set of OIDs of the published objects

WebML

MultiData vs. Index
 MultiData or Indexes?
• Indexes can be used as access mechanism to shown detailed
information about one object
• Multidata Units publish information about many objects at time
 The difference is in the output parameter:
• Indexes output the OID of one selected object
• Multidata units output the OIDs of all the displayed objects

WebML

Entry Unit
 Unit for describing input forms that allow information
submission by the user
 Content is shipped to other units via outgoing links (normally
one), using link parameters
 Typically translated into HTML using the <form> tag and the
associated submit button

params

WebML

Entry Fields and Selection Fields
 Entry units contains two types of widgets for data entry:
• Fields to insert new value
• Selection fields to select a value from a list
 Fields have properties:
• Preloading (of an existing value in the field)
• Modifiability (Y/N)
• Visibility (hidden/shown)
• Data type (string, integer, text, etc..)
• Input validation rules

WebML

Preloaded Fields
 A field can be preloaded with value(s)
• Field slots allow the concatenation of multiple values in the same field
• Slots can contain dynamic values taken from the database or static values
defined in the model

FirstName PF.S1
LastName PF.S2 EntryUnit
NickName PF.S3
PersonField S1 S2 S3

AddrField
Artist
 Selection fields need to be preloaded with a set of instances (possibly
with multiple slots per instance)
Resulting field anPersonField them Springsteen “the boss”
 The user chooses instance among Bruce

WebML

Multichoice Unit
 Multichoice units:
• Publish indexes of elements (SET OF OBJECTS) among which the user to
select one or more elements (with checkboxes)
 The container is an Entity (with optional selector & pre-selector)
• Input parameters:
 Those requested for the computation of the selectors (values for
attribute comparisons and OID of participants to relationships)
• Output parameters:
 OIDs of the objects checked by the user
 Preselector: allows one to define a sub-set of elements as pre-checked (before any
user interaction)
params {selOIDs}

Entity
[Selector(params)]
[Preselector(params)]
WebML

Examples
 No input links: all objects shown, no pre-checked elements
{selOIDs}
Atzeni
(B)
Ceri
Fraternali
Versand
EntityB

sourceOID Atzeni {selOIDs} Pre-selector: all objects
(A) Ceri (B) shown, pre-checked
Fraternali
Versand elements related to A
EntityB
[PRE:Relationship(A2B)]

sourceOID Ceri Selector: only elements
(A) {selOIDs} (B)
Fraternali related to A shown, no
pre-checked elements
EntityB
[Relationship(A2B)]
WebML

Hierarchical Unit
 Hierarchical units:
• Publish an index of elements, with entries organized hierarchically
using entities connected by relationships
• Allow the user to select one element from any level of the hierarchy
 The container is a set of entities and connecting relationships (with
optianl selectors at all levels)
• Input param: requested for the computation of the selectors :
 Values for attribute comparisons
 OID of partecipants to relationships
• Output parameter: OID of the object selected by the user

params {selOIDs}

{ Entity
(Relationship)
[Selector]}
WebML

Hierarchical Unit
outgoing links
 Each link is rendered as an anchor at the proper level of the
hierarchy
 The level where the link is placed depends on the type of the
link parameter(s)
link a
•Tables link a
Param link b •Kitchen link b
EntityA
B •Korla KJD54 link c
link c •Chairs link a
EntityA EntityB •Stools link b
Category •Roy LKR34 link c
[selector1]
SubCategory •OddVar JSQ87 link c
EntityB (A2B)
(Cat2SubCat) EntityC •Office link b
[selector2]
Product •Jess RLT45 link c
EntityC (B2C)
(SubCat2Prod)
[selector3]

WebML

ScrollerUnit
Scroller units:
 Add browsing capabilities to a set of objects
• Publish links to the first, previous, next, last object of the set
• Used in conjunction with data, index and multidata units
• Number of scrolled objects = block factor
• Input: values for attribute comparisons, OID of participants to a
relationship
• Output: the set of OIDs (possibly 1) of the current block of objects
 Always placed in the same page as another content unit that publish
the current (block of) object(s)

params {selOIDs}

Entity
[Selector(params)]
WebML

Scroller + data unit
 The entity is the same for the scroller and the data unit
 It is possible to access the data unit also from another page
and the scroller is automatically syncronized

Artist Artist

WebML

Scroller + index
 Paging the result of a search

t,y

Album Album
[Title contains t]
[Year > y]

WebML

Pages
 A page is a container of one or more pieces of information
shown to the user at the same time
 Nesting of pages is allowed: a page can have sub-pages
 The user navigates a site made of pages

Book Index Login Catalog

WebML

Non contextual links
 A non contextual link is a link between pages
 No context (information) is transported

HomePage Book Index

 The user can browse from a page to another one via an
anchor (e.g., >>Books)

WebML

Home Page
 The Home Page is the main page of a site
 It is the first page of the site that the user should see
 Each siteview must contain a page marked as “Home”

HomePage H Book Index

WebML

Landmark pages
 Landmark pages: globally visible pages. The user can jump to them from
everywhere in the site view
 It is equivalent to a non contextual link implicitly defined from every other
page in the site view to the landmark page

Books Store Page Books Store Page

L

Authors Book Details Authors
Book Details

WebML

Areas
 An area is a set of logically homogeneous pages
 Examples of areas:
• Sections of a portal: Sport, Music, Technology, …
• Elements of a data-management system: Products management, News
management, …
 Areas can be nested, so that sub-areas can be defined inside
areas
 Each area should have a DEFAULT PAGE or a DEFAULT SUB-
AREA, to give a meaning to landmark areas and non-
contextual links pointing to areas
Area

WebML

Site Views
 A siteview is a set of pages and/or areas forming a coherent
view of the site
 Multiple site views can be defined on the same data model
 Different site views can be published for different types of
users and for different types of output devices
 Site views can be
• Public: everyone can enter
• Private: access control with password protection is enforced

WebML

Acme site view modeling
 Two site views on the same data model
• Customer: public, for customers
• Admin: private, for the administrators and content managers

WebML

Acme customer site view
 Purpose: define the customer experience of the site
 Structure:
• Two main areas: products and combinations
• Other landmark pages: home, stores

Customer
Product area Combination
area

L L

Home Page Store Page
H,L L

WebML

ACME page modeling
 Q: what “main” pages do I need in the site?
 Home, Products, Combinations, Stores

Product area Combination area
AcmeHome H Stores
Products Combinations
L L L L
Q: what other pages do I need?
Product detail, Combination detail, ByPrice,
BigImages,..
Combination
By price Product Detail
Page

BigImages

WebML

ACME: HomePage

WebML

ACME product page

WebML

ACME combination page

WebML

Navigation Model: Links

AuthorID
is transported

entity: Book
author [ author2book ]
• Semantics of a link:
1. Moving from one place to another
2. Transporting information from one place to another
(navigation context)
3. Activating a computation (side effect)
WebML

Composition: Pages
A Page is a structured container of units and links
• Possibly structured in and/or sub-pages
• Abstraction of screen, frame, card, deck...
• Permits one to cluster related information for more efficient
communication

E.g.:
The index of
authors and the
selected author
are shown
together in the
same page
Author Author

WebML

Types of links
 Contextual links
• Between units
• Context transported

 Non-contextual links
• Between pages
• No context transported

Voyages Books

WebML

Integrating backend business logic
 Example of web sites using back-end/remote services:
• Reservation Web site: create a reservation, undo a reservation,
overwrite a reservation..
• Other examples: content management, e-commerce trolley
management, update of personal profile ..
 How can we model the invocation of back end operations,
e.g., the update of content by the user?
 Response:
• Embedding operation calls into the hypertext

WebML

Operation Unit
 Models a generic external operation, or a built-in content
manipulation operation
 Input from one or more incoming links (at least one is
declared as normal link, the others as transport links)
 Two kinds of output links
• OK link if the operation completes correctly
• KO link if the operation fails
 The predefined WebML units can be enriched by adding
custom external operations (e.g. SendMail, …)

WebML

Built-in Operations
 WebML predefines a set of frequently used built-in
operations to manage a site’s content
 They are the traditional database operations: create, delete,
modify, create relationship, delete relationship
 Users do not need to define the behaviour and the
implementation; they are provided off-the-shelf in the model

WebML

Built-in Operations

CREATE DELETE MODIFY
Create Unit Delete Unit Modify Unit

Entity Entity Entity

CONNECT DISCONNECT
Connect Unit Disconnect
Unit

relationship relationship
WebML

In/out flows

value1 attribute1 KO
Nothing
Create Unit
OK
OID of
the new object
value2 attribute2
Entity
Identifier(s) of the
value1 attribute2 object(s) to modify
Value2 attribute1
KO
Modify Unit
OK Identifier(s) of the
modified object(s)
OIDs of objects to modify
Entity
WebML

In/out flow: delete
KO OIDs of the object(s) to delete
OIDs of the Delete Unit
object(s) to delete OK Nothing

Entity
Albums DeletionError

Example: AlbumIndex DeleteAlbum NotDeleted

KO

OK
Album Album Album

OK

Albums DeletionError Albums

DELETE ALBUMS NOT DELETED DELETE ALBUMS
All the way All the way Let's talk...
Anthology 1999 1997 Anthology
KO Bridges to Babylon
Born in the USA
Bridges to Babylon Imagine
Imagine Sing-a-long
Let's talk ... 1998
Del Del
Sing-a-long

WebML

In/out flow: connect
 Note: if the any of the input parameters is a set of OIDs, the operation is
applied to each element of the set
 The disconnect operation is similar

OIDs of Identifiers of the
source object(s) objects to connect
KO
to connect Connect Unit
OK
Identifiers of the
OIDs of connected objects
destination object(s) relationship
to connect role

WebML

Example
ReviewPage Result

Rev : Rev iew.OID ArtistDetails
NewReview KO

OK
Rev : OID AssignReview
Art: Artist.OID
Artist
Rev iew Rev : Rev iew.OID [OID = Art]
Art:OID
AllArtists ReviewDetails

ArtistToRev iew
[Artist.OID = Art ]
[Rev iew.OID = Rev ]

Artist Rev iew
[OID=Rev ]

KO

Rev iew Page Result

NEW REVIEW ARTISTS ARTIST REVIEW

One of the most Select an artist to
romantic and assign the review: First name: Review :
expressive artists Celine One of the m ost
° Beatles OK
rom antic and
of the nineties. Last name: expressive artists
* Dion
Dion of the nineties.
° Prince
WebML

Example/2
Artist&AlbumsPage
ArtistDetails KO

OK
Album
Disconnect

Artist

PublishedAlbums AlbumDetails
AlbumToArtist

Album Album
[ArtistToAlbum]

KO

Artist&Albums Artist&Albums Artist&Albums

Celine Dion Celine Dion Celine Dion
ALBUMS ALBUMS DETAILS ALBUMS
Sing-a-long
° All the way ° All the way OK ° All the way
1999
° Let's talk... ° Let's talk... ° Let's talk...
° Sing-a-long * Sing-a-long ° These are...
° These are... ° These are... Press OK
OK
to remove
WebML

Siteviews
 A Siteview is a set of pages that the user can experience as a
whole Web site
 Different site views can be defined for different devices and
different groups of users
 Thus, access control and multi-devices delivery is achieved

WebML

Using global information
 It is often necessary to:
• Set a parameter value (e.g. the country or language preferred by a
user)
• Use this value globally in all the pages the site view, without carrying it
explicitly along links
 Solution
• Use global parameters stored in the session
• Provide means for setting/getting their value

WebML

Context Parameters
 WebML Context Parameters allow to achieve this goal in a
simple way
 Designer defines one or more Context parameters.
 A context parameter is defined by:
• Name
• ID
• Duration (User session or Application)
• Value type: can be either:
 A Printable value (integer, string, …)
 An Entity (thus, the parameter can assume an OID value of that entity)
• Starting value [optional]

WebML

Set unit
 Unit that allows to SET the value of a parameter

Value/OID

ParamName

 It is always placed outside a Page
 It has only an incoming link (carrying the value to be assigned
to the parameter)
 It has not outgoing links

WebML

Get unit
 Unit that allows to RETRIEVE the value of a parameter

Value/OID

ParamName
 It is always placed inside a Page
 It has only an outgoing link (carrying the value retrieved from
the parameter)
 It has not incoming links
 The retrieved value can be used in any compatible unit

WebML

Example
SetCountry GetCountry
NewsPage[L]

CountryData

CurrCountry CurrCountry

CountrySelectionPage [L] ProductPage [L]

CountryIndex CountryData CountryData
Country

LocalNews

Country Country Country

LocalProducts
News
[Country2News]

Product
[Country2Product]

WebML

Personalization and access control
 In reserved Web sites commitment wants:
• One or more public pages readable from anyone
• A set of private page accessed only after login, which contains personal
content and personal services
• Personalization in terms of delivered pages (which pages user can
access) and delivered content (which content user needs/can see)

WebML

Personalization
 Personalization has three facets:
• Access control: login/logout operations for user recognition
• Site view assignement: based on the group a user belong,
some site views are accessible (1 or more site view per Group)
• Page personalization: user or group dependent content

WebML

User / Group metaphor
 Each User can belong to one or more Groups (predefined
entities in the structural model)
 Each user has one default Group
 Each Group can contain one or more User and can be the
default Group for many Users

User 1:N 1:N Group
user2group

1:1 1:N
user2defaultGroup

WebML

User / Group model
 Each User can belong to one or more Groups (predefined
entities in the structural model)
 Each user has one default Group
 Each group has one associated Siteview

User 1:N 1:N Group
user2group
1:1 1:N
1:1
user2defaultGroup
1:N
Module

WebML

Anonymous access
 One group is predefined (everyone)
 Users belonging to this group need not login, but access only
unprotected site views, which has unprotected content (the
“everyone” site views)
 Other site views can be accessed only after login (secured site
views)

WebML

Login/ Logout
 A site-view may contain a page allowing users to login
Entry Unit Login

 Each secured site-view should allow users to logout
Logout

 Dynamic Role Changing
(i.e. group) allowed ChangeGroup

WebML

Login for multi-role users
 If a user belongs to more than one group, at login time he is
considered as member of his defaultGroup

Username johnlee
Password *********** User: johnlee
Group: johnleeDefaultGroup
Login

 Thus, once the user is logged, the current values of User and
Group are always identified

WebML

CurrentUser and CurrentGroup
Each WebML project has two predefined
global parameters:
• CurrentUser: the OID of the currently logged User
• CurrentGroup: the OID of the Group of the
currently logged user
Login and Logout operations automatically set
/ unset these two parameters

WebML

Page personalization (user-level)
Personalization can be achieved with appropriate data design
articles user
preference

•Hypertext can reflect structure, and
thus provide personalization After login
CurrentUser is
Recommendations
identified, thus
the index
shows user’s
preferred
CurrentUser user article articles
[preference]

WebML

Trolley management

TrolleyPage

GetUser CurrentUser TrolleyData

OK CurrentUser
User Trolley
[UserToTrolley]

DeleteOrderLine OrderLines
to Artist Page
Artist:Artist.OID

Album:Album.OID
to Album Page
KO
OrderLine
OrderLine
[TrolleyToOrderLine]
NEST Support
[OrderLineToSupport]
NEST Album
[SupportToAlbum]
NESTArtist
[AlbumToArtist] L

WebML

Page personalization (User)
 Personalization can be achieved as a result of appropriate
structure design

slot user
reservation

•Hypertext can reflect structure,
and thus provide personalization After login
Personal Reservations UserCtxParam
is bound to
“my” identity,
thus the index
shows “my”
UserCtxParam entity:user rel:reservation
reservations
WebML

Page personalization (Group)
 Personalization can be achieved also at group level (because a
siteview can serve more groups)

Book Author User Group

Category
interesting

Preferred categories Authors

GroupCtxPar Group relation:g2c Category relation:c2a
WebML

Presentation
 Presentation dealt with along two lines:

• Gallery of default presentation styles applicable to site views or single
pages (with elementary unit positioning on a grid)
 each presentation style is an XSL stylesheet

• Compatibility with best selling tools for presentation editing, for
advanced page design

WebML

WebML

WebML development process

Marco Brambilla

Development process

Business Requirements

REQUIREMENTS SPECIFICATION

DATA DESIGN

HYPERTEXT DESIGN

ARCHITECTURE DESIGN

TESTING & EVALUATION IMPLEMENTATION

MAINTAINANCE & EVOLUTION

WebML

1. Requirements specifications
 IN: business requirements
 OUT: user-oriented, easy-to-understand, precise specification
 Two main sucb-activities:
• 1. Requirements collection: general picture of the application domain
and of the solution, by interviewing players and reviewing existing
documentation
• 2. Requirements analysis: revision and formalization of the collected
requirements
 Output is useful for
• Designers: understand what the application must do
• Stakeholders: validate the adherence of the specifications to the
business requirements

WebML

1.1. Requirements collection
Unstructured activity of information gathering:
 Users identification: clustering of users in groups
 Functional requirements: identification of the processes that are
supported by the application (through use-cases or scenarios)
 Data req.: identification of the data that should be managed by the
application (core concepts)
 Personalization req.: formalization of need of different content and
services to different individuals, based on preferences and access rights
 Device-specific req.: for multi-device applications
 Non-functional req.: usability, performance, availability, scalability,
security, mantainability

WebML

1.1. Non-functional requirements
 Usability: ease of use of the application
 Performance: efficiency with which the application exploits
the available resources, in terms of throughput (the number
of requests that can be served per unit of time) and response
time
 Availability: tolerated frequency of errors and failures
 Scalability: ability of increasing the performance of the
application in response to the increase of the volume of
requests
 Security: protection of integrity, confidentiality and privacy of
information, authentication of the users, protection of the
information flowing between the users and the application
 Mantainability: ease of repairing application errors and
adapting the Web application to changed or new
requirements
WebML

1.2 Requirement analysis
 Revision and formalization of the collected requirements,
producing in output a set of semi-formal specifications,
typically in terms of:

a. Group specification
b. Use-case specification
c. Data dictionary specification
d. Site view specification
e. Style guidelines specification
f. Acceptance tests specification

WebML

1.2.a Group specification
Clustering of users into groups (formally described)

Group Group name: Mar-Com Manager
Description: Description: marketing and communication personnel inserting,
modifying, and deleting mkt materials.
Groups
Profile data: First name, last name, email, office address.
Hierarchy: Profile data are provided explicitly by the user.
Super-group: Corporate.
Corporate Sub-groups: None.
Relevant use “Login”, “Add a news item”, “Modify a news item”,
cases: “Delete a news item”, “Add a news category”,
“Modify a news category”, “Delete a news category”,
Mar-Com Supervisor
"Modify profile data".
manager
Objects - read Product and Product News.
mode:
Objects - content Product News.
mgmt mode:
Admin

WebML

1.2.b Use-case specification
Formal description of units of interaction with the application by
users of a given group (e.g., thru tables or UML diagrams)

1. Use cases list for a user (use case diagram)

Add a news Login Add a news
item category

Modify a news Modify a news
item category

Remove a Remove a
news item news category

Mar-Com Manager
WebML

1.2.b Use-case specification

2. Single use case specification (table or activity diagram)
Title Login of user belonging to multiple groups
User Application Server Database
Purpose To express how users with more than one role access
the functions of the applications.
Initial Request Send Form

Pre- A user that belongs to multiple groups is registered. For
condition each group, the site view serving the requirements of
the group members is defined.
Input Credentials Accept Credentials Verify Credentials
Post- The user successfully logs into the application and
condition accesses the site view corresponding to one of his
groups. Select Home Page Elaborate Page
Workflow The following steps must be performed: Default Home Page List
1.The user receives an input form asking for username Pages
Index of Home
and password;
2.The user inputs his credentials;
3.If the credentials are correct, the user is Serve Request
authenticated, the list of groups the user belongs to is
determined, and the list of names and URLs of the
home pages of the Receive Homeof such groups is
site view Page
displayed to user;
marco.brambilla@polimi.it chooses one entry from the list, and enters
4.The user
http://home.dei.polimi.it/mbrambil view.
into the selected site
117
WebML

1.2.c Data dictionary specification
 List of the main information objects identified during data
requirements collection
 Each entry can be specified by:
• Name NewsItem
• Synonyms Piece of news
• Description A corporate or product piece of news
• Sample instances TravelMate 610 launched, 20th June 01
• Properties Title, Body, Image, Date, …
• Relationships NewsToProduct
• Components None
• Super-concept None
• Sub-concepts Highlighted news

WebML

1.2.d Site view specification (site map)
 IN: list of user groups, list of use cases, data dictionary
 OUT: list of needed site views, specified by:
• Name
• Description
• Target User Groups
• Implemented use cases
• Site view map: a table illustrating the different areas that compose the
site view. Each area is specified by:
 Area Name
 Area Description
 Accessed/Managed Objects
 Priority level

WebML

Site View News Content Management
Description
1.2.d Site view inserting or updating contentexample content
management functions, for specification about news categories and
Includes the pages through which the Mar-Com Managers will access

news items.
User Groups Mar-Com Managers

Use Cases “Login”, “Add a news category”, “Edit a news category”, “Remove a news category”,
“Add a news item”, “Edit a news item”, “Remove a news item”.
Site View Map
Area Name Area Description Objects Priority
News Content In the default page, the user accesses the list of NewsCategory High
Management countries for which he is content manager and selects NewsItem
a country to administer. In the News Category page,
the user accesses the list of news categories for the
selected country. Here, the user can perform content
management functions over news categories,
according to the use cases “Add a news category”,
“Edit a news category”, “Remove a news category”.
Otherwise, he can select one category, and access
the list of the available news items in the selected
category.
In the News page, the user can perform content
management functions over a selected news item
according to the use cases “Add a news item”, “Edit a
http://home.dei.polimi.it/mbrambil “Remove a news item”.
news item”, 120
WebML

1.2.e Style guidelines specification
Rules for the presentation of pages:
 Specification of standard page grids: rows, columns and cells
arrangement
 Content positioning specification: banners, logo, menus
positioning
 Graphical guidelines: rules for graphic items like fonts, colors,
borders and margins
 Device-specific and browser-specific guidelines

 Example: Mock-ups: sample representations of a few typical
application pages (for a specific device and rendition
language)

WebML

1.2.e Style guidelines specification
Page grid:

Content positioning:
Graphical guidelines:

WebML

1.2.e Acceptance tests specification
Formalization into a plan of acceptance tests
of non-functional requirements about:

performance
availability
scalability
security
maintainability

WebML

2. Data design
 2.1. Core subschema
 2.2. Access subschema
 2.3. Interconnection subschema
 2.4. Personalization subschema

WebML

2. Data Design
 IN: data dictionary, site map, functional requirements, user requirements
 OUT: formal Data model (E-R schema)
 Data design:
• clarifies application requirements
• feedbacks hypertext design
• can be influenced by pre-existing data schemas (possibly not designed
for hypertextual applications)
 Two different situations can be faced:
• data store does not exist and must be designed together with the Web
application
• content managed by the Web application already exists (totally or in
part) and is managed by some data repository

WebML

2. Data Design: entities classification (1)
 Core objects:
• the essential assets managed by the application
• form the backbone of the Entity-Relationships schema
• may require more than a single entity to be represented (due to
complex properties and components)
• core sub-schemas are sets of entities correlated by relationships,
collectively representing one core concept
 Interconnection objects:
• the semantic associations between core concepts
• are used to construct links and indexes for navigation
• consist of E-R relationships

WebML

 Access objects:
• are auxiliary objects used to classify or specialize the core objects, with
the purpose of facilitating access by means of:
 categorization over the core objects
 more precise keyword-based search mechanisms
 collections of most representative objects
• are mapped into entities, connected to the core entities.
• access sub-schemas: the same core object may be categorized or
specialized in different ways
 Personalization objects:
• the properties of the user, needed for personalization
• entities may be used to model user profile data and the
groups in which users are clustered
• relationships (ownership, preference,…) may connect
user and group to the applicative entities

WebML


User

Group

CoreEntity1 CoreEntity2

Personalization
sub-schema

Core
sub-schema

Connection
sub-schema

Access
sub-schema

WebML

2.1. Core subschema
 Core entity identification: from data dictionary and the other
requirements NewsItem Product

 Detailed design of core subschema: attributes, components and
relationships
NewsItem Logo Product TechSpecItem
Headline Name 0:N Name 1:1 Description
SubHeadline Image DescriptionShort Highlighted
Date DescriptionLong
TextDate 0:N ImageSmall 0:N
Place ImageNormal
Award
OnlineDate ImageLarge 0:N Product
CutoffDate Name PDFBrochure
Date 1:1 0:N FlashPresentation Configuration
PDF
PDFName Logo PDFCertificate ModelName
Body 0:N Notes 1:1 PartNumber
Image GIFTechSpecs Description
Highlighted Benefit BrochureThumbnail Price
Summary Description 1:1 Availability
DescriptionLong

WebML

WebML and WebRatio - Business process modeling (BPM) and web application modeling

WebML and WebRatio - Business process modeling (BPM) and web application modeling

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie WebML and WebRatio - Business process modeling (BPM) and web application modeling

Ähnlich wie WebML and WebRatio - Business process modeling (BPM) and web application modeling (20)

Mehr von Marco Brambilla

Mehr von Marco Brambilla (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WebML and WebRatio - Business process modeling (BPM) and web application modeling