1 UFCE3T-15-M Object- oriented Design and Programming Block 3 GUI Programming Jin Sa.

1

UFCE3T-15-M Object-oriented Design and

Programming

Block 3 GUI Programming

Jin Sa

2

Objectives

• GUI components– To distinguish simple GUI components.– To create user interfaces using frames,

panels, and some simple UI components– To use JPanel as subcontainers

• Layout Managers– To understand the role of layout managers– To use the FlowLayout, GridLayout, and

BorderLayout managers to layout components in a container

3

Objectives

• Event-driven programming– To explain the concept of event-driven

programming– To understand event, event source, and event

classes – To register listener objects in the source

object; to declare listener classes and write the code to handle events

– To understand how an event is handled

4

Objectives

• Graphics– To specify colors using the Color class

– To paint graphics using the paintComponent method on a panel

– To draw strings, lines, rectangles and ovals using the drawing methods in the Graphics class

5

Graphical User Interface

• A Graphical User Interface (GUI) presents a number of graphical elements to the user to interact with the program. Examples: windows, menus, buttons, text areas.

• AWT and Swing: standard sets of classes in Java for building GUIs.

• In Java, to write a GUI program, we can derive new classes from those provided in AWT or Swing.

6

Examples of GUI Objects

Button

Label Text field

Check Box

Radio Button

Combo Box

7

Swing vs. AWT

• When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT).

• With the release of Java 2, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components.

8

Frames

• Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications.

• The Frame class can be used to create windows.

• For Swing GUI programs, use JFrame class to create widows.

9

Creating Frames import javax.swing.JFrame; import javax.swing.JButton; import java.awt.*;

public class MyFrame extends JFrame { MyFrame(String title) { setTitle(title); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public static void main(String[] args) { MyFrame frame = new MyFrame("MyFrame"); } }

See MyFrame.java in CodeBlock3

10

JButton

Some of the JButton constructors:

JButton()

JButton(String text)

11

JTextField A text field is an input area where the user can type in characters.

Text fields are useful in that they enable the user to enter in variable data (such as a name or a description).

• JTextField(int columns)Creates an empty text field with the specified number of columns.

• JTextField(String text)Creates a text field initialized with the specified text.

• JTextField(String text, int columns)Creates a text field initialized with the specified text and the column size.

• getText()Returns the string from the text field.

• setText(String text)Puts the given string in the text field.

12

JLabel

A label is a display area for a short text.

• JLabel()

• JLabel(String text)

13

Container

• Some GUI components are called containers because they can contain a number of components.

• Examples: windows, frames, panels.• Often we need to display a number of

components on the screen. By putting these components into a number of containers makes it easier to manage their presentation on the screen.

14

Adding Components into a Frame

// Add a button into the framegetContentPane().add(new JButton("OK"));

Title bar

Content pane

See MyFrame.java in CodeBlock3

15

Content Pane

The content pane is a subclass of Container. The statement in the previous example can be replaced by the following lines:

Container container = getContentPane();container.add(new JButton("OK"));

The content pane container is automatically created when a JFrame object is created. A JFrame object uses the content pane to hold components in the frame.

16

Using Panels as Sub-Containers

• Panels act as sub-containers for grouping user interface components.

• It is recommended that you place the user interface components in panels and place the panels in a frame. You can also place panels in a panel.

• To add a component to JFrame, you actually add it to the content pane of JFrame. To add a component to a panel, you add it directly to the panel using the add method.

17

Creating a JPanelYou can use new JPanel() to create a panel with a default FlowLayout manager or

new JPanel(LayoutManager) to create a panel with the specified layout manager.

Use the add(Component) method to add a component to the panel. For example,

JPanel p = new JPanel();

p.add(new JButton("OK"));

18

Layout Managers

• The GUI components are placed in containers. Each container has a layout manager to tell us how the GUI components within the container can be arranged.

• Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

19

Kinds of Layout Managers

• FlowLayout

• GridLayout

• BorderLayout

20

The FlowLayout Manager

The components are arranged in the container from left to right in the order in which they were added. When one row becomes filled, a new row is started.

ShowFlowLayoutShowFlowLayout

21

FlowLayout Constructors• public FlowLayout(int alignment)

Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical.

• public FlowLayout()

Constructs a new FlowLayout with a defaultcenter alignment and a default gap of five pixelsfor both horizontal and vertical.

22

Example of the FlowLayout Manager

Write a program that adds three labels and text fields into the content pane of a frame with a FlowLayout manager. (Not ideal, see GridLayout later.)

ShowFlowLayoutNameShowFlowLayoutName

23

The GridLayout Manager

The GridLayout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor. The components are placed in the grid from left to right starting with the first row, then the second, and so on.

24

A GridLayout Constructor

• public GridLayout(int rows,int columns)

Constructs a new GridLayout with the specified number of rows and columns.

25

Example of the GridLayout Manager

Rewrite the program in the preceding example using a GridLayout manager instead of a FlowLayout manager to display the labels and text fields.

ShowGridLayoutShowGridLayout

26

The BorderLayout Manager

The BorderLayout manager divides the container into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using the add method.

add(Component, constraint), where constraint is BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER.

27

Example of the BorderLayout

ShowBorderLayoutShowBorderLayout

28

Example

This example uses panels to organize components. The program creates a user interface for a Microwave oven.

TestPanelsTestPanels

A button

A textfield

12

buttons

frame

p2

p1

29

Event-driven Programming

• GUI components allow users to interact with them, which generate events. Actions can be taken to respond to the events.

• Event-driven programming is a technique for constructing programs that operate in response to events as they occur.

• See the effect of ShowActionEvent.java and TestActionEvent.java

30

Event-driven Programming

• The object in which an event is generated is called the source object; the object in which corresponding actions are performed is called the listening object (or the listener).

• Sources: button1 and button2 in ShowActionsEvent

• Listening object: this object in ShowActionEvent;

31

Event-driven Programming

• The programmer must explicitly register the listener object with the source object.

jbtOk.addActionListener(btListener);

button1.addActionListener(this);

32

Events

• An event can be defined as a type of signal to the program that something has happened.

• The event is generated by external user actions such as mouse movements, mouse clicks, and keystrokes, or by the operating system, such as a timer.

33

Selected User ActionsSource Event Type

User Action Object Generated

Click a button JButton ActionEvent

Press return on a text field JTextField ActionEvent

Window opened, closed, etc. Window WindowEvent

Mouse pressed, released, etc. Component MouseEvent

Key released, pressed, etc. Component KeyEvent

34

Event Classes

• There are different kinds of events, e.g. press buttons, select items, closing windows. Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class.

• ActionEvent defines events such as pressing a button.

• WindowEvent defines events such as closing a window and opening a window.

• ItemEvent defines events such as select an item.

35

Event Information

An event object contains whatever properties are pertinent to the event. You can identify the source object of the event using the getSource() instance method

36

Listener Interfaces

• For each event class, Java also has a corresponding action (method) class or interface, e.g.

• For ActionEvent, the ActionListener interface specifies a method to deal with the events in ActionEvent.

• For WindowEvent, the WindonListener interface specifies a set of methods such as windowClosing and windowOpened.

• For ItemEvent, the ItemListener interface specifies a set of methods such as itemStateChanged.

37

Handling Events

• If an object is registered to listen to a particular class of events, that object needs to implement the corresponding interface and the listening object must implement all the methods specified in the interface.

38

Selected Event Handlers Event Class Listener Interface Listener Methods (Handlers)ActionEvent ActionListener actionPerformed(ActionEvent)ItemEvent ItemListener itemStateChanged(ItemEvent)WindowEvent WindowListener windowClosing(WindowEvent)

windowOpened(WindowEvent)windowIconified(WindowEvent)windowDeiconified(WindowEvent)windowClosed(WindowEvent)windowActivated(WindowEvent)windowDeactivated(WindowEvent)

MouseEvent MouseListener mousePressed(MouseEvent)mouseReleased(MouseEvent)

mouseClicked(MouseEvent) mouseExited(MouseEvent) mouseEntered(MouseEvent)

39

Example

• showActionEvent.java

• showActionListener.java

40

Example with more than one listener

A source event may be registered with more than one listener. See ShowActionListner.java

41

The Color Class

You can set colors for GUI components by using the java.awt.Color class.

Thirteen standard colors (black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow) are defined as constants in java.awt.Color.

42

Setting Colors

You can use the following methods to set the component’s background and foreground colors:

setBackground(Color c)

setForeground(Color c)

Example: see myFrame.java

43

Drawing in Swing• JPanel can be used to draw graphics

(including text) and enable user interaction.

• To draw in a panel, you usually create a new class that extends JPanel and override the paintComponent method to tell the panel how to draw things. You can then display strings, draw geometric shapes, and view images on the panel.

void paintCompnenet(Graphics g)

44

Graphics

The Graphics object g is created automatically by the JVM for every visible GUI component.

This object controls how information is drawn. You can use various drawing methods defined in the Graphics class to draw strings and geometric figures.

45

Java Coordinate System

(0, 0) X Axis

Y Axis

(x, y)

x

y

Java Coordinate System

X Axis Traditional Coordinate System

(0, 0)

Y Axis

46

paintComponent

• The paintComponent method is automatically invoked to paint the graphics context when the component is first displayed or whenever the component needs to be redisplayed.

• Invoking super.paintComponent(g) is necessary to ensure that the viewing area is cleared before a new drawing is displayed.

• If the user wishes to invoke the paintComponent method, the user uses the repaint() method, which causes the paintComponent to be invoked by the system.

• The user should never invoke the paintComponent method directly.

47

Drawing Geometric Figures and Strings

• Drawing Lines, e.g.drawLine(50,50,100,200)

• Drawing Rectangles, e.g. drawRect(20,20,100,50)

• Drawing Ovals, e.g. drawOval(30,30,50,50);

• Drawing Strings, e.g.

drawString(Hello”, 50,50);

48

Example

• Concept: extends JFrame, uses container to arrange components, uses the Graphics object, event driven prog.

• See MyDrawing.java