Examples with variables

The following three examples show, how variables are used in UIML:

implementing a simple state machine for a push button implementing a more complex state machine for a copier validating input for a hotel reservation form

Implementing a Simple State Machine

Most simple example of a push-button, switching the state between on and off each time the button is pressed. The statespace is {on, off} and the inputspace consists only of a push-button.

<?xml version="1.0"?>

<!DOCTYPE uiml PUBLIC "-//OASIS//DTD UIML 4.0 Draft//EN"

"http://uiml.org/dtds/UIML4_0a.dtd">

<uiml>

<interface>

<structure>

<part id="button" class="Button"/>

</structure>

<style>

<property part-name="button" name="text">ON/OFF</property>

</style>

<behavior>

<variable name="OnOffState" type="boolean" reference="false">

false </variable>

<variable name="TrueValue" constant="true" type="boolean"

reference="false">

true </variable>

<variable name="FalseValue" constant="true" type="boolean"

reference="false">

false </variable>

<!-- If state == true and button pressed then state = false -->

<rule id="buttonPushedEven">

<condition>

<op nam="and">

<event part-name="button" class="buttonClicked">

<op name="equals">

<variable name="OnOffState"/>

<variable name="TrueValue"/>

</op>

</op>

</condition>

<action>

<variable name="OnOffState">

<variable name="FalseValue"/>

</variable>

</action>

</rule>

<!-- If state == false and button pressed then state = true -->

<rule id="buttonPushedOdd">

<condition>

<op nam="and">

<event part-name="button" class="buttonClicked">

<op name="equals">

<variable name="OnOffState"/>

<variable name="FalseValue"/>

</op>

</op>

</condition>

<action>

<variable name="OnOffState">

<variable name="TrueValue"/>

</variable>

</action>

</rule>

</behavior>

</interface>

<peers>

<presentation base="Generic_1.3_Harmonia_1.0">

</peers>

</uiml>

Implementing a More Complex State Machine

This example shows a part of a copier to set the machine state with respect to brightness and the page mode. There are two buttons, one to set the brightness (dark, normal and bright) and one to switch between single and double sided. Pushing the buttons cycles through the different states. The state-space is {dark, bright, normal}X{single, double} and the input-state-space is {setBrightness, setPageMode}

Since the brightness and page mode settings are independent from each other, 5 rules are sufficient to describe 9 transitions.

<?xml version="1.0"?>

<!DOCTYPE uiml PUBLIC "-//OASIS//DTD UIML 4.0 Draft//EN"

"http://uiml.org/dtds/UIML4_0a.dtd">

<uiml>

<interface>

<structure>

<part id="setBrightness" class="Button"/>

<part id="setPageMode" class="Button"/>

</structure>

<style>

<property part-name="setBrightness" name="text">brightness</property>

<property part-name="setPageMode" name="text">page mode</property>

</style>

<behavior>

<variable name="brightness" type="string" reference="false">

normal </variable>

<variable name="pagemode" type="string" reference="false">

single </variable>

<!-- constants -->

<variable name="bright" constant="true" type="string" reference="false">

bright </variable>

<variable name="normal" constant="true" type="string" reference="false">

normal </variable>

<variable name="dark" constant="true" type="string" reference="false">

dark </variable>

<variable name="single" constant="true" type="string" reference="false">

single </variable>

<variable name="double" constant="true" type="string" reference="false">

double </variable>

<!-- If brightness == dark and setBrightness pressed then brightness = normal -->

<rule id="cycleBrightness1">

<condition>

<op name="and">

<event part-name="setBrightness" class="buttonClicked">

<op name="equals">

<!-- If brightness == normal and setBrightness pressed then brightness = bright -->

<rule id="cycleBrightness2">

<condition>

<op name="and">

<event part-name="setBrightness" class="buttonClicked">

<op name="equals">

<!-- If brightness == bright and setBrightness pressed then brightness = dark -->

<rule id="cycleBrightness1">

<condition>

<op name="and">

<event part-name="setBrightness" class="buttonClicked">

<op name="equals">

<rule id="togglePageMode1">

<condition>

<op name="and">

<event part-name="setPageMode" class="buttonClicked">

<op name="equals">

<rule id="togglePageMode2">

<condition>

<op name="and">

<event part-name="setPageMode" class="buttonClicked">

<op name="equals">

<presentation base="Generic_1.3_Harmonia_1.0">

</peers>

</uiml>

Validating Input

This is an example of a part of a hotel reservation form that checks the entered number of rooms with the policy of the hotel booking system. In this example, the hotel requires a minimum of one room and a maximum of four rooms to be booked by individuals. Rooms can be entered directly in the textfield or by using up- and down buttons. by pressing the buttons, the new room number is immediately checked and the value in the textfield changed respectively. In case that the upper or lower bounds are reached, the value in the textfield does not change. By pressing the "submit" button, the value in the textfield will be submitted to the backend. The advantage of this method is evident when the User Interface is connected via a network to the backend logic. By checking valid values on the client side no re-transmissions are required. This is equivalent to HTML-forms, where JavaScript would be used to check the input prior submission.

<?xml version="1.0"?>

<!DOCTYPE uiml PUBLIC "-//OASIS//DTD UIML 4.0 Draft//EN"

"http://uiml.org/dtds/UIML4_0a.dtd">

<uiml>

<interface>

<structure>

<part id="topContainer" class="TopContainer">

<part id="labelRooms" class="TextBox"/>

<part id="editRooms" class="TextField"/>

<part id="buttonArea" class="Area">

<part id="buttonUP" class="Button"/>

<part id="buttonDOWN" class="Button"/>

</part>

<part id="buttonSUBMIT" class="Button"/>

</part>

</structure>

<style>

<property part-name="labelRooms" name="text">No. of Rooms:</property>

<property part-name="editRooms" name="columns">1</property>

<property part-name="editRooms" name="text">1</property>

<!-- Buttons should be aligned vertical -->

<property part-name="buttonArea" name="layout">grid</property>

<property part-name="buttonArea" name="layoutwidth">1</property>

<property part-name="buttonArea" name="layoutheight">2</property>

<!-- Button Styles -->

<property part-name="buttonUP" name="text">Up</property>

<property part-name="buttonDOWN" name="text">Down</property>

<property part-name="buttonSUBMIT" name="text">Submit</property>

<property part-name="buttonSUBMIT" name="buttontype">submit</property>

</style>

<behavior>

<!-- Proposal for UIML: Variables could be child of behavior -->

<!-- Scope of variables only within this subtree of behavior -->

<variable name="MinNoRooms" type="integer"

reference="false">1</variable>

<variable name="MaxNoRooms" type="integer"

reference="false">4</variable>

<variable name="curNoRooms" type="integer"

reference="false">1</variable>

<variable name="step" type="integer" constant="true" reference="false">

1

</variable>

<!-- Check for events:

<event part-name="editRooms" class="textEntered">

<op name="greaterthanorequal">

<rule id="upButtonPressed>

<condition>

<op name="and">

<event part-name="buttonUP" class="buttonClicked">

<op name="lessthan">

<property part-name="editRooms" name="text">

<variable name="curNoRooms"/>

</property>

</action>

</rule>

<rule id="downButtonPressed>

<condition>

<op name="and">

<event part-name="buttonDOWN" class="buttonClicked">

<op name="greaterthan">

<variable name="curNoRooms"/>

<variable name="minNoRooms"/>

</op>

</op>

</condition>

<action>

<op name="sub">

<variable name="curNoRooms"/>

<variable name="step"/>

</op>

<property part-name="editRooms" name="text">

<variable name="curNoRooms"/>

</property>

</action>

</rule>

<!-- variable assignments and rules a-c guarantee that values are correct

-->

<rule id="submitButtonPressed>

<condition>

<event part-name="buttonSUBMIT" class="buttonClicked">

</condition>

<action>

<call name="backendApplication">

<param><variable name="curNoRooms"/></param>

</call>

</action>

</rule>

</behavior>

</interface>

<peers>

<presentation base="Generic_1.3_Harmonia_1.0">

</peers>

</uiml>

In document User Interface Markup Language (UIML) Version 4.0 (Page 67-74)