UIEngine's Stately Layering Model

What is the simplest way to cause a change to an application's display?

What causes an application to need/want to change its display?

What is the simplest way to model display content and display changes?

These are the central questions that the designers of UIEngine's programming language have attempted to address.

UIEngine's programming language, UJML, is XML-based. As can be seen in the previously posted examples, the language allows one to layout visual components within a element. However, unlike other similar languages, UJML does not rely on DOM-based scripting to alter the display. DOM scripting, as is done in DHTML, was deemed overly technical for people interested in designing and implementing rich user interfaces.

Instead, UJML uses a layering model where one chooses which layers to display at any point in time. Layers each are defined by a element and the program makes these layers visible/invisible based on user interactions and simple calculations.

Since a display change is typically the result of some value changing within the program, UJML associates each layer with a value. Since values are stored in variables, the layer is associated with a value that a specified variable may contain.

In the sample below, the variable layer is defined of type integer. Later, we see a layer defined (UJML refers to layers as states; this will be explained in a later post). It is to be displayed when the layer variable contains value 1.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 
    1.5//EN" "http://www.uievolution.com/dtd/ujml-1.5.dtd" []>

<ujml>
  <application>   
    <state-variables>
      <state-var name="layer" type="int"/>
    </state-variables>
    <display>
      <box>
        <width>
          <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval>
        </width>
        <height>
          <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;)</eval>
        </height>
        <bg>&_COLOR_BLACK;</bg>
      </box>            
      <label>
        <text>Press FIRE</text>
        <fg>&_COLOR_YELLOW;</fg>
        <event name="onselect">
          <accelerators>
            <key>FIRE</key>
          </accelerators>
          <script>
            // User pressed FIRE or clicked on label; diplay layer
            layer = 1;
          </script>
        </event>
      </label>
    </display>
    <states>
      <-- A layer to be displayed when "layer == 1" -->
      <state var="layer">
        <transition value="1">
          <display>
            <box>
              <x>10</x>
              <y>10</y>
              <width>100</width>
              <height>100</height>
              <fg>&_COLOR_AQUA;</fg>
              <bg>&_COLOR_FUSCHIA;</bg>
              <label>
                <text>Layer One</text>
                <x>4</x>
                <y>4</y>
              </label>
            </box>
           </display>
        </transition>
      </state>
    </states>
  </application>
</ujml>

See it run...