mxGraph – An Introduction
mxGraph User
Manual –
JavaScript Client
Version 1.0.0.0– 22
nd
May 2009
Page 1
mxGraph – An Introduction
Copyright (c) JGraph Ltd 2006-2009
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any
form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written
permission of the author.
The programs in this book have been included for their instructional value. They have been tested with care but are
not guaranteed for any particular purpose. The publisher does not offer any warranties or representations nor does it
accept any liabilities with respect to the programs.
Possession, use, or copying of the software described in this publication is authorized only pursuant to a valid written
license from JGraph Ltd.
Neither JGraph Ltd. nor its employees are responsible for any errors that may appear in this publication. The
information in this publication is subject to change without notice.
Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and
other countries.
Page 2
mxGraph – An Introduction
Table of Contents
1 Introduction................................................................................................................................................4
1.1 MxGraph Product Family Introduction.....................................................................................................4
1.2 Which version of mxGraph to use?.........................................................................................................4
1.2.1 JavaScript...................................................................................................................................5
1.2.2 Flex/Flash....................................................................................................................................5
1.3 mxGraph – JavaScript Library................................................................................................................6
1.4 What Applications can mxGraph be used for?...........................................................................................7
1.5 How is mxGraph deployed?...................................................................................................................7
1.6 mxGraph Technologies..........................................................................................................................8
1.7 mxGraph Licensing...............................................................................................................................8
1.8 What is a Graph?.................................................................................................................................8
1.8.1 Graph Visualization ......................................................................................................................9
1.8.2 Graph Interaction ......................................................................................................................10
1.8.3 Graph Layouts ...........................................................................................................................10
1.8.4 Graph Analysis ..........................................................................................................................11
1.9 About this Manual...............................................................................................................................12
1.9.1 Pre-requisites for mxGraph..........................................................................................................12
1.9.2 Getting Additional help................................................................................................................13
2 Getting Started..........................................................................................................................................14
2.1.1 The mxGraph Web Site ...............................................................................................................14
2.1.2 Obtaining mxGraph.....................................................................................................................14
2.1.3 Installing mxGraph.....................................................................................................................15
2.1.4 Project structure and build options................................................................................................15
2.2 JavaScript and Web Applications..........................................................................................................15
2.2.1 AJAX.........................................................................................................................................16
2.2.2 Third-Party JavaScript Frameworks...............................................................................................16
2.2.2.1 Google Web Toolkit.............................................................................................................16
2.2.2.2 Native JavaScript Frameworks and Libraries...........................................................................16
2.2.2.3 Integration of mxGraph and JavaScript frameworks................................................................17
2.2.2.4 Extending mxGraph in JavaScript..........................................................................................17
2.2.2.4.1 Constructor................................................................................................................18
2.2.2.4.2 Functions...................................................................................................................18
2.2.2.4.3 Fields.........................................................................................................................19
2.2.3 General JavaScript Development..................................................................................................20
2.2.3.1 JavaScript Development Environments...................................................................................20
2.2.3.2 Debugging JavaScript..........................................................................................................20
2.2.3.3 JavaScript Obfuscation.........................................................................................................20
2.2.3.4 Namespaces.......................................................................................................................20
2.3 Hello World!.......................................................................................................................................20
2.4 Notes on JavaScript download speed.....................................................................................................23
3 mxGraph Model and Cells............................................................................................................................24
3.1 Core mxGraph architecture..................................................................................................................24
3.1.1 the mxGraph Model.....................................................................................................................24
3.1.2 The Transaction Model.................................................................................................................25
3.1.2.1 The Model Change Methods..................................................................................................25
3.1.2.1.1 Inserting Cells.............................................................................................................26
3.1.3 MxCell.......................................................................................................................................27
3.1.3.1 Styles................................................................................................................................27
3.1.3.1.1 Setting the Style of a Cell.............................................................................................28
3.1.3.1.2 Creating a New Global Style..........................................................................................29
3.1.3.2 Geometry...........................................................................................................................29
3.1.3.2.1 Relative Positioning......................................................................................................30
3.1.3.2.2 Offsets.......................................................................................................................32
3.1.3.3 User Objects.......................................................................................................................32
3.1.3.4 Cell Types..........................................................................................................................34
3.1.4 Group Structure.........................................................................................................................35
3.1.5 Complexity Management..............................................................................................................37
3.1.5.1 Folding..............................................................................................................................37
3.1.5.2 Sub-Graphs, Drill-Down / Step-Up.........................................................................................38
3.1.5.3 Layering and Filtering..........................................................................................................40
Page 3
mxGraph – An Introduction
1 Introduction
Move to the following sections:
- 1.3 if you just want to know what this version of mxGraph actually does,
- 1.5 if you're wondering what the high-level view of deploying this technology looks like,
- 1.7 if you need to understand the licensing options better,
- 1.9 if you'd like to know how you can get your technical and commercial mxGraph
questions answered,
- 2.1.2 if you just want to see an example up and running.
1.1 MxGraph Product Family Introduction
mxGraph is a product family of libraries, written in a variety of technologies, that provide
features aimed at applications that display interactive diagrams and graphs. Note by graphs we
mean mathematical graphs, not necessarily charts (although some charts are graphs). See
later section “What is a Graph?” for more details.
Being a developer library, mxGraph is not designed specifically to provide a ready to use
application, although many of the examples are close to being usable applications. mxGraph
provides all the commonly required functionality to draw, interact with and associate a context
with a diagram displayed in the technology of that particular mxGraph flavour. mxGraph comes
with a number of examples that help explain how a basic application is put together using each
technology and showcases individual features of the library.
Each user manual is specific to one technology, along with generic sections, such as this
introduction and layouts. Developers will find the implementations of each library in the
different technologies share the same architecture and API across the product range. The
implementations differ slightly for technology-specific areas, usually event handling and
rendering, but when overall porting from one technology, mxGraph is designed to present as
common an interface as is possible.
mxGraph, at the time of writing, has a commercial release grade JavaScript library, a beta
stage Java Swing visualization library and alpha grade ActionScript (for Flex applications)
and .NET visualization components. Do not confuse the visualization elements (the part you
see on the client) with the core model elements. The core models written in Java, .NET and
PHP that serve as back-end server classes in the JavaScript library versions are all commercial-
grade production code.
Developers integrating the library in their application should read the pre-requisites for the
technology they are using. See section “Pre-requisites” below. Given that mxGraph is a
component part of your application, you must understand how applications are constructed in
that technology and how to program in the language(s) of that technology.
1.2 Which version of mxGraph to use?
When deciding which of the technology implementations of mxGraph to use, often the
choice is determined by the technology of the application.
The .NET and Java visualization versions are suitable for producing desktop applications
with high performance. The .NET technology is aimed at Windows applications and Java at a
number of operating system platforms. Selection of one of those technologies is usually
Page 4
mxGraph – An Introduction
because of background knowledge of the developers using the library.
The two web-centric technologies, JavaScript and ActionScript have specific advantages and
disadvantages relative to one another. You would select one of these two technologies when
you are intending to provide interactive diagramming in standard web browsers with some
centralised servers providing persistence and coordinating delivery of the visualization data
between clients.
An example of such an application is a business process modelling tool that enables users to
draw processes in a web browser, store them centrally, allow other users to view and edit
processes and automatically execute the process on the server using business logic associated
with the visual information.
1.2.1 JAVASCRIPT
The JavaScript version of mxGraph mainly comprises one JavaScript file that contains all of
the mxGraph functionality. This is loaded into a HTML web page in a JavaScript section and
executes in an HTML container in the browser. This is an incredibly simple architecture that
only requires a web server capable of serving html pages and a JavaScript enabled web
browser.
The key advantages of this technology are:
- That no third-party plug-ins are required. This removes plug-in vendor dependence.
- The technologies involved are open and there are many open implementations, no vendor
can remove a product or technology that leaves your application unworkable in practise.
- Standardized technologies, meaning your application is deployable to the maximum
number of browser users without need for additional configuration or installation at the client
computer. Large corporate environments often dislike allowing individuals to install browser
plug-ins and do not like to change the standard build rolled out to all machines.
The key disadvantage of this technology is:
- Rendering speed. As the number of cells visible on the users screen climbs into the
hundreds, redrawing slows on most browsers beyond acceptable levels. In information
management theory displaying several hundred cells is generally incorrect, since the user
cannot interpret the data. There are a number of mechanisms, collectively known as
complexity management used to limit the amount of information to sensible levels, and thus
maintaining reactive redraw rates for the user. Complexity management is described in a later
section of this user manual.
1.2.2 FLEX/FLASH
- The ActionScript version of mxGraph is designed to be integrated into a Flex application.
Flex is a web application framework written by Adobe that uses the Flash browser plug-in. The
key advantages of using this technology are:
The graphics performance is very good, there are not the rendering speed issues of the
JavaScript library with large graphs
Flex provides an application framework providing a clear process for the developer to
produce the application, with IDE tools available to speed up development.
Adobe also produce a toolkit named AIR, that enables Flex to be deployed as a native
application. this enables a desktop and browser based version to be written using the same
basic technology.
Page 5
- 1
- 2
- 3
前往页