InterState is a new programming language and environment aimed at addressing the challenges of writing and reusing user interface code. InterState's creators Stephen Oney, Brad Myers, and Joel Brandt claim in their paper that InterState can help programmers to better understand, navigate, and reuse their GUI components even with complex interfaces involving thousands of objects.
The novelty of InterState is that it uses a visual notation based on state machines and constraints to represent interactive behaviors. The paper's authors say that InterState is able to represent interactive behaviors in a clear and concise way, while "the event-callback model used by nearly all widely-deployed user interface frameworks tends to produce error-prone 'spaghetti' code by splitting the implementation of a single behavior across many locations."
Two of the common difficulties in GUI programming are:
- Managing states, i.e. the interface’s status, which determines its appearance and behavior.
- Expressing constraints, that is relationships among interface components and underlying data models.
With the aim of making it easy to manage state and express constraints, InterState introduces a computational model, a visual notation, an inheritance mechanism, and a live editor for its visual notation:
- Computational model: InterState's computational model allows to express interactive behaviors as constraints that are enforced in particular states of the interface. Both state machines and constraints are fundamental language constructs and aim at this allows to remove a lot of boilerplate code that is required to express constraints in other systems, according to the authors. Furthermore, constraints can be expressed as simple equations.
- Visual notation: In most languages, the code handling a particular user event is usually spread throughout multiple locations, which makes it difficult to understand it as a whole. InterState visual notation, besides making constraints more understandable, also allows to easily track which properties of the interface are affected by a given event.
- Inheritance: in most programming languages, inheritance is understood as allowing the inheritance of properties and methods. InterState introduces a style of inheritance that also allows behaviors to be inherited.
- Live editor: InterState's live editor immediately reflects edits in the running application UI and highlights changes in runtime state and property values caused by user events.
As an example of the expressiveness of InterState, the authors provide the definition of a drag-lock interactive behavior. Drag-lock is an accessibility feature that allows users to double click an object and drag it until they double click again. The following code snippet represents an highly-optimized JavaScript implementation of this behavior, where draggable is the object that we want to drag-lock.
var isDragLocked = false,
mm_listener = function(mm_event) {
draggable.attr({ x: mm_ev.x, y: mm_ev.y });
},
mu_listener = function(mu_event) {
removeEventListener("mousemove", mm_listener);
removeEventListener("mouseup", mu_listener);
};
draggable.mousedown(function(md_ev) {
draggable.attr({ x: md_ev.x, y: md_ev.y });
addEventListener("mousemove", mm_listener);
addEventListener("mouseup", mu_listener);
}).dblclick(function(md_event) {
if(isDragLocked) {
removeEventListener("mousemove", mm_listener);
} else {
addEventListener ("mousemove", mm_listener);
}
isDragLocked = !isDragLocked;
});
On the other hand, InterState description of the drag-lock behavior is represented in the following figure.
Without going into much detail, it is sufficient to observe how InterState represents properties as rows, e.g., x, y, and fill; while states and transitions are represented as columns, e.g. no_drag. An entry in a property’s row for a particular state specifies a constraint that controls that property’s value in that state. Here, while draggable is in the drag state, x and y will be constrained to mouse.x and mouse.y respectively, meaning draggable will follow the mouse. In the upper part of the drawing, you can find the events that produce the state transitions.
InterState's creators evaluated the understandability of InterState’s programming primitives in a comparative laboratory study. What they found is that participants were twice as fast at understanding and modifying GUI components when they were implemented with InterState than when they were implemented in a conventional textual event-callback style.
Furthermore, they evaluated InterState’s scalability with a series of benchmarks and example applications. This showed, say the authors, that InterState’s can scale to represent complex behaviors involving thousands of objects and constraints.
The InterState Visual Editor is freely accessible.