Download Lab 8 - Layout Manager and Graphics

Object-Oriented Programming Laboratory (Java Lab)
ITS 103 ◦ ICT ◦ SIIT
Boontawee Suntisrivaraporn ([email protected])
Lab !8 - Layout Manager and Graphics
Lab objectives
• To learn about Java Layout Manager.
• To be able to design and build useful Graphical User Interfaces
• To understand the concept of JPanel.
• To learn the java.awt.Graphics class.
• To learn how to draw personalized graphics on a panel by overriding the paintComponent method.
Layout Manager
A layout manager describes where and how GUI components are placed relative to each other. For
example, if you created a frame and added six buttons to it, the layout manager is responsible for
determining where, within that frame, to place those buttons. The following lists some commonly used
Swing layout managers.
• java.awt.FlowLayout arranges elements left to right across the container.
• java.awt.BorderLayout arranges elements along the north, south, east, west, and in the center of
the container.
• java.awt.GridLayout arranges elements into a two-dimensional grid of specified sizes.
JPanel
A JPanel is an empty area that can be used either to hold other components or to draw graphics on. The
default layout for a JPanel is FlowLayout.
Example 1: Using FlowLayout
Create a new project called Lab7-Example1. Add the following class to the project. Compile and run the
program.
import javax.swing.*;
import java.awt.*;
public class ConverterFrame extends JFrame {
private JLabel prompt = new JLabel("Distance in miles: ");
private JTextField input = new JTextField(6);
private JTextArea display = new JTextArea(10,20);
private JButton convert = new JButton("Convert!");
1
public ConverterFrame() {
super("Distance Converter");
setLayout(new FlowLayout());
add(prompt);
add(input);
add(convert);
add(display);
}
public static void main(String args[]) {
ConverterFrame cf = new ConverterFrame();
cf.setSize(400, 300);
cf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
cf.setVisible(true);
}
}
Try to resize the window and see what changed.
Example 2: Using a combination of layouts
Create a new project called Lab7-Example2. Add the following class to the project. Compile and run the
program.
import javax.swing.*;
import java.awt.*;
public class ConverterFrame extends JFrame {
private JLabel prompt = new JLabel("Distance in miles: ");
private JTextField input = new JTextField(6);
private JTextArea display = new JTextArea(10,20);
private JButton convert = new JButton("Convert!");
private JPanel p1 = new JPanel(new FlowLayout());
public ConverterFrame() {
super("Distance Converter");
setLayout(new BorderLayout());
p1.add(prompt);
p1.add(input);
p1.add(convert);
p1.setBackground(new Color(0,150,200));
add(p1, BorderLayout.NORTH);
add(display, BorderLayout.CENTER);
}
public static void main(String args[]) {
ConverterFrame f = new ConverterFrame();
f.setSize(400, 300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
2
}
In Java, you can set colors of the GUI components using java.awt.Color. In this exercise, we set a color
of the JPanel to be light blue by adding a statement p1.setBackground(new Color(0,150,200)); to
the ConverterFrame constructor. Comparing to the first example, this program generates a similar result.
However, when the window is resized, a location of the JTextArea does not change. Try to resize it!
Border
The Swing Border and BorderFactory classes can place borders around virtually any GUI element. Using
borders is an effective way to make the grouping of components more apparent. Borders can have titles
that enhance the GUI’s ability to guide and inform the user. To put a border around a JComponent,
we use the setBorder method. Additionally, we can use the BorderFactory class to create most of the
borders that Swing provides.
Example 3: Adding more layouts and a border
Create a new project called Lab7-Example3. Add the following classes to the project. Compile and run
the program.
import javax.swing.*;
import java.awt.*;
public class ConverterFrame extends JFrame {
private JLabel prompt = new JLabel("Distance in miles: ");
private JTextField input = new JTextField(6);
private JTextArea display = new JTextArea(10,20);
private JButton convert = new JButton("Convert!");
private JPanel p1 = new JPanel(new FlowLayout());
public ConverterFrame() {
super("Distance Converter");
setLayout(new BorderLayout());
p1.add(prompt);
p1.add(input);
p1.add(convert);
add(p1, BorderLayout.NORTH);
add(display, BorderLayout.CENTER);
add(new KeyPad(), BorderLayout.EAST);
p1.setBackground(new Color(0,150,200));
}
public static void main(String args[]) {
ConverterFrame f = new ConverterFrame();
f.setSize(400, 300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
public class KeyPad extends JPanel{
3
Figure 1: Expected output of Exercise 1.
private final static int NBUTTONS = 12;
private JButton buttons[];
private String labels[] =
{ "1","2","3",
"4","5","6",
"7","8","9",
"C","0","." };
public KeyPad() {
setLayout(new GridLayout(4,3));
setBorder(BorderFactory.createTitledBorder("Keypad"));
buttons = new JButton[NBUTTONS];
for(int k = 0; k < buttons.length; k++) {
buttons[k] = new JButton(labels[k]);
add(buttons[k]);
}
}
}
In this example, we extend from the previous project by adding a numeric keypad to the east zone of the
outer layout (belonging to the JFrame). The keypad itself is organized by GridLayout.
Exercise 1
Create a new project called Lab8-Exercise1. Write a program that generates an output similar to Fig. 1.
Try to resize the window frame and see what happens.
Hint: Use GridLayout for the main panel and other panels.
4
The Graphics class
The Graphics class has methods that can be used to draw geometric shapes in different colors. These
methods can be used to create graphical user interfaces that are more interesting or to give a visual
representation of data.
To draw graphics on JPanel, it is mandatory to:
• crate a new class that extends JPanel and override a paintComponent method in it.
• create a new Graphics object and add it to the extended panel.
Example 4: Drawing graphics
Create a new project called Lab8-Example4. Add the following class to the project. The source code for
this example is available on the course Webpage. Then, compile and run the program. Study the source
code and the output to learn the important methods for drawing graphics.
import
import
import
import
java.awt.Color;
java.awt.Graphics;
javax.swing.JFrame;
javax.swing.JPanel;
class MyGraphicPanel
private int []x1
private int []y1
private int []x2
private int []y2
extends JPanel {
= {300, 340, 390, 350};
= {50, 50, 100, 100};
= {300, 340, 390, 350};
= {150, 150, 200, 200};
public void paintComponent(Graphics g) { // override this method
super.paintComponent( g );
// call this method of the superclass
setBackground(new Color(0, 255, 255));
g.drawString("Blank Shapes",20,40);
g.setColor(Color.blue);
g.drawLine(20,50,70,90);
g.setColor(Color.red);
g.drawRect(100,50,32,55);
g.setColor(Color.orange);
g.drawOval(150,46,60,60);
g.setColor(Color.magenta);
g.drawArc(230,50,65,50,30,270);
g.setColor(Color.blue);
g.drawPolyline(x1, y1, x1.length);
g.setColor(Color.black);
g.drawString("Filled Shapes",20,140);
5
Figure 2: Expected output of Exercise 2.
g.setColor(Color.yellow);
g.fillRect(100,150,32,55);
g.setColor(Color.pink);
g.fillOval(150,146,60,60);
g.setColor(Color.darkGray);
g.fillArc(230,150,65,50,30,270);
g.setColor(Color.blue);
g.fillPolygon(x2, y2, x2.length);
} // end paintComponent
} // end MyGraphicPanel
class MyGraphicFrame extends JFrame {
public static void main(String args[]) {
JFrame f = new MyGraphicFrame();
f.add(new MyGraphicPanel());
f.setTitle("Drawing Graphics");
f.setSize(400,300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
Exercise 2
Create a new project called Lab8-Exercise2. Write a program that uses the method fillOval in Graphics
to draw a series of eight concentric, i.e. sharing the center, circles similar to Figure 2.
Exercise 3
Write a program in a new project called Lab8-Exercise3 that draws a checker board similar to Figure 3.
Exercise 4
Write a program in a new project called Lab8-Exercise4 that draws a snowman similar to Figure 4.
6
Figure 3: Expected output of Exercise 3.
Figure 4: Expected output of Exercise 4.
7