Element¶

Elements are the definitions that define the user interface for an application. Every element is associated with a data type for either input or output. Users are either sending information to inputs or receiving information from outputs.

Element Types¶

There is one RIDDL definition for each of the four typical categories of User Interface elements¹ as shown in the table below

Group¶

A Group organizes related UI elements together, similar to a panel or section in traditional user interfaces. Groups can contain other elements including nested groups, enabling hierarchical organization of the user interface.

Groups have many aliases in RIDDL to accommodate different UI paradigms: group, page, pane, dialog, menu, popup, frame, column, window, section, tab, flow and block.

Input¶

An input takes data from the user. It is written as an input alias, a name, an acquisition verb, and the type acquired:

input, form, text, button, picklist, selector, item

The acquisition verbs are interchangeable — pick whichever reads best:

acquires, reads, takes, accepts, admits, enters, provides, selects, chooses, picks, initiates, submits, triggers, activate, activates, starts

Output¶

An output presents data to the user, written as an output alias, a name, a presentation verb, and what is presented:

output, document, list, table, graph, animation, picture

Presentation verbs: presents, shows, displays, writes, emits

There is no activate definition. Navigation is expressed as an input whose acquisition verb conveys the action — most naturally a button with activates or triggers:

button Checkout activates type Clicked

Both activate and activates are accepted, as are the other acquisition verbs — pick whichever reads best at the call site.

Occurs In¶

Group

Contains¶

Element is abstract — a class name in the AST, like Node, not a RIDDL keyword you can write. Nothing is "an element" in source; a thing is a Group, an Input or an Output, and those three are what the term covers.

So the relationship below is is-a, not containment:

classDiagram
    class Element {
        &lt;&lt;abstract&gt;&gt;
    }
    Element <|-- Group
    Element <|-- Input
    Element <|-- Output

Of the three, only Group contains anything:

Group — nested groups, Inputs and Outputs
Input and Output — each references a type rather than containing one

See Critical UI Elements of Remarkable Interfaces ↩