flowchart integrated

git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube;C33157

diff --git a/server/user.mediacube.gui/js/processVisualizer.js b/server/user.mediacube.gui/js/processVisualizer.js
index e0630fe4e09dc9a090f6652855add4949118966b..835bab855adf8b2bb0c6ff2bc35cac9cb38cee9e 100644 (file)
--- a/server/user.mediacube.gui/js/processVisualizer.js
+++ b/server/user.mediacube.gui/js/processVisualizer.js
@@ -1,4 +1,5 @@
 \r
+/*\r
 var defaultFlowchartData = {\r
        operators: {\r
                operator1: {\r
@@ -40,14 +41,15 @@ var defaultFlowchartData = {
                },\r
        }\r
 };\r
+*/\r
 \r
-var otherFlowchartData = {\r
+var defaultFlowchartData = {\r
        operators: {\r
                operator1: {\r
                        top: 20,\r
                        left: 20,\r
                        properties: {\r
-                               title: 'Operator 3',\r
+                               title: 'Operator 1',\r
                                inputs: {},\r
                                outputs: {\r
                                        output_1: {\r
@@ -56,49 +58,28 @@ var otherFlowchartData = {
                                }\r
                        }\r
                },\r
-               operator2: {\r
-                       top: 80,\r
-                       left: 300,\r
-                       properties: {\r
-                               title: 'Operator 4',\r
-                               inputs: {\r
-                                       input_1: {\r
-                                               label: 'Input 1',\r
-                                       },\r
-                                       input_2: {\r
-                                               label: 'Input 2',\r
-                                       },\r
-                               },\r
-                               outputs: {}\r
-                       }\r
-               },\r
-       },\r
-       links: {\r
-               link_1: {\r
-                       fromOperator: 'operator1',\r
-                       fromConnector: 'output_1',\r
-                       toOperator: 'operator2',\r
-                       toConnector: 'input_2',\r
-               },\r
        }\r
 };\r
 \r
+var flowChartWidget = null;\r
+\r
 $(document).ready(function() {\r
        var $flowchart = $('#flowchartworkspace');\r
 \r
        // Apply the plugin on a standard, empty div...\r
-       var widget = $flowchart.flowchart({             \r
+       flowChartWidget = $flowchart.flowchart({                \r
                data: defaultFlowchartData,\r
                defaultSelectedLinkColor: '#000055',\r
                grid: 10,\r
                multipleLinksOnInput: true,\r
                multipleLinksOnOutput: true\r
        });     \r
-       \r
-       setTimeout(() => {\r
-               console.log("Changing data", widget.flowchart);\r
-               widget.flowchart("setData", otherFlowchartData); \r
-               \r
-       }, 500);        \r
 });\r
 \r
+function setFlowchartData(data) {\r
+       console.log("Changing data", data);\r
+       //var x = {operators: { operator1 : { properties: { title: 'Operator X' }       }}};\r
+       flowChartWidget.flowchart("setData", data);             \r
+}\r
+\r
+\r

diff --git a/server/user.mediacube.gui/pages/processVisualizer.zul b/server/user.mediacube.gui/pages/processVisualizer.zul
index 81e29229212f55299bd5e2d09419b752887e9f37..19977f28e7e1b92e98837a6f83835c8f354c5e92 100644 (file)
--- a/server/user.mediacube.gui/pages/processVisualizer.zul
+++ b/server/user.mediacube.gui/pages/processVisualizer.zul
@@ -4,9 +4,12 @@
        <style src="/css/jquery.flowchart.css" />\r
        <h:script src="/js/jquery-ui.js" />\r
        <h:script src="/js/jquery.flowchart.js" />\r
-       <script src="/js/processVisualizer.js?v=7" />\r
-       \r
-       <h:div id="chart_container">\r
-               <h:div class="flowchart-example-container" id="flowchartworkspace" />\r
-       </h:div>\r
+       <script src="/js/processVisualizer.js?v=16" />\r
+       <div viewModel="@id('jlm') @init('user.jobengine.zk.model.JobFlowChartModel')">\r
+               <h:div id="chart_container">\r
+                       <h:div class="flowchart-example-container" id="flowchartworkspace" />\r
+               </h:div>\r
+                               <button id="loadChartButton" label="Load chart" onClick="@command('loadChart')" />\r
+               \r
+       </div>\r
 </zk>\r

diff --git a/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java b/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java
new file mode 100644 (file)
index 0000000..c76c7e4
--- /dev/null
+++ b/server/user.mediacube.gui/src/user/jobengine/zk/model/JobFlowChartModel.java
@@ -0,0 +1,57 @@
+package user.jobengine.zk.model;\r
+\r
+import org.zkoss.bind.annotation.AfterCompose;\r
+import org.zkoss.bind.annotation.Command;\r
+import org.zkoss.bind.annotation.ContextParam;\r
+import org.zkoss.bind.annotation.ContextType;\r
+import org.zkoss.zk.ui.Component;\r
+import org.zkoss.zk.ui.select.Selectors;\r
+import org.zkoss.zk.ui.util.Clients;\r
+\r
+import com.ibm.nosql.json.api.BasicDBObject;\r
+\r
+public class JobFlowChartModel extends BaseModel {\r
+       @AfterCompose\r
+       public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {\r
+               Selectors.wireComponents(view, this, false);\r
+       }\r
+\r
+       @Command\r
+       public void loadChart() {\r
+               /*\r
+                       operators: {\r
+                               operator1: {\r
+                                       top: 20,\r
+                                       left: 20,\r
+                                       properties: {\r
+                                               title: 'Operator 3',\r
+                                               inputs: {},\r
+                                               outputs: {\r
+                                                       output_1: {\r
+                                                               label: 'Output 1',\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               },\r
+                       },\r
+               */\r
+\r
+               BasicDBObject data = new BasicDBObject();\r
+               BasicDBObject op1 = new BasicDBObject();\r
+               BasicDBObject op11 = new BasicDBObject();\r
+               BasicDBObject p = new BasicDBObject();\r
+               op11.append("top", 20);\r
+               op11.append("left", 20);\r
+               op11.append("properties", p);\r
+               p.append("title", "Operator 3");\r
+               p.append("inputs", new BasicDBObject());\r
+               p.append("outputs", new BasicDBObject("output_1", new BasicDBObject().append("label", "Output 1")));\r
+               op1.append("operatorX", op11);\r
+               data.append("operators", op1);\r
+\r
+               // String x = "{operators: { operator1 : { properties: { title: 'START' } }}}";\r
+               String js = String.format("setFlowchartData(%s)", data.toString());\r
+               Clients.evalJavaScript(js);\r
+       }\r
+\r
+}
\ No newline at end of file