Full Text:   <904>

Summary:  <361>

CLC number: TP311

On-line Access: 2015-12-07

Received: 2015-03-19

Revision Accepted: 2015-08-26

Crosschecked: 2015-11-11

Cited: 0

Clicked: 1807

Citations:  Bibtex RefMan EndNote GB/T7714


Francisco Ortin


-   Go to

Article info.
Open peer comments

Frontiers of Information Technology & Electronic Engineering  2015 Vol.16 No.12 P.995-1017


Generating native user interfaces for multiple devices by means of model transformation

Author(s):  Ignacio Marin, Francisco Ortin, German Pedrosa, Javier Rodriguez

Affiliation(s):  Department of Research and Development, CTIC Foundation, Gijon 33203, Spain; more

Corresponding email(s):   info@fundacionctic.org, ortin@uniovi.es

Key Words:  Model-to-model transformation, Native user interfaces, Model-based user interfaces, Model-driven engineering

Share this article to: More |Next Article >>>

Ignacio Marin, Francisco Ortin, German Pedrosa, Javier Rodriguez. Generating native user interfaces for multiple devices by means of model transformation[J]. Frontiers of Information Technology & Electronic Engineering, 2015, 16(12): 995-1017.

@article{title="Generating native user interfaces for multiple devices by means of model transformation",
author="Ignacio Marin, Francisco Ortin, German Pedrosa, Javier Rodriguez",
journal="Frontiers of Information Technology & Electronic Engineering",
publisher="Zhejiang University Press & Springer",

%0 Journal Article
%T Generating native user interfaces for multiple devices by means of model transformation
%A Ignacio Marin
%A Francisco Ortin
%A German Pedrosa
%A Javier Rodriguez
%J Frontiers of Information Technology & Electronic Engineering
%V 16
%N 12
%P 995-1017
%@ 2095-9184
%D 2015
%I Zhejiang University Press & Springer
%DOI 10.1631/FITEE.1500083

T1 - Generating native user interfaces for multiple devices by means of model transformation
A1 - Ignacio Marin
A1 - Francisco Ortin
A1 - German Pedrosa
A1 - Javier Rodriguez
J0 - Frontiers of Information Technology & Electronic Engineering
VL - 16
IS - 12
SP - 995
EP - 1017
%@ 2095-9184
Y1 - 2015
PB - Zhejiang University Press & Springer
ER -
DOI - 10.1631/FITEE.1500083

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 model-based 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).

The authors submitted an extensive paper on the generation of native user interfaces using an MDE approach. This study presents LIZARD, a model-based framework for generating user interfaces that are native to various operating systems of different platforms based on model trasformation, design guidelines that are specific to each platform/system, and design patterns that are applicable to this context. In particular, it introduces a variation of the Cameleron Reference Framework (CRF) in which model-based user interface design is structured into four layers. Instead of doing so, LIZARD introduces a platform-specific model that addresses the specific aspects of a platform running a particular operating system. A running example is demonstrated for three native user interfaces: a Windows Phone smartphone, an Android tablet, and an Android smartphone.


目的:近年来,使用不同操作系统、屏幕尺寸、交互机制和软件特征访问信息系统的终端种类不断增加。为此,本研究解决开发原生移动服务前端应用(front-end applications)过程中终端类型碎片化(fragmentation)问题。
结论:本文给出一个示例,使用LIZARD建模,可以分别生成用于Windows Phone、Android智能手机、Android平板等不同终端用户界面。评估结果显示,对于这三种应用,用户平均满意度全部超过7.7分(满分9分)。LIZARD原型、源代码及文中给出的应用示例,可从https://bitbucket.org/fundacionctic/lizard自由获取。


Darkslateblue:Affiliate; Royal Blue:Author; Turquoise:Article


[1]Abrams, M., Phanouriou, C., Batongbacal, A.L., et al., 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ñones, M.A., Abrams, M., et al., 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. Available from http://developer.android.com/guide/components/frag-ments.html

[5]Aquino, N., Vanderdonckt, J., Condori-Fernández, N., et al., 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., et al., 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., et al., 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. Available from http://modeling-languages.com/movisa-a-dsl-tool-for-human-machine-interfaces-hmi-in-industrial-automation

[9]Calvary, G., Coutaz, J., Thevenin, D., et al., 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., et al., 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. Available from http://funq.codeplex.com

[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., et al., 2014. A transformation-based approach to context-aware 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., et al., 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., et al., 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., et al., 2014a. Framework for the declarative implementation of native mobile applications. IET Softw., 8(1):19-32.

[28]Miravet, P., Ortin, F., Marin, I., et al., 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., et al., 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., et al., 2014. Attaining multiple dispatch in widespread object-oriented languages. DYNA, 81(186):242-250.

[35]Paternò, F., Mancini, C., Meniconi, S., 1997. ConcurTaskTrees: 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 http://www.eclipse.org/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., et al., 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., et al., 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 http://www.w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504

[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.

Open peer comments: Debate/Discuss/Question/Opinion


Please provide your name, email address and a comment

Journal of Zhejiang University-SCIENCE, 38 Zheda Road, Hangzhou 310027, China
Tel: +86-571-87952783; E-mail: cjzhang@zju.edu.cn
Copyright © 2000 - Journal of Zhejiang University-SCIENCE