| Components | Properties |
| label | |
| multiline label | |
| title label | |
| list | single or multiple selection,
scrollable. |
| text output | not editable,
scrolled. |
| iotext field | editable,
foreground is black when not focused, blue while entering value and red when 'Enter' typed, scrolled. |
| iopush box | popup,
with OK & Cancel buttons, foreground is black and becomes blue while entering value. |
| ongoing box | appears when activity starts and disappears when the activity ends. |
| warning box | with OK button. |
| dialog box | with OK & Cancel button. |
| file selection box | |
| busy image | flashing when activated.
raises a warning box when time elapsed. |
| output message area | |
| information area | |
| radio buttons | |
| toggle buttons | |
| action button | yellow on black |
| switch interface button | |
| option menu | the selected option is displayed |
| action buttons menu | the selected action is displayed |
| pulldown menu |
Definitions :
DEVELOPER : the person who writes the Application
USER : the person
who uses the Application
STATICALLY CREATED INTERFACE : All components
are created before the User starts interacting with the Application.
This may include also parts which are not initially visible.
DYNAMICALLY CREATED INTERFACE : New components may be created when needed, for example as a result of some User's interaction
ACTIVE COMPONENT : A Component accepting User's
Interaction (ex. ICON, LIST, MENU,...)
These Components are mainly used to let the User force the Application
to perform the required Actions.
PASSIVE COMPONENT : A Component insensitive to User's
Interaction (ex. LABEL, any kind of CONTAINER ....)
These Components are mainly used to display information and to define the
layout of the GUI
(where is what, what is visible and what is not ....)
-------------------------
Overall Strategy : the Developer
MUST
Some examples
======================================================
+
+
DISPLAYING INFORMATION
+
+
======================================================
-------------------------------------------------------------------
LABEL : a place containing a short message. Not sensitive to
User's actions.
Typical goal is to explain
the meaning of some other part of the GUI
Typical initial values to be set : initial message, foreground and background color, fonts
Property to be set from program : message
One can think of defining different classes of labels, with different colors, to be used to divide different logical parts of the same interface. One example is the TITLE Label
Desirable Extension : MULTILINE LABEL (Compared with Motif SingleLine Label)
-------------------------------------------------------------------
TEXT (or SCROLLED TEXT) area : a place where the program
can write its output
======================================================
+
+
EXECUTING ACTIONS
+
+
======================================================
-------------------------------------------------------------------
ICON : an action button. If the User clicks on it, an action
will be executed.
Default colours : Yellow on Black
Typical initial value to be set : Action Name
What happens when the User clicks : a callback is invoked (for instance "execute_action"). The identifier of the ICON is passed to the callback, so that the Developer will dispatch to the action to be executed for that ICON
ex.
execute_action(icon_id)
{
if (icon_id == START) start();
if (icon_id == RELOAD) {
reload();
compute();
update();
}
if (icon_id == STOP) stop();
}
Properties to be set from the program : sensitivity (in some cases an
action can be vetoed)
------------------------------------------------------------------------
Ad Hoc Icon : QUIT Button : an ICON which is used to Quit the
program
------------------------------------------------------------------------
======================================================
+
+
LIST
+
+
======================================================
LIST (and SCROLLED LIST): contains a list of elements.
If the User clicks on one of the elements, one of "list_simple_selection"
or "list_multiple_selection" routines (depending on the Selection Policy
of that List) will be called.
A set of utility functions should be provided to assist the Developer
in the list handling.
======================================================
+
+
MENUS
+
+
======================================================
OPTION MENU (the selected option is displayed)
Behavior : when the User clicks on the Option Menu Button, the entire
menu is cascaded below it.
The User can then select a new Option. In this case
1) routine execute_action will be called, and
2) the newly selected Option will appear as the
Option Menu Button Label
The User may also decide of doing nothing, by clicking elsewhere .
PULLDOWN or POPUP Menus (May have a complex hierarchy)
------------------------------------------------------------------------
SWITCH MENU (based on Button) : an action button linked to a
circular list of choices. By clicking on the button, the next possible
choice will be selected, and routine "select_enum_value" called.
A set of utility functions should be provided to assist the Developer
in the switch handling (adding or removing elements, setting or getting
the selection).
======================================================
+
+
INPUTTING VALUES
+
+
======================================================
We will define two ways : the popup way (IOPUSH) and the direct input
way (TRIMTEXT)
The first method is used, for example, by the QMETER. It has the advantage
that the value appearing in the Interface always reflects the value of
the corresponding variable in the Application Program.
The second method is used in the Lep Actual Trim Program. Its advantage
is that the input is more immediate.
-------------------------------------------------------------------
IOPUSH (ICON FOR ALFANUMERICAL INPUT) : a button displaying
an alfanumeric value.
If the User clicks on it, a popup will appear, consisting of an information
LABEL, a TEXTFIELD, and three BUTTONS
("OK", "CANCEL", "HELP");
-The LABEL should contain an explicative message
-The TEXT FIELD should contain the same text string as the IOPUSH itself
(it should be set by the system when the popup is made visible)
The Popup will become the only part of the interface to accept User input.
When the User clicks on OK, or types the "Enter" character in the text
field, control is transferred to callback NumericOk.
This callback
a) converts the value of the text field into a string
b) passes the string, and the identifier of the IOPUSH
component to routine "text_io_check", where the Developer will insert checks
on the input value (and possibly execute actions). This routine is expected
to return 0 if the value is acceptable, -1 otherwise.
c) If text_io_check returns 0, the popup is popped down,
and the rest of the interface becomes active again.
If text_io_check returns
-1, the popup is not popped down, and the User must still interact with
it.
When the User clicks on "CANCEL", control is transferred to callback
NumericCancel. This routine will just popdown the popup, and the rest
of the interface becomes active again.
[Optional] When the User clicks on "HELP", control is transferred to
callback
NumericHelp ..... ->text_io_help
Remark. It could be convenient to add to the Popup an additional label
containing the current value of the variable to be modified, so that this
is visible even after the User starts typing the new value.
-------------------------------
| Number of
coffees per day [1..10]
| <- Info message for the User
| Current Value
: 3
| <- This line is optional
|
|
| 3
| <- Modifiable text field to input new value
|
|
| OK
CANCEL HELP
|
-------------------------------
The Popup associated with
alfanumerical input
Remark : In XCREATOR, the developer declares the IOPUSH buttons : all
the POPUP handling is essentially given for free by including a .x file
.......
WIDGET APPLICATION exercise1 NULL
WIDGET FORM contains_all exercise1
.....
WIDGET DIALOG input_shell contains_all <- this
line and the next
#include "iodialog.x"
<- are needed to create the POPUP
.....
-------------------------------------------------------------------
TRIMTEXT : a TEXT FIELD for direct alfanumerical input
The new value is inputted directly into the main body of the GUI.
Four callbacks are implemented :
text_focus
text_losing_focus
text_input
text_value_change
As the problem is to let the User know if he has already starting modifying
the data, and if he has already finished, different colors are used, corresponding
to the different possibilities:
-black : initial and final state, GUI value corresponds to Program
value, User is not interacting.
-red : TRIMTEXT has focus, but either text field value
has not yet been modified, or User has already typed Return.
-blue : User has started modifying the text field value, but
he hasn't yet typed Return.
As in the previous case, the new value should be validated by passing
through text_io_check
=================================================
+
+
CONTAINER ELEMENTS
+
+
=================================================
This reflects my experience with Motif and XWindow
FORM : can contain other Components. The Layout of these Components
can be defined in a variety of ways, but the most useful for our purpose
is the one called in Java "GridBagLayout".
WINDOW : In some cases an Application's GUI could be distributed
between different windows (ex. in the SPS there is often a small Window
containing an image of the Supercycle)
=================================================
+
+
TRANSIENT ELEMENTS
+
+
=================================================
Components non permanently visible
----------------
ONGOING BOX : Made visible by the program when some activity
starts.
Made invisible by the program when the activity is finished (or after a
timeout)
----------------
WARNING BOX : Displays some info for the User.
Started when the program detects a situation to be reported to the User.
It disappears when the User acknowledges the message by crossing it with
the mouse cursor.
----------------
DIALOG BOX : A transient shell containing any kind
of Component, with which the User can interact.
For example a CONFIRMATION BOX
CONFIRMATION BOX : Asks a question to the User.
Blocks the normal activity until the User does reply.