Master Thesis A DOMAIN-SPECIFIC LANGUAGE FOR UI-NAVIGATION IN MOBILE APPLICATIONS Peter Reuter University of Kaiserslautern [email protected] Sep 25, 2013 First Examiner: Prof. Dr. Arnd Poetzsch-Heffter Second Examiner: Dipl.-Inf. Axel Irriger Advisor: Dipl.-Inf. (FH) Andy Scherzinger STATEMENT OF AUTHORSHIP Except where reference is made in the text of this thesis, this thesis contains no material published elsewhere or extracted in whole or in part from a thesis presented by me for another degree or diploma. No other person's work has been used without due acknowledgement in the main text of the thesis. This thesis has not been submitted for the award of any other degree or thesis in any other tertiary institution. Kaiserslautern, Sep 25, 2013 Peter Reuter Abstract Developing mobile applications for the major mobile operating systems Android, iOS and Windows Phone 7 often requires re-development of functional similar applications multiple times. Furthermore, applications for similar business cases often use similar screens and screen flows. Software developers are therefore faced by the challenge of minimizing this effort. This master thesis presents a prototypical tool for the generation of native applications for mobile devices. To this end, typical navigation structures and concepts of mobile applications are captured by an abstract descriptions using a domain-specific language (DSL). This DSL supports developers while creating platform-independent specifications of screens and screen flows. Furthermore, a prototypical code generator is presented that is used to generate the concrete screens and the navigation between them. Mobile user interface pattern are used to provide a basic implementation for the different screens. Finally, the specification of a fictional application using the developed DSL is presented. The code generation approach of this thesis is demonstrated and evaluated using this fictional application. Kurzdarstellung Die Entwicklung mobiler Anwendungen für die meistgenutzten Betriebssysteme Android, iOS und Windows Phone 7 erfordert es, fachlich gleiche Anwendungen mehrfach zu entwickeln. Anwendungen für ähnliche Geschäftsszenarios verfügen zudem oft über ähnliche Dialoge und Dialogflüsse. Software-Entwickler stehen dabei vor der Herausforderung, den Aufwand an Neuentwicklung zu minimieren. Diese Masterarbeit präsentiert ein prototypisches Werkzeug zur Generierung von nativen Anwendungen für mobile Geräte. Dazu werden die typischen Navigationsstrukturen und -konzepte mobiler Anwendungen durch abstrakte Beschreibungen mittels einer Domänen-spezifischen Sprache (DSL) festgehalten. Diese DSL erlaubt das Ableiten Plattform-unabhängiger Spezifikationen von Dialogen und Dialogflüssen. Weiterhin wird ein prototypischer Generator präsentiert, der aus den abstrakten Dialog-Modellen alle konkreten Dialoge und den Code für die Navigation zwischen diesen generiert. Um eine Standard-Implementierung für Dialoge bereitzustellen werden Mobile User-Interface Pattern genutzt. Abschließend wird die Spezifikation einer fiktive Anwendung mittels der entwickelten DSL präsentiert. Anhand dieser Anwendung wird exemplarisch die Funktionsweise des vorgestellten Ansatzes demonstriert und evaluiert. Table Of Contents 1 Introduction......................................................................................................................................1 1.1 Motivation.................................................................................................................................1 1.2 Goals And Structure...............................................................................................................2 2 Methods, Techniques And Technologies.....................................................................................5 2.1 Foundations.............................................................................................................................5 2.1.1 Model-Based User Interface Development..................................................................5 2.1.2 Domain-Specific Languages..........................................................................................6 2.1.3 Xtext..................................................................................................................................8 2.1.4 User-interface Patterns..................................................................................................8 2.1.5 Patterns For Mobile UIs..................................................................................................9 2.1.6 Freemarker....................................................................................................................10 2.2 Existing Approaches.............................................................................................................11 2.2.1 Eclipse Android Development Tools...........................................................................11 2.2.2 Sencha Touch And Adobe Phonegap........................................................................13 2.2.3 Cross-compilation.........................................................................................................14 2.2.4 PhoneApps....................................................................................................................15 2.3 Summary................................................................................................................................16 3 The Mobile UI DSL.......................................................................................................................19 3.1 Analysis Of Mobile Applications..........................................................................................19 3.1.1 Navigation Concepts....................................................................................................20 3.1.2 Frequently Used Screens.............................................................................................22 3.2 Derived Requirements..........................................................................................................27 3.2.1 General...........................................................................................................................27 3.2.2 Navigation......................................................................................................................27 3.2.3 Screens..........................................................................................................................28 3.3 The MobileUI DSL................................................................................................................29 3.3.1 MobileUI DSL Grammar...............................................................................................29 3.3.2 Pattern DSL Grammar..................................................................................................34 3.3.3 Context Conditions........................................................................................................36 3.3.4 Semantics Of Nested Flows And Screens.................................................................36 3.4 Summary................................................................................................................................38 4 Tool Support..................................................................................................................................41 4.1 Eclipse Editors For DSL Instances.....................................................................................41 4.1.1 DSL Text Editors...........................................................................................................41 4.1.2 Visualization Of DSL Instances...................................................................................46 4.2 Code Generator For Android...............................................................................................47 4.2.1 Base Meta Template....................................................................................................48 4.2.2 Screen Templates.........................................................................................................49 4.2.3 Navigation Controller Architecture..............................................................................50 4.2.4 Generation Process......................................................................................................53 4.3 Summary................................................................................................................................54 5 Evaluation......................................................................................................................................57 5.1 Description And Specification.............................................................................................57 5.2 Code Generation...................................................................................................................59 5.3 Comparison With Traditional Development.......................................................................61 5.3.1 Initial Effort.....................................................................................................................61 5.3.2 Long-term Effort............................................................................................................62 5.4 Summary................................................................................................................................62