MarvinSketch Example - Embedding MarvinSketch applet in HTML pages

This section covers the basic ways of creating Marvin Applets and embedding them in HTML pages.

Simple embedding

To support the use of Marvin Applets, ChemAxon provides utility functions that help to overcome the problems of working with HTML tags. These utilities are stored in the marvin.js JavaSript file.
The live MarvinSketch applet embedded in the HTML page appears as follows:

To achieve this the following lines should be included in the HTML page:

<script type="text/javascript" SRC="../../../marvin.js"></script>
<script type="text/javascript">
<!--

msketch_begin("../../..", 540, 480); // arguments: codebase, width, height
msketch_end();

//-->
</script>

Technical background

Sun recommends to include applets in HTML pages by using the APPLET tag:

<applet CODEBASE="../../.." ARCHIVE="appletlaunch.jar"
        CODE="JMSketchLaunch" WIDTH=540 HEIGHT=480>
<strong>Your browser does not support the applet tag.</strong>
</applet>

The CODEBASE option specifies the directory of the Marvin binaries relative to the HTML file. This HTML file is in a subdirectory of the Marvin binaries directory, that's why we use "../../.." here.
The ARCHIVE option is used to preload resources that can significantly improve the performance of applets.
For more information, please see the About resources section.
The CODE attribute specifies the name of the applet class. The text "Your browser does not support the applet tag." is displayed if someone visits the web page with a browser that is not Java compatible.

However there is a note in The Java Tutorials, that makes the situation more complicated:

Note: The HTML specification states that the applet tag is deprecated, and that you should use the object tag instead. However, the specification is vague about how browsers should implement the object tag to support Java applets, and browser support is currently inconsistent. It is therefore recommended that you continue to use the applet tag as a consistent way to deploy Java applets across browsers on all platforms.

There are three possible platform dependent solutions available overall:

```
<applet ARCHIVE="appletlaunch.jar">
```
```
<embed>
```
```
<object>
```

The embed tag is used to deploy applets that are to be used only with the Mozilla family of browsers (including FireFox), the object tag with Internet Explorer, while the applet tag is general. However with the applet tag, the required Java Plug-in cannot be automatically downloaded and installed while it can with the two other solutions.
The most reliable way among these is to use the applet tag as Sun recommends.

About resources

Before version 5.2.1 the jmarvin.jar compressed JAR file was used as applet resource. The appletlaunch.jar file contains a wrapper to the binaries stored in jmarvin.jar. It performs loading of the applet resources in the background while displaying a splash screen.

It is also possible to use jmarvin.jar directly. This usage is sometimes referred to as old behavior.

In this case the applet creation is as follows:

<script type="text/javascript" SRC="../../../marvin.js"></script>
<script type="text/javascript">
<!--

msketch_begin("../../..", 540, 480, true); // arguments: codebase, width, height, true means the old behavior 
msketch_end();

//-->
</script>

The same behavior with the <applet> tag:

<applet CODEBASE="../../.." ARCHIVE="jmarvin.jar"
        CODE="JMSketch" WIDTH=540 HEIGHT=480>
<strong>Your browser does not support the applet tag.</strong>
</applet>

Reference to the applet

If you would like to refer to the applet, for example to use the applet's API methods via JavaScript, you need to assign a unique name to it. You can use the ID or NAME attributes to do this.
If you specify the NAME attribute, you can refer to the applet as a field of the document object. For example, if the value of the name attribute is MSketch, you can refer to the titled object as document.MSketch.
If you prefer the ID attribute, you can refer to the object with the getElementById() method. For example, if the value of the ID attribute is MSketch, you can refer to the object as document.getElementById("MSketch").

<applet CODEBASE="../../.." ARCHIVE="jmarvin.jar" id="MSketch"
        CODE="JMSketch" WIDTH=540 HEIGHT=480>
<strong>Your browser does not support the applet tag.</strong>
</applet>

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

function doSomething() {
	applet = document.getElementById("MSketch");
	if(applet != null) {
		alert(applet.getMol("smiles"));
	}
}

//-->
</script>

If you use the marvin.js script to generate applet code, you can specify the name of the applet by assigning a value to msketch_name (for MarvinSketch), mview_name (for MarvinView) or mspace_view (for MarvinSpace) variables. For example:

<script type="text/javascript" SRC="../../../marvin.js"></script>
<script type="text/javascript">
<!--

msketch_name="MSketch";
msketch_begin("../../..", 540, 480, true); // arguments: codebase, width, height, true means the old behavior 
msketch_end();

//-->
</script>

In this case you can refer to the applet instance in both ways (document.MSketch or document.getElementById("MSketch")).
If the assigned name is not unique, document.MSketch returns an array instead of the applet instance, which may cause the document.MSketch.getMol("smiles") statement throwing an exception because of wrong casting.

The next example introduces the use of applet parameters.