Responding to Page Load Events

You specify a JavaScript event handler to manage page load events using the onLoad parameter introduced in Table 5-1. This fires after the XAML content within the Silverlight control has completely loaded. Note that if you have defined a loaded event on any XAML UI element, those events will fire before the Silverlight control’s onLoad event does. In addition to this, the control has a read-only IsLoaded property that is set immediately before the onLoad event fires.

When using an onLoad event handler, your JavaScript function should take three parameters: The first is a reference to the control, the second is the user context, and the third is a reference to the root element of the XAML. Following is an example:

function handleLoad(control, userContext, rootElement) { 
   ... 
}

Handling Parameters

When you call the createObject function to instantiate Silverlight, you can pass parameters to it using the initParams property. This property is a string value, so, if you have multiple values, you can encode them into a comma separated string which is easily sliced in JavaScript. Following is an example of setting up the Silverlight control that has three parameters:

function createSilverlight()
{ 
   Silverlight.createObject( 
       "Scene.xaml", 
       document.getElementById("SilverlightControlHost"), 
       "mySilverlightControl", 
       { 
           width:'300', 
           height:'300', 
           inplaceInstallPrompt:false, 
           background:'#D6D6D6', 
           isWindowless:'false', 
           framerate:'24', 
           version:'1.0' 
       }, 
       { 
           onError:null, 
           onLoad:handleLoad 
       }, 
       "p1, p2, p3", // Parameter List 
       null); 
}

Here the parameters p1, p2, and p3 are encoded into a comma-separated string. JavaScript has a string split method that allows you to split a comma-separated string into an array of values.

Following is an example of an onLoad event handler that uses this method to split the parameter list into an array of strings and to display each one in an alert box.

function handleLoad(control, userContext, rootElement) 
{ 
      var params = control.initParams.split(","); 
      for (var i = 0; i< params.length; i++) 
      { 
          alert(params[i]); 
      } 
}

User Context

An additional parameter that can be passed to the Silverlight control is the context parameter. This will be included directly in the onLoad event as the second parameter, typically named userContext. It behaves exactly the same as the previous parameters you’ve seen, in that it is a property value that can be queried after the control has rendered. Typically, user context is not used for control parameters, however. It is instead used as a reference variable to distinguish different controls, though there is nothing to prevent you from using it to parameterize your control.

Following is an example of a page that hosts two Silverlight controls. Note that the name and context variables are set in this host page and then referenced within the JavaScript that creates the Silverlight control:

<html> 
<head> 
   <script type="text/javascript" src="Silverlight.js"></script> 
   <script type="text/javascript" src="createSilverlight.js"></script> 
   <script type="text/javascript"> 
       function handleLoad(control, userContext, rootElement) 
       { 
            alert(userContext); 
       } 
   </script> 
</head> 
<body> 
   <div id="firstControl"> 
      <script type="text/javascript"> 
          var parentElement = document.getElementById("firstControl"); 
          var name = "agc1"; 
          var context = "the first control"; 
          createSilverlight(); 
      </script> 
   </div> 
   <div id="secondControl"> 
      <script type="text/javascript"> 
          var parentElement = document.getElementById("secondControl"); 
          var name = "agc2"; 
          var context = "the second control"; 
          createSilverlight(); 
     </script> 
   </div> 
</body> 
</html>

Here you can see two DIV elements, called firstControl and secondControl. They set up the parentElement, name, and context values before calling a modified version of createSilverlight:

function createSilverlight()
{ 
    Silverlight.createObject( 
        "Scene.xaml", 
        parentElement, 
        name, 
        { 
            width:'300', 
            height:'300',
            inplaceInstallPrompt:false, 
            background:'#D6D6D6'
            isWindowless:'false'
            framerate:'24', 
            version:'1.0' 
        }, 
        { 
            onError:null,
        onLoad:handleLoad 
        }, 
        "p1, p2, p3", // Parameter List 
        context); 
}

This takes the parentElement, name, and context values that were set up within the HTML page that you saw earlier, demonstrating that the same createSilverlight function can be spread across multiple controls.

The HTML page contains the onLoad event handler, which you can see here:

<script type="text/javascript"> 
    function handleLoad(control, userContext, rootElement) 
    { 
         alert(userContext); 
    } 
</script>

This takes the userContext parameter and displays the context value in an alert box. You can see how this appears on screen in Figure 5-1, where the HTML page is displaying the context for the first control.

< Back      Next >

  • Last updated on