Advanced Computer
Programming
Graphical User Interfaces
Basics
1
Overview




GUIs
Event Driven Programming
Libraries
GUI Components
IT: Advanced Computer Programming – Graphical User Interfaces
2
GUI Components
 Frame
 Canvas
 Panel
 Button
 Label
Copyright © Texas Education Agency, 2013





TextField
TextArea
Menu
Radio Button
Checkbox
IT: Advanced Computer Programming – Graphical User Interfaces
3
GUIs
A GUI is a Graphical User Interface. A GUI
provides interaction to a program through a
user friendly interface.
There are common components in GUIs
such as text fields, buttons, check boxes
and radio buttons.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
4
Event Driven
Programming
Programs with GUIs tend to be different than
standard procedural programs because
they permit interactivity based on actions
and events instead of sequential
processing of information.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
5
Event Driven
Programming
Some of the events that a GUI might
respond to:
 Mouse events
 Keyboard events
 GUI component interactions
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
6
Libraries
In Java, there are three primary libraries for building
Graphical User Interfaces:
 java.awt.* The Advanced Window Toolkit library
implements most of the tools for drawing to the
screen
 java.awt.event.* The AWT event library provides
listener services for all of the event types
 javax.swing.* The swing library provides
components for building windows and GUI
components such as buttons and textfields
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
7
GUI Component: Frame
The frame component is the basis of a
Graphical window. The frame provides a
title bar, border, maximize, minimize and
close buttons. All Java applications must
have a frame.
Frames contain a content pane where other
components may be placed.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
8
GUI Component: Canvas
A Canvas component provides a panel
surface to render drawings.
A Canvas is most useful when creating graphs,
charts or animations.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
9
GUI Component: Panel
A Panel component is used for organizing
components that should be placed
together, for example common buttons or a
label with its field.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
10
GUI Component: Button
Buttons implement simple push buttons and
can be used to activate actions.
© UNT in partnership with TEA
IT: Advanced Computer Programming – Graphical User Interfaces
11
GUI Component: Label
Labels are essentially text to be placed on
the window for any purpose you would use
text for, such as describing a field or other
component.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
12
GUI Component:
TextField
A TextField stores simple String input from
the user. TextFields can also be used to
display information back to the user, but
should be disabled if you don’t want the
user to modify the information.
TextFields are usually collecting small
Strings like names, phrases or other short
pieces of information.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
13
GUI Component:
TextArea
A TextArea is like a TextField, but is for
much larger forms of text such as entire
documents or paragraphs of information.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
14
GUI Component: Menu
Menus are “pull down” options that are
common to many window based
applications. Common menu options are:
File, Edit, and Help.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
15
GUI Component: Radio
Button
A Radio Button is a circle selection button
used in groups to select one of many
choices.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
16
GUI Component:
Checkbox
A Checkbox is a single selection type to
denote whether or not a single item should
be selected, or not. Checkboxes are
typically squares that are either empty or
checked.
Copyright © Texas Education Agency, 2013
IT: Advanced Computer Programming – Graphical User Interfaces
17