Instructions

Using Timesheets JavaScript Engine is easy. First, you should download and install the engine as described in the download section. After that, you have to do the following steps to use Timesheets JavaScript Engine on your web page.

  1. Declare the namespace
  2. Load the Timesheet JavaScrip Engine
  3. Define the timesheet
  4. Start the engine

This section will describe the above steps in detail. In addtion, several example of how to use the Timesheets JavaScript Engine are given in the Tests and Examples sections.

Declare the Namespace

SMIL 3.0 External Timing Module allows the integration of SMIL based timing in other XML languages. In practise, this means that you need a host language for the Timesheets. Typical examples of host languages are other XML based languages, such as XHTML and SVG. To use Timesheets within a host language, you must desclare the SMIL namespace within the host language, preferably, right after the host language namespace declaration, as shown in the following example.

	<html xmlns="http://www.w3.org/1999/xhtml"
	      xmlns:smil="http://www.w3.org/2007/07/SMIL30/Timesheets">

The above example shows, how the Timesheets is declared in XHTML language. The declaration is located in the head section of the XHTML document. First, the XHTML namespace is defined within the html tag. Then, the smil namespace is defined within the same tag.

Load the Timesheet JavaScrip Engine

After you have declared the SMIL namespace, you should load the Timesheets JavaScript Engine. For example, in XHTML this should be done in the head section of the document, as shown in the following example.

 	<head>  
	  <script src="engine0_5.js" />

In the above example, the Timesheets Javascrip engine is loaded right after the XHTML head tag. To load the engine, you have to include a piece of script in the XHTML page. This can be done with an external script file inclusion as shown above. In this example, the script is located in the same directory as the web page.

Define the Timesheet

After you have load the engine, you should define the timesheet. This should be done before the actual content of the document. For example, in XHTML document the timesheet can be defined in the head section, as shown in the following example.

	  <smil:timesheet>
	    <smil:seq>
	      <smil:item select=".Slide" dur="5s" />
	    </smil:seq>
	  </smil:timesheet>
	</head>

The timesheet definition is included within the opening and closing timesheets tags. Since these tags belong to the SMIL timesheets, they include the smil prefix.

Start the Engine

Finally, you should start the Timesheets JavaScript Engine after the actual document content has been loaded. For example, in XHTML documents this can be done in the end of the body section, as shown in the following example.

	  <script>
	    timesheetEngine();
	  </script>
	</body>

In the above example, the Timesheets JavaScript Engine is started simply by calling the timesheetEngine() function within JavaScript code.

If you want to debug the Timesheets Javascript implementation, for example, using the Firebug, include "debug" parameter in the timesheetEngine("debug") function call.