GUI and event-driven programming An introduction.

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

Exampleimport 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 ascontentPane.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 Codeimport 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 continuedcontentPane = 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 ); }}