Essential Silverlight翻譯連載(3、4章)
第三章 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編輯器，包括
純粹的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>
<script type="text/javascript" src="Silverlight.js">script>
<script type="text/javascript" src="HelloWorld.html.js">script>
head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
script>
div>
body>
html>
2. 使用記事本，輸入如下程式碼。完成後把檔案另存為HelloWorld.xaml：
<Canvas xmlns=""
xmlns:x="">
<Rectangle Width="350" Height="150" Stroke="Orange" StrokeThickness="15" />
<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檔案中
<script type="text/javascript" src="HelloWorld.html.js">script>
這一行的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內新增一段文字。為此，需要使用
l 在元素的Text屬性內
l 在元素內使用一個文位元組點
例4-1使用了後一種方法輸出文字。需要注意，在Visual Studio將出現警告
例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頁面需要包含 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns=" <head> <title>Silverlighttitle> <script type="text/javascript" src="Silverlight.js">script> <script type="text/javascript" src="Text1.html.js">script> head> <body> <div id="SilverlightPlugInHost"> <script type="text/javascript"> 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翻譯連載(5、6章)
- docker官方文件翻譯3Docker
- 轉載10gocp翻譯Go
- A3C論文翻譯
- 3 Java NIO Buffer-翻譯Java
- Understand Lambda Expressions in 3 minutes（翻譯）Express
- 有道翻譯軟體下載地址
- D3入門教程翻譯
- 轉載：翻譯的寧靜工程 （節選）
- 翻譯出版那點事兒【轉載】
- NS3 Object模型內容翻譯S3Object模型
- 【翻譯】fancyBox3 中文文件
- 翻譯
- Yurii談翻譯（五）怎樣翻譯更地道：so…that…的翻譯
- 如何完成中文翻譯日文線上翻譯
- Yurii談翻譯（四）怎樣翻譯更地道：翻譯如鋪路
- Yurii談翻譯（九）怎樣翻譯更地道：冠詞a的翻譯
- Yurii談翻譯（十）怎樣翻譯更地道：最高階的翻譯
- 翻譯的未來：翻譯機器和譯後編譯編譯
- Ubuntu安裝劃詞翻譯軟體Goldendict 單詞翻譯 句子翻譯UbuntuGo
- Yurii談翻譯（六）怎樣翻譯更地道：“as somebody said…”的翻譯AI
- Yurii談翻譯（十三）怎樣翻譯更地道：It is…that…句型諺語的翻譯
- Yurii談翻譯（十四）怎樣翻譯更地道：否定句的翻譯
- OReilly.Essential.System.Administration.3rd.Ed chm
- 蝴蝶書-task2: 文字推理、摘要、糾錯 transformers實現翻譯 OpenAI翻譯 PyDeepLX翻譯 DeepLpro翻譯ORMOpenAI
- Nginx翻譯Nginx
- [翻譯] TransitionKit
- 翻譯篇
- OllDbg翻譯LLDB
- 【風農翻譯】開始畫畫素畫 #3
- 翻譯（九）——Clustered Indexes: Stairway to SQL Server Indexes Level 3IndexAISQLServer
- [譯] 使用 Flutter 製作 3D 翻轉動畫Flutter3D動畫
- python3:爬有道翻譯(命令列版）Python命令列
- Python3 動手自己寫谷歌翻譯Python谷歌
- Unity3D Shader官方教程翻譯(一)Unity3D
- Unity3D Shader官方教程翻譯(二)Unity3D
- OpenCV翻譯專案總結二——Mat翻譯OpenCV
- （翻譯）2016美國數學建模MCM A題（連續型）翻譯:A Hot Bath 一個熱水澡BAT