Visual specification of multi-way data-flow constraint systems

User interfaces are costly to develop and difficult to get correct. Estimates place the effort of programming UIs between 30% and 60% of the total programming effort of applications. One reason for why graphical user interface (GUI) programming is difficult is that there are lots of interdependencies between widgets, and they easily get lost in code. This thesis is motivated by increasing the effectiveness of GUI programming, making the gap between code and behavior smaller, by replacing a lot of the code with a visual diagram that the programmer draws interactively. We are tackling this problem with a declarative programming approach based on multi-way data-flow constraint systems. This thesis shows that data-flow constraint system based GUI programming makes the visual specification of GUIs feasible and that implementing visual cues to users is cheap in the approach — we show through small experiments that programmers save effort and users benefit. This thesis suggests how to simplify the programming of user interfaces, and get rid of complicated event-handling that most GUI code essentially has. The visual client developed in this thesis project is built on top of the HotDrink library. HotDrink is a library that is used for writing GUIs declaratively, making multi-way data- flow constraint systems and maintaining dependencies explicit. HotDrink offers a good platform for creating a visual tool; the visual tool can merely edit HotDrink constraints and make them visible to the programmer, and ultimately to the user. We create a visual tool for creating HotDrink applications. The tool is able to create constraints between widgets, in a visual way, that generates correct constraint systems written in HotDrink. The tool is able to generate complete programs that implement both the Hypertext Markup Language specification (the view) and the HotDrink code (the model)