Tuesday, September 6, 2011

mxGraph Extjs Integration

HTML Online Editor Sample
This article will help you to integrate the mxGraph in the Extjs.
Follow the following steps to create a setup.

1) Create a folder named mxgraph_extjs_integrtion.
2) Download ext-all.js, ext-base.js and mxClient.js files into mxgraph_extjs_integrtion folder.
3) Create a MxGraphExtjsIntegration.html file in the same folder with the following content.


<html>
<head>
<title>Integrating mxGraph with Extjs</title>
<style>
div.styled {
border-width:2px;
border-color:#ff9900;
border-style: solid solid solid solid;
background: url('workflow-designer/grid_10.png');
}
</style>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="mxClient.js"></script>    
<script>
Ext.onReady(function(){
var centerDiv = document.getElementById('center-panel-container');
var mainDiv = document.createElement('div');
mainDiv.id = 'workflow-designer-main-panel';
// Process Container
var graphDiv= document.createElement('div');
graphDiv.id = 'graph';
graphDiv.style.width = '900px';
graphDiv.style.height = '600px';
graphDiv.style.top = '30px';
graphDiv.className = 'styled';
// Toolbar
var tbarDiv = document.createElement('div');
tbarDiv.id = 'toolbar';
tbarDiv.style.height = '24px';
tbarDiv.style.left= '300px';
tbarDiv.style.width = '500px';
tbarDiv.style.overflow = 'hidden';
tbarDiv.style.display = 'block';
tbarDiv.style.position = 'absolute';
mainDiv.appendChild(tbarDiv);
mainDiv.appendChild(graphDiv);
centerDiv.appendChild(mainDiv);
new loadWFConfig('fsworkflowconfig.xml');
});
selectionChanged = function(graph) {
};
loadWFConfig = function(config) {
try {
if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported!', 200, false);
}else {
var node = mxUtils.load(config).getDocumentElement();
var editor = new mxEditor(node);
}
} catch (e) {
// Shows an error message if the editor cannot start
mxUtils.alert('Cannot start application: ' + e.message);
throw e; // for debugging
}
return editor;
};
onInit = function(editor, isFirstTime){
mxEvent.disableContextMenu(document.body);
editor.validation = true;
var editorGraph = editor.graph;
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('workflow-designer/connector.gif', 16, 16);
// Highlights the vertices when the mouse enters
var highlight = new mxCellTracker(editorGraph, '#999900');
editorGraph.setConnectable(true);
editorGraph.setDropEnabled(true);
editorGraph.setPanning(true);
editorGraph.setTooltips(true);
editorGraph.setAllowDanglingEdges(false);
editorGraph.connectionHandler.setCreateTarget(true);
mxGraphHandler.prototype.cloneEnabled = false;
// Sets the cursor
editorGraph.container.style.cursor = 'default';
var listener = function(sender, evt){
// This code tests to see if a node is dragged to less than the far left or top and
// if so, re-positions it at the 0px left or top
try{
var change = evt.properties.changes[0];
var cell = change.hasOwnProperty("cell") ? change.cell : change.child;
var geometry = cell.getGeometry();
var x = geometry.x;
var y = geometry.y;
if(x < 0) geometry.x = 10;
if(y < 0) geometry.y = 10;
if(x < 0 || y < 0){
cell.setGeometry(geometry);
editorGraph.refresh();
}
}
catch(e){}
// Perform validation after any change
editorGraph.validateGraph();
};
editorGraph.model.addListener(mxEvent.CHANGE, listener);
// Creates rubberband selection
//var rubberband = new mxRubberband(editorGraph);
// Stop cells from being resized - this stops distortion of teh graphic and over / undersize imagery
editorGraph.setCellsResizable(false);
// mxCellAttributeChange to change properties
// Implements a properties panel that uses
editorGraph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt){
//fs.BPDefinition.hasChange = true;
selectionChanged(editorGraph);
});
};
</script>
</head>
<body>
<div id="center-panel-container" >
</div>
</body>
</html>

4) Create a file named fsworkflowconfig.xml in the same folder with following content.


<mxEditor defaultGroup="group" defaultEdge="Connector">
<add as="onInit"><![CDATA[
function (isFirstTime){
onInit(this, isFirstTime);
}
]]>
</add>
<ui>
<add as="graph" element="graph"/>
<add as="toolbar" element="toolbar"/>
</ui>
<Array as="templates">
<add as="group">
<group name="Group" style="group" description=" ">
<mxCell vertex="1" style="group" connectable="0"/>
</group>
</add>
<add as="Connector">
<connector name="Connector" style="connector" transitionAction=" " actionRequired=" " description=" ">
<mxCell edge="1">
<mxGeometry as="geometry" relative="1"/>
</mxCell>
</connector>
</add>
<add as="text">
<Text name="Label" style="text"  fsStyle=" "  description=" ">
<mxCell vertex="1" style="text" connectable="0">
<mxGeometry as="geometry" width="120" height="40"/>
</mxCell>
</Text>
</add>
<add as="start">
<start name="Start" style="start" description=" ">
<mxCell vertex="1" style="start">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</start>
</add>
<add as="activity">
<activity name="Activity" style="activity" form=" " formId=" " description=" ">
<mxCell vertex="1" style="activity">
<mxGeometry as="geometry" width="80" height="50"/>
</mxCell>
</activity>
</add>
<add as="agent">
<agent name="Agent" style="agent" classname="" type="External" description=" ">
<mxCell vertex="1" style="agent">
<mxGeometry as="geometry" width="80" height="80"/>
</mxCell>
</agent>
</add>
<add as="timer">
<timer name="Timer" style="timer">
<mxCell vertex="1" style="timer">
<mxGeometry as="geometry" width="80" height="80"/>
</mxCell>
</timer>
</add>
<add as="cancel">
<cancel name="Cancel" style="cancel" description=" ">
<mxCell vertex="1" style="cancel">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</cancel>
</add>
<add as="finish">
<finish name="Finish" style="finish" description=" ">
<mxCell vertex="1" style="finish">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</finish>
</add>
<add as="andjoin">
<andjoin name="AND-Join" style="andjoin" description=" ">
<mxCell vertex="1" style="andjoin">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</andjoin>
</add>
<add as="orjoin">
<orjoin name="OR-Join" style="orjoin" description=" ">
<mxCell vertex="1" style="orjoin">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</orjoin>
</add>
<add as="andsplit">
<andsplit name="AND-Split" style="andsplit" description=" ">
<mxCell vertex="1" style="andsplit">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</andsplit>
</add>
<add as="decision">
<decision name="Decision" style="decision" description=" " expression=" ">
<mxCell vertex="1" style="decision">
<mxGeometry as="geometry" width="40" height="40"/>
</mxCell>
</decision>
</add>
<add as="conditionalor">
<conditionalor name="Conditional-OR" style="conditionalor" description=" ">
<mxCell vertex="1" style="conditionalor">
<mxGeometry as="geometry" width="40" height="80"/>
</mxCell>
</conditionalor>
</add>
</Array>
<mxGraph as="graph" alternateEdgeStyle="verticalEdge">
<add as="getTooltipForCell"><![CDATA[
function(cell){
return cell.getAttribute('form');
}
]]>
</add>
<add as="convertValueToString"><![CDATA[
function(cell){
var cellTitle = cell.getAttribute('name');
return cellTitle;
}
]]>
</add>
<mxStylesheet as="stylesheet">
<add as="text">
<add as="shape" value="rectangle"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="12"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="shadow" value="0"/>
<add as="strokeColor" value="none"/>
<add as="fillColor" value="none"/>
<add as="gradientColor" value="none"/>
</add>
<add as="defaultEdge">
<add as="shape" value="connector"/>
<add as="fontSize" value="10"/>
<add as="rounded" value="1"/>
<add as="strokeColor" value="#000000"/>
<add as="strokeWidth" value="2"/>
<add as="edgeStyle" value="elbowEdgeStyle"/>
<add as="endArrow" value="classic"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
<add as="fontColor" value="#111111"/>
</add>
<add as="verticalEdge" extend="defaultEdge">
<add as="elbow" value="vertical"/>
<add as="strokeColor" value="#000000"/>
</add>
<add as="group">
<add as="shape" value="group"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="strokeColor" value="#000000"/>
<add as="dashed" value="1"/>
</add>
<add as="start">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-Start.gif"/>
</add>
<add as="activity">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="image" value="workflow-designer/BPMN-Activity.gif"/>
</add>
<add as="agent">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="image" value="workflow-designer/Agent.gif"/>
</add>
<add as="timer">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="verticalAlign" value="middle"/>
<add as="image" value="workflow-designer/Timer.gif"/>
</add>
<add as="cancel">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-Cancel.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="finish">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-End.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="andjoin">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-And-Join.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="andsplit">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-And-Split.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="decision">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-Conditional.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="orjoin">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="center"/>
<add as="imageAlign" value="center"/>
<add as="verticalAlign" value="top"/>
<add as="verticalLabelPosition" value="bottom"/>
<add as="spacingTop" value="2"/>
<add as="image" value="workflow-designer/BPMN-Or-Join.gif"/>
<add as="labelBackgroundColor" value="#f1f1f1"/>
<add as="labelBorderColor" value="#aaa"/>
</add>
<add as="conditionalor">
<add as="shape" value="image"/>
<add as="perimeter" value="rectanglePerimeter"/>
<add as="fontSize" value="10"/>
<add as="fontStyle" value="1"/>
<add as="align" value="right"/>
<add as="verticalAlign" value="bottom"/>
<add as="image" value="workflow-designer/Conditional-OR-Split.gif"/>
</add>
</mxStylesheet>
<mxGraphModel as="model">
<add as="valueForCellChanged"><![CDATA[
function(cell, value){
var previous = null;
if (isNaN(value.nodeType)){
previous = cell.getAttribute('name');
cell.setAttribute('name', value);
}else{
previous = cell.value;
cell.value = value;
}
modified = true;
return previous;
}
]]>
</add>
</mxGraphModel>
</mxGraph>
<mxDefaultKeyHandler as="keyHandler">
<add as="46" action="delete"/>
</mxDefaultKeyHandler>
<mxDefaultToolbar as="toolbar" spacing="8">
<add as="text" template="text" icon="workflow-designer/text.gif"/>
<add as="start" template="start" icon="workflow-designer/Start-24.gif"/>
<add as="cancel" template="cancel" icon="workflow-designer/Cancel-24.gif"/>
<add as="finish" template="finish" icon="workflow-designer/Finish-24.gif"/>
<add as="activity" template="activity" icon="workflow-designer/Workflow-Activity-24.gif"/>
<add as="andjoin" template="andjoin" icon="workflow-designer/AND-Join-24.gif"/>
<add as="andsplit" template="andsplit" icon="workflow-designer/AND-Split-24.gif"/>
<add as="orjoin" template="orjoin" icon="workflow-designer/OR-Join-24.gif"/>
<add as="decision" template="decision" icon="workflow-designer/BPMN-Conditional-24.gif"/>
</mxDefaultToolbar>
</mxEditor>

5) Create workflow-designer folder under the same folder. and put your images mentioned in the  fsworkflowconfig.xml file.

6) Open the MxGraphExtjsIntegration.html in the fireforx browser.
.

3 comments: