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.
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!
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:
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:
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:
To create the JavaFX user interface as shown in the images simply create a
// 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);
Download the tutorial code from GitHub.
- Java 8
- Optional: Netbeans >=7.4 with Gradle Plugin
Building & Running:
To compile from the command line just type
./gradlew build. Run it with
Download VWorkflows and create your own flow visualization apps/controls.
Stay tuned and follow me on Twitter
To be continued…
Update: here is part 2