{"id":630,"date":"2013-05-24T17:14:17","date_gmt":"2013-05-24T15:14:17","guid":{"rendered":"https:\/\/mihosoft.eu\/?p=630"},"modified":"2013-07-08T23:42:34","modified_gmt":"2013-07-08T21:42:34","slug":"workflow-visualization-with-vworkflows-javafx-part-3","status":"publish","type":"post","link":"https:\/\/mihosoft.eu\/?p=630","title":{"rendered":"Workflow Visualization With VWorkflows &#038; JavaFX [Part 3]"},"content":{"rendered":"<p>In the <a href=\"https:\/\/mihosoft.eu\/?p=523\">first<\/a> and <a href=\"https:\/\/mihosoft.eu\/?p=564\">second<\/a> part of this tutorial we created nodes and complex flows and visualized them.<\/p>\n\n<p>If workflows are complicated and consist of many layers it is necessary to use multiple views for the visualization and interaction.<\/p>\n\n<h2>Overview<\/h2>\n\n<p>In this tutorial we will cover an exciting feature: you will learn how to create multiple interactive views of a workflow.<\/p>\n\n<h2>Thanks For Your Feedback<\/h2>\n\n<p>Thanks for all your nice mails! As this project is related to VRL-Studio I encourage you to post ideas and comments on the <a href=\"https:\/\/groups.google.com\/forum\/?fromgroups#!forum\/vrl-studio-users\">VRL-Studio mailing list<\/a>.<\/p>\n\n<h2>Demo<\/h2>\n\n<iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/DEhdJxGweQI\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n<p>Here&#8217;s another video:<\/p>\n\n<iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/peUilkiokqg\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n<h2>Creating Multiple Views<\/h2>\n\n<p>As in the <a href=\"https:\/\/mihosoft.eu\/?p=564\">last tutorial<\/a> we use the <code>createFlow(VFlow workflow, int depth, int width)<\/code> method to create a flow:<\/p>\n\n<pre><code>createFlow(flow, 3, 6);\n<\/code><\/pre>\n\n<div id=\"attachment_638\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-02.png\"><img aria-describedby=\"caption-attachment-638\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-02.png\" alt=\"Workflow (Width 6, Depth 3)\" width=\"1024\" height=\"495\" class=\"size-full wp-image-638\" srcset=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-02.png 1024w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-02-300x145.png 300w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-02-700x338.png 700w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-638\" class=\"wp-caption-text\">Workflow (Width 6, Depth 3)<\/p><\/div>\n\n<p>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:<\/p>\n\n<pre><code>    \/\/ create first skin factory for flow visualization\n    FXSkinFactory fXSkinFactory1 = new FXSkinFactory(canvas1.getContentPane());\n\n    \/\/ create skin factory for flow visualization\n    FXSkinFactory fXSkinFactory2 = new FXSkinFactory(canvas2.getContentPane());\n\n    \/\/ generate the ui for the flow\n    flow.setSkinFactories(fXSkinFactory1, fXSkinFactory2);\n<\/code><\/pre>\n\n<p>The result looks like this:<\/p>\n\n<div id=\"attachment_640\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-03.png\"><img aria-describedby=\"caption-attachment-640\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-03-1024x280.png\" alt=\"Multiple Views\" width=\"700\" height=\"191\" class=\"size-large wp-image-640\" srcset=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-03-1024x280.png 1024w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-03-300x82.png 300w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-03-700x191.png 700w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><p id=\"caption-attachment-640\" class=\"wp-caption-text\">Multiple Views<\/p><\/div>\n\n<p>This video above demonstrates the views in action<\/p>\n\n<p>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:<\/p>\n\n<pre><code>\/\/ create another skin factory for flow visualization\nFXSkinFactory subFlowSkinFactory = new FXSkinFactory(canvas3.getContentPane());\n\n\/\/ choose the first subflow node\nVFlow subflow = flow.getSubControllers().iterator().next();\n\n\/\/ generate the ui for the flow\nflow.setSkinFactories(subFlowSkinFactory);\n<\/code><\/pre>\n\n<p>The program now looks like this:<\/p>\n\n<div id=\"attachment_642\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04.png\"><img aria-describedby=\"caption-attachment-642\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04-1024x544.png\" alt=\"Multiple Views 2\" width=\"700\" height=\"371\" class=\"size-large wp-image-642\" srcset=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04-1024x544.png 1024w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04-300x159.png 300w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04-700x371.png 700w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><p id=\"caption-attachment-642\" class=\"wp-caption-text\">Multiple Views 2<\/p><\/div>\n\n<h2>Demo Application<\/h2>\n\n<p>Download the <a href=\"https:\/\/github.com\/miho\/VWorkflows-Tutorial-03\">tutorial code<\/a> from GitHub.<\/p>\n\n<h3>Requirements:<\/h3>\n\n<ul>\n<li>Java 7 or a recent Java 8 preview build (>=b84)<\/li>\n<li>Optional: Netbeans >=7.3 with Gradle Plugin<\/li>\n<\/ul>\n\n<h3>Building &amp; Running:<\/h3>\n\n<p>To run the application from the command line just type <code>.\/gradlew run<\/code>.<\/p>\n\n<p>Stay tuned and <a href=\"https:\/\/twitter.com\/intent\/user?screen_name=mihosoft\">follow me on Twitter<\/a><\/p>\n\n<p><strong>To be continued&#8230;<\/strong><\/p>\n\n<p><strong>Update:<\/strong> here is <a href=\"https:\/\/mihosoft.eu\/?p=730\">part 4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the first and second part of this tutorial we created nodes and complex flows and visualized them. If workflows are complicated and consist of many layers it is necessary to use multiple views for the visualization and interaction. Overview In this tutorial we will cover an exciting feature: you &#8230;<\/p>","protected":false},"author":1,"featured_media":642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[13,129,21,1,5],"tags":[57,62,22,124,51,63,125,61,56],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/05\/vworkflows-multiple-views-04.png","jetpack_shortlink":"https:\/\/wp.me\/p2P2yR-aa","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/630"}],"collection":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=630"}],"version-history":[{"count":16,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/630\/revisions\/849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/media\/642"}],"wp:attachment":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}