CHAPTER 1

Prepared by : Pn. Rosilawati Binti Mohamad

 Learning Outcomes

1.1 Describes Abstract Window

Toolkit (AWT) Fundamentals

1.2 Build Frame Windows and

Menu Bars in Java Programs.
1.1 Describe Abstract Window
Toolkit (AWT) fundamentals
 Learning Outcomes 1.1

Explain Use AWT in

Define the
AWT Java
use of AWT
Hierarchy Program
 Use of AWT
 Java’s Abstract Window Toolkit provides classes and
other tools for building programs that have a graphical
user interface.

 The term “Abstract” refers to the AWT’s ability to run on

multiple platforms.

 Building a Graphical User Interface (GUI) involves

creating “abstract” components such as buttons and
windows, which are then mapped to “concrete”
components for a specific platform which can accept
user input through the keyboard and the mouse.
 Use of AWT
Characteristics of
AWT:
Powerful.
• The AWT provides a well-designed object-
oriented interface to these low-level services and
resources.

Flexible.
• Platform-independent provide a common set of
tools for graphical user interface design that work
on a variety of platforms.

Straightforward
Creating a Graphical User Interface
 GUI
programming in Java is based on three
concepts:
 Components. A component is an object that the user
can see on the screen and—in most cases—interact
with.
 Containers. A container is a component that can hold
other components.
 Events. An event is an action triggered by the user,
such as a key press or mouse click.
 Designing a GUI involves creating components,
putting them into containers, and arranging for
the program to respond to events.
Creating a Graphical User Interface
 Components are objects, so they’re created by
invoking a constructor.
 A button would be created by using a constructor
belonging to the Button class.
 The most commonly used constructor has one
argument (the button’s label):
Button b = new Button("Testing");
 For a component to be visible, it must be added to
a container (typically a frame) by the add method.
Creating a Graphical User Interface
 To detect when an event occurs, a special “listener”
object can be attached to a component.
 When the user performs an action that involves the
component, a method belonging to the listener
object will be called automatically.
 List of components (example):
 Button
 Scrollbar
 Textfield
 Textarea
 Checkbox
AWT Hierarchy
 Use AWT in Java Programs
AWT Packages
 AWT is huge! It consists of 12 packages (Swing is even bigger, with
18 packages as of JDK 1.7!). Fortunately, only 2 packages -
java.awt and java.awt.event - are commonly-used.
 The java.awt package contains the core AWT graphics classes:
 GUI Component classes (such as Button, TextField, and Label),
 GUI Container classes (such
as Frame, Panel, Dialog and ScrollPane)
 Layout managers (such
as FlowLayout, BorderLayout and GridLayout),
 Custom graphics classes (such as Graphics, Color and Font).
 Use AWT in Java Programs
AWT Packages – cont..
 The java.awt.event package supports event handling:
 Event classes (such
as ActionEvent, MouseEvent, KeyEvent and WindowEvent),
 Event Listener Interfaces (such
as ActionListener, MouseListener, KeyListener and
WindowListener)
 Event Listener Adapter classes (such
as MouseAdapter, KeyAdapter, and WindowAdapter).
 AWT provides a platform-independent and device-
independent interface to develop graphic programs that runs
on all platforms, such as Windows, Mac, and Linux.
 AWT Container Classes
Top-Level Containers:

Each GUI program has a top-level container.

The commonly-used top-level containers in AWT

are:
• Frame
• Dialog
• Applet
 AWT Container Classes
> Frame
 A Frame provides the "main window" for the GUI application,
which has a title bar (containing an icon, a title, the minimize,
maximize/restore-down and close buttons), an optional menu
bar, and the content display area.

 To write a GUI program, we typically start with a subclass

extending from java.awt.Frame to inherit the main window
 AWT Container Classes
> Dialog
 An AWT Dialog is a "pop-up window" used for interacting with
the users.
 A Dialog has a title-bar (containing an icon, a title and a close
button) and a content display area, as illustrated below.
Sample GUI Objects
1.2 Build Frame Windows and
Menu Bars in Java program
Learning Outcomes 1.2

Define the use of Frame in Java program

Create and set the Frame windows
Create menu bars in Java program
Write a program with dialogs and panel
Write Java program using the AWT
components
Mixes media elements to enhance the GUI
appearance
 Use of Frame in Java Programs

 InJava terminology, a frame is a window with a title

and a border.
 A frame may also have a menu bar.
 Frames play an important role in the AWT because
a GUI program normally displays a frame when it’s
executed.
 Frames are created using one of the constructors in
the Frame class.
 One constructor takes a single argument (the title
to be displayed at the top of the frame):
Frame f = new Frame("Title goes here");
 Use of Frame in Java Programs
 Although the Frame object now exists, it’s not visible
on the screen.
 Before making the frame visible, a method should
be called to set the size of the frame.
 If desired, the frame’s location can also be
specified.
 Frame Methods
 Many methods used with Frame objects are
inherited from Window (Frame’s superclass) or from
Component (Window’s superclass).
 The setSize method sets the width and height of a
frame:
f.setSize(width, height);

 Ifa program fails to call setSize or pack before

displaying a frame, it will assume a default size.
 The size of a frame can change during the
execution of a program.
 Frame Methods
 The getSize method returns a frame’s current width and
height:
Dimension frameSize = f.getSize();
frameSize.width will contain f’s width.
frameSize.height will contain f’s height.

 The setVisible method controls whether or not a frame is

currently visible on the screen.

 Calling setVisible with true as the argument makes a

frame visible:
f.setVisible(true);
 Frame Methods
 Calling
it with false as the argument makes the
frame disappear from the screen:
f.setVisible(false);

 The
Frame object still exists; it can be made to
reappear later by calling setVisible again.
 Create and Set the Frame Windows
 The FrameTest program creates a Frame object
and displays it on the screen.
 This program illustrates three key steps:
1. Using the Frame constructor to create a frame.
2. Setting the size of the frame.
3. Displaying the frame on the screen.
 Creating a Plain Frame
// Displays a frame on the screen.
// WARNING: Frame cannot be closed.
import java.awt.*;
public class FrameTest {
public static void main(String[] args) {
Frame f = new Frame("Frame Test");
f.setSize(150, 100);
//for full screen
f.setExtendedState(FRAME.MAXIMIZE_BOTH);
f.setVisible(true);
} }
 Creating a Plain Frame
 Frame created by the FrameTest program.
 As with the other AWT components, the appearance of
a frame depends on the platform.
 Clicking on the Close button has no effect, because
there’s no action associated with that button.
 The frame will have be closed the hard way, by killing
the program.
 In Windows, click on the DOS window from which the
program was launched, hold down the Ctrl key, and
press the letter C.
 Setting the Location of a Frame
 By default, all windows (including frames) are displayed
in the upper-left corner of the screen, which has
coordinates (0, 0).
 The setLocation method can be used to specify a
different location:
f.setLocation(50, 75);

 To find the current location of a frame, call

getLocation:
Point frameLocation = f.getLocation();

 The coordinates of f’s upper-left corner will be stored in

frameLocation.x and frameLocation.y.
 28

Create Menu Bars in Java Program

 Java's
Abstract Windowing Toolkit (AWT) includes four
concrete menu classes:
Class Menu Description
MenuBar menu bars representing a group of
menus that appears across the top of the
window or the screen
Menu pull-down menus that pull from menu
bars or from other menus
MenuItem menu items that represent menu
selections
CheckboxMenuItem and menu items that the user can turn on
and off
 Create Menu Bars in Java Program

 The MenuBar class encapsulates the platform's concept of a

menu bar bound to a frame.
 In order to associate the menu bar with a Frame object, call
the frame's setMenuBar method.
 A menu bar handles keyboard shortcuts for menu items,
passing them along to its child menus.
 (Keyboard shortcuts, which are optional, provide the user with
an alternative to the mouse for invoking a menu item and the
action that is associated with it.)
 Each menu item can maintain an instance of MenuShortcut.
 The MenuBar class defines several methods, shortcuts() and
getShortcutMenuItem(java.awt.MenuShortcut) that retrieve
information about the shortcuts a given menu bar is
managing.
 Menu Bars Components

Edit View Help

MenuBar  File Edit View Help

Menu 

MenuItem

separator
Sequence for Creating Menus

1. Create a MenuBar
object and attach it
to a frame.

4. Attach the Menu

2. Create a Menu
object to the MenuBar
object.
object.

3. Create MenuItem
objects and add them
to the Menu object.
 Panels

A panel—an instance of the Panel class—is another

kind of container.
 A panel is rectangular but has no border.
 When a panel is placed inside another container, it
blends in seamlessly.
 Each panel has its own layout manager.
 A panel can be used to create a group of
components that is treated as a single component.
 Panel objects can be created by using the no-arg
version of the Panel constructor:
Panel p = new Panel();
 Panels
 By
default, the layout manager for a panel is
FlowLayout.
A different layout manager can be chosen by
calling setLayout:
p.setLayout(new BorderLayout());
 Passing the layout manager to the Panel
constructor avoids a separate call of setLayout:
Panel p = new Panel(new BorderLayout());
 Once a panel has been created, components are
added to it by calling the add method:
p.add("Center", new Button("Test"));
 The panel itself will need to be added to a frame or
other container.
 Panels

 Consider the problem of creating a frame with the

following appearance:
 Panels

 The top 12 buttons will need to be grouped into a

single component using a panel.
 The panel will use a GridLayout to force the
buttons into four rows and three columns.
 To make sure that this panel is positioned above the
“Dial” button, the frame itself will need to use a
BorderLayout.
 If
the “Dial” button is placed at the South position
and the panel at the Center position, the panel will
expand to fill the frame.
 Panels

 To keep the “Dial” button at the correct size, it will

need to be put in a panel of its own, which is then
placed at the South position.
 This panel will have a FlowLayout manager, which
will center the button and keep it at its preferred
size.
 The panel containing the 12 buttons will also need
to be put inside another panel, to keep the buttons
from growing if the frame is resized.
 Panels

Summary of panels
needed:

buttonPanel: Contains 12 buttons; uses GridLayout.

centerPanel: Contains buttonPanel; uses FlowLayout.

bottomPanel: Contains “Dial” button; uses

FlowLayout.
Panels
 Panels

 Code statements to create the phone layout:

Panel buttonPanel = new Panel();
buttonPanel.setLayout(new GridLayout(4, 3, 10, 10));
for (int i = 1; i <= 9; i++)
buttonPanel.add(new Button(i + ""));
buttonPanel.add(new Button("*"));
buttonPanel.add(new Button("0"));
buttonPanel.add(new Button("#"));

Panel centerPanel = new Panel();

centerPanel.add(buttonPanel);
add("Center", centerPanel);

Panel bottomPanel = new Panel();

bottomPanel.add(new Button("Dial"));
add("South", bottomPanel);
 40

Adding Components to a Frame

 The Frame class is rarely used to create objects

directly.
 Instead, it’s customary to define a subclass of Frame
and then create an instance of the subclass.
 This strategy makes it possible to tailor the subclass.
 In particular, the constructor for the subclass can
put components into the frame.
 To add a component to a frame (or any kind of
container), the add method is used.
 41

Adding Components to a Frame

 add belongs to the Container class, so it’s inherited

by Frame and the other container classes.
 An example of adding a button to a frame:
Button b = new Button("Testing");
add(b);
o These statements would normally go in the
constructor for the frame class.
o ButtonTest is a modified version of FrameTest.
 42

Adding Components to a Frame

 ButtonTest defines a subclass of Frame named

ButtonTestFrame, and then creates an instance of
ButtonTestFrame.
 Actions taken by the ButtonTestFrame constructor:
1. Invokes the superclass constructor (the
constructor for Frame), passing it the title of the
frame.
2. Calls setLayout to specify how the components
inside the frame will be laid out.
3. Creates a Button object.
4. Calls add to add the button to the frame.
 Example – ButtonTest.java

// Displays a frame containing a single button.

// WARNING: Frame cannot be closed.

import java.awt.*;

// Driver class Pressing the

public class ButtonTest { “Testing” button
public static void main(String[] args) {
Frame f = new ButtonTestFrame("Button Test"); has no effect.
f.setSize(150, 100);
f.setVisible(true);
}
}

// Frame class
class ButtonTestFrame extends Frame {
public ButtonTestFrame(String title) {
super(title);
setLayout(new FlowLayout());
Button b = new Button("Testing");
add(b);
}
}
 44

Adding Components to a Frame

 Instead
of calling setSize, the main method in
ButtonTest could have called pack:
f.pack();

 packmakes the frame just large enough to display

the components within it:

 Regardlessof whether setSize or pack is called,

the user can manually resize the frame.
 Mixes Media Elements to Enhance the
45

GUI Appearance

 It is important to be clear what you are trying to achieve

when you use these elements / components.

 We are assuming that you want to communicate

information and functionality in a simple but effective
manner.

 Once we have chosen an interaction elements for a

user interface, we need to consider how to use it
effectively.
Mixes Media Elements to Enhance the 46

GUI Appearance
In particular, we concentrate on the following
elements/components to create an attractive GUI:

Text. How can we ensure that the text is legible? Which font should
we use? How long should the lines be?

Colour. Which colours go well together? How should colour be used in

order to communicate information more effectively? How can we
ensure that the colours we use have the correct connotations?

Images. What are the different types of image? How do you choose
the right one?

Moving images. When is it useful to animate images? When can

video clips be used to good effect?

Sound. When can sound be useful? What are the different categories
of sound and when should each be used?
Mixes Media Elements to Enhance the
47

GUI Appearance

• When designing text for use on

screen, you should be aware
of the following points :-
• Typeface
• Type size
Text • Letter spacing
• Interline spacing
• Line length
• Justification
• Line endings
• Paragraph spacing
Mixes Media Elements to Enhance the
48

GUI Appearance

• The role of colour:

• To draw attention
• To show status
Colour • To make the information
on the display clearer
• To make the display more
attractive
Mixes Media Elements to Enhance the
49

GUI Appearance

•The role of images:

•To motivate, to attract the
attention of the user, to
amuse and to persuade
Images •To communicate
information
•To help overcome
language barriers
•To support interaction
Mixes Media Elements to Enhance the
50

GUI Appearance

• When you are considering using an image, you

should remember the following points.
• Choose the most appropriate type of image
(picture, diagram or graph/ chart), according
to the information you need to convey and
the impact you wish to make.
• Design the image so that it meets the
requirements of the task as closely as

Images possible. Unnecessary or inappropriate

diagrams can be distracting for the user.
• Follow any relevant conventions, to ensure
consistency with other images of that type.
• Combining text and images can be
particularly effective. Images are often
enhanced by relating them to text.
• Take the user's screen resolution into account,
otherwise the details of the image could be
lost.
Mixes Media Elements to Enhance the
51

GUI Appearance

• You can use animation/moving

images for the following purposes.
• To illustrate movement
• To provide dynamic feedback

Moving • To attract attention

• To convey human behavior and
Images emotions
• To show events that users cannot
see directly
• To motivate
• To provide additional contextual
information
Mixes Media Elements to Enhance the
52

GUI Appearance

• You can use animation for the

following purposes.
• To illustrate movement
• To provide dynamic feedback
• To attract attention

Sound • To convey human behavior and

emotions.
• To show events that users cannot
see directly.
• To motivate.
• To provide additional contextual
information.
Lab Activity 1 (AWT)