Chapter 15:

GUI Applications & Event-Driven Programming

Starting Out with Programming Logic & Design

Second Edition

by Tony Gaddis

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

Chapter Topics
15.1 Graphical User Interfaces
15.2 Designing the User Interface for a GUI
Program
15.3 Writing Event Handlers

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-2

15.1 Graphical User Interfaces

A Graphical User Interface (GUI) allows the user to
interact with the operating system and other programs
using graphical elements such as icons, buttons, and
dialog boxes
Much of the work of a GUI is done through dialog boxes,
which are small windows that display information and
allow the user to perform actions
In a command line interface, the programs determine the
order in which things happen
In a GUI, the user can determine the order this is called
event driven
Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-3

15.1 Graphical User Interfaces

Figure 15-3 A GUI program

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-4

15.1 Graphical User Interfaces

Creating a GUI Program
Most of the steps are the same
But, the programmer also designs the GUI
elements that make up each window
This includes the flow from window to window
Figure 15-4 A user interface flow
diagram

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-5

15.2 Designing the User Interface for a GUI

Interface
GUI development also includes the programs
windows and all the graphical components
In the past, this was a cumbersome process
Newer languages allow for easier development
Using Microsoft Visual Studio
Visual Basic
C++
C#

Using NetBeans and JBuilder

Java

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-6

15.2 Designing the User Interface for a GUI

Interface
Most IDEs have a toolbox for easy development
Figure 15-5 Visually
constructing a window in
Visual Basic

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-7

15.2 Designing the User Interface for a GUI

Interface
Components are items that appear in a programs
graphical user interface

Button: causes an action to occur when clicked

Label: can display text
Text Box: Allows the user to enter a single line of input
Check Box: Allows one or more options to be selected
Radio Button: Allows only one option to be selected
Combo Box: A dropdown list of items that the user can
select an item from, or enter input
List Box: A list from which the user can select an item
Slider: Allows the user to select a value from a range

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-8

15.2 Designing the User Interface for a GUI

Interface
Figure 15-7 Various components in a GUI window

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-9

15.2 Designing the User Interface for a GUI

Interface
Component names are used to identify the
components in the program, in the same way
variable names are used
Figure 15-8
Components and their
names

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-10

15.2 Designing the User Interface for a GUI

Interface
Properties can be set on components to modify
how it appears on the screen
Sets things like color, size, and position

A summary of constructing a window

Sketch the window
Create the necessary components and name them
Set the components properties to the desired
values

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-11

15.3 Writing Event Handlers

Event handlers are written to control the GUI
After the windows are designed, event handlers are
coded to respond to events when an action occurs,
such as clicking a button
Event: an action that takes place within a program
Event handlers: a module that automatically
executes when a specific event occurs

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-12

15.3 Writing Event Handlers

How to write the event handler module
Module ComponentName_EventName()
The statements that appear here
are executed when the event occurs.
End Module
//an event handler that closes a window
Module exitButton_Click()
Close
End Module

Copyright 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

15-13