GUI Tutorial Day 4

1. GUI Tutorial Day 4

2. More GUI action • adding a Mouse Listener • SimpleDots • Simple mouse listener • Draw an oval where the mouse is clicked • Box example • Get coordinates of mouse click • Determine if mouse click is within a rectangle

3. Mouse Listener Interface with five methods: • public void mouseClicked (MouseEvent event) • public void mouseReleased (MouseEvent event) • public void mouseEntered (MouseEvent event) • public void mouseExited (MouseEvent event) • public void mousePressed (MouseEvent event)

4. Start with a JFrame public class SimpleDots { public static void main (String[] args) { JFrame frame = new JFrame ("Dots"); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); frame.getContentPane().add (new DotsPanel()); frame.setSize(200, 200); frame.setVisible(true); } }

5. Panel with paintComponent public class DotsPanel extends JPanel { private ArrayList<Point> points; public final int WIDTH = 10; public final int HEIGHT = 10; public DotsPanel() { points = new ArrayList<Point>(); setBackground (Color.black); // BACKGROUND COLOR addMouseListener(new DotsListener()); // ADD LISTENER TO PANEL } public void paintComponent(Graphics g) { super.paintComponent(g); g.setColor(Color.cyan); // draws every point for (Point p : points) { g.fillOval(p.x, p.y, WIDTH, HEIGHT); } }

6. Add the mouse listener private class DotsListener implements MouseListener { public void mousePressed (MouseEvent event) { // update the list of points points.add(event.getPoint()); repaint(); // MUST CALL REPAINT } // Empty definitions for unused event methods. public void mouseClicked (MouseEvent event) {} public void mouseReleased (MouseEvent event) {} public void mouseEntered (MouseEvent event) {} public void mouseExited (MouseEvent event) {} }

7. Where did I click? • MouseClicker example shows: • Another JFrame option (variable, no Extends) • Accessing x/y coordinates of click • We will also see: • Another listener option (JPanel implements listener) • Create random colors using RGB • Determine what object was clicked

8. An object to draw: instance variables public class ABox { // constants to control drawing public static final int BOX_WIDTH = 100; public static final int BOX_HEIGHT = 200; public static final int BOX_MARGIN = 10; // id is automatically assigned, use a static variable to keep track private static int nextId = 1; // instance variables private Color color; private int id; // Store location to test mouse click private int x, y;

9. Construct box and pick a color public ABox(int x, int y) { this.x = x; this.y = y; setRandomColor(); id = nextId; nextId++; } private void setRandomColor() { Random rand = new Random(); int red = rand.nextInt(256); int blue = rand.nextInt(256); int green = rand.nextInt(256); color = new Color(red, green, blue); } To read more about color in general: http://www.worqx.com/color/color_systems.htm

10. Draw the box, determine if clicked public void draw(Graphics g) { g.setColor(color); g.fillRect(x, y, BOX_WIDTH, BOX_HEIGHT); g.setColor(Color.BLACK); g.drawString("Id-"+id, x+BOX_MARGIN, y+BOX_MARGIN); } public boolean containsClick(int mouseX, int mouseY) { Rectangle rect = new Rectangle(x, y, BOX_WIDTH, BOX_HEIGHT); if (rect.contains(new Point(mouseX, mouseY))) return true; return false; } public Color getColor() { return color; } }

11. Construct a panel public class MouseClickerPanel extends JPanel implements MouseListener { public final int BOXES_PER_ROW = 3; // constants to control drawing public final int MARGIN = 10; private ArrayList<ABox> boxes; // boxes to draw public MouseClickerPanel(int numBoxes) { createBoxes(numBoxes); // Determine panel size based on box and margin values int width = BOXES_PER_ROW*ABox.BOX_WIDTH + (MARGIN*2); int numRows = numBoxes / BOXES_PER_ROW + 1; int height = numRows * ABox.BOX_HEIGHT; setPreferredSize(new Dimension(width, height)); // Set up this panel (i.e., myself) to listen for mouse clicks addMouseListener(this); }

12. Create boxes and display private void createBoxes(int numBoxes) { boxes = new ArrayList<ABox>(); for (int i=0; i<numBoxes; i++) { int x = (MARGIN + ABox.BOX_WIDTH) * (i%BOXES_PER_ROW); int row = i/BOXES_PER_ROW; int y = row * (MARGIN + ABox.BOX_HEIGHT); boxes.add(new ABox(x, y)); } } public void paintComponent(Graphics g) { // Always remember to call super.paintComponent super.paintComponent(g); for (int i=0; i<boxes.size(); ++i) { // We send the Graphics object for the panel into the draw function boxes.get(i).draw(g); } }

13. Handle mouse clicks public void mouseClicked(MouseEvent e) {} public void mouseEntered(MouseEvent e) {} public void mouseExited(MouseEvent e) {} public void mouseReleased(MouseEvent e) {} public void mousePressed(MouseEvent e) { ABox whichBox = null; for (int i=0; i<boxes.size(); i++) { if (boxes.get(i).containsClick(e.getX(), e.getY())) { whichBox = boxes.get(i); break; } } // display some information just to show whether a box was clicked if (whichBox != null) System.out.println(whichBox.getColor()); else System.out.println("Not a box!"); } }

14. Now a JFrame public class MouseClickerMain { public static void main(String[] args) { // Notice we create a JFrame JFrame frame = new JFrame("Mouse Click Example"); MouseClickerPanel panel = new MouseClickerPanel(5); // Add the panel to the JFrame frame.setContentPane(panel); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Pack will determine size based on components frame.pack(); frame.setVisible(true); } }