Chapter 12 Lecture: GUI Programming, Multithreading, and Animation

Programming Logic and Design
Eighth Edition
Chapter 12
Event-Driven GUI Programming,
Multithreading, and Animation

Objectives
2
In this chapter, you will learn about:
• The principles of event-driven programming
• User-initiated actions and GUI components
• Designing graphical user interfaces
• Developing an event-driven application
• Threads and multithreading
• Creating animation
Programming Logic and Design, Eighth Edition

Understanding Event-Driven
Programming
3
• Operating system
– The software used to run a computer and manage its
resources
• Early days of computing
– Command line entry: the DOS prompt
– Interacting with a computer operating system was
difficult
– The user had to know the exact syntax to use when
typing commands

Programming (continued)
4
Figure 12-1 Command prompt screen

5
• Modern operating system software
– Allows use of mouse or other pointing device to select
icons
– GUI
• Computer users can expect to see a standard
interface
• Event
– Generates a message sent to an object

6
Understanding
Event-Driven
Programming
(continued)
Figure 12-2 A GUI application that
contains buttons and icons

7
• Event-driven or event-based program
– Actions occur in response to user-initiated events such as
clicking a mouse button
– Emphasis is on the objects that the user can manipulate
– Programmer writes instructions within modules that
execute each type of event

8
• Procedural application
– Programmer controls order of program statements
• Event-driven programs
– User might initiate any number of events in any order
– More flexible than procedural counterparts

9
• Source of the event
– The component from which an event is generated
• Listener
– An object that is “interested in” an event to which you
want it to respond to
• Not all objects can receive all events
• Event-driven programming is relatively new
– But it uses many similar techniques to procedural

User-Initiated Actions and GUI
Components
10
Table 12-1 Common user-initiated events

Components (continued)
11
Table 12-2 Common GUI components

12
Figure 12-3 Common GUI components

13
• Do not create the GUI components you need from
scratch
– Call prewritten methods that draw the GUI components
on the screen for you
• Components themselves are constructed using
existing classes complete with names, attributes,
and methods
• Text or graphical environment

14
Figure 12-4 Button class

15
• Create a Button object
– Button myProgramButton
• Use Button’s methods
– myProgramButton.setText("Click here")
– myProgramButton.setPosition(10, 30)
• Different GUI classes support different attributes
and methods

Designing Graphical User Interfaces
16
• The interface should be natural and predictable
• The interface should be attractive, easy to read, and
nondistracting
• To some extent, it’s helpful if the user can customize
your applications
• The program should be forgiving
• The GUI is only a means to an end

The Interface Should Be Natural
and Predictable
17
• Represent objects like their real-world counterparts
• Actions should be predictable
– Similar to other programs
• Be predictable in layout
– Put related items together in proper order
– Locate menu at top, etc.

The Interface Should Be Attractive,
Easy to Read, and Nondistracting
18
• Attractive
– People are more likely to use it
• Easy to read
– Less likely to make mistakes
• Screen designs should not be distracting
– Fancy fonts and weird color combinations are the signs of
amateur designers

To Some Extent, It’s Helpful If the User
Can Customize Your Applications
19
• It’s helpful if users can position the components in
the order with which it’s easiest for them to work
• Users appreciate being able to change features like
color schemes
• Accessibility
– Screen design issues that make programs easier to use for
people with physical limitations

The Program Should Be Forgiving
20
• Always provide an escape route
– Accommodate users who make bad choices or change
their minds
– Back button or functional Escape key
– Allow users to perform tasks in a variety of ways:
• Mouse click
• Keyboard shortcut
• Menu item
• Disability options

The GUI Is Only a Means to an End
21
• The GUI is only an interface
• The point of a graphical interface is to help people
be more productive
• The real work of any GUI program is done after the
user clicks a button or makes a list box selection

Developing an Event-Driven
Application
22
• Steps to developing a computer program
1. Understanding the problem
2. Planning the logic
2a. Creating storyboards
2b. Defining the objects
2c. Defining the connections between the screens the user will see
3. Coding the program
4. Translating the program into machine language
5. Testing the program
6. Putting the program into production
7. Maintaining the program

Developing an
Event-Driven Application (continued)
23
Table 12-3 Insurance premiums based on customer characteristics

Creating Wireframes
24
• Wireframe
– A picture or sketch of a screen the user will see when
running a program
– Also called a page schematic or screen blueprint
– Can be pencil sketches or produced by software
applications

Creating Storyboards
25
• Storyboard
– Contains a series of wireframes that represent a user’s
experience with the proposed software
• GUI storyboards
– Represent “snapshot” views of the screens the user will
encounter during the run of a program

Creating Storyboards (continued)
26
Figure 12-5 Storyboard for insurance program

27
Defining the Storyboard Objects
in an Object Dictionary
• An event-driven program may contain dozens or
even hundreds of objects
• Object dictionary
– A list of the objects used in a program
– Includes which screens they are used on and whether any
code, or script, is associated with them

28
Defining the Storyboard Objects
in an Object Dictionary (continued)
Figure 12-6 Object dictionary for insurance premium program

29
Defining Connections Between
the User Screens
• Draw the connections between the screens to show
how they interact
• Interactivity diagram
– Shows the relationship between screens in an interactive
GUI program
• One screen may lead to different screens depending
on the options the user selects at any one screen

30
Defining Connections Between
the User Screens (continued)
Figure 12-7 Interactivity diagram for insurance
premium program
Figure 12-8 Interactivity diagram for a
complicated program

31
Planning the Logic
• Design the screens
• Define the objects
• Define how the screens will connect
• Then start to plan the class
• Create the component onto which all the GUI
elements are placed
– Might use a class with a name such as Screen, Form, or
Window

32
Figure 12-9 Component definitions for first screen of insurance program
Planning the
Logic (continued)

33
• Register components
– Sign them up so that they can react to events initiated by
other components
• Container
– A class of objects whose main purpose is to hold other
elements
– Contains methods that allow you to set physical
properties such as height and width
– Contains methods that allow you to add the appropriate
components to a container
Planning the Logic (continued)

34
Figure 12-10 Statements that create
screen1
Figure 12-11 Statements that define and
create screen2 and its components

35
Figure 12-12 Pseudocode for calcRoutine()
method of insurance premium programProgramming Logic and Design, Eighth Edition

36
Understanding Threads and
Multithreading
• Thread
– The flow of execution of one set of program statements
• Many applications follow a single thread
• A computer’s central processing unit (CPU) can
execute only one statement at a time regardless of
its processor speed
• A computer with multiple CPUs can execute
multiple instructions simultaneously

37
Multithreading (continued)
• Multithreading
– Using multiple threads of execution
– Multiple threads share the CPU’s time for a single
processor
• Use multithreading to improve the performance of
your programs
– More user friendly
• Object-oriented languages often contain a built-in
Thread class
– Contains methods to help handle multiple threads

38
Figure 12-14 Executing multiple tasks
as single threads in a single-processor
system
Figure 12-15 Executing multiple threads in
a single-processor system

39
• Code carefully to avoid deadlock and starvation
– Two or more threads wait for each other
– Threads are abandoned when other threads have all
resources
• Techniques like thread synchronization avoid
problems such as:
– Two clerks accessing the same record, and the first one
updating it while the other is still viewing it
– The second user still thinks the data is accurate

40
Creating Animation
• Animation
– A rapid sequence of still images
– Each is slightly different from the previous one
– Produces the illusion of movement
• Object-oriented languages offer built-in classes
used to draw geometric figures on the screen
• Position
– Horizontal: x-axis, x-coordinate
– Vertical: y-axis, y-coordinate

Creating Animation (continued)
41
Figure 12-16 Selected screen coordinate positions

42
• MovingCircle
class
– Moves a circle across
the screen
– Constants SIZE and
INCREASE
– drawCircle()
method
– sleep() method
Figure 12-17 The MovingCircle class

43
Figure 12-18 Output
of the
MovingCircle
application

Summary
44
• Graphical user interface (GUI)
– Users manipulate objects such as buttons and menus
– Listeners are “interested in” an event
– Common user events involve mouse events
• Common GUI components include labels, text
boxes, buttons, check boxes, check box groups,
option buttons, and list boxes
• Interface should be natural, predictable, attractive,
easy to read, and nondistracting

Summary (continued)
45
• Event-driven applications require wireframes and
storyboards, defining objects and defining
connections the user will see
• Thread
– The flow of execution of one set of program statements
• Animation
– A rapid sequence of still images

Chapter 12 Lecture: GUI Programming, Multithreading, and Animation

Recommended

More Related Content

What's hot (20)

Similar to Chapter 12 Lecture: GUI Programming, Multithreading, and Animation (20)

More from Nicole Ryan (20)

Recently uploaded (20)

Chapter 12 Lecture: GUI Programming, Multithreading, and Animation