Getting Started with Graphics Programming: Frames, Layout Managers, and Drawing in Java, Slides of Computer Science

Download Getting Started with Graphics Programming: Frames, Layout Managers, and Drawing in Java and more Slides Computer Science in PDF only on Docsity!

Chapter 8 Getting Started with

Graphics Programming

• Graphics Class Hierarchy
• Frames
  • Creating & centering frames, adding components to frames
• Layout Managers
  • FlowLayout, GridLayout, BorderLayout
• Drawing on Panels
  • The paintComponent method
• Using Colors, Fonts, and Font Metrics
• Drawing Geometric Figures
  • Lines, Rectangles, Ovals, Arcs, and Polygons
• Event-Driven Programming
  • Event Source, Listener, Listener Interface Docsity.com

Graphics Class Hierarchy (Swing)

AWTEvent Font FontMetrics

Component

Graphics

Object Color

Container

Panel Applet

Frame Dialog

Window

JComponent

JApplet

JFrame JDialog

Swing Components in the javax.swing package

Lightweight

Heavyweight

Classes in the javax.swing package 1

LayoutManager

JComponent . JButton JMenuItem JCheckBoxMenuItem AbstractButton JComponent JMenu .JRadioButtonMenuItem .JToggleButton JCheckBox JRadioButton .JComboBox .JInternalFrame .JLayeredPane .JList .JMenuBar .JOptionPane .JPopupMenu .JProgressBar .JPane .JScrollBar .JScrollPane .JFileChooser .JSeparator .JSplitPane .JSlider .JTabbedPane .JTable .JTableHeader .JTextComponent .JTextField .JEditorPane .JTextArea .JToolBar .JToolTip .JTree .JRootPane .JPanel .JPasswordField .JColorChooser .JLabel

AWT (Optional) AWTEvent Font FontMetrics

Component

Graphics

Object Color

Canvas

Button

TextComponent

Label

List

CheckBoxGroup

CheckBox

Choice

Container Panel Applet Frame Dialog FileDialog

Window

TextField

TextArea

MenuComponent (^) MenuItem MenuBar

Menu

Scrollbar

LayoutManager

Frames

• Frame is a window that is not

contained inside another window.

Frame is the basis to contain other

user interface components in Java

graphical applications.

• The Frame class can be used to create

windows.

UI Components

Frame Pull-down Menus

User Interface Components (UI)

Panel

Panel Panel UI

Panel UI

Panel UI

Applet

Panel User Interface Components

Panel User Interface Components

Panel User Interface Components

Panel User Interface Components

panel

Pull-down Menus

Creating Frames

Run

import javax.swing.; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); // frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } }*

NOTE: To enable it to run in JDK 1.2, the EXIT_ON_CLOSE option is commented.

Centering Frames

• By default, a frame is displayed in the

upper-left corner of the screen.

• To display a frame at a specified location,

you can use the setLocation(x, y) method

in the JFrame class. This method places

the upper-left corner of a frame at location

(x, y).

Centering Frames, cont.

CenterFrame Run

screenH

screenWidth

frameHeight

screenWidth

(x, y)

Frame

Screen

Adding Components into a

Frame

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

MyFrameWithComponents Run

Layout Managers

• Java’s layout managers provide a level of

abstraction to automatically map your user

interface on all windowing systems.

• The UI components are placed in containers.
• Each container has a layout manager to

arrange the UI components within the container.

Kinds of Layout Managers

• FlowLayout
• GridLayout
• BorderLayout
• CardLayout
• GridBagLayout

Example 8.

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

ShowFlowLayout Run

FlowLayout Constructors

• public FlowLayout(int align, int hGap, int vGap)

Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components.

• 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 default center alignment and a default gap of five pixels for both horizontal and vertical.

Example 8.

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

ShowGridLayout Run

GridLayout Constructors

• public GridLayout(int rows, int columns)

Constructs a new GridLayout with the

specified number of rows and columns.

• public GridLayout(int rows, int columns, int

hGap, int vGap)

Constructs a new GridLayout with the

specified number of rows and columns,

along with specified horizontal and

vertical gaps between components.

Example 8.

Testing the BorderLayout Manager

The BorderLayout

manager divides the

window into five areas:

East, South, West, North,

and Center. Components

are added to a

BorderLayout by

using

ShowBorderLayout (^) Run

add(Component,

constraint), where

constraint is

BorderLayout.EAST,

BorderLayout.SOUTH,

BorderLayout.WEST,

BorderLayout.NORTH, or

BorderLayout.CENTER.

Using Panels as Containers

• Panels act as smaller 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.

Example 8.4 Testing Panel

This example uses panels to organize

components. The program creates a user

interface for a Microwave oven.

TestPanels Run

Drawing on Panels

• JPanel can be used to draw graphics (including

text) and enable user interaction.

To draw in a panel, you 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.

The Color Class

Color c = new Color(r, g, b);

r, g, and b specify a color by its red,

green, and blue components.

Example:

Color c = new Color(128, 100, 100);

Setting Colors

You can use the following methods to set the

component’s background and foreground colors:

setBackground(Color c)

setForeground(Color c)

Example:

setBackground(Color.yellow);

setForeground(Color.red);

The Font Class

Font myFont = Font(name, style, size);

Example:

Font myFont = new Font("SansSerif ", Font.BOLD, 16); Font myFont = new Font("Serif", Font.BOLD+Font.ITALIC, 12);

Setting Fonts

public void paint(Graphics g)

{

Font myFont = new Font("Times", Font.BOLD, 16); g.setFont(myFont); g.drawString("Welcome to Java", 20, 40);

//set a new font g.setFont(new Font("Courier", Font.BOLD+Font.ITALIC, 12)); g.drawString("Welcome to Java", 20, 70);

}

The FontMetrics Class

By

Leading

Ascent

Baseline Descent

Height