Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with...

13
Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with Programming Logic & Design Second Edition by Tony Gaddis Chapter 15: GUI Applications & Event-Driven Programming

Transcript of Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with...

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

Starting Out with Programming Logic & Design

Second Edition

by Tony Gaddis

Chapter 15: GUI Applications & Event-Driven Programming

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

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

15.1 Graphical User InterfacesA 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-4

15.1 Graphical User Interfaces

Figure 15-3 A GUI program

Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 15-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 15-4 A user interface flow diagram

Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 15-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

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

15.2 Designing the User Interface for a GUI Interface

Most IDE’s 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-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

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

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

Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 15-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

Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 15-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

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

15.3 Writing Event Handlers

How to write the event handler moduleModule 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