A layout inference algorithm for Graphical User Interfaces

Context: Graphical User Interface (GUI) toolkits currently provide layout managers which lay out widgets in views according to certain constraints that characterise each type of layout manager. In some scenarios such as GUI migration and the automated generation of GUIs from wireframes, the layout of views is implicitly expressed through the use of coordinates. In these cases, it is desirable to represent the layout explicitly in terms of layout managers. Objective: To represent a coordinate-based GUI in terms of a set of layout managers, in order to provide different alternative solutions for a given view and select the best alternative. Method: The layout inference process consists of two phases. Firstly, the coordinate-based positioning system is changed to a relative positioning system based on directed graphs and Allen relations. Secondly, an exploratory algorithm based on pattern matching and graph rewriting is applied in order to obtain different layout solutions. The algorithm has been evaluated through a case study related to the automatic generation of fluid web interfaces from wireframes, involving 20 IT professionals. Results: The case study showed that the layout obtained is faithful to the original views in 97% of cases, and maintains its proportions when resized in 84% of views. The majority of the participants were satisfied with the results and found the approach useful. Conclusions: The layout manager representation obtained from the coordinate-based GUIs can be used to generate fluid layouts. The algorithm has two main features that overcome the limitations of the existing approaches: independence of specific layout managers and ability to generate several alternative solutions