Mxgraph discussion on--web-End flowchart Scheme __web



mxgraph Tutorial 1-Developing Getting Started Guide

Overview Overview

Mxgraph is a JS drawing component for Web applications that need to design/edit workflow/bpm flowcharts, diagrams, network diagrams, and normal graphics in a Web page. The Mxgraph download package includes front-end programs written in Javescript, as well as several examples of integration with back-end programs (java/c#, etc.). Here are a few examples of mxgraph applications. (You can download mxgraph, and more mxgraph instances to the home page of many examples of graphic controls)

Power system case

Workflow Designer

Chemical system case

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 cooperating with the background, the component can perform the following functions:

L Create a gallery similar to Visio

L Storage Loading Gallery

L Create a Graph object

L share libraries with other customers

These several ways can be combined to apply, such as sending a change configuration of the XML file to the background, or automatically save the graphics to avoid data loss. And the client can localize the operation.

Hello, world!.

Hello Word example is a separate HTML file that contains namespaces, Mxgraph Lib, and sample code. Example to run the effect directly in the browser. (Use Firefox browser to press Crl+u or click the page directly to view resources in IE browser.) ) to draw the library file

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 well defined before loading the library.

<script type= "Text/javascript" >

Mxbasepath = ' javascript/src/';

</script>

<script type= "Text/javascript" src= "Javascript/src/js/mxclient.js" ></script>

Mxclient.js contains all the required code. Note: The resource code is only published commercially. In the evaluation version, this file is a URL link from the server. You cannot localize the source code. 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 coding, and that you can display an 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 is no special rule for the main function function main () {}. function refers to a file loaded by the head, 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 ID of the DOM node

<script type= "Text/javascript";>

function main (container)

{

Checks If the browser is supported

Check to see if the browser supports

if (!mxclient.isbrowsersupported ())

{

Displays an error message if the browser isn't supported.

If the browser does not support, an error message is displayed

Mxutils.error (' Browser is not supported! ', false);

}

...

Container Container

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

If you want to have a scroll bar in the container, set the container style property overflow to auto. Graph Graph

The code creates an empty 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 to be read-only, you can use Graph.setenabed (false). Vertices (node) and Edges (Wired)

Programs need 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 beginupdate fails.

The section within the block creates nodes and lines for the graphic. The default parent node is the first child node of the root node in the diagram that is automatically created with graph without parameters.

Gets the default parent for inserting new cells. This

is normally the "the" "root" (ie. layer 0).

Gets the default parent node for the insertion node.

This is usually the first child node 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 tag (that is, the operation between BeginUpdate and endupdate acts as an atom operation of undo, Redo, Either be redo or undo at the same time, equivalent to the transaction in the database, the translator note. Graphs Map

Instantiate mxgraph to create graph graph, the following 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 elements of the definition diagram model in Mxgraphmodel.

The diagram model has the following properties (including relationships):
The root node contains each layer, and the parent node of each layer is the root node.
A layer can contain the elements of a graph model: nodes, line groups.
A recursive element in a group that contains a graph model.
The structure and information of graph graphs are stored in cell and user objects. (also known as the business object)

Create a new graph model with one root node and the 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 provides a mapping relationship between style names and styles. A style is an array of keys. Those keys correspond to the values of the cell 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 style is in the attribute style (Cell.style). The 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 cell's set key value. For example: You use the rounded style, which can cover stroke and fillcolor, and the style is defined like this:

[Stylename;|key=value;]

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

Rounded;strokecolor=red;fillcolor=green

Above Hello world. Example of this is inserting a node like this: (note how the style is used)

var V1 = Graph.insertvertex (parent, NULL, ' Hello ',

(a), ' Rounded;strokecolor=red;fillcolor=green ';

appearance display appearance

In a specific project you may want to customize the dynamic characteristics of the cell (that is, the appearance), such as graphics, pointer shapes, colors, and so on. You can use the following methods: GetImage, Getindicatorshape, Getindicatorimage, Getindicatorcolor, Getindicatorgradientcolor .... Note: These methods serve as a parameter that points to the cell state of the 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, the image is defined as State.cell point to the state of the Cell association or state.cell.value to the user object.
In order for the changes to be displayed, you need to call the View.invalidate (cell) and view.validate Editors editor

The program creates the editor by initializing the Mxeditor. This is the core class of the editor package. All others are auxiliary classes. You can create and configure an editor by using the configuration file 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 to read the XML file into the Editor object hierarchy using Mxeditorcodec and other encodings. Usually when the editor starts the widget, graph, model, toolbar, Popupmenus, and so on I/O subsystem CSS

A CSS style form contains definitions of styles for a variety of user interface elements (selection boxes, editors, pop-up menus, and so on). It also contains instructions to allow the application of XML configuration files to support IE, so there is a large number of such forms on the page.

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

<mxEditor>

<ui>

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

...

Templates Template

As follows, define a new cell type template by using nodes in the configuration file

<add as= "Symbol" >

<symbol label= "Symbol" customattribute= "Whatever" >

   &n