首頁 > 其他

Silverlight1.0開發嚮導

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一步：在HTML頁面加入Javascript引用
這步主要是要在HTML頁面中插入Silverlight.js和createSilverlight.js這兩個檔案的引用，並建立一個HTML元素來作為silverlight外掛程式的宿主。
Silverlight.js是跨平台瀏覽所需要的一個輔助性檔案，你可以在Silverlight 1.0 SDK的Tools目錄找到。
首先開啟HTML頁面並在<head>部分添加下欄標籤：

Java代碼

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

再建立一個空白的createSilverlight.js，我們隨後會用到這個檔案。在你的HTML頁面中同樣也添加這個指令碼的引用，如下：

Java代碼

  1. <script type="text/javascript" src="createSilverlight.js"></script>  
<script type="text/javascript" src="createSilverlight.js"></script>

最後得到這樣一個HTML頁面：

Java代碼

  2. <!DOCTYPE html PUBLIC   
  3. "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
  6.   <head>   
  7.     <title>A Sample HTML page</title>   
  8.     <script type="text/javascript" src="Silverlight.js"></script>   
  9.     <script type="text/javascript" src="createSilverlight.js"></script>   
  10.   </head>   
  11.   <body>   
  12.   </body>   
  13. </html>  
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>    <title>A Sample HTML page</title>    <script type="text/javascript" src="Silverlight.js"></script>    <script type="text/javascript" src="createSilverlight.js"></script>  </head>  <body>  </body></html>

第二步 建立HTML宿主要元素和初始化段
在HTML檔案中添加下面三行就可以建立用來呈現Silverlight內容的HTML宿主要元素，

Java代碼

  1. <!-- Where the Silverlight plug-in will go-->   
  2. <div id="mySilverlightPluginHost">   
  3. </div>  
<!-- Where the Silverlight plug-in will go--><div id="mySilverlightPluginHost"></div>

你可以根據需要修改<div>標記的ID。重複上面的步驟就可以在同一頁面內建立多個SilverLight的執行個體，不過要保證ID是唯一的。
建立初始化段：在剛添加的HTML標記之後加入下面的指令碼。

Java代碼

  1. <script type="text/javascript">   
  4. // Retrieve the div element you created in the previous step.
  5.         var parentElement =    
  6.             document.getElementById("mySilverlightPluginHost");   
  8. // This function creates the Silverlight plug-in.
  9.         createMySilverlightPlugin();   
  11. </script>  
<script type="text/javascript">                        // Retrieve the div element you created in the previous step.        var parentElement =             document.getElementById("mySilverlightPluginHost");                // This function creates the Silverlight plug-in.        createMySilverlightPlugin();        </script>

對於頁面中有多個SilverLight執行個體，則需重複上述步驟多次。你可以使用名稱唯一的函數,或者你使用一個函數然後用唯一的ID來作為參數來建立這些執行個體。同時要保證每段指令碼都緊跟在相關的DIV元素之後。
現在我們得到下面的html

Java代碼

  1. <!DOCTYPE html PUBLIC   
  2. "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
  5.   <head>   
  6.     <title>A Sample HTML page</title>   
  7.     <script type="text/javascript" src="Silverlight.js"></script>   
  8.     <script type="text/javascript" src="createSilverlight.js"></script>   
  9.   </head>   
  10.   <body>   
  12.     <!-- Where the Silverlight plug-in will go-->   
  13.     <div id="mySilverlightPluginHost">   
  14.     </div>   
  15.     <script type="text/javascript">   
  18. // Retrieve the div element you created in the previous step.
  19.         var parentElement =    
  20.             document.getElementById("mySilverlightPluginHost");   
  22. // This function creates the Silverlight plug-in.
  23.         createMySilverlightPlugin();   
  25.     </script>   
  27.   </body>   
  28. </html>  
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>    <title>A Sample HTML page</title>    <script type="text/javascript" src="Silverlight.js"></script>    <script type="text/javascript" src="createSilverlight.js"></script>  </head>  <body>    <!-- Where the Silverlight plug-in will go-->    <div id="mySilverlightPluginHost">    </div>    <script type="text/javascript">                        // Retrieve the div element you created in the previous step.        var parentElement =             document.getElementById("mySilverlightPluginHost");                // This function creates the Silverlight plug-in.        createMySilverlightPlugin();            </script>  </body></html>

第三步：定義建立函數來初始化外掛程式的執行個體
開啟第一步建立的 createSilverlight.js 並添加下面的JavaScript函數。

Java代碼

  2. function createMySilverlightPlugin()   
  3. {     
  4. Silverlight.createObject(   
  5. "myxaml.xaml",                  // Source property value.
  6.         parentElement,                  // DOM reference to hosting DIV tag.
  7. "mySilverlightPlugin",         // Unique plug-in ID value.
  8.         {                               // Per-instance properties.
  9.             width:'300',                // Width of rectangular region of 
  10. // plug-in area in pixels.
  11.             height:'300',               // Height of rectangular region of 
  12. // plug-in area in pixels.
  13.             inplaceInstallPrompt:false, // Determines whether to display 
  14. // in-place install prompt if 
  15. // invalid version detected.
  16.             background:'#D6D6D6',       // Background color of plug-in.
  17.             isWindowless:'false',       // Determines whether to display plug-in 
  18. // in Windowless mode.
  19.             framerate:'24',             // MaxFrameRate property value.
  20.             version:'1.0' // Silverlight version to use.
  21.         },   
  22.         {   
  23.             onError:null,               // OnError property value -- 
  24. // event handler function name.
  25.             onLoad:null // OnLoad property value -- 
  26. // event handler function name.
  27.         },   
  28. null);                          // Context value -- event handler function name.
  29. }  
      function createMySilverlightPlugin(){      Silverlight.createObject(        "myxaml.xaml",                  // Source property value.        parentElement,                  // DOM reference to hosting DIV tag.        "mySilverlightPlugin",         // Unique plug-in ID value.        {                               // Per-instance properties.            width:'300',                // Width of rectangular region of                                         // plug-in area in pixels.            height:'300',               // Height of rectangular region of                                         // plug-in area in pixels.            inplaceInstallPrompt:false, // Determines whether to display                                         // in-place install prompt if                                         // invalid version detected.            background:'#D6D6D6',       // Background color of plug-in.            isWindowless:'false',       // Determines whether to display plug-in                                         // in Windowless mode.            framerate:'24',             // MaxFrameRate property value.            version:'1.0'               // Silverlight version to use.        },        {            onError:null,               // OnError property value --                                         // event handler function name.            onLoad:null                 // OnLoad property value --                                         // event handler function name.        },        null);                          // Context value -- event handler function name.}

這個指令碼裡包含許多你想定製的參數,比如外掛程式的長寬(也可以用百分比), 包含呈現內容的XAML檔案名稱, 是否使用Windowsless模式。
在同一頁面裡如果有多個Silverlight外掛程式，則要為每一個建立一個新的函數。或者比較簡單的建立一個帶參數的函數，然後根據外掛程式的ID分別調用不同的代碼。
第四部 建立Silverlight呈現內容。
現在HTML檔案已經配置完畢，該建立呈現內容了。
在這個HTML所在的目錄下建立一個名叫"myxaml.xaml"的空白檔案。如果你在上一步使用了不同的檔案名稱，記得與之匹配。
如果SliverLight項目要進行事件處理，或者與代碼動態產生，或者與使用者互動，它需要一些額外的javascript指令碼，並在HTML頁面中添加引用。下面的例子裡我們引用了一個叫my-script.js的指令碼

Java代碼

  1. <script type="text/javascript" src="my-script.js"></script>  
<script type="text/javascript" src="my-script.js"></script>

整個html如下：

Java代碼

  2.   <!DOCTYPE html PUBLIC   
  3. "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
  6.   <head>   
  7.     <title>A Sample HTML page</title>   
  8.     <script type="text/javascript" src="Silverlight.js"></script>   
  9.     <script type="text/javascript" src="createSilverlight.js"></script>   
  10.     <script type="text/javascript" src="my-script.js"></script>   
  11.   </head>   
  12.   <body>   
  14.     <!-- Where the Silverlight plug-in will go-->   
  15.     <div id="mySilverlightPluginHost">   
  16.     </div>   
  17.     <script type="text/javascript">   
  20. // Retrieve the div element you created in the previous step.
  21.         var parentElement = document.getElementById("mySilverlightPluginHost");   
  22.         createMySilverlightPlugin();   
  24.     </script>   
  26.   </body>   
  27. </html>  
  <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>    <title>A Sample HTML page</title>    <script type="text/javascript" src="Silverlight.js"></script>    <script type="text/javascript" src="createSilverlight.js"></script>    <script type="text/javascript" src="my-script.js"></script>  </head>  <body>    <!-- Where the Silverlight plug-in will go-->    <div id="mySilverlightPluginHost">    </div>    <script type="text/javascript">                        // Retrieve the div element you created in the previous step.        var parentElement = document.getElementById("mySilverlightPluginHost");        createMySilverlightPlugin();            </script>  </body></html>

建立多個外掛程式須知：

    建立多個外掛程式只需要重複上面的2,3,4步驟。
    每個宿主的<div>標籤需要有唯一的標示。
    每一段初始代碼必須緊跟在對應的<div>標籤之後。
    每個外掛程式的ID參數也必須是唯一的。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More