Transcript GUI and event-driven programming

GUI and event-driven
programming
An introduction
AWT and Swing
• In Java, GUI-based programs are implemented
by using classes from the javax.swing and
java.awt packages.
• The AWT (abstract windowing toolkit) is the older
of the two, and uses elements from the local
platform’s operating system.
• The Swing classes provide greater compatibility
across different operating systems.
– They are fully implemented in Java, and behave the
same on different operating systems.
– Swing classes support many new functionalities not
supported by AWT counterparts.
Examples of GUI objects from the
Swing library
Event-driven programming
• An event occurs when the user interacts
with a GUI object
– Usually this means a mouse movement or
click
– Keyboard actions are also events
• In event-driven programs, we program
objects to respond to these events by
defining event-handling methods.
Inheritance
• Inheritance is a feature we use to define a more
specialized class from an existing class.
• The existing class is the superclass and the
specialized class is the subclass.
• Every method of a superclass is inherited by its
subclass.
• Because the subclass-superclass relationships
are formed into an inheritance hierarchy, a
subclass inherits all methods defined in its
ancestor classes
Hierarchy of API objects
We have already used several Swing objects in past programs.
The illustration below, from the Java API documentation, depicts
the inheritance hierarchy of the JOptionPane class
Inheritance and JFrame
• To create a customized user interface, we
often define a subclass of the JFrame
class.
• The JFrame class contains rudimentary
functionalities to support features found in
any frame window.
Creating a subclass of JFrame
• To define a subclass of another class, we
declare the subclass with the reserved
word extends.
class JFrameEx1 extends JFrame {
...
}
• In the class’s default constructor, we set
such characteristics as the frame’s title,
size, and screen position
Example
import javax.swing.*;
import java.awt.*;
public class JFrameEx1 extends JFrame {
public JFrameEx1 () {
setTitle("I've been framed!");
setSize(300, 200);
setLocation(150, 250);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String[] args) {
JFrameEx1 frame = new JFrameEx1();
frame.setVisible(true);
}
}
The Content Pane
• The placement of objects in a JFrame is
accomplished by accessing the object’s
content pane, an instance of class JPanel,
which is itself a kind of window
• We access the content pane by calling the
frame’s getContentPane method.
Adding objects to the frame
• There are two approaches to placing GUI
objects on a frame’s content pane.
• One approach uses a layout manager, an object
that controls the placement of the objects.
• The other approach uses absolute positioning to
explicitly specify the position and size of objects
on the content pane.
• We used the latter approach with the drawing
programs we have done so far
Layout Managers and Panels
• For building practical GUI-based Java
programs, we must learn how to use
layout managers effectively.
• We will begin by covering the three basic
managers:
– FlowLayout
– BorderLayout
– GridLayout
FlowLayout
• The most basic layout is
java.awt.FlowLayout.
• In this layout, GUI
components are placed in
left-to-right order. As a
default, components on
each line are centered.
• When the frame
containing the component
is resized, the placement
of the components is
adjusted accordingly.
Adding the layout manager
• We first assign the desired layout manager
to the container in the frame’s constructor.
Container contentPane = getContentPane();
contentPane.setLayout(new FlowLayout());
• A container has a default layout manager
assigned to it, but it is safer to explicitly
assign the desired layout manager
ourselves.
Adding objects to the content pane
• We can now add objects to the content pane
• For example, the code below would add five (so
far non-functional) buttons to the content pane:
JButton button1, button2, button3, button4, button5;
...
button1 = new JButton(“button1”);
...
contentPane.add(button1);
...
BorderLayout
• The second layout manager is
java.awt.BorderLayout.
• This manager divides the container into
five regions:
–
–
–
–
–
Center
North
South
East
West
BorderLayout
• We set the BorderLayout as
contentPane.setLayout(new BorderLayout());
• And place GUI components with the
second argument specifying the
region:
contentPane.add(button1,BorderLayout.NORTH);
contentPane.add(button2,BorderLayout.SOUTH);
BorderLayout example
BorderLayout
• The default of BorderLayout has no gaps
between the regions.
• We can specify the amount of vertical and
horizontal gaps between the regions in
pixels.
contentPane.setLayout(new BorderLayout(10, 20));
GridLayout
• The third layout manager is
java.awt.GridLayout.
• This manager places GUI components on
equal-sized N × M grids.
• Components are placed in top-to-bottom,
left-to-right order.
GridLayout
• To create a GridLayout object, we pass two
arguments:
– Number of rows
– Number of columns
contentPane.setLayout(new GridLayout(2, 3));
• We then place GUI components in the manner
analogous to the one used for FlowLayout.
• If the rows value is nonzero, the value we specify
for the number of columns is irrelevant.
• The layout will create the specified number of rows
and adjust the columns so that all components will
fit in the designated rows.
GridLayout example
Layout Managers and Panels
• The default content pane of a frame is an
instance of JPanel. We can place a
JPanel inside another JPanel.
• Each of these nesting panels may be
assigned a different layout manager.
• The capability of nesting panels with
different layout managers presents
opportunities for creating intricate layouts
on a frame.
Nested Panels
• It is possible, but very difficult, to place all
GUI components on a single JPanel or
other types of containers.
• A better approach is to use multiple
panels, placing panels inside other panels.
• To illustrate this technique, we will create
two sample frames that contain nested
panels. The samples will provide the
interface for playing Tic Tac Toe and HiLo
Example 1 – using nested panels
• The topmost panel is the content
pane of the frame. It has a border
layout.
• The content pane’s center region
contains an instance of
programmer-defined class
TicTacToePanel called gamePanel.
• The east region is occupied by an
instance of another JPanel named
controlPanel. A border layout is
used for this panel.
– The north region of controlPanel is
occupied by another JPanel named
scorePanel.
– The south region is occupied by a
JButton.
• The layout for scorePanel is set to
a grid layout with four grids, each
occupied by a JLabel object.
Using Nested Panels –
BorderFactory class
• When we nest panels, it is useful to mark
their borders.
• The BorderFactory class contains many
different border formats, such as
–
–
–
–
titled border
lowered bevel border
line border
etc.
BorderFactory
• We create a titled border by calling the
class method createTitledBorder of the
BorderFactory class.
scorePanel.setBorder(BorderFactory.createTitledBorder(“Scores: ”));
gamePanel.setBorder(BorderFactory.createLoweredBevelBorder());
• Following is the program listing that creates
the visual aspect of the program (i.e., there
is no code for handling events or game
logic).
Example Code
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class NestedPanels1 extends JFrame {
public static void main(String[] args) {
NestedPanels1 frame = new NestedPanels1();
frame.setVisible(true);
}
public NestedPanels1() {
Container contentPane;
TicTacToePanel gamePanel;
JPanel controlPanel;
JPanel scorePanel;
setSize
(500, 350);
setTitle (“Tic Tac Toe");
setLocation (150,250);
Example continued
contentPane = getContentPane( );
contentPane.setLayout(new BorderLayout(10, 0));
gamePanel = new Ch14TicTacToePanel();
gamePanel.setBorder(BorderFactory.createLoweredBevelBorder());
controlPanel = new JPanel();
controlPanel.setLayout(new BorderLayout( ));
contentPane.add(gamePanel, BorderLayout.CENTER);
contentPane.add(controlPanel, BorderLayout.EAST);
scorePanel = new JPanel();
scorePanel.setBorder(BorderFactory.createTitledBorder("Scores:"));
scorePanel.setLayout(new GridLayout(2, 2));
scorePanel.add(new JLabel("Player 1:"));
scorePanel.add(new JLabel(" 0"));
scorePanel.add(new JLabel("Player 2:"));
scorePanel.add(new JLabel(" 0"));
controlPanel.add(scorePanel,BorderLayout.NORTH);
controlPanel.add(new JButton("New Game"), BorderLayout.SOUTH);
setDefaultCloseOperation( EXIT_ON_CLOSE );
}
}