Unit 11 Object-oriented programming: Graphical user

interface Jin Sa

Objectives

• GUI components– To create user interfaces using frames, panels, and some

simple UI components• Layout managers– To understand the role of layout managers– To use the FlowLayout, GridLayout, and BorderLayout

• Graphics– To use the Color class – To use the paintComponent method– To use the Graphics class

GUI components

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.

The overall 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.

Creating a frameimport 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");

}

}

Student activity 11.1

• Implement and run the above example.

Adding components to a frame

Container contentPane = getContentPane(); //obtain the content pane of the frameJButton ok = new JButton("first_ok_button"); //create a button objectcontainer.add(ok);

Student activity 11.2

• Read the page on “Adding components to a frame”

• Add a button to the frame.

Effect of Using ContentPane 1public class MyFrame_color extends JFrame{

MyFrame_color(String title) {

setTitle(title);

setSize(400,300);

setBackground(Color.BLUE);//sets the frame colour???

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setVisible(true);

}

public static void main(String[] args) {

MyFrame_color frame = new MyFrame_color("MyFrame");

}

}

Effect of Using ContentPane 2public class MyFrame_color extends JFrame{

MyFrame_color(String title) {

setTitle(title);

setSize(400,300);

getContentPane().setBackground(Color.BLUE);

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setVisible(true);

}

public static void main(String[] args) {

MyFrame_color frame = new MyFrame_color("MyFrame");

}

}

Some 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

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

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

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.

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

Container

• 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);

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

Student activity 11.4

• Read the page on Container. Use JPanel. Add a JButton to the JPanel instead of to the ContentPane.

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)

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.

FlowLayout: Fragment of code 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(FlowLayout.LEFT);

……

}

}

Output from the program

Student activity 11.5

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.

GridLayout: Fragment of codepublic 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(8));

container.add(new JLabel("MI"));

container.add(new JTextField(1));

container.add(new JLabel("Last Name"));

container.add(new JTextField(8));

}

……

}

Output from the program

Student activity 11.6

• Implement the GridLayout program

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

BorderLayout: code fragment 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);

}

……

Output from program

An integrated case study

The Color class

• 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);

… …

}

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.

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.

paintComponenet

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

}

}

Darwing: code fragment 1public 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);

}

Darwing: code fragment 2

public static void main(String[] args) {

MyExample myDrawing = new MyExample();

myDrawing.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

myDrawing.setSize(300,300);

myDrawing.setVisible(true);

}

}

Student activity 11.8 (homework)

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.