1. Object-Orientated Analysis, Design and Programming
Presentation by
Dr. Phil Legg
Senior Lecturer Computer Science
7: Graphical User Interfaces
Autumn 2016

2. Session Aims
GUI components : To create user interfaces using frames, panels, and some simple UI components
Layout Managers : Understand their role, and use FlowLayout, GridLayout and BorderLayout
Graphics : Use of the Color class, paintComponent method, and Graphics class.

3. GUI Components

4. AWT and Swing
Java provides many predefined classes for building GUI applications
These classes are provided in two packages called: Abstract Windows Toolkit (AWT) and Swing
In Java, to write a GUI program, we derive new classes from those provided in AWT or Swing

5. Structure of AWT and Swing
Graphics
Drawing, fonts, colour etc.
Components
buttons, text fields, menus and scroll bars etc
Layout managers
Arrangement of GUI components
Event handlers
Event such as clicking button and corresponding actions
Image manipulation.

6. Creating a Frame import javax.swing.*;
public class MyFrame1 extends JFrame{
MyFrame1(String title) {
setTitle(title);
setSize(400,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true); }
public static void main(String[] args) {
MyFrame1 frame = new MyFrame1("MyFrame");

7. Adding components to frame
Container contentPane = getContentPane();
//obtain the content pane of the frame
JButton ok = new JButton("first_ok_button");
//create a button object
contentPane.add(ok);

8. Adding JButton to frame
import javax.swing.*;
import java.awt.Container;
public class MyFrame2 extends Jframe{
MyFrame2(String title) {
setTitle(title);
setSize(400,300);
Container contentPane = getContentPane(); JButton ok = new JButton("first_ok_button"); contentPane.add(ok); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); }
public static void main(String[] args) {
MyFrame2 frame = new MyFrame2("MyFrame");

9. In-Class Activity
Compile the examples to add a JButton to a frame

10. GUI Components Component is the superclass of Container
Container is the superclass of Jcomponent
JComponent is the superclass of AbstractButton
AbstractButton is the superclass of Jbutton
JComponent is the superclass of JTextComponent
JTextComponent is the superclass of JTextField
JTextComponent is the superclass of JTextArea
JComponent is the superclass of JLabel

11. GUI Components

12. GUI Components

13. GUI Components
The Component class provides methods such as setting and getting background colours.
The Container class provides methods for adding component to the container; setting layout manager; and painting the component.

14. UI Objects: JButton Mostly used constructors. JButton(String text)
E.g.
JButton ok = new JButton("first_ok_button");
 JButton also inherits all the methods in its super classes such as setBackgroundColor

15. UI Objects: JTextField
A JTextField: user input area.
Commonly used constructors and methods are:
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.
Mostly used methods:
getText()
Returns the string from the text field.
setText(String text)
Puts the given string in the text field.

16. UI Objects: JLabel A JLabel is a display area for a short text.
Constructors and methods include the following:
JLabel()
JLabel(String text)
setText(String text)
getText()

17. Containers
Containers can contain a number of components, e.g. frames and panels, ContentPane
We can use the add method to put components in a container:
Container contentPane = getContentPane();
JButton ok = new JButton("first_ok_button");
contentPane.add(ok);
Jframe is different from Frame, the ‘add’ method is overridden so that you can write:
frame.add(child);

18. JPanel JPanel is a subclass of Jcomponent
Used as container or sub-containers for grouping user interface components
Often programmers use a JPanel instead of the Content Pane when adding components to a frame as JPanel is a subclass of JComponent; it provides more methods than the ContentPane

19. Layout Manger
Controls how the GUI components within the container can be arranged
Java provides a number of predefined layout managers.  
FlowLayout
GridLayout
BorderLayout
Containers has a method
setLayout(LayoutManager)

20. FlowLayout FlowLayout is the simplest layout 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.

21. FlowLayout public class ShowFlowLayout extends JFrame {
public ShowFlowLayout() {
Container container = getContentPane();
container.setLayout(new FlowLayout());
for (int i = 1; i <= 10; i++)
container.add(new JButton("Component " + i)); }
public static void main(String[] args) {
ShowFlowLayout frame =
new ShowFlowLayout(); ……

22. FlowLayout

23. GridLayout
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. GridLayout public class ShowGridLayout extends JFrame {
public ShowGridLayout() {
Container container = getContentPane();
container.setLayout(new GridLayout(3,2));
container.add(new JLabel("First Name"));
container.add(new JTextField());
container.add(new JLabel("MI"));
container.add(new JLabel("Last Name")); } ……

25. GridLayout

26. BorderLayout
Divides the container into five areas: East, South, West, North, and Center.
To add a component to a particular area, we use the add(Component, constraint) method, where constraint is
BorderLayout.EAST,
BorderLayout.SOUTH,
BorderLayout.WEST,
BorderLayout.NORTH,
BorderLayout.CENTER

27. BorderLayout public class ShowBorderLayout extends JFrame {
public ShowBorderLayout() {
Container container = getContentPane();
container.add(new JButton("East"),
BorderLayout.EAST);
container.add(new JButton("South"),
BorderLayout.SOUTH);
container.add(new JButton("West"),
BorderLayout.WEST);
container.add(new JButton("North"),
BorderLayout.NORTH);
container.add(new JButton("Center"),
BorderLayout.CENTER); } ……

28. BorderLayout

29. Combining Layouts

30. Color
You can set colours for GUI components by using the java.awt.Color class.
MyFrame(String title) {
… …
Container container = getContentPane();
JButton ok = new JButton("first_ok_button");
container.add(ok);
ok.setBackground(Color.red);
container.setBackground(Color.green); }

31. Drawing in Swing
Usually create a new class that extends JPanel and override the paintComponent () method
The Graphics object g is created automatically by the Java Virtual Machine for every visible GUI component.

32. Methods in the Graphics object
drawLine(50,50,100,60), draws a line from (50,50) to (100,60)
drawRect(20,20,100,50), draws a rectangle with (20,20) as the top left corner; 100 is the length and 50 is the width.
fillRect(20,20,100,50), draws a rectangle as above but filled with the current colour.
drawOval(30,30,50,50), draws an oval bounded by an invisible rectangle whose top left corner is at (30,30); length is 50 and width is 50.
drawString(“Hello”, 50,50), draws a string starting from the position (50,50).
setColor(Color.red), sets of colour of the graphics object to be red.

33. paintComponent public class MyCanvas extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.fillRect(10,10,100,50);
g.drawRect(10,80,100,50); }

34. Drawing (1) public class MyExample extends JFrame {
MyCanvas canvas = new MyCanvas();
JLabel heading = new JLabel("My drawing");
public MyExample() {
Container container = getContentPane();
container.add(heading,BorderLayout.NORTH);
container.add(canvas,BorderLayout.CENTER); }

35. Drawing (2) public static void main(String[] args) {
MyExample myDrawing = new MyExample();
myDrawing.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
myDrawing.setSize(300,300);
myDrawing.setVisible(true); }

36. Events
Events: mouse movements, mouse clicks, and keystrokes or by the operating system, such as a timer.
Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class.
For example, ActionEvent defines events such as pressing a button; WindowEvent defines events such as closing or opening a window;

37. Events
Events: mouse movements, mouse clicks, and keystrokes or by the operating system, such as a timer.
Java has pre-defined classes to represent different kinds of events. Each kind of event is defined as a class.
For example, ActionEvent defines events such as pressing a button; WindowEvent defines events such as closing or opening a window;

38. Listeners
Once an event is generated, it needs to be listened by an object: the listener.
The listener object receives information about these events and takes some actions to respond to these events, i.e. to handle the events.
The actions for handling the events are defined in the methods specified in the relevant listener interface.
The listener object’s class must implement the corresponding event-listener interface. The listener object must register with the source object.

39. Listener interfaces Event Class Listener Interface
Listener Methods (Handlers)
ActionEvent
ActionListener
actionPerformed(ActionEvent)
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)

40. Listener interfaces - example

41. Summary
How to create various GUI components, in particular, JFrame, JPanel, JButton, JTextfield, JLabel.
How to use layout managers for containers, in particular, FLowLayout, GridLayout and BorderLayout.
How to use the graphics object to draw graphics, in particular how to use the paintComponent method.

42. In-Class Activity
Write a java program to implement the oven front view example

43. In-Class Activity
Write a java program to implement the simple calculator to produce a GUI as shown below.

44. In-Class Activity
Write a java program that displays a frame. In the frame there are buttons labelled “red”, “blue” and “green”. When a button is pressed, the background is changed to that colour.
Try extend this to support mixing of colours (so that multiple colours can be selected at once – you may decide to use something other than buttons…)

45. In-Class Activity
Write a java program to implement the simple calculator to produce a GUI as shown below.