Performance problems with UI grid of rectangles

Question

Am looking for some help on how to program a specific user interface (UI). I need to create a large matrix (n x m) of rectangles, and give the user the ability to click and drag the mouse over them to select them. When a user clicks/drags over a rectangle, it should repaint itself a different color and store the fact that it was selected. Since the matrix is rather large, I want to put it in a JScrollPane so that the user can scroll over the entire matrix.
So far I have come up with two ways to do this, and one of them was horrendously slow. (It is unusable.) I would like some advice on how to do this to get the best UI performance so that I have a really slick and fast UI. The two methods I have tried are:
1. Create a new class called MyRectangle that extends java.awt.Rectangle. This is a pretty simple class that just adds a couple of instance vars to keep track of if it has been selected or not, and what color it should paint itself and its border. Next, I create a class called MyJPanel that extends JPanel. MyJPanel contains an (n x m) array of MyRectangles and overloads the paintComponent() method to paint them all on the panel. MyJPanel also implements the mouseListener(s) so it can tell when someone has pressed/clicked/ or dragged over it. When it receives a MouseEvent, it finds the correct MyRectangle (by comparing the point returned on MyJPanel), sets that MyRectangle's instance vars appropriately, and then calls UpdateUI().
Here is the problem with this design. That array of MyRectangles looks at least like this:
MyRectangle myRectangleArray[][] = new MyRectangle[50][200];
So, in the paintComponent() method of the MyJPanel, it has to iterate through the 50 * 200 rectangles in order to know how to paint each one on the screen. Not to mention the fact that at each one it has to do a comparision to determine how to set Graphics2D.setPaint( Color.XX ); for that specific rectangle. As mentioned, I have implemented this and it is EXCRUTIATINGLY SLOW. So, I moved on to....
2. Create a new class called MyJButton that extends javax.swing.JButton. MyJButton contains instance vars to note if it is selected or not, what its background color should be. MyJButton also implements the mouseListener(s) and handles all the MouseEvents themselves. Now, instead of having MyJPanel overload paintComponent() and handle all that myself, I just have it contain an (n x m) array of MyJButtons and just add them to the panel using a GridLayout. The problem here is that the mouseDragged event doesn't work quite the way I'd like. In order to implement mouseDragged, I have to create an interface and have each MyJButton callback to its container MyJPanel to tell it when / where the dragging started and stopped so that MyJPanel can update all the other MyJButtons. However, the performance seems to be much better and the user can click all over without causing the screen to lock up doing repaints.
Ok, here's my question. DOES ANYONE HAVE A BETTER WAY OF DOING THIS???
What I want is to present the user with an (n x m) matrix of rectangles (inside a scrollable pane). This matrix will be LARGE, like at least 50 x 200 and would prefer to go up to 70 x 500 or more. The size of each rectangle will need to be definable as the number of columns gets larger, I will need to make the size of the individual rectangles smaller. The user should be able to click and drag over these rectangles, and the program should store which row / column was selected, and should then paint those selected rectangles on the screen in a different (configurable) color.
Can anyone offer any help?
Don Osburn
[email protected]
[email protected]

Answer 1

using JTable is worth looking into, I did a quick test for speed purposes and this looks good if you do decide to go with a custom solution. Mouse processing shouldn't be too hard (the code for converting from user space to model space is in the paint method), but I can't figure out how to intercept mouse events properly (think this is done in the UI delegate or smt)
asjfimport javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class MatrixComponent extends JComponent {
   int rows, columns;
   int swidth, sheight;
   Dimension mySize;
   boolean [][] isSelected;
   Font myFont;
   public MatrixComponent(int rows, int columns, int w, int h) {
      this.rows = rows;
      this.columns = columns;
      this.swidth = w;
      this.sheight = h;
      this.mySize = new Dimension(columns*swidth,rows*sheight);
      this.isSelected = new boolean [columns][rows];
      this.myFont = new Font("Monotype",Font.PLAIN,8);
   public void paintComponent(Graphics g) {
      Rectangle clip = g.getClipBounds();
      int sx = clip.x/swidth;
      int ex = Math.min(1 + sx + clip.width/swidth, columns);
      int sy = clip.y/sheight;
      int ey = Math.min(1 + sy + clip.height/sheight, rows);
      g.setFont(myFont);
      for(int x=sx; x<ex; x++)
         for(int y=sy; y<ey; y++) {
            g.setColor(new Color(x*255/columns, y*255/rows, 100));
            g.drawRect(x*swidth,y*sheight,(swidth-1),(sheight-1));
            g.drawString(""+(x+y*columns),swidth/2+x*swidth,sheight/2+y*sheight);
   public Dimension getPreferredSize() {return mySize;}
   public Dimension getMaximumSize() {return mySize;}
   public Dimension getMinimumSize() {return mySize;}
   public static void main(String [] arg) throws Exception {
      JFrame frame = new JFrame("MatrixComponent");
      frame.getContentPane().add(new JScrollPane(new MatrixComponent(1000,1000,50,50)));
      frame.pack();
      frame.show();
}