JavaFX is ideal for creating interactive visualizations. We currently migrate the user interface of VRL-Studio to JavaFX. Therefore, I started a project that allows to visualize interactive workflows/graphs with JavaFX & JFXtras. In this article I’d like to give an introduction to the first draft of the library VWorkflows.

Demo:

UPDATE [23.05.2014]: This tutorial has been updated to work with recent versions of VWorkflows.

VWorkflows Needs Your Contributions!

Are you interested in creating flow visualizations with JavaFX? Currently, the library is in an early state. So this is ideal for contributing ideas on how the library should be designed. We’d love to integrate your contributions. Feel free to contact us!

Tutorial 01

Here comes the first tutorial/demo:

Creating a Flow

To create a flow, simply call the static factory method:

// create a flow controller
VFlow flow = FlowFactory.newFlow();

You can easily add nodes to the flow:

// add nodes to the flow
VNode n1 = flow.newNode();
VNode n2 = flow.newNode();

The result would look like this:

VWorkflows Nodes

To allow connections between the nodes simply add the corresponding input/output capabilities:

// allow incoming connections of type "data"
n1.addInput("data");
// allow outgoing connections of type "data"
n1.addOutput("data");

After doing the same with node ‘n2’ the flow looks like this:

VWorkflows Nodes With Connectors

The user can create connections via drag & drop. Of course, the api can do this as well:

// add `data` connection between `n1` and `n2`
flow.connect(n1, n2, "data")

This is how that will look like:

Connected Nodes

To create the JavaFX user interface as shown in the images simply create a FXSkinFactory object:

// create skin factory for flow visualization and add it as child of parentContainer
FXSkinFactory fXSkinFactory = new FXSkinFactory(parentContainer);

// generate the ui for the flow
flow.setSkinFactory(fXSkinFactory);