sharepoint中整合SilverLight
在 Web 应用程序开发领域中，用户们一直追求不断改进的应用体验。此外，对这些 Web 应用程序的要求已不再仅仅是支持单个浏览器或平台。如果您目前正在构建某个 Web 应用程序，您需要的技术不仅要支持提供更令人信服的用户体验，还要能使开发人员将这种体验快速递送给多项技术和受众。
在能够为开发稳健的 Web 应用程序提供良机的技术中，Silverlight 2 就是一个范例。Silverlight 是一种跨浏览器、跨平台的插件，可供开发人员访问丰富的编程模型以打造基于 Web 的用户体验。
SharePoint 是另一种经常应用于 Web 应用程序开发的技术。原本采用 SharePoint 开发内联网的公司如今想将此技术扩大到外部 Web 站点。Silverlight 和 SharePoint 将共同提供一个简单但功能强大的基础结构，用于构建具有尖端的用户界面设计和交互功能的内联网及外联网应用程序。
在 本文中，我们将讨论如何通过在 SharePoint Web 部件内集成 Silverlight 应用程序来配合使用 SharePoint 和 Silverlight。我们首先会指导您利用 Silverlight 2 Beta 2 构建一个相当简单的媒体应用程序（请参见图 1）。 然后我们将向您说明如何将 SharePoint Web 部件用作 Silverlight 应用程序的包装。这种方法比较有趣，因为这样不仅使您可以创建独立的承载式应用程序，还可以通过自带的 SharePoint 对象模型（例如，通过提供商/使用者模型）将各个 Web 部件互联。
图 1 Silverlight WMV 播放器 Web 部件（单击图像可查看大图）
创建媒体播放器
我 们所推出的 Silverlight 2 beta 2 是从 Silverlight 1.0 演变而来。例如，Silverlight 2 支持托管代码，因此除了 JavaScript 之外，您现在还可以在应用程序中使用 Visual Basic 和 C#。此外，Silverlight 2 附带有一组控件并为扩充控件提供了便利，使创建基于 Silverlight 的用户界面的工作变得更加轻松。设计人员的体验如今得到了改进，并同时受到 Visual Studio 2008 内的 UI 设计工具和 Expression Blend 的支持。
要准备好环境以便为 SharePoint 构建 Silverlight 应用程序，请确保已安装了以下程序：
- Windows Server 2003 或 Windows Server 2008
- Windows SharePoint Services 3.0 及 SP1
- Microsoft Office SharePoint Server 2007 及 SP1
- Visual Studio 2008 Professional Edition
- 用于 Visual Studio 2008 的 Silverlight Tools Beta 2
- Silverlight 2 Beta 2 运行时
- Windows SharePoint Services 3.0 工具：Visual Studio Extensions，1.2 版
设 置完环境后，打开 Visual Studio 2008，然后创建一个新项目。在 C# 节点或 Visual Basic 节点中，您将找到名为 Silverlight 的新项目节点，其中包含两个项目模板：一个用于创建 Silverlight 应用程序，另一个用于创建 Silverlight 类库（请参见图 2）。
图 2 Silverlight 应用程序新项目模板（单击图像可查看大图）
对于示例应用程序，我们选择了 Silverlight 应用程序模板，提供了一个名称（在我们的示例中为 MediaPlayer），然后接受了其他默认选项。完成这些步骤并单击“确定”后，系统会提示您向解决方案添加新 Web 或动态生成一个 HTML 测试页以用于承载项目内的 Silverlight。选择第一个方式（向解决方案添加新 Web），再次接受默认选项。完成后，您的解决方案将同时包含 Silverlight 项目和承载 Web 应用程序（而不仅仅是 HTML 页面）。
在 我们的示例中，您可以在 MediaPlayer 解决方案中看到这两个项目。第一个项目是一个名为 MediaPlayerWeb 的 Web 站点。这是您在开发和测试 Silverlight 应用程序时要用到的测试 Web 站点。.第二个项目是名为 MediaPlayer 的 Silverlight 应用程序。在本文中，我们着重关注 MediaPlayer 项目中的 Page.xaml 和 Page.xaml.cs 文件。
在 Silverlight 2 中，UI 是通过使用一种名为 XAML 的基于 XML 的声明性语言生成的，为客户端应用程序创建 Windows Presentation Foundation (WPF) UI 时使用的就是这种语言。Page.xaml 中包含定义 UI 的 XAML 代码，而 Page.xaml.cs 包含应用程序的隐藏代码。
您只能有一个 Page.xaml.cs 文件，但可以有多个 XAML 文件，这些 XAML 文件均可通过中心 Page.xaml 文件进行管理。如果您希望在一个 Page.xaml 中管理各个单独的 Silverlight 控件，则可以这样做。
为应用程序 UI 编码
在 您打开 XAML 文件时，Visual Studio 2008 会显示一个拆分式设计/XAML 视图。此外，在 Silverlight 2 Beta 2 中，您可以将各控件从工具箱中拖放到 XAML 视图中。（Visual Studio 2008 中不支持将控件拖动到设计工具表面，但您可以在 Expression Blend 中实现这一点。）
我们刻意地为 MediaPlayer 创建了较为简单的 UI 以便说明集成的基本方面。图 3 显示了表示 Silverlight 应用程序的 UI 的 XAML 代码。我们将使用 StackPanel 元素包含和定位 UI 内的其他控件。一个用于承载 MediaElement（即，播放 WMV 文件的元素）和 Slider 元素（表示电影短片的时间线）。另一个用于承载 Button、ToggleButton 和 CheckBox 元素，它们可提供播放、暂停、停止和静音功能。
图 3 媒体播放器 XAML <UserControl x:Class="MediaPlayer.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="500">
<StackPanel Grid.Row="1"
Margin="20,10,20,10"
Background="White"
Visibility="Visible">
<MediaElement x:Name="moviePlayer"
Source="Bear.wmv"
Margin="5">
</MediaElement>
<Slider x:Name="timeline"
ValueChanged="timeline_ValueChanged"
Maximum="1"
Margin="5" >
</Slider>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button x:Name="movieStop"
Content="Stop"
Height="25"
Width="40"
Click="movieStop_Click"
Margin="5">
</Button>
<ToggleButton x:Name="moviePlay"
Content="Play"
Height="25"
Width="40"
Click="moviePlay_Click"
Margin="5">
</ToggleButton>
<CheckBox x:Name="movieMute"
Content="Sound On"
Click="movieMute_Click">
</CheckBox>
</StackPanel>
</StackPanel>
</UserControl>
在 基于 XAML 的 UI 中，x:Name 属性是您将要注意的关键属性之一。该属性表示提供给控件的名称，您可以通过隐藏代码对其进行操控。还应注意与 XAML 中某些控件对应的事件，例如按钮的 click=moviePlay_Click 事件，在单击时该事件将调用隐藏代码中的 moviePlay_Click 方法。
在 XAML 代码中，我们配置 MediaElement 控件以播放影片 Bear.wmv。您可以从 ClientBin 文件夹加载您自己的影片，但您需要确保更改了 XAML 中的 Source 属性，以反映添加到项目中的文件的名称。另请注意，您可以提供某 WMV 文件的位置的 HTTP 引用，例如使用图片库作为您 SharePoint 站点中的影片的存储库。
请 注意，在每个事件处理程序的 Page.xaml 文件内创建事件处理程序时（例如 Click="movieMute_Click"），如果键入 Click 后使用 IntelliSense 添加事件处理程序，Visual Studio 将自动在 Page.xaml.cs 文件中为您的事件处理程序添加存根方法。
在 讨论隐藏代码之前，让我们快速浏览一下此同一代码在 Expression Blend 中的视图。我们是在 Visual Studio 2008 中完成所有编码的，但您也可以使用 Expression Blend 创建一个 UI，随后在 Visual Studio 中将该 UI 集成到 Silverlight 项目中。在 Expression Blend 中打开页面后（请参见图 4），您可以向 Silverlight 应用程序添加项、保存文件，然后切换回 Visual Studio 2008，Visual Studio 2008 将提示您在 Visual Studio 2008 项目中重新加载 Expression Blend 中的变更。（要在 Expression 中打开，右键单击 Page.xaml，然后选择“在 Expression Blend 中打开”。）
图 4 Expression Blend 中的项目视图（单击图像可查看大图）
应用程序代码
要 为 Silverlight 应用程序添加隐藏代码，在“解决方案资源管理器”中右键单击 Page.xaml 文件，然后单击“查看代码”。您也可以展开 Page.xaml 节点，右键单击 Page.xaml.cs 文件，然后选择“查看代码”。此视图中的代码与我们之前构建的 UI 相对应，我们就在这里设置 Silverlight 控件的特定属性。图 5 显示了我们添加到 Page.xaml.cs 文件中的代码。
图 5 媒体播放器隐藏代码 namespace MediaPlayer {
public partial class Page : UserControl {
public Page() {
InitializeComponent();
}
private void timeline_ValueChanged(
object sender, RoutedPropertyChangedEventArgs<double> e) {
long ticks = (long)((sender as Slider).Value *
this.moviePlayer.NaturalDuration.TimeSpan.Ticks);
TimeSpan movieTimespan = new TimeSpan(ticks);
this.moviePlayer.Position = movieTimespan;
if (this.moviePlayer.CurrentState == MediaElementState.Playing) {
this.moviePlay.IsChecked = true;
this.moviePlay.Content = "Pause";
}
}
private void movieStop_Click(object sender, RoutedEventArgs e) {
this.timeline.Value = 0;
this.moviePlayer.Stop();
this.moviePlay.Content = "Play";
}
private void moviePlay_Click(object sender, RoutedEventArgs e) {
if (moviePlay.IsChecked == true) {
moviePlay.Content = "Pause";
this.moviePlayer.Play();
}
else {
moviePlay.Content = "Play";
this.moviePlayer.Pause();
}
}
private void movieMute_Click(object sender, RoutedEventArgs e) {
if (movieMute.IsChecked == true) {
movieMute.Content = "Sound On";
this.moviePlayer.IsMuted = true;
}
else {
movieMute.Content = "Sound Off";
this.moviePlayer.IsMuted = false;
}
}
}
}
您 会注意到隐藏代码中有很多方法，所有这些方法都与我们在 XAML 代码中向控件添加的事件处理程序相对应。例如，在此代码中，movieStop_Click 方法对单击“停止”按钮的用户作出响应，然后将时间线值设置为 0（换言之，返回到影片的起始位置）并更改“播放”按钮上的文本（从“暂停”更改为“播放”，具体取决于其最初所处的状态）。
此 隐藏代码也会对单击“播放/暂停”切换按钮的用户作出响应，这样就会调用相应的 Play 和 Pause 方法并设置切换按钮上的文本。用户还可以与滑块控件进行交互，该控件可使影片向后跳至某个特定点，这就相当于快进/倒转功能。最后，用户可通过单击“静音 ”复选框使影片静音。
这时，您可以通过按下键盘上的 F5 或单击 Visual Studio 项目菜单上的“调试”|“启动调试”来调试 Silverlight 应用程序。这将会调用您的默认浏览器，然后加载 Silverlight 应用程序。您可能会看到一条指明调试未启用的警告。单击“确定”，使 Visual Studio 将 web.config 文件修改为启用调试。如果一切正常，WMV 文件（本例中为 Bear.wmv）将加载并开始播放。您可以通过单击“停止”、“暂停”或使用滑块控件更改播放状态。还可通过选中“静音”复选框更改音效。 尽 管 Silverlight 应用程序此时在运行，在将其与 SharePoint 集成之前您还需要确保完成一个步骤。此步骤就是确保将 XAP 文件（即包含您构建的 Silverlight 应用程序的存档）放置在一个 SharePoint Web 部件能够将其拾取并进行加载的位置。
该 XAP 文件包含 Silverlight 应用程序的所有核心应用程序文件。由于 XAP 文件本质上是已构建项目文件的存档，因而可用 .zip 扩展名重命名 XAP 文件，然后将其打开以查看 XAP 程序包内包含的文件。
打 开 MediaPlayer.xap 文件时，您会看到若干个不同的文件：项目的核心 DLL 以及一个 AppManifest.xaml 文件。该存档中的 DLL 是您创建的代码（在本例中所创建的 DLL 为 MediaPlayer.dll）与运行已编译程序集所必需的 Microsoft DLL 的组合。将生成 AppManifest.xaml 文件，该文件将列出项目内的所有依存关系。下面是本文所讨论的 MediaPlayer 示例中的 AppManifest.xaml 文件的内容，其中包含大量特定于 Silverlight 应用程序部署的关键引用：
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
EntryPointAssembly="MediaPlayer"
EntryPointType="MediaPlayer.App"
RuntimeVersion="2.0.30523.6">
<Deployment.Parts>
<AssemblyPart x:Name="MediaPlayer" Source="MediaPlayer.dll" />
<AssemblyPart x:Name="System.Windows.Controls.Extended"
Source="System.Windows.Controls.Extended.dll" />
</Deployment.Parts>
</Deployment>
其中显示了程序集的名称 (MediaPlayer) 和用于编译应用程序的 Silverlight 运行时版本 (2.0.30523.6)，并列出了所需的程序集（这同时也包含在 XAP 存档内）。
请 确保将 XAP 文件复制到 SharePoint 站点内的某个位置。在 MediaPlayer 示例中，我们在 SharePoint 站点的根虚拟目录中创建了一个名为 ClientBin 的文件夹。您也可以选择将 XAP 文件复制到某个 SharePoint 文档库或 SharePoint 服务器上的 _layouts 文件夹中。在 ClientBin 内，我们创建了一个名为 XAP 的文件夹，其中包含所有的 XAP 文件（或我们正在构建并与 SharePoint 集成的 Silverlight 应用程序）。当您在 SharePoint Web 部件项目中创建 Silverlight 控件的实例时，需要引用该位置。您还需要确保在更新和重编译 Silverlight 应用程序时，不要忘记将最新的 XAP 文件复制到相应的目录中。
将 XAP 文件复制到服务器上的某位置后，现在就可以马上为 Silverlight 应用程序创建 SharePoint Web 部件宿主容器了。
如果接受了 Web 部件项目的默认名称，项目外壳中会包含一个名为 WebPart1 的 Web 部件。您可以保留此名称，但您可能希望为 Web 部件新建一个更具描述性的名称。
为 此，请右键单击现有的 Web 部件 (WebPart1)，然后选择“删除”。接下来单击 WSP 选项卡，然后删除 WebPart1 WebPart 下的所有内容。（如果未显示 WSP 视图—将 Web 部件程序包部署到 SharePoint 后的视图，请在 Visual Studio 主菜单中单击“视图”、“其他窗口”，然后选择“WSP 视图”。）确认删除 Web 部件后，在“解决方案资源管理器”中右键单击该项目，然后选择“添加新项”。在“添加新项”对话框中，选择 SharePoint 节点，然后选择“Web 部件”。为该 Web 部件提供一个更为直观的名称。
向项目中添加新 Web 部件（单击图像可查看大图）
创建和部署 Web 部件
要创建 Web 部件，请打开 Visual Studio，然后打开一个新的 SharePoint Web 部件项目模板（请参见图 6）。在本例中，我们已将新的 Web 部件项目命名为 MediaPlayerWebPart。
图 6 Web 部件项目模板（单击图像可查看大图）
添 加了新 Web 部件后，需要在项目中添加两个引用才能添加代码。第一个引用是 System.Web.Extensions DLL，第二个是 System.Web.Silverlight DLL。要向 Web 部件添加代码，右键单击 Web 部件代码文件（例如 MediaPlayerWebPart.cs），然后单击“查看代码”。图 7 显示了我们添加到 Web 部件项目中的代码。
有 两个重要事项需要强调一下。第一个就是我们将使用 ScriptManager 对象渲染 Silverlight 应用程序。这是由于 Silverlight 应用程序对 AJAX ScriptManager 控件有依存性，因此首先需要向项目添加 ScriptManager 对象的实例。
第二个就是 Silverlight 控件的实例化。在图 7 所示的代码中，myMediaCtrl 表示 Silverlight 控件（事实上就是我们创建的 Silverlight 媒体播放器）的实例。在创建控件的新实例后，您需要设置许多属性。这些属性中非常重要的是 Source 属性，该属性指向 XAP 文件的位置，然后在 Web 部件内加载该文件。
图 7 媒体播放器 Web 部件 namespace MediaPlayerWebPart {
[Guid("7e7ef885-130a-45e6-ab14-15f344b1939d")]
public class MediaPlayerWebPart :
System.Web.UI.WebControls.WebParts.WebPart {
public MediaPlayerWebPart() {
}
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
if (scriptManager == null) {
scriptManager = new ScriptManager();
this.Controls.Add(scriptManager);
}
}
protected override void CreateChildControls() {
System.Web.UI.SilverlightControls.Silverlight myMediaCtrl =
new System.Web.UI.SilverlightControls.Silverlight();
myMediaCtrl.ID = "myMediaPlayer";
myMediaCtrl.Source = "/ClientBin/XAP/MediaPlayer.xap";
myMediaCtrl.Width = new System.Web.UI.WebControls.Unit(900);
myMediaCtrl.Height = new System.Web.UI.WebControls.Unit(650);
this.Controls.Add(myMediaCtrl);
}
}
}
添加代码后，即可着手准备完成第二个步骤：配置要部署的 Web 部件项目。为此，请打开该项目的“属性”视图，然后单击“调试”选项卡。选中“使用 URL 启动浏览器”复选框，然后输入 SharePoint 站点的根 URL（例如 http://spvm）。
要 测试 Web 部件的部署，单击“生成”，然后单击“部署解决方案”。这将会自动创建一个包含将 Web 部件程序集部署到 SharePoint 所需的全部文件的 WSP 程序包（SharePoint 程序集部署项的 CAB 等同文件）、将解决方案文件部署到 SharePoint 站点中相应的位置，然后停止并重新启动“Internet 信息服务”(IIS) Web 应用程序。
如 果您尝试在打开 UAC 的情况下在 Windows Server 2008 上进行部署，则需要以“管理员”身份运行 Visual Studio，否则会收到“对象引用未设置为某个对象的实例”的错误消息。假定一切都配置正确，您现在就可以将 Web 部件添加到 SharePoint 内的某站点，这就是 SharePoint 与 Silverlight 之间集成的最后一步。
向 SharePoint 站点添加应用程序
此时，您已创建了 Silverlight 应用程序，并为 Silverlight 应用程序创建和部署了 Web 部件容器。剩下的最后一步就是创建一个可承载 Web 部件的站点。但在执行此操作前，您要检验几个事项。
第 一件事就是检验您是否已在全局程序集缓存 (GAC) 中安装了 System.Web.Silverlight.dll。如果没有安装，请从安装位置 \Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server 进行安装。
第 二件事是检验 SharePoint 根目录中的 web.config 文件是否具有支持 Silverlight 应用程序所必需的所有元素，以及 Silverlight 应用程序是否标记为安全控件。下面说明了 web.config 文件中 MediaPlayerWebPart 的安全控件条目（在构建项目并将项目部署到 SharePoint 站点时自动添加）：
<SafeControl Assembly="MediaPlayerWebPart,
Version=1.0.0.0,
Culture=neutral,
PublicKeyToken=9f4da00116c38ec5"
Namespace="MediaPlayerWebPart"
TypeName="MediaPlayerWebPart"
Safe="True" />
尽 管我们不会详尽讨论 web.config 文件，但在您设法确保 SharePoint 站点根目录中的 web.config 文件支持 Silverlight 应用程序时，最简单的办法就是检查作为 Silverlight 项目一部分生成的 web.config 文件，同时确保所有这些元素都存在于 SharePoint 站点的根文件夹下的 web.config 中。如果所有这些元素都不存在，则 SharePoint Web 部件中将不会出现 Silverlight 应用程序。
您 现在就可以创建将承载基于 Silverlight 的 Web 部件的 SharePoint 站点了。为此，请导航到您的 SharePoint 站点。我们为 Silverlight 应用程序创建了一个名为 Media Player 的单独测试站点。要创建该站点，请导航到 SharePoint 站点的主页，然后单击“网站操作”|“网站设置”。在“网站管理”下，单击“网站和工作区”。在“网站和工作区”页面内，单击“创建”。提供名称、说明和 站点类型（我们选择了 Blank 站点）以及站点的 URL，然后单击“创建”。
新站点创建完成后，SharePoint 将自动加载它。单击“网站操作”和“编辑页面”。在该站点中，单击“添加 Web 部件”，这将调用 Web 部件库（请参见图 8）。 向下滚动，直至找到您添加到 SharePoint 中的项目（例如 MediaPlayerWebPart），选中该复选框，然后单击“添加”。这样可通过被用作宿主容器的 Web 部件将 Silverlight 媒体播放器应用程序添加到 SharePoint 中。该 Silverlight 应用程序作出的响应与您在 Visual Studio 2008 中对它进行调试时一样，仅是以 SharePoint 内的一个 Web 部件的形式出现。将 Web 部件添加到 SharePoint 后，对 Silverlight 应用程序内的不同控件进行测试，以确保它们都可以正常运行。
图 8 Web 部件库（单击图像可查看大图）
