1.
The Interaction Flow Modeling LanguageMarco Brambilla@marcobrambi

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.
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.
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.
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.
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.
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.
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.
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.
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.
11IFML main conceptsContainerViewComponentEventAction

12.
Navigation flowData flowParameter binding12IFML main concepts – 2

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.
14IFML concrete syntax by exampleBasic navigation flow between ViewComponents

15.
15IFML concrete syntax by exampleNesting of ViewContainersTagged ViewContainers (XOR, L, D, Modal, Modeless)

16.
16IFML concrete syntax by exampleActions

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

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

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

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.
21IFML concrete syntax by exampleActivationExpression, SubmitEvent, Event generation

22.
22IFML concrete syntax by exampleintra-component events and flows

23.
23IFML concrete syntax by exampleModal windows

24.
24IFML concrete syntax by exampleModal windowsData Flows

25.
25IFML concrete syntax by exampleIntra-component interaction

26.
26IFML example – online payment

27.
27IFML concrete syntax by exampleIFML Modules - usage

28.
28IFML concrete syntax by exampleIFML Modules - definition

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.
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.
31Static aspectsThe UML profile for IFML«page»AlbumSearch«page»Albums«page»AlbumAlbum Search Album Index Album Detail«index»MessageIndex«index»MBox List «link»

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.
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.
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.
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.
Marco Brambillamarcobrambimarco.brambilla@webratio.comThanksfor attending!