Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Microsoft ilverlight and Rich Internet Applications

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Embedding Silverlight in HTML

Expression Blend generates an HTML wrapper named Default.html for your Silverlight application when you first create the Silverlight project.

Embedding Silverlight in HTML

 

Expression Blend generates an HTML wrapper named Default.html for your Silverlight application when you first create the Silverlight project. Figure 19.14 shows a version of this file that we formatted for readability. You can open Default.html in a supported web browser to test your application. You can embed a Silverlight application into an existing HTML file by including the scripts (lines 8–10), the silverlightHost style class (lines 12–13) and the SilverlightControlHost div (lines 17–21). You can adjust the width and height of your application by changing the width and height attributes of the sil-verlightHost style class (lines 12–13).

 

1    <!-- Fig. 19.14: Default.html -->

 

2    <!-- HTML wrapper for Movie Viewer. -->

 

3    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 

4          "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

 

5    <html xmlns = "http://www.w3.org/1999/xhtml">

 

6          <head>

 

7                 <title>MovieViewer</title>

 

8                 <script type = "text/javascript" src = "Silverlight.js"></script>

 

9                  <script type = "text/javascript" src = "Default_html.js"></script>

 

10               <script type = "text/javascript" src = "Page.xaml.js"></script>

 

11               <style type = "text/css">

12   .silverlightHost { height: 480px;

13   width: 640px }

14   </style>

</head>

16         <body>

 

17                <div id = "SilverlightControlHost" class = "silverlightHost">

 

18                      <script type = "text/javascript">

19                            createSilverlight();

 

20                      </script>

 

21                </div>

 

22         </body>

 

23   </html>

 

Fig. 19.14 | HTML wrapper for Movie Viewer. (Part 2 of 2.)

 

The  createSilverlight  function  (line  19)  is  located  in  Default_html.js

 

(Fig. 19.15). This function inserts the Silverlight plug-in object in the SilverlightCon-trolHost div. The Default_html.js file that Expression Blend creates will not work with our project because it tries to access function Page in the JavaScript, which no longer exists. You must remove the lines instantiating the scene variable and set the onLoad event to null (line 15).

 

1    // Fig. 19.15: Default_html.js

 

2    // Create Silverlight object in SilverlightControlHost div.

 

3    function createSilverlight()

4    {

 

5          Silverlight.createObjectEx( {

 

6                 source: "Page.xaml",

 

7                 parentElement: document.getElementById( "SilverlightControlHost" ),

 

8                 id: "SilverlightControl",

 

9                 properties: {

 

10                      width: "100%",

 

11                      height: "100%",

 

12                      version: "1.0"

13                },

 

14                events: {

 

15                      onLoad: null

16                }

17         } );

18   }

19

20   if ( !window.Silverlight )

 

21         window.Silverlight = {};

22          

23   Silverlight.createDelegate = function( instance, method ) {

 

24         return function() {

 

25                return method.apply( instance, arguments );

26         }

27   }

 

Fig. 19.15 | Creates Silverlight object in SilverlightControlHost div.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.