Skip to main content
SpringerLink
Log in

GUI visual aspect migration: a framework agnostic solution

  • Published:
Automated Software Engineering Aims and scope Submit manuscript

Abstract

With the generalization of mobile devices and Web applications, GUI frameworks evolve at a fast pace: JavaFX replaced Swing, Angular 8 replaced Angular 1.4 which had replaced Google Web Toolkit (GWT). This situation forces organizations to migrate their applications to modern frameworks regularly so they do not become obsolete. There has been research in the past on automatic GUI migration. However, and concurrently, large organisations’ applications use many different technologies. For example, the IT company with which we are working, Berger-Levrault, wishes to migrate applications written in generic programming language (Java/GWT), proprietary “4th generation” languages (VisualBasic 6, PowerBuilder), or markup languages (Silverlight). Furthermore, one must expect that in a few years time, new frameworks will appear and new migrations will be required. Thus, there is a need for a language-agnostic migration approach allowing one to migrate various legacy GUI to the latest technologies. None of the existing solutions allow to deal with such a variety of GUI framework. They also typically focus on a subpart of the migration (i.e. how to extract a specific GUI framework) ignoring the re-engineering/forward-engineering part of the migration (which is straightforward for a single technology). This makes it difficult to adapt these solutions to other GUI frameworks. We propose an approach to migrate the GUI part of applications. It is based on meta-models to represent the visual element structure and layout. We detail how to create both the GUI extractors and generators, with guidelines to support new markup and programming languages. We evaluate our approach by implementing three extractors and generators for web-based or desktop-based user interfaces defined with generic programming languages (Java, Pharo, TypeScript) or markup languages (XML, HTML). We comment case studies on five applications, opened and closed source, of different sizes. The implementations of our generic approach detect 99% of the widgets and identify (i.e. determine the type of the widget) 97% of them. We give examples of the migrated GUIs, both successful and not.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12

Similar content being viewed by others

Availability of data and material

The source code of the Traccar case study is available at: https://github.com/traccar/traccar-web. The source code of the DBManager case study is available at: https://github.com/juliendelplanque/DBConnectionsManager. The source code of the SpecDB case study is available at: https://github.com/pharo-spec/Spec. The source code of Kitchensink as the source code of PostOffice are closed-source.

Code availability

The source code of the Casino tool is available at: https://github.com/badetitou/Casino. Additional extractors and generators are provided at: https://badetitou.github.io/projects/Casino/#links.

Notes

  1. https://angular.io/.

  2. https://reactjs.org/.

  3. https://vuejs.org/.

  4. https://emberjs.com/.

  5. https://aurelia.io/.

  6. https://github.com/badetitou/Casino.

  7. https://github.com/tonybeltramelli/pix2code#disclaimer.

  8. Coolgen: https://en.wikipedia.org/wiki/CA_Gen.

  9. https://developer.mozilla.org/en-US/docs/Archive/Mozilla/XUL.

  10. https://www.w3schools.com/html/default.asp.

  11. GXT, https://www.sencha.com/products/gxt/, is an extension of GWT.

  12. We remind the reader that we consider there can be no custom attribute or layout, see Sect. 3.2.

  13. https://github.com/juliendelplanque/DBConnectionsManager.

  14. https://github.com/traccar/traccar-web.

  15. https://badetitou.github.io/projects/Casino/Casino/#current-results.

References

  • Beltramelli, T.: pix2code: Generating Code from a Graphical User Interface Screenshot (2017). arXiv preprint arXiv:170507962

  • Bragagnolo, S., Anquetil, N., Ducasse, S., Abderrahmane, S., Derras, M.: Analysing microsoft access projects: building a model in a partially observable domain. In: International Conference on Software and Systems Reuse, ICSR2020 (2020a)

  • Bragagnolo, S., Verhaeghe, B., Seriai, A., Derras, M., Etien, A.: Challenges for layout validation: lessons learned. In: International Conference on the Quality of Information and Communications Technology, QUATIC’2020 , accepted (2020b)

  • Brambilla, M., Fraternali, P.: Interaction Flow Modeling Language: Model-Driven UI Engineering of Web and Mobile Apps with IFML. Morgan Kaufmann, Burlington (2014)

    Google Scholar 

  • Cao, J., Mao, B., Luo, J.: A segmentation method for web page analysis using shrinking and dividing. Int. J. Parallel Emerg. Distrib. Syst. 25(2), 93–104 (2010)

    Article  MathSciNet  Google Scholar 

  • Chen, C., Su, T., Meng, G., Xing, Z., Liu, Y.: From ui design image to gui skeleton: a neural machine translator to bootstrap mobile gui implementation. In: Proceedings of the 40th International Conference on Software Engineering, Association for Computing Machinery, New York, NY, USA, ICSE ’18, pp. 665–676 (2018).https://doi.org/10.1145/3180155.3180240

  • Dutriez, C., Verhaeghe, B., Derras, M.: Switching of GUI framework: the case from Spec to Spec 2. In: Proceedings of the 14th Edition of the International Workshop on Smalltalk Technologies, Cologne, Germany (2019)

  • Fabry, J., Ducasse, S.: The Spec UI Framework. Square Bracket Associates (2017)

  • Fleurey, F., Breton, E., Baudry, B., Nicolas, A., Jezéquel, J.M.: Model-driven engineering for software migration in a large industrial context. In: Engels, G., Opdyke, B., Schmidt, D.C., Weil, F. (eds) Model Driven Engineering Languages and Systems, vol 4735, pp 482–497. Springer, Berlin, Heidelberg (2007). https://doi.org/10.1007/978-3-540-75209-7_33

  • Garcés, K., Casallas, R., Álvarez, C., Sandoval, E., Salamanca, A., Viera, F., Melo, F., Soto, J.M.: White-box modernization of legacy applications: the oracle forms case study. Comput. Stand. Interfaces, pp. 110–122 (2017). https://doi.org/10.1016/j.csi.2017.10.004

  • Gerdes, J., Jr.: User interface migration of microsoft windows applications. J. Softw. Maint. Evol. Res. Pract. 21(3), 171–187 (2009)

    Article  Google Scholar 

  • Gotti, Z., Mbarki, S.: Java swing modernization approach—complete abstract representation based on static and dynamic analysis. In: Proceedings of the 11th International Joint Conference on Software Technologies, SCITEPRESS—Science and Technology Publications, pp 210–219 (2016). https://doi.org/10.5220/0005986002100219

  • Hasselknippe, K.F., Li, J.: A novel tool for automatic gui layout testing. In: 2017 24th Asia-Pacific Software Engineering Conference (APSEC), pp 695–700 (2017). https://doi.org/10.1109/APSEC.2017.87

  • Hayakawa, T., Hasegawa, S., Yoshika, S., Hikita, T.: Maintaining web applications by translating among different RIA technologies. GSTF J. Comput., p. 7 (2012)

  • Joorabchi, M.E., Mesbah, A.: Reverse engineering iOS mobile applications. In: 2012 19th Working Conference on Reverse Engineering, pp 177–186. IEEE (2012). https://doi.org/10.1109/WCRE.2012.27

  • Kazman, R., Woods, S., Carriére, S.: Requirements for integrating software architecture and reengineering models: Corum II. In: Proceedings of WCRE ’98, pp. 154–163. IEEE Computer Society, iSBN: 0-8186-89-67-6 (1998)

  • Lutteroth, C., Strandh, R., Weber, G.: Domain specific high-level constraints for user interface layout. Constraints 13(3), 307–342 (2008)

    Article  MathSciNet  Google Scholar 

  • Memon, A., Banerjee, I., Nagarajan, A.: GUI ripping: reverse engineering of graphical user interfaces for testing. In: Reverse Engineering, 2003. WCRE 2003. Proceedings. 10th Working Conference on, IEEE, pp. 260–269 (2003). https://doi.org/10.1109/WCRE.2003.1287256

  • Mesbah, A., van Deursen, A.: Migrating multi-page web applications to single-page ajax interfaces. In: Proceedings of the 11th European Conference on Software Maintenance and Reengineering, IEEE Computer Society, Washington, DC, USA, CSMR ’07, pp. 181–190 (2007). https://doi.org/10.1109/CSMR.2007.33

  • Mesbah, A., van Deursen, A., Lenselink, S.: Crawling ajax-based web applications through dynamic analysis of user interface state changes. ACM Trans. Web 6(1), 1–30 (2012). https://doi.org/10.1145/2109205.2109208

    Article  Google Scholar 

  • Moore, R.S.: Knowledge-based user interface migration. In: Proceedings 1994 International Conference on Software Maintenance, pp. 72–79. IEEE Comput. Soc. Press (1994). https://doi.org/10.1109/ICSM.1994.336788

  • Moran, K., Watson, C., Hoskins, J., Purnell, G., Poshyvanyk, D.: Detecting and summarizing GUI Changes in Evolving Mobile Apps (2018). arXiv:180709440 [cs] ArXiv: 1807.09440

  • Rodríguez-Echeverría, R., Conejero, J.M., Clemente, P.J., Preciado, J.C., Sánchez-Figueroa, F.: Modernization of legacy web applications into rich internet applications. In: International Conference on Web Engineering, pp. 236–250. Springer (2011)

  • Samir, H., Kamel, A., Stroulia, E.: Swing2script: migration of java-swing applications to ajax web applications. In: 14th Working Conference on Reverse Engineering (WCRE 2007) (2007)

  • Sánchez Ramón, O., Sánchez Cuadrado, J., García Molina, J.: Model-driven reverse engineering of legacy graphical user interfaces. Automat. Softw. Eng. 21(2), 147–186 (2014). https://doi.org/10.1007/s10515-013-0130-2

    Article  Google Scholar 

  • Sánchez Ramón, Ó., Sánchez Cuadrado, J., García Molina, J., Vanderdonckt, J.: A layout inference algorithm for graphical user interfaces. Inf. Softw. Technol. 70, 155–175 (2016)

    Article  Google Scholar 

  • Shah, E., Tilevich, E.: Reverse-engineering user interfaces to facilitate porting to and across mobile devices and platforms. In: Proceedings of the Compilation of the Co-located Workshops on DSM’11, TMC’11, AGERE! 2011, AOOPES’11, NEAT’11, & VMIL’11, pp. 255–260. ACM (2011)

  • Silva, JaC, Silva, C.C., Goncalo, R.D., Saraiva, J.a., Campos, J.C.: The GUISurfer tool: towards a language independent approach to reverse engineering GUI code. In: Proceedings of the 2Nd ACM SIGCHI Symposium on Engineering Interactive Computing Systems, pp. 181–186. ACM Press (2010). https://doi.org/10.1145/1822018.1822045

  • Verhaeghe, B., Etien, A., Anquetil, N., Seriai, A., Deruelle, L., Ducasse, S., Derras, M., (2019) GUI migration using MDE from GWT to Angular 6: an industrial case. In: IEEE 26th International Conference on Software Analysis, Evolution and Reengineering (SANER). Hangzhou, China (2019)

  • Włodarski, L., Pereira, B., Povazan, I., Fabry, J., Zaytsev, V.: Qualify first! A large scale modernisation report. In: 2019 IEEE 26th International Conference on Software Analysis, pp. 569–573. Evolution and Reengineering (SANER), IEEE (2019)

  • Zeidler, C., Müller, J., Lutteroth, C., Weber, G.: Comparing the usability of grid-bag and constraint-based layouts. In: Proceedings of the 24th Australian Computer-Human Interaction Conference. pp. 674–682, ACM (2012)

Download references

Funding

This work was supported by Berger-Levrault and Inria-Lille–Nord-Europe.

Author information

Authors and Affiliations

  1. Berger-Levrault, Montpellier, France

    Benoît Verhaeghe, Abderrahmane Seriai & Mustapha Derras

  2. RMod team, INRIA Lille Nord Europe, Villeneuve d’Ascq, France

    Benoît Verhaeghe, Nicolas Anquetil, Anne Etien & Stéphane Ducasse

  3. CNRS, Inria, Centrale Lille, UMR 9189 - CRIStAL, Université de Lille, Lille, France

    Benoît Verhaeghe, Nicolas Anquetil, Anne Etien & Stéphane Ducasse

Authors
  1. Benoît Verhaeghe
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Nicolas Anquetil
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Anne Etien
    View author publications

    You can also search for this author in PubMed Google Scholar

  4. Stéphane Ducasse
    View author publications

    You can also search for this author in PubMed Google Scholar

  5. Abderrahmane Seriai
    View author publications

    You can also search for this author in PubMed Google Scholar

  6. Mustapha Derras
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Benoît Verhaeghe.

Ethics declarations

Conflict of interest

The authors declare that they no conflict of interest.

Additional information

Publisher's Note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Verhaeghe, B., Anquetil, N., Etien, A. et al. GUI visual aspect migration: a framework agnostic solution. Autom Softw Eng 28, 6 (2021). https://doi.org/10.1007/s10515-021-00284-z

Download citation

  • Received:

  • Accepted:

  • Published:

  • DOI: https://doi.org/10.1007/s10515-021-00284-z

Keywords

Search

Navigation