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.
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.
IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro
The Interaction Flow Modeling LanguageMarco Brambilla@marcobrambi
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
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
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
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
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
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
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
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
11IFML main conceptsContainerViewComponentEventAction
Navigation flowData flowParameter binding12IFML main concepts – 2
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
14IFML concrete syntax by exampleBasic navigation flow between ViewComponents
15IFML concrete syntax by exampleNesting of ViewContainersTagged ViewContainers (XOR, L, D, Modal, Modeless)
27IFML concrete syntax by exampleIFML Modules - usage
28IFML concrete syntax by exampleIFML Modules - definition
Further Aspects covered in the specsPersonalization / Adaptation (ViewPoint concept)• Device• Role• Position and contextMapping to specific platforms• Java Swing• HTML 5• .Net WPF29
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
31Static aspectsThe UML profile for IFML«page»AlbumSearch«page»Albums«page»AlbumAlbum Search Album Index Album Detail«index»MessageIndex«index»MBox List «link»
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)
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
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
Marco Brambillamarcobrambimarco.firstname.lastname@example.orgIf you want to know more about MDSESee also the book:“Model Driven SoftwareEngineering in Practice”.Brambilla, Cabot, Wimmer.Morgan&Claypool, USA.
Marco Brambillamarcobrambimarco.email@example.comThanksfor attending!