第三章 Silverlight工具

為什麼要介紹工具？

正如您所見，在前面章節中，並沒有介紹Silverlight 1.0的編譯或二進位制資料。您所需做的僅僅是建立以下三種型別的檔案：

l Silverlight 的XAML檔案

l 用於Silverlight的附加程式碼和訪問和控制Silverlight的JavaScript檔案和

l 包含Silverlight內容的HTML檔案

所以在一般情況下，使用XML editor就可以建立Silverlight應用程式了。但這和使用記事本建立ASP.NET應用程式是一樣的道理。這完全有可能，但哪個全這樣做呢？

因此，在本章我們將介紹幫助您建立Silverlight應用程式的三種編輯器。我們將簡要地介紹每種編輯器並將它們進行對比。

XML Editors

理論上，使用XML editior進行XAML的編輯已經足夠好。這有很多好的XML編輯器，包括（）和XMLSpy（(。恰好微軟也提供了一個XML編輯器，XML Notepad 2007（可以在；下載，如圖3-1所示）。對於XML來說，程式碼自動完成功能在理論上是可行的，這得感謝xml架構的實用性。如前面章節所示，Visual Studio 2005提供了程式碼的智慧提示功能，甚至在Visual Studio 2008中，JavaScript程式碼也可以智慧提示了。

純粹的XML編輯器往往不能做到“所見即所得”。它們往往使用CSS或XSLT技術把XML轉換為可見的東西（在寫這本書時，XML editor也是這樣）。但對於Silverlight來說，這並不可行。如果一個編輯器實現了這個功能那當然是最好不過了。您可以從下載Spket IDE，它是免費軟體，提供了JavaScript和XAML的程式碼自動完成功能。圖3-2是Spket IDE的效果圖。

向量圖編輯器

Silverlight圖形是基於向量的，正規的商業站點中的影像往往是基於畫素的。公平地說，Silverlight也支援基於畫素的圖形，但像量圖形有它自己的優勢：如影像縮放不會導致質量損失。這有幾個向量圖編輯器，但很少有支援XAML的。微軟設計了一款實現這個功能的設計工具，它做為Microsoft Expression Studio的一個元件。在站點您可以得到更多的資訊並下載到60天試用版。微軟的這款設計工具可以匯入其他格式檔案，也可以匯出為少量其它格式檔案，包括SAML，如圖3-3所示。

Silverlight IDE

使用Flash，可以透過瀏覽器外掛（或相關檔案格式）的方式並使用強大的編輯器或IDE開發出Rich Internet Applications（RIAs）。微軟釋出一個可以在開發人員人設計人員架起一座橋樑並吸引兩個群體的開發工具只是時間問題。

Microsoft Express Blend也是Microsoft Expression Studio的一部份。它的第一個版本僅僅面向WPF開發人員，並不支援Silverlight（又稱WPF/E）的開發。然而Expression Blend 2改變了這個現狀（寫這本書時，已經發布了8月預覽版，可以在下載）。

當您新建一個專案，可以選擇建立Silverlight JavaScript應用程式的選項（如圖3-4所示）。如果您仔細觀察如圖3-5所示的專案結構，您將發現它跟我們在第二章用Visual Studio模板建立的專案非常接進。

Expression Blend 2可以跟Visual Studio整合。雙擊專案中的JavaScript檔案，只有工作在event handlers狀態下（詳見第5章），您才能透過Visual Studio 2005處理它們，如圖3-6所示。您可以選擇在剪貼簿中獲得event handlers框架程式碼，這樣就可以在任意的應用程式中使用它們了。在Expression Blend 2將來的版本中可能會增加對其他應用程式的支援。

提示：Visual Web Developer 2005 Express Edition可能也可以使用event handler程式碼編輯器。

Express Blend 2離完美還差很遠（Adobe Flash使用了幾年時間才達到較高水平），對於Silverlight開發者特別是從設計人員的角度來說，如果想使用視覺化的開發環境，它無疑是最好的選擇。

進階讀物

Microsoft的Expression系列產品概覽。

重寫Essential Silverlight這本書中的第一個例子HelloWorld

做不出第一個例子會打擊初學者的信心。經過研究，終於發現了問題所在，作者的這個例子是使用記事本之類的東西進行開發的，並非Visual Studio。一個Silverlight應用程式最簡單需要4個檔案：

l 一個html檔案：用於給瀏覽器開啟

l 一個xaml檔案：用於控制Silverlight所顯示的內容

l 一個字尾名為.js的JavaScript檔案：html檔案的程式碼隱藏檔案（code-behind技術）

l 一個模板檔案Silverlight.js。這個檔案可以從網上或VS2005中獲得，不需要自己寫

作者的HelloWorld程式沒看見HelloWorld的影子，乾脆我自己寫一段來幫助初學者完成HelloWorld吧，其實很簡單。

1. 開啟記事本，輸入如下程式碼。完成後把檔案儲存為HelloWorld.html：

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"

<html xmlns="

<head>

<title>Silverlighttitle>

head>

<body>

createSilverlight();

script>

div>

body>

html>

2. 使用記事本，輸入如下程式碼。完成後把檔案另存為HelloWorld.xaml：

<Canvas xmlns=""

xmlns:x="">

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

Foreground="Black" Text="Hello World!" />

Canvas>

3. 使用記事本，輸入如下程式碼。完成後把檔案另存為HelloWorld.html.js：

function createSilverlight()

{

Silverlight.createObjectEx({

source: 'HelloWorld.xaml',

parentElement: document.getElementById('SilverlightPlugInHost'),

id: 'SilverlightPlugIn',

properties: {

width: '800',

height: '400',

background:'#ffffffff',

isWindowless: 'false',

version: '1.0'

},

events: {

onError: null

}

});

}

4. 注意，以上3個檔案放在同一目錄下。開啟Visual Studio 2005，新建一個Silverlight專案，然後到這個專案所在的資料夾把Silverlight.js檔案複製出來也放在這個目錄裡面。如果沒有裝VS2005就上網找一個。

5. 雙擊HelloWorld.html檔案，執行效果如圖2-17所示

在執行本書後面的例子時，可以參照這個例子。步驟如下：

l 把HelloWorld.html、HelloWorld.xaml、HelloWorld.html.js複製一份，並按照課本的例題名稱更改它們的名字。確保在資料夾內有Silverlight.js檔案存在

l xaml檔案使用課本的程式碼。

l html檔案中

這一行的src屬性值改為實際的值。

l Html.js檔案中

source: 'HelloWorld.xaml',

這一行的source屬性值改為實際的值

第四章 XAML基礎

XAML

XAML是XML的一個分支，所以在本書中將使用很多中括號。我們將在本章XAML的最重要的元素。以本書的篇幅要討論完所有的XAML元素是不可能的，但我們展現儘可能多的東西以使您可以以最快的速度掌握XAML。

如果您已經使用XAML進行WPF應用程式的開發，我們將討論的大部份東西您都已經知道（第6章也是如此）。儘管如此，還是會有一些細微的差別：Silverlight不像WPF那樣完全支援XAML格式，它只是一個子集。將來的Silverlight版本將進一步增加所支援的元屬和屬性的比例，但有些工作在桌面應用的功能是不能在瀏覽器中工作的。

所有XAML檔案的根元素都是，在控制Silverlight的地方定義它。元素中的佈局元素將在其他章節講解，現在只需要記住，在每個XAML檔案的開頭放置元素並賦與正確的名稱空間如下：

<Canvas xmlns=""

xmlns:x="">

...

Canvas>

使用文字

在第一個例子中，使用最多的還是第2章的Hello World示例裡的技術。這一章也從一個類似於Hello World的程式開始：我們將在Silverlight內新增一段文字。為此，需要使用元素（在第2章已經介紹過），有兩種顯示文字的方法：

l 在元素的Text屬性內

l 在元素內使用一個文位元組點

例4-1使用了後一種方法輸出文字。需要注意，在Visual Studio將出現警告中不能包含文字，但例4-1證明這是被允許的。

例4-1：使用簡單文字，XAML檔案（Text1.xaml）

<Canvas xmlns=""

xmlns:x="">

<TextBlock>SilverlightTextBlock>

Canvas>

根據第2章所講述的Silverlight應用程式的結構，您需要新增兩個檔案以使得這個例子可以在瀏覽器中工作。首先需要一個JavaScript輔助檔案以初始化Silverlight內容，如例4-2所示。因為這個JavaScript檔案依賴於HTML檔案，我們把它稱之為“HTML code-behind”，它將貫穿本書。在一些例子中將會提到“HTML JavaScript file”檔案（跟“XAML Javascript file“檔案以示區別，將在下一章介紹）。

例4-2：使用簡單文字，HTML JavaScript檔案（Text1.html.js）

function createSilverlight()

{

Silverlight.createObjectEx({

source: 'Text1.xaml',

parentElement: document.getElementById('SilverlightPlugInHost'),

id: 'SilverlightPlugIn',

properties: {

width: '400',

height: '400',

background:'#ffffff',

isWindowless: 'false',

version: '1.0'

},

events: {

onError: null,

}

});

}

（譯者注：如果不懂如何執行，請參考我的部落格：

http://cgbluesky.blog.163.com/blog/static/241235582008070198710/

並對相應的URL地址進行修改）

注意幾個高亮的程式碼元素：

l source屬性必須是XAML檔案的URL地址

l parentElement屬性必須引用控制Silverlight內容的DOM元素

l id屬性提供了一個值以使得Silverlight內容可以被JavaScript程式碼訪問（詳見第8章）

其次，必須把一個HTML檔案做為瀏覽器載入的主頁面。它和“HTML code-behind”檔案以及Silverlight.js輔助檔案都做為Visual Studio的Silverlight SDK外掛的一部分被安裝（也可以隨同本書示例程式碼一起下載：）。HTML頁面需要包含

容器，並在其中包含跟parentElement屬性相同的ID。最後，這個頁面需要呼叫前面定義的createSilverlight()方法。例4-3包括了所有程式碼，圖4-1顯示了輸出效果。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html xmlns="

<head>

<title>Silverlighttitle>

head>

<body>

createSilverlight();

script>

div>

body>

html>

提示：很多時候，建立一個新的Silverlight應用程式都從複製貼上開始。當建立一個新的內容，您需要複製HTML檔案，HTML的JavaScript檔案，XAML檔案，如果需要，還有XAML的JavaScript檔案。為了對示例能更好地理解，我們將只給出HTML檔案。如果在HTML的JavaScript檔案中沒有其它附加資訊，將不再列出它的程式碼。下載本書的程式碼也是如此。

圖4-1顯示的是文字的預設佈局：文字使用Lucida字型，大小為11，顏色為黑色。字型有可能沒有在客戶端（或伺服器端）安裝，它是外掛的一部分。因此在Mac OS X

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/16396910/viewspace-1030333/，如需轉載，請註明出處，否則將追究法律責任。

Essential Silverlight翻譯連載(3、4章)

為什麼要介紹工具？

XML Editors

向量圖編輯器

Silverlight IDE

進階讀物

XAML

使用文字

相關文章