UI Development Toolkit

Cont...
• Interface - UI Toolkits
• Core Applications – Conventional
Programming Languages
Cont...

• The UI toolkit is a library of precomposed UI

objects (which would include event handlers)
and a predefined set of events.
• The UI object often takes the form of a
manipulable graphical object, often called a
widget.
Cont...
• A typical widget set includes
menus,
buttons,
text boxes,
images, etc.
 Motivation
• Current technology allows complex user interfaces:
– graphics, windows, multi-tasking, drag and drop, etc
– differences in I/O devices, customization of user
interfaces
• Competitive pressure
– user interfaces are the most visible part of a system
– fast development cycles
• UI development tools are business opportunities
– savings in development time, more attractive appearance,
 Benefits
• Simple GUI
– for designing windows and screens
• Greater access and use
– permit non-programmers to contribute their expertise
• Prototype development
– can be used to build prototypes throughout the development
cycle
– some tools provide a mode for testing displays without
compiling and executing the entire application
• User input
– users can evaluate each prototype and provide feedback
– users are more satisfied with the final product
 Benefits (cont.)
• Automatic code generation
– some tools can generate part of the interface code
• Less code to write
• Generated code is more consistent
• Coding standards like naming conventions and standard
headers and comments are maintained automatically
• Generated graphics code contains fewer bugs when isolated
from the functional code
• Tool-generated display designs, components, and generated
code can sometimes be reused
– saves development time
– provides consistency across different UIs
– different applications are more likely to have consistent UIs if they are
built using the same tool
 Drawbacks
• Increased task difficulties
– the automatically generated code can be extremely
difficult to read and modify
– integration with the rest of the application can be
difficult
• Impact development schedule
– can affect the UI development schedule
• tool may be complex, slow, not robust, inconsistent,
buggy
 Java AWT UI 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.
UI Development Toolkit
Creating AWT window
/* create a frame, a window with a menu bar */
my_frame = new Frame(“my frame”);
my_frame.show();
my_frame.resize( ... );
/* display it */
/* resize it */
/* create a menu bar */
MenuBar mb = new MenuBar();
/* set the menubar for the frame */
my_frame.setMenuBar(mb);
...
 AWTEvent Types and Corresponding
Overridable Callback Functions
AWT EVENT TYPE CALLBACK FUNCTION
mouseDown mouseDown (Event evt, int x, int y)
mouseUp mouseUp (Event evt, int x, int y)
mouseEnter mouseEnter (Event evt, int x, int y)
mouseExit mouseExit (Event evt, int x, int y)
mouseDrag mouseDrag (Event evt, int x, int y)
gotFocus gotFocus (Event evt, Object x)
lostFocus lostFocus (Event evt, Object x)
keyDown keyDown (Event evt, int key)
keyUp keyUp (Event evt, int key)
action Action (Event evt, Object x)
Ex:
 Listeners
• Event handler in Java AWT called as Listeners

• It is a background process that listens for the

associated events for a given UI object and
responds to them.
UI Development Toolkit
The event-component hierarchy in Java AWT.
Java AWT Event Description and Examples
EVENT CLASS DESCRIPTION/EXAMPLES
ActionEvent Button press, double-click on an item, selection
of a menu item
AdjustmentEvent A Scroll bar movement
ComponentEvent Hiding/revealing a component, component
movement, and resizing
FocusEvent Component gaining or losing a focus
KeyEvent Keyboard input
ItemEvent Checkbox selection/deselection, menu item selection
MouseEvent Mouse button, mouse moving, mouse dragging, mouse focus
TextEvent Text entry
WindowEvent Window opening and closing, window
activation/deactivation
Cont...
Android UI Execution Framework and Toolkit
Cont...
• Events in Android can take a variety of
different forms,
Touch
Swipe
Button &
Virtual KB I/P
Cont...
Cont...
• Events passed to view object by current focus
item
• Events + Event Info pass to view object
• Two ways to define events reactive behavior
1. Override Callback methods
2. Override default view method
Example: iOS UIKit Framework and Toolkit
Cont...
• Types of iOS Events:
1. Multitouch
2. Motion
3. Remote_Control

Touch Events combined as(higher level gestures),

Flicks,
Swipes
iOS UIKit A UI object hierarchy example
The event-processing flow and the event-driven object
behaviour structure.
 Interactive System
Development Framework
 Interactive System
Development Framework
• MVC
Model,
View,
and Controller
Model, View, and Controller (MVC)
• The modular nature of the MVC architecture
naturally shaped the interactive program
development style or methodology.

• With the MVC framework, the application is

divided into three parts: (a) model, (b) view,
and (c) controller
Cont...
Model
• Main information or data of the application
• Ex:
in an interactive banking application,
the model will be
1. Parts of the program that maintain the
balance
2. Compute the interest,
3. Make wire transfers, etc.
Cont...
• The model has no knowledge of how the
central information will be presented to the
user (output/presentation) or how the
transactions (input) are made.
View
• To the implementation for output and
presentation of data
• Views might be windows and widgets that
display the list of transactions and the balance
of a given account in a banking application
• Anytime the model is changed, the view of
that model must be notified so that it can
change the visual representation of the model
on the output display
Controller

• To manipulate the internal model

• It takes external inputs from the user and then

interprets and relays them to the model
• The controller thus practically takes care of
the input part of the interaction
Cont...

• Sometimes it might also change the content of

the display without changing the model.
• For instance, if the user wanted to simply
change the color of a button
View/Controller

• The view and controller may be merged into

one module or object because they are so
tightly related to each other.
Example of MVC Implementation 1: Simple
Bank Application
Cont...