{"id":730,"date":"2013-07-09T00:02:42","date_gmt":"2013-07-08T22:02:42","guid":{"rendered":"https:\/\/mihosoft.eu\/?p=730"},"modified":"2015-04-20T10:17:58","modified_gmt":"2015-04-20T08:17:58","slug":"part-4-vworkflows-multiple-inputsoutputs","status":"publish","type":"post","link":"https:\/\/mihosoft.eu\/?p=730","title":{"rendered":"[Part 4] VWorkflows &#038; Multiple Inputs\/Outputs"},"content":{"rendered":"<iframe loading=\"lazy\" width=\"320\" height=\"240\" src=\"\/\/www.youtube.com\/embed\/4dqc1is5NNw\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n<blockquote>\n  <p><strong>UPDATE [23.05.2014]:<\/strong> This tutorial has been updated to work with recent versions of VWorkflows.<\/p>\n<\/blockquote>\n\n<p>In the last three parts of the tutorial VWorkflows did only handle one input\/output per node. However, for many use cases it is necessary to handle multiple connectors per node (see <a href=\"https:\/\/github.com\/miho\/VWorkflows\/issues\/3\">Issue 3<\/a>). This tutorial is shows lots of <strong>amazing features<\/strong>!<\/p>\n\n<h2>Feedback<\/h2>\n\n<p>Thanks for your motivating feedback!<\/p>\n\n<p>For those of you who have asked me about custom node content: I&#8217;m working on a tutorial. <strong>Stay tuned!<\/strong> &amp; <a href=\"https:\/\/twitter.com\/intent\/user?screen_name=mihosoft\">follow me on Twitter<\/a>.<\/p>\n\n<p>If you&#8217;d like to contribute or if you want to ask questions about <a href=\"http:\/\/vrl-studio.mihosoft.eu\">VRL<\/a>, <a href=\"https:\/\/github.com\/miho\/VWorkflows\">VWorkflows<\/a> and other related projects join the Developer &amp; User groups:<\/p>\n\n<ul>\n<li>Developer Group: <a href=\"https:\/\/groups.google.com\/forum\/#!forum\/vrl-developers\">https:\/\/groups.google.com\/forum\/#!forum\/vrl-developers<\/a><\/li>\n<li>User Group: <a href=\"https:\/\/groups.google.com\/forum\/#!forum\/vrl-studio-users\">https:\/\/groups.google.com\/forum\/#!forum\/vrl-studio-users<\/a><\/li>\n<\/ul>\n\n<h2>UI Improvements<\/h2>\n\n<p>The JavaFX based UI has been heavily improved. It makes use of the new multi-connector API (see below).<\/p>\n\n<h3>Multiple Connectors<\/h3>\n\n<ul>\n<li><strong>multiple connectors per node:<\/strong> each node can have an arbitrary number of input and output connectors<\/li>\n<\/ul>\n\n<div id=\"attachment_763\" style=\"width: 401px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-22.12.31.png\"><img aria-describedby=\"caption-attachment-763\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-763\" alt=\"Multiple Connectors 01\" src=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-22.12.31.png\" width=\"391\" height=\"296\" srcset=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-22.12.31.png 391w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-22.12.31-300x227.png 300w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/a><p id=\"caption-attachment-763\" class=\"wp-caption-text\">Multiple Connectors 01<\/p><\/div>\n\n<ul>\n<li><strong>dynamic connector size:<\/strong> connector size changes dynamically (depending on node size and the number of connectors)\n<iframe style=\"max-width: 320; max-height: 240;\" src=\"\/\/www.youtube.com\/embed\/w1AbFzEwCkg\" frameborder=\"0\" allowfullscreen><\/iframe><\/li>\n<\/ul>\n\n<h3>Usability Improvements<\/h3>\n\n<ul>\n<li><p><strong>improved compatibility visualization:<\/strong> connections indicate if they are compatible, i.e., if the connection the user is trying to establish will be accepted\n<iframe max-width=\"320\" max-height=\"240\" src=\"\/\/www.youtube.com\/embed\/5Bss1GLJ_hI\" frameborder=\"0\" allowfullscreen><\/iframe><\/p><\/li>\n<li><p><strong>subflow icon:<\/strong> flows have a new icon that allows to create subviews, i.e., a window that shows the flow content in a separate window. this feature is great to interactively change complex workflows\n<iframe max-width=\"320\" max-height=\"240\" src=\"\/\/www.youtube.com\/embed\/QWHScfMgUpU\" frameborder=\"0\" allowfullscreen><\/iframe><\/p><\/li>\n<\/ul>\n\n<h2>New Multi-Connector API<\/h2>\n\n<p>To be able to handle complex workflows\/graphs the model has been extended to allow the definition of arbitrary many inputs and outputs. Instead of the previous<\/p>\n\n<pre><code>n.addInput(\"type\");\nn.addOutput(\"type\");\n<\/code><\/pre>\n\n<p>connectors are now added by calling<\/p>\n\n<pre><code>Connector c1 = n.addInput(\"type1\");\nConnector c2 = n.addOutput(\"type1\");\n\n\/\/ adding a second input&amp;output\nConnector c3 = n.addInput(\"type2\");\nConnector c4 = n.addOutput(\"type2\");\n<\/code><\/pre>\n\n<p>This is how the node will look like:<\/p>\n\n<div id=\"attachment_775\" style=\"width: 388px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-23.16.09.png\"><img aria-describedby=\"caption-attachment-775\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-23.16.09.png\" alt=\"Defining Multiple Connectors\" width=\"378\" height=\"273\" class=\"size-full wp-image-775\" srcset=\"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-23.16.09.png 378w, https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-23.16.09-300x216.png 300w\" sizes=\"(max-width: 378px) 100vw, 378px\" \/><\/a><p id=\"caption-attachment-775\" class=\"wp-caption-text\">Defining Multiple Connectors<\/p><\/div>\n\n<p>As you can see there is a new <code>Connector<\/code> interface. A connector knows its type, keeps a reference to the node it belongs to and has an id:<\/p>\n\n<pre><code>\/\/ returns the node this connector belongs to\nc1.getNode();\n\n\/\/ returns the global connector id (unique per flow)\nc1.getId();\n\n\/\/ returns the local connector id (id is unique per node)\nc1.getLocalId()\n\n\/\/ returns the type of the connector\nc1.getType()\n<\/code><\/pre>\n\n<p>The API for connecting nodes has been extended. Here is an example (we assume flow and nodes n1 and n2 have been created):<\/p>\n\n<pre><code>\/\/ adding output to n1\nConnector c1 = n1.addOutput(\"type\");\n\n\/\/ adding input to n2\nConnector c2 = n2.addInput(\"type\");\n\n\/\/ creating connection between n1 and n2\nConnection connection = flow.connect(c1,c2)\n<\/code><\/pre>\n\n<p>In addition each node can have one main input and output per type. This allows to directly connect two nodes without the need to explicitly specify the connectors. The UI can use this to resemble the previous connection behavior (before the multi in\/out implementation).<\/p>\n\n<h2>Demo application<\/h2>\n\n<p>Download the tutorial code from <a href=\"https:\/\/github.com\/miho\/VWorkflows-Tutorial-04\">GitHub<\/a><\/p>\n\n<h2>Requirements:<\/h2>\n\n<ul>\n<li>Java 8<\/li>\n<li>Optional: Netbeans >=7.4 with Gradle Plugin<\/li>\n<\/ul>\n\n<h2>Building &amp; Running:<\/h2>\n\n<p>To compile from the command line just type <code>.\/gradlew build<\/code>. Run it with <code>.\/gradlew run<\/code>.<\/p>\n\n<h2>Next steps<\/h2>\n\n<p>Download <a href=\"https:\/\/github.com\/miho\/VWorkflows\">VWorkflows<\/a> and create your own flow visualization apps\/controls.<\/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=827\">part 5<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE [23.05.2014]: This tutorial has been updated to work with recent versions of VWorkflows. In the last three parts of the tutorial VWorkflows did only handle one input\/output per node. However, for many use cases it is necessary to handle multiple connectors per node (see Issue 3). This tutorial is &#8230;<\/p>","protected":false},"author":1,"featured_media":785,"comment_status":"closed","ping_status":"closed","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,5],"tags":[57,124,54,51,63,125,24,61,53,27,55,56],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/mihosoft.eu\/wp-content\/uploads\/2013\/07\/Bildschirmfoto-2013-07-08-um-23.50.28.png","jetpack_shortlink":"https:\/\/wp.me\/p2P2yR-bM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/730"}],"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=730"}],"version-history":[{"count":59,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":1069,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/posts\/730\/revisions\/1069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=\/wp\/v2\/media\/785"}],"wp:attachment":[{"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mihosoft.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}