Dynamic analysis for graphical user interface editors

• Main Author: Li, Peng
• Language: English
• Published: University of British Columbia 2012
• Online Access: http://hdl.handle.net/2429/40521

WYSIWYG (What You See Is What You Get) graphical editors, for example, Swing Designer and Dreamweaver, are widely used to help GUI developers in developing and maintaining GUIs (Graphical User Interface) of desktop and Web applications. GUI editors allow developers to work directly with a graphical design view instead of scattered source elements. This feature helps developers in addressing one particular difficulty for GUI development and maintenance: a large amount of GUI code can be scattered across many different source modules. However, traditional GUI editors have two major defects. First, GUI code is normally tangled with some dynamic computation code. Traditional GUI editors are limited by their ability to statically reconstruct this dynamic GUI code, creating an incomplete design view for developers. Second, some parts of a user interface are stateful and reactive. Their appearance and behavior vary over time, based on mutations of state made from code. Currently, there are no existing GUI editors that can assist developers in understanding how a UI behavior is implemented. To deal with the first defect, I built a tool called FreezeFrame. This tool uses a dynamic reverse-engineering approach to bridge the gap between the rendering view of a user interface and its corresponding implementation, by providing a design/code hyper-linking on a complete dynamic view. To deal with the second defect, I created a tool called ScriptInsight. This tool provides a custom control flow model to bridge a live UI behavior with a set of source elements that control the UI behavior. Developers can use this model to understand the implementation of a UI behavior. To evaluate FreezeFrame, I first show that user interface code can be spread across the decomposition of applications. Next, I demonstrate that the reverse-engineering capabilities of a traditional GUI editor can be improved by using my dynamic reverse-engineering approach. To evaluate ScriptInsight and the usefulness of the custom control flow model, I first evaluate this tool by presenting several case studies. Second, I justify the relevance of this model by the complexity of JavaScript implementations for the UIs from several existing Web applications.