ifml - the interaction flow modeling language, the omg standard for ui modeling. an intro
DESCRIPTION
The video of the webinar is available on YouTube at: http://www.youtube.com/watch?v=5u6AVYclWao Table of Contents of the webinar: 00:05 - IFML, OMG and WebRatio 00:32 - Intro and motivation 10:36 - IFML Notation 19:19 - IFML Examples 33:34 - Metamodel and extensibility 45:39 - Standard and interchange 51:05 - MDSE Book 51:33 - IFML tools The standard Interaction Flow Modeling Language (IFML) is designed for expressing the content, user interaction and control behaviour of the front-end of software applications. The Interaction Flow Modeling Language has been adopted as a standard by OMG in March 2013. The standard Interaction Flow Modeling Language is designed for expressing the content, user interaction and control behaviour of the front-end of applications belonging to the following domains: Traditional, HTML+HTTP based Web applications. Rich Internet Applications, as supported by the forthcoming HTML 5 standard. Mobile applications. Client-server applications. Desktop applications. Embedded Human Machine Interfaces for control applications. Multichannel and context-aware applications. It's worth noting that IFML does not cover the modeling of the presentation issues (e.g., layout, stlye and look&feel) of an application front-end and does not cater for the specification of bi-dimensional and tri-dimensional computer based graphics, videogames, and other highly interactive applications. According to the IFML definitions, an IFML diagram consists of one or more top-level view containers, representing UI windows or Web pages. A view container can contain view components, which denote the publication of content or interface elements for data entry (e.g., input forms). A view component can have input and output parameters. A view container and a view component can be associated with events, to denote that they support the user's interaction. See more on IFML at: http://www.ifml.orgTRANSCRIPT
![Page 1: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/1.jpg)
The Interaction Flow Modeling Language
Marco Brambilla @marcobrambi
![Page 2: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/2.jpg)
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
![Page 3: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/3.jpg)
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
![Page 4: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/4.jpg)
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
![Page 5: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/5.jpg)
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
![Page 6: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/6.jpg)
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
![Page 7: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/7.jpg)
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
![Page 8: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/8.jpg)
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
![Page 9: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/9.jpg)
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
![Page 10: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/10.jpg)
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
![Page 11: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/11.jpg)
11
IFML main concepts
Container
ViewComponent
Event
Action
![Page 12: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/12.jpg)
Navigation flow
Data flow
Parameter binding
12
IFML main concepts – 2
![Page 13: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/13.jpg)
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
![Page 14: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/14.jpg)
14
IFML concrete syntax by example
Basic navigation flow between ViewComponents
![Page 15: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/15.jpg)
15
IFML concrete syntax by example
Nesting of ViewContainers
Tagged ViewContainers (XOR, L, D, Modal, Modeless)
![Page 16: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/16.jpg)
16
IFML concrete syntax by example
Actions
![Page 17: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/17.jpg)
ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
17
IFML – adding details to ViewComponents
![Page 18: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/18.jpg)
Selection event
Submit event
.. And as many others as you want!18
IFML – subtyping components and events
![Page 19: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/19.jpg)
IFML is defined through a metamodel
IFML metamodel (1)
…
19
![Page 20: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/20.jpg)
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
![Page 21: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/21.jpg)
21
IFML concrete syntax by example
ActivationExpression, SubmitEvent, Event generation
![Page 22: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/22.jpg)
22
IFML concrete syntax by example
intra-component events and flows
![Page 23: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/23.jpg)
23
IFML concrete syntax by example
Modal windows
![Page 24: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/24.jpg)
24
IFML concrete syntax by example
Modal windows
Data Flows
![Page 25: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/25.jpg)
25
IFML concrete syntax by example
Intra-component interaction
![Page 26: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/26.jpg)
26
IFML example – online payment
![Page 27: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/27.jpg)
27
IFML concrete syntax by example
IFML Modules - usage
![Page 28: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/28.jpg)
28
IFML concrete syntax by example
IFML Modules - definition
![Page 29: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/29.jpg)
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
![Page 30: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/30.jpg)
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
![Page 31: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/31.jpg)
31
Static aspects
The UML profile for IFML
« p a g e »AlbumSe arch
« p a g e »Albums
« p a g e »Album
Album Se arch Album Inde x Album De tail
« in d e x»M e ssage
Inde x
« in d e x»M Box List « lin k»
![Page 32: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/32.jpg)
32
Static aspects
Signals with tagged values
Dynamic aspects
The UML profile for IFML
« s ig n a l»Se le ctM ailM e ssage s
mBo x :s tr in g
T a g g e d va lu e s.
Pa ra me te r mBoxo u t n a me : se le c te d MBo xin n a me : mBo x
« in d e x»M Box List
« in d e x»M e ssage
Inde x
Se le ctMa ilMe ssa g e s(mBo x)
![Page 33: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/33.jpg)
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
Model integration and interchange
UML tool implementing IFML profile
Other Domain-specific modeling tool
XMI model exchange
![Page 34: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/34.jpg)
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
![Page 35: IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro](https://reader035.vdocuments.site/reader035/viewer/2022081414/54c2f17d4a7959896b8b4577/html5/thumbnails/35.jpg)
Marco Brambilla marcobrambi
If you want to know more about MDSESee also the book:
“Model Driven Software Engineering in Practice”.
Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA.