• Like
  • Save
IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 21,075 views

The video of the webinar is available on YouTube at: ...

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

Statistics

Views

Total Views
21,075
Views on SlideShare
3,413
Embed Views
17,662

Actions

Likes
10
Downloads
130
Comments
3

33 Embeds 17,662

http://www.ifml.org 12432
http://www.webratio.com 2365
http://modeling-languages.com 1263
http://www.modeldrivenstar.org 1151
http://115.webratio.com 171
http://translate.googleusercontent.com 89
https://twitter.com 31
http://feeds.feedburner.com 31
http://www.linkedin.com 30
http://1036236044036859344_c4de7f2ea4cffbef5601dad665b7bc2e8241c1d3.blogspot.com 21
http://iricelino.org 18
http://127.0.0.1 9
https://translate.googleusercontent.com 7
http://localhost 7
http://modelinglang.staging.wpengine.com 6
http://www2.webratio.com 5
http://webratio.com 4
https://storify.com 2
http://blog.webratio.com 2
http://storify.com 2
http://pinterest.com 2
http://plus.url.google.com 2
http://prlog.ru 2
http://www.google.ca 1
http://www3.webratio.com 1
http://www.google.com 1
http://www.google.co.in 1
http://note.liveblogpro.com 1
http://www.google.com.tr 1
https://www.google.co.in 1
http://www.pinterest.com 1
http://www.inoreader.com 1
https://www.google.it 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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
    • 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
    • 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)
    • 16IFML concrete syntax by exampleActions
    • ViewComponentParts:• Data binding• ParametersTypes of ViewComponents (<<List>>)17IFML – adding details to ViewComponents
    • Selection eventSubmit event.. And as many others as you want!18IFML – subtyping components and events
    • IFML is defined through a metamodelIFML metamodel (1)…19
    • 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
    • 21IFML concrete syntax by exampleActivationExpression, SubmitEvent, Event generation
    • 22IFML concrete syntax by exampleintra-component events and flows
    • 23IFML concrete syntax by exampleModal windows
    • 24IFML concrete syntax by exampleModal windowsData Flows
    • 25IFML concrete syntax by exampleIntra-component interaction
    • 26IFML example – online payment
    • 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.brambilla@webratio.comIf you want to know more about MDSESee also the book:“Model Driven SoftwareEngineering in Practice”.Brambilla, Cabot, Wimmer.Morgan&Claypool, USA.
    • Marco Brambillamarcobrambimarco.brambilla@webratio.comThanksfor attending!