6.09.1 Controlling the Canvas

Application -> Custom Canvas
Now that we can trigger events on the custom canvas, we may also want to build a way of controlling the custom canvas from the broader application. For this example, I am going to use a Choice component that allows you to choose a colour. When you choose the colour, all of the items in the custom canvas will change to that colour (red, green and blue). 

Figure 9.X Examples of the Custom Canvas with Control


The source code of the custom canvas needs to change slightly. I have renamed it to CustomCanvasControl and I have added in a method called setColor() that allows you to pass a Color object from the application to the canvas. Once you pass this Color object, the custom canvas redraws itself with the circles in their new colour. Everything else stays largely the same, except that I now have to share the Color object between the methods, so I have added a Color state called drawColor that allows the Color object to be shared between the setColor() method and the paint() method.

1234567891011121314151617181920212223242526272829303132333435363738394041424344
package ee402;

import java.awt.*;
import java.awt.event.*;
import java.util.*;

@SuppressWarnings("serial")
public class CustomCanvasControl extends Canvas implements MouseListener{

        int width, height;
        Color drawColor = Color.red;
        Vector<Point> points = new Vector<Point>(10);
        static int radius = 10;
        
        public CustomCanvasControl(int width, int height){
                this.setSize(width,height);
                this.width = width;
                this.height = height;
                this.addMouseListener(this);
                this.repaint();
        }
                
        public void paint(Graphics g){
                g.setColor(drawColor);
                for(int i=0; i<points.size(); i++){
                        Point p = points.elementAt(i);
                        g.drawOval(p.x, p.y, 2*radius, 2*radius);
                }
        }
        
        public void setColor(Color c){
                drawColor = c;
                this.repaint();
        }

        public void mouseClicked(MouseEvent e) {
                points.addElement(new Point(e.getX()-radius, e.getY()-radius));
                this.repaint();
        }
        public void mouseEntered(MouseEvent e) {}
        public void mouseExited(MouseEvent e) {}
        public void mousePressed(MouseEvent e) {}
        public void mouseReleased(MouseEvent e) {}
}

The source code of the application needs to change to include the Choice component. I have called this component colorChoice and set it as a state of the class, so that it can be shared between the constructor and the itemStateChanged() method.

This class now needs to implement the ItemListener interface as this is the way that we trap events that occur when you choose one of the colours in the Choice component. This requires us to write a method itemStateChanged() that is called when the chosen item changes. The Choice component is listening for events thanks to the line colorChoice.addItemListener(this) in the constructor.


123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
package ee402;

import java.awt.*;
import java.awt.event.*;

@SuppressWarnings("serial")
public class CanvasApplicationControl extends Frame implements WindowListener, ItemListener{
        
        private CustomCanvasControl canvas;
        private Choice colorChoice;
        
        public CanvasApplicationControl(){
                super("Canvas Mouse Application");
                this.canvas = new CustomCanvasControl(250,250);
                this.add(canvas, BorderLayout.CENTER);
                
                Panel south = new Panel(new FlowLayout());
                colorChoice = new Choice();
                colorChoice.addItem("Red");
                colorChoice.addItem("Green");
                colorChoice.addItem("Blue");
                south.add(colorChoice);
                colorChoice.addItemListener(this);
                this.add(south, BorderLayout.SOUTH);
                
                this.addWindowListener(this);
                this.pack();
                this.setVisible(true);
        }
        
        public void itemStateChanged(ItemEvent e) {
                if (e.getItem().equals("Red")) canvas.setColor(Color.red);
                else if (e.getItem().equals("Green")) canvas.setColor(Color.green);
                else canvas.setColor(Color.blue);
        }

        public void windowActivated(WindowEvent arg0) {}
        public void windowClosed(WindowEvent arg0) {}
        public void windowClosing(WindowEvent arg0) { System.exit(0); }
        public void windowDeactivated(WindowEvent arg0) {}
        public void windowDeiconified(WindowEvent arg0) {}
        public void windowIconified(WindowEvent arg0) {}
        public void windowOpened(WindowEvent arg0) {}

        public static void main(String[] args) {
                new CanvasApplicationControl();
        }
}
The important point here is that it is quite easy for us to call the setColor() method on our custom canvas, as our custom canvas is a-part-of our main application. We call this method in the itemStateChanged() method and the chosen colour is passed to the custom canvas.

That is the way that we have worked with components so far, and is no different than calling a method on an object after we have created it. 


These notes are copyright Dr. Derek Molloy, School of Electronic Engineering, Dublin City University, Ireland 2013-present. Please contact him directly before reproducing any of the content in any way.
ċ
CanvasApplicationControl.java
(1k)
Derek Molloy,
26 Nov 2013, 07:02
v.1
ċ
CustomCanvasControl.java
(1k)
Derek Molloy,
26 Nov 2013, 07:02
v.1
Comments