IFML: Building the front end of
Web and Mobile applications with OMG’s
Interaction Flow Modeling Language
Marco Brambilla
...
The modeling approach
What is a model?
Models
Mapping Feature A model is based on an original (=system)
Reduction Feature A model only reflects ...
CIM, PIM, PSM
Modeling Levels
Computation independent (CIM): describe requirements and
needs at a very abstract level, wit...
Modeling levels - CIM
Eg., business process
Modeling levels - PIM
Eg., business object description and constraints
Modeling levels - PSM
How the functionality in the PIM is realized on a certain platform
Using a UML-Profile for the selec...
The UI Modeling Problem
User interface and interaction development
is a painful phase of software process
… for everybody!
… not only for the Web!...
Costly and
Inefficient process
Complexity of
user interfaces (UIs)
Ineffective
tools
Manual
development
No MDE
technology
...
No model
driven
engineering
Platform independent
description of UIs
Focused on user
interactions
No definition of
graphics...
User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)...
13
We were going to make them an
offer they couldn’t refuse.
In less than 2 years
(a record in OMG!), we obtained
approval...
User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)...
The Interaction Flow
Modeling Language
IFML Objectives
Binding to Persistence
Layer
Navigation Path
Binding to
Business Logic
Content
Event
IFML Objectives: Content
Content
IFML Objectives: Navigation Path
IFML Objectives: Navigation Path
IFML Objectives: Events
Mouse Over
IFML Objectives: Events
IFML Objectives: Binding to business logic
IFML Objectives: Binding to business logic
IFML Objectives: Binding to persistence
Content
Book
Title: string
Cover: file
List Price: currency
Price: currency
Save: ...
IFML Overview - Extensibility
IFML Essentials
Multiple views for the same application
Mobile and multi-device applications
Visualization and input of data, and producti...
IFML by example
Basic navigation flow between ViewComponents
IFML by example
Basic navigation flow between ViewComponents
Artists
List
Artists
Artist
Event
View
Component
View Contain...
IFML by example
Album
Search
«Window» AlbumSearch
Album
List
«Window» Albums
Album
Details
«Window» Album
«ParameterBindin...
IFML by example
Nesting of ViewContainers
Tagged ViewContainers (XOR)
Artist and
Album List
Albums&Artists
Albums&Artists
...
ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
IFML – adding details to ViewComponents...
Joint use of IFML and other modeling languages:
• DataBinding to classes and attributes of UML Class Diagrams
• Also with ...
IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
Joint use of IFML and other modeling languages
Connection of Actions to back-end business logic as
• UML methods of classe...
IFML by example
Actions
Album
List
Albums
Album
Deletion
«ParameterBindingGroup»
SelectedAlbum  AnAlbum
«Behaviour»
Album...
OnSelect event
OnSubmit event
IFML – subtyping events
Throwing
events
Catching
events
.. And as many others as you want!
IFML – subtyping components
IFML by example
ActivationExpression, SubmitEvent, Event generation
MessageList
MailBox
«Menu» Message toolbar
«Parameter»...
IFML concrete syntax by example
intra-component events and flows
[L] Message Writer
Send
«Form» Message Writer
«SimpleFiel...
IFML concrete syntax by example
<<Details>>
Confirmation
Message
Confirmation Page
Action
Confirmed
Capturing of custom ev...
IFML example – online payment
Product
List
Shopping Cart
«List»
Customer
Information
Customer Information
«Form»
Execute
t...
IFML concrete syntax – modules
IFML Modules - definition
Execute
the
payment
«ParameterBindingGroup»
Name  Name
«Paramete...
IFML concrete syntax – modules
IFML Modules - usage
Shopping Cart
Checkout
«ParameterBindingGroup»
Total Amount
Confirmat...
Multiple aspects modeling – 1
(business and requirements)
UML Use Case BPMN process
UML Sequence
IFML
UML Statechart
Handl...
Integration with UML Use Cases
Each use case can be described by
A business process
A plain UI description in IFML
Some UM...
Integration with BPMN
The UI of each activity
can be described by
An IFML module
Some UML dynamic
diagrams (e.g.,
activity...
Example of UML - IFML mapping
IFML Model
<< Use Case>>
Handle Rental
xUMLUseCaseDiagram
<<xUML Actor>>
Sales Clerk
<< Use ...
Multiple aspects modeling – 2
(implementation and architecture)
UML Sequence
UML Deployment
IFML
UI Mockup models
Description of deployment architecture
UI is just one facet of system design
Often need to position it in a broader archit...
51
UML
Sequence
Diagrams
Tiers and
calls
Explicit
description of
interactions
between tiers
• Manual specification of BPMN process model
• Automatic transformation of BPMN to WebML
• Possible manual refinement of W...
The generated model artifacts
Executability experiment within OMG
IFML
editor
IFML
code
generator
UML
editor
Alf editor
+ parser
Alf
compiler
fUML
model...
An official metamodel of the language which describes the semantics of and
relations between the modeling constructs
A gra...
Static aspects
Also: interchange with profile-based diagrams.
The UML Profile for IFML
«page»
AlbumSearch
«page»
Albums
«p...
BPMN and/or UML editor
Tight and seamless integration between different modeling tools
• Thanks to XMI interchange format,...
Joint usage of IFML with other MDA languages can be devised:
• SysML
• SoaML
• …
… and also with other frameworks (e.g., M...
The Metamodel
-- excerpts --
InteractionFlowModel
IFML Model
ViewElements
Referencing Content and Behaviour
Events
Context
Examples
Typical email interface
Usability
Friendliness
Complex interaction flows
Example 1: online mailer (e.g., Gmail)
[D] [L] MailMessages
[XOR] MAIL Top
[L] Contacts
Top down design from containers
Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] ...
Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] ...
«List» MBoxList
«List» MessageList
«DataBinding» MailMessage
«ConditionalExpression»
self.mm2MailMessageGroup = MailBox
«D...
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
MailBox
Labels
«Ac...
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MessageSelection
«Modeless» Tag Chooser
«M...
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
«Modeless» Tag Cho...
[XOR] MessageSearch
[D] Search
Message keyword
search
«Modeless» FullSearch
Message Full
Search
Show search options
Search...
[XOR] MessageSearch
[D] Search «Modeless» FullSearch
Search mail
MailBox
«Form» Message Keyword Search «Form» Message Full...
Message Details
Message Details
[L] Message Writer
Message Writer
Send
[XOR] Message Reader
Reply
Forward
ReplyAll
Send
«A...
«Form» MessageWriter
Search mail
«RichTextSimpleField» Body
«RichTextToolBar» Toolbar[ClientSide]
ApplyFormat
[ClientSide]...
Typical mobile UI
Simple app
Complex interactions
Touch events
Example 2: Instagram
AutoMobile FP7 SME
EU research project...
• Media (photos)
• Users
• Activity
• Tag
Content
Sign in
[H] Start Page
Register Sign In
Sign InRegister
Top level – app structure
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh Update...
How to avoid duplication
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh Update
...
Media Viewer
Media.postedBy: User (profilePhoto, userName)
Media(postTime)
 Media
- file
 PostedBy (User)
- profilePhoto...
<<Module>> MediaViewer
Media Viewer model
«NestedList» MediaViewer
«DataBinding» Media
«NestedDataBinding» likedBy
«Nested...
Other renderings
Other renderings
 Contains (Comment)
 QualifiedBy (Tag)
SeeSameTag
event
Detailed MediaViewer
«NestedList» MediaViewer
<< Modal >> User Medi
Menu
<< Modal >> LoggedUser
MediaMenu
«DataBinding» Me...
User Profile UI
Upper section
Lower
section
Commands
Profile menu
ProfileData ProfileData
User Profile – map and photos of you
MediaMap PhotosOfUser
<<XOR>> ProfileViewer
<<Module>> User
<<ViewContainer>> ProfileData
Overall view of User Profile
[XOR] <<ViewContainer>> U...
<<Module>> MediaTiled
Media tiles
<<ViewContainer>> MediaAsTiles
<<ModuleReference>>
MediaViewer
«List» MediaTiles
«Visual...
93
Classical ecommerce web site
Extensive coverage of products and details (huge site!)
But patterns of interaction are mu...
Figure 9.27
Search bar
High-level site structure
<<siteview>> eBayWebInterface
[L] <<page>> DailyDeals[H][L] <<page>> Home [L] <<area>> CustomerS...
Categories
All Categories – right hand side dropdown
Search with autocompletion
LoggedIn User Menu
Overview
Master Page
Register
Sign in
«Details» UserName
«DataBinding» Context
«DataBinding»
Context
«D...
Search
options
«Form» Left Search Single Options
«ScrollableList»
Products
«Simplefield» MinimumPrice
«Simplefield» Maximu...
The WebRatio tool
Drawing vs. modeling
Tool support for MDE/MDD
An Eclipse-based development environment allowing:
Modeling: ER + IFML + BPMN
100% code generation of standard JEE applica...
WebRatio is
now at 7th release
on the market since 2001
WebRatio customers
130+ companies and 500+ commercial users
mainly...
You capture business requirements in abstract,
technology independent models
BPMN + IFML
WebRatio – Step 1
Business
User
W...
You customize the environment by defining your own
generation rules
HTML 5 + CSS + Java
WebRatio – Step 2
Layout
Designer
...
You get a tailored, yet standard, Java Web application
with no proprietary runtime
Code generation
WebRatio – Step 3
WebRa...
Get the application
Web
App
DBMS
Browser
SOA
Custom
Information
System
Standard execution environment
Standard Java
Applic...
Involve business users in the development process and
converge quickly to the target
Agile, quick prototyping
Requirement
...
Model
Generation
Rules
Generation
Engine
Do not change the generated application code
Touch the generation rules instead
T...
Case Studies
Kinds of application
Corporate
Operations
Human Capital
Management
Product Life Cycle
Management
Customer
Relationship
Man...
B2C + CMS Web applications initially for 14 EU countries
Corporate news, Product technical & commercial data, Service &
Pa...
Size & effort
Class Dimension Value
Number of localized B2C web sites 14
Number of main CMS applications 4 (Admin, News, P...
Size & effort
DEGREE OF AUTOMATION
Number of manually written SQL statements 17(SQL constraints)
Percentage of automatical...
On the positive side:
Almost 80% of the delivery effort concentrates in the phases of
data design, hypertext design and pr...
On the negative side..
Acer estimates that it took from 4 to 6 months to have fully
productive developers with MDD, IFML, ...
Maintenance effort
Served Contries and Applications
4 4 4 5 5
17
24
32
41
56
17
21
24
28
31
0
10
20
30
40
50
60
2001 2002 ...
• Public company owned by the City of Turin in Italy
• Local public transport serving 190 million passengers every
year.
•...
• Multi-utility company buying and selling wholesale electric
power.
• Integrated Energy Management System that replaced i...
• Banking (UniCredit)
• BPM + SOA + Web interfaces
• Crucial points: modularization, multiple models integration,
multiple...
• Models integration
• Large applications with strong need for coherence and
standardized paradigms
• Cooperatives, banks,...
Components and pages per project
1"
10"
100"
1000"
10000"
100000"
10" 100" 1000"
Number'of'units'
Number'of'pages'
Components per page (avg)
0"
0.02"
0.04"
0.06"
0.08"
0.1"
0.12"
0.14"
0.16"
0.18"
0.2"
30" 300" 3000"
Effo
r
t&(man/days&per&unit)&
Effo
r
t&per&pro...
Man/days per page
0"
0.02"
30" 300" 3000"
r
Effo t&per&project&(man/days)&
0"
0.2"
0.4"
0.6"
0.8"
1"
1.2"
30" 300" 3000"
E...
Tool usage stats
Conclusion: innovation eco-system
Research
(Research group
at Polimi)
Method,
Language
and Platform
Spin-off
(WebRatio)
Cu...
Some Ads
“Model Driven Software
Engineering in Practice”.
Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA, 2012
www.modeldr...
S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera: Designing Data-
Intensive Web Applications, Morgan-K...
Marco Brambilla
marcobrambi
marco.brambilla@polimi.it
Thanks!
Upcoming SlideShare
Loading in …5
×

IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. A standard of Object Management Group (OMG). By Marco Brambilla

53,928 views

Published on

This tutorial focuses on the Domain-specific Language (DSL) called IFML, which has been adopted as a standard by OMG in March 2013. The Interaction Flow Modeling Language (IFML) is designed for expressing content, user interaction and control behaviour of the front-end of software applications, as well as the binding to the persistence and business logic layers. IFML is the missing piece for modeling the front end of software applications and perfectly complements other modeling dimensions in broad system modeling projects. Therefore, IFML works best when integrated with other modeling languages in the MDA suite, such as UML and BPMN. This tutorial illustrates the basic concepts of IFML, presents the design best practices and integration with other modelling languages, and discusses some industrial experiences (also featuring quantitative measures of productivity) achieved by the companion tool WebRatio. At the end of the tutorial, attendees will get a general knowledge about IFML (they will be able to design simple models and to derive models from existing interfaces), will be able to associate front-end design with system modelling at large, will see the associated MDE tool WebRatio at work, and will get a glimpse of real-life industrial applications developed for large enterprises. This will let them appreciate the advantages of a model-driven development approach at work within large-scale industrial project.

The tutorial is aimed at both industrial and academic attendees, including Ph.D. students. Prerequisite for attending the tutorial is a general knowledge about the bases of model-driven development, software engineering, and some general purpose modelling languages like UML.

Published in: Technology

IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. A standard of Object Management Group (OMG). By Marco Brambilla

  1. 1. IFML: Building the front end of Web and Mobile applications with OMG’s Interaction Flow Modeling Language Marco Brambilla marco.brambilla@polimi.it @marcobrambi
  2. 2. The modeling approach
  3. 3. What is a model? Models Mapping Feature A model is based on an original (=system) Reduction Feature A model only reflects a (relevant) selection of the original‘s properties Pragmatic Feature A model needs to be usable in place of an original with respect to some purpose ModelrepresentsSystem Purposes: • descriptive purposes • prescriptive purposes
  4. 4. CIM, PIM, PSM Modeling Levels Computation independent (CIM): describe requirements and needs at a very abstract level, without any reference to implementation aspects Platform independent (PIM): define the behavior of the systems in terms of stored data and performed algorithms, without any technical or technological details Platform-specific (PSM): define all the technological aspects in detail
  5. 5. Modeling levels - CIM Eg., business process
  6. 6. Modeling levels - PIM Eg., business object description and constraints
  7. 7. Modeling levels - PSM How the functionality in the PIM is realized on a certain platform Using a UML-Profile for the selected platform, e.g., EJB
  8. 8. The UI Modeling Problem
  9. 9. User interface and interaction development is a painful phase of software process … for everybody! … not only for the Web! UI Modeling Problem
  10. 10. Costly and Inefficient process Complexity of user interfaces (UIs) Ineffective tools Manual development No MDE technology The UI Design Problem
  11. 11. No model driven engineering Platform independent description of UIs Focused on user interactions No definition of graphics and styles Reference external models The UI Design solution: IFML
  12. 12. User interaction has been overlooked in software engineering standards Hence the Interaction Flow Modeling Language (IFML) Standardization gap
  13. 13. 13 We were going to make them an offer they couldn’t refuse. In less than 2 years (a record in OMG!), we obtained approval of the IFML standard The Object Management Group
  14. 14. User interaction has been overlooked in software engineering standards Hence the Interaction Flow Modeling Language (IFML) In less than 2 years (a record in OMG!), we obtained approval of the beta IFML standard Version 1.0 due to come out in these weeks Standardization gap
  15. 15. The Interaction Flow Modeling Language
  16. 16. IFML Objectives Binding to Persistence Layer Navigation Path Binding to Business Logic Content Event
  17. 17. IFML Objectives: Content Content
  18. 18. IFML Objectives: Navigation Path
  19. 19. IFML Objectives: Navigation Path
  20. 20. IFML Objectives: Events Mouse Over
  21. 21. IFML Objectives: Events
  22. 22. IFML Objectives: Binding to business logic
  23. 23. IFML Objectives: Binding to business logic
  24. 24. IFML Objectives: Binding to persistence Content Book Title: string Cover: file List Price: currency Price: currency Save: currency Rating: integer ………
  25. 25. IFML Overview - Extensibility
  26. 26. IFML Essentials
  27. 27. Multiple views for the same application Mobile and multi-device applications Visualization and input of data, and production of events Components independent of concrete widgets and presentation Interaction flow, initiated by the user or by external events User context: the user status in the current instant of the interaction (position, history, machine, platform,…) Modularization of the model (design-time containers for reuse purpose) User input validation and constraints, according to OCL or other existing constraint languages Covered aspects
  28. 28. IFML by example Basic navigation flow between ViewComponents
  29. 29. IFML by example Basic navigation flow between ViewComponents Artists List Artists Artist Event View Component View Container ParameterBinding«ParameterBindingGroup» SelectedArtist  AnArtist
  30. 30. IFML by example Album Search «Window» AlbumSearch Album List «Window» Albums Album Details «Window» Album «ParameterBindingGroup» Title  AlbumTitle Year  AlbumYear «ParameterBindingGroup» SelectedAlbum  AnAlbum «Form» «List» «Details»
  31. 31. IFML by example Nesting of ViewContainers Tagged ViewContainers (XOR) Artist and Album List Albums&Artists Albums&Artists Artist Details Artist Album Details Album [XOR] Album or Artist «ParameterBindingGroup» SelectedAlbum  AnAlbum «ParameterBindingGroup» SelectedArtist  AnArtist Select Artist Select Album
  32. 32. ViewComponentParts: • Data binding • Parameters Types of ViewComponents (<<List>>) IFML – adding details to ViewComponents «DataBinding» MailMessage «ConditionalExpression» self.mm2MailMessageGroup = MailBox «List» Message List «Parameter» MailBox : MailBox
  33. 33. Joint use of IFML and other modeling languages: • DataBinding to classes and attributes of UML Class Diagrams • Also with other content models, such as: Entity-Relationship, Ontologies, … Data binding
  34. 34. IFML by example Actions Album List Albums Album Deletion «ParameterBindingGroup» SelectedAlbum  AnAlbum
  35. 35. Joint use of IFML and other modeling languages Connection of Actions to back-end business logic as • UML methods of classes • whole UML dynamic diagrams – activity diagram, sequence diagram, state chart diagram, … Dynamic Behaviour
  36. 36. IFML by example Actions Album List Albums Album Deletion «ParameterBindingGroup» SelectedAlbum  AnAlbum «Behaviour» Album.Delete
  37. 37. OnSelect event OnSubmit event IFML – subtyping events Throwing events Catching events
  38. 38. .. And as many others as you want! IFML – subtyping components
  39. 39. IFML by example ActivationExpression, SubmitEvent, Event generation MessageList MailBox «Menu» Message toolbar «Parameter» MessageSet Delete Archive Report MoveTo Labels «ActivationExpression» not MessageSet.isEmpty() MessageSelection Delete Archive Report «ParameterBindingGroup» SelectedMessages  MessageSet «ParameterBindingGroup» SelectedMessages  MessageSet «List»
  40. 40. IFML concrete syntax by example intra-component events and flows [L] Message Writer Send «Form» Message Writer «SimpleField» to: String «SimpleField» cc: String «SimpleField» bcc: String «SimpleField» subject: String «SimpleField» body: String «Parameter» State «SimpleField» attachment: … Save Add cc Add bcc Edit Subject Add attachment Reply to all Reply Forward Discard «ActivationExpression» State <> “Forward” Send Save «ActivationExpression» State = “Reply” or State = “Reply All” «ParameterBindingGroup» “Re:” + subject  subject from  to cc  cc body  body “Reply All”  State «ParameterBindingGroup» “Re:” + subject  subject from  to cc  cc body  body “Reply All”  State «ParameterBindingGroup» “Fw:” + subject  subject body  body “Forward”  State «ActivationExpression» State <> “Reply” «ActivationExpression» State <> “Reply All” Action Confirmed Action Confirmed
  41. 41. IFML concrete syntax by example <<Details>> Confirmation Message Confirmation Page Action Confirmed Capturing of custom events Note: typical problem of event-based systems (termination, …)
  42. 42. IFML example – online payment Product List Shopping Cart «List» Customer Information Customer Information «Form» Execute the payment Checkout «ParameterBindingGroup» Name  Name Payment Information Payment Information «Form» «ParameterBindingGroup» Name  Name CreditCard  CC Confirmation Confirmation Message «Details» «ParameterBindingGroup» Total Amount
  43. 43. IFML concrete syntax – modules IFML Modules - definition Execute the payment «ParameterBindingGroup» Name  Name «ParameterBindingGroup» Name  Name CreditCard  CC Customer Information Customer Information «Form» Payment Information Payment Information «Form» Amount Confirmation Payment Execution
  44. 44. IFML concrete syntax – modules IFML Modules - usage Shopping Cart Checkout «ParameterBindingGroup» Total Amount Confirmation Confirmation Message «Details» Payment Execution Product List «List»
  45. 45. Multiple aspects modeling – 1 (business and requirements) UML Use Case BPMN process UML Sequence IFML UML Statechart Handle Rental Sales Clerk Handle Renter <<Include>> <<Extend>> Handover Car <<UML Actor>> Sales Clerk <<UML Model>> IT system new rental change days accept payment
  46. 46. Integration with UML Use Cases Each use case can be described by A business process A plain UI description in IFML Some UML dynamic diagrams (e.g., activity, sequence, …) Handle Rental Sales Clerk Handle Renter <<Include>> <<Extend>> Handover Car
  47. 47. Integration with BPMN The UI of each activity can be described by An IFML module Some UML dynamic diagrams (e.g., activity, sequence, …) Execute the payment «ParameterBindingGroup» Name  Name «ParameterBindingGroup» Name  Name CreditCard  CC Customer Information Customer Information «Form» Payment Information Payment Information «Form» Amount Confirmation Payment Execution
  48. 48. Example of UML - IFML mapping IFML Model << Use Case>> Handle Rental xUMLUseCaseDiagram <<xUML Actor>> Sales Clerk << Use Case>> Handle Renter <<Include>> <<Extend>> << Use Case>> Handover Car <<UML Actor>> Sales Clerk Handle Rental xUML Sequence Diagrams <<UML Model>> IT system new rental change dates accept payment IFML models can be reworked or refined after being generated
  49. 49. Multiple aspects modeling – 2 (implementation and architecture) UML Sequence UML Deployment IFML UI Mockup models
  50. 50. Description of deployment architecture UI is just one facet of system design Often need to position it in a broader architectural vision UML deployment diagram Integration with UML
  51. 51. 51 UML Sequence Diagrams Tiers and calls Explicit description of interactions between tiers
  52. 52. • Manual specification of BPMN process model • Automatic transformation of BPMN to WebML • Possible manual refinement of WebML models • Automatic running code generation on J2EE platform • Virtuous development cycle Model-driven Development Process (IFML)
  53. 53. The generated model artifacts
  54. 54. Executability experiment within OMG IFML editor IFML code generator UML editor Alf editor + parser Alf compiler fUML model fUML Interpreter Platform specific UI code produces calls IFML model produces calls input UI execution backend business logic execution
  55. 55. An official metamodel of the language which describes the semantics of and relations between the modeling constructs A graphical concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer A UML Profile consistent to the metamodel An interchange format between tools using XMI All this, specified through standard notations themselves Practical results of having a standard
  56. 56. Static aspects Also: interchange with profile-based diagrams. The UML Profile for IFML «page» AlbumSearch «page» Albums «page» Album Album Search Album Index Album Detail Dynamic aspects «index» MBox List «index» Message Index SelectMailMessages(mBox)
  57. 57. BPMN and/or UML editor Tight and seamless integration between different modeling tools • Thanks to XMI interchange format, UML profiles, vendor-specific notation implementations • Thanks to model to model transformations IFML modeling and industrial-strenght UI generation Model integration and interchange UML tool implementing IFML profile Other Domain- specific modeling tool XMI model exchange Model to model transformation
  58. 58. Joint usage of IFML with other MDA languages can be devised: • SysML • SoaML • … … and also with other frameworks (e.g., Model Driven Enterprise Engineering) Broader, enterprise-wide system modeling
  59. 59. The Metamodel -- excerpts --
  60. 60. InteractionFlowModel
  61. 61. IFML Model
  62. 62. ViewElements
  63. 63. Referencing Content and Behaviour
  64. 64. Events
  65. 65. Context
  66. 66. Examples
  67. 67. Typical email interface Usability Friendliness Complex interaction flows Example 1: online mailer (e.g., Gmail)
  68. 68. [D] [L] MailMessages [XOR] MAIL Top [L] Contacts Top down design from containers
  69. 69. Message List MailBox [XOR] MessageManagement [L] Settings [XOR] MessageSearch MailBoxList [D] [L] Messages «Window» [XOR] MAIL Top [L] MessageWriter «List» «List» … Starting adding ViewComponents
  70. 70. Message List MailBox [XOR] MessageManagement [L] Settings [XOR] MessageSearch MailBoxList [D] [L] Messages «Window» [XOR] MAIL Top [L] MessageWriter «List» «List» «ParameterBindingGroup» SelectedMailBox  MailBox … .. And further details
  71. 71. «List» MBoxList «List» MessageList «DataBinding» MailMessage «ConditionalExpression» self.mm2MailMessageGroup = MailBox «DataBinding» MailMessageGroup «ParameterBindingGroup» SelectedMailBox  MailBox MessageList Parameters and Conditions «Parameter» MailBox
  72. 72. MessageList «Menu» Message toolbar «Parameter» MessageSet Delete Archive Report MoveTo MessageSelection MailBox Labels «ActivationExpression» not MessageSet.isEmpty() «ParameterBindingGroup» SelectedMessages  MessageSet «List» Activation expressions
  73. 73. MessageList «Menu» Message toolbar «Parameter» MessageSet Delete Archive Report MessageSelection «Modeless» Tag Chooser «Modal» Tag Creator Select Tag Tag Folder List Create New New Tag FolderCreate Message toolbar MessageSelection [XOR] Tags Mailbox «List» «List» «Form»
  74. 74. MessageList «Menu» Message toolbar «Parameter» MessageSet Delete Archive Report MoveTo MessageSelection «Modeless» Tag Chooser «Modal» Tag Creator Select Tag MailBox Tag Folder List Create New New Tag Folder Create Delete Archive Report Associate to Tag / Move to folder Create Tag and Associate Tag / Move to folder «List» «ParameterBindingGroup» SelectedMessages  MessageSet «ParameterBindingGroup» SelectedMessages  MessageSet «ParameterBindingGroup» SelectedTag  ATag «List» «ParameterBindingGroup» NewTagName  TagName «Form»
  75. 75. [XOR] MessageSearch [D] Search Message keyword search «Modeless» FullSearch Message Full Search Show search options Search mail Search mail MailBox Message List «List» «Form» «Form» «ParameterBindingGroup» Keyword  Key «ParameterBindingGroup» Keyword  Key From  FromKey To  ToKey «ParameterBindingGroup» Keyword  Keyword Search forms
  76. 76. [XOR] MessageSearch [D] Search «Modeless» FullSearch Search mail MailBox «Form» Message Keyword Search «Form» Message Full Search «SimpleField» Keyword: String «SimpleField» Keyword: String Search mail «SimpleField» From: String «List» Message List «DataBinding» MailMessage «ConditionalExpression» MailMessage IN self.mm2MailMessageGroup = Mailbox «ConditionalExpression»( if (Key.size() <= title.size()) then Sequence(1..title.size() - Key.size()) -> exists(i | title.substring(i,i+ Key.size()) = Key ) else false) OR (if (from.size() <= self.from.size()) then Sequence(1..self.from.size() - from.size()) -> exists(i | self.from.substring(i,i+ from.size()) = from ) else false ) Show search options«ParameterBindingGroup» Keyword  Key «ParameterBindingGroup» Keyword  Keyword «ParameterBindingGroup» Keyword  Key From  From Search Conditions
  77. 77. Message Details Message Details [L] Message Writer Message Writer Send [XOR] Message Reader Reply Forward ReplyAll Send «ActivationExpression» MessageRecipients.size() > 1 «ParamBindingGroup» MessageId  MessageId «Details» «Form» … Message follow-up
  78. 78. «Form» MessageWriter Search mail «RichTextSimpleField» Body «RichTextToolBar» Toolbar[ClientSide] ApplyFormat [ClientSide] ApplyFormat Remove format «Modal» Alert Cancel [ClientSide] ApplyFormat Ok [L] Message Writer Client Side Logic
  79. 79. Typical mobile UI Simple app Complex interactions Touch events Example 2: Instagram AutoMobile FP7 SME EU research project http://automobile.webratio.com
  80. 80. • Media (photos) • Users • Activity • Tag Content
  81. 81. Sign in [H] Start Page Register Sign In Sign InRegister
  82. 82. Top level – app structure [XOR] Instagram Top [D][L] Home [L] Explore [L] Take Picture [L] Profile [L] News Refresh Update Content <<modeless>>NoCon normalTermination exceptionalTermination
  83. 83. How to avoid duplication [XOR] Instagram Top [D][L] Home [L] Explore [L] Take Picture [L] Profile [L] News Refresh Update Content <<modeless>> NoConn normalTermination exceptionalTermination [L] News Refresh Update Content<<modeless> > NoConn normalTermination exceptionalTermination [L] Profile Refresh Update Content<<modeless> > NoConn normalTermination exceptionalTermination [L] Take Picture Refresh Update Content<<modeless> > NoConn normalTermination exceptionalTermination [L] Explore Refresh Update Content<<modeless> > NoConn normalTermination exceptionalTermination [L][D] Home Refresh Update Content<<modeless> > NoConn normalTermination exceptionalTermination
  84. 84. Media Viewer Media.postedBy: User (profilePhoto, userName) Media(postTime)  Media - file  PostedBy (User) - profilePhoto - userName  LikedBy (User)  Contains (Comment)  QualifiedBy (Tag)  Mentions (User) Media (file) Media.contains : Comment (text) Media.LikedBy : User (username) Media (location) "Like" event "Comment" event Media object menu "Refresh" event
  85. 85. <<Module>> MediaViewer Media Viewer model «NestedList» MediaViewer «DataBinding» Media «NestedDataBinding» likedBy «NestedDataBinding» contains «VisualizationAttributes» postTime, location, file «VisualizationAttributes» numLikes «ConditionalExpression» MediaOIDs->includes (oid) «VisualizationAttributes» userName «VisualizationAttributes» userName, text seeLikers seeAllComment s BlockSize=6 «ActivationExpression» size() > 6 «NestedDataBinding» comprises «VisualizationAttributes» tagName «ActivationExpression» likedBy->size() <= 10 «ActivationExpression» numLikes > 10 «NestedDataBinding» mentions «VisualizationAttributes» userName «ParameterBindingGroup» OIDs  MediaOIDs «NestedDataBinding» postedBy «VisualizationAttributes» userName, photo «OrderBy» postTime DESC
  86. 86. Other renderings
  87. 87. Other renderings  Contains (Comment)  QualifiedBy (Tag) SeeSameTag event
  88. 88. Detailed MediaViewer «NestedList» MediaViewer << Modal >> User Medi Menu << Modal >> LoggedUser MediaMenu «DataBinding» Media See Location See User <<ModuleReference>> Map <<ModuleReference>> User <<ModuleRef>> Tag «NestedDataBinding» contains SeeAllCommen ts «VisualizationAttributes» postTime, location, file «VisualizationAttributes» numLikes «ActivationExpression» likedBy->size() <11 See Media Menu See User SeeSameTag Comment Toggle Preference Like <<DoubleTouch> > Like/See Tagged Play / Stop <<Touch>> Play/Stop «ActivationExpression» type==“Video” «ActivationExpression» username != Context.userna «ActivationExpression» userName == Context.usern <<ModuleReference>> Likers SeeLikers See Media Logged Menu «ActivationExpression» numLikes >10 BlockSize=6 «VisualizationAttributes» userName, text «NestedDataBinding» comprises «VisualizationAttributes» tagName See User «NestedDataBinding» mentions «VisualizationAttributes» userName See User «NestedDataBinding» likedBy «ConditionalExpression» MediaOIDs->includes (oid) «VisualizationAttributes» userName «NestedDataBinding» postedBy «VisualizationAttributes» userName, photo Share Delete TagPeople Report CopyURL
  89. 89. User Profile UI Upper section Lower section Commands Profile menu ProfileData ProfileData
  90. 90. User Profile – map and photos of you MediaMap PhotosOfUser
  91. 91. <<XOR>> ProfileViewer <<Module>> User <<ViewContainer>> ProfileData Overall view of User Profile [XOR] <<ViewContainer>> UserPosts [D][L] <<ModuleReference>> MediaTiled gle wed «Details» UserInfo EditYourProfile Options <<View Co BlCancel «Activa userNa Contex Posts SeeFollowers SeeFollowing «VisualizationAttributes» profilePhoto, userName, name, bio, numPosts, numFollowing, numFollowers «DataBinding» User «ActivationExpression» userName == Context.username «ActivationExpression» userName != Context.username «ParamBindingGrou p» username  user «ConditionalExpression» userName == user [L] <<ModuleReference>> MediaViewer [L] <<MapView >> MediaMap «Marker» <<List>> Locations «VisualizationAttributes» file «DataBinding» Media «ConditionalExpression» postedBy .userName == user [L] <<ViewContainer>> PhotosOfUser <<List>> TaggedMedia «VisualizationAttributes» file «DataBinding» Media «ConditionalExpression» tags.userName == user Toggle Options <<Vie Logge «Activati userNam Context. EditPhoto <<View Contain PhotoMenu Pick ImpTake <<View Con ProfileEditor <<View Con Search «List» PostOIDs «DataBinding» Media «ConditionalExpression» postedBy == user «ParamBindingGrou p» MediaOids Oids
  92. 92. <<Module>> MediaTiled Media tiles <<ViewContainer>> MediaAsTiles <<ModuleReference>> MediaViewer «List» MediaTiles «VisualizationAttributes» file «DataBinding» Media «ConditionalExpression» MediaOIDs->includes (oid) Select «ParameterBindingGroup» OIDs  MediaOIDs «ParamBindingGroup» Selected  MediaOIDs <<orderB>>y postTime DESC
  93. 93. 93 Classical ecommerce web site Extensive coverage of products and details (huge site!) But patterns of interaction are much simpler than minimalist mobile UIs! Basic content model coming up next… Example 3: eBay
  94. 94. Figure 9.27
  95. 95. Search bar
  96. 96. High-level site structure <<siteview>> eBayWebInterface [L] <<page>> DailyDeals[H][L] <<page>> Home [L] <<area>> CustomerSupport [L] <<area>> Sell [L] <<area>> SellerCenter [L] <<area>> Community [L] <<area>> Policies [L] <<area>> MyeBay [L] <<modeless>> Notifications [L] <<area>> Annoucements [L] <<area>> MoneyBack [L] <<area>> SecurityCenter [L] <<area>> ResolutionCenter [L] <<page>> SiteMap [L] <<page>> OfficialTime [L] <<page>> Survey [D] <<page>> Tell us <<page>> Create <<page>> Review<<area>> Listings Categories & Collections [L] <<page>> NewFeatures
  97. 97. Categories
  98. 98. All Categories – right hand side dropdown
  99. 99. Search with autocompletion
  100. 100. LoggedIn User Menu Overview Master Page Register Sign in «Details» UserName «DataBinding» Context «DataBinding» Context «Details» Shopping Cart «DataBinding» Cart «ConditionalExpression » of.userName=user MyCollections «Form» Search Search «Autocompletion» Search «DataBinding» QuerySuggestion «VisualizationAttributes» text «Simplefield» SearchKey:string«ActivationExpression» completion=false «SelectionField» category «DataBinding» Category «VisualizationAttributes» name Hide Suggestions Show Suggestions «ActivationExpression» completion=true «ParamBindingGroup» true  completion «ParamBindingGroup» false  completion «ParamBindingGroup» SearchKey  Keyword SelectedCategory  CategoryId «Tree» ShopByCategory «DataBinding» Category «VisualizationAttributes» Name «NestedDataBinding» Subcategories «VisualizationAttributes » Name Search Results Select SettingsSign out «ActivationExpression» Context.userName = null «ActivationExpression» Context.userName != null <<modeless>> Category tree ShopByCategory TrendingCollectionsAllCategories Advanced AdvancedSearch «VisualizationAttributes» userName «VisualizationAttributes » numItems «ParamBindingGroup» userName user
  101. 101. Search options «Form» Left Search Single Options «ScrollableList» Products «Simplefield» MinimumPrice «Simplefield» MaximumPrice Search «SelectionField» Format «DataBinding» PurchaseFormat «VisualizationAttributes» Name «SelectionField» ItemLocation «DataBinding» Listing «VisualizationAttributes» Location «Form» Left Search Multiple Options «SelectionField» Size Type «DataBinding» Fashion «VisualizationAttributes» typeOfSize «SelectionField» Size «DataBinding» Fashion «VisualizationAttributes» Location «ConditionalExpression» self.getSizeType (SelectedCategory) AND SelectedCategory=“Fashion” Deselect See Size «OnChange» Select «ConditionalExpression» self. getSizeType (typeOfSize) AND SelectedCategory=“Fashion” «ParamBindingGroup» selectedSizeType sizeType «SelectionField» Color «DataBinding» Listing «VisualizationAttributes» color «ConditionalExpression» «Autocompletion» Brand «DataBinding» Listing «VisualizationAttributes» brand Deselect «OnChange» Select «OnChange» Select Deselect «SelectionField» DeliveryOptions «DataBinding» Listing «VisualizationAttributes» Location «SelectionField»Condition «DataBinding» Listing «VisualizationAttributes» itemCondition «SelectionField» OtherOptions «DataBinding» AvailableOptions «VisualizationAttributes» name, selection «OnChange» Select Deselect «OnChange» Select Deselect «OnChange» Select «OnChange» Select «OnChange» Select
  102. 102. The WebRatio tool
  103. 103. Drawing vs. modeling Tool support for MDE/MDD
  104. 104. An Eclipse-based development environment allowing: Modeling: ER + IFML + BPMN 100% code generation of standard JEE applications • Clear separation between design time and run time • No proprietary runtime Quick and agile development cycles Extending the generation rules • Defining new presentation styles • Defining new components Versioning, teamwork, full lifecycle mgt Truly multi-role model-driven development What is WebRatio Requirement Analysis Solution Modeling Prototype Generation Results Verification
  105. 105. WebRatio is now at 7th release on the market since 2001 WebRatio customers 130+ companies and 500+ commercial users mainly Italy, USA, Europe and Latin America WebRatio adoption 15,000+ users of the free edition Used in hundreds of universities all over the world WebRatio partners 40+ software houses and system integrators 300+ universities worldwide, 13.000+ students Some numbers
  106. 106. You capture business requirements in abstract, technology independent models BPMN + IFML WebRatio – Step 1 Business User WebRatio Modeller
  107. 107. You customize the environment by defining your own generation rules HTML 5 + CSS + Java WebRatio – Step 2 Layout Designer Java Programmer
  108. 108. You get a tailored, yet standard, Java Web application with no proprietary runtime Code generation WebRatio – Step 3 WebRatio Modeller Business User
  109. 109. Get the application Web App DBMS Browser SOA Custom Information System Standard execution environment Standard Java Application Server
  110. 110. Involve business users in the development process and converge quickly to the target Agile, quick prototyping Requirement Analysis Solution Modelling Application Generation Results Validation
  111. 111. Model Generation Rules Generation Engine Do not change the generated application code Touch the generation rules instead The MDE Virtuous Cycle Generated Application ?
  112. 112. Case Studies
  113. 113. Kinds of application Corporate Operations Human Capital Management Product Life Cycle Management Customer Relationship Management Enterprise Resource Planning Supply Chain Management Knowledge Support Sales and Lead Management Marketing Resources Mgt Web Customer Services B2C/B2B E-Commerce Learning Management Document Management Project Management Customer Information Mgt Partner Relationship Mgt Recruitment Training Workforce Management Supplier Relationship Mgt Business Intelligence Web Content Management Knowledge Management Risk and Compliance Enterprise Governance Order Mgt Payment Services Orchestration Web Front-End of accounting sys. Front-Office Process Mgt Financial Services
  114. 114. B2C + CMS Web applications initially for 14 EU countries Corporate news, Product technical & commercial data, Service & Partner area, Where to Buy… Multilingual, multi-actor, distributed workflows for local and central PMs, local and central MarCom managers ... and a: very limited Time to Market (7 weeks!!) Acer
  115. 115. Size & effort Class Dimension Value Number of localized B2C web sites 14 Number of main CMS applications 4 (Admin, News, Product, Other content) Number of supported languages 12 for B2C Web sites, 1 for CMS Number of data entry masks 39 Number of automatically generated database tables 46 Number of automatically generated database views 82 Number of automatically generated database queries 279 for data extraction, 89 for data update Number of automatically generated JSP page templates 48 Number of automatically generated or reused Java classes 250 Size Number of automatically generated Java lines of code 12500 Non commented lines of code Number of elapsed workdays 49 Number of development staff-months (analysts and developers) 6 staff-months (6 weeks x 4 persons) Total number of prototypes 9 Average elapsed man days between consecutive prototypes 5,4 Time & effort Average number of development man days per prototype 15,5
  116. 116. Size & effort DEGREE OF AUTOMATION Number of manually written SQL statements 17(SQL constraints) Percentage of automatically generated SQL code 96% Number of manually written/adapted Java classes /JSP templates 10% JSP templates manually adapted Percentage of automatically generated Java and JSP code 90% JSP templates, 100% Java classes COST AND ROI Total cost of software development of first version 75.000 € HW, SW licenses, and connectivity cost of first version 70.000 € (db server license) Return on investment of first version 12-15 months Average effort of extension to one additional country 0,5 staff-months Average cost of extension to one additional country 7.500 € Average ROI of extension to one additional country 2 months PRODUCTIVITY Number of function points 177 (B2C web site) + 612 (CMS) = 789 Average number of function points delivered per staff-month 131,5
  117. 117. On the positive side: Almost 80% of the delivery effort concentrates in the phases of data design, hypertext design and prototyping: • more development time is spent with the application stakeholders MDD allows a more flexible distribution of responsibilities between the IT department and the business units The peak productivity rates has reached five times the number of delivered function points per staff-month of a traditional programming language like Java Comments
  118. 118. On the negative side.. Acer estimates that it took from 4 to 6 months to have fully productive developers with MDD, IFML, and WebRatio Difficult to find skilled people ..but.. The initial investment in human capital required by MDD pays off in the mid term • MDD benefits testing, maintenance, and evolution (which account for over 60% of the total lifecycle cost) • reasoning on the system is far more effective at the conceptual level Comments (continued)
  119. 119. Maintenance effort Served Contries and Applications 4 4 4 5 5 17 24 32 41 56 17 21 24 28 31 0 10 20 30 40 50 60 2001 2002 2003 2004 2005 Year Units Number of developers Number of maintained applications Number of served countries
  120. 120. • Public company owned by the City of Turin in Italy • Local public transport serving 190 million passengers every year. • A new e-ticketing system (avail able at http://ecommerce.gtt.to.it and serving 64,000 daily passengers) • published on-line in only 2 months. • The application comprises 100 page templates (IFML pages) and 1215 IFML units. • KEY: iterative and quick prototyping approach supported by WebRatio GTT: Turin Transportation Group
  121. 121. • Multi-utility company buying and selling wholesale electric power. • Integrated Energy Management System that replaced individual productivity tools used by traders for the management of electric power. • KEY: quick prototyping approach and involvement of actual users in the development process. • Deployment of final app in 6 months after the initial meeting with WebRatio (time to market that took one-third of the time estimated in case of adoption of a traditional development) A2A: Utility in Milan
  122. 122. • Banking (UniCredit) • BPM + SOA + Web interfaces • Crucial points: modularization, multiple models integration, multiple tools integration, strict runtime platform requirements • Banking (ABI) • System integration (Pure backend!) • Why IFML? • Latin America • Cooperatives, banks, public bodies, central government • Wholesale (IKEA) • Financial / leasing (GE Capital) Other experiences
  123. 123. • Models integration • Large applications with strong need for coherence and standardized paradigms • Cooperatives, banks, public bodies, central government • Service orientation • No pure modeling exists • Code generation still win-win Where IFML works
  124. 124. Components and pages per project 1" 10" 100" 1000" 10000" 100000" 10" 100" 1000" Number'of'units' Number'of'pages'
  125. 125. Components per page (avg)
  126. 126. 0" 0.02" 0.04" 0.06" 0.08" 0.1" 0.12" 0.14" 0.16" 0.18" 0.2" 30" 300" 3000" Effo r t&(man/days&per&unit)& Effo r t&per&project&(man/days)& 1.2" Man/days per component
  127. 127. Man/days per page 0" 0.02" 30" 300" 3000" r Effo t&per&project&(man/days)& 0" 0.2" 0.4" 0.6" 0.8" 1" 1.2" 30" 300" 3000" Effo r t&per&page&(man/days&per&page& Effo r t&per&project&(man/days)&
  128. 128. Tool usage stats
  129. 129. Conclusion: innovation eco-system Research (Research group at Polimi) Method, Language and Platform Spin-off (WebRatio) Customers (including EU projects) Teaching (Polimi and int.l courses) innovation innovation toolsuite Toolsuite, industrial requirements innovation requirementsuse cases Standard & other SME Partners
  130. 130. Some Ads “Model Driven Software Engineering in Practice”. Brambilla, Cabot, Wimmer. Morgan&Claypool, USA, 2012 www.modeldrivenstar.com And the upcoming IFML book! Interaction Flow Modeling Language Model-driven UI Engineering of Web and Mobile Apps with IFML Morgan Kaufmann, The OMG press, USA, 2014
  131. 131. S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera: Designing Data- Intensive Web Applications, Morgan-Kaufmann Publishers, San Francisco, ISBN 1-55860- 843-5 (Series edited by Jim Gray, foreword by Adam Bosworth) 590 pages. M. Brambilla, J. Cabot, M. Wimmer: Model Driven Software Engineering in Practice. Morgan & Claypool, USA, September 2012, foreword by Richard Soley (OMG), 184 pages. ISBN 978-1608458820. Manolescu, M. Brambilla, S. Ceri, S. Comai, P. Fraternali: Model-driven design and deployment of service-enabled web applications. ACM Trans. Internet Technology (TOIT). 5(3), pp. 439-479 (2005). M. Brambilla, S. Ceri, P. Fraternali, I. Manolescu: Process modeling in Web applications. ACM Trans. Softw. Eng. Methodol (TOSEM). 15(4), pp. 360-409 (2006). M. Brambilla, I. Celino, S. Ceri, D. Cerizza, E. Della Valle, F. M. Facca: Model-Driven Design and Development of Semantic Web Service Applications, ACM Trans. on Internet Technology (TOIT). 8(1), pp.3:1 - 3:31 (2007). M. Brambilla: From Requirements to Implementation of Ad-hoc Social Web Applications: an Empirical Pattern-Based Approach. IET Software, 6(2), 2012, pp.114-126. M. Brambilla, S. Ceri, S. Comai, C. Tziviskou. Exception Handling in Workflow-Driven Web Applications. WWW 2005 Int. Conference on World Wide Web. ACM, pp. 170-179. (some) references
  132. 132. Marco Brambilla marcobrambi marco.brambilla@polimi.it Thanks!

×