Reusing Web Application User-Interface Controls

  • Josip Maras
  • Maja Štula
  • Jan Carlson
Part of the Lecture Notes in Computer Science book series (LNCS, volume 6757)


Highly interactive web applications that offer user experience and responsiveness of desktop applications are becoming increasingly popular. They are often composed out of visually distinctive user-interface (UI) elements that encapsulate a certain behavior – the so called UI controls. Similar controls are often used in a large number of web pages, and facilitating their reuse could offer considerable benefits. Unfortunately, because of a very short time-to-market, and a fast pace of technology development, preparing controls for reuse is usually not a primary concern. In this paper we present a semi-automatic method, and the accompanying tool, for extracting and reusing web controls. The developer selects the control and performs a series of interactions that represent the behavior he/she wishes to reuse. In the background, the execution is analyzed and all code and resources necessary for the stand-alone functioning of the control are extracted. Optionally, the user can immediately reuse the extracted control by automatically embedding it in an already existing page.


Document Object Model Recording Phase Document Object Model Tree Reuse Task Referent Node 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.


  1. 1.
    Alexa: Alexa top sites (October 2010),
  2. 2.
    Brandt, J., Guo, P.J., Lewenstein, J., Klemmer, S.R.: Opportunistic programming: How rapid ideation and prototyping occur in practice. In: WEUSE 2008: Workshop on End-User Software Engineering, pp. 1–5. ACM, New York (2008)Google Scholar
  3. 3.
    Holmes, R., Ratchford, T., Robillard, M.P., Walker, R.J.: Automatically Recommending Triage Decisions for Pragmatic Reuse Tasks. In: ASE 2009: Proceedings of the 2009 24th IEEE/ACM International Conference on Automated Software Engineering. IEEE Computer Society, Los Alamitos (2009)Google Scholar
  4. 4.
    Holmes, R., Walker, R.J.: Semi-Automating Pragmatic Reuse Tasks. In: ASE 2008: Proceedings of the 2008 23rd IEEE/ACM International Conference on Automated Software Engineering, pp. 481–482. IEEE Computer Society, Los Alamitos (2008)Google Scholar
  5. 5.
    Holmes, R.: Pragmatic Software Reuse. PhD thesis, University of Calgary, Canada (2008)Google Scholar
  6. 6.
    ECMA: international. ECMAScript language specification,
  7. 7.
    Bovet, J.: Antlr web site (February 2011),
  8. 8.
    Kapser, C., Godfrey, M.W.: ”Cloning Considered Harmful” Considered Harmful. In: WCRE 2006: Proceedings of the 13th Working Conference on Reverse Engineering, pp. 19–28. IEEE Computer Society, Los Alamitos (2006)Google Scholar
  9. 9.
    Krueger, C.W.: Software reuse. ACM Comput. Surv. 24(2), 131–183 (1992)CrossRefGoogle Scholar
  10. 10.
    Lange, B.M., Moher, T.G.: Some strategies of reuse in an object-oriented programming environment. In: SIGCHI Bull., vol. 20(SI), pp. 69–73Google Scholar
  11. 11.
    Li, P., Wohlstadter, E.: Script InSight: Using Models to Explore JavaScript Code from the Browser View. In: Gaedke, M., Grossniklaus, M., Díaz, O. (eds.) ICWE 2009. LNCS, vol. 5648, pp. 260–274. Springer, Heidelberg (2009)CrossRefGoogle Scholar
  12. 12.
    Maras, J., Štula, M., Carlson, J.: Extracting Client-Side Web User Interface Controls. In: Benatallah, B., Casati, F., Kappel, G., Rossi, G. (eds.) ICWE 2010. LNCS, vol. 6189, pp. 502–505. Springer, Heidelberg (2010)CrossRefGoogle Scholar
  13. 13.
    Oney, S., Myers, B.: FireCrystal: Understanding interactive behaviors in dynamic web pages. In: VLHCC 2009: Proceedings of the 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC), pp. 105–108. IEEE Computer Society, Los Alamitos (2009)CrossRefGoogle Scholar
  14. 14.
    Open source Tagsoup. Tagsoup, (September 2010) cowan/XML/tagsoup/Google Scholar
  15. 15.
    Schraefel, M.C., Zhu, Y., Modjeska, D., Wigdor, D., Zhao, S.: Hunter Gatherer: Interaction Support for the Creation and Management of Within-Web-Page Collections. In: 11th International Conference on World Wide Web, pp. 172–181 (2002)Google Scholar
  16. 16.
    Sugiura, A., Koseki, Y.: Internet scrapbook: creating personalized world wide web pages. In: CHI 1997: Extended Abstracts on Human Factors in Computing Systems, pp. 343–344. ACM, New York (1997)Google Scholar
  17. 17.
    Tanaka, Y., Ito, K., Fujima, J.: Meme Media for Clipping and Combining Web Resources. World Wide Web 9, 117–142 (2006)CrossRefGoogle Scholar
  18. 18.
    Tonella, P., Ricca, F.: Web Application Slicing in Presence of Dynamic Code Generation. Automated Software Engg. 12(2), 259–288 (2005)CrossRefGoogle Scholar
  19. 19.
    World Wide Web Consortium (W3C). Document Object Model (DOM) (September 2010),
  20. 20.
    World Wide Web Consortium (W3C). Document Object Model Events (September 2010),
  21. 21.
    World Wide Web Consortium (W3C). Xml path language (xpath) (September 2010),
  22. 22.
    Weiser, M.: Program slicing. In: ICSE 1981: 5th International Conference on Software Engineering, pp. 439–449. IEEE Press, Los Alamitos (1981)Google Scholar
  23. 23.
    Wright, A.: Ready for a Web OS? Commun. ACM 52(12), 16–17 (2009)CrossRefGoogle Scholar

Copyright information

© Springer-Verlag Berlin Heidelberg 2011

Authors and Affiliations

  • Josip Maras
    • 1
  • Maja Štula
    • 1
  • Jan Carlson
    • 2
  1. 1.University of SplitCroatia
  2. 2.Mälardalen Real-Time Research CenterMälardalen UniversityVästeråsSweden

Personalised recommendations