1 / 50

Model-driven design of Web applications

Model-driven design of Web applications. Piero Fraternali, Marco Brambilla 9 novembre 2002 piero.fraternali@polimi.it marco.brambilla@polimi.it. WIS selection!. This presentation contains a selection of the original presentation, specifically made for use in the WIS course!

nan
Download Presentation

Model-driven design of Web applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. http://www.webratio.com

  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. styles units, pages, links, site views navigation + composition + user model presentation WebMLbasic concepts Web application = Structure + Hypertext + Presentation entities,relationships structure

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

  6. 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 Data Modeling: Purpose

  7. MODEL Entity1 Entity2 SubEntity 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) attribute1

  8. MODEL Book Author author2book book2author 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 Author_Book

  9. MODEL Book Author 0..N 1..N 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

  10. MODEL Book Novel Biography Thriller 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..)

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

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

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

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

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

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

  17. MODEL Author first name:XXX last name:YYY photo: Index of Authors All Authors • S. Ceri • P. Fraternali • O.Versand Browse Authors Choose Authors Insert Your Data Books&Authors 1. Web Applicat. Ceri Fraternali 2. Systems Tannenbaum Ceri Fraternali Versand 5/12: go to    1/12 • Fname • Lname Meaning of Content Units DATAUNIT INDEXUNIT MULTIDATAUNIT ENTRYUNIT MULTICHOICE SCROLLERUNIT HIERARCHICAL

  18. MODEL unitX container 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

  19. MODEL unitX entity [selector (par 1, .., parN)] Unit input and output IN OUT • 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

  20. MODEL Author Author Navigation: contextual links source unit target unit • 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)

  21. MODEL Author first name:James last name:Joyce photo: Books of YYY Book Title:Ulysses Price:23$ Cover: • Ulysses • The Dubliners • Portrait... Example of links Which author’s books? Which book? p2 p3 p1 Author [OID=p1] Book [OID=p3] Book [author2book(p2)]

  22. MODEL Author Author Automatic Links source unit target unit A • 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

  23. MODEL Transport Links source unit target unit Book [Author2Book] Author • 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

  24. MODEL DataUnit OID params • Data units • 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)]

  25. RUNNING CASE Information about a onespecific product ACME: data unit inProduct page Product

  26. MODEL IndexUnit selectedOID params • Indexunits: • 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)]

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

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

  29. MODEL Entry Unit params • 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

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

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

  32. MODEL Non contextual links • A non contextual linkis 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) HomePage Book Index

  33. MODEL 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” Book Index HomePage H

  34. MODEL Store Page Books Authors Book Details Landmark pages Store Page Books • 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 L Authors Book Details

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

  36. MODEL Site Views • A siteview is a set of pages and/or areas forming a coherent view of the site • Multiple siteviews can be defined on the same data model • Different siteviews 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

  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. RUNNING CASE ACME: HomePage

  39. RUNNING CASE ACME product page

  40. The Acme public siteview

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

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

  43. MODEL Delete Unit Modify Unit Create Unit Entity Entity Entity Disconnect Unit Connect Unit relationship relationship Built-in Operations CREATE DELETE MODIFY CONNECT DISCONNECT

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

  45. Example

  46. MODEL Modify Unit KO OK Entity In/out flow: modify Identifier(s) of the object(s) to modify value1  attribute2 Value2  attribute1 Identifier(s) of the modified object(s) 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

More Related