Web ml

Model-driven design of Web applications

Piero Fraternali, Marco Brambilla9 novembre 2002

[email protected]@polimi.it

http://www.webratio.com

WIS selection!

This presentation contains a selection of the original presentation, specifically

made for use in the WIS course!

For more information go to the website.

Web Modeling Language (WebML)

WebML: a conceptual language for high-level design of data-intensive Web applicationsDefined in 1998, in use for more than six yearsWidely published: Ceri, Fraternali at al. Designing data-intensive Web applications, Morgan Kauffman, Dec. 2002Adopted in many universities worldwideCommercially implemented (www.webratio.com)Used for developing several applications:

www.acer-euro.com, www.aceradvantage.com, www.elet.polimi.it, www.image.co.uk,...

WebML basic concepts

Web application = Structure + Hypertext + Presentation

structure

entities,relationships

navigation + composition + user model

units, pages, links, site views

presentation

styles


1. Data Modelling



[email protected]@elet.polimi.it

Data Modeling: Purpose

Q: what are the objects published in the site, what are their properties, how are they related?

A: Structure model primitivesEntity: a class of objects in the application domainAttribute: a property of an entityRelationship: a connection between entitiesIS-A hierarchy: for classification and grouping

MODEL

Entity and RelationshipEntities are boxes, labelled with the entity name in the upper half of the boxAttributes are listed in the lower half of the entity box (optional)

Relationships are represented by a solid line between two entity boxesISA hierarchies are denoted by an arrow pointing from the sub-entity (more specific concept) the the super-entity (general concept)

Entity1Entity2

SubEntity

attribute1

MODEL

Relationship role

A relationship role is one of the two “directions” under which a relationship can be regardedRelationship roles have user defined names

E.g.: Relationship Author_Book may have the rolesRole 1: author2bookRole 2: book2author

BookAuthor author2book

book2authorAuthor_Book

MODEL

Relationship cardinality

For each direction of the relationship, maximum and minimum cardinality contraints can be specified

E.g. relationship Author_Bookauthor2book minCard: 0 maxCard: Nbook2author minCard: 1 maxCard: N

It reads: an author may produce zero or more books, a book may have one or more authors

BookAuthor 0..N

1..N

MODEL

ISA hierarchy

A IS-A hierarchy is a special connection between two entities that implies that one entity (the sub-entity) is a special case of the other one (the super-entity)The sub-entity inherits the properties of the super-entityIS-A hierarchies may have several levels (e.g, book, novel, thriller..)

Book

Novel Biography

Thriller

MODEL

Example: Acme e-Catalog

Acme is a small furniture company, which sells products thru stores located all over the world. Now, ACME wants to build a Web site for publishing a product catalog and attracting new customers. The site should include information about products, special offers, i.e. combinations of products sold at a discounted price, and stores. Products are associated to a technicalrecord. Products may have several enlarged images.

RUNNING CASE

ACME Complete structure model (initial version)

Store

Location: stringMap: imageURL: URLEmail: URL

Product

Name: stringCode: integerPrice: floatDescription:textThumbnail:image

Combination

Name: stringPrice: floatDescription:textPhoto:image

Tech record

Colors:imageSize: text

Big image

Description: textPhoto:image

RUNNING CASE

0:N

0:N

1:1

0:10:N

1:1


2. Hypertext Modelling




Hypertext Model:purpose

Goals: Modelling at a high level the front-end of a dynamic

Web application and the interactions with the back end business logic and dataUsing a simple, yet formal, visual notationEnabling automatic generation of dynamic page

templates and data access and manipulation queries

MODEL

•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

Hypertext Model:questions

MODEL

DATAUNIT INDEXUNIT MULTIDATAUNIT

ENTRYUNIT SCROLLERUNIT

entity[Selector]

Content:• instances of an entity

Basic Content Units

MODEL

entity[Selector]

entity[Selector]

entity[Selector]

MULTICHOICE

entity[Selector]

Selector:• set of conditions

HIERARCHICAL

entity[Selector]

DATAUNIT INDEXUNIT MULTIDATAUNIT

ENTRYUNIT SCROLLERUNIT

Meaning of Content Units

Authorfirst name:XXXlast name:YYYphoto:

Index of Authors

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

All Authors

Browse Authors

5/12: go to 1/12

MODEL

Insert Your Data

•Fname•Lname

MULTICHOICE

Choose Authors

CeriFraternaliVersand

HIERARCHICAL

Books&Authors1. Web Applicat.

CeriFraternali

2. SystemsTannenbaum

Content Units

A WebML unit is the atomic information publishing element

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

unitX

container

MODEL

Unit input and output

A unit may need some “context” to be computedEach unit exposes input and output parametersInput 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

unitX

entity[selector (par 1, .., parN)]

IN OUT

MODEL

Navigation:contextual links

•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)

AuthorAuthor

MODEL

source unit target unit

Authorfirst name:Jameslast name:Joycephoto:

Author[OID=p1]

Book[author2book(p2)]

Book[OID=p3]

BookTitle:UlyssesPrice:23$Cover:

Which author’s books? Which book?

Books of YYY

•Ulysses•The Dubliners•Portrait...

Example of links

MODEL

p1 p2 p3

Link Parameters

Book[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

Author

MODEL

param

Default Link Parameters

AuthorBook

[Author2Book]

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

MODEL

Defaults for selectors

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

MODEL

Author Book[author2book]

Book

Automatic Links

•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

AuthorAuthor

MODEL

source unit target unitA

Transport Links

AuthorBook

[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

MODEL

source unit target unit

DataUnit

Data unitsPublish information about ONE SINGLE INSTANCEONE SINGLE INSTANCE

The container is an entity with (optional) selectorInput:

OID of the object to be published, ORParameters requested for the computation of the selector, like:

Attribute values

OID of object participant to a relationship role

Output: OID of the published object (and its attributes)

Entity[selector(params)]

params OID

MODEL

ACME: data unit inProduct page

Information about a onespecific product

RUNNING CASE

Product

ExamplesNo input links and no selector: wrong unit!

Input parameter: OID of a connected object: the related object is shown

EntityB[Relationship(A2B)]

A.oid B.oid

EntityB

MODEL

EntityB[B.attr = param1]

param1(B.oid)

Input parameter: value to be used in the selector: the matching object is shown

p1

IndexUnit

Index units:Publish an index of elements (SET OF OBJECTS)(SET OF OBJECTS)

The container is an entity with (optional) selectorInput parameters for the computation of the selector:

Values for attribute comparisons

OID of related object

Output parameter:OID of the object selected by the user

Entity[Selector(params)]

params

MODEL

selectedOID

ExamplesNo input links: all objects shown

Input parameter: OID of the source object of the relationship role, all related object are shownEntityB

[Relationship(A2B)]

sourceOID (A)

selOID(B)

EntityB

selOID(B)

MODEL

EntityB[B.attr = Param1]

Param1 selOID(B)

Input parameter: value to be compared with the attribute, matching objects shown

ACME case: index unit inProducts page

A simple index is provided to the user Users can access products by clicking on index elements

RUNNING CASE

Product

selOID

MultiDataUnit

MODEL

• Multidata units• Present multiple instances of an entity (SET OF OBJECTS)(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


params {OIDs}

MultiData vs. Index

MultiData or Indexes?Indexes can be used as access mechanism to shown detailed information about one objectMultidata Units publish information about many objects at time

The difference is in the output parameter:Indexes output the OID of one selected objectMultidata units output the OIDs of all the displayed objects

MODEL

Entry Unit

Unit for describing input forms that allow information submission by the userContent is shipped to other units via outgoinglinks (normally one), using link parametersTypically translated into HTML using the <form> tag and the associated submit button

MODEL

params

Entry Fields and Selection Fields

Entry units contains two types of widgets for data entry:

Fields to insert new valueSelection 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

MODEL

Preloaded FieldsA field can be preloaded with value(s)

Field slots allow the concatenation of multiple values in the same fieldSlots can contain dynamic values taken from the database or static values defined in the model

Selection fields need to be preloaded with a set of instances (possibly with multiple slots per instance)The user chooses an instance among them

MODEL

EntryUnitS1 S2 S3PersonField

AddrFieldArtist

FirstName → PF.S1LastName → PF.S2NickName → PF.S3

Resulting field Bruce Springsteen “the boss”PersonField

Multichoice Unit

Multichoice units:

Publish indexes of elements (SET OF OBJECTS)(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)


[Preselector(params)]

params

MODEL

{selOIDs}

ExamplesNo input links: all objectsshown, no pre-checked elements

Pre-selector: all objectsshown, pre-checked elements related to A

EntityB[PRE:Relationship(A2B)]

sourceOID (A)

{selOIDs}(B)

EntityB

{selOIDs}(B)

MODEL

EntityB[Relationship(A2B)]

sourceOID (A)

{selOIDs} (B)

Selector: only elements related to A shown, no pre-checked elements

AtzeniCeriFraternaliVersand

CeriFraternali

AtzeniCeriFraternaliVersand

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

{ Entity (Relationship) [Selector]}

params

MODEL

{selOIDs}

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)

EntityA[selector1]EntityB (A2B)[selector2]EntityC (B2C)[selector3]

MODEL

ParamA

ParamBParB,ParC

•Tables link a•Kitchen link b

•Korla KJD54 link c•Chairs link a

•Stools link b•Roy LKR34 link c•OddVar JSQ87 link c

•Office link b•Jess RLT45 link c

link a

link b

link c

CategorySubCategory(Cat2SubCat)

Product(SubCat2Prod)

EntityA

EntityB

EntityC

ScrollerUnit

Scroller units:Add browsing capabilities to a set of objects

Publish links to the first, previous, next, last object of the setUsed in conjunction with data, index and multidata unitsNumber of scrolled objects = block factorInput: values for attribute comparisons, OID of participants to a relationshipOutput: 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)

MODEL


params {selOIDs}

Scroller + data unit

The entity is the same for the scroller and the data unitIt is possible to access the data unit also from another page and the scroller is automatically syncronized

ArtistArtist

MODEL

Scroller + index

Paging the result of a search

MODEL

AlbumAlbum[Title contains t]

[Year > y]

t,y

Pages

A page is a container of one or more pieces of information shown to the user at the same timeNesting of pages is allowed: a page can have sub-pagesThe user navigates a site made of pages

LoginBook Index Catalog

MODEL

A non contextual link is a link between pagesNo context (information) is transported

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

Non contextual links

HomePage Book Index

MODEL

Home Page

The Home Page is the main page of a siteIt is the first page of the site that the user should seeEach siteview must contain a page marked as “Home”

HomePage H Book Index

MODEL

Landmark pages

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

Authors

Books

L

Book Details

Store Page

Authors

Books

Book Details

Store Page

MODEL

Areas

An area is a set of logically homogeneous pagesExamples 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 areasEach area should have a DEFAULT PAGE or aDEFAULT SUB-AREA, to give a meaning to landmark areas and non-contextual links pointing to areas

MODEL

Area

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 modelDifferent site views can be published for different types of users and for different types of output devicesSite views can be

Public: everyone can enterPrivate: access control with password protection is enforced

MODEL

Acme site view modeling

Two site views on the same data modelCustomer: public, for customersAdmin: private, for the administrators and content managers

Acme customer siteview

Purpose: define the customer experience of the siteStructure:

Two main areas: products and combinationsOther landmark pages: home, stores

Customer

Product area

Store Page

Combination area

RUNNING CASE

Home Page

L L

H,L L

Combination areaProduct area

ACME page modeling

Q: what “main” pages do I need in the site?Home, Products, Combinations, Stores

AcmeHome

L

HProducts

LCombinations

L

Stores

L

Q: what other pages do I need?Product detail, Combination detail, ByPrice, BigImages,..

BigImages

Product Page

CombinationDetailBy price

RUNNING CASE

ACME: HomePage

RUNNING CASE

RUNNING CASE

ACME product page

RUNNING CASE

ACME combinationpage

The Acme public siteview


3. Content management and access control




Integrating hypertexts and 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

MODEL

Operation Unit

MODEL

Models a generic external operation, or a built-in content manipulation operationInput from one or more incoming links (at least one is declared as normal link, the others astransport links)Two kinds of output links

OK link if the operation completes correctlyKO link if the operation fails

The predefined WebML units can be enriched by adding custom external operations (e.g. SendMail, …)

Built-in Operations

MODEL

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

Built-in Operations

Delete Unit

Entity

Create Unit

Entity

Modify Unit

Entity

CREATE DELETE MODIFY

Disconnect Unit

relationship

Connect Unit

relationship

CONNECT DISCONNECT

MODEL

In/out flow: create

Create Unit

Entity

value1→ attribute1

value2 → attribute2

OID of the new object

MODEL

KO

OK

Nothing

Example

CreationResults

CREATION RESULTS

FirstName: Celine

LastName: Dion

ArtistCreation

CREATE ARTIST

FirstName:

LastName:

Press OKto create

Celine

Dion

OK

OK

KO

ArtistCreationPage

ArtistEntry CreateArtist

Artist<FirstName := FName><LastName := LName>

FName:FirstNameLName: LastName

CreationResultsPage

Artist

ArtistDetails

OK

KO

In/out flow: modify

Value2 → attribute1 value1 → attribute2

Identifier(s) of the modified object(s)

Modify Unit

Entity

MODEL

KO

OK

Identifier(s) of the object(s) to modify

OIDs of objects to modify

Example:

Result

ModifyArtist

BioEntry

ModifyBio

Artist<BiographicInfo := Bio>

OK

KO

ModifyArtist

EDIT BIOGRAPHYCeline Dion

Celine Dion was born in1968, the youngest offourteen children.

OK

Result

BIOGRAPHY

OK

KO

Celine DionBio: Celine Dion was bornin 1968, the youngest offourteen children.

Artist

BioData

Bio: BiographyField

ModifyArtist

EDIT BIOGRAPHYCeline Dion

OK

Artist

BioData

In/out flow: delete

NothingOIDs of the object(s) to delete

Delete Unit

Entity

MODEL

KO

OK

OIDs of the object(s) to delete

Albums

DeleteAlbum

Album

DeletionError

OK

KO

NotDeleted

Album

DeletionError

NOT DELETED

All the way1999

Let's talk...1997

Sing-a-long1998

Albums

DELETE ALBUMS

OK

KO

All the way

Born in the USA

ImagineLet's talk ...Sing-a-long

Anthology

Bridges to Babylon

Del

AlbumIndex

Album

Albums

DELETE ALBUMS

Imagine

AnthologyBridges to Babylon

Del

Example:

In/out flow: connect

Identifiers of theconnected objects

OIDs of source object(s)to connect

OIDs of destination object(s)to connect

MODEL

KO

OK

Identifiers of theobjects to connect

Note: if the any of the input parameters is a set of OIDs, the operation is applied to each element of the setThe disconnect operation is similar

Connect Unit

relationship role

Example

MODEL

Rev iewPage

° Beatles

* Dion

° Prince

One of the mostromantic andexpressive artistsof the nineties.

Result

First name:CelineLast name:Dion

OK

KO

ARTISTSNEW REVIEW ARTIST

ReviewPage

Rev iew

NewReview

AllArtists

Artist

AssignReview

ArtistToRev iew[Artist.OID = Art ]

[Rev iew.OID = Rev ]

Rev : OID

Art:OID

Result

Artist[OID = Art]

ArtistDetails

Art: Artist.OID

OK

Rev : Rev iew.OIDKO

Rev iew[OID=Rev ]

ReviewDetails

Rev : Rev iew.OID

Select an artist toassign the review: Review :

One of the mostromantic andexpressive artistsof the nineties.

REVIEW

Example/2

MODEL

Artist&AlbumsPage

Artist

ArtistDetails

PublishedAlbums

Album[ArtistToAlbum]

Album

AlbumDetails

AlbumDisconnect

AlbumToArtist

OK

KO

Artist&Albums

Celine Dion

° All the way° Let's talk...° Sing-a-long° These are...

ALBUMS

Artist&Albums

Celine Dion

° All the way° Let's talk...* Sing-a-long° These are...

ALBUMS DETAILSSing-a-long1999

Press OKto remove

OK

Artist&Albums

Celine Dion

° All the way° Let's talk...° These are...

ALBUMS

OK

KO

Acme administrator

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

SolutionUse global parameters stored in the sessionProvide means for setting/getting their value

Global Parameters

Global parameters model site-wide information stored globally or in the user sessionA context parameter is defined by:

NameID 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)

Default value [optional]

Set unit

Unit that allows to SET the value of a parameter

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

Value/OID

ParamName

Get unit

Unit that allows to RETRIEVE the value of a parameter

It is always placed inside a PageIt has only an outgoing link (carrying the value retrieved from the parameter)It has not incoming linksThe retrieved value can be used in other units

Value/OID

ParamName

Example

NewsPage[L]

CountrySelectionPage [L]

CountryIndex

Country Country

CountryData

LocalNews

News[Country2News]

SetCountry

CurrCountry

Country

CountryData

GetCountry

CurrCountry

ProductPage [L]

Country

CountryData

LocalProducts

Product[Country2Product]

Personalization

Personalization has three facets:Access control: login/logout operations for user recognitionSite view assignement: based on the group the user belong to, some site views are accessible (1 or more site view per Group)Content customization: user- or group-dependent content

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

MODEL

User Group1:N 1:N

1:1 1:N

SiteView1:N1:1

user2group

user2defaultGroup

Login/ Logout

A site-view may contain a page allowing users to login

Each secured site-view should allow users to logout

Changing Role (i.e. group) dynamically is allowed

Entry Unit

MODEL

Login

Logout

ChangeGroup

CurrentUser andCurrentGroup

Each WebML project has two predefined global parameters:

CurrentUser: the OID of the currently logged UserCurrentGroup: the OID of the Group of the currently logged user

Login and Logout operations automatically set / unset these two parameters

MODEL

preference

Page personalization (user-level)

•Personalization can be achieved with appropriate data design

userarticles

After login CurrentUser is identified, thus the index shows user’s preferred articles

MODEL

•Hypertext can reflect structure, and thus provide personalization

user article[preference]

Recommendations

CurrentUser

Trolley managementTrolleyPage

User

CurrentUser

Trolley[UserToTrolley]

TrolleyData

DeleteOrderLine

OrderLine

L

OrderLines

GetUser

CurrentUserOK

Album:Album.OID

Artist:Artist.OIDto Artist Page

to Album Page

OrderLine[TrolleyToOrderLine]

NEST Support[OrderLineToSupport]

NEST Album[SupportToAlbum]

NESTArtist[AlbumToArtist]

KO

References

“Building data-intensive Web applications.”By Stefano Ceri, Piero Fraternali, Aldo Bongio, Marco Brambilla, Sara Comai, Maristella Matera, will be published by Morgan-Kaufmann (Jim Gray’s series), December 2002.

www.webml.orgWebML resources (papers, manuals, …)Web modeling compendium & bibliography

www.webratio.comTool can be downloaded for academic use

Software

Web ml