BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News InterState: A Language and Environment for Expressing Interface Behavior

InterState: A Language and Environment for Expressing Interface Behavior

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Getting empty page

    by Gilad Kutiel,

    Your message is awaiting moderation. Thank you for participating in the discussion.

  • Re: Getting empty page

    by Sergio De Simone,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Hello Gilad,

    the link I posted at the end will take you to the visual editor page. This is almost empty, but in the top right corner you will find an "Edit" button that will allow you to access your model, adding states and constraints.

    Hope this helps,
    Sergio

  • Re: Getting empty page

    by Sergio De Simone,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Hello Gilad,

    the link I posted (interstate.from.so/) will take you to the visual editor page. This is almost empty, but in the top right corner you will find an "Edit" button that will allow you to access your model, adding states and constraints.

    Hope this helps,
    Sergio

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT