정보과학회 컴퓨팅의 실제 논문지 (KIISE Transactions on Computing Practices)

  • 제23권1호
  • /
  • Pages.13-27
  • /
  • 2017
  • /
  • 2383-6318(pISSN)
  • /
  • 2383-6326(eISSN)
한국정보과학회 (Korean Institute of Information Scientists and Engineers)
권호 표지
DOI QR코드

DOI QR Code

내장형 시스템을 위한 사용자 인터페이스 모델 기반 모바일 웹앱 자동 생성 도구

User Interface Model Based Automatic Mobile Web Application Generation Tool for Embedded Systems

  • 최기봉 (웍스모바일(주)) ;
  • 김세화 (한국외국어대학교 정보통신공학과)
  • 투고 : 2016.06.01
  • 심사 : 2016.11.05
  • 발행 : 2017.01.15
⟨ 이전 논문 다음 논문 ⟩

초록

본 논문에서는 사용자 인터페이스(UI) 모델로부터 모바일 웹앱을 자동으로 생성하는 도구를 제시한다. UI 모델은 UI 중심적인 내장형 시스템을 UI 모델링을 통해 효율적으로 개발하기 위한 방법인 PELUM(Pattern and Event based Logical UI Modeling)을 기반으로 한다. 본 논문에서 제시하는 도구는 모델 편집기와 코드 생성기로 이루어져 있다. 모델 편집기는 웹 상에서 논리적 UI 모델(LUM)과 프로그래밍 인터페이스 모델(PIM)을 모델링하는 환경을 제공한다. 코드 생성기는 LUM을 기반으로 앱의 화면구성 및 이벤트 동작을 설정하고 PIM을 기반으로 로컬 데이터베이스 스키마를 자동으로 구성하여 모바일 웹앱을 생성한다. 또한 PIM에서 외부 혹은 open API 주소를 입력 받아 매쉬업 웹앱을 생성하는 기능도 제공한다. 생성된 모바일 웹앱은 사용자가 손쉽게 최적화할 수 있도록 Model-View-Controller(MVC) 아키텍처로 구현하였다. 이를 통해 사용자는 웹 상에서 UI를 모델링하여 여러 기기에서 동작 가능한 모바일 웹앱을 생성할 수 있다.

This paper presents a tool that automatically generates mobile web applications from user interface (UI) models which are based on PELUM (Pattern and Event based Logical User Interface Modeling). PELUM is a method for the effective development of UI-centered embedded systems via UI modeling. The proposed tool consists of a model editor and a code generator. The former provides an environment for modeling a Logical UI Model (LUM) and a Programming Interface Model (PIM) on the web. On the other hand, the code generator sets the screen configuration and events' behavior, according to the LUM, synthesizing a local database schema according to the PIM, and then generates an executable mobile web app. It also can produce mashup web apps by receiving an open API address via the PIM. The generated mobile web apps follow the Model-View-Controller (MVC) architecture in order for users to easily customize them. The proposed tool enables them to generate mobile web apps that can be executed on various devices by modeling logical UIs on the web.

키워드

과제정보

연구 과제 주관 기관 : 한국연구재단

참고문헌

  1. S. Kim, "Pattern and Event Based Logical UI Modeling for Multi-Device Embedded Applications," Proc. of International Conference on Convergence and Hybrid Information Technology, 2011.
  2. G. Calvary, J. Coutaz, D. Thevenin, Q.Limbourg, L. Bouil-lon, and J. Vanderdonckt, "A Unifying Reference Framework for Multi-Target User Interfaces," Interacting with Computers, Vol. 15, pp. 289- 308, 2003. https://doi.org/10.1016/S0953-5438(03)00010-9
  3. J. Vanderdonckt, "Model-driven engineering of user interfaces: Promises, successes, failures, and challenges," Proc. of Annual Romanian Conference on Human-Computer Interaction, pp. 1-10, 2008.
  4. S. Kim, "Graphical Modeling Environment for Logical User Interfaces Based on Eclipse GMF," Journal of Information Industrial Engineering, Vol. 18, 2011.
  5. G. Choi and S. Kim, "Mapping Logical UI Models to HTML5 Based Embedded Applications," Proc. of Korea Computer Congress, pp. 514-516, 2014.
  6. G. Choi and S. Kim, "A Mechanism of Automatically Translating Logical UI Models to HTML5- Based Embedded Applications," Journal of Information Industrial Engineering, Vol. 25, pp. 1-14, 2015.
  7. J.-C. Kim, S.-H. Lee, Y.-S. Chang, and K.-C. Lee, "Mashup Authoring System for Mobile Web Application Development," Communications of the Korea Information Science Society, Vol. 30, pp. 23-31, 2012.
  8. jQuery. [Online]. Available: http://jquery.com/
  9. G. E. Krasner and S. T. Pope, "A cookbook for using the model-view controller user interface paradigm in Smalltalk-80," J. Object Oriented Program, Vol. 1, pp. 26-49, 1988.
  10. IndexedDB. [Online]. Available: http://www.w3.org/TR/IndexedDB
  11. P. A. Akiki, A. K. Bandara, and Y. Yu, "Adaptive Model-Driven User Interface Development Systems," ACM Comput. Surv., Vol. 47, pp. 1-33, 2014.
  12. D. Milicev and Z. Mijailovic, "Capsule-Based User Interface Modeling for Large-Scale Applications," IEEE Transactions on Software Engineering, Vol. 39, pp. 1190-1207, 2013. https://doi.org/10.1109/TSE.2013.8
  13. A. Delgado, A. Estepa, J. A. Troyano, and R. Estepa, "Reusing UI elements with Model-Based User Interface Development," Int. J. Hum.-Comput. Stud., Vol. 86, pp. 48-62, 2016. https://doi.org/10.1016/j.ijhcs.2015.09.003
  14. P. A. Akiki, A. K. Bandara, and Y. Yu, "Cedar studio: an IDE supporting adaptive model-driven user interfaces for enterprise applications," presented at the Proceedings of the 5th ACM SIGCHI symposium on Engineering interactive computing systems, London, United Kingdom, 2013.
  15. M. Macik, T. Cerny, and P. Slavik, "Contextsensitive, cross-platform user interface generation," Journal on Multimodal User Interfaces, Vol. 8, pp. 217-229, 2014. https://doi.org/10.1007/s12193-013-0141-0
  16. S. Roubi, M. Erramdani, and S. Mbarki, "Modeling and generating graphical user interface for MVC Rich Internet Application using a model driven approach," 2016 International Conference on Information Technology for Organizations Development (IT4OD), pp. 1-6, 2016.
  17. GUI Design Studio. [Online]. Available: http://www.carettasoftware.com/
  18. Balsamiq. [Online]. Available: https://balsamiq.com/
  19. Appery. [Online]. Available: https://appery.io/
  20. mBizmaker. [Online]. Available: http://www.mbizmaker.com
  21. jsPlumb. [Online]. Available: https://jsplumbtoolkit.com
  22. Adobe. PhoneGap. [Online]. Available: http://phonegap.com/