Technology Articles: mxGraph

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>

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>

</body>

</html>

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

<add as="onInit"><![CDATA[

function (isFirstTime){

onInit(this, isFirstTime);

}

]]>

</add>

<ui>

</ui>

</group>

</add>

</mxCell>

</connector>

</add>

</mxCell>

</Text>

</add>

</mxCell>

</start>

</add>

</mxCell>

</activity>

</add>

</mxCell>

</agent>

</add>

</mxCell>

</timer>

</add>

</mxCell>

</cancel>

</add>

</mxCell>

</finish>

</add>

</mxCell>

</andjoin>

</add>

</mxCell>

</orjoin>

</add>

</mxCell>

</andsplit>

</add>

</mxCell>

</decision>

</add>

</mxCell>

</conditionalor>

</add>

</Array>

<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>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</add>

</mxStylesheet>

<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>

</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.
.

Technology Articles

Tuesday, September 6, 2011

mxGraph Extjs Integration

Pages

About Me