HOW TO ADD HYPERCOSM APPLETS TO A WEB PAGE
Adding Hypercosm applets to web pages is easy and requires just a few lines of HTML and Javascript code. Normally, this code is generated for you by Hypercosm Teleporter. However, if you want to do it manually, want to integrate applets into existing web pages, or simply want to see how it works, this short tutorial will show you how.
Add Javascript "include" files
The first step is to include a set of Javascript resource files that contain definitions and script code required by the applet. These Javascript files are used in each of the HTML skins that are used by Hypercosm Teleporter and may be downloaded from Hypercosm's web site's skin repository. To add these header files, include the HTML code below to the "head" section of your HTML page and make sure that the Javascript files that are referenced are present. The Javascript files that we will use for a basic Hypercosm applet are the following:
<script src="scripts/utilities/javascript_utils.js"></script> <script src="scripts/utilities/web_browser_utils.js"></script> <script src="scripts/utilities/string_utils.js"></script> <script src="scripts/utilities/browsersniffer.js"></script> <script src="scripts/utilities/hc_checkforplayer.js"></script> <script src="scripts/components/component.js"></script> <script src="scripts/applet/hc_applet.js"></script> |
Add "div" tag applet placeholder
This line indicates where the applet will actually be inserted into your web page. You can use the width and height attributes of the div tag to control the size of the applet.
<div id="applet" style="width:100%; height:100%; border: 0px"></div> |
Add Hypercosm applet script constructor
Next, we need to add some Javascript to transform the div tag that we added above into a Hypercosm applet. Do do this, we call the HCApplet constructor with the first argument being the element on the web page that corresponds to the div tag. A reference to this element is obtained using "getElementById" using the id of the div tag. The second parameter is the path to the applet (.hcvm) file relative to the web page. Additional optional parameters can be specified to specify resources (such as sounds or textures) to be used by the applet and command line parameters to configure the applet. These additional parameters are used by Hypercosm applets exported by Hypercosm Teleporter, for example, to define the applet's user interface. As this simple example shows, however, only the first two parameters are mandatory.
<script type="text/javascript">
//<![CDATA[
var applet = new HCApplet(document.getElementById("applet"),
"applet/applet.hcvm");
//]]
</script>
|