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

MARIN Ignacio; ORTIN Francisco; PEDROSA German; RODRIGUEZ Javier

doi:10.1631/FITEE.1500083

Your Location：

Home >

Browse articles >

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

Computer & Automation | Updated：2022-06-06

- Generating native user interfaces for multiple devices by means of model transformation
- 使用模型变换为多种终端生成原生用户界面
- Frontiers of Information Technology & Electronic Engineering Vol. 16, Issue 12, Pages: 995-1017(2015)
- Affiliations：
  
  1.Department of Research and Development, CTIC Foundation, Gijon 33203, Spain
  2.Department of Computer Science, University of Oviedo, Oviedo 33007, Spain
- Author bio：
  
  [ "Ignacio MARIN, E-mail: info@fundacionctic.org" ]
  Francisco ORTIN, E-mail: ortin@uniovi.es
- Funds：
- DOI：10.1631/FITEE.1500083
  CLC： TP311
- Received：19 March 2015，
  
  Revised：2015-11-11，
  
  Published：2015-12
- Accepted：
Scan QR Code
MARIN Ignacio, ORTIN Francisco, PEDROSA German, et al. Generating native user interfaces for multiple devices by means of model transformation[J]. Frontiers of Information Technology & Electronic Engineering, 2015, 16(12): 995-1017.
DOI：

MARIN Ignacio, ORTIN Francisco, PEDROSA German, et al. Generating native user interfaces for multiple devices by means of model transformation[J]. Frontiers of Information Technology & Electronic Engineering, 2015, 16(12): 995-1017. DOI： 10.1631/FITEE.1500083.

摘要

目的

近年来，使用不同操作系统、屏幕尺寸、交互机制和软件特征访问信息系统的终端种类不断增加。为此，本研究解决开发原生移动服务前端应用（front-end applications）过程中终端类型碎片化（fragmentation）问题。

创新点

遵照基于模型的用户界面（MBUI）范式，使用模型变换生成原生用户界面。本研究并非遵循“最小公分母方法”生成通用应用，而是根据特定目标终端限定的特别规则生成应用。

方法

本文提出LIZARD，这一MBUI框架可以为多种目标平台生成应用。LIZARD支持在高抽象层级定义应用，并在考虑目标平台特性的前提下使用模型变换生成目标原生用户界面。其生成的应用符合用户界面设计准则，符合相应操作系统所限定的架构及设计模式。

结论

本文给出一个示例，使用LIZARD建模，可以分别生成用于Windows Phone、Android智能手机、Android平板等不同终端用户界面。评估结果显示，对于这三种应用，用户平均满意度全部超过7.7分（满分9分）。LIZARD原型、源代码及文中给出的应用示例，可从https://bitbucket.org/fundacionctic/lizard自由获取。

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

关键词

Keywords

references

M. Abrams , C. Phanouriou , A.L. Batongbacal , 等 . UIML: an appliance-independent XML user interface language . Comput. Networks , 1999 . 31 ( 11-16 ): 1695 - 1708 . DOI: 10.1016/S1389-1286(99)00044-4 http://doi.org/10.1016/S1389-1286(99)00044-4 .

M.F. Ali . 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. , 2004 .

M.F. Ali , M.A. Perez-Quiñones , M. Abrams , 等 . Building multi-platform user interfaces with UIML . Computer-Aided Design of User Interfaces Ⅲ , 2002 . p.255 - 266 . DOI: 10.1007/978-94-010-0421-3_22 http://doi.org/10.1007/978-94-010-0421-3_22 .

Developers Android . Fragments Developers . The Android Fragments API. Available from , 2015 . http://developer.android.com/guide/components/fragments.html http://developer.android.com/guide/components/fragments.html , .

N. Aquino , J. Vanderdonckt , N. Condori-FernȢndez , 等 . Usability evaluation of multi-device/platform user interfaces generated by model-driven engineering . Proc. ACM-IEEE Int. Symp. on Empirical Software Engineering and Measurement , 2010 . p.30.1 - 30.10 . DOI: 10.1145/1852786.1852826 http://doi.org/10.1145/1852786.1852826 .

T. Arendt , E. Biermann , S. Jurack , 等 . Henshin: advanced concepts and tools for in-place EMF model transformations . Proc. 13th Int. Conf. on Model Driven Engineering Languages and Systems: Part Ⅰ , 2010 . p.121 - 135 . DOI: 10.1007/978-3-642-16145-2_9 http://doi.org/10.1007/978-3-642-16145-2_9 .

S. Berti , F. Correani , G. Mori , 等 . TERESA: a transformation-based environment for designing and developing multi-device interfaces . Proc. CHI Extended Abstracts on Human Factors in Computing Systems , 2004 . p.793 - 794 . DOI: 10.1145/985921.985939 http://doi.org/10.1145/985921.985939 .

J. Cabot . Movisa: a DSL Tool for Human Machine Interfaces (HMI) in Industrial Automation . Available from , 2013 . http://modeling-languages.com/movisa-a-dsltool-for-human-machine-interfaces-hmi-in-industrialautomation http://modeling-languages.com/movisa-a-dsltool-for-human-machine-interfaces-hmi-in-industrialautomation , .

G. Calvary , J. Coutaz , D. Thevenin , 等 . A unifying reference framework for multi-target user interfaces . Interact. Comput. , 2003 . 15 ( 3 ): 289 - 308 . DOI: 10.1016/S0953-5438(03)00010-9 http://doi.org/10.1016/S0953-5438(03)00010-9 .

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

D.T. Campbell , D.W. Fiske . Convergent and discriminant validation by the multitrait-multimethod matrix . Psychol. Bull. , 1959 . 56 ( 2 ): 81 - 105 . DOI: 10.1037/h0046016 http://doi.org/10.1037/h0046016 .

J.P. Chin , V.A. Diehl , K.L. Norman . Development of an instrument measuring user satisfaction of the human-computer interface . Proc. SIGCHI Conf. on Human Factors in Computing Systems , 1988 . p.213 - 218 . DOI: 10.1145/57167.57203 http://doi.org/10.1145/57167.57203 .

Clarius . Funq: a Fast DI Container You Can Understand . Available from , 2015 . http://funq.codeplex.com http://funq.codeplex.com , .

W.R. Cook . Object-oriented programming versus abstract data types . Proc. REX School/Workshop on Foundations of Object-Oriented Languages , 1991 . p.151 - 178 . DOI: 10.1007/BFb0019443 http://doi.org/10.1007/BFb0019443 .

S. Degrandsart , S. Demeyer , J. van den Bergh , 等 . A transformation-based approach to contextaware modelling . Softw. Syst. Model. , 2014 . 13 ( 1 ): 191 - 208 . DOI: 10.1007/s10270-012-0239-y http://doi.org/10.1007/s10270-012-0239-y .

R. Forax , E. Duris , G. Roussel . Java multi-method framework . Proc. Int. Conf. on Technology of ObjectOriented Languages and Systems , 2000 . p.45 - 56 . .

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

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

A. Georges , D. Buytaert , L. Eeckhout . Statistically rigorous Java performance evaluation . ACM SIGPLAN Not. , 2007 . 42 ( 10 ): 57 - 76 . DOI: 10.1145/1297105.1297033 http://doi.org/10.1145/1297105.1297033 .

S. Hennig , A. Braune . Sustainable visualization solutions in industrial automation with Movisaja—— case study . IEEE Int. Conf. on Industrial Informatics , 2011 . p.634 - 639 . .

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

Q. Limbourg , J. Vanderdonckt . 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 , 2004 . p.325 - 338 . .

Q. Limbourg , J. Vanderdonckt . Multipath transformational development of user interfaces with graph transformations . Human-Centered Software Engineering——Software Engineering Models, Patterns and Architectures for HCI , 2009 . p.107 - 138 . DOI: 10.1007/978-1-84800-907-3_6 http://doi.org/10.1007/978-1-84800-907-3_6 .

E. Marcotte . Responsive Web Design . New York, NY, USA. , 2011 .

T. Mens , P. van Gorp . A taxonomy of model transformation . Electron. Notes Theor. Comput. Sci. , 2006 . 152 125 - 142 . DOI: 10.1016/j.entcs.2005.10.021 http://doi.org/10.1016/j.entcs.2005.10.021 .

J. Meskens , J. Vermeulen , K. Luyten , 等 . Gummy for multi-platform user interface designs: shape me, multiply me, fix me, use me . Proc. Working Conf. on Advanced Visual Interfaces , 2008 . p.233 - 240 . DOI: 10.1145/1385569.1385607 http://doi.org/10.1145/1385569.1385607 .

P. Miravet , I. Marin , F. Ortin , 等 . Framework for the declarative implementation of native mobile applications . IET Softw. , 2014a . 8 ( 1 ): 19 - 32 . DOI: 10.1049/iet-sen.2012.0194 http://doi.org/10.1049/iet-sen.2012.0194 .

P. Miravet , F. Ortin , I. Marin , 等 . Using standards to build the DIMAG connected mobile applications framework . Comput. Stand. Interf. , 2014b . 36 ( 2 ): 354 - 367 . DOI: 10.1016/j.csi.2013.08.007 http://doi.org/10.1016/j.csi.2013.08.007 .

A.I. Molina , W.J. Giraldo , J. Gallardo , 等 . CIAT-GUI: a MDE-compliant environment for developing graphical user interfaces of information systems . Adv. Eng. Softw. , 2012 . 52 10 - 29 . DOI: 10.1016/j.advengsoft.2012.06.002 http://doi.org/10.1016/j.advengsoft.2012.06.002 .

T. Neil . Mobile Design Pattern Gallery . AddisonWesley, Sebastopol, CA, USA. , 2012 .

F. Ortin . Type inference to optimize a hybrid statically and dynamically typed language . Comput. J. , 2011 . 54 ( 11 ): 1901 - 1924 . DOI: 10.1093/comjnl/bxr067 http://doi.org/10.1093/comjnl/bxr067 .

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

F. Ortin , D. Zapico , J.M. Cueva . Design patterns for teaching type checking in a compiler construction course . IEEE Trans. Educ. , 2007 . 50 ( 3 ): 273 - 283 . DOI: 10.1109/TE.2007.901983 http://doi.org/10.1109/TE.2007.901983 .

F. Ortin , J. Quiroga , J.M. Redondo , 等 . Attaining multiple dispatch in widespread object-oriented languages . DYNA , 2014 . 81 ( 186 ): 242 - 250 . DOI: 10.15446/dyna.v81n186.40428 http://doi.org/10.15446/dyna.v81n186.40428 .

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

F. Paternò , C. Santoro , L.D. Spano . MARIA: a universal, declarative, multiple abstraction-level language for service-oriented applications in ubiquitous environments . ACM Trans. Comput.-Human Interact. , 2009 . 16 ( 4 ): 19 DOI: 10.1145/1614390.1614394 http://doi.org/10.1145/1614390.1614394 .

F. Paternò , C. Santoro , L.D. Spano . Engineering the authoring of usable service front ends . J. Syst. Softw. , 2011 . 84 ( 10 ): 1806 - 1822 . DOI: 10.1016/j.jss.2011.05.025 http://doi.org/10.1016/j.jss.2011.05.025 .

R. Pausch , M. Conway , R. Deline . Lessons learned from SUIT, the simple user interface toolkit . ACM Trans. Inform. Syst. , 1992 . 10 ( 4 ): 320 - 344 . DOI: 10.1145/146486.146489 http://doi.org/10.1145/146486.146489 .

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

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

J. Smith . WPF Apps with the Model-ViewViewModel Design Pattern . MSDN Mag. , 2009 . 2 ( 1 ): 1 - 19 . .

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

The Eclipse Foundation . EMP, the Eclipse Modeling Project . Available from , 2015b . http://www.eclipse.org/modeling http://www.eclipse.org/modeling , .

The Eclipse Foundation . EMP, the Eclipse Modeling Project . Available from , 2015b . http://www.eclipse.org/gmt/epsilon/doc/egl http://www.eclipse.org/gmt/epsilon/doc/egl , .

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

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

V. Tran , J. Vanderdonckt , M. Kolp , 等 . Generating user interface from task, user and domain models . Int. Conf. on Advances in Human-oriented and Personalized Mechanisms, Technologies, and Services , 2009 . p.19 - 26 . DOI: 10.1109/CENTRIC.2009.24 http://doi.org/10.1109/CENTRIC.2009.24 .

J. van den Bergh , K. Luyten , K. Coninx . CAP3: context-sensitive abstract user interface specification . Proc. 3rd ACM SIGCHI Symp. on Engineering Interactive Computing Systems , 2011 . DOI: 10.1145/1996461.1996491 http://doi.org/10.1145/1996461.1996491 .

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

W3C . Model-Based UI XG Final Report . Available from , 2010a . http://www.w3.org/2005/Incubator/modelbased-ui/XGR-mbui-20100504 http://www.w3.org/2005/Incubator/modelbased-ui/XGR-mbui-20100504 , .

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

W3C . W3C Recommendation . Available from , 2012 . http://www.w3.org/TR/css3-mediaqueries http://www.w3.org/TR/css3-mediaqueries , .

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

Views

Downloads

CSCD

Alert me when the article has been cited

Submit

Tools

Publicity Resources

No data

Related Author

No data

Related Institution

No data

Chat

Address：Zhejiang University Press, 148 Tianmushan Road, Hangzhou, China Postal code：310028
Tel：+86-571-88273162 Email：fitee@zju.edu.cn
It is recommended to read the content of this site in Chrome&IE9+. Please switch to extreme mode in browser 360.
Cookies We use cookies to help provide and enhance our service and tailor content. By continuing, you agree to the use of cookies.

⁰