第三章 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编辑器，包括（http://www.oxygenxml.com/）和XMLSpy（(http://www.xmlspy.com/。恰好微软也提供了一个XML编辑器，XML Notepad 2007（可以在http://www.microsoft.com/downloads/details.aspx?FamilyID=72d6aa49-787d-4118-ba5f-4f30fe913628&DisplayLang=en；下载，如图3-1所示）。对于XML来说，代码自动完成功能在理论上是可行的，这得感谢xml架构的实用性。如前面章节所示，Visual Studio 2005提供了代码的智能提示功能，甚至在Visual Studio 2008中，JavaScript代码也可以智能提示了。
纯粹的XML编辑器往往不能做到“所见即所得”。它们往往使用CSS或XSLT技术把XML转换为可见的东西（在写这本书时，XML editor也是这样）。但对于Silverlight来说，这并不可行。如果一个编辑器实现了这个功能那当然是最好不过了。您可以从http://www.spket.com/下载Spket IDE，它是免费软件，提供了JavaScript和XAML的代码自动完成功能。图3-2是Spket IDE的效果图。
矢量图编辑器
Silverlight图形是基于矢量的，正规的商业站点中的图像往往是基于像素的。公平地说，Silverlight也支持基于像素的图形，但像量图形有它自己的优势：如图像缩放不会导致质量损失。这有几个矢量图编辑器，但很少有支持XAML的。微软设计了一款实现这个功能的设计工具，它做为Microsoft Expression Studio的一个组件。在http://www.microsoft.com/expression/products/download.aspx?key=design站点您可以得到更多的信息并下载到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月预览版，可以在http://www.microsoft.com/expression/products/download.aspx?key=blend2preview下载）。
当您新建一个项目，可以选择创建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开发者特别是从设计人员的角度来说，如果想使用可视化的开发环境，它无疑是最好的选择。
进阶读物
http://www.microsoft.com/expression/
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"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<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="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
...
Canvas>
使用文本
在第一个例子中，使用最多的还是第2章的Hello World示例里的技术。这一章也从一个类似于Hello World的程序开始：我们将在Silverlight内添加一段文字。为此，需要使用元素（在第2章已经介绍过），有两种显示文本的方法：
l 在元素的Text属性内
l 在元素内使用一个文字节点
例4-1使用了后一种方法输出文字。需要注意，在Visual Studio将出现警告中不能包含文本，但例4-1证明这是被允许的。
例4-1：使用简单文本，XAML文件（Text1.xaml）
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<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插件的一部分被安装（也可以随同本书示例代码一起下载：http://www.oreilly.com/catalog/9780596516116）。HTML页面需要包含
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/16396910/viewspace-1030333/
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
