1. Computer Science 209
Graphics and GUIs

2. 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)

3. Example: Label and Text Field
public 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); }

4. 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)

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

6. Example: An Empty Panel
import 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.

7. Example: An Empty Panel
import 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.

8. Example: Draw a Shape
import 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.

9. Painting the Shape public 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);

10. 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()

11. Example: Adjust the Shape’s Position
import 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

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

13. Responding to Mouse Events
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)

14. Interfaces Interface Method MouseListener mouseClicked mousePressed
mouseReleased
mouseEntered
mouseExited
MouseMotionListener
mouseDragged
mouseMoved

15. Adapter Classes Interface Method MouseAdapter mouseClicked
mousePressed
mouseReleased
mouseEntered
mouseExited
MouseMotionAdapter
mouseDragged
mouseMoved

16. 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){}
});

17. Example: Positioning and Sizing
public 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

18. 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();

19. Example: Multiple Shapes
import 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()); }

20. 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();

21. 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)

22. Numeric I/O and error recovery
For Monday
Numeric I/O and error recovery