Declaratively Programming the Dynamic Structure of Graphical User Interfaces

Structures are everywhere around us - from chemical formulas to biological systems or musical works. In this thesis, we focus on composite structures that appear in graphical user interfaces (GUI), such as lists, tables, or tabs. GUIs often support changes to these structures - be it rearranging elements or appending new ones - in order to facilitate a more productive interaction between the user and the software system. In general, making structural changes that involve GUI components is non-trivial: because the program state is stored and represented both in an object model and view widgets, structural changes to either representation should be reflected in the other. Furthermore, components in GUIs can be connected, and these connections must be updated whenever the structure of the components change. Ultimately, the intent of the operation, a structural change, is lost in the clutter of imperative statements that update the view, model, and connections between the components. In this thesis, we define a framework that lets programmers specify possible structural changes in programs declaratively. We show how programmers can put these declarative specifications to use in JavaScript applications using a custom DSL we have implemented for the framework. To test our framework and demonstrate the clarity that it can bring to managing the dynamic structure of GUIs, we implemented an event scheduling application based on a library for defining and solving multi-way dataflow constraint systems in GUIs. The application has a sequence of timed events, and each event has a start time, duration, and end time. Whenever the user updates an event's duration, the start and end time of all the events are updated accordingly. The application supports structural changes, such as adding, removing, and reordering of events. We explain how components in these GUIs are connected and how we utilize our framework to correctly update the connections whenever structural changes are made