1. The Interaction Flow Modeling Language
Marco Brambilla
@marcobrambi

2. 2
When was the last time you got to develop a front-end of an application?
When was the last time you got mad about it?
User interface and interaction development
is a painful phase of software process
… for everybody!
It’s YOUR problem

3. 3
The reasons of your frustration
Complexity of UIs increase in time
• New events, devices, use cases, interactions
Crappy tools for UI programming around
• Widgets drag&drop
• Hooks to execution
Especially for modern UIs, a lot still delegated to manual development
(just think about javascript programming)
No real MDE attempt to address the problem,
except for WebML + WebRatio in the Web domain
UI Modeling Problem

4. 4
A perceived gap in the standardization efforts
User interaction has been overlooked in software engineering standards
• Mainly addressing backend and architectural issues
The few previous attempts towards UI modeling failed because of:
• Tentative use of general purpose languages
• Low usability and effectiveness of notation
• Missing solid implementations with vendors support
Standardization gap

5. 5
That’s why we came up with the idea of proposing
Heavily inspired by WebML, and actually representing its generalization
from the Web domain to generic application front-end modeling
The Interaction Flow Modeling Language
the Interaction Flow Modeling Language

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

7. 7
Objective
A modeling language for expressing
Content visualized in the user interfaces
Navigation paths
User events and interaction
Binding to business logic
Binding to persistence layer
of the front-end of applications belonging to diverse domains
The Interaction Flow Modeling Language

8. 8
formal specification of the different perspectives of the front-end
Isolate implementation-specific issues of UIs
separation of concerns (user interaction vs. backend)
enable the communication of interaction design to non-technical
stakeholders
automatic generation of code also for the application front-end part
Advantages

9. 9
User interaction focus:
UI blends into visualization and graphics
Distinguish Interaction from Interface
The VIEW part (= front-end) of a software application
view components
view containers
events
interaction between components
Interaction between the user and the components (events)
the distribution of view components and referenced data and business logic at
the different tiers of the architecture
Focus

10. 10
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 purposes of
model fragments)
User input validation, according to OCL or other existing constraint languages
Covered aspects

11. 11
IFML main concepts
Container
ViewComponent
Event
Action

12. Navigation flow
Data flow
Parameter binding
12
IFML main concepts – 2

13. What you gain and what you miss
New aspects
• Modeling of generic events
• User and system generated
• Component to container flows
New
• ViewComponent
• Details, List, Form
• Flow, Data Flow
• Action
• Port
Missing aspects
• Modeling of orchestrations
(operation chains)
Old
• Unit
• Data, Index, Entry Units
• Link, Transport Link
• Operation Module
• Input/Output Collector
13
Change of terminology from WebML

14. 14
IFML concrete syntax by example
Basic navigation flow between ViewComponents

15. 15
IFML concrete syntax by example
Nesting of ViewContainers
Tagged ViewContainers (XOR, L, D, Modal, Modeless)

16. 16
IFML concrete syntax by example
Actions

17. ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
17
IFML – adding details to ViewComponents

18. Selection event
Submit event
.. And as many others as you want!
18
IFML – subtyping components and events

19. IFML is defined through a metamodel
IFML metamodel (1)
…
19

20. Two main packages:
IFML metamodel (2)
…
• IFML Core
• IFML Extensions
.. and then you can extend it as
you want, for different fields and
platforms (Web, Mobile, …)
20

21. 21
IFML concrete syntax by example
ActivationExpression, SubmitEvent, Event generation

22. 22
IFML concrete syntax by example
intra-component events and flows

23. 23
IFML concrete syntax by example
Modal windows

24. 24
IFML concrete syntax by example
Modal windows
Data Flows

25. 25
IFML concrete syntax by example
Intra-component interaction

26. 26
IFML example – online payment

27. 27
IFML concrete syntax by example
IFML Modules - usage

28. 28
IFML concrete syntax by example
IFML Modules - definition

29. Further Aspects covered in the specs
Personalization / Adaptation (ViewPoint concept)
• Device
• Role
• Position and context
Mapping to specific platforms
• Java Swing
• HTML 5
• .Net WPF
29

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

31. 31
Static aspects
The UML profile for IFML
«page»
AlbumSearch
«page»
Albums
«page»
Album
Album Search Album Index Album Detail
«index»
Message
Index
«index»
MBox List «link»

32. 32
Static aspects
Signals with tagged values
Dynamic aspects
The UML profile for IFML
«signal»
SelectMailMessages
mBox :string
Tagged values.
Parameter mBox
out name: selectedMBox
in name: mBox
«index»
MBox List
«index»
Message
Index
SelectMailMessages(mBox)

33. Tight and seamless integration between different modeling
tools
• Thanks to XMI interchange format, UML profiles, vendor-specific notation
implementations
IFML modeling and
industrial-strenght
UI generation
33
Model integration and interchange
UML tool implementing
IFML profile
Other Domain-
specific modeling tool
XMI model
exchange

34. 34
Strong integration with other modeling perspectives and modeled layers
of enterprise architectures
Joint usage of IFML and other MDA languages, such as:
• UML
• BPMN
• SysML
• SoaML
• …
In particular:
• DataBinding to classes and attributes of UML Class Diagrams
• Connection to back-end business logic as UML methods or whole UML dynamic
diagrams (activity diagram, sequence diagram, state chart diagram, …)
Broader, enterprise-wide modeling

35. Marco Brambilla
marcobrambi
marco.brambilla@webratio.com
If you want to know more about MDSE
See also the book:
“Model Driven Software
Engineering in Practice”.
Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA.

36. Marco Brambilla
marcobrambi
marco.brambilla@webratio.com
Thanks
for attending!