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 EventMethod 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 InterfaceMethod MouseListenermouseClicked mousePressed mouseReleased mouseEntered mouseExited MouseMotionListenermouseDragged mouseMoved

15. Adapter Classes InterfaceMethod MouseAdaptermouseClicked mousePressed mouseReleased mouseEntered mouseExited MouseMotionAdaptermouseDragged 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 shapes; public Panel5(Color backColor, Color foreColor){ setBackground(backColor); this.foreColor = foreColor; x = 0; y = 0; width = 0; height = 0; shapes = new ArrayList (); 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)