Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Extending the Interaction Flow Modeling 
Language (IFML) for Model Driven 
Development of Mobile Applications Front End 
M...
Outline 
 Model driven development(MDD) approach & 
mobile apps development 
 The Interaction Flow Modeling Language(IFM...
MDD in mobile apps front end 
 Manual coding is the predominant development approach 
– Reuse of design artifacts is low ...
The Interaction Flow Modeling 
Language 
 An OMG standard designed for expressing: 
– Content visualized in the user inte...
IFML main concepts 
 Container 
 ViewComponent 
 Event 
 Action
IFML main concepts - 2 
 Navigation flow 
 Data flow 
 Parameter binding
IFML concrete syntax -example 
View Container Parameter Binding 
Event 
View Component 
Action 
Navigation Flow
IFML metamodel - Extensions 
 Organized in two main packages: – IFML Core 
– IFML Extensions 
and then you can extend it ...
Why IFML? 
 It is an OMG Standard for Interaction Flow 
Modeling 
 The composition of mobile apps interface 
can be expr...
Mobile IFML 
 Two main motivation: 
–Complexity of interaction patterns to 
better exploit the limited space 
– Interacti...
Mobile IFML - 2 
 Four main extension definitions : 
– ViewContainers and ViewComponents 
– MobileContext, capturing all ...
Mobile IFML – Container & Components 
 Some concepts 
may be extended 
to better reflect 
the terminology 
and properties...
Mobile IFML – MobileContext 
 It assumes particular relevance in mobile apps 
 The context must gather all the dimension...
Mobile IFML – MobileEvents 
 Three categories of mobile events: 
– Events generated by the interaction of 
the user such ...
Mobile IFML – MobileViewElementEvent 
 Events 
generated by 
the interaction 
of the user
Mobile IFML – MobileSystemEvent 
 Events produced 
by the mobile 
system
Mobile IFML – MobileActionEvent 
Screen MobileViewElementEvent 
MobileComponent 
MobileAction MobileActionEvent
Modeling tool - demo 
Open source project 
http://ifml.github.io 
Eclipse plugin available at 
https://ifml.github.io/upda...
Code Generation
Conclusions 
 A mobile extension of OMG’s standard IFML 
 A Sirius based IFML modeling tool 
 Prototype of the code gen...
Upcoming SlideShare
Loading in …5
×

of

Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 1 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 2 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 3 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 4 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 5 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 6 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 7 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 8 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 9 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 10 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 11 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 12 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 13 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 14 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 15 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 16 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 17 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 18 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 19 Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference Slide 20
Upcoming SlideShare
IFML - The interaction flow modeling language, the OMG standard for UI modeling. An intro
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Mobile extensions for OMG's IFML modeling language presented at MobiWIS conference

  1. 1. Extending the Interaction Flow Modeling Language (IFML) for Model Driven Development of Mobile Applications Front End Marco Brambilla1, Andrea Mauri1, Eric Umuhoza1,2 1 Dipartimento di Elettronica, Informazione e Bioingegneria. Politecnico di Milano 2 AtlanMod team, Ecole des Mines de Nantes Speaker: eric.umuhoza@polimi.it EricUmuhoza MobiWIS Conference, Barcelona, August 27-29 ,2014
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. IFML main concepts  Container  ViewComponent  Event  Action
  6. 6. IFML main concepts - 2  Navigation flow  Data flow  Parameter binding
  7. 7. IFML concrete syntax -example View Container Parameter Binding Event View Component Action Navigation Flow
  8. 8. 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, …)
  9. 9. 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
  10. 10. Mobile IFML  Two main motivation: –Complexity of interaction patterns to better exploit the limited space – Interaction with other hardware and software components(sensors, apps,…)
  11. 11. 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
  12. 12. Mobile IFML – Container & Components  Some concepts may be extended to better reflect the terminology and properties of mobile apps.  Plus <<MobileSystem>> stereotype
  13. 13. 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.
  14. 14. 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
  15. 15. Mobile IFML – MobileViewElementEvent  Events generated by the interaction of the user
  16. 16. Mobile IFML – MobileSystemEvent  Events produced by the mobile system
  17. 17. Mobile IFML – MobileActionEvent Screen MobileViewElementEvent MobileComponent MobileAction MobileActionEvent
  18. 18. Modeling tool - demo Open source project http://ifml.github.io Eclipse plugin available at https://ifml.github.io/update/site.xml
  19. 19. Code Generation
  20. 20. 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)
  • homarsanchez

    Oct. 4, 2015
  • thyuan

    Mar. 14, 2015

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.

Views

Total views

4,374

On Slideshare

0

From embeds

0

Number of embeds

2,038

Actions

Downloads

91

Shares

0

Comments

0

Likes

2

×