查看完整版本: 用Visual Studio 2008进行Silverlight开发

lovec 2008-5-29 08:23

用Visual Studio 2008进行Silverlight开发

　[b][color=#000000]微软[/color][/b]的[b]Silverlight浏览器插件[/b]使得开发者能够运行富因特网程序(RIAs)——包括动画，矢量图形和视频回放等等。看看如何进行Silverlight开发，并且感受一下这种新的开发方式吧。本文代码下载：[url]http://assets.devx.com/sourcecode/20341.zip[/url]　　经过多年发展，我们看到了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开发的讲解。
　　[b]Silverlight现状[/b]
　　目前，有两个版本的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的内容。
　　[b]获取开发工具[/b]
　　为了开发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控件。
　　[b]开发工具：[/b]
　　最简单的进行Silverlight开发的工具是Visual Studio 2008，当前下载版本是Beta 2。你可以从[url]http://msdn2.microsoft.com/en-us/vstudio/aa700831.aspx[/url]下载。
　　当你下载并安装了VS2008Beta2之后，下载Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007)，这是一个用来创建Silverlight程序的VS2008增强包。安装它会为VS2008Beta2增加如下特性：
[list=1][*]　　 VB和C#工程模板[*]　　 IntelliSense和XAML代码生成器[*]　　 Silverlight程序的调试[*]　　 Web引用支持[*]　　 和Expression Blend的集成[/list]　　另外，你还需要如下专业工具来进行Silverlight开发：
　　• Expression Blend 2 August Preview: 专业级Silverlight用户交互开发工具
　　• 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
　　[b]开始编程[/b]
　　当安装好上述工具之后，你可以创建你的第一个Silverlight程序了。打开VS2008，创建一个新工程。工程类型选择Silverlight，选择Silverlight工程模板：如图1所示。将工程命名为OurFirstSilverlightProject。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/30tnwvlwwa92.jpg[/img][/align][align=center]图1[/align]

lovec 2008-5-29 08:24

在Solution Explorer中，点击Show All Files按钮来查看所有VS自动生成的代码。图2显示了所有文件。[align=center][img]http://dev.yesky.com/imagelist/2007/316/44u1ppijzsdo.jpg[/img][/align][align=center]图2[/align]　　下面一节包含了该Silverlight工程里的基本文件的讲解：
　　[b]TestPage.html[/b]
　　这是一个测试页，用来测试Silverlight程序。它包含了Silverlight控件并引用了两个JavaScript文件：Silverlight.js和TestPage.html.js。下面是Testpage.html的内容：
[table=95%][tr][td][b]以下是引用片段：[/b]
<!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>
[/td][/tr][/table]
　　包含Siverlight控件的HTML页面页可以包含通常的HTML元素来构成一个web页面。当你双击Solution Explorer中的Testpage.html，VS2008将会在一个分离视图里展示页面，这是VS2008的新特性。使用分离视图，你可以在浏览HTML代码时同时预览它在浏览器中的效果。如图3.
[align=center][img]http://dev.yesky.com/imagelist/2007/316/1q1t366t62nj.jpg[/img][/align][align=center]图3[/align]　　[b]TestPage.html.js[/b]
　　这个文件包含了一个Javascript函数，装载Silverlight控件到web页上。它也引用了一个包含Silverlight程序的用户界面定义的XAML文件。
[table=95%][tr][td][b]以下是引用片段：[/b]
　　// 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();
　　}
　　}[/td][/tr][/table]

lovec 2008-5-29 08:25

每个HTML页面应该有一个相应的Javascript(.js)文件来装载一个相关的XAML文件中的Silverlight控件。　　[b]Page.xaml[/b]
　　这个文件包含了你的Silverlight应用程序的用户界面。下面列出了VS2008创建的缺省内容
<CANVAS[table=95%][tr][td][b]以下是引用片段：[/b]
<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>
[/td][/tr][/table]　　[b]注意[/b]这里x:Class属性。它指定了目前类名为OurFirstSilverlightProject.Page(OurFirstSilverlightProject是工程的缺省根命名空间而Page是类名)，它对应的程序集在ClientBin/OurFirstSilverlightProject.dll.。
　　VS2008提供了支持XAML内容的IntelliSense，当你手写XAML时是一个很不错的辅助。
　　[b]Page.xaml.vb[/b]
　　这个文件包含了Silverlight应用程序的被管理的代码。缺省的VS产生的类名是Page。
[table=95%][tr][td][b]以下是引用片段：[/b]
　　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[/td][/tr][/table]
　　Page.xaml.vb文件是你写你的被管理的代码的地方。当准备部署Silverlight应用程序时，只有被编译过的程序集需要被部署。不需要部署源代码。
　　[b]Silverlight.js[/b]
　　这是微软提供的创建所有的必要的部分用来确保目标浏览器可以运行Silverlight程序。通过将此文件包含在你的应用程序中，目标Web浏览器将会在未安装Silverlight运行时的情况下要求安装必须的运行时(每个Silverlight程序必须包含这个文件)。在使用许可的规定下，你不得修改这个文件。在运行多个Silverlight程序的Web服务器上，你可以只放置一个该文件的拷贝，并且将所有包含Silverlight内容的页面指向这个页面。
　　[b]使用XAML创建用户界面[/b]
　　VS2008具备支持XAML内容的IntelliSense。这使得界面开发更有效率了，但是当前这里所用的VS2008版本没有一个XAML内容的查看器。这就是说，每次开发时必须运行一遍来查看其内容。
　　好消息是你可以使用微软的另外一个工具——Expression Blend来创建XAML界面。微软Expression Blend是一个专业级的设计工具，用来为Windows程序设计专业级的用户界面。最新的Blend版本，Expression Blend 2 August Preview，允许你创建基于Silverlight的程序。
　　使用Expression Blend2打开Page.xml，右击选择Open in Expression Blend…图4所示
[align=center][img]http://dev.yesky.com/imagelist/2007/316/87kz8941h177.jpg[/img][/align][align=center]图4[/align]　　Expression Blend2将会启动，你可以看到一个类似VS的界面。图5.
[align=center][img]http://dev.yesky.com/imagelist/2007/316/d6f905k29gak.jpg[/img][/align][align=center]图5[/align]　　现在我们为这个页面增加一写控件。首先，创建一个圆角按钮，如图6所示。有了这个按钮，你可以在上面增加一些文字描述信息。

lovec 2008-5-29 08:26

首先，点击Canvas控件(如图7)并且将其增加到页面上。Canvas将会作为容器来包含所有组成这个按钮的控件。[align=center][img]http://dev.yesky.com/imagelist/2007/316/7hfqp5819313.jpg[/img][/align][align=center]图7[/align]　　为了创建按钮的边框，增加一个Rectangle控件到页面上，覆盖你刚才增加的canvas。图8
[align=center][img]http://dev.yesky.com/imagelist/2007/316/nvg6e494i7kz.jpg[/img][/align][align=center]图8[/align]　　为了创建四个圆形边角，点击Direction Selection图标并且选择你刚增加的Rectangle控件。如图9所示，设置Rectangle的属性如下：
　　• RadiusX - 8
　　• RadiusY - 8
　　• StrokeThickness - 3
[align=center][img]http://dev.yesky.com/imagelist/2007/316/stn8zq2i9715.jpg[/img][/align][align=center]图9[/align]　　另外，你也可以设置背景为黄色，如图9所示。
　　为了显示按钮中的文字，你需要增加一个TextBlock控件到canvas上，如图10.同时，设置字体为Comic Sans MS。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/yfjgzp3e2oa7.jpg[/img][/align][align=center]图10[/align]

lovec 2008-5-29 08:27

为了使得按钮显示当前时间，你需要每秒刷新一下时间。增加一个Timeline到你的XAML文件中。点击Objects和Timeline组中的>箭头，按照+按钮的指示。图11所示。[align=center][img]http://dev.yesky.com/imagelist/2007/316/63qb64u4qukr.jpg[/img][/align][align=center]图11[/align]　　你会被要求命名新的Timeline。使用缺省的名称Timeline1点击OK。
　　你的XAML文件现在看起来像图12所示。保存XAML文件。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/2tjp7lead25x.jpg[/img][/align][align=center]图12[/align]　　当你转回到VS2008时，它会询问你是否重新载入Page.xml因为它在编辑器以外被修改了。当你重新载入之后，XAML内容如下：
[table=95%][tr][td][b]以下是引用片段：[/b]
<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.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard x:Name="Timeline1"/>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
   
    <Canvas Width="189" Height="44" Canvas.Left="8" Canvas.Top="8">
        <Rectangle Width="189" Height="44" Fill="#FFF4FB04"  
               Stroke="#FF000000" StrokeThickness="3" RadiusX="8"  
               RadiusY="8"/>
        <TextBlock Width="168" Height="23" Canvas.Left="10"  
               Canvas.Top="11" Text="TextBlock" TextWrapping="Wrap"  
               F/>
    </Canvas>
</Canvas>
[/td][/tr][/table]<CANVAS　　如图13所示。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/f0o6ftc4uksq.jpg[/img][/align][align=center]图13[/align]

lovec 2008-5-29 08:28

为了使得canvas对象可以通过编程访问，增加x:Name属性，并设置位btnTime，像这样：<CANVAS p [table=95%][tr][td][b]以下是引用片段：[/b]
<Canvas x:Name="btnTime" Width="189" Height="44"  
          Canvas.Left="8" Canvas.Top="8">
[/td][/tr][/table]　　[b]注意[/b]在Expression Blend2中，你可以切换Design和XAML视图(如图13)。不幸的是，目前XAML视图中不支持IntelliSense。
　　[b]使用VB构建程序逻辑[/b]
　　在用户界面完成以后，现在做些有用的代码——比如，在按钮中显示当前时间。
　　在Solution Explorse中双击Page.xaml.vb文件，在代码编辑器中载入它。
　　在Page_Loaded()小段中，增加如下行：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Partial Public Class Page
　　Inherits Canvas
　　Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
　　' Required to initialize variables
　　InitializeComponent()
　　Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
　　Me.Timeline1.Begin()
　　End Sub[/td][/tr][/table]
　　在代码中，Timeline1每秒触发一个事件(Completed事件)，通过Duration对象设置。Timeline对象和Windows程序员熟悉的Timer控件很类似。Begin()方法开始倒计时，一秒后Completed事件触发。
　　下一步是在Completed事件完成后干什么，你可以在代码编辑器里选择Timeline1对象，然后选择Completed事件，如图14.
[align=center][img]http://dev.yesky.com/imagelist/2007/316/4z502hb45345.jpg[/img][/align][align=center]图14[/align]　　编写如下Completed事件代码：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Private Sub Timeline1_Completed( _
　　ByVal sender As Object, _
　　ByVal e As System.EventArgs) _
　　Handles Timeline1.Completed
　　Dim textBlk As TextBlock = Me.btnTime.Children(1)
　　textBlk.Text = Now.ToString
　　Me.Timeline1.Begin()
　　End Sub
　　End Class[/td][/tr][/table]
　　基本的，你通过获取嵌入在canvas(btnTime)中的TextBlock控件来设置当前时间及其Text属性。Canvas有两个孩子：
　　• Children(0): Rectangle control
　　• Children(1): TextBlock control
　　在显示时间后，你呼叫Begin()方法来开始重新倒计时。
　　好，完成了!在VS2008中按下F5，你将看到IE中显示当前的Silverlight程序。如果你在Firefox浏览器中调用，效果也是一样的。如图15.按钮每秒更新一次时间。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/77iv0wzn0wel.jpg[/img][/align][align=center]图15[/align]　　[b]变化[/b]
　　现在你有第一个Silverlight程序运行着了，试着做一些动画吧。作为例子，让我们来修改它，使其旋转和更新时间。

lovec 2008-5-29 08:28

使用相同的工程，在Expression Blend2 中增加一个新的Timeline到XAML文件中。在增加了新的Timeline之后，你的XAML代码看起来是这样的：[table=95%][tr][td][b]以下是引用片段：[/b]
Partial Public Class Page
    Inherits Canvas

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
        ' Required to initialize variables
        InitializeComponent()

        Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
        Me.Timeline1.Begin()

    End Sub
[/td][/tr][/table]
　　在Page.xaml.vb文件里，声明一个名为degrees的私有成员变量：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Partial Public Class Page
　　Inherits Canvas
　　Private degrees As Integer = 0[/td][/tr][/table]
　　在Page_Loaded()子程序里，为第二个Timeline增加一个新的duration：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)
　　' Required to initialize variables
　　InitializeComponent()
　　'---display the clock---
　　Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
　　Me.Timeline1.Begin()
　　'---rotate the clock---
　　Me.Timeline2.Duration = New Duration(New TimeSpan(100))
　　Me.Timeline2.Begin()
　　End Sub[/td][/tr][/table]
　　这里，你设置了Timeline2的间隔为100毫秒(重载了TimeSpan对象构造器)。每100毫秒，Timeline2的Completed事件触发，这里你调用PerformTransformation()子程序：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Private Sub Timeline2_Completed( _
　　ByVal sender As Object, _
　　ByVal e As System.EventArgs) _
　　Handles Timeline2.Completed
　　PerformTransformation()
　　Me.Timeline2.Begin()
　　End Sub[/td][/tr][/table]
　　子程序使用RotateTransform对象来完成一个对象的变化。这里你使用它来在每个时刻旋转按钮1度。
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Private Sub PerformTransformation()
　　'---use a RotateTransform object to perform transformation---
　　Dim rt As New RotateTransform
　　'---define the transformation---
　　With rt
　　.Angle = degrees
　　.CenterX = 50
　　.CenterY = 50
　　End With
　　'---increment the degree of rotation---
　　degrees += 1
　　'---transform the button---
　　btnTime.RenderTransform = rt
　　End Sub[/td][/tr][/table]
　　另外，当用户点击按钮时，按钮将会回到原来的位置，并且重新开始旋转：
[table=95%][tr][td][b]以下是引用片段：[/b]
　　Private Sub btnTime_MouseLeftButtonDown( _
　　ByVal sender As Object, _
　　ByVal e As System.Windows.Input.MouseEventArgs) _
　　Handles btnTime.MouseLeftButtonDown
　　degrees = 0
　　PerformTransformation()
　　End Sub[/td][/tr][/table]
　　图16显示了按钮旋转的效果图。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/ryk5qt174888.jpg[/img][/align][align=center]图16[/align]

lovec 2008-5-29 08:29

[b]部署Silverlight程序[/b]　　当你的Silverlight程序完成之后，部署它就很容易了。对于一个产品环境，没有必要暴露你的被管理的代码的源代码。只要拷贝编译过的程序集到你的web服务器上即可。比如你可以拷贝你刚刚创建的程序集来看看这个过程有多简单。
　　首先，创建一个目录，如：C:\MyFirstSilverlightApp。
　　创建一个HTML页面Default.html，内容为：
[table=95%][tr][td][b]以下是引用片段：[/b]
<!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="Default.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>
[/td][/tr][/table]　　就像你看到的那样，你可以轻松的从TestPage.html中拷贝内容并将它粘贴到Default.html中。重要的部分用粗体标明了。
　　这个HTML文件引用了两个Javascript文件：Silverlight.js和Default.html.js。和刚才一样，你可以从VS2008的工程中拷贝过来并且改名。
　　缺省的，Default.html.js使用Page.xaml作为用户界面。这里，从VS2008工程中拷贝Page.xaml到C:\MyFirstSilverlightApp文件夹。
　　如果你查看Page.xaml，你将看到Silverlight程序被期望用来在ClientBin目录下发现编译程序集。编译的Dll名为OurFirstSilverlightProject.dll：
<CANVAS[table=95%][tr][td][b]以下是引用片段：[/b]
<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"
        &gtl
...
[/td][/tr][/table]　　因此，在C:\MyFirstSilverlightApp，创建一个新的目录ClientBin，从VS2008的工程目录的ClientBin目录下拷贝编译后的Dll文件。
　　图17显示了C:\MyFirstSilverlightApp目录。就像你看到的一样，你无须部署你的VB程序代码，只是程序集。
[align=center][img]http://dev.yesky.com/imagelist/2007/316/1pu03092n6p7.jpg[/img][/align][align=center]图17[/align]　　现在你可以配置C:\MyFirstSilverlightApp作为IIS的一个虚拟目录了。启动IIS(你可以使用inetmgr命令)，右击Default Web Site链接，选择New | Virtual Directory…给它一个Silverlight的别名，指定C:\MyFirstSilverlightApp作为目录所在地。好的，完成了!
　　你可以使用URL来访问这个页面了：http://localhost/Silverlight/default.html.
　　你已经看到了使用VS2008创建Silverlight应用程序的过程。你使用XAML来定义Silverlight程序的用户界面，你可以使用VS2008，Expression Blend2或手写的方式来完成它。希望你从本文得到了灵感去深入了解Silverlight。
页: [1]
查看完整版本: 用Visual Studio 2008进行Silverlight开发