1. Chapter 9 Event-Driven Programming with Graphical User Interfaces
An Object-Oriented Approach to Programming Logic and Design Fourth Edition
Chapter 9
Event-Driven Programming
with Graphical User Interfaces

2. Objectives In this chapter, you will learn about:
Event-driven programming
The actions that GUI components can initiate
Designing graphical user interfaces
The steps to developing an event-driven application
Threads and multithreading
Creating animation
An Object-Oriented Approach to Programming Logic and Design

3. Understanding Event-Driven Programming
Command line
Input area to type system commands
Requires exact syntax when typing commands
Used to communicate with computer’s operating system
Figure 9-1 shows the command line for the Disk Operating System (DOS)
Figure 9-1
An Object-Oriented Approach to Programming Logic and Design

4. Understanding Event-Driven Programming (cont’d)
Graphical user interface (GUI)
Based on graphics
icons, pictures, menus
Manipulates objects
Figure 9-2 shows GUI application named Paint
Uses icons representing pencils, paint cans, and other objects as clickable buttons
Figure 9-2
An Object-Oriented Approach to Programming Logic and Design

5. Understanding Event-Driven Programming (cont’d)
Event (action or occurrence)
Caused by performing an operation on an icon
Action generates a message sent to object
Event-driven (event-based) program
Actions occur in response to user-initiated events
Clicking a mouse button
Emphasis on objects that user manipulates
Program responds to user-initiated events
User can initiate events in any order
An Object-Oriented Approach to Programming Logic and Design

6. Understanding Event-Driven Programming (cont’d)
Source of event
Component from which event generated
Example: a button a user can click
Listener
Object that is “interested in” an event
Waits for and responds to event
Example: button is a listener for a mouse click
Object must be defined as a listener and statements that constitute the event must be written
An Object-Oriented Approach to Programming Logic and Design

7. Understanding Event-Driven Programming (cont’d)
Newer than procedural programming
Programming instructions that respond to events are sequences, selections, and loops
Programming logic for writing code
Same logic learned throughout course
Writing event-driven programs
Involves thinking of possible events as methods that constitute the program
An Object-Oriented Approach to Programming Logic and Design

8. User-Initiated Actions and GUI Components
Partial list of possible events in GUI programming
An Object-Oriented Approach to Programming Logic and Design

9. User-Initiated Actions and GUI Components (cont’d)
Common GUI components
An Object-Oriented Approach to Programming Logic and Design

10. Common GUI Components Figure 9-3
An Object-Oriented Approach to Programming Logic and Design

11. User-Initiated Actions and GUI Components (cont’d)
Prewritten methods available
Draw GUI components on screen
Constructed using existing classes, complete with names, attributes, and methods
Dependent on programming language environment
May write statements calling methods that create GUI objects
May drag GUI objects onto screen from toolbox and arrange them appropriately
An Object-Oriented Approach to Programming Logic and Design

12. User-Initiated Actions and GUI Components (cont’d)
Advantages
No concern about component construction details
Concentrate on actions desired
GUI Components
Examples of best principles of object-oriented programming
Represent objects with attributes and methods
Instantiating objects
Occurs when using GUI components
Each object belongs to a prewritten class
An Object-Oriented Approach to Programming Logic and Design

13. User-Initiated Actions and GUI Components (cont’d)
Abbreviated version of how a Button class may be written
Figure 9-4
An Object-Oriented Approach to Programming Logic and Design

14. User-Initiated Actions and GUI Components (cont’d)
To create button object using class in Figure 9-4
Write a statement similar to Button myButton
To use a button’s methods, type
Different GUI classes support different attributes and methods
CheckBox class may contain a setChecked() method
Button class would have no need for setChecked() method
An Object-Oriented Approach to Programming Logic and Design

15. Designing Graphical User Interfaces
General GUI design principles
Interface should be natural and predictable
Interface should be attractive, easy to read, and nondistracting
Program should allow some user customization
Program should be forgiving
GUI should be a means to an end
An Object-Oriented Approach to Programming Logic and Design

16. The Interface Should Be Natural and Predictable
GUI program interface icon images
Natural: Represent object using real-world counterpart
Example: recycle bin
Predictable: Represent object using real-world counterpart that is used in other programs
GUI program interface layout
Should also be predictable
Example: menu bar
Should be at top of screen
Menu choices follow standard arrangements
An Object-Oriented Approach to Programming Logic and Design

17. The Interface Should Be Attractive, Easy to Read, and Nondistracting
People are more likely to use attractive, easy to read interfaces
Keep font and color combinations simple
Dim or remove unavailable screen options
Keep screens uncluttered
Avoid overly creative design elements
Pay attention to design features used in popular applications and web sites
An Object-Oriented Approach to Programming Logic and Design

18. To Some Extent, It’s Helpful If the User Can Customize Your Applications
Allow users to position toolbars in order that is easiest for users
color scheme changes
Accessibility issues
Screen design issues that make programs easier to use for people with physical limitations
Accessibility needs of visually challenged users
Allow changes to font styles and sizes, contrast, colors, etc.
Cultural aspects of design
Allow user to work in a choice of languages
An Object-Oriented Approach to Programming Logic and Design

19. The Program Should Be Forgiving
Always provide an “escape route”
Users make a bad choice or change their mind
Back button or functional Escape key improves user functionality
Include option for user to revert to default settings after making changes
An Object-Oriented Approach to Programming Logic and Design

20. The GUI Is Only a Means to an End
The GUI is only an interface
To help people be more productive
GUI design purpose
Help user see available options
Allow ordinary use of components
Not force user to concentrate on how to interact with application
An Object-Oriented Approach to Programming Logic and Design

21. The Steps to Developing an Event-Driven Application (cont’d)
Program development steps (from Chapter 1)
Identify objects, design classes, establish communication
Plan logic
Code program
Translate program to machine language
Test program
Put program into production
Steps to design event-driven applications also include
Create storyboards
Define objects
Define connections between screens
An Object-Oriented Approach to Programming Logic and Design

22. The Steps to Developing an Event-Driven Application (cont’d)
Example: Simple, interactive program that determines premiums for prospective insurance customers
GUI allows users to select policy type: health or auto
Policy rates: determined using factors in Table 9-3
Final output: semiannual premium amount for chosen policy
An Object-Oriented Approach to Programming Logic and Design

23. Creating Storyboards
Storyboard: represents picture or sketch of a screen the user will see when running a program
Figure 9-5: two storyboard sketches for insurance program
Screen 1: Intro screen: Select premium type and answer questions
Screen 2: Final screen displays semiannual premium
Figure 9-5
An Object-Oriented Approach to Programming Logic and Design

24. Defining the Storyboard Objects in an Object Dictionary
Event-driven program may contain dozens or even hundreds of objects
Object dictionary
List of objects used in a program
Includes screen number on which object appears
Includes whether code or script is associated with object
Example: Figure 9-6 on next slide shows an object dictionary for the insurance premium program
An Object-Oriented Approach to Programming Logic and Design

25. Figure 9-6
An Object-Oriented Approach to Programming Logic and Design

26. Defining Connections between the User Screens
Interactivity diagram
Shows relationship between screens in GUI program
Figure 9-7
Figure 9-7 shows that Screen 1 calls Screen 2
Interactivity diagram for a complicated program
Figure 9-8
An Object-Oriented Approach to Programming Logic and Design

27. Planning the Logic Next step is planning the insurance program class
Following the storyboard plan for the insurance program
Create the first screen
Screen contains four labels, four sets of radio buttons, and a button
Figure 9-9 on next slide shows pseudocode that creates these components
An Object-Oriented Approach to Programming Logic and Design

28. Planning the Logic (cont’d)
Component definitions for first screen of insurance program
Figure 9-9
An Object-Oriented Approach to Programming Logic and Design

29. Planning the Logic (cont’d)
Container
Component that holds all the GUI elements
Class of objects
Main purpose is to hold other elements
Figure on the next slide shows the definition of a Screen class
An Object-Oriented Approach to Programming Logic and Design

30. Statements that create screen1
Statement specifies that computePremium() executes when a user clicks the calcButton
Figure 9-10
An Object-Oriented Approach to Programming Logic and Design

31. Statements that define and create screen2 and its components
Figure 9-11
Statements that define and create screen2 and its components
An Object-Oriented Approach to Programming Logic and Design

32. Pseudocode for computerPremium() method for insurance premium program
After designing and arranging GUI components, programmer plans logic for each method or script
Figure 9-12
An Object-Oriented Approach to Programming Logic and Design

33. Planning the Logic (cont’d)
Figure 9-13
main() method: executes when the program starts
exitRoutine() method: executes when the program ends
An Object-Oriented Approach to Programming Logic and Design

34. Understanding Threads and Multithreading
Execution flow for one set of program statements
When following a single thread, application executes a single program statement at a time
Multithreading
All major OOP languages allow multiple threads
Can occur even if computer has only one CPU
Improves program performance
More user friendly: allows user multitasking
Many OOP languages contain a built-in Thread class
An Object-Oriented Approach to Programming Logic and Design

35. Understanding Threads and Multithreading (cont’d)
Figure 9-14
Shows how three tasks might execute in a single thread in a computer with a single CPU
Each task must end before the next task starts
An Object-Oriented Approach to Programming Logic and Design

36. Understanding Threads and Multithreading (cont’d)
Executing multiple threads in a single-processor system
CPU devotes time to one task and then devotes time to another
CPU never actually performs two tasks at the same time
Figure 9-15
An Object-Oriented Approach to Programming Logic and Design

37. Understanding Threads and Multithreading (cont’d)
Multithreading can improve program performance
Often runs faster and is more user-friendly
Deadlock
Problem in which two or more threads wait for each other to execute
Starvation
Thread is abandoned because other threads occupy all computer’s resources
Thread synchronization
Techniques provided in OOP languages to help avoid potential problems
An Object-Oriented Approach to Programming Logic and Design

38. Creating Animation Animation
Rapid sequence of still images that produces illusion of movement
Many OOP languages offer built-in classes that contain methods to draw geometric figures
Place figure on screen using graphing coordinate system
Each component has a horizontal (x-axis) and vertical (y-axis) position
An Object-Oriented Approach to Programming Logic and Design

39. Creating Animation (cont’d)
Figure 9-16
Selected screen coordinate positions
x-coordinate specifies horizontal distance from left side of screen
y-coordinate specifies vertical distance from top of screen
An Object-Oriented Approach to Programming Logic and Design

40. Creating Animation (cont’d)
Cartoonists create animated films by drawing a sequence of frames or cells
Shown in rapid succession to give illusion of natural movement
Same technique used for computer animation
May need to use sleep method in Thread class
To slow animation enough for human eye to see it
Example: Figure 9-17 shows pseudocode for a MovingCircle class
An Object-Oriented Approach to Programming Logic and Design

41. Pseudocode for a MovingCircle class
Figure 9-17
Pseudocode for a MovingCircle class
main() method executes a continuous loop
Execution ends when user quits application
Application sleeps 1/10 of a second, draws a new circle moves to the right, further down, and a little larger
An Object-Oriented Approach to Programming Logic and Design

42. Java version of output for MovingCircle application
Figure 9-18
Java version of output for MovingCircle application
Moving circle leaves a trail of smaller circles behind as it moves diagonally across the screen
An Object-Oriented Approach to Programming Logic and Design

43. Summary Event-driven GUI interface
Easier to use than command-line interface
Common GUI components (labels, text boxes, etc.)
Respond to common user actions (mouse click, point, etc.)
GUI interface qualities
Natural, predictable, attractive, easy to read, nondistracting, forgiving
User customization available
Only a means to an end
An Object-Oriented Approach to Programming Logic and Design

44. Summary (cont’d) Developing event-driven application Thread
More steps than standard procedural program
Create storyboards, define objects, define connections between screens
Thread
Flow of execution for one set of program statements
Many applications follow single thread
Multiple threads of execution is called multithreading
An Object-Oriented Approach to Programming Logic and Design

45. Summary (cont’d) Animation GUI components (geometric shapes)
Created by drawing sequence of images that are shown in rapid succession
GUI components (geometric shapes)
Many OOP languages have built-in classes used to create geometric figures
Components have horizontal (x-axis) and vertical (y-axis) position on screen
An Object-Oriented Approach to Programming Logic and Design