1. Model-driven design of Web applications Piero Fraternali, Marco Brambilla 9 novembre 2002 piero.fraternali@polimi.it marco.brambilla@polimi.it

2. 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.

3. 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,...

4. WebML basic concepts Web application = Structure + Hypertext + Presentation structure entities, relationships navigation + composition + user model units, pages, links, site views presentation styles

5. http://www.webratio.com 1. Data Modelling Model-driven design of Web applications Piero Fraternali, Marco Brambilla 9 novembre 2002 piero.fraternali@polimi.it marco.brambilla@elet.polimi.it

6. Data Modeling: Purpose Q: what are the objects published in the site, what are their properties, how are they related? A: Structure model primitives Entity: a class of objects in the application domain Attribute: a property of an entity Relationship: a connection between entities IS-A hierarchy: for classification and grouping MODEL

7. Entity and Relationship Entities are boxes, labelled with the entity name in the upper half of the box Attributes are listed in the lower half of the entity box (optional) Relationships are represented by a solid line between two entity boxes ISA hierarchies are denoted by an arrow pointing from the sub-entity (more specific concept) the the super-entity (general concept) Entity1Entity2 SubEntity attribute1 MODEL

8. 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 roles Role 1: author2book Role 2: book2author BookAuthor author2book book2author Author_Book MODEL

9. Relationship cardinality For each direction of the relationship, maximum and minimum cardinality contraints can be specified E.g. relationship Author_Book author2book 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

10. 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

11. 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

12. ACME Complete structure model (initial version) Store Location: string Map: image URL: URL Email: URL Product Name: string Code: integer Price: float Description:text Thumbnail:image Combination Name: string Price: float Description:text Photo:image Tech record Colors:image Size: text Big image Description: text Photo:image RUNNING CASE 0:N 1:1 0:1 0:N 1:1

13. http://www.webratio.com 2. Hypertext Modelling Model-driven design of Web applications Piero Fraternali, Marco Brambilla 9 novembre 2002 piero.fraternali@polimi.it marco.brambilla@elet.polimi.it

14. 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

15. 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

16. DATAUNIT INDEXUNITMULTIDATAUNIT ENTRYUNIT SCROLLERUNIT entity [Selector] Content: instances of an entity Basic Content Units MODEL entity [Selector] MULTICHOICE entity [Selector] Selector: set of conditions HIERARCHICAL entity [Selector]

17. DATAUNIT INDEXUNITMULTIDATAUNIT 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 Fraternali 2. Systems Tannenbaum

18. 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 entity Instances of an Entity that meet a selection condition called selector unitX container MODEL

19. 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 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

20. 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) Author MODEL source unittarget unit

21. 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 p2p3

22. 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 Author MODEL source unittarget unit A

23. Transport Links Author Book [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 unittarget unit

24. DataUnit Data units ONE SINGLE INSTANCE Publish information about ONE SINGLE INSTANCE The container is an entity with (optional) selector Input: OID of the object to be published, OR Parameters 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

25. ACME: data unit in Product page Information about a one specific product RUNNING CASE Product

26. IndexUnit Index units: (SET OF OBJECTS) Publish an index of elements (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

27. Examples No input links: all objects shown Input parameter: OID of the source object of the relationship role, all related object are shown EntityB [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

28. ACME case: index unit in Products page A simple index is provided to the user Users can access products by clicking on index elements RUNNING CASE Product selOID

29. 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 tag and the associated submit button MODEL params

30. 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 MODEL

31. 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 Login Book Index Catalog MODEL

32. A non contextual link is a link between pages No context (information) is transported The user can browse from a page to another one via an anchor (e.g., >>Books ) Non contextual links HomePageBook Index MODEL

33. 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 MODEL

34. 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

35. 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 MODEL Area

36. 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 MODEL

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

38. ACME: HomePage RUNNING CASE

39. ACME product page

40. The Acme public siteview

41. http://www.webratio.com 3. Content management and access control Model-driven design of Web applications Piero Fraternali, Marco Brambilla 9 novembre 2002 piero.fraternali@polimi.it marco.brambilla@elet.polimi.it

42. 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

43. Built-in Operations Delete Unit Entity Create Unit Entity Modify Unit Entity CREATEDELETEMODIFY Disconnect Unit relationship Connect Unit relationship CONNECTDISCONNECT MODEL

44. In/out flow: create Create Unit Entity value1  attribute1 value2  attribute2 OID of the new object MODEL KO OK Nothing

45. Example

46. 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

47. Example:

48. Acme administrator

49. Trolley management

50. 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.org WebML resources (papers, manuals, …) Web modeling compendium & bibliography www.webratio.com Tool can be downloaded for academic use