In this tutorial we want to take a deeper look at cell rendering. In the last tutorials we already implemented GridCellRenderer and set them as default renderer to the JGrid. This is exactly the same behavior as renderer in a JList. But if you have different data types in a grid only one renderer won´t fulfill the requirements. For this purpose you can add different GridCellRenderer to the JGrid. Like in a JTable you can add renderers for different data classes to the JGrid.

Let´s say we have colors and percentages in our model:

DefaultListModel model = new DefaultListModel();
Random random = new Random();
for(int i=0; i if(random.nextBoolean()) {
model.addElement(new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256)));
} else {
model.addElement(new Float(random.nextFloat()));
}
}
grid.setModel(model);

To visualize the color values we can use the renderer from the previous tutorial. For the new percentage values we need a different renderer:

public class GridPercentCellRenderer extends JLabel implements GridCellRenderer {
private static final long serialVersionUID = 1L;
private float f = 0.0f;

public GridPercentCellRenderer() {
setHorizontalAlignment(SwingConstants.CENTER);
setBackground(Color.white);
setForeground(Color.black);
}

@Override
public Component getGridCellRendererComponent(JGrid grid, Object value, int index, boolean isSelected, boolean cellHasFocus) {
if(value != null && value instanceof Float) {
this.f = ((Float) value).floatValue();
setText(NumberFormat.getPercentInstance().format(f));
}
return this;
}

@Override
protected void paintComponent(Graphics g) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(Color.LIGHT_GRAY);
int height = (int)((float)getHeight() * f);
g.fillRect(0, getHeight() - height, getWidth(), height);
super.paintComponent(g);
}
}

Until now all tutorials used the setDefaultRenderer(…) methode to set a special design to the grid. Just now we have a problem using this practice: we need renderers for different data types. In the JGrid this is as simple as in the JTable.

Here we go:

grid.getCellRendererManager().addRendererMapping(Color.class, new GridColorCellRenderer());
grid.getCellRendererManager().addRendererMapping(Float.class, new GridPercentCellRenderer());

Here you can see the effect:

You can download the source file here.

In this tutorial we want to add zoom functionality to the JGrid. You can set the dimension of the grid cells be the property “fixedCellDimension”. Here is a example for two different dimensions:

dimension = 32 px

dimension = 64 px

To add a zoom functionality to the grid you can set the dimension by using a JSlider. Here is the code:

<br />
final JSlider slider = new JSlider(32, 256);<br />
slider.setValue(grid.getFixedCellDimension());<br />
slider.addChangeListener(new ChangeListener() {<br />
@Override<br />
public void stateChanged(ChangeEvent arg0) {<br />
grid.setFixedCellDimension(slider.getValue());<br />
}<br />
});<br />

Now you can edit the dimension dynamically. Here is the result:
http://www.youtube.com/watch?v=Zyqf-P2ftFs&feature=youtube_gdata_player
You can download the source file here.

In this tutorial I will show you how to visualize more complex data with renderers. First we have to create a data model. For this tutorial we will work with the java.awt.Color-class and create a ListModel with some colors in it:

DefaultListModel model = new DefaultListModel();
Random random = new Random();
for(int i=0; i <= 100; i++) {
model.addElement(new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256)));
}
grid.setModel(model);

After assigning this model to the JGrid the result will look like this:

The JGrid uses a default renderer to visualize data. This renderer based on a JLabel and displays the toString() results from the given data. Therefore you see these “java.awt.Color…” strings in the grid cells.

Zo visualize the colors inside the grid we need a new renderer. All renderers for the JGrid must implement the interface GridCellRenderer. Here is the code for a simple renderer for colors:

public class GridColorCellRenderer extends JPanel implements GridCellRenderer {
private static final long serialVersionUID = 1L;

@Override
public Component getGridCellRendererComponent(JGrid grid, Object value, int index, boolean isSelected, boolean cellHasFocus) {
if(value != null && value instanceof Color) {
this.setBackground((Color) value);
}
return this;
}
}

Now we have to assign the renderer to the JGrid. Here is a different to the default JList or JTable behavior. The renderer for JGrid are stored in a special handler. You can refer to this handler by grid.getCellRendererManager() / grid.setCellRendererManager(). By using this handlers you can manage the same renderers for different grids (On a later JGrid release I will add SPI support to the handlers).

To add the custom renderer to your grid you have to add it to the handler:

grid.getCellRendererManager().setDefaultRenderer(new GridColorCellRenderer());

Now our application shows the right colors inside the grid cells:

You can download the source file for this tutorial here.

After we created a simple JGrid (see tutorial #1) we want to modify the look now. The JGrid has a lot of getter/setter to change the visualization of the grid. Read the JavaDoc for a complete overview of all properties.
Here is an example of changing colors and dimensions:

grid.setFont(grid.getFont().deriveFont(40.0f));
grid.setFixedCellDimension(56);
grid.setHorizonztalMargin(4);
grid.setVerticalMargin(4);
grid.setHorizontalAlignment(SwingConstants.LEFT);
grid.setBackground(Color.WHITE);
grid.setSelectionBorderColor(Color.BLUE);
grid.setSelectionBackground(Color.CYAN);
grid.setCellBackground(Color.LIGHT_GRAY);

After setting all properties the grid looks like this:

You can download the sources for the tutorial here.