webml: model-driven design of web applications
TRANSCRIPT
![Page 1: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/1.jpg)
WebML: Model-driven design of Web Applications
Massimo TisiStefano Ceri, Piero Fraternali, Aldo Bongio, Marco Brambilla, Alessandro Bozzon
![Page 2: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/2.jpg)
2
Massimo Tisi
WebML
• WebML: Web Modeling Language Structured approach for the design of Data-intensive Web applications Book: “Designing Data-intensive Web Applications”, Ceri et Al., 2002 Patent in Europe and U.S.
![Page 3: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/3.jpg)
3
Massimo Tisi
• WebRatio A commercial tool based on WebML A university spin-off: WebModels
• Example: Acer-EMEA www.acer-euro.com
37 countries
22 multi-lingual applications
>600 page templates
>3500 queries from design to deployment in 8 weeks
WebRatio
![Page 4: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/4.jpg)
4
Massimo Tisi
• Data-intensive Web site design and implementation are complex processes based on methodologies borrowed from
different sectors involving different actors (DB, software eng.,
designers...)• Complexity of modern Web applications (e.g.,
multi-device output)• Always evolving
standards best practices architectures
Motivations
SOA SWRIA
…
![Page 5: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/5.jpg)
5
Massimo Tisi
• WebML provides a structured approach to the design of Data-intensive Web sites navigational interface browsing and management of data
• A set of domain specific models helps designers in high-quality Web sites production
• Separation of concerns is enforced database design application design business logic development presentation and style design
WebML Purpose
![Page 6: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/6.jpg)
Massimo Tisi
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
![Page 7: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/7.jpg)
Massimo Tisi
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
![Page 8: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/8.jpg)
8
Massimo Tisi
Data Intensive Web Applications
structure + derivation hypertext presentation
entities,relationships
units, pages, links site views styles
The WebML models
![Page 9: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/9.jpg)
9
Massimo Tisi
Simplified Entity-Relationship model Binary relationships between entities IS-A hierarchies Simple typed
attributes in entities Derivation model
can be applied forredundant data
Structure Model
![Page 10: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/10.jpg)
Massimo Tisi
Derivation Model
• Redundant data can be easily specified using a WebML-OQL (Object Query Language).
• E.g.: Author.BooksNumber = count(self.Author2Book) BestSeller := Book where Book.Sales > 50,000
BookAuthor
BestSeller
![Page 11: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/11.jpg)
Massimo Tisi
Hypertext Model
• Goals • Modelling at a high level:
• the front-end of a dynamic Web application • the interactions with the back end business logic and data
• Using a simple visual notation• Enabling automatic generation of dynamic page templates and business logic java classes
![Page 12: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/12.jpg)
Massimo Tisi
Content Units
• A WebML unit is the atomic information publishing element
• It is a “view” defined upon a container of objects.
• E.g.: All the instances of an entity Instances of an entity that meet a selection condition called selector
unitX
container[selector]
![Page 13: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/13.jpg)
13
Massimo Tisi
DATAUNIT
INDEXUNIT
To publish information about A SINGLE object(e.g. Forum Message)
To publish a list of objects (e.g. Forum Messages)
Hypertext: examples of Content Units
Forum Message Sender:XXX Text:YYY Timestamp:
Index of Messages
1. WebML?2. WebRatio?3. RIA?
Index Unit
Content
Content
Data Unit
![Page 14: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/14.jpg)
Massimo Tisi
DATAUNIT INDEXUNIT MULTIDATAUNIT
ENTRYUNIT SCROLLERUNIT
entity[Selector]
Basic Content Units
entity[Selector]
entity[Selector]
entity[Selector]
MULTICHOICE
entity[Selector]
HIERARCHICAL
entity[Selector]
![Page 15: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/15.jpg)
Massimo Tisi
DATAUNIT INDEXUNIT MULTIDATAUNIT
ENTRYUNIT SCROLLERUNIT
Meaning of Content Units
Author first name:XXX last name:YYY photo:
Index of Authors
• I. Asimov• M. Twain• C. Dickens
All Authors
Browse Authors
5/12: go to
1/12
Insert Your Data
•Fname•Lname
MULTICHOICE
Choose Authors
Asimov Twain Dickens
HIERARCHICAL
Books&Authors
1. I, robot Asimov2. Hard times Dickens
![Page 16: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/16.jpg)
Massimo Tisi
Content units computation
• A unit may need some “context” to be computed• Each unit exposes input and output parameters
• A content unit is not computed until its needed context is available Parameters pre-defined for the unit + Other parameters required by the selector of the unit
• A content unit is recomputed (and eventually redrawn) each time its context changes
• Output can be used to compute other unit(s)
unitX
entity[selector (par 1, .., parN)]
IN OUT
![Page 17: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/17.jpg)
17
Massimo Tisi
• A Page is a structured container of units Possibly structured in and/or sub-pages Permits one to cluster related information for
more efficient communication
E.g.:
The index of messages and the selected message are shown together in the same page
Hypertext: Pages
![Page 18: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/18.jpg)
Massimo Tisi
Operation Unit
• Models a generic operation
• Built-in operation units: Data manipulation Session context management User authentication ...
• The predefined WebML units can be enriched by adding custom external operations (e.g. SendMail, …)
![Page 19: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/19.jpg)
Massimo Tisi
Data Management Operations
Delete Unit
Entity
Create Unit
Entity
Modify Unit
Entity
CREATE DELETE MODIFY
Disconnect Unit
relationship
Connect Unit
relationship
CONNECT DISCONNECT
![Page 20: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/20.jpg)
Massimo Tisi
Operation units: computation
Create Unit
Entity
value1→ attribute1
value2 → attribute2
OID of the new object
KO
OK
Nothing
• An operation unit is computed each time an incoming link is activated Exception for transport links
• Some operation units can be activated also by other events
![Page 21: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/21.jpg)
Massimo Tisi
(Normal) links
Semantics of links:
•Allowing the user to move from one place to another• rendering by means of anchors or submit buttons
• Transporting information from one place to another• context propagation by parameters coupling
•Activating an operation
Outgoing links from operation units two labels:•OK link if the operation completes correctly•KO link if the operation fails
AuthorAuthor
source unit target unit
![Page 22: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/22.jpg)
Massimo Tisi
Transport Links
AuthorBook
[Author2Book]
•A transport link has a context that the source unit makes available to the target unit immediately after its computation, without user intervention
• The user cannot change the context and therefore the link is not rendered with an anchor
source unit target unit
![Page 23: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/23.jpg)
Massimo Tisi
Automatic Links
•An automatic link has both the behaviors of a normal link and a transport link• makes a context immediately available to the target unit• Is rendered and can be selected by the users for subsequent activations
AuthorAuthor
source unit target unitA
![Page 24: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/24.jpg)
24
Massimo Tisi
• E.g.: creation of a message
Hypertext: WebML operations
![Page 25: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/25.jpg)
25
Massimo Tisi
• 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
Hypertext: Siteviews
![Page 26: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/26.jpg)
26
Massimo Tisi
WebML: Other Constructs
AreasTransactionsMaster PagesAlternativesGlobal Parameters
![Page 27: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/27.jpg)
Massimo Tisi
WebRatio
Functionalities:• Structure model design• Data derivation (Derivation Wizard)• Hypertext model design• Consistency checks (warnings)• Structure Mapping onto a datasource• Units positioning in the pages
Grid for main content Unlimited named locations
• Automatic web site generation with presentation styles HTML + Custom Tags + CSS
• Compatibility with best selling tools for presentation editing E.g., WebML extensions for Dreamweaver
![Page 28: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/28.jpg)
28
Massimo Tisi
WebRatio
![Page 29: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/29.jpg)
29
Massimo Tisi
Web Ratio: a short demo
![Page 30: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/30.jpg)
30
Massimo Tisi
Ongoing work: Event Modeling
RIAs enforce decoupling of user interaction and browser requests
• Allow asynchronous polling (persistent connection technologies), non-interruptive application interaction
• Enable server-to-client communication (server PUSH)
• Make event-driven Web applications reality, e.g.: instant messaging, shared calendars, online
auctions
![Page 31: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/31.jpg)
31
Massimo Tisi
Extended WebML Notation for event modeling
Data Model Extensions application-specific event types are
represented by adding new entities to the data model
all event types extend the predefined Event entity
Specific event types can have relationships with application domain entities
Composition/Navigation Model Extensions We extended the WebML hypertext model
to support event notifications by means of two WebML operations:
• send event: send an event notification to a (set of) recipient(s);
• receive event: receive the notification and trigger a reaction;
![Page 32: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/32.jpg)
Massimo Tisi
Extension of Data Design to capture processes
• Based on the WfMC conceptsActivityType
Name
User
UsernamePassword...
Group
Name...
0:N
1:1
Activity Instance
StatusStartTimeStampEndTimeStamp
Case
StatusNameStartTimeStampEndTimeStamp
0:N 0:N
0:N1:1 1:N
Assigned To
1:1
0:N
1:1
Process
Name1:1 1:N
0:N
1:N
Default
Assigned To
Type
PartOf
PartOf
RefundingRequest
QuantityOldPriceNewPrice ...
0:N
0:N RelatedTo
Distributor
EmailSubscribedToML
0:N 1:1
RequestToDistributor
ProductBrand
NameDescription
Product
NameDescriptionImageTechnicalDetails
0:N
1:1
0:N 1:1
RequestToProduct
0:N 1:1
Performed by
![Page 33: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/33.jpg)
Massimo Tisi
Extension of Hypertext Design to capture processes
Activity delimiters
Start Activity End Activity
ActivityName ActivityName
Start Activity End Activity
ActivityName ActivityName
Requests
W
RefundingRequest[ActivityType="Approval"]
[User=CurrentUser]
CurrentUser
Assign
A
RefundingRequest[Activity="Approval"][User=CurrentUser][Case=CurrentCase]
ReqID IfAmount
[true]
[false]
Amount>1000$
Process delimiters
WF indexes Assignements Conditions
![Page 34: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/34.jpg)
34
Massimo Tisi
• Semantic Web Services (SWS) have a great potential easy web service discovery automatic web service integration easy interoperability …
• Till now SWS are rarely used in practice annotations are an extra cost
• Software Engineering (SE) tools and methodologies can push the use of SWS model driven development techniques can be improved
to include annotation and generate Semantic Web Services
Semantic Web Services
![Page 35: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/35.jpg)
35
Massimo Tisi
Business process modeling notations
SWSWebMLS
eman
tic Web S
ervice
Ap
plicatio
n
The most complete solution presentedat phase-II of
![Page 36: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/36.jpg)
36
Massimo Tisi
MDA – WebML Aims
• Integration with other modelling languages / models, tools (esp. UML, WFMC, BPEL, MDWEnet) Production of a (part of) WebML model from other
diagrams Reverse transformation Manage correspondences and check consistency
• Current approach: Ecore metamodel ATL transformations ATL HOTs
![Page 37: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/37.jpg)
37
Massimo Tisi
Testing, Debugging, Metrics
• Code generation testing: Transformation for test set generation Coverage metrics
• Debugging Adding traceability to the code-generation
transformation Adding a debugging environment to WebRatio
• Metrics Transformation for functional size metrics
![Page 38: WebML: Model-driven design of Web Applications](https://reader031.vdocument.in/reader031/viewer/2022013000/61c9db05a3e2844ce07c8f37/html5/thumbnails/38.jpg)
38
Massimo Tisi
Thanks