Mxgraph Advanced (i) mxgraph Tutorial-development Getting Started Guide

mxgraph Tutorial-development Getting Started GuideOverview

Mxgraph is a JS drawing component for Web applications that need to design/edit workflow/bpm flowcharts, charts, network diagrams, and plain graphics in Web pages. The Mxgraph download package includes a front-end program written in JavaScript, as well as examples of integration of multiple and backend programs (java/c#, etc.). Here are a few examples of mxgraph applications. (You can download mxgraph and more mxgraph instances to www.longboo.com 's homepage)

The Mxgraph client is a graphical component and provides an interface to integrate with the Web page. The client needs a Web server to provide the required files, or it can run on the local file system. The background can be used to integrate into the languages supported by existing servers.

After you mate with the background, the component accomplishes the following functions:

1. Create a Visio-like gallery

2. Storage Loading Gallery

3. Create a Graph object

4. Share the gallery with other customers

Several of these methods can be applied together, such as sending an XML file that changes the configuration to the background, or automatically saving the graphic to avoid data loss. And the client can localize the operation.

Exmple: Hello, world!

The Hello Word sample is a separate HTML file that contains namespaces, Mxgraph Lib, and sample code. The example runs the effect directly in the browser. (Press Crl+u in Firefox or click the page directly to view resources in IE browser.) ）

Introduction to library files

The page header contains JavaScript code and dependencies. Use the following code to load the library file. The Mxbasepath variable is used to define the directory for the Library resource. This variable must be defined before loading the library.

<script type="text/javascript">
  mxBasePath = ‘javascript/src/‘;
</script>
<script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

The mxclient.js contains all the required code. Note: The resource code is only commercially released. In the evaluation version, this file is a URL link from the server. Source code cannot be localized.

Check your browser

The next script tag contains the code for Hello World. The first part of the code is to check whether the browser supports Mxgraph. It is recommended that you do this before encoding, and you can display the error message here if the browser does not support it. In general, the JS script code should be separate from the HTML code, but this example does not.

There are no special rules for the main function, main () {}. The function references the file loaded by the header, and can have any name that contains any parameters. In this example, the parameter is the DOM node in the body. Note: The following code is independent of the DOM node ID

<script type="text/javascript";>
Function main(container)
{
   // Checks if the browser is supported
/ / Check if the browser supports
   If (!mxClient.isBrowserSupported())
   {
     // Displays an error message if the browser is not supported.
/ / If the browser does not support, an error message is displayed
     mxUtils.error(‘Browser is not supported! ‘, 200, false);
   }
   ...

Container Container

The page uses a DOM node to combine graph with JavaScript. It can be obtained using document.getElementById in the body (as in this example) or directly dynamically created (such as createelement, translator note). The DOM node is passed to the main function to create the following graph example.

If you want to have scrollbars in the container, set the container style property overflow to auto.

Graph Graph

The code creates an empty graph graph model and constructs a concrete diagram from the container and the empty model. In this example, all default event handling is invalidated in the last row. (Mxgraph uses a typical MVC pattern, and readers who are familiar with the MVC pattern are more likely to get started.) Translator Note)

var model = new mxGraphModel();
var graph = new mxGraph(container, model);

If you want the graph graph to be read-only, graph.setenabed (false) is available.

Vertices (node) and Edges (Wired)

The program needs to insert nodes and lines (update graphics) in BeginUpdate and endupdate. EndUpdate should be placed in finally-block to ensure that endupdate is always executed. But beginupdate cannot be in Try-block, so endupdate will never execute if the beginupdate fails.

The sections within the block create nodes and lines for the graph. The default parent node is the first child node of the root node in the diagram that is automatically created without parameters when using graph.

// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
// Get the default parent node for the insert node.
  //This is usually the first child of the root node
Var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//Add a cell in a separate step
model.beginUpdate();
Try
{
   Var v1 = graph.insertVertex(parent, null, ‘Hello, ‘, 20, 20, 80, 30);
   Var v2 = graph.insertVertex(parent, null, ‘World!‘, 200, 150, 80, 30);
   Var e1 = graph.insertEdge(parent, null, ‘‘, v1, v2);
}
Finally
{
   // Updates the display
/ / Update display
   model.endUpdate();
}

Beginupdate&endupdate not only provides the display function, but it can be used as the boundary of the Undo/redo mark (that is, the operation between BeginUpdate and endupdate acts as an atomic operation of undo, Redo, Either be redo or undo at the same time, equivalent to the transaction in the database, the translator notes).

Graphs Chart

Instantiate mxgraph to create graph graph, below is the core class diagram of API, others are auxiliary.

To instantiate a DOM node as a graph graph:

var node = document.getElementById(‘id-of-graph-container‘);
var graph = new mxGraph(node);

Model Programming Models

Mxcell implements the element that defines the diagram model in Mxgraphmodel.

The diagram model has the following attributes (including relationships):
1) The root node contains each layer, and the parent node of each layer is the root node.
2) Layer you can include elements of the graph model: nodes, wired groups.
3) The elements in a group that can be recursively included in the graph graph model.
4) the structure and information of graph graphs are stored in cell and user objects. (aka Business object)

Create a new graph model with a root node and a default layer:

var root = new mxCell();
root.insert(new mxCell());
var model = new mxGraphModel(root);

Stylesheet Style sheet

The style of the cell is determined by the style sheet (an instance of Mxstylesheet). The style sheet specifies the mapping between style names and styles. A style is an array of keys. Those keys correspond to the value of the cell being used. Values are defined in mxconstants, which can be strings and numbers, JavaScript objects, functions, and so on. To modify the default styles for nodes and lines:

var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;

Styles Style

The cell's style is in the property style (Cell.style). A style is part of the cell state, and it can be changed by Mxgraphmodel.setstyle. Style is form[stylename;|key=value;] A string in the. The default style overrides the setting key value for this cell. For example: You use the rounded style, which can override the stroke and fillcolor, and the style is defined as:

[Stylename;|key=value;]

Which tells the graph to use the given named styles and override the specified key, value pairs in the given order. For example, the rounded style and override the Stroke-and FillColor, the style would is defined as:

Rounded;strokecolor=red;fillcolor=green

Above Hello world! An example of this is inserting a node in this way: (note how the style is used)

var V1 = Graph.insertvertex (parent, NULL, ' Hello ', +, +, +, ' rounded;strokecolor=red;fillcolor=green ');

appearance display appearance

In a specific project you may need to customize the cell's dynamic characteristics (that is, appearance), examples, pointer shapes, colors, and so on. You can use the following methods separately: GetImage, Getindicatorshape, Getindicatorimage, Getindicatorcolor,getindicatorgradientcolor .... Note: These methods act as a parameter that points to the cell state of a cell's style "resolve" (that is, an array) version. Therefore, the default implementation of GetImage is as follows:

mxGraph.prototype.getImage = function(state)
{
  if (state != null && state.style != null)
  {
    return state.style[mxConstants.STYLE_IMAGE];
  }
  return null;
}

This method can change the cell's graphics to whatever you need. Typically, an image is defined as State.cell points to a cell-associated state or State.cell.value to a user object.
To make the changes visible, you need to call View.invalidate (cell) and view.validate.

Editors Editor

The program creates an editor by initializing Mxeditor. This is the core class of the editor package. All others are auxiliary classes. You can create and configure an editor from a profile name.

Take a look at the following example:

var config = mxUtils.load(‘editors/config/keyhandler-commons.xml‘).getDocumentElement();
var editor = new mxEditor(config);

The XML-formatted configuration file is passed to Mxcodec,mxcodec using Mxeditorcodec and other encodings to read the XML file into the Editor object hierarchy. Usually when the editor starts to build, graph, model, toolbar, Popupmenus and so on I/O subsystem.

CSS

A CSS style sheet contains a variety of user interface elements (selection box, editor, pop-up menu, etc.) defined by the style. It also contains instructions that allow the application of an XML configuration file to support IE, so there are a large number of such forms in the page.

You can configure the editor with Mxclient.link (' stylesheet ', filename) or form labels. Cases:

<mxEditor>

<ui>

<stylesheet name= "Examples/editors/css/process.css"/>

...

Templates Templates

Define a new cell type template by using the node in the configuration file as follows

<add as="symbol">
  <Symbol label="Symbol" customAttribute="whatever">
    <mxCell vertex="1" connectable="1" style="symbol;image=images/event.png">   
      <mxGeometry as="geometry" width="32" height="32"/>
    </mxCell>
    <CustomChild customAttribute="whatever"/>
  </Symbol>
</add>

The As property of the add element contains the name of the last successful application of the template, the symbol child node element is a client element of IE or Firefox and can have any name and any number of child nodes and customer attributes. The Label property is a textual representation of the graphic unit. The Mxcell element is another special child node that contains the image information of the cell and names it as Cell-type,-style,-size,-position.

Toolbar

as follows, the toolbar template must be applied by configuring the Mxdefaulttoolbar section (Mxeditor/mxdefaulttoolbar[as=toolbar]) in the configuration file.

<add as="symbolTool" template="symbol"
  style="symbol;image=wf/images/bpmn/special_event.png"
  icon="wf/images/bpmn/small_event.gif"/>

The As property specifies that the tool label is displayed in the toolbar, the template property specifies the first loaded templates, and the Style property is optional and is used to override the default style. The Icon property specifies the graphic style of the toolbar itself.
Note: In this symboltool example, the as attribute is defined as the key value of the language resource. If the resource is not defined in Mxresource, then the property value is used as the label.

input/output input/Output

The default encoding system uses the as attribute to create a name to map all the object-free files to strings, and the object files are mapped to child nodes. The default encoding system registered in Mxcodecregistry can be refactored or compiled by the client.

Take a look at the following JavaScript object definition:

var object = new Object();
object.myBool = true;
object.myObject = new Object();
object.myObject.name = ‘Test‘;
object.myArray = [‘a‘, [‘b‘, ‘c‘], ‘d‘];

The method for encoding this object and displaying the results in the new window in XML format is as follows:

var encoder = new Mxcodec ();

var node = Encoder.encode (object);

Mxutils.popup (Mxutils.getxml (node));

The following is the result of the display in XML format:

<object mybool= "1" >

<object name= "Test" as= "MyObject"/>

<array as= "MyArray" >

<add value= "a"/>

<Array>

<add value= "B"/>

<add value= "C"/>

</Array>

<add value= "D"/>

</Array>

</Object>

Note: The encoder converts a Boolean to a numeric type, and the property value does not store numbers or non-objects. and include other XML files through the include directive in XML.

Files file

Mxeditor implements the Save, open, Readgraphmodel, Writegraphmodel, four functions, which are used to handle some standard file operations.

The default Mxeditor.save has a parameter that indicates whether the "save file" was triggered by the program or triggered by the user. Mxeditor then uses the Urlpost variable to check whether the post request needs to be released. If the variable is the default, then the editor is released via XML and post variables named XML to the specified URL.

Post

Here is an example of saving a file. HTML pages and PHP files are placed in a directory. If the file name is server.php, then the urlpost variable in the editor must be specified as server.php. The php file gets the XML from the POST request and writes to Diagram.xml.

<?php

$xml = $HTTP _post_vars[' xml ');

if ($xml! = null) {

$FH =fopen ("Diagram.xml", "w");

Fputs ($FH, Stripslashes ($xml));

Fclose ($FH);

}

?>

as follows, send a URL request to change the configuration file for the respective item of Mxeditor.

<mxeditor urlpost= "http://www.example.com/server.php" ... >

Remember: JavaScript can only be published to its source server, so we recommend using relative paths, URL server.php, and so on.

Form Fields

If you want to read/write graph (for example, fill a form) with a set of characters, you need the following methods:

var data = Editor.writegraphmodel ();

Editor.readgraphmodel (Mxutils.parsexml (data));

Codecs

Mxcodec is used to encode other objects or to create and read XML data (no editor instances are required).

Reference Documents

1.http://www.jgraph.com/

2.http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html

Mxgraph Advanced (i) mxgraph Tutorial-development Getting Started Guide