GUI and event-driven programming

1
GUI and event-driven programming

• An introduction

2
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
  platforms 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.

3
Examples of GUI objects from the Swing library
4
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.

5
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

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

8
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 classs default constructor, we set such
  characteristics as the frames title, size, and
  screen position

9
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) setDefaultCloseOper
ation(EXIT_ON_CLOSE) public
static void main(String args)
JFrameEx1 frame new JFrameEx1()
frame.setVisible(true)
10
The Content Pane

• The placement of objects in a JFrame is
  accomplished by accessing the objects content
  pane, an instance of class JPanel, which is
  itself a kind of window
• We access the content pane by calling the frames
  getContentPane method.

11
Adding objects to the frame

• There are two approaches to placing GUI objects
  on a frames 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

12
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

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

14
Adding the layout manager

• We first assign the desired layout manager to the
  container in the frames 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.

15
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)
• ...

16
BorderLayout

• The second layout manager is java.awt.BorderLayout
  .
• This manager divides the container into five
  regions
• Center
• North
• South
• East
• West

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

18
BorderLayout example
19
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))

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.

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

22
GridLayout example
23
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.

24
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

25
Example 1 using nested panels

• The topmost panel is the content pane of the
  frame. It has a border layout.
• The content panes 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.

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

27
BorderFactory

• We create a titled border by calling the class
  method createTitledBorder of the BorderFactory
  class.
• scorePanel.setBorder(BorderFactory.createTitledBor
  der(Scores ))
• gamePanel.setBorder(BorderFactory.createLoweredBev
  elBorder())
• 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).

28
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) p
ublic NestedPanels1() Container
contentPane TicTacToePanel gamePanel
JPanel controlPanel JPanel
scorePanel setSize (500, 350)
setTitle (Tic Tac Toe") setLocation
(150,250)
29
Example continued
contentPane getContentPane( )
contentPane.setLayout(new BorderLayout(10, 0))
gamePanel new Ch14TicTacToePanel()
gamePanel.setBorder(BorderFactory.createLoweredBe
velBorder()) controlPanel new JPanel()
controlPanel.setLayout(new BorderLayout(
)) contentPane.add(gamePanel,
BorderLayout.CENTER) contentPane.add(controlPan
el, BorderLayout.EAST) scorePanel new
JPanel() scorePanel.setBorder(BorderFactory.cre
ateTitledBorder("Scores")) scorePanel.setLayou
t(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,Bo
rderLayout.NORTH) controlPanel.add(new
JButton("New Game"), BorderLayout.SOUTH) setDefa
ultCloseOperation( EXIT_ON_CLOSE )