Generating native user interfaces formultiple devices by means ofmodel transformation

Abstract

In the last years, the types of devices used to access information systems have notably increased using different operating systems, screen sizes, interaction mechanisms, and software features. This device fragmentation is an important issue to tackle when developing native mobile service front-end applications. To address this issue, we propose the generation of native user interfaces (UIs) by means of model transformations, following the modelbased user interface (MBUI) paradigm. The resulting MBUI framework, called LIZARD, generates applications for multiple target platforms. LIZARD allows the definition of applications at a high level of abstraction, and applies model transformations to generate the target native UI considering the specific features of target platforms. The generated applications follow the UI design guidelines and the architectural and design patterns specified by the corresponding operating system manufacturer. The objective is not to generate generic applications following the lowest-common-denominator approach, but to follow the particular guidelines specified for each target device. We present an example application modeled in LIZARD, generating different UIs for Windows Phone and two types of Android devices (smartphones and tablets).

Keywords

Model-to-model transformation / Native user interfaces / Model-based user interfaces / Model-driven engineering

References

[1] Abrams, M., Phanouriou, C., Batongbacal, A.L., , 1999. UIML: an appliance-independent XML user interface language. Comput. Networks, 31(11-16):1695–1708.

[2] Ali, M.F., 2004. A Transformation-Based Approach to Building Multi-platform User Interfaces Using a Task Model and the User Interface Markup Language. Faculty of the Virginia Polytechnic Institute and State University.

[3] Ali, M.F., Perez-Quiñnes, M.A., Abrams, M., , 2002. Building multi-platform user interfaces with UIML. Computer-Aided Design of User Interfaces III, p.255-266.

[4] Android Developers, 2015. Fragments Developers. The Android Fragments API.

[5] Aquino, N., Vanderdonckt, J., Condori-Fernández, N., , 2010. Usability evaluation of multi-device/platform user interfaces generated by model-driven engineering. Proc . ACM-IEEE Int. Symp. on Empirical Software Engineering and Measurement, p.30.1–30.10.

[6] Arendt, T., Biermann, E., Jurack, S., , 2010. Henshin: advanced concepts and tools for in-place EMF model transformations. Proc. 13th Int. Conf. on Model Driven Engineering Languages and Systems: Part I, p.121–135.

[7] Berti, S., Correani, F., Mori, G., , 2004. TERESA: a transformation-based environment for designing and developing multi-device interfaces. Proc. CHI Extended Abstracts on Human Factors in Computing Systems, p.793–794.

[8] Cabot, J., 2013. Movisa: a DSL Tool for Human Machine Interfaces (HMI) in Industrial Automation.

[9] Calvary, G., Coutaz, J., Thevenin, D., , 2003. A unifying reference framework for multi-target user interfaces. Interact. Comput., 15(3):289–308.

[10] Caminero, J., Rodríguez, M.C., Vanderdonckt, J., , 2012. The SERENOA project: multidimensional context-aware adaptation of service front-ends. Proc. 8th Int. Conf. on Language Resources and Evaluation, p.2977–2984.

[11] Campbell, D.T., Fiske, D.W., 1959. Convergent and discriminant validation by the multitrait-multimethod matrix. Psychol. Bull., 56(2):81–105.

[12] Chin, J.P., Diehl, V.A., Norman, K.L., 1988. Development of an instrument measuring user satisfaction of the human-computer interface. Proc. SIGCHI Conf. on Human Factors in Computing Systems, p.213–218.

[13] Clarius, 2015. Funq: a Fast DI Container You Can Understand.

[14] Cook, W.R., 1991. Object-oriented programming versus abstract data types. Proc. REX School/Workshop on Foundations of Object-Oriented Languages, p.151–178.

[15] Degrandsart, S., Demeyer, S., van den Bergh, J., , 2014. A transformation-based approach to contextaware modelling. Softw. Syst. Model., 13(1):191–208.

[16] Forax, R., Duris, E., Roussel, G., 2000. Java multi-method framework. Proc. Int. Conf. on Technology of Object-Oriented Languages and Systems, p.45–56.

[17] Fowler, M., 2004. Inversion of Control Containers and the Dependency Injection Pattern. Available from http://martinfowler.com/articles/injection.html

[18] Gamma, E., Helm, R., Johnson, R., , 1994. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley Professional, Boston, MA, USA.

[19] Georges, A., Buytaert, D., Eeckhout, L., 2007. Statistically rigorous Java performance evaluation. ACM SIGPLAN Not., 42(10):57–76.

[20] Hennig, S., Braune, A., 2011. Sustainable visualization solutions in industrial automation with Movisa—a case study. IEEE Int. Conf. on Industrial Informatics, p.634–639.

[21] HIIS Laboratory, 2015. The CAMELEON Reference Framework. Plasticity of User Interfaces. Available from http://giove.isti.cnr.it/projects/cameleon.html

[22] Limbourg, Q., Vanderdonckt, J., 2004. UsiXML: a user interface description language supporting multiple levels of independence. Engineering Advanced Web Applications:Proc. Workshops in Connection with the 4th Int. Conf. on Web Engineering, p.325–338.

[23] Limbourg, Q., Vanderdonckt, J., 2009. Multipath transformational development of user interfaces with graph transformations. Human-Centered Software Engineering—Software Engineering Models, Patterns and Architectures for HCI, p.107–138.

[24] Marcotte, E., 2011. Responsive Web Design. Jeffrey Zeldman, New York, NY, USA.

[25] Mens, T., van Gorp, P., 2006. A taxonomy of model transformation. Electron. Notes Theor. Comput. Sci., 152:125–142.

[26] Meskens, J., Vermeulen, J., Luyten, K., , 2008. Gummy for multi-platform user interface designs: shape me, multiply me, fix me, use me. Proc. Working Conf. on Advanced Visual Interfaces, p.233–240.

[27] Miravet, P., Marin, I., Ortin, F., , 2014a. Framework for the declarative implementation of native mobile applications. IET Softw., 8(1):19–32.

[28] Miravet, P., Ortin, F., Marin, I., , 2014b. Using standards to build the DIMAG connected mobile applications framework. Comput. Stand. Interf., 36(2):354–367.

[29] Molina, A.I., Giraldo, W.J., Gallardo, J., , 2012. CIAT-GUI: a MDE-compliant environment for developing graphical user interfaces of information systems. Adv. Eng. Softw., 52:10–29.

[30] Neil, T., 2012. Mobile Design Pattern Gallery. Addison-Wesley, Sebastopol, CA, USA.

[31] Ortin, F., 2011. Type inference to optimize a hybrid statically and dynamically typed language. Comput. J., 54(11):1901–1924.

[32] Ortin, F., Garcia, M., 2011. A type safe design to allow the separation of different responsibilities into parallel hierarchies. Evaluation of Novel Approaches to Software Engineering, p.15–25.

[33] Ortin, F., Zapico, D., Cueva, J.M., 2007. Design patterns for teaching type checking in a compiler construction course. IEEE Trans. Educ., 50(3):273–283.

[34] Ortin, F., Quiroga, J., Redondo, J.M., , 2014. Attaining multiple dispatch in widespread object-oriented languages. DYNA, 81(186):242–250.

[35] Paternò F., Mancini, C., Meniconi, S., 1997. ConcurTask-Trees: a diagrammatic notation for specifying task models. Proc. IFIP TC13 Int. Conf. on Human-Computer Interaction, p.362–369.

[36] Paternò F., Santoro, C., Spano, L.D., 2009. MARIA: a universal, declarative, multiple abstraction-level language for service-oriented applications in ubiquitous environments. ACM Trans. Comput.-Human Interact., 16(4):19.1-19.30.

[37] Paternò F., Santoro, C., Spano, L.D., 2011. Engineering the authoring of usable service front ends. J. Syst. Softw., 84(10):1806–1822.

[38] Pausch, R., Conway, M., Deline, R., 1992. Lessons learned from SUIT, the simple user interface toolkit. ACM Trans. Inform. Syst., 10(4):320–344.

[39] Rajapakse, D.C., 2008. Fragmentation of Mobile Applications. In: Alencar, P., Cowan, D. (Eds.), Handbook of Research on Mobile Software Engineering. Engineering Science Reference, Hershey, PA, USA.

[40] Serenoa, 2012. Multi-dimensional Context-Aware Adaptation of Service Front-Ends. Deliverable 2.1.2 CARF and CADS (R2).

[41] Smith, J., 2009. WPF Apps with the Model-View-ViewModel Design Pattern. MSDN Mag., 2(1):1–19.

[42] The Eclipse Foundation, 2015a. EMF, the Eclipse Modeling Framework. Available from https://www.eclipse.org/modeling/emf

[43] The Eclipse Foundation, 2015b. EMP, the Eclipse Modeling Project. Available from https://projects.eclipse.org/projects/modeling

[44] The Eclipse Foundation, 2015c. Epsilon Generation Language. Available from http://www.eclipse.org/gmt/epsilon/doc/egl

[45] The Eclipse Foundation, 2015d. Xtend, Java 10 Today! Available from http://www.eclipse.org/xtend

[46] Tichy, M., Krause, C., Liebel, G., 2013. Detecting performance bad smells for Henshin model transformations. Workshop on the Analysis of Model Transformations, p.82-86.

[47] Tran, V., Vanderdonckt, J., Kolp, M., , 2009. Generating user interface from task, user and domain models. Int. Conf. on Advances in Human-oriented and Personalized Mechanisms, Technologies, and Services, p.19–26.

[48] van den Bergh, J., Luyten, K., Coninx, K., 2011. CAP3: context-sensitive abstract user interface specification. Proc. 3rd ACM SIGCHI Symp. on Engineering Interactive Computing Systems, p.31–40.

[49] Vanderdonckt, J., Limbourg, Q., Michotte, B., , 2004. UsiXML: a user interface description language for specifying multimodal user interfaces. W3C Workshop on Multimodal Interaction, p.19–20.

[50] W3C, 2010a. Model-Based UI XG Final Report. W3C Incubator Group Report. Available from https://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui/

[51] W3C, 2010b. Model-Based User Interface (MBUI). W3C Incubator Group Report. Available from http://www.w3.org/2005/Incubator/model-based-ui

[52] W3C, 2012. Media Queries. W3C Recommendation. Available from http://www.w3.org/TR/css3-mediaqueries

[53] Zenger, M., Odersky, M., 2005. Independently extensible solutions to the expression problem. Int. Workshop on Foundations of Object-Oriented Languages, p.1–11.

RIGHTS & PERMISSIONS

Zhejiang University and Springer-Verlag Berlin Heidelberg