Skip to main content
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
        Politecnico di Milano and Web Models Srl
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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   4
                                                  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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil    5
                                                          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”




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   6
                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   7
                                                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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil    8
                                                           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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   9
                                                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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil        10
                                                              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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil        11
                                                                 WebML
Preview of WebML concepts
   Site = Content + Composition + Navigation + Presentation


   entities,                   units, pages,             site views             styles
   relationships               links




                                     navigation +
        content                      composition         user models           presentation

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                  12
                                                                       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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   13
                                                         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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   14
                                                     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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil               15
                                                                 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)




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil          16
                                                                   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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                   17
                                                                       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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                18
                                                                 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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil               19
                                                                     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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil              20
                                                                   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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   21
                                                    WebML
Structure Patterns
   Network skeleton:
                         Entity3                    • Hierarchy skeleton:
                                                              Entity1
          Entity1                    Entity2


   Star skeleton:                                            Entity2


           Entity4                   Entity3
                                                              Entity3

                         Entity1


           Entity5                   Entity2



marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil             22
                                                                  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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                  23
                                                            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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                          24
                                                                                 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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                       25
                                                                        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


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                  26
                                                                             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.




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil         27
                                                                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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   28
                                                  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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil              29
                                                            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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   30
                                                   WebML
Imported attribute
   Import a piece of external information into an entity



                                        male                     female
                                                     husband
                                     lastname                  maritalName




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil              31
                                                                 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)


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil       32
                                                         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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   33
                                                   WebML
Derived relationships: subsetting
   Subsetting existing relationships:


                                     Artist2RecentAlbum
                        Artist                            Album

                                        Artist2Album




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil           34
                                                                  WebML
Derived relationships: concatenation
   Concatenating existing relationship:




           Album                                  Artist

                              CompilationArtist
                       SongAlbum
            Song
                                          SongArtist




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil           35
                                                           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



marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil               36
                                                                      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)




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil       37
                                                               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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   38
                                                         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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   39
                                                  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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   40
                                              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]
  marco.brambilla@polimi.it
  http://home.dei.polimi.it/mbrambil        41
                                                             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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                        42
                                                                                 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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil      43
                                                             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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                    44
                                                                      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)
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil            45
                                                            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...


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                 46
                                                                         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


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil          47
                                                             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]
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil        48
                                                               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]
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil         49
                                                       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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil            50
                                                            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


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil            51
                                                                   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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil           52
                                                                 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
marco.brambilla@polimi.it
                                                       shown
         [B.attr = Param1]
http://home.dei.polimi.it/mbrambil             53
                                                                    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

 marco.brambilla@polimi.it
 http://home.dei.polimi.it/mbrambil            54
                                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil      55
                                                              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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   56
                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   57
                                                   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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil               58
                                                                     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)]
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                59
                                                                      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
 marco.brambilla@polimi.it
        [Relationship(A2B)]
 http://home.dei.polimi.it/mbrambil          60
                                                               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]}
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                   61
                                                                             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]

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil              62
                                                                          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)]
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil             63
                                                                      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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil            64
                                                    WebML
Scroller + index
   Paging the result of a search

                                     t,y




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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                 65
                                                                  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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil           66
                                                    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)




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil       67
                                                      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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil        68
                                                            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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil        69
                                                              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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil          70
                                                               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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   71
                                                     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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   72
                                                         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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   73
                                                              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



 marco.brambilla@polimi.it
 http://home.dei.polimi.it/mbrambil                        74
                                                                                WebML
ACME: HomePage




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   75
                                          WebML
ACME product page




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   76
                                          WebML
ACME combination page




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   77
                                          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)
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil          78
                                                             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


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil     79
                                                             WebML
Types of links
   Contextual links
    • Between units
    • Context transported


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

                                          Voyages           Books




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   80
                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil    81
                                                           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, …)




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   82
                                                   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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   83
                                                  WebML
Built-in Operations

             CREATE                             DELETE                         MODIFY
              Create Unit                       Delete Unit                    Modify Unit




              Entity                            Entity                         Entity


                            CONNECT                           DISCONNECT
                                 Connect Unit                   Disconnect
                                                                Unit




                                 relationship                   relationship
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                  84
                                                                             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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                    85
                                                                               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

 marco.brambilla@polimi.it
 http://home.dei.polimi.it/mbrambil                                  86
                                                                                                                    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




 marco.brambilla@polimi.it
 http://home.dei.polimi.it/mbrambil                   87
                                                                       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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                                           88
                                                                                                                        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
marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                                         89
                                                                                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil   90
                                                    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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil         91
                                                                   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]




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil             92
                                                                        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


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil          93
                                                     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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil               94
                                                                  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]


marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                    95
                                                                                  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)




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil       96
                                                               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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil         97
                                                                 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

marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil             98
                                                                      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




marco.brambilla@polimi.it
http://home.dei.polimi.it/mbrambil                99
                                                                             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)




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