在Visual Studio2008中玩转Silverlight(一)-技术开发专区

在Visual Studio2008中玩转Silverlight(一)

作者：IT168 seasky 编辑：李宁 2007-11-27 00:00

【IT168 专稿】

在Web发展的十几年中，我们曾经不只一次地目睹了Web应用程序的变迁。在Web萌芽时期，所谓的Web程序只是一些静态HTML页的集合，随后出现了带有丰富的图形和其他信息的静态网页。然后，随着硬件性能的提高，服务器技术，如CGI、ASP和JSP开始风靡全球，这些技术认可度高次使用户可以利用Web技术来做很多事情，如在线购物、预定机票和客房。由于Web程序需要不断地刷新和后台进行交互，因此，从某种程度上影响了Web程序的用户体验。为了解决这个问题，在最近两年，AJAX技术开始兴起。这种技术可以通过异步的方式和服务端进行交互，从而使Web客户端拥有和桌面程序几乎一样的体验。所有这些非凡的变化，归根结底只有一个重要的原因，就是尽可能地增加Web应用程序的可交互性和响应能力。

最几一段时间，一个新的词开始占据互联网的主要位置，它就是RIA，也就是富Internet应用(Rich Internet Applications)。而对于微软，却将RIA赋予了新的涵义，它就是富交互应用程序（Rich Interactive Applications）。之所以这么说，和微软最近推出的一项新技术Silverlight不无关系。我们以前知道微软推出了Windows 表现层基类库（WPF），而微软的Silverlight是WPF的一个子集，它是Web浏览器的一个子集，用于帮助用户在Web页中显示特效动画、矢量图形以及一些视频等。本文将对微软的这项新技术展开讨论，并帮助读者了解Silverlight，以及使读者更加清楚地认识Silverlight的工作方式和使用方法。

一、Silverlight的版本

到现在为止，Silverlight共发布了两个版本：1.0（已经发行）和1.1（测试版），它们的主要不同是在版本1.1中不仅支持JavaScript，而且还支持.NET语言。对于1.0版本，我们只能使用JavaScript作为编程语言，而且1.1中，还可以使用C#或Visual Basic来编程，然后它们通过内嵌在Silverlight中运行时的CLR来执行。

目前的Silverlight运行支持下面三种浏览器：

1. Internet Explorer 6/7

2. Firefox 1.5/2.0

3. Safari 2.0

本文主要使用的Silverlight版本是1.1。

二、获得开发Silverlight所需要的工具

为了开发Silverlight应用程序，我们需要得到以下的运行时/工具：

1、Runtimes

为了在我们的浏览器中运行Silverlight应用程序，需要下载下列组件中的一个：

1. 微软Silverlight 1.0发行版本

(1) Mac

(2) Windows

2. 微软 Silverlight 1.1 测试版本

(1) Mac

(2) Windows

3. 微软ASP.NET 未来版(2007年7月发布)

ASP.NET的未来版本包括了新的支持Silverlight应用程序的ASP.NET控件。

2. 开发工具

最容易的使用Silverlight开发程序的方法是使用Visual Studio 2008，这个版本当前可使用的是Beta 2。我们可以到微软网站上下载这个版本。

一但我们下载并安装了Visual Studio 2008 Beta 2, 我们还需要下载微软Silverlight工具Alpha for Visual Studio(2007年7月)，这是一个Visual Studio 2008的插件，用来建立Silverlight应用程序。如果安装这个插件，将在Visual Studio 2008 Beta2上增加如下的功能：

1. Visual Basic和C#工程模板

2. 支持XAML的智能编辑器和代码产生器

3. Silverlight应用程序的调试器

4. Web引用支持

5. 和Expression Blend集成

另外，我们还可以下载一个或多个以下的工具来帮助我们设计Silverlight应用程序：

1. Expression Blend2八月份的预览版：一个为Silverlight建立交互式用户接口的专业设计工具。

2. Expression媒体编码器预览版：一个允许我们建立和增强视频的工具，它是微软Expression媒体的一部分。

3. Expression Design:建立Silverlight asset的专业图形设计工具。

最后，我们可以下载以下的SDK，它们包含了相关的文档和示例代码：|

1. 微软Silverlight1.0软件开发包

2. 微软Silverlight1.1软件开发包

三、开始学习Silverlight

在安装完所需的工具后，我们现在可以建立第一个Silverlight应用程序了。首先启动Visual Studio 2008，并建立一个工程。在建立工程时，选择Silverlight工程类型，然后选择Silverlight工程模板（如图1所示）。并将工程命名为OutFirstSilverlightProject。

图1 第一步：建立一个Silverlight工程

在Solution Explorer中，单击显示所有文件按钮，获得Visual Studio已经加入到这个工程中的所有的文件。如图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>

包含的Silverlight控件的HTML页也可以包含其他用于描述Web页的HTML元素。当我们在Solution Explorer中双击TestPage.html文件后，Visual Studio 2008将显示这个页的内容（是以分割视图形式显示的，这是Visual Studio2008的新特性）。使用分割视图，我们可以在显示HTML代码的同时，查看页面在浏览器中的效果。如图3所示。

图3 在分割视图中显示HTML页

TestPage.html.js

这个文件包含了一个用于装载Silverlight控件的JavaScript函数。它还引用了包含我们Silverlight应用程序的UI的XAML文件，这个文件的代码如下：

// JScript 源代码

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

第一个HTML页都有一个相应的JavaScript(.js)文件，用于装载被包含在相应的XAML文件中的Silverlight控件。

Page.xaml
这个文件包含了我们的Silverlight应用程序的UI控件。下面的代码显示了在Visual Studio 2008中建立的默认内容：

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="parentCanvas"
        Loaded="Page_Loaded"
        x:Class="OurFirstSilverlightProject.Page;assembly=ClientBin/
OurFirstSilverlightProject.dll"
        Width="640"
        Height="480"
        Background="White"
        >
</Canvas>

我们从上面的代码可以注意到x:Class属性。它指定了一个名为OurFirstSilverlightProject.Page的后期绑定的类（OurFirstSilverlightProject是我们的工程的默认根命名空间，而这个名是类名，在此应该注意一下），这个类的相应代码在ClientBin/OurFirstSilverlightProject.dll中。

Visual Studio 2008提供了支持XAML的智能编辑器，如果我们正在考虑手工写XAML，这是一个非常吸引人的特性。

Page.xaml.vb

这个文件包含了我们的Silverlight应用程序程序中可管制的源代码。在Visual Studio 2008中使用了默认的类名，代码如下：

Partial Public Class Page
Inherits Canvas
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
' Required to initialize variables
        InitializeComponent()
End Sub
End Class

在Page.xaml.vb文件中我们可以写管制代码。当一个Silverlight应用程序准备发布时，只有被编译的dll需要被发布。而源代码无需发布。

Silverlight.js

这是一个由微软提供的文件，它用来建立所有的用于使Silverlight在Web浏览器中运行所需的组件。通过在我们的应用程序包括这个文件，如果Silverlight运行时未安装，目标浏览器将会询问我们是否要安装Silverlight运行时（每一个Silverlight应用程序必须包括这个文件）。在License许可下，我们并不允许编辑这个文件。如果Web服务器布置了多个Silverlight应用程序，我们只需要简单地将这个文件放一份到指定的位置，然后设黑所有包含Silverlight内容的页到这个页即可。

关注我们