Model-driven design of Web applications

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 applications

Defined in 1998, in use for more than six years

Widely published: Ceri, Fraternali at al. Designing data-intensive Web applications, Morgan Kauffman, Dec. 2002

Adopted in many universities worldwide

Commercially 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 regarded

Relationship roles have user defined names

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

BookAuthor author2book

book2author

Author_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: N

book2author 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-entity

IS-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 technical record. 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 data Using a simple, yet formal, visual notation Enabling 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

Author first name:XXX last name:YYY photo:

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

Ceri Fraternali Versand

HIERARCHICAL

Books&Authors

1. Web Applicat. Ceri Fraternali2. Systems Tannenbaum

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 computed

Each unit exposes input and output parameters

Input is required to compute the unit itselfParameters 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

Author first name:James last name:Joyce photo:

Author[OID=p1]

Book[author2book(p2)]

Book[OID=p3]

Book Title:Ulysses Price:23$ Cover:

Which author’s books? Which book?

Books of YYY

•Ulysses•The Dubliners•Portrait...

Example of links

MODEL

p1 p2 p3

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) selector Input:

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 one specific product

RUNNING CASE

Product

IndexUnit

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

The container is an entity with (optional) selector Input 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

Entry Unit

Unit for describing input forms that allow information submission by the userContent is shipped to other units via outgoing links (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

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 view It 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 a DEFAULT 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: HomePage

RUNNING CASE

RUNNING CASE

ACME product page

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

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 OK

to 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 BIOGRAPHY

Celine Dion

Celine Dion was born in1968, the youngest offourteen children.

OK

Result

BIOGRAPHY

OK

KO

Celine DionBio: Celine Dion was born

in 1968, the youngest of

fourteen children.

Artist

BioData

Bio: BiographyField

ModifyArtist

EDIT BIOGRAPHY

Celine Dion

OK

Artist

BioData

Acme administrator

Trolley managementTrolleyPage

User

CurrentUser

Trolley[UserToTrolley]

TrolleyData

DeleteOrderLine

OrderLine

L

OrderLines

GetUser

CurrentUserOK

Album:Album.OID

Artist:Artist.OID

to 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

Model-driven design of Web applications

Documents

Transcript of Model-driven design of Web applications