Binding UI representations of Data to Data in JavaFX

I’ve been playing with JavaFX, trying to figure out how to write applications which fetch a list from a database and represent them graphically.

For example, let’s say I’ve fetched a list of numbers from the database, and I wish to represent each number like so:

One data point

where the radius becomes bigger the bigger the number is.

There are three main steps remaining, once data has been fetched

1. Figure out how to represent a single data point – in this case, we can Group together a Circle and a piece of Text
2. Create a sequence of data point representations bound the original data
3. Lay them out on the page so that they aren’t all stacked on top of one another

The main idea here is to create a sequence of graphical nodes bound to the sequence of datum. I then lay them out using HBox layout on the Stage.

I present you the grand result:

Launch via Web Start

End Result

And an applet. (which wouldn’t seem to load)

javafx(
{
archive: “/wordpress/wp-content/uploads/bindsequence.jar”,
draggable: true,
width: 800,
height: 200,
code: “BindSequence”,
name: “BindSequence”
}
);

import javafx.scene.*;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.*;
// say, for example, this is the data fetched from db
var seq = [1 .. 7];
// each data point is represented as a
//    Circle
// and a piece of
//    Text
// centered in the circle.
//
var seq_representation = bind for (x in seq) {
    Group {
        content: [
            Circle {
                radius: 5*x
                onMouseClicked: function(e)
                {
                    insert (sizeof seq) + 1 into seq;
                }
            },
            Text {
                content: bind "{x}";
                y: 3 // hack. can't vertically align text
                textAlignment: TextAlignment.CENTER fill: Color.WHITE
            }
        ]
    }
}
Stage {
    title: "Binding to Sequences" width: 900 height: 600
    scene: Scene {
        content: HBox {
            content: bind seq_representation
            translateX: 50 translateY: 50 spacing: 10
        }
    }
}