Module 5 – User Interface Layer

Understanding the UI Layer and Its Execution

Framework
Cont...
• Interactive applications are implemented and
executed using the user interface (UI) software
layers (collectively the UI layer).
• The UI layer refers to a set of software that
operates above the core operating system
(and underneath the application).
Cont...
• It encapsulates and exposes system functions for
1. Fluid input and output (I/O)
2. Facilitation of development of I/O functionalities
3. Run-time management of graphical applications
and UI elements
Cont...
• UI Layer is largely composed of
a.) API
– Creating & Managing UI Elements
b.) Window Manager
– Operates & Manages Application
User interface software layer for a window-based
multitasking UI
UI Software Layer
Application
Window Manager System/API
Application

GUI API (Toolkit) Application

Windowing API

Input
Devices
Graphics API (Core) Operating System Display
Devices
Input and Output at the Low
Level
Cont...
• At the lowest level, inputs and outputs are
handled by the interrupt mechanism of the
system software (operating system).
• An interrupt is a signal to the processor
indicating that an event (usually an I/O event)
has occurred and must be handled.
• The interrupt mechanism is often contrasted
to polling (also known as busy waiting).
Cont...
• At a higher level, the I/O operation is often
described in terms of events and event
handlers, which is in fact an abstraction of the
lower level interrupt mechanism.
• This is generally called the event-driven
architecture
Cont...
Processing the Input and
Generating Output
Cont...
I. Events, UI Objects, and Event Handlers
II. Event-Driven Program Structure
III. Output
I. Events, UI Objects, and Event Handlers

• Two major methods for focusing are

(a) click-to-type
User has to explicitly click on the window
(b) move-to-type
The window over which the mouse
cursor hovers becomes the focus
Cont...
• Event:

The physical input from the user/devices

is converted into an event (e.g., by the device
drivers and operating system), which is simply
data containing information about the user’s
intent or action.
Cont...
• Event Contains:

Aside from the event value itself (e.g., which key was pressed),
an event usually contains additional information such as its
1. Type,
2. A time stamp,
3. The window to which it was directed, and
4. Screen coordinates
Event being dispatched to the right UI object handler for a given application (organized as a set of UI
objects and associated event handlers in a hierarchical manner) from the application event queue
Cont...
• Event does not necessarily correspond exactly
just to an individual physical input.
• A sequence of raw inputs may form a
meaningful event such as a
1. Double-click command,
2. Keyboard commands with modifiers
(e.g., ctrl-alt-del)
Two-tier event-queuing system
Cont...

• The events do not necessarily have to be

generated externally by the interaction
devices; indeed, sometimes they are
generated internally for special purposes
(these are sometimes called the pseudo-
events).
Cont...
• For instance, when a window is resized, in
addition to the resizing event itself, the
internal content of the window must be
redrawn, and the same goes for the other
windows occluded or newly revealed by
the resized window.
In the case of resizing/ hiding/activating
and redrawing of windows, it is the individual
application’s responsibility, rather than the
window manager’s.
Exposing a window and redrawing

System Area to be renewed and redrawn

Event Queue
Event 105
Type: Redraw
Value: (100 100) (300 300) Window 1
Time: 05:12:54
Window 1
Window 1
Redraw
Handler
II. Event-Driven Program Structure
• The first initialization part of the program
creates
1. The necessary UI objects for the
application
2. Declares the event-handler functions
and
3. Procedures for the created UI objects.
Cont...
 III. Output
• The event handlers compute for the
1. Response behaviour and
2. Needed changes in data or
3. New output in a chosen modality
(e.g., visual, aural, haptic, tactile, etc.).
Cont...
• A with multimodal output, the outputs in
different modalities need to be synchronized
(e.g., output visual and
aural feedback at the same, or nearly
the same, time).