UI Kit

User interfaces are specified by a set of documents describing a data model, user flow, layout, and styling. This article will go over each of these documents along with how they combine to describe the complete behavior from a small component such a button to larger components such as a login window. The example that will be used in each document is a user interface for a button component.

Data Model

Fundamentally, a UI is a visual representation of a set of data in a given state. The UI takes in that data upon initialization and transforms it based on external actions either provided by the user directly or some other external agent. In order for multiple UI components to work together, individual components signal when certain changes are made to that data or to the state of the component, which allows other UI components to respond and signal changes of their own. The complete description of both the data a UI component operates on as well as the signals it produces form the data model and is typically documented in model.txt. Using the button as an example the document appears as follows:

Data:
  label: The text that's displayed in the button.

Signals:
  clicked: Indicates that the button was clicked by the user.