The editor is a Java applet and can be placed on a web page with the tag <applet>, for example:
<applet name="diagram_editor" width="400" height="300" codebase="./applet/" archive="ode.jar" code="DiagramEditor.class"> <param name="load" value="mydiagram.txt"> </applet>
|
The applet attributes The optional parameter |
The diagram data can be extracted in JavaScript with the applet's method getDiagram().
Then the data can be assinged to a hidden field of an HTML form and submitted to the server.
<script language="javascript">
function save() {
var editor = document.applets['diagram_editor']; // get reference to the applet
var form = document.saveform; // get reference to the form
form.diagram.value = editor.getDiagram(); // extract the data and assign it to "diagram" field
form.submit();
}
</script>
<form name="saveform" action="save.aspx" method="post" >
<input type="hidden" name="diagram">
<input type="button" value="Save" onclick="save()">
</form>
Then your server-side code can save the submitted data to file, database etc.In addition to the diagram structure the editor can return the diagram image in PNG format.
Use the applet's method getBase64Image() to extract the image. The method returns
the image file encoded with BASE64. The image can be sent to the server, decoded to binary
form and saved.
The diagram data can be extracted in JavaScript, converted to a JavaScript Object with the
function eval() or with JSON parser implemented in json2.js,
and then analysed.
<script language="javascript">
function analyse() {
// extract the data and convert it to JavaScript variable "diagram"
var editor = document.applets['diagram_editor'];
var diagram = eval('('+editor.getDiagram()+')');
// display the number of node and arcs
var n_nodes = diagram.nodes.length;
var n_arcs = diagram.arcs.length;
window.alert('The diagram has '+n_nodes+' node(s) and '+n_arcs+' arc(s).');
}
</script>
<form name="saveform" action="save.aspx" method="post" >
<input type="button" value="Analyse" onclick="analyse()">
</form>
The diagram format can be found here.
If you have several preloaded diagrams or load them with AJAX open them
with the applet's method openDiagram().
<script language="javascript">
var editor = document.applets['diagram_editor'];
editor.openDiagram(... valid diagram string ...);
</script>
If you generated new diagram with JavaScript stringify your JavaScript diagram object to JSON string and open it.
<script src="json2.js" language="javascript"></script>
<script language="javascript">
var editor = document.applets['diagram_editor'];
editor.openDiagram(JSON.stringify(myDiagramObject));
</script>
Since any new diagram replaces the current one it's wise to check if the diagram in the editor
has been changed and warn the user that the changes will be lost.
The applet's method isChanged() returns true in case of changes.
<script language="javascript">
function openWithCheck() {
var editor = document.applets['diagram_editor'];
if (editor.isChanged()) {
if (window.alert('The changes will be lost.\nContinue?')==false) {
return;
}
}
editor.openDiagram(... diagram string ...);
}
</script>
If you want to add a diagram to the current one instead of replacing it
use the applet's method addDiagram().
Any image displayed on the same HTML page can be used as a diagram Node which the user can drag and drop on the canvas.
To allow an image to be dragged on the canvas provide the following:
<img> tag enclosed in a <div> tag<img> attribute onmousedown="clipartDragger(event)"clipartDragger is defined in the file clipartdragger.js
which is located in the applet's directory and should be included in your page.
<script language="javascript" src="./applet/clipartdragger.js"></script>
....
<table><tr>
<td><div><img src="image1.gif" onmousedown="clipartDragger(event)"/></div></td>
<td><div><img src="image2.gif" onmousedown="clipartDragger(event)"/></div></td>
</tr></table>
Note: you can use only images located on your server.
In the diagram file image nodes
a saved with the attribute "icon_ref" which is the image's URL.
To change the editor background use the applet parameter bgcolor,
for example:
<applet name="diagram_editor" width="400" height="300" codebase="./applet/" archive="ode.jar" code="DiagramEditor.class"> <param name="bgcolor" value="#FFFFFF"> </applet>
To translate the program messages and labels open the file english.txt
located in the applet's directory and translate text right to each = sign. Then save
the file in the applet directory using a different name, for example german.txt,
and specify it with the applet parameter resources
<param name="resources" value="german.txt">
The resource file should be saved in Latin-1 encoding. If your language can't be
represented in Latin-1, such as Greece, Russian, etc. write every foreign character
in the file using its unicode value: \uXXXX.
To change the icons on the tool panel rename the applet file ode.jar
to ode.zip, unpack it with any ZIP utility, and replace the images
in the directory icons. Then pack the file back keeping the directory
structure and rename it to ode.jar.