IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro


Published on

The video of the webinar is available on YouTube at:

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:

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro

  1. 1. The Interaction Flow Modeling LanguageMarco Brambilla@marcobrambi
  2. 2. 2When 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 developmentis a painful phase of software process… for everybody!It’s YOUR problem
  3. 3. 3The reasons of your frustrationComplexity of UIs increase in time• New events, devices, use cases, interactionsCrappy tools for UI programming around• Widgets drag&drop• Hooks to executionEspecially 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 domainUI Modeling Problem
  4. 4. 4A perceived gap in the standardization effortsUser interaction has been overlooked in software engineering standards• Mainly addressing backend and architectural issuesThe 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 supportStandardization gap
  5. 5. 5That’s why we came up with the idea of proposingHeavily inspired by WebML, and actually representing its generalizationfrom the Web domain to generic application front-end modelingThe Interaction Flow Modeling Languagethe Interaction Flow Modeling Language
  6. 6. 6We were going to make them anoffer they couldn’t refuse.In less than 2 years(a record in OMG!), we obtainedapproval of the IFML standardThe Object Management Group
  7. 7. 7ObjectiveA modeling language for expressingContent visualized in the user interfacesNavigation pathsUser events and interactionBinding to business logicBinding to persistence layerof the front-end of applications belonging to diverse domainsThe Interaction Flow Modeling Language
  8. 8. 8formal specification of the different perspectives of the front-endIsolate implementation-specific issues of UIsseparation of concerns (user interaction vs. backend)enable the communication of interaction design to non-technicalstakeholdersautomatic generation of code also for the application front-end partAdvantages
  9. 9. 9User interaction focus:UI blends into visualization and graphicsDistinguish Interaction from InterfaceThe VIEW part (= front-end) of a software applicationview componentsview containerseventsinteraction between componentsInteraction between the user and the components (events)the distribution of view components and referenced data and business logic atthe different tiers of the architectureFocus
  10. 10. 10Multiple views for the same applicationMobile and multi-device applicationsVisualization and input of data, and production of eventsComponents independent of concrete widgets and presentationInteraction flow, initiated by the user or by external eventsUser 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 ofmodel fragments)User input validation, according to OCL or other existing constraint languagesCovered aspects
  11. 11. 11IFML main conceptsContainerViewComponentEventAction
  12. 12. Navigation flowData flowParameter binding12IFML main concepts – 2
  13. 13. What you gain and what you missNew aspects• Modeling of generic events• User and system generated• Component to container flowsNew• ViewComponent• Details, List, Form• Flow, Data Flow• Action• PortMissing aspects• Modeling of orchestrations(operation chains)Old• Unit• Data, Index, Entry Units• Link, Transport Link• Operation Module• Input/Output Collector13Change of terminology from WebML
  14. 14. 14IFML concrete syntax by exampleBasic navigation flow between ViewComponents
  15. 15. 15IFML concrete syntax by exampleNesting of ViewContainersTagged ViewContainers (XOR, L, D, Modal, Modeless)
  16. 16. 16IFML concrete syntax by exampleActions
  17. 17. ViewComponentParts:• Data binding• ParametersTypes of ViewComponents (<<List>>)17IFML – adding details to ViewComponents
  18. 18. Selection eventSubmit event.. And as many others as you want!18IFML – subtyping components and events
  19. 19. IFML is defined through a metamodelIFML metamodel (1)…19
  20. 20. Two main packages:IFML metamodel (2)…• IFML Core• IFML Extensions.. and then you can extend it asyou want, for different fields andplatforms (Web, Mobile, …)20
  21. 21. 21IFML concrete syntax by exampleActivationExpression, SubmitEvent, Event generation
  22. 22. 22IFML concrete syntax by exampleintra-component events and flows
  23. 23. 23IFML concrete syntax by exampleModal windows
  24. 24. 24IFML concrete syntax by exampleModal windowsData Flows
  25. 25. 25IFML concrete syntax by exampleIntra-component interaction
  26. 26. 26IFML example – online payment
  27. 27. 27IFML concrete syntax by exampleIFML Modules - usage
  28. 28. 28IFML concrete syntax by exampleIFML Modules - definition
  29. 29. Further Aspects covered in the specsPersonalization / Adaptation (ViewPoint concept)• Device• Role• Position and contextMapping to specific platforms• Java Swing• HTML 5• .Net WPF29
  30. 30. 30An official metamodel of the language which describes the semantics of andrelations between the modeling constructs.A graphical concrete syntax for the interaction flow notation which provides anintuitive representation of the user interface composition, interaction and controllogic for the front-end designer.A UML Profile consistent to the metamodelAn interchange format between tools using XMI.All this, specified through standard notations themselvesPractical results of having a standard
  31. 31. 31Static aspectsThe UML profile for IFML«page»AlbumSearch«page»Albums«page»AlbumAlbum Search Album Index Album Detail«index»MessageIndex«index»MBox List «link»
  32. 32. 32Static aspectsSignals with tagged valuesDynamic aspectsThe UML profile for IFML«signal»SelectMailMessagesmBox :stringTagged values.Parameter mBoxout name: selectedMBoxin name: mBox«index»MBox List«index»MessageIndexSelectMailMessages(mBox)
  33. 33. Tight and seamless integration between different modelingtools• Thanks to XMI interchange format, UML profiles, vendor-specific notationimplementationsIFML modeling andindustrial-strenghtUI generation33Model integration and interchangeUML tool implementingIFML profileOther Domain-specific modeling toolXMI modelexchange
  34. 34. 34Strong integration with other modeling perspectives and modeled layersof enterprise architecturesJoint 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 dynamicdiagrams (activity diagram, sequence diagram, state chart diagram, …)Broader, enterprise-wide modeling
  35. 35. Marco Brambillamarcobrambimarco.brambilla@webratio.comIf you want to know more about MDSESee also the book:“Model Driven SoftwareEngineering in Practice”.Brambilla, Cabot, Wimmer.Morgan&Claypool, USA.
  36. 36. Marco Brambillamarcobrambimarco.brambilla@webratio.comThanksfor attending!