If workflows are complicated and consist of many layers it is necessary to use multiple views for the visualization and interaction.
In this tutorial we will cover an exciting feature: you will learn how to create multiple interactive views of a workflow.
Thanks For Your Feedback
Thanks for all your nice mails! As this project is related to VRL-Studio I encourage you to post ideas and comments on the VRL-Studio mailing list.
Here’s another video:
Creating Multiple Views
As in the last tutorial we use the
createFlow(VFlow workflow, int depth, int width) method to create a flow:
createFlow(flow, 3, 6);
Now we create second visualization of the root flow, i.e., an exact copy of the first visualization. We accompish this by assigning two skin factories to the flow controller:
// create first skin factory for flow visualization FXSkinFactory fXSkinFactory1 = new FXSkinFactory(canvas1.getContentPane()); // create skin factory for flow visualization FXSkinFactory fXSkinFactory2 = new FXSkinFactory(canvas2.getContentPane()); // generate the ui for the flow flow.setSkinFactories(fXSkinFactory1, fXSkinFactory2);
The result looks like this:
This video above demonstrates the views in action
This is not all. In addition to that it is possible to add visualizations to subflows! Just add a new skin factory to a subflow node:
// create another skin factory for flow visualization FXSkinFactory subFlowSkinFactory = new FXSkinFactory(canvas3.getContentPane()); // choose the first subflow node VFlow subflow = flow.getSubControllers().iterator().next(); // generate the ui for the flow flow.setSkinFactories(subFlowSkinFactory);
The program now looks like this:
Download the tutorial code from GitHub.
- Java 7 or a recent Java 8 preview build (>=b84)
- Optional: Netbeans >=7.3 with Gradle Plugin
Building & Running:
To run the application from the command line just type
Stay tuned and follow me on Twitter
To be continued…
Update: here is part 4