XXX-X-XXXX-XXXX-X/XX/$XX.00 ©20XX IEEE
A Model-Driven Framework for Android Supporting Cross-Platform GUI Development
Arsalan Ali1, Muhammad Rashid2, Farooque Azam1, Yawar Rasheed1, Muhammad Waseem Anwar1
1Department of Computer & Software Engineering, College of E&ME, National University of Sciences and Technology (NUST), H-12, Islamabad, Pakistan
2Computer Engineering Department, Umm Al-Qura University, Makkah, Saudi Arabia
[email protected], [email protected], [email protected], [email protected], [email protected]
Abstract—The rapid growth of users makes android application development one of the most focused areas in the software industry. Among others, the screen size is a considerable problem in developing mobile graphical user interfaces. Quite a work has been done in the field to solve this issue programmatically. However, truncated reusability and insufficient portability along with other challenges are posed, which results in multiple designs of an application that need to be maintained equally as major applications. This article introduces a novel model-driven framework that serves the purpose of a prompt development of responsive User Interfaces (UI) for various screen sizes. Particularly a Meta Model is proposed. As tool support, a Sirius graphical modeling tool has also been developed. Furthermore, Model to Text Transformation code has been written using Acceleo language to transform the modeled UI scenario into an executable Java and XML code. The framework allows modeling of UI scenarios using our graphical modeling tool and generates executable platform-specific code (Java & XML) resulting in prompt development of a complex application with simplicity. The applicability of the proposed framework has been demonstrated by developing a mobile application as a case study.
Keywords—Model-Driven Development, Android Application, Graphical User Interface, Multiple Screens, Meta-Model, Sirius tool
I. INTRODUCTION
Model-Driven Development, which is also known as MDD, is a development approach in the area of Software Engineering that uses models to develop the software product instead of writing a bunch of code. The MDD gives these privileges to users that it generates almost complete native code for the software through the designed model [1]. Despite notable benefits, it has not been adopted because of inconvenient modeling tools and code generators. Models can become complex enough that could be troublesome for handling. However, it can be tackled through smart modeling [1]. In other words, it is believed that the model-drive approach could reduce this task up to great extent.
On the applications side, users increasingly demand applications with adaptive interfaces that dynamically modify in every screen size. Thus, developing graphical user interfaces (GUIs) with runtime adaptation capabilities is becoming more and more a major issue. So, the movie has been made to solve this major issue, where the model will be capable of generating error-free code for supporting different screen sizes [2].
In addition to the runtime adaptation capabilities, Android Applications are developed in the JAVA programming language. It also provides many good, useful APIs (Application Programming Interface) which help in developing android based applications [3]. Android User Interface is developed in a hierarchy of Views, Layouts, and
Widgets [4]. Moreover, Android provides a variety of standard platform resources that can be used in designing and developing graphical user interfaces [5].
In this paper a framework has been proposed, as shown in Figure 1, that is composed of a Meta Model in which the concept of Android GUI has been mapped that will eventually support multiple screens. This paper has implemented a Model-to-Text transformation [6] of the model in Android-specific code which is JAVA and XML code. The model-to-Text transformation has been conducted through Acceleo, it is an Eclipse extension that transforms ECORE Model to Text [7] [8].
II. LITERATURE REVIEW
A comprehensive literature review has been conducted to gather information regarding the topic. During this process, the focus was one of those articles and papers which have some relevance to this paper’s topic.
In the paper [9], the author presented a framework using a model-driven approach to produce scaffolding code that they generated for web and mobile platforms. The writer has used UML-based Domain-Specific Modeling Language to develop their framework and generated code through that model. On the other hand, the author of the paper [10]
proposed a UML profile for Mobile App’s State Management, where they have conducted the management of mobile app states. Through the proposed model they handled app states.
The author of the paper [11] presented a model for Android and IOS Application development. The goal of the paper was to develop flexible applications at a higher abstraction level. The author believed that through model- driven development, it would be possible for a developer to produce applications rapidly at a low cost for multipurpose based on application role. In [12] the authors have conducted a Systematic Literature Review (SLR) for Model-Driven
Figure 1: Research Methodology
Development in the field of Mobile Application development. The research that they have conducted is basically about different Model Driven Tools and Approaches which are being used in the industry to develop mobile applications. Furthermore, the authors have deduced around 11 model-driven techniques among which this paper will use UML Class diagram for its meta-model, and 21 and 8 tools and modeling languages respectively.
Quite many model-driven techniques are up for grabs in the literature for developing graphical user interfaces using modeling. As detailed in [13] the authors have applied modeling methodology to develop user interfaces for rich internet using the MVC framework. In this Literature, most of the proposed web-based user interface created using a model-driven approach. As also in [14] authors proposed a model for the creation of web-based user interfaces using IFML and ontologies. IFML is used to capture the interactions of the user with the system. Moreover, it has been noticed that previously the models which have been designed for GUI creation are static and no such Model Drive technique has been applied to make it dynamic. However, in [15], the authors proposed a framework for creating storyboards for web-based user interfaces based on a model- driven approach. In [16], the authors proposed A Novel Framework and Tool for Multi-Purpose Modeling of Physical Infrastructures. In the paper, writers proposed the novel framework for physical infrastructure based on a model- driven approach. It was observed in the paper [17], that the author has conducted a comprehensive study on the Designing of Graphical User Interface for cross-platform Applications using Model-driven Software engineering technique. He followed UML2 for modeling and generated code in the Xamarin tool. In this study, the author targeted Windows, IOS, and the Android platform. In this paper [18], the author proposed a new approach to design the graphical user interface for mobile and web applications, he took all mobile platforms and web based-components to an abstraction level and defined a language for the development of user interfaces for that generalized group, the Technology which he used is Domain-specific language (DSL). Further, he added that then DSL is used to generate code for all the required platforms. In another article [19] the writer conducted similar work but from different mobile platforms, they used a UML class diagram for the model and generated C# and XAML code using Acceleo as a transformation language to generate code for Windows-based Mobile phones.
The paper [20] discusses the template-based approach for a model to text transformation using Acceleo. It proposed code generation for heterogeneous mobile applications. The authors have written a code template for windows and android mobiles.
The comprehensive study was conducted in reference with Design of Graphical User Interface for multiple screens, hence it is deduced that a lot of work which has already been done in the related fields is mostly focused on the following areas: -
1) Generating code of UI for mobile applications, 2) GUI generation for cross-platform mobile application development, 3) A meta-model for Automated Code Generation for Mobile App, 4) A meta-Model for Code Generation for multiplatform mobile App, 5) A meta-Model
for mobile game development, and 6) A meta-Model for cross-platform GUI.
In the paper, the research has been conducted to design a Model-based framework for Generating GUI for Android to support multiple screens. During the Literature it was noted that particularly very limited work has been done in this area.
So, our focus is on developing such a model that could be able to generate a graphical user interface supporting different screen sizes in the Android platform. This framework includes the ECORE model, Sirius Tool, and lastly code generation from the model using the Template- based approach in Acceleo.
III. PROPOSED FRAMEWORK
The proposed framework includes an M2 level meta- model, a Sirius Tool Support, and an Acceleo Transformation. The study has been conducted to design a framework that can allow creating GUI which supports different screens in the Android platform. Conventional development will take more time and cost and make the program complex. We will be using ECORE Modeling Concept for our meta-model, it maps Android concepts. The meta-model has been designed by following Android GUI elements standards that are available at [21]. The basic UI components in the Android Platform are View which is a main panel at the top level all other elements lie under it.
View Group is composed of multiple views. Constraint Layout plays a vital role to make the user interface adaptive in Android. The mentioned elements are used in designing a sophisticated user interface in Android. Furthermore, Sirius Tool Support allows graphical representation of a model at the M1 level using concepts of the meta-model. Lastly in Acceleo, the transformation has been conducted to transform the model into executable JAVA and XML code by using template-based transformation rules [22].
A. Proposed Meta Model
The meta-model for Automated User Interface Creation in Android for multiple Screen Sizes has been modified taking the guidance from work presented in [23]. Figure 2 is the proposed meta-model. The Metamodel, models basic Android Functionalities, a root class named Android Model compose all other classes of the model. Android App class is associated with Activity class and Screen class, and they have 0-to-many relationships. Each application has then its screen configuration; which in our case has 4 screens. The developer can either use basic 4 screen sizes or uses its screen sizes by providing values of dpi for the x-axis and y-axis separately.
Activity is considered a vital part of the Android App; Activity encapsulated every other element of the Android platform. A user interacts with Activity. Furthermore, the activity class is associated with the Constraint Layout class and has 0 to many relationship, further constraint layout is associated with the View and Element class. The model for now only operates for constraint layout. In android constraint layout is used as a container for interfaces, to use the layout in portions we can add views through the View class in it. The view is also a type of layout, its purpose is to allow the developer to operate the screen in multiple portions. If a view is not used, then itself the whole layout is considered as one view by default. At the bottom Element Class, which is associated with View and Constraint layout class, contains everything which an app could have from a small button to a large video player view.
In the model, these elements have been grouped in three different categories which are “Text”, “Buttons”, and
“Widgets”. The model is designed for a simple prototype of the android app, therefore, few elements have been excluded.
B. Tool Support
Tool Support has been provided using the Sirius tool. It provides the graphical representation of the model as can be seen in Figure 3.
Sirius Tool section in the specification editor is used to design the palette of the graphical editor. Palette allows to drag and drop the items in the graphical editor to create the model at the M1 level using concepts of the meta-model. All
the work has been carried out in the OBEO environment which is an extension of the Eclipse Platform.
C. Acceleo Model to Text Transformation
Acceleo is an extension of the OBEO environment, which provides the platform to transform models into text. Model to Text transformation has been conducted to validate the correctness of the model. The transformation has been done by following a template-based approach in the Acceleo
environment which is an extension of the OBEO tool. Figure 4 shows a snapshot of some parts of transformation rules. For this purpose, we have followed the case study model and generated executable JAVA and XML code which when run in Android Studio will display UI. Total two JAVA files and Figure 2: Proposed Meta-Model
Figure 3: Case Study Model Developed Using Graphical Model Tool
8 files of XML code were generated compatible with to Android platform. In the transformation, the case study model has been used and generated executable code for Android. For the model to text transformation, inspiration has been taken from [25], [25] and [26].
IV. PROOF OF CONCEPT A. Narrative
In Software World There is a need for authorization, in every application User Registration is needed to register the user and login to allow authorized users only to enter the system. So, as a case study, a prototype of an Android application for User Registration and User Login has been validated using the concepts of the meta-model. This is a dummy application that doesn’t have any backend working mechanism. The instance model has been provided with tool support which includes a graphical view. In this view, the model can be created by dragging nodes and edges from the palette to the graphical view, as shown on the right side of Figure 3. It has been noticed that every application that needs user authentication loads with Login Activity, to allow a user to enter credentials, and if the user is not registered then it can, by entering data in Registration Activity. So, these activities have been mapped here in the instance model, using the concept of the meta-model. The dummy Android Application has been named “Users Management” which maps the Android App Class of the meta model. Further, it has two activity classes one with the name of Login, this activity can be used for signing into the system, and another with the name of Registration, which can be used for registration. “Login Activity” maps that concept of user sign-in/login. It contains one constraint layout that further contains two Text Views (Labels) and Text Fields each for allowing a user to insert credentials. Moreover, it has two Buttons for Sign in and Registration respectively. On the other hand, the second Activity which is “Registration Activity” in the app depicts quite a complex concept. It contains two views under constraint layout. In the 1st view, we have included the Image view, which will allow the user
to upload his/her profile picture. The 2nd view contains all other elements required for user registration, such as Text views and fields for username, email, and password each with its types. And a Button for Sign up. And importantly this
Android project will support three different screen sizes as Small, Medium, and large screen.
B. Transformation
Model to Text Transformation has been conducted to validate the correctness of the model. The transformation has been done by following a template-based approach in the Acceleo environment which is an extension of the OBEO tool.
For this purpose, we have followed the case study model and generated code of JAVA and XML according to the case study model. As shown in Figure 4 two template-based rules have been created each for generated JAVA-based code and XML- based code. However, there were few transformations loses as the model does not support the whole android functionality.
To run this code, we must copy it in android studio manually.
V. DISCUSSION
This article introduces a novel model-driven framework that serves the purpose of a prompt development of responsive User Interfaces for different screen sizes. The proposed framework includes an M2 level Ecore Model/
Meta Model. Moreover, as tool support, a Sirius graphical modeling tool has also been developed (using Sirius).
Furthermore, Model to Text Transformation code has been written using Acceleo language to transform the modeled UI scenario into executable Java and XML code. The model composes limited concepts of Android Environment thus needs to hardcode some aspects such as the vertical and horizontal bias of an element. There exist few GUI creation frameworks [10], [11], and [12], but they do not provide support for multiple screen sizes. We have implemented only constraint layout while it can be expanded to other layouts as well which behave differently in different conditions. Hence, this framework is flexible enough to be adapted according to Figure 4: Transformation Rules
the needs. The generated code needs to be imported into the Android platform to serve the purpose because the model does not map the whole Android Concept. To run the code in Android OS, it should be transferred to the android platform manually. The Acceleo which is an extension of Eclipse is used in the Obeo environment to support Model-to-Text transformation. The left side of Figure 5 depicts the generated code which is executable, whereas the right side of the same figure depicts the user interface.
The main aim of the research is to mitigate development costs and time and allow prompt development. As in native development, it would take a lot of effort in writing and maintaining code. So, via modeling, a lot of time and effort has been saved and the process of code generation has been automated by writing model to text transformation rules that generate executable Java and XML code for android. In this manner, developer productivity has also been enhanced.
Currently, our proposed framework does not cover detailed concepts to support complete android development.
At present, our framework is applicable for making prototype android applications and can be applied when using constraint layout and without including external APIs’ and libraries, however, it will be extended for such features in the future.
VI. CONCLUSION
This article introduces a novel model-driven framework that serves the purpose of a prompt development of responsive User Interfaces for different screen sizes. The proposed framework includes an M2 level Ecore Model/
Meta Model. Moreover, as tool support, a graphical modeling tool has also been developed (using Sirius). Furthermore, Model to Text Transformation code has been written using Acceleo language to transform the modeled UI scenario into executable Java and XML code. The framework allows modeling of UI scenarios using our graphical modeling tool and generates executable platform specific code (Java &
XML) resulting into prompt development of a complex application with simplicity. The applicability of the proposed framework has been demonstrated by developing a simple
mobile app as a case study. The results prove that our proposed framework can be reliably used for the model- driven development of android applications for multiple screen sizes.
In the future, we intend to incorporate more advanced concepts into our meta-model, so that it may allow the modeling of more complex android applications along with user interfaces. We also intend to integrate the android project
creation process as well. We further desire to include functionalities/ concepts to support complex Graphical User Interface in android for different screens such as smartwatches, TV, and other Smart Wears.
VII. REFERENCES
[1] M. Rashid, M. W. Anwar, A. M. Khan, "Towards the Tools Selection in Model Based System Engineering for Embedded Systems - A Systematic Literature Review, " Journal of Systems and Software, vol.
106, pp.150-163, May 2015.
[2] Benouda, H. Azizi, M. Esbai, R. Moussaoui and Mimoun, "Code generation approach for mobile application using acceleo,"
International Review on Computers and Software (IRECOS), vol. 11, no. 2, pp. 160-166, 2016.
[3] "Android," Android, [Online]. Available:
https://www.android.com/what-is-android/. [Accessed March 2020].
[4] "MindOrks," MindOrks Nextgen Private Limited, [Online].
Available: https://blog.mindorks.com/android-user-interface-view- components. [Accessed March 2020].
[5] S. Smith, "Chron," Smallbusiness, [Online]. Available:
https://smallbusiness.chron.com/android-gui-programming- 33253.html. [Accessed March 2020].
[6] M. Rashid, M. W. Anwar, "A systematic investigation of tools in model based system engineering for embedded systems, " 11th IEEE System of Systems Engineering Conference, pp. 1-6, Kongsberg, Norway, June 2016.
[7] "GUI Elements," WorldViz, [Online]. Available:
https://docs.worldviz.com/vizard/latest/GUI_elements.htm.
[Accessed March 2020].
[8] M. Rashid, M. W. Anwar, F. Azam and M. Kashif, "Model-based requirements and properties specifications trends for early design Figure 5: Generated Code and User Interface
verification of embedded systems", 11th IEEE System of Systems Engineering Conference, pp. 1-7, Kongsberg, Norway, June 2016.
[9] Inayatullah, M. F. Azam and M. W. Anwar, "Model-Based Scaffolding Code Generation for Cross-Platform Applications," in 2019 IEEE 10th Annual Information Technology, Electronics and Mobile Communication Conference (IEMCON), IEEE, 2019, pp.
1006-1012.
[10] M. Khan, F. Azam, M. W. Anwar, F. Samea and M. A. Ahmed, "A Model Driven Approach for State Management in Mobile Applications," in Proceedings of the 2019 8th International Conference on Software and Computer Applications, 2019, pp. 315- 319.
[11] Vaupel, Steffen, Taentzer, G. Gabriele, Guckert and Michael, "Model- driven development of mobile applications for Android and iOS supporting role-based app variability," Software & Systems Modeling, vol. 17, no. 1, pp. 35-63, 2018.
[12] H. Tufail, F. Azam, M. W. Anwar and I. Qasim, "Model-driven development of mobile applications: A systematic literature review,"
in 2018 IEEE 9th Annual Information Technology, Electronics and Mobile Communication Conference (IEMCON), IEEE, 2018, pp.
1165-1171.
[13] S. Roubi, M. Erramdani and S. Mbarki, "Modeling and generating graphical user interface for MVC rich internet application using a model driven approach," in 2016 International Conference on Information Technology for Organizations Development (IT4OD), IEEE, 2016, pp. 1-6.
[14] N. Laaz and S. Mbarki, "A model-driven approach for generating RIA interfaces using IFML and ontologies," in 2016 4th IEEE International Colloquium on Information Science and Technology (CiSt), 2016.
[15] Y. Rasheed, F. Azam, M. W. Anwar and H. Tufail, "A model-driven approach for creating storyboards of web based user interfaces," in Proceedings of the 2019 7th International Conference on Computer and Communications Management, 2019.
[16] Y. Rasheed, F. Azam and M. W. Anwar, "A novel framework and tool for multi-purpose modeling of physical infrastructures," in Proceedings of the 12th International Conference on Computer Modeling and Simulation, 2020.
[17] S. Rehman, R. M. K. Ullah, S. Tanvir and F. Azam, "Development of user interface for multi-platform applications using the model driven software engineering techniques," in 2018 IEEE 9th Annual Information Technology, Electronics and Mobile Communication Conference (IEMCON), 2018.
[18] M. Lachgar and A. AbdelmounaIM, "Modeling and enerating the user interface of mobile devices and web development with DSL," Journal of Theoretical & Applied Information Technology, vol. 72, no. 1, 2015.
[19] H. Benouda, M. Azizi, M. Moussaoui and R. Esbai, "Automatic code generation within MDA approach for cross-platform mobiles apps,"
in 2017 First International Conference on Embedded & Distributed Systems (EDiS), 2017.
[20] W. Y. Kim, H. S. Son and R. Y. C. Kim, "Design of code template for automatic code generation of heterogeneous smartphone application,"
in International Conference on Advanced Communication and Networking, 2011.
[21] "Android Developers," Android, [Online]. Available:
https://developer.android.com/guide/topics/ui. [Accessed March 2020].
[22] "Android Developer," Android, [Online]. Available:
https://developer.android.com/training/multiscreen/screensizes.
[Accessed March 2020].
[23] W. Bouchelligua, A. Mahfoudhi and M. Abed, "Model Driven Adaptation and Usability for Context Aware User Interfaces,"
International Journal of Computer Applications, vol. 54, no. 3, 2012.
[24] M. W. Anwar, M. Rashid, F. Azam, M. Kashif, "Model-Based Design Verification for Embedded Systems through SVOCL: An OCL Extension for SystemVerilog," Design Automation for Embedded Systems, vol. 21, no. 1, February 2017.
[25] M. W. Anwar, M. Rashid, F. Azam, A. Naeem, M. Kashif and W. H.
Butt, "A unified model-based framework for the simplified execution of static and dynamic assertion-based verification," IEEE Access, vol.
8, pp. 104407-104431, 2020.
[26] M. W. Anwar, M. Rashid, F. Azam, M. Kashif and W. H. Butt, "A model-driven framework for design and verification of embedded systems through SystemVerilog," Design Automation for Embedded Systems, vol. 23, no. 3, pp. 179-223, 2019.
