GUI Model Concepts

Figure 6.11 depicts a snippet of the GUI model diagram. The basis concept for all elements of a GUI is the concept UIElement which provides some relevant basic attributes like the element ID, the dedicated style, a flag that represents the enabled state, and the absolute coordinates of the element on the screen.

One important subtype of this concept is the Container concept which consolidates all elements that can be a container for a collection of other UIElements. The most ele- mentary concrete subtype of this is a Canvas, an empty box that will apply an absolute layout in order to set up and place the inner elements. Elements within this container should be annotated with x and y coordinates for the position. Other concepts automat- ically manage the layout of their inner elements, e.g., a VBox arranges them vertically, an HBox does this correspondingly in a horizontal direction. With a GridContainer the developer can arrange the inner elements in a grid layout. It consists of rectangular areas defined by rows and columns, resulting in a grid that is used to position the inner items. Each element is placed in one or more cells which is fully covered by the element. Forms are used to combine several input elements like text fields, check boxes, radio buttons, selection lists, and more. With a Form it is possible to collect the information from all

6.3 Modelling Graphical User Interfaces 139

Figure 6.11 – Snippet of the GUI model

these input elements and send them together to the dialogue system in one event by clicking on a SubmitButton. One other important subtype is the concept Window, which represents the main widget of a display and is the root element of a GUI.

Another subgroup of the UIElement constitutes concrete GUI control elements, the figure only depicts the most common of them. However, the model supports most control elements already known from other GUI specification languages. It is possible to design labels, buttons, text input fields and areas, check boxes and more, and to configure them, e.g., by setting an attribute for the label of a button. Other elements show media information like an image or a media player. Also more complex views are possible, e.g., the model supports dialogue boxes, calendar views, progress bars, colour pickers and HTML viewer.

The content of a GUI is manipulated by the use of a GUIRequest (Figure 6.12), a subconcept of the IoModel concept OutputRepresentation. Two concrete subtypes are derived from this abstract concept. A new user interface is introduced to a display with the concept GUIApplication. The GUIApplication must define the complete GUI content with a Window instance. Additionally, it is possible to add a style sheet resource to the application.

If an existing GUI should be adapted, the concept GUIUpdate is used that contains the attribute applicationID for identifying the correct application to update. The following updates can be specified:

AddUIElement - A new element is added to the element with the given parent id. Furthermore, the position of the new element in the parent element can be specified. RemoveUIElement - The element with the given ID is removed from the GUI.

Figure 6.12 – Snippet of the model for describing GUI requests

UIElementUpdate - The attributes of the element with the given ID are updated to new values. Some general attributes are already defined in this abstract concept, e.g., the enabled attribute, the style, or a tooltip for the triggering of help informa- tion. Other attributes are element specific and defined in concrete update concepts for the particular types of control elements.

WindowUpdate - This update replaces the complete window with the definition of a new window.

StyleSheetUpdate - With this update the GUI can be connected to a new style sheet resource.

A GUIUpdate request can contain more than one update. In this case all updates are performed simultaneously.

GUI Events

A GUI is an interface with a bidirectional communication direction which means that it is not only used for output purposes, the user also interacts with the displayed control elements: He presses buttons, inserts text, or selects entries of a list and thus gives input to the application. In GUI programming, the action of a user is normally represented by GUI events in an event driven programming approach. SiAM-dp follows this approach and defines a GUI event model that describes user actions. The concept diagram of this model is depicted in Figure 6.13.

6.3 Modelling Graphical User Interfaces 141

Figure 6.13 – Overview of the GUI event model

The main concept of this model is the GUIEvent that is derived from the IO model con- cept InputRepresentation. A GUIEvent contains an instance of the concept GUIEventData that provides all the necessary information of an event. This class is abstract and a super concept of all event specific representations. It describes some common attributes like the ID of the affected control element and a value that describes the input if necessary, e.g., an inserted text.

The particular events are represented by concrete subconcepts of the GUIEvent and can provide additional event attributes. The diagram shows a subset of these events. The SubmitEvent is a special event that is fired if the submit button of a Form container is triggered. It provides a map that contains all current values of the input elements inside of this form with the corresponding element ID as the key.