Model-driven Development of Interactive Web User Interfaces with HTML5

Michael Huber, Philipp Brune

2013

Abstract

Graphical user interfaces (GUI) of modern web applications offer a look-and-feel comparable to desktop applications, mainly by using JavaScript or other Rich internet Applications (RIA) technologies. With W3C's upcoming HTML5 standard, even more powerful concepts for browser-side GUI programming are introduced, e.g. the $<$canvas$>$-tag. Model-driven development of web applications and RIA has been studied for many years. However, all existing approaches for model-driven web and RIA development focus on entire web-pages. With the increasing complexity of modern web GUIs, the model-driven development of GUI components itself comes into focus. Therefore, in this paper a method is proposed for the model-driven development of interactive, JavaScript-based GUI components based on the $<$canvas$>$-tag. Using a metamodel based on an UML 2.0 profile, the approach is usable together with existing UML-based methods or standalone. The implementation is described and its feasibility and implications are examined by means of a proof-of-concept example.

References

  1. Bozzon, A., Comai, S., Fraternali, P., and Tofetti Carughi, G. (2006). Capturing ria concepts in a web modeling language. In Proceedings of the 15th international conference on World Wide Web, WWW 7806, pages 907-908, New York, NY, USA. ACM.
  2. Buchwalder, O. and Petitpierre, C. (2006). Weblang: A language for modeling and implementing web applications. In Kang Zhang, G. S. and Visaggio, G., editors, Proceedings of the Eighteenth International Conference on Software Engineering and Knowledge Engineering, ICSE 2006, pages 584-590, San Francisco, California. Skokie, Ill: Knowledge Systems Institute Graduate School.
  3. Fulton, S. und Fulton, J. (2011). HTML5 canvas. OReilly, Farnham.
  4. Koch, N., Pigerl, M., Zhang, G., and Morozova, T. (2009). Patterns for the model-based development of rias. In Proceedings of the 9th International Conference on Web Engineering, ICWE 789, pages 283-291, Berlin, Heidelberg. Springer-Verlag.
  5. Kraus, A., Knapp, A., and Koch, N. (2007). Modeldriven generation of web applications in uwe. In Nora Koch, A. V. and Houben, G.-J., editors, Proceedings of the 3rd International Workshop on ModelDriven Web Engineering MDWE 2007, Como, Italy.
  6. Linaje, M., Preciado, J., and Sanchez-Figueroa, F. (2007). A method for model based design of rich internet application interactive user interfaces. In Baresi, L., Fraternali, P., and Houben, G.-J., editors, Web Engineering, volume 4607 of Lecture Notes in Computer Science, pages 226-241. Springer Berlin / Heidelberg.
  7. Melia, S. and Gomez, J. (2006). The websa approach: Applying model driven engineering to web applications. Journal of Web Engineering, 5(2):121-149.
  8. Melia, S., Gomez, J., Perez, S., and Dijaz, O. (2008). A model-driven development for gwt-based rich internet applications with ooh4ria. In Daniel Schwabe, F. C. and Dantzig, P., editors, Proceedings of the Eighth International Conference on Web Engineering, ICWE 2008, pages 13-23, Yorktown Heights, New York, USA. IEEE.
  9. Mesbah, A. and van Deursen, A. (2007). Migrating multi-page web applications to single-page ajax interfaces. In Proceedings of the 11th European Conference on Software Maintenance and Reengineering, CSMR 7807, pages 181-190, Washington, DC, USA. IEEE Computer Society.
  10. NoMagic (2012). Magicdraw. http://www.magicdraw.com.
  11. Ortiz, G. and Garcia De Prado, A. (2010). Improving device-aware web services and their mobile clients through an aspect-oriented, model-driven approach. Information and Software Technology, 52(10):1080- 1093.
  12. Preciado, J. C., Linaje, M., Morales-Chaparro, R., SanchezFigueroa, F., Zhang, G., Kroiß, C., and Koch, N. (2008). Designing rich internet applications combining uwe and rux-method. In Proceedings of the 2008 Eighth International Conference on Web Engineering, ICWE 7808, pages 148-154, Washington, DC, USA. IEEE Computer Society.
  13. Sabbah, D. (2006). Model-driven software development - introduction. IBM SYSTEMS JOURNAL, 45(3).
  14. Stiegler, S. (2002). Diploma thesis. http://www.pst. informatik.uni-muenchen.de/DA Fopra/web-eng-uwegenerator.pdf.
  15. Toffetti, G., Comai, S., Preciado, J. C., and Linaje, M. (2011). State-of-the art and trends in the systematic development of rich internet applications. J. Web Eng., 10(1):70-86.
  16. Valverde, F. and Pastor, O. (2009). Facing the technological challenges of web 2.0: A ria model-driven engineering approach. In Vossen, G., Long, D., and Yu, J., editors, Web Information Systems Engineering - WISE 2009, volume 5802 of Lecture Notes in Computer Science, pages 131-144. Springer Berlin / Heidelberg.
  17. Wolfgang, U. (2011). Multi-platform model-driven software development of web applications. In Proceedings of the 6th International Conference on Software and Data Technologies (ICSOFT 2011), pages 162- 171. INSTICC Press.
Download


Paper Citation


in Harvard Style

Huber M. and Brune P. (2013). Model-driven Development of Interactive Web User Interfaces with HTML5 . In Proceedings of the 1st International Conference on Model-Driven Engineering and Software Development - Volume 1: MODELSWARD, ISBN 978-989-8565-42-6, pages 249-252. DOI: 10.5220/0004311202490252


in Bibtex Style

@conference{modelsward13,
author={Michael Huber and Philipp Brune},
title={Model-driven Development of Interactive Web User Interfaces with HTML5},
booktitle={Proceedings of the 1st International Conference on Model-Driven Engineering and Software Development - Volume 1: MODELSWARD,},
year={2013},
pages={249-252},
publisher={SciTePress},
organization={INSTICC},
doi={10.5220/0004311202490252},
isbn={978-989-8565-42-6},
}


in EndNote Style

TY - CONF
JO - Proceedings of the 1st International Conference on Model-Driven Engineering and Software Development - Volume 1: MODELSWARD,
TI - Model-driven Development of Interactive Web User Interfaces with HTML5
SN - 978-989-8565-42-6
AU - Huber M.
AU - Brune P.
PY - 2013
SP - 249
EP - 252
DO - 10.5220/0004311202490252