Thursday, November 18, 2010

Implementing DemoMate Event Logging

The DemoMate Silverlight Tutorial Player has support for reporting events to the host HTML page, allowing for dynamic, interactive pages based on the progress of the tutorial. This support is in beta form and is subject to change; please contact DemoMate support if you have any questions or concerns about the behavior of the Tutorial Player when Scripting Support has been enabled.

Packaging Your Tutorial

Before you can enable scripting support, you must first package your demo as a Tutorial. Both the “Multiple Files” and the “Single File” Output options support scripting. The “Single Executable” option is not Silverlight based, and thus cannot be used for scripting.

Writing Your Scripting Functions

The packaged Tutorial contains a simple sample HTML file that demonstrates how the XAP file should be embedded into a website. You can use this file as a starting point for your own design. Before you can enable Scripting Support, you must write two functions that will be used by the Silverlight Tutorial Player to report events to your host HTML page.

The <object> Tag

The tag in the sample HTML file places the Silverlight Tutorial Player on your web page. In order to register for Scripting Events, you’ll need to make two changes to the sample code as indicated:

<object id="myTutorialPlayer" data="data:application/x-silverlight," type="application/x-silverlight-2" width="399px" height="346px">
<param name="onload" value="tutorialLoaded" />
<!-- other param tags -->
</object>

The sections indicated in italics are the additional changes. There are two settings that are important in the next steps:

  • The id attribute: this can take any value, and is used to identify the Silverlight Tutorial Player when registering to receive events.
  • The value attribute of the onLoad parameter: This attribute can also take any value, and is used to tell the Silverlight Tutorial Player what function to invoke to allow your code to register for additional events.

Both of these attributes are used in the section “Registering to Receive Events”, below.

The Event Handler

The event handler function takes the form:

function trackTutorialEvent(tutorialPlayerObject, tutorialEvent)
{
var eventAction = tutorialEvent.EventName;
var tutorialName = tutorialEvent.TutorialName;
var tutorialId = tutorialEvent.TutorialId;
// Your event handling code:}
}

This event handler is later used in the section “Registering to Receive Events”, below.

The arguments to this event handler are:

  • tutorialPlayerObject: This is an opaque reference to the Tutorial Player Engine. At this time it has no supported attributes for inspection.
  • tutorialEvent: This object represents the event being emitted. Possible attributes are:
    • EventName: The name of the event being emitted. The current supported values are “TutorialBegun” and “TutorialCompleted”. There may be other events emitted that are unsupported at this time.
    • TutorialName: The name of the tutorial that generated the event.
    • TutorialId: A unique Id for the tutorial.

Registering to Receive Events

Once you’ve written an event handler that does what you want, you can register your event handler with the Silverlight Tutorial Player. This function takes the form:

function tutorialLoaded()
{
var tutorialPlayer = document.getElementById("myTutorialPlayer").Content.TutorialPlayer;
tutorialPlayer.TutorialEvent = trackTutorialEvent;
}

This function loads the tutorial player object from the DOM and registers the TutorialEvent event handler that we previously wrote. Note:

  • The name of the function must match the value attribute of the onLoad parameter added to the object tag
  • The argument to getElementById must match the id attribute of the object tag.
  • The value assigned to TutorialEvent must be the name of the event handler function.

Questions

Contact DemoMate Support at support@demomate.com or your Impresys Corporation representative for further information regarding this feature.

No comments: