用Visual Studio 2008進行Silverlight開發



微軟
的

Silverlight
瀏覽器外掛使得開發者能夠執行富因特網程式(RIAs)--包括動畫，向量圖形和視訊回放等等。看看如何進行Silverlight開發，並且感受一下這種新的開發方式吧。本文程式碼下載：http://assets.devx.com/sourcecode/20341.zip


　　經過多年發展，我們看到了Web應用程式的繁榮。早期的Web網站僅僅支援靜態的HTML頁面，圖片和文字訊息。然後，伺服器端技術如CGI， ASP和JSP等使得Web硬喲程式變成了現實，使用者突然可以在Web上做很多事情了，比如線上購買商品，預訂等等。客戶端技術如Javascript等輔助提高了使用者的Web應用體驗，使得它們更加具備響應性。儘管AJAX的相關技術已經成熟很多年了，但也就是在最近幾年人們才開始花費大量時間開發 AJAX的Web應用程式。所有這一切都是為了同一個目標--使得Web應用程式交互性和響應能力更強。


　　今天，又出現了一個新名詞--RIA，是Rich Internet Applications的縮寫。對於微軟來說，RIA實際代表著Rich Interactive Applications。微軟最近啟動了一個相關的技術/產品名為Silverlight。原名為Windows Presentation Foundation/Everywhere(WPF/E)的Silverlight是一個瀏覽器外掛，能夠使得開發者建立RIA程式包括動畫，向量圖形和視訊回放等等。


　　這篇文章輔助你瞭解Silverlight的開發，希望給你一個很好的關於Silverlight開發的講解。


　　

Silverlight
現狀


　　目前，有兩個版本的Silverlight：1.0(發佈版)和1.1(alpha發佈)，主要的區別在於是否支援.NET語言1.1版本。對於1.0版本，你必須使用Javascript來寫你的程式邏輯。在1.1版本裡，你可以使用C#或者VB進行程式邏輯開發，通過CLR來執行。


　　Silverlight執行時目前支援下列瀏覽器：


　　‧ Internet Explorer 6/7


　　‧ Firefox 1.5/2.0


　　‧ Safari 2.0


　　本文著重講解Silverlight1.1的內容。


　　取得開發工具


　　為了開發Silverlight應用程式，你必須獲得以下執行時/工具：


　　執行時：


　　為了在瀏覽器裡檢視Silverlight應用程式，下載如下內容：


　　Microsoft Silverlight 1.0 Release Candidate


　　‧ Mac


　　‧ Windows


　　‧ Microsoft Silverlight 1.1 Alpha Refresh


　　‧ Mac


　　‧ Windows


　　‧ Microsoft ASP.NET Futures (July 2007)


　　ASP.NET Futures下載包含了用於支援Silverlight程式的最新ASP.NET控制項。


　　開發工具：


　　正式版已出 VS 2008正式版開發工具開放下載 （Visual Studio 2008 有哪些版本 ）


　　當你下載並安裝了VS2008之後，下載Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)，這是一個用來建立Silverlight程式的VS2008增強包。安裝它會為VS2008Beta2新增如下特性：NET 3.5和VS 2008中的ASP.NET AJAX



  1. VB和C#工程模板

  2. IntelliSense和XAML程式碼產生器

  3. Silverlight程式的調試

  4. Web引用支援

  5. 和Expression Blend的集成


  6. VS 2008一些Web開發新特性


　　另外，你還需要如下專業工具來進行Silverlight開發：


　　‧ Expression Blend 2.5 Preview: 專業級Silverlight使用者交互開發工具（Expression Blend 2 十二月 預覽版）


　　‧ Expression Media Encoder Preview Update: Microsoft Expression Media的特性之一，允許你建立和增強視訊


　　‧ Expression Design: 用來建立Silverlight程式的專業插圖和繪圖設計工具。


　　最後，你需要下載下列包含文檔和例程程式碼的SDK ：


　　‧ Microsoft Silverlight 1.0 Software Development Kit Release Candidate


　　‧ Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh


　　開始撰寫程式


　　當安裝好上述工具之後，你可以建立你的第一個Silverlight程式了。打開VS2008，建立一個新工程。工程類型選擇 Silverlight，選擇Silverlight工程模板：如圖1所示。將工程命名為OurFirstSilverlightProject。









在Solution Explorer中，點選Show All Files按鈕來檢視所有VS自動產生的程式碼。圖2顯示了所有檔案。





圖2


　　下面一節包含了該Silverlight工程裡的基本檔案的講解：


　　TestPage.html


　　這是一個測試頁，用來測試Silverlight程式。它包含了Silverlight控制項並引用了兩個JavaScript檔案：Silverlight.js和TestPage.html.js。下面是Testpage.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" >


<!-- saved from url=(0014)about:internet -->


<head>


<title>Silverlight Project Test Page </title>




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


<script type="text/javascript" src="TestPage.html.js"></script>


<style type="text/css">


.silverlightHost { width: 640px; height: 480px; }


</style>


</head>




<body>


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


<script type="text/javascript">


createSilverlight();


</script>


</div>


</body>


</html>



　　包含Siverlight控制項的HTML頁面頁可以包含通常的HTML元素來構成一個web頁面。當你雙擊Solution Explorer中的Testpage.html，VS2008將會在一個分離視圖裡展示頁面，這是VS2008的新特性。使用分離視圖，你可以在瀏覽 HTML程式碼時同時預覽它在瀏覽器中的效果。如圖3.





圖3


　　TestPage.html.js


　　這個檔案包含了一個Javascript函數，裝載Silverlight控制項到web頁上。它也引用了一個包含Silverlight程式的使用者界面定義的XAML檔案。



以下是引用片段：


　　// JScript source code


　　//contains calls to silverlight.js, example below loads Page.xaml


　　function createSilverlight()


　　{


　　Silverlight.createObjectEx({


　　source: "Page.xaml",


　　parentElement: document.getElementById("SilverlightControlHost"),


　　id: "SilverlightControl",


　　properties: {


　　width: "100%",


　　height: "100%",


　　version: "1.1",


　　enableHtmlAccess: "true"


　　},


　　events: {}


　　});


　　// Give the keyboard focus to the Silverlight control by default


　　document.body.onload = function() {


　　var silverlightControl = document.getElementById('SilverlightControl');


　　if (silverlightControl)


　　silverlightControl.focus();


　　}


　　}

標籤： , , ,