Add Silverlight Content to a Topic

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn how you can add Silverlight™ content to your topics.

Silverlight ™ is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

THIS TOPIC IS A WORK IN PROGRESS

Copy the script and XAML content files

THIS TOPIC IS A WORK IN PROGRESS

Create the loader script

To associate the XAML canvas with the HTML element that will host the Silverlight control, some sort of loader script is needed. It's named silverlight_loader.js below.

To be a bit more reusable across different pages, the script should support different XAML file and different HTML element ID. Here's a modified version of the script created by the Microsoft Expression Blend software.

JavaScript
function createSilverlight(sXamlPage, sElementId)	{
 var scene = new SilverlightSite1.Page();
 Silverlight.createObjectEx({
       source: sXamlPage,
       parentElement: document.getElementById(sElementId),
       id: "SilverlightControl",
       properties: {
           width: "100%",
           height: "100%",
           version: "1.0"
           },
       events: {
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
            onError: function(sender, args) {
             var errorDiv = document.getElementById("errorLocation");
             if (errorDiv != null) {
               var errorText = args.errorType + "- " + args.errorMessage;
               if (args.ErrorType == "ParserError") {
                errorText += "<br>File: " + args.xamlFile;
                errorText += ", line " + args.lineNumber;
                errorText += " character " + args.charPosition;
               }
             else if (args.ErrorType == "RuntimeError") {
              errorText += "<br>line " + args.lineNumber;
               errorText += " character " + args.charPosition;
              }
             errorDiv.innerHTML = errorText;
            }
           }
          }
         });
        }
      if (!window.Silverlight)
       Silverlight = {};
       Silverlight.createDelegate = function(instance, method) {
       return function() {
        return method.apply(instance, arguments);
        }
}

Note that the XAML page and the Silverlight host element ID are now passed to the above function as parameters, so the function can be reused across topics.

Add the Silverlight scripts reference to the template

To have access to the Silverlight code on each topic in your collection, add the script references you your template by following these steps.

  1. Open the collection's property dialog window;
  2. Open the collection's template for editing;
  3. Add the following lines to the <head> element of the HTML template;
HTML
<script type="text/javascript" src="silverlight.js"></script>
<script type="text/javascript" src="silverlight_loader.js"></script>

Add the script reference to your topic

One the Silverlight setup is establiashed, you can include Silverlight content in any topic using simple markup like the one shown here.

HTML
<div id="silverlightControlHost">
 <script type="text/javascript">
  createSilverlight("Page.xaml" ,"silverlightControlHost");
</script>
</div>

In the above markup, the file Page.xaml is loaded in the silverlightControlHost element. All the required scripts are already referenced in the publication's template.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back
72 / 194