User Interface

Development

Prepared By: Dawn Menor, MSIT

UI Framework and Toolkit

❏ UI toolkit is a library of precomposed UI objects (which would

include event handlers) and a predefined set of events that are
defined and composed from the lower-level UI software layer or
the UI execution framework.
❏ UI toolkit abstracts the system details of handling events and, as
such, programming for interactive software becomes easier and
more convenient.
❏ The UI toolkit is structured to support large applications.
❏ Some toolkits are standalone, while some are already integrated in
a framework.
Framework
❏ Framework is a well-defined environment that exposes toolkits,
functions or algorithms that can be used to develop new
applications.
❏ It contains specific structure for creating applications, building
executable version of applications, and sometimes including
mechanism for deploying and/or running an application.
❏ The terms “development platform” and “software development
platform” are used to describe frameworks (Harris Geospatial
Solutions, Inc., n.d.).
Toolkit

❏ Toolkit is a library of precomposed UI objects and predefined set

of events or routines that are composed from the lower level UI
software layer.
❏ UI toolkit abstracts the system details of handling events, which
makes programming easier and more convenient while creating
user-friendly interfaces.
❏ UI objects often take the form of a manipulable graphical
object, commonly called widgets.
Widget

❏ Widget is an essential part of a graphical user interface (GUI)

that displays information or provides a specific way for users to
interact with the operating system or application.
❏ Widgets include icons, menus, buttons, selection and text
boxes, progress indicators, on-off checkmarks, scroll bars,
windows, toggle buttons, forms, and even images.
Examples of UI
Framework and Toolkit
Java AWT Toolkit
❏ Java, as an object-oriented language, offers a library of object
classes called the AWT (Abstract Window Toolkit), which are classes
useful for creating two-dimensional (2-D) UI and graphical objects.
❏ Java AWT is not just a library of object classes for programming, but
also a part of the UI execution framework for Java that handles a
(large) subset of interaction events (called the AWTEvents).
❏ AWTEvents are descendants of EventObjects which cover most of
the useful UI events, such as mouse click and keyboard input.
❏ Java AWT is an API to develop Graphical User Interface (GUI) or
windows-based applications in Java.
Java AWT Toolkit
❏ According to Oracle, AWT supports GUI programming with the
following features:
❏ A set of native user interface components
❏ A robust event-handling model
❏ Graphics and imaging tools, including shape, color and font
classes
❏ Data transfer classes for cut-and-paste through native
platform clipboard
❏ Layout managers for flexible window layouts that do not
depend on a particular window size or screen resolution
The class hierarchy of UI objects
(top) and creating a window and
setting some of its properties
through calling its class-specific
methods (bottom).
AWTEvent Types and
Corresponding Overridable
Callback Functions

An interactive applet with callbacks for mouse events. When the mouse click is entered, the
applet draws an object at the click position. When the mouse moves, the whole applet is
repainted and a new cursor is drawn at the newly moved position.
Java AWT
AndroidTM UI Execution Framework and
Toolkit

❏ The user programming environment and execution model for

Android (even though at the low level, the operating system is
derived from Linux) is based on Java.
❏ Android event-processing model and programming toolkit
structure are mostly the same as those of Java (or more
specifically Java AWT), except that the Android UI toolkit, in
addition to the programmatic method, includes a declarative one
for specifying the UI and defining its behaviors.
AndroidTM UI Execution Framework and
Toolkit
❏ Thus, the framework and features of the Android operating system is
available through application program interfaces or APIs written in
Java. According to the developers’ website of Android, the framework
provides the following:
❏ A rich and extensible View System that is used in building an
application’s user interface
❏ A Resource Manager which provides access to non-code resources
such as localized strings, graphics, and layout files
❏ A Notification Manager that enables all applications to display custom
alerts in the status bar
❏ An Activity Manager that manages the lifecycle of applications
❏ A Content Provider that enables applications to access data from
other applications.
AndroidTM UI Execution Framework and
Toolkit

❏ Events in Android can take various forms which are usually

generated in response to bare and raw external actions, such as
touch and button input.
❏ Multiple or composite higher-level events may also be internally
recognized and generated, such as touch gestures (e.g., flick and
swipe) and virtual keyboard inputs.
❏ The Android framework maintains an event queue into which
events are placed as they occur. Then, the events are removed from
the queue on a first-in, first-out (FIFO) basis.
iOS UIKit Framework and Toolkit
❏ According to Kim (2015), there are three (3) major types of
discrete events for iOS: multi-touch, motion, and remote control
(such as remote-controlled headphones for iOS devices).
❏ Thus, based on the developers’ website of Apple Inc., the iOS
UIKit framework provides the required infrastructure for iOS or
tvOS applications and provides the window and view
architecture for the following:
❏ Implementing interfaces
❏ Event handling infrastructure for delivering multi-touch and
other types of input to the application
❏ The main run loop needed to manage interactions among
the user, the system, and the application.
iOS UIKit Framework and Toolkit

❏ In general, iOS generates low-level events when users touch

“views” of an application. Then, the application sends these
discrete events as UIEvent objects, as defined by the UIKit
framework to the view on which the touch occurred. The view
analyzes the touch event and responds to it, where touch events
can be combined to represent higher-level gestures such as
flicks and swipes (Kim, 2015).
 Other UI Frameworks and Toolkits

Web UI Frameworks Description

JavaServer Faces (JSF) Supported by Oracle, this framework comes with in-depth and complex
documentation features and plays an important part in the Java
Enterprise Edition.

Struts This is an open-source framework that is used to create elegant,

aesthetically pleasing Java applications. The functions of this framework
are based on the Model-View-Controller (MVC) approach. This is made
for fast development and testing but is not flexible due to a set of coding
and designing rules integrated into the framework.

Wicket Supported by Apache Software Foundation, this is a lightweight Web

framework built for designing simple but elegant applications in a
component-based language that is useful and responsive. HTML can be
easily integrated into this framework.
 Other UI Frameworks and Toolkits

Mobile UI Kits iOS and Description

Android

Spool UI Kit This is a free mobile toolkit designed by Sergey Melnik that
contains six (6) screen designs in Photoshop Document
(PSD) format.

Travel UI Kit This is a free mobile toolkit designed by Ena Bacanovic that
contains 50 different screen designs in Sketch format.
Splash U

Splash UI Kit Powered by Envato Elements Pty Ltd., this is one of the best
toolkits in creating iOS mobile application. This contains
more than 55 high-quality, ready to use screens.