2015 2nd ACM International Conference on Mobile Software Engineering and Systems
Model-Driven Development of Cross-platform Mobile Applications with WebRatio and IFML Roberto Acerbis, Aldo Bongio, Stefano Butti
Marco Brambilla
WebRatio Srl. Como, Italy {firstname.lastname}@webratio.com
Politecnico di Milano, DEIB. Milano, Italy
[email protected]
Abstract— Model-driven development can concur to address the
II. THE INTERACTION FLOW MODELING LANGUAGE (IFML)
widespread need of companies for quick development of mobile applications, combined with the chronic shortage of IT personnel with the appropriate skills. In this context, we propose a comprehensive tool suite called WebRatio Mobile Platform for model-driven development of mobile applications. The tool supports developers in the specification of the domain model and of the interaction model for mobile applications. The specification is built according to an extended version of the OMG standard language called IFML (Interaction Flow Modeling Language), empowered with primitives tailored to mobile systems, that enable specification of mobile-specific behaviors. The tool features model-checking and full code generation that produces ready-to-publish cross-platform mobile applications exploiting the Apache Cordova framework. Index Terms—mobile application, social network, model driven development, IFML, Interaction Flow Modeling Language, code generation, cross-platform applications.
The Interaction Flow Modeling Language (IFML) [3] is a standard of the Object Management Group (OMG), supporting the platform independent description of graphical user interfaces for applications accessed or deployed on such systems as desktop computers, laptop computers, PDAs, mobile phones, and tablets. An IFML model supports the specification of: • The view structure, which consists of view containers, their nesting relationships, their visibility, and their reachability. • The view content, which consists of view components, i.e., content and data entry elements contained within view containers. • The events, which represent occurrences that may affect the state of the user interface. Events can be produced by the user's interaction, by the application, or by an external system. • The event transitions, which describes the effect of an event on the user interface. The effect of an event is represented by an interaction flow, which connects the event to the view container or component affected by the event itself and expresses a change of state of the user interface. • The reference to actions triggered by the user's events. • The reference to information structures (namely, data storage or in-memory data models) that holds the data to be displayed in the view. • The parameter binding, which consists of input-output dependencies between view components and between view components and actions. The methodological guidelines supporting the use of IFML are described in [2].
I. INTRODUCTION The widespread need of companies for quick development of mobile applications, combined with the chronic shortage of IT personnel with the appropriate skills for developing that kind of applications, makes it crucial to provide tools and methods for mobile app development that enable a wider set of professional roles and expertise to get involved in mobile development. A possible solution to this problem comes from the Modeldriven Software Engineering (MDSE) field [1], which proposes adoption of domain-specific modeling practices and, when possible, completely model-driven (MDD) methods. In this paper we describe our experience in extending IFML for the mobile domain [4] and we present the tool WebRatio Mobile Platform, a model-driven, low-code development platform based on Eclipse that generates fully-functional crossplatform mobile applications. The proposed IFML extensions come from extensive modeling experience on mobile application specification using the IFML standard, which covered both modeling of several well-known existing mobile applications (including CamScanner, Instagram, iPhone Gallery, FourSquare, Twitter, RedLaser, TripAdvisor and many others) and design and implementation of new mobile applications for industrial customers.
978-0-7695-5566-9/15 $31.00 © 2015 IEEE DOI 10.1109/MobileSoft.2015.49
III. MOBILE EXTENSIONS FOR IFML Mobile applications have rich interfaces that, together with mobility requirements and the availability of sensors, such as cameras and GPS, introduce features that are best captured by providing extensions of the IFML core, as allowed by the standard specification [5]. We envision three main categories of extensions: 170
applications. In February 2015, a new edition of the tool has been released under the name of WebRatio Mobile Platform, implementing the mobile-extended version of IFML and focusing specifically on mobile applications. It provides three integrated environments: • The modeling environment supporting the specification of IFML diagrams for the view description, UML class diagrams (or ER diagrams) for the information design, and optionally the integration with BPMN diagrams for the specification of business process aspects. • The development environment for supporting the implementation of custom components, at the purpose of allowing personalized extensions of the modeling language based on vertical needs or native functionalities, as well as custom data and system integration requirements. • The layout template and style design environment, which allows the highest possible level of UI sophistication, thanks to full support of HTML 5, CSS and JavaScript based styling. Based on the specifications provided by the developer through these environments, WebRatio provides model checking, full code generation, and groupwork and lifecycle management. The generated code consists of readyto-deploy cross-platform mobile applications, based on the open-source Apache Cordova framework, within the PhoneGap distribution. By default, WebRatio builds apps that are fully functional even when not connected to the Internet (offline mode). It also provides a built-in solution for read/write data synchronization between the mobile device and the back end. Use any existing back-end system with RESTful APIs or build your own backend using WebRatio Platform and one of our Cloud Plans. The generated code base of the App is “human readable” and maintainable, even outside WebRatio Mobile Platform. There are no proprietary or closed components in the App. The App architecture is based on open and “de facto” standard libraries, such as Angular.js, JData, and Ionic.
[XOR] Photo Shooter [D] [L] «system» CameraCanvas
PhotoAvailable Shoot Shoot
Se ngs
«Modal» CameraSettings
PhotoAvailable
[L] Viewer «ScrollableList» Photos
BlockSize=1
«DataBinding» Image «OrderBy» timestamp DESC
«system» MediaGallery «system» MediaGallery
OpenInMediaGallery
«BlockSize» 1
Fig. 1. Fragment of Mobile IFML model for taking a picture with the phone camera and browsing the photo gallery.
•
Context extensions cover Context Dimensions (allowing the selection of a Context or another) and ContextVariables (enabling the use of their value as parameters within the IFML models). • Container extensions include the specification of special kinds of containers for mobile devices. Namely, we define the concept of Screen as main IFML ViewContainer for mobile apps, and of System Containers providing consistent usage of common features of the operating system. Examples are the “Notifications” area or the “Settings” panel. • Component extensions include the concept of System Components too, default interface elements that provide basic functionality in a consistent manner to the application developer. An example is the media gallery present in most mobile platforms. • Sensors extensions include specific elements that allow the application interaction with the sensors (including the camera). • Event extensions mainly deal with management of multi-touch gestures. The gestures supported by touch devices include: touch and double touch, press, swipe and fling, drag, pinch in and out, and several more. To exemplify the use of IFML for mobile, Figure 1 shows an example model and the wireframe of its rendering. The “PhotoShooter” ViewContainer comprises a system ViewContainer “CameraCanvas”, which denotes the camera image viewer; the “Settings” event opens a modal window for editing the camera parameters and the “Shoot” event permits the user to shoot. When the image becomes available, a viewer is activated, from which an event permits the user to open the photo in the system media gallery. The internal viewer is modeled as a scrollable list, with block size = 1, to show one image at a time, and an OrderBy ViewComponentPart with a sorting criterion by timestamp, to present the last taken photo first.
REFERENCES [1] M. Brambilla, J. Cabot, M. Wimmer, “Model-Driven Software Engineering in Practice. Morgan & Claypool, USA, 2012. [2] M. Brambilla, P. Fraternali, Interaction Flow Modeling Language – Model-driven UI Engineering of Web and Mobile Apps with IFML. Morgan Kauffman, USA, 2014. [3] Brambilla, M., Fraternali, P., et al. Interaction Flow Modeling Language (IFML) 1.0. OMG Standard Spec. http://www.ifml.org [4] M. Brambilla, A. Mauri, E. Umuhoza, “Extending the Interaction Flow Modeling Language (IFML) for Model Driven Development of Mobile Applications Front End”, MobiWIS 2014, Springer LNCS 8640, pp. 176-191. [5] M Franzago, H. Muccini, I. Malavolta, “Towards a collaborative framework for the design and development of data-intensive mobile applications”. MOBILESoft 2014, pp. 5861.
IV. IMPLEMENTATION OF WEBRATIO WebRatio Platform is a model-driven low-code development tool (www.webratio.com) based on IFML, originally focusing on the design and development of Web
171
