用Visual Studio 2008進行Silverlight開發

2008-04-29

7959
0
2009-01-04

摘要:用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

VB和C#工程模板
IntelliSense和XAML程式碼產生器
Silverlight程式的調試
Web引用支援
和Expression Blend的集成
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" >



<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();

　　}

　　}

回首頁