Swarm of XeBees

In this post, you'll learn to create your custom renderer for a cell or a header of a table in JavaFx.

A table which is apparently a swing JTable wrapped in a node of JavaFx using SwingComponent class.

In the following application I'll not only use these renderers, but will also provide solution to the problems of spacing and sizing which inherently appears when you try to use JTable in ScrollPane.

The Output of the application would be.

.

.

.

.

.

.

The following TableRendererDemo.java class has been used here to create the table contents as shown in the figure above.

package tablerenderersdemo;

import java.awt.Dimension;
import javax.swing.JTable;
import javax.swing.table.DefaultTableModel;
import javax.swing.table.TableColumn;

public class TableRendererDemo {
    JTable table;
TableColumn tcol;

Public DefaultTableModel TableCreater(){
    String data[][] = {{"Karan", "JavaFx", "5"},
{"Saurabh", "<htmI><font color='green'><b>Android</b></font></htmI>", "6"},
{"Guneet", "Gigaspaces", "5"}, {"Richa", "Flex", "5"},{"Rajneesh", "Testing", "5"},
{"Paritosh", "<htmI><font color='red'>Java</font></htmI>", "5"}};
String col[] = {"Name", "Speciality", "Availability Floor"};
DefaultTableModel model = new DefaultTableModel(data, col);
return model;
}

public Dimension getTableDimensions() {
return new Dimension(450, 100);
}
}

And here are the two renderers files for cell and header styling respectively where we have overridden the implementation of  method getTableCellRendererComponent.

Implementation of CellRenderer:

<pre>
<pre>package tablerenderersdemo;

import java.awt.Color;
import java.awt.Component;
import javax.swing.JTable;
import javax.swing.table.DefaultTableCellRenderer;

/**
 * A custom implementation of DefaultTableCellRenderer
 *
 */
public class CellRenderer extends DefaultTableCellRenderer {

public CellRenderer() {
        super();
}
    @Override
    public Component getTableCellRendererComponent(JTable table,
            Object obj, boolean isSelected, boolean hasFocus, int row, int column) {
        Component cell = super.getTableCellRendererComponent(
                table, obj, isSelected, hasFocus, row, column);
        if (isSelected) {
            cell.setBackground(Color.green);
        } else {
            if (row % 2 == 0) {
                cell.setBackground(Color.cyan);
            } else {
                cell.setBackground(Color.blue);
            }
        }
        return cell;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    protected void setValue(Object value) {
        if (value == null) {
            value = "";
        }
        setText(value.toString());

    }
}

Implementation of HeaderRenderer:

package tablerenderersdemo;

import java.awt.Color;
import java.awt.Component;
.
.
public class HeaderRenderer extends JLabel implements TableCellRenderer {

public HeaderRenderer() {
        setOpaque(true);
        setForeground(UIManager.getColor("TableHeader.foreground"));
        setBackground(Color.lightGray);
        setBorder(UIManager.getBorder("TableHeader.cellBorder"));
    }

  @Override
    public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
        setText((String) value);
        setFont(new Font("sansserif", Font.BOLD, 14));
        return this;
    }

}</pre>

Now in our main class of the application which is Main.Fx, first we'll create a Java Swing JTable using DefaultTableModel and assign headerRenderer through the column model of the table and a cellRenderer to the desired column of the table by referring it through the index number of the table. We have also used the autoResizeMode to "JTable.AUTO_RESIZE_ALL_COLUMNS" so that When the width of a column is changed,  the widths of all other columns are changed  keeping the width of the entire table same. "setPreferredScrollableViewportSize" method ensures that there is no spacing left towards right of the table, leaving a gap between the table and the scrollpane.

Main.fx

import javafx.scene.Scene;
.
.

public class Main {
public static var scrollPane:JScrollPane;
public function TableRenderer(){
var tableRenderer:TableRendererDemo = new TableRendererDemo();
var model:DefaultTableModel = tableRenderer.TableCreater();
var jTable:JTable = new JTable(model);
var headerRenderer:HeaderRenderer = new HeaderRenderer();
var cellrenderer:CellRenderer = new CellRenderer();

for(i in  [0..jTable.getColumnModel().getColumnCount()-1 step 1]){
jTable.getColumnModel().getColumn(i).setHeaderRenderer(headerRenderer);
}

jTable.setAutoResizeMode(JTable.AUTO_RESIZE_ALL_COLUMNS);
var column:TableColumn  = jTable.getColumnModel().getColumn(2);
column.setCellRenderer(cellrenderer);
jTable.setPreferredScrollableViewportSize(tableRenderer.getTableDimensions());
scrollPane = new JScrollPane(jTable);
}

}

function run(){
var design = Main {};
design.TableRenderer();
var scrollView = ScrollView {
hbarPolicy: ScrollBarPolicy.NEVER;
vbarPolicy: ScrollBarPolicy.ALWAYS;
node: SwingComponent.wrap(design.scrollPane);
layoutInfo: LayoutInfo {
width: 450;
height: 120;
}
}

Stage {
title: "Table Rendering demo.."
scene: Scene {
width: 450; height: 120;
content: [scrollView];
}
}
}

Save and run this file , and/or change the renderers to add images/styles as per your requirement.

Filed under: HTML, JavaFX, UI