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

3. 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

4. 15.1 Graphical User Interfaces
Figure 15-3 A GUI program

5. 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 A user interface flow diagram

6. 15.2 Designing the User Interface for a GUI Interface
GUI development also includes the program’s 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

7. 15.2 Designing the User Interface for a GUI Interface
Most IDE’s have a toolbox for easy development
Visually constructing a window in Visual Studio

8. 15.2 Designing the User Interface for a GUI Interface
Components are items that appear in a program’s 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

9. 15.2 Designing the User Interface for a GUI Interface
Figure Various components in a GUI window

10. 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

11. 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

12. 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

13. 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