GraphMLViewer 1.6 Documentation

Usage and Configuration

The following example shows how to embed the GraphMLViewer into a HTLM web page. Note that the file GraphMLViewer.js has to be referenced. This Javascript file defines the necessary functions to start the viewer and to update the Flash Player.
<html>
<body>
<!-- Reference to the Javascript file GraphMLViewer.js -->
<script type="text/javascript" language="javascript" src="GraphMLViewer.js"></script>

<script language="javascript" type="text/javascript">
<!--

// start the Viewer
if (!RunPlayer(
    "width", "100%",
    "height", "100%",
    "graphUrl", "example.graphml",
    "overview", "true",
    "toolbar", "true",
    "tooltips", "true",
    "movable", "true",
    "links", "true",
    "linksInNewWindow", "true",
    "viewport", "full"
    )) {
  // if RunPlayer() returns false: Flash Player is either too old or not installed
  // in this case: try to install a current flash player
  if (!InstallFlashUpdate("width", "100%", "height", "100%")) {
    // Flash Player is too old for the auto-update or not installed at all
    // Place alternative content here
    document.write('This content requires the Adobe Flash Player 9.0.38 or higher. '
        + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>');
  }
}
//-->
</script>
</body>
</html>

Integrate into complex HTML pages

To integrate the viewer into a complex HTML page one can copy the content of the <body> elements (i.e. the <script> part) to the appropriate place. Width and height can be configured via the width and height parameters.

Configuring the Viewer

The viewer is started using the Javascript method RunPlayer(). This method returns true if the viewer could be started successfuly and false if not (most likely due to a missing / too old Flash Player). The viewer can be configured via the following parameters. These parameters are passed (as seen in the above example) as key-value-pairs.
NameDescriptionValuesDefault
Necessary Parameters
graphUrlThe URL of the GraphML file to displayString-
Optional Parameters
widthThe width of the viewer (% or absolute)size100%
heightThe height of the viewer (% or absolute)size100%
overviewWhether to show an overview window. "true" enables the overview.true, falsefalse
toolbarWhether to show the tool bar. "true" enables the tool bar, if the view can be moved (movable=true).true, falsefalse
movableWhether the user is allowed to move or zoom the view. "true" enables moving the view.true, falsefalse
scrollbarsWhether to show scroll bars if the diagramm is larger than the visible part. "true" enables scroll bars.true, falsetrue
tooltipsWhether to show tool tips. "true" enables tool tips.true, falsefalse
linksWhether the user is allowed navigate to web links which are attached to graph elements. "true" enables navigation.true, falsefalse
linksInNewWindowWhether to open web links in a new browser window. Web links are opened in a new window if set to "true" true, falsetrue
viewportThe section (view) of the diagram which is displayed. Possible parameters are "full", which shows the full diagram, or comma (,) separated coordinates in the order left, top, width, height (e.g. "-100,-100,200,200"). These coordinates define the part of the diagram which is displayed. "full" or four comma separated numbersfull

Automatic Flash Player Update

The Javascript file GraphMLViewer.js offers the function InstallFlashUpdate("width", "100%", "height", "100%"). This function installs the current Flash Player version. The size of the install window is determined by the "width" and "height" parameter. The function returns false if it failed to install the new Flash Player. If you don't want to offer an automatic update omit calling InstallFlashUpdate().
<html>
<body>
<script type="text/javascript" language="javascript" src="GraphMLViewer.js"></script>

<script language="javascript" type="text/javascript">
<!--

if (!RunPlayer(
   ...
    )) {
  document.write('This content requires the Adobe Flash Player 9.0.38 or higher. '
      + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>');
}
//-->
</script>
</body>
</html>

Customizing GraphMLViewer.js

The file GraphMLViewer.js offers the functions which are necessary to run Flash Player and to load the GraphMLViewer. Usually it is not necessary to customize this file. If you want to customize it, anyway, the following preconditions should be met:

Provided Files

Download from www.yworks.com

When you download the GraphMLViewer from yWorks, you will receive a zipped archive which contains besides the documentation the following files:

Export from yEd

When exporting a diagram using the Option "HTML Flash Viewer", yEd creates a HTML page which displays the exported diagram using GraphMLViewer. The following files are created:

yEd exports the necessary files in a way that they can be viewed with no further adjustments by opening the HTML file in a browser.

Preview on a local machine

The following files are necessary to integrate the GraphMLViewer into a HTML page for local preview:

Changing the folder structure

If you don't want to place all files in one folder it is possible to customize the folder structure:

On a Webserver

To publish the created pages on a web server, put the files together as described above. Upload these files to the web server, with the following exceptions:

The actual viewer (the Shockwave Flash file, GraphMLViewer.swf), which is loaded in a web environment, will be loaded form the yWorks web site (www.yworks.com).

Flash Player Security

In a web environment the actual viewer will be loaded from the domain www.yworks.com. Thus, the viewer has to be granted access rights to the GraphML file. Without further configuration swf files which are loaded from domain A (here: www.yworks.com) are not allowed to access data from domain B (e.g. your.domain.com). Domain B can permit this by providing a crossdomain policy file, crossdomain.xml. By default, Flash Player tries to load this file from the root folder of the domain from which the data should be loaded. Example: the HTML page is loaded from http://your.domain.com/en/graphs.html, the graph is loaded from http://your.domain.com/en/graphs/example.graphml. In this case Flash Player attempts to load the file http://your.domain.com/crossdomain.xml.

As web authors do not neccessarily have write access to that folder, GraphMLViewer additionally tries to load the crossdomain policy file from the folder in which the GraphML file is stored. Since Flash Player 10 such an access is only accepted if a so called meta policy grants read access to this folder.

Further information about this topic can be found here:

If loading both crossdomain policy files fails, GraphMLViewer loads the GraphML file through the external Javascript (GraphMLViewer.js). For this reason, it is not mandatory to provide a crossdomain policy file. However, loading via Javascript can be considerably slower than loading it directly.

Using GraphMLViewer without Javascript

It is possible to use the GraphMLViewer without Javascript. In this case it is mandatory to place the file crossdomain.xml in the root folder of the domain. The URL from which the SWF-file is loaded has to be set manually.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  id="GraphMLViewer" width="@WIDTH@" height="@HEIGHT@"
  codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
  <param name="movie" value="@VIEWERURL@" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <param name="allowScriptAccess" value="always" />
  <param name="FlashVars" value="graphUrl=@GRAPHURL@&overview=@OVERVIEW@&toolbar=@TOOLBAR@&tooltips=@TOOLTIPS@&
                                    &movable=@MOVABLE@&scrollbars=@SCROLLBARS@&links=@LINKS@&linksInNewWindow=@WINDOW@&
                                    &viewport=@VIEWPORT@"/>
  <embed src="@VIEWERURL@" quality="high" bgcolor="#ffffff"' +
            width="@WIDTH@" height="@HEIGHT@" name="GraphMLViewer" align="middle"' +
            play="true"
            loop="false"
            allowScriptAccess="always"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer"
            FlashVars="graphUrl=@GRAPHURL@&overview=@OVERVIEW@&toolbar=@TOOLBAR@&tooltips=@TOOLTIPS@&
                      &movable=@MOVABLE@&scrollbars=@SCROLLBARS@&links=@LINKS@&linksInNewWindow=@WINDOW@&
                      &viewport=@VIEWPORT@">
   </embed>
</object>

In the above listing, wildcards have been inserted for parameters which have to be customized. Appropriate values for these wildcards are described below. As most of these parameters have to be replaced twice (Internet Explorer and Mozilla / Firefox use different syntaxes), it is best to use your editor's search-and-replace function.