1. Topic 8: Basics of GUI Programming
COMP201 Java Programming
Topic 8: Basics of GUI Programming
Reading: Chapter 7

2. Objectives and Outline
Understanding general structure of GUI
Creating frames and displaying information
Outline:
Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

3. Introduction: Ingredients of Swing GUI
Build GUI with javax.Swing, available since JDK1.2
Better than java.awt, JDK1.1. Part of awt still in use.

4. Introduction: Ingredients of Swing GUI
Containment hierarchy of Swing components in GUI
Top-level container: JFrame (Window) in this case
Menu bar (optional)
contentPane: contains all visible components
Intermediate containers to organize
various GUI components: JPanels in this case
Atomic components.
JPanel3
JPanel1
JPanel2

5. Introduction: Ingredients of Swing GUI
Top-level containers:
Provide a place for other Swing components to paint themselves.
Other top-level containers: Jdialog, JApplet
Every top-level container contains an intermediate container known as a content pane.
The content pane contains all of the visible components in the window's GUI.
Exception to rule: menu bar
JPanel is an intermediate container.
Can be used to simplify the positioning of the button and label.
Other intermediate containers: JScrollPane, JTabbedPane
Play a more visible, interactive role in a program's GUI.

6. Introduction: Ingredients of Swing GUI
JComponent:
The base class for all Swing components (everything except JFrame).
Knows how to paint itself
protected void paintComponent(Graphics g)
Atomic components such as JLabel, JButton are JComponents
JPanels
can contain atomic components such as JButtons and Jlabels. Or JPanels themselves (Topic 10)
Are JComponents themselves. Can override the paintComponent method to display text, shapes, and image.

7. Introduction: Ingredients of Swing GUI
To create a swing GUI
Create a top-level container: JFrame
Get contentPane of the top-level container
Create JPanels
Layout the JPanels onto the contentPane.
Add components to JPanels or draw on them.
Create menu bar (Topic 10).
Handle events (Topic 9).

8. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

9. Creating a Frame
Frame: top-level window, not contained inside another window.
Use JFrame class in javax.swing package.
What can you do with JFrame: -
Create a new one -
toFront/
toBack -
get/
setSize -
is/
setResizable -
get/
setLocation -
dispose -
get/
setTitle -
setIconImage -
show/hide

10. Creating a Frame
Most methods for working with JFrame inherited from superclasses:
Object
Ancestor of all GUI objects
Component
Container
Window
JComponent
Frame
JPanel
JFrame

11. Creating a Frame java.awt.Component: java.awt.Window: java.awt.Frame:
getLocation, setBounds, setLocation, getSize, setSize, setBackground, setForeground, repaint, ……
java.awt.Window:
toFront, toBack, show, hide, ……
java.awt.Frame:
dispose, setResizable, setTitle, setIcomImage, ……

12. Creating a Frame Example: class SimpleFrame extends JFrame {
public SimpleFrame()
setSize(WIDTH, HEIGHT); }
public static final int WIDTH = 300;
public static final int HEIGHT = 200;
Default constructor of JFrame is called.
Default size of a JFrame: 0x0

13. Creating a Frame Things to know about coordinates
Units are expressed pixels (depends on resolution)
Coordinate system is vertically-flipped from Cartesian
(0,0) is upper left corner of screen
Frame defaults to location (0,0) and size (0,0)

14. Creating a Frame import javax.swing.*; public class SimpleFrameTest {
public static void main(String[] args)
SimpleFrame frame = new SimpleFrame();
frame.setDefaultCloseOperation
(JFrame.EXIT_ON_CLOSE);
frame.show(); }
} // SimpleFrameTest.java
Create a SimpleFrame.
Show it.
JDK1.3 feature

15. Creating a Frame Frame Positioning: Want a frame that
Is centered in the middle of the screen
Covers ¼ of the screen (Run CenteredFrameTest.java).
Shows java cup (image) when minimized

16. Creating a Frame Need dimension of screen, which is platform dependent
Get system-dependent info using java.awt.Toolkit class:
getDefaultToolkit --- static method for creating a Toolkit object
Dimension getScreenSize --- get size of screen
Image getImage --- load image

17. class CenteredFrame extends JFrame{
public CenteredFrame()
// get screen dimensions
Toolkit kit = Toolkit.getDefaultToolkit();
Dimension screenSize = kit.getScreenSize();
int screenHeight = screenSize.height;
int screenWidth = screenSize.width;
// center frame in screen
setSize(screenWidth / 2, screenHeight / 2);
setLocation(screenWidth / 4, screenHeight / 4);
// set frame icon and title
Image img = kit.getImage("icon.gif");
setIconImage(img);
setTitle("CenteredFrame");
}} //CenteredFrameTest.java

18. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

19. Displaying Information in a Frame
An Example:
To create a GUI
Create a top-level container: JFrame
Get contentPane of the top-level container
Create JPanels and
Add the JPanels onto the contentPane.
Add GUI components to the JPanels or draw on them

20. Displaying Information in a Frame
How to do 2, 3, 4?
JFrame frame;
2. Container cPane = frame.getContentPane();
3. JPanel p = new JPanel();
4. cPane.add(p);

21. Displaying Information in a Frame
5. How to draw custom graphics, in this case a text string, to JPanel?
A JPanel is a JComponent
Has method paintComponent to draw itself.
We can:
Define a new class that extends JPanel
Override the paintComponent method to draw what we want.
Class MyPanel extends JPanel
{ public paintComponent(Graphics g)
{ super.paintComponent(g); // draw background
// code for drawing }

22. Displaying Information in a Frame
Method paintComponent(Graphics g) is called automatically when opening, resizing, and moving window.
Graphics object automatically created.
Never call it explicitly.
Use the repaint method of Component to force repainting.

23. Note about paintComponent()
Main Thread
Event Dispatch Thread
Single thread rule: Modify GUI components only in the event dispatch thread to avoid corruption.
repaint() creates an paintEvent and sends it to the event dispatch thread for handling.
calling paintComponent() directly violates the single thread rule.

24. Displaying Information in a Frame
How to tell paintComponent(Graphics g) what and how to draw?
The method takes a java.awt.Graphics object as input.
Graphics: class for graphics context
We encapsulate information about what/how to draw in the Graphics object.
Next:
Displaying texts
Colors and fonts
2D shapes
Images

25. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

26. Example: NotHelloWorld
Step1. Derive a new class NotHelloWorldPanel by extending JPanel and specify what we want to draw on the panel and how.
class NotHelloWorldPanel extends JPanel {
public void paintComponent(Graphics g)
{ // Draw background
super.paintComponent(g);
g.drawString("Not a Hello, World program",
MESSAGE_X, MESSAGE_Y); }
public static final int MESSAGE_X = 75;
public static final int MESSAGE_Y = 100;
} //NotHelloWorld.java

27. Step2 : Derive a new class NotHelloWorldFrame by extending JFrame, create a NotHelloWorldPanel and add it to the contentPane of the frame.
class NotHelloWorldFrame extends JFrame {
public NotHelloWorldFrame()
setTitle("NotHelloWorld");
setSize(WIDTH, HEIGHT);
// add panel to frame
NotHelloWorldPanel panel = new
NotHelloWorldPanel();
Container contentPane = getContentPane();
contentPane.add(panel); }
public static final int WIDTH = 300;
public static final int HEIGHT = 200;
} //NotHelloWorld.java

28. Step3 : Create a NotHelloWorldFrame and show it.
import javax.swing.*;
import java.awt.*;
public class NotHelloWorld {
public static void main(String[] args)
NotHelloWorldFrame frame = new NotHelloWorldFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.show(); }

29. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

30. Using Text Fonts Class java.awt.Font Create Font objects: Using fonts:
Font f1 = new Font(“Serif”, Font.PLAIN, 20);
Font f2 = new Font(“Serif”, Font.PLAIN + Font.ITALIC, 16);
Using fonts:
Graphics g;
g.setFont(f1);
g.drawString("Not a Hello, World program", 75, 100);

31. Using Text Fonts Only 5 font families guaranteed to exist
SansSerif, Serif, Monospaced, Dialog, DialogInput
Can ask for others by name(“Arial”) but may not get what you want
Find out all available fonts on a machine using the getAvailableFontFamilyNames method of the GraphicsEnvironment class.
Style limited to PLAIN, BOLD, ITALIC
Default using plain 12pt SansSerif

32. Using Colors Class java.awt.Color Create new color objects:
Color c = new Color(100, 25, 200);
Red-green-blue (RGB) color model
Each component can have in range 0 to 255
13 predefined color constants
Color.black, Color.red, Color.green, etc.
Using Colors:
Graphics2D g;
g.setColor(Color.pink); g.drawString(“Hi”, 55, 55);
g.setColor(c); g.drawString(“there”, 80, 55);

33. Using Text Fonts Class java.awt.FontMetrics
Methods for getting information about fonts:
Graphics g;
Font f = new Font("SansSerif", Font.BOLD, 14);
FontMetrics fm = g.getFontMetrics(f);
int w = fm.stringWidth(“Not Hello”);

34. NotHelloWorld2.java public void paintComponent(Graphics g)
{ super.paintComponent(g);
setFonts(g);
String s1 = "Not a ";
String s2 = "Hello, World";
String s3 = " Program";
int w1 = fm.stringWidth(s1);
int w2 = fim.stringWidth(s2);
int w3 = fm.stringWidth(s3);
Dimension d = getSize();
int cx = (d.width - w1 - w2 - w3) / 2;
int cy = (d.height - fm.getHeight()) / 2 +fm.getAscent();
g.setFont(f);
g.drawString(s1, cx, cy);
cx += w1;
g.setFont(fi);
g.setColor(Color.red);
g.drawString(s2, cx, cy);
cx += w2;
g.drawString(s3, cx, cy); }
NotHelloWorld2.java

35. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

36. 2D Shapes You can draw lines, rectangles, ellipses, etc, using class
java.awt.Graphics
drawLine, drawArc, drawPolygon
drawPolyline, drawRect, drawRoundRect,
draw3DRect, fillRect,
The subclass java.awt.Graphics2D is better
Need cast:
public void paintComponent(Graphics g)
{ Graphics2D g2 = (Graphics2D) g; … }
The cast is legal because paintComponent automatically receives a Graphics2D object if SDK is Java 2D enabled

37. 2D Shapes
You can draw by using the methods shown on the previous slides.
It’s better to use the geometric shape classes: java.awt.geom.*
Line2D, Rectangle2D, Ellipse2D, Point2D, …
All those classes implement the Shape interface and Graphics2D has method draw(Shape s)
All are abstract classes with two concrete static inner classes. E.g.
Rectangle2D.Double, Rectangle2D.Float
Usually use the Double version.
The Float version saves space but is troublesome float f = 1.2; //illegal.
Need cast: float f = (float) 1.2;
See DrawTest.java

38. 2D Shapes: draw rectangles
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
// draw a rectangle
double leftX = 100;
double topY = 100;
double width = 200;
double height = 150;
Rectangle2D rect = new Rectangle2D.Double(leftX,
topY,width, height);
g2.draw(rect);

39. 2D Shapes:draw line and circle
// draw the enclosed ellipse
Ellipse2D ellipse = new Ellipse2D.Double();
ellipse.setFrame(rect);
g2.draw(ellipse);
// draw a diagonal line
g2.draw(new Line2D.Double(leftX, topY,
leftX + width, topY + height));
// draw a circle with the same center
double centerX = rect.getCenterX();
double centerY = rect.getCenterY();
double radius = 150;
Ellipse2D circle = new Ellipse2D.Double();
circle.setFrameFromCenter(centerX, centerY,
centerX + radius, centerY + radius);
g2.draw(circle);}}

40. Drawing Lines and Shapes
Paint Mode
Default: last drawn shape covers earlier one.
XOR mode:
If you draw one shape twice in XOR mode, the second one erases the first one.
Graphics:
public abstract void setXORMode(Color c1)

41. Outline Introduction: Ingredients of Swing GUI
Creating a frame (window)
Displaying information in a panel
Displaying texts
2D shapes
Colors and fonts
Images

42. Displaying Images Java Toolkit object can read GIF and JPEG files.
Get image from file
Image image = Toolkit.getDefaultToolkit().getImage(FileName);
Get image from the Net:
URL u = new URL(
Image image = Toolkit.getDefaultToolkit().getImage(u);
Display image:
g.drawImage(image, x, y, null);

43. Displaying Images
Java spawns a separate thread to load image, which run in parallel with the main thread.
Use MediaTracker class to wait until image is completely loaded before drawing
public ImagePanel()
{ image = Toolkit.getDefaultToolkit().getImage
("Cat.gif");
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(image, 0);
try { tracker.waitForID(0); }
catch (InterruptedException e) {} }
Example: ImageTest.java

44. Summary To create a Swing GUI
Create JPanels and add GUI components to the JPanels
Custom graphics:
Override the paintComponent(Graphics g) method
Encapsulate what and how to draw in the graphics object
Predefined GUI components: simply add to the panel (Topic 10)
Hierarchical: Panels can contain other panels
Create a top-level container: JFrame and layout the JPanels onto the contentPane of the container