Chapter 8: Getting Started with Graphics Programming Graphics Class HierarchyGraphics Class Hierarchy FramesFrames The relationship between frame and other UI The relationship between frame and other UI

componentscomponents Event-Driven ProgrammingEvent-Driven Programming

Event Source, Listener, Listener InterfaceEvent Source, Listener, Listener Interface Layout Managers Layout Managers

FlowLayout, GridLayout, BorderLayoutFlowLayout, GridLayout, BorderLayout PanelsPanels repaint(), update(), paint()and repaint(), update(), paint()and

paintComponent() methodspaintComponent() methods Drawing Geometric FiguresDrawing Geometric Figures

Color, Font, FontMetrics classesColor, Font, FontMetrics classes Drawing methodsDrawing methods

Graphics Class Hierarchy (AWT)AWTEvent

Font

FontMetrics

Component

Graphics

Object

LayoutManager

Color

Canvas

Button

TextComponent

Label

List

CheckBoxGroup

CheckBox

Choice

Container Panel Applet

Frame

Dialog FileDialog

Window

TextField

TextArea

MenuComponent MenuItem

MenuBar

Menu

Scrollbar

Graphics Class Hierarchy (Swing)

AWTEvent

Font

FontMetrics

Component

Graphics

Object

LayoutManager

Color

Container

Panel Applet

Frame

Dialog

Window

JComponent

JApplet

JFrame

JDialog

Swing Componentsin the javax.swing pacakge

Lightweight

heavyweight

Graphics Class Hierarchy (Swing).

JButton

JMenuItem

JCheckBoxMenuItem

AbstractButton

JComponent

JMenu

.JRadioButtonMenuItem

.JToggleButton JCheckBox

JRadioButton

.JComboBox

.JInternalFrame .JLayeredPane

.JList .JMenuBar .JOptionPane

.JPopupMenu

.JProgressBar

.JPane

.JFileChooser.JScrollBar .JScrollPane

.JSeparator

.JSplitPane

.JSlider .JTabbedPane

.JTable

.JTableHeader

.JTextField.JTextComponent

.JEditorPane

.JTextArea

.JToolBar

.JToolTip

.JTree

.JRootPane

.JPanel

.JPasswordField

.JColorChooser

.JLabel

Frames

Frame is a window that is not Frame is a window that is not contained inside another window. contained inside another window. Frame is the basis to contain other Frame is the basis to contain other user interface components in Java user interface components in Java graphical applications.graphical applications.

The Frame class can be used to create The Frame class can be used to create windows. windows.

UI Components

Frame Pull-down Menus

User InterfaceComponents (UI)

Panel

Panel

Panel

UI

Panel

UI

Panel

UI

Applet

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

Pull-down Menus

Frames, cont.

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

RunRun

Event-Driven Programming

Procedural programmingProcedural programming is executed in is executed in procedural order.procedural order.

In In event-driven programmingevent-driven programming, code is , code is executed upon activation of events. executed upon activation of events.

Events An An eventevent can be defined as a type of signal can be defined as a type of signal

to the program that something has to the program that something has happened. happened.

The event is generated by external user The event is generated by external user actions such as mouse movements, mouse actions such as mouse movements, mouse button clicks, and keystrokes, or by the button clicks, and keystrokes, or by the operating system, such as a timer.operating system, such as a timer.

Event Information id: A number that identifies the event. id: A number that identifies the event. target: The AWT component upon which the event target: The AWT component upon which the event

occurred. occurred. arg: Additional information about the AWT arg: Additional information about the AWT

components. components. x, y coordinates: The mouse pointer location when a x, y coordinates: The mouse pointer location when a

mouse movement event occurred.mouse movement event occurred. clickCount: The number of consecutive clicks for theclickCount: The number of consecutive clicks for the

mouse events. For other events, it is zero.mouse events. For other events, it is zero. when: The time stamp of the event.when: The time stamp of the event. key: The key that was pressed or released.key: The key that was pressed or released.

Event Classes

Selected User Actions

Source Event TypeUser Action Object Generated

Clicked on a button JButton ActionEvent

Changed text JTextComponent TextEvent

Dbl-clicked on a list item JList ActionEvent

Selected or deselected JList ItemEvent an item with a single click

Desel/Selected an item JComboBox ItemEvent

The Delegation Model

Selected Event Handlers

Event Class Listener Interface Listener Methods (Handlers)========== ============== ======================ActionEvent ActionListener actionPerformed(ActionEvent)ItemEvent ItemListener itemStateChanged(ItemEvent)WindowEvent WindowListener windowClosing(WindowEvent)

windowOpened(WindowEvent)windowIconified(WindowEvent)windowDeiconified(WindowEvent)windowClosed(WindowEvent)windowActivated(WindowEvent)windowDeactivated(WindowEvent)

ContainerEvent ContainerListener componentAdded(ContainerEvent) componentRemoved(CoantainerEvent)

Example 8.1Closing Windows

MyFrameWithExitHandlingMyFrameWithExitHandling

RunRun

Objective: Extend javax.swing.JFrame with window-closing capability.

Example 8.2Handling Simple Mouse Events

Objective: Create a frame and display a solid Objective: Create a frame and display a solid square at the mouse pointer when the mouse square at the mouse pointer when the mouse is clicked.is clicked.

TestMouseEventTestMouseEvent

RunRun

Example 8.3Handling Simple Action Events Objective: Display a Close button in the Objective: Display a Close button in the

window; terminate the program by clicking the window; terminate the program by clicking the Close button in the window or on the title bar.Close button in the window or on the title bar.

TestActionEventTestActionEvent

RunRun

Layout Managers Java’s layout managers provide a level of Java’s layout managers provide a level of

abstraction to automatically map your user abstraction to automatically map your user interface on all windowing systems. interface on all windowing systems.

The UI components are placed in containers. The UI components are placed in containers. Each container has a layout manager to Each container has a layout manager to arrange the UI components within the arrange the UI components within the container.container.

Kinds of Layout Managers FlowLayoutFlowLayout

GridLayoutGridLayout

GridBagLayoutGridBagLayout

BorderLayoutBorderLayout

CardLayout CardLayout

Layout Manager Hierarchy

Example 8.4Testing the FlowLayout Manager

The components are arranged in the The components are arranged in the container from left to right in the order in container from left to right in the order in which they were added. When one row which they were added. When one row becomes filled, a new row is started.becomes filled, a new row is started.

ShowFlowLayoutShowFlowLayout RunRun

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

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

public FlowLayout(int alignment)public FlowLayout(int alignment)

Constructs a new Constructs a new FlowLayoutFlowLayout with a specified alignment and a with a specified alignment and a default gap of five pixels for both horizontal and vertical.default gap of five pixels for both horizontal and vertical.

public FlowLayout()public FlowLayout()

Constructs a new Constructs a new FlowLayoutFlowLayout with a default with a defaultcenter alignment and a default gap of five pixelscenter alignment and a default gap of five pixelsfor both horizontal and vertical.for both horizontal and vertical.

Example 8.5Testing the GridLayout Manager

The The GridLayoutGridLayout manager arranges components manager arranges componentsin a grid (matrix) formation with the number ofin a grid (matrix) formation with the number ofrows and columns defined by the constructor. rows and columns defined by the constructor. The components are placed in the grid from left The components are placed in the grid from left to right starting with the first row, then the to right starting with the first row, then the second, and so on. second, and so on.

ShowGridLayoutShowGridLayout RunRun

GridLayout Constructors public GridLayout(int rows,public GridLayout(int rows,

int columns)int columns)

Constructs a new Constructs a new GridLayoutGridLayout with the specified with the specified number of rows and columns.number of rows and columns.

public GridLayout(int rows, int columns, int hGap, public GridLayout(int rows, int columns, int hGap, int vGap)int vGap)

Constructs a new Constructs a new GridLayoutGridLayout with the with thespecified number of rows and columns,specified number of rows and columns,along with specified horizontal andalong with specified horizontal andvertical gaps between components.vertical gaps between components.

Example 8.6Testing the BorderLayout Manager

The The BorderLayoutBorderLayout manager divides the window manager divides the window into five areas: East, South, West, North, and into five areas: East, South, West, North, and Center. Components are added to a Center. Components are added to a BorderLayoutBorderLayout by byusing using add(String, Component)add(String, Component), where , where StringString is is "East""East", , "South""South", , "West""West", , "North""North", or , or "Center""Center"..

ShowBorderLayoutShowBorderLayout RunRun

Example 8.7Testing Panel Panels act as smaller containers for grouping Panels act as smaller containers for grouping

user interface components. user interface components.

It is recommended that you place the user It is recommended that you place the user interface components in panels and place the interface components in panels and place the panels in a frame. You can also place panels in panels in a frame. You can also place panels in a panel.a panel.

TestPanelsTestPanels RunRun

repaint(), update(),paint(), and paintCompoent()

The Java system automatically creates a The Java system automatically creates a default graphics context, an object of the default graphics context, an object of the GraphicsGraphics class, and passes it as a parameter to class, and passes it as a parameter to the the update()update(), , paint()paint(), and , and paintCompoent()paintCompoent() methods. This object is local to those methods, methods. This object is local to those methods, and it cannot be used outside of those and it cannot be used outside of those methods. methods.

Example 8.7Drawing on Panels

JPanel can be used be used to draw JPanel can be used be used to draw graphics (including text) and enable user graphics (including text) and enable user interaction. interaction.

RunRunPanelDrawingDemoPanelDrawingDemo

Colors

Color c = new Color(r, g, b);Color c = new Color(r, g, b);rr, , gg, and , and bb specify a color by its red, green, specify a color by its red, green, and blue components.and blue components.

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

Setting ColorsYou can use the following methods to set the component’s You can use the following methods to set the component’s background and foreground colors:background and foreground colors:

setBackground(Color c) setBackground(Color c)

setForeground(Color c)setForeground(Color c)

Example:Example:

setBackground(Color.yellow); setForeground(Color.red);setBackground(Color.yellow); setForeground(Color.red);

Graphics

Graphics Coordinate SystemGraphics Coordinate System FontFont and and FontMetricsFontMetrics Drawing LinesDrawing Lines Drawing RectanglesDrawing Rectangles Drawing OvalsDrawing Ovals Drawing ArcsDrawing Arcs Drawing PolygonsDrawing Polygons

Graphics Coordinate System

Fonts

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

Example:Example:Font myFont = new Font("TimesRoman", Font.BOLD, 16);Font myFont = new Font("TimesRoman", Font.BOLD, 16);Font myFont = new Font("Courier", Font.BOLD+Font.ITALIC, 12);Font myFont = new Font("Courier", Font.BOLD+Font.ITALIC, 12);

Font Examplepublic void paint(Graphics g)public void paint(Graphics g){{ Font myFont = new Font("Times", Font.BOLD, 16);Font myFont = new Font("Times", Font.BOLD, 16); g.setFont(myFont);g.setFont(myFont); g.drawString("Welcome to Java", 20, 40);g.drawString("Welcome to Java", 20, 40);

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

The FontMetrics Class

Get FontMetrics g.getFontMetrics(Font f);g.getFontMetrics(Font f);

oror g.getFontMetrics();g.getFontMetrics();

public int getAscent()public int getAscent()

public int getDescent()public int getDescent()

public int getLeading()public int getLeading()

public int getHeight()public int getHeight()

public int stringWidth(String str)public int stringWidth(String str)

Example 8.9Using FontMetrics

Objective: Display “Welcome to Java” in Objective: Display “Welcome to Java” in Helvetica 20-point bold, centered in the frame.Helvetica 20-point bold, centered in the frame.

TestFontMetricsTestFontMetrics

RunRun

Drawing Lines

drawLine(x1, y1, x2, y2);drawLine(x1, y1, x2, y2);

Drawing Rectangles drawRect(x, y, w, h);drawRect(x, y, w, h);

fillRect(x, y, w, h);fillRect(x, y, w, h);

Drawing Rounded Rectangles drawRoundRect(x, y, w, h, aw, ah);drawRoundRect(x, y, w, h, aw, ah);

fillRoundRect(x, y, w, h, aw, ah);fillRoundRect(x, y, w, h, aw, ah);

Drawing Ovals drawOval(x, y, w, h);drawOval(x, y, w, h);

fillOval(x, y, w, h);fillOval(x, y, w, h);

Drawing Arcs drawArc(x, y, w, h, angle1, angle2);drawArc(x, y, w, h, angle1, angle2); fillArc(x, y, w, h, angle1, angle2);fillArc(x, y, w, h, angle1, angle2);

Drawing Polygonsint x[] = {40, 70, 60, 45, 20};int x[] = {40, 70, 60, 45, 20};int y[] = {20, 40, 80, 45, 60};int y[] = {20, 40, 80, 45, 60};g.drawPolygon(x, y, x.length);g.drawPolygon(x, y, x.length);g.fillPolygon(x, y, x.length);g.fillPolygon(x, y, x.length);

Example 8.10Drawing a Clock

Objective: Use drawing and trigonometric Objective: Use drawing and trigonometric methods to draw a clock showing the specified methods to draw a clock showing the specified hour, minute, and second in a frame.hour, minute, and second in a frame.

DisplayClockDisplayClock

RunRun