<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>
<script> part) to the appropriate place. Width and height can be configured via the
width and height parameters.
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.
| Name | Description | Values | Default | |||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Necessary Parameters | ||||||||||||||||||||||||||||||||||||||||||
| graphUrl | The URL of the GraphML file to display | String | - | |||||||||||||||||||||||||||||||||||||||
| Optional Parameters | ||||||||||||||||||||||||||||||||||||||||||
| width | The width of the viewer (% or absolute) | size | 100% | |||||||||||||||||||||||||||||||||||||||
| height | The height of the viewer (% or absolute) | size | 100% | |||||||||||||||||||||||||||||||||||||||
| overview | Whether to show an overview window. "true" enables the overview. | true, false | false | |||||||||||||||||||||||||||||||||||||||
| toolbar | Whether to show the tool bar. "true" enables the tool bar, if the view can be moved (movable=true). | true, false | false | |||||||||||||||||||||||||||||||||||||||
| movable | Whether the user is allowed to move or zoom the view. "true" enables moving the view. | true, false | false | |||||||||||||||||||||||||||||||||||||||
| scrollbars | Whether to show scroll bars if the diagramm is larger than the visible part. "true" enables scroll bars. | true, false | true | |||||||||||||||||||||||||||||||||||||||
| tooltips | Whether to show tool tips. "true" enables tool tips. | true, false | false | |||||||||||||||||||||||||||||||||||||||
| links | Whether the user is allowed navigate to web links which are attached to graph elements. "true" enables navigation. | true, false | false | |||||||||||||||||||||||||||||||||||||||
| linksInNewWindow | Whether to open web links in a new browser window. Web links are opened in a new window if set to "true" | true, false | true | |||||||||||||||||||||||||||||||||||||||
| viewport | The 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 numbers | full | |||||||||||||||||||||||||||||||||||||||
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>
GetUrl() which returns the URL of the current document is needed.LoadGraphML(url) which loads a GraphML file from the given URL and returns
its contents as String is needed."allowScriptAccess" to
"always" in the Flash Player's starting method.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.
The following files are necessary to integrate the GraphMLViewer into a HTML page for local preview:
If you don't want to place all files in one folder it is possible to customize the folder structure:
graphUrl parameter of the RunPlayer() function has to be changed
to the new URL. The rules for definig URLs in HTML documents apply here, too: If you provide a relative URL
(recommended), the URL relates to the HTML file.src attribute of the script tags, which refers
to the file (<script type="text/javascript" language="javascript" src="GraphMLViewer.js"></script>)
accordingly.var url = "GraphMLViewer.swf"; in the RunPlayer()
function in GraphMLViewer.js. The rules for definig URLs in HTML documents apply here, too.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:
GraphMLViewer.swf is not needed on the web server and thus does not have to be uploaded.<allow-access-from domain="www.yworks.com"/> to the list <cross-domain-policy>.
Please read the following section for more details.
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.
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. Note that zooming per mouse wheel doesn't work without Javascript on Macintosh systems.
<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.
GraphMLViewer.swf if the viewer is placed in the same folder as the
HTML page).http://www.yworks.com/products/graphmlviewer/1.0.1/GraphMLViewer.swf.
graphUrl (see above)overview (see above)toolbar (see above)movable (see above)scrollbars (see above)tooltips (see above)links (see above)linksInNewWindow (see above)viewport (see above)