UBICOMM 2016 : The Tenth International Conference on Mobile Ubiquitous Computing, Systems, Services and Technologies A Review of User Interface Description Languages for Mobile Applications Nikola Mitrovic´∗, Carlos Bobed∗y, Eduardo Mena∗y ∗Dept. of Computer Science & Systems Engineering University of Zaragoza, Spain yAragon Institute of Engineering Research (I3A), Spain Email: [email protected], fcbobed,[email protected] Abstract—Adapting a graphical user interface (GUI) for var- Android XML [9] or XAML [10], and did not consider ious user devices is still one of the most interesting topics today’s mainstream mobile devices and their market uptake. in today’s mobile computation. The benefits of separating the We analyze the features of mainstream UIDL languages, and specification of the GUI from its implementation are broadly accepted. However, it is not clear which are the benefits and evaluate them from the point of view of being used by disadvantages of current GUI specification languages in order to mobile applications to allow a dynamic adaptation of such define and develop multiplatform mobile applications which can specifications to heterogeneous modern mobile devices. We adapt dynamically to different devices with different features. focus on their ease of use, and the availability of visual In this paper, we review User Interface Description Languages tools, among other parameters. We consider the following (UIDLs) that can be used currently to specify GUIs in mainstream mobile platforms. We analyze their features and usefulness for two categories of UIDLs, based on their relationship with the dynamic adaptation of GUIs to heterogeneous mobile devices. All mobile platforms and Web browsers: reviewed UIDLs are suitable for developing mobile applications; however, there are no UIDLs that will truly be able to operate 1) UIDLs specific for mobile devices. These UIDLs are across multiple platforms. specifically developed for a particular mobile platform, Index Terms—Adaptive GUI; Mobile Computing. e.g., Android or iOS devices. 2) UIDLs associated with Web browsers. These UIDLs are I.I NTRODUCTION linked to one or more Web browsers, and can be used for mobile application development. The use of mobile devices and applications is increasing. Finally, for the purpose of this review, we use as an Adapting GUIs to different mobile devices is still one of the example a simple currency converter, which converts numeric most interesting problems in mobile computing as modern amounts between three currencies. This example application devices vary considerably in their properties (e.g., screen size, was developed for each UIDL that is reviewed in this paper resolution, user input controls). The benefits of working with in order to evaluate the usefulness of the provided tools, and User Interface Definition Languages (UIDLs) [1] to specify its applicability to multi-device and multi-platform use. Full GUI is that such a specification can be re-used and adapted specifications of the example application in different UIDLs to different devices automatically. This approach has been can be found in [11]. accepted by the GUI researchers a long time ago [2], and it has been applied to multiple devices in the Personal Digital The remainder of this paper is structured as follows. Sec- Assistant (PDA) era [3]. However, there does not exist yet a tion II presents the UIDLs used in popular mobile platforms. standard UIDL that is widely used by software developers, let In Section III, we review UIDLs that are associated with Web alone by mobile apps developers. browsers. In Section IV, we analyze and compare the above approaches. Finally, Section V gives some conclusions and In this paper, we review main User Interface Description future work. Languages (UIDLs) that can be used currently to specify GUIs in mainstream mobile platforms. While there is a II. UIDLS SPECIFIC FOR MOBILE DEVICES large number of research-based UIDLs (such as UIML [2], UsiXML [4], or Maria XML [5], to name a few), these UIDLs In this section, we review the UIDLs used in the market have limited support and implementation code outside their leading mobile platforms, namely, Android XML (Android) respective research institutions, and, thus, we will focus on and Storyboards (iOS); both platforms together reach a 92% the mainstream UIDLs that have strong adoption in at least of market share [12]. We also include other relevant UIDLs one of the significant technology ecosystems. for mobile devices such as XAML (Windows 10), and QML Previous UIDL reviews [6][7][8] focused on theoretical (Ubuntu OS). UIDLs, devices and platforms of the time, and their usefulness A. Android XML for Human-Computer Interaction adaptation in general, as opposed for mobile application suitability. These prior reviews Android is the most widely used operating systems when it did not analyze modern, industry accepted, UIDLs such as comes to mobile devices (i.e., smartphones and tablets): An- Copyright (c) IARIA, 2016. ISBN: 978-1-61208-505-0 96 UBICOMM 2016 : The Tenth International Conference on Mobile Ubiquitous Computing, Systems, Services and Technologies droid market share is estimated at 60.99%. It is a Linux- capabilities and adapt the interface, but it is the developer based operating system whose middleware, libraries, and APIs who is in charge of developing the application in a responsive are written in C. Android supports Java code as it uses a and plastic way [14]. Java-like virtual machine called Dalvik (substituted by ART The developer can specify behavioral aspects in Android from Android 5.x onward). In Fig. 1, we show an excerpt XML in different ways, such as event handling. Moreover, of the Android XML code of our example application and a within the Android XML document, the application developer screenshot rendered in an Android N emulator. can state implicit navigation via the definition of Intents, <LinearLayout objects which represent the intention of the application, and ... allows development of applications in a service oriented way. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" This service oriented model allows applications to use activi- android:text="Currency Converter" ties from other applications using a built-in broker mechanism. android:id="@+id/textView" /> <LinearLayout android:orientation="horizontal" ... > GUI and UIDL development can be performed using the <TextView ... android:id="@+id/textView2" android:text="Quantity:" /> Android Studio SDK’s visual editor. Android XML is suffi- <EditText ... android:id="@+id/Qty" .../> ciently developer-friendly and can be edited manually when </LinearLayout> <LinearLayout android:orientation="horizontal" ... > required, e.g., to refine GUI behavior. <TextView ... android:id="@+id/textView3" android:text="From:" /> B. Storyboards (iOS) <RadioGroup ... android:id="@+id/From"> <RadioButton ... android:id="@+id/eurFrom" android:text="Euros" ... /> Similarly to Android, Apple’s iOS also adopts a XML- <RadioButton ... android:id="@+id/usdFrom" driven interface via Storyboards [15]. Apple’s approach goes android:text="US Dollars" ... /> <RadioButton ... android:id="@+id/gbpFrom" further than Android: Storyboards use views (similar to An- android:text="British Pounds" ... /> droid’s activities), but they can also explicitly include naviga- </RadioGroup> <TextView ... tion aspects of user interaction in the GUI specification. Thus, android:id="@+id/textView4" a storyboard provides a comprehensive view of the whole android:text="To:" /> ... application and the workflow of interactions. </LinearLayout> <LinearLayout android:orientation="horizontal" ... The set of elements provided by iOS to define UIs does not <TextView ... android:id="@+id/textView5" contain some common visual elements such as radio and check android:text="Result:" /> <TextView ... android:id="@+id/output" /> button widgets (although the platform allows custom widgets </LinearLayout> to be developed if required). In Fig. 2, we present a screenshot <Button ... android:id="@+id/convert" android:text="Convert" /> of our example application rendered in iOS emulator; note that </LinearLayout> choices are made using switches, not radio or check buttons. We have not included the iOS storyboard code due to space limitation (the full code is available in [11]). Fig. 2. Sample app as rendered in iOS emulator from its storyboard Fig. 1. Excerpt of the Android XML specification and rendering for the specification. sample app. The model adopted by iOS devices is more closed than Android applications are built using Activities, which can the one adopted by Android. When developing applications be regarded as windows in a usual desktop environment, for iOS, the developer has lower heterogeneity of devices and Services, which are background processes without GUI. than Android, but the interface guidelines are more strictly Graphical User Interfaces are defined using a XML-based dictated by the environment. The definition of the application notation named Android XML [13][9]. appearance is done via a visual editor integrated in Apple’s Given the heterogeneity of Android devices, support for Xcode environment. While in Android (and other used UIDLs) GUI adaptation to different devices is provided using layout the interface definition can be easily defined (or at least elements and visual behavior policies. Android also provides edited) by the developer without visual help, storyboard XML further mechanisms to deal with different device display language