mobile extensions for omg's ifml modeling language
DESCRIPTION
Front-end design of mobile applications is a complex and multidisciplinary task, where many perspectives intersect and the user experience must be perfectly tailored to the application objectives. However, development of mobile user interactions is still largely a manual task, which yields to high risks of errors, inconsistencies and inefficiencies. In this paper we propose a model-driven approach to mobile application development based on the IFML standard. We propose an extension of the Interaction Flow Modeling Language tailored to mobile applications and we describe our implementation experience that comprises the development of automatic code generators for cross-platform mobile applications based on HTML5, CSS and JavaScript optimized for the Apache Cordova framework. We show the approach at work on a popular mobile application, we report on the application of the approach on an industrial application development project and we provide a productivity comparison with traditional approaches.TRANSCRIPT
![Page 1: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/1.jpg)
Marco Brambilla1, Andrea Mauri1, Eric Umuhoza1,2
1 Dipartimento di Elettronica, Informazione e Bioingegneria. Politecnico di Milano2 AtlanMod team, Ecole des Mines de Nantes
Extending the Interaction Flow Modeling Language (IFML) for Model Driven
Development of Mobile Applications Front End
Speaker:[email protected]
EricUmuhoza
MobiWIS Conference, Barcelona, August 27-29 ,2014
![Page 2: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/2.jpg)
Outline
Model driven development(MDD) approach & mobile apps development
The Interaction Flow Modeling Language(IFML)
Mobile Extension to IFML(mobile IFML)
Concrete syntax by example
Mobile IFML & Code Generation
Conclusions
![Page 3: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/3.jpg)
MDD in mobile apps front end
Manual coding is the predominant development approach
– Reuse of design artifacts is low – High risks of errors– High costs for cross-platform development
Platform-independent user interaction modeling language can bring several benefits
– Model once and generate for any platform of choice– It improves the development process– It enables the communication of interface and
interaction design to non-technical stakeholders– It allows the early validation of requirements
![Page 4: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/4.jpg)
The Interaction Flow Modeling Language
An OMG standard designed for expressing:
– Content visualized in the user interfaces
– User events and interaction, and
– Control behavior of the front-end of SW applications
![Page 5: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/5.jpg)
IFML main concepts
Container
ViewComponent
Event
Action
![Page 6: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/6.jpg)
IFML main concepts - 2
Navigation flow
Data flow
Parameter binding
![Page 7: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/7.jpg)
IFML concrete syntax -example
View Container Parameter Binding
EventView Component
Action
Navigation Flow
![Page 8: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/8.jpg)
IFML metamodel - Extensions
Organized in two main packages: – IFML Core
– IFML Extensions
and then you can extend it as you want, for different fields and platforms (Web, Mobile, …)
![Page 9: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/9.jpg)
Why IFML?
It is an OMG Standard for Interaction Flow Modeling
The composition of mobile apps interface can be expressed with the core IFML concepts of ViewContainers and ViewComponents
It is extensible
Our IFML based modeling experience
![Page 10: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/10.jpg)
Mobile IFML
Two main motivation:
–Complexity of interaction patterns to better exploit the limited space
– Interaction with other hardware and software components(sensors, apps,…)
![Page 11: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/11.jpg)
Mobile IFML - 2
Four main extension definitions :
–ViewContainers and ViewComponents
–MobileContext, capturing all dimensions that characterize the user’s intent, device’s capacity and the environment surrounding the user
–MobileEvents, addressing the capturing of the mobile events
–MobileAction and MobileActionEvent
![Page 12: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/12.jpg)
Mobile IFML – Container & Components
Plus <<MobileSystem>> stereotype
Some concepts may be extended to better reflect the terminology and properties of mobile apps.
![Page 13: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/13.jpg)
Mobile IFML – MobileContext
It assumes particular relevance in mobile apps
The context must gather all the dimensions that characterize:
– The user's intent
– The capacity of access device
– The communication network, and etc.
![Page 14: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/14.jpg)
Mobile IFML – MobileEvents
Three categories of mobile events:
– Events generated by the interaction of the user such as LongPress, swipe, etc.
– Events triggered by the mobile device features such as sensors, battery, etc.
– Events triggered by user actions related to the device components such as taking a photo, recording a video or using the microphone
![Page 15: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/15.jpg)
Mobile IFML – MobileViewElementEvent
Events generated by the interaction of the user
![Page 16: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/16.jpg)
Mobile IFML – MobileSystemEvent
Events produced by the mobile system
![Page 17: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/17.jpg)
Mobile IFML – MobileActionEvent
Screen MobileViewElementEvent
MobileComponent
MobileAction MobileActionEvent
![Page 18: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/18.jpg)
Modeling tool - demo
Open source project
http://ifml.github.io
Eclipse plugin available at
https://ifml.github.io/update/site.xml
![Page 19: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/19.jpg)
Code Generation
![Page 20: Mobile extensions for OMG's IFML modeling language](https://reader035.vdocuments.us/reader035/viewer/2022081404/557db1dad8b42acb768b52b0/html5/thumbnails/20.jpg)
Conclusions
A mobile extension of OMG’s standard IFML
A Sirius based IFML modeling tool
Prototype of the code generators
Future works
– Improvement of the modeling tool
– Implementation of more refined code generators
– Study of the design patterns for MD mobile apps design
Acknowledgement: this work was partially funded by the AutoMobile EU 7th FP SME Research project(http://automobile.webratio.com)