Successfully reported this slideshow.

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

15

Share

The Interaction Flow Modeling Language
Marco Brambilla
@marcobrambi
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?
Us...
3
The reasons of your frustration
Complexity of UIs increase in time
• New events, devices, use cases, interactions
Crappy...

YouTube videos are no longer supported on SlideShare

View original on YouTube

1 of 37
1 of 37

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

15

Share

Download to read offline

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

Transcript

  1. 1. The Interaction Flow Modeling Language Marco Brambilla @marcobrambi
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11 IFML main concepts Container ViewComponent Event Action
  12. 12. Navigation flow Data flow Parameter binding 12 IFML main concepts – 2
  13. 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. 14 IFML concrete syntax by example Basic navigation flow between ViewComponents
  15. 15. 15 IFML concrete syntax by example Nesting of ViewContainers Tagged ViewContainers (XOR, L, D, Modal, Modeless)
  16. 16. 16 IFML concrete syntax by example Actions
  17. 17. ViewComponentParts: • Data binding • Parameters Types of ViewComponents (<<List>>) 17 IFML – adding details to ViewComponents
  18. 18. Selection event Submit event .. And as many others as you want! 18 IFML – subtyping components and events
  19. 19. IFML is defined through a metamodel IFML metamodel (1) … 19
  20. 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. 21 IFML concrete syntax by example ActivationExpression, SubmitEvent, Event generation
  22. 22. 22 IFML concrete syntax by example intra-component events and flows
  23. 23. 23 IFML concrete syntax by example Modal windows
  24. 24. 24 IFML concrete syntax by example Modal windows Data Flows
  25. 25. 25 IFML concrete syntax by example Intra-component interaction
  26. 26. 26 IFML example – online payment
  27. 27. 27 IFML concrete syntax by example IFML Modules - usage
  28. 28. 28 IFML concrete syntax by example IFML Modules - definition
  29. 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. 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. 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. 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. 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. 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. 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. 36. Marco Brambilla marcobrambi marco.brambilla@webratio.com Thanks for attending!

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

Transcript

  1. 1. The Interaction Flow Modeling Language Marco Brambilla @marcobrambi
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11 IFML main concepts Container ViewComponent Event Action
  12. 12. Navigation flow Data flow Parameter binding 12 IFML main concepts – 2
  13. 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. 14 IFML concrete syntax by example Basic navigation flow between ViewComponents
  15. 15. 15 IFML concrete syntax by example Nesting of ViewContainers Tagged ViewContainers (XOR, L, D, Modal, Modeless)
  16. 16. 16 IFML concrete syntax by example Actions
  17. 17. ViewComponentParts: • Data binding • Parameters Types of ViewComponents (<<List>>) 17 IFML – adding details to ViewComponents
  18. 18. Selection event Submit event .. And as many others as you want! 18 IFML – subtyping components and events
  19. 19. IFML is defined through a metamodel IFML metamodel (1) … 19
  20. 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. 21 IFML concrete syntax by example ActivationExpression, SubmitEvent, Event generation
  22. 22. 22 IFML concrete syntax by example intra-component events and flows
  23. 23. 23 IFML concrete syntax by example Modal windows
  24. 24. 24 IFML concrete syntax by example Modal windows Data Flows
  25. 25. 25 IFML concrete syntax by example Intra-component interaction
  26. 26. 26 IFML example – online payment
  27. 27. 27 IFML concrete syntax by example IFML Modules - usage
  28. 28. 28 IFML concrete syntax by example IFML Modules - definition
  29. 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. 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. 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. 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. 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. 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. 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. 36. Marco Brambilla marcobrambi marco.brambilla@webratio.com Thanks for attending!

More Related Content

More from Marco Brambilla

Related Books

Free with a 30 day trial from Scribd

See all

×