Computer Science 209

Graphics and GUIs

Working with Color

• The class java.awt.Color includes constants for typical color values and also supports the RGB set of colors

• Each component has a foreground and background color (methods setForeground and setBackground can change the defaults)

Example: Label and Text Fieldpublic class ColorView extends JFrame{

public ColorView(){ setTitle("Color Example"); JLabel label = new JLabel("A label"); label.setForeground(Color.red); JTextField field = new JTextField("Some text"); field.setForeground(Color.blue); Container c = getContentPane(); c.add(label, BorderLayout.NORTH); c.add(field, BorderLayout.SOUTH); }

}

Graphical Elements in GUIs

• A view consists of controls for users (buttons, menu items, etc.) and areas to display a model (text fields, list boxes, etc.)

• A model can be displayed as a set of graphical images

• A controller can respond to various mouse events in a graphical area (clicks, movements, drags)

Representing a Graphical Area

• We could draw images in the frame’s visible rectangular area, but they might collide with other controls in the frame

• Add panels to the frame and draw in them

• A panel is an empty rectangular area

Example: An Empty Panelimport javax.swing.*;import java.awt.*;

public class MainView extends JFrame{

public MainView(){ setTitle("Simple Drawing"); JPanel panel = new Panel1(Color.pink); Container c = getContentPane(); c.add(panel, BorderLayout.CENTER); } }

The frame instantiates the panel and adds it to its content pane.

Example: An Empty Panelimport javax.swing.*;import java.awt.*;

public class Panel1 extends JPanel{ public Panel1(Color backColor){ setBackground(backColor); }}

The panel sets its attributes, such as the background color.

Example: Draw a Shapeimport javax.swing.*;import java.awt.*;

public class MainView extends JFrame{

public MainView(){ setTitle("Simple Drawing"); JPanel panel = new Panel2(Color.pink, Color.blue); Container c = getContentPane(); c.add(panel, BorderLayout.CENTER); } }

Pass the background and foreground colors to the panel.

Painting the Shapepublic class Panel2 extends JPanel{

private Color foreColor;

public Panel2(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; }

public void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(foreColor); g.fillOval(10, 10, getWidth() / 2, getHeight() / 2); }}

Responsibilities of Methods

• The panel’s constructor sets up its state, including its background color

• The method paintComponent is triggered at startup and whenever the user modifies the window (resize, etc.)

• paintComponent is also run when the programmer calls repaint()

Example: Adjust the Shape’s Positionimport javax.swing.*;import java.awt.*;import java.awt.event.*;

public class Panel3 extends JPanel{

private Color foreColor; private int x, y;

public Panel3(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; x = 10; y = 10; addMouseListener(new PositionListener()); }

The position (x, y) changes in response to a mouse press in the panel

Example: Position the Shape public void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(foreColor); g.fillOval(x, y, getWidth() / 2, getHeight() / 2); }

private class PositionListener extends MouseAdapter{ public void mousePressed(MouseEvent e){ x = e.getX(); y = e.getY(); repaint(); } }

The MouseAdapter class implements the MouseListener interface by defining method stubs

Responding to Mouse Events

Event Method

Click mouseClicked(MouseEvent e)

Press mousePressed(MouseEvent e)

Release mouseReleased(MouseEvent e)

Drag mouseDragged(MouseEvent e)

Move mouseMoved(MouseEvent e)

Enter mouseEntered(MouseEvent e)

Exit mouseExited(MouseEvent e)

Interfaces

Interface MethodMouseListener mouseClicked

mousePressed

mouseReleased

mouseEntered

mouseExited

MouseMotionListener mouseDragged

mouseMoved

Adapter Classes

Interface MethodMouseAdapter mouseClicked

mousePressed

mouseReleased

mouseEntered

mouseExited

MouseMotionAdapter mouseDragged

mouseMoved

Using an Anonymous Class public Panel3(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; x = 10; y = 10; addMouseListener(new MouseListener(){ public void mousePressed(MouseEvent e){ x = e.getX(); y = e.getY(); repaint(); } public void mouseReleased(MouseEvent e){} public void mouseClicked(MouseEvent e){} public void mouseEntered(MouseEvent e){} public void mouseExited(MouseEvent e){} }); }

Example: Positioning and Sizingpublic class Panel4 extends JPanel{

private Color foreColor; private int x, y, width, height;

public Panel4(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; x = 0; y = 0; width = 0; height = 0; addMouseListener(new PositionListener()); }

Allow the user to specify the position and the dimensions of the oval with a mouse press, drag, and release

Example: Positioning and Sizing public void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(foreColor); g.fillOval(x, y, width, height); }

private class PositionListener extends MouseAdapter{ public void mousePressed(MouseEvent e){ x = e.getX(); y = e.getY(); }

public void mouseReleased(MouseEvent e){ width = e.getX() – x; height = e.getY() – y; repaint(); } }

Example: Multiple Shapesimport javax.swing.*;import java.awt.*;import java.awt.event.*;import java.util.*;import java.awt.geom.*;

public class Panel5 extends JPanel{

private Color foreColor; private int x, y, width, height; private java.util.List<Shape> shapes;

public Panel5(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; x = 0; y = 0; width = 0; height = 0; shapes = new ArrayList<Shape>(); addMouseListener(new PositionListener()); }

Example: Multiple Shapes public void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(foreColor); for (Shape s : shapes) ((Graphics2D)g).fill(s); }

private class PositionListener extends MouseAdapter{ public void mousePressed(MouseEvent e){ x = e.getX(); y = e.getY(); }

public void mouseReleased(MouseEvent e){ width = e.getX() – x; height = e.getY() – y; shapes.add(new Ellipse2D.Double(x, y, width, height)); repaint(); } }

Panels and Data Models

• Maintain a data model entirely within the panel, as in the shape drawing application

• Or send the model to the panel to draw it

• The model must provide some information about its visual representation (position and size or perhaps a shape or an image)