在Eclipse中开始Silverlight编程之旅-51CTO.COM

【51CTO.com独家特稿】微软公司的Silverlight大大提高了程序的互操作性，非常感谢微软公司和Soyatec，Eclipse开发人员将能够在他们熟悉的IDE中创建Silverlight应用程序了。

开源FANS和高可配置Eclipse IDE最近获得了一个新礼物：Eclipse的Silverlight插件。它提供了Visual Studio2008中Silverlight工具的大部分特性，包括代码提示和XAML预览。这个插件是由Soyatec基金支持开发，由微软互操作性团队管理的。学习Eclipse中Silverlight插件的特性***的办法就是去使用它，因此，本文将使用Eclipse创建一个简单的Silverlight应用程序，一个企业联合组织反馈阅读程序，它在顶层窗口中列出反馈条目，在列表的下面显示选中的条目，实现这个功能的代码短得惊人，最终完成的程序样子如下图所示：

图1 企业联合组织反馈阅读程序

安装Silverlight开发工具箱

Silverlight模块需要下面的软件，按顺序安装它们：

1.Microsoft Windows XP SP2或更高版本，或Windows Vista SP1。

2.Java Development Kit (JDK) 1.5.0-11或更高版本。

3.Eclipse Ganymede 3.4.1，32位版本。

4.Microsoft .NET Framework 3.5。

5.Silverlight 2 Runtime 2.0.31005.0或更高版本。

6.Silverlight 2 SDK

安装这个Beta版本时需要注意几件事情：

1.还没有程序调试器，但这个已经列入开发计划了。

2.Eclipse上的Silverlight插件还不支持64位Windows Vista系统，但修复这个问题也已经列入开发计划了。

3.Ganymede的基础版本已经可以工作得很好，当你安装Silverlight模块时，会自动解决依赖性问题。

当你安装好Silverlight后，你应该更新到2008年10月的DataGrid，它几乎修复了近30个bug，在这篇文章中将使用到DataGrid。

当你安装好所有的先决条件后，就可以安装Silverlight插件了，启动Eclipse，然后选择‘帮助’到‘软件更新’，打开‘软件更新和加载项’对话框，选择‘可用的软件’标签，点击‘添加站点’按钮。

图2 选择可用的软件标签再点击添加站点按钮

在‘添加站点’对话框中，输入http://www.eclipse4sl.org/update/，点击‘确定’按钮，注意不要忘了输入www.，如果忘记输入了，你会看到重复的条目，虽然不影响使用，但看上去很讨厌。

图3输入http://www.eclipse4sl.org/update/，点击‘确定’按钮

在‘可用的软件’标签中将会显示一条新的Silverlight项目，选择它然后点击‘安装’按钮，Eclipse将会安装Silverlight及其依赖文件。

图4 选择Silverlight条目，点击‘安装’按钮

如果想查看究竟都安装了些什么插件，可以点击‘帮助|关于’，看到立方体图标的插件就是Silverlight了。

图5 立方体插件图标就是Silverlight

点击立方体图标显示Silverlight模块信息对话框。

图6 点击立方体图标显示Silverlight模块信息对话框

点击‘插件详细信息’按钮查看所有的组件。

图7 点击插件详细信息按钮显示所有组件

#p#

创建项目模板

至此我们已经准备好可以创建Silverlight应用程序了，选择窗口打开透视图其它，打开透视图选择对话框。

图8 打开透视图对话框

注意这里显示两条Silverlight，***个蓝色立方体的条目表示是Eclipse风格的透视图，左侧是项目管理器，右侧是选项停靠区域，第二个条目表示是VisualStudio风格透视图，它们刚好相反。

现在Silverlight透视图设好了，选择‘文件’‘新建’，你将会看到两个Silverlight项目可供选择：SilverlightProject和SilverlightWebProject，选择SilverlightWebProject，这样你可以在Web页面中嵌入Silverlight程序。

图9 SilverlightWeb项目允许你将Silverlight程序嵌入到还有其他元素的Web页面中

接着你会看到新建项目对话框，输入SyndicationFeedReader作为项目名，这个项目不依赖于其它任何项目，因此你可以不点击‘下一步’按钮，直接点击‘完成’按钮。

图10在新建项目对话框中，输入SyndicationFeedReader作为项目名称

在开始动手之前，先看看都创建了些什么内容，项目管理器中显示了两个项目：SyndicationFeedReader和SyndicationFeedReader.Web。

图11项目管理器中显示了两个项目：SyndicationFeedReader和SyndicationFeedReader.Web

在上面的屏幕截图中，鼠标指针悬停在视图菜单按钮上，当前版本的插件没有显示视图菜单，但你可以从其它Eclipse透视图打开和关闭你的Silverlight项目。

如果这个时候编译并运行的话，只会显示一个空白页面，但它给我们一个机会设置一些选项，选择‘运行’‘运行配置’，启动‘运行配置’对话框，在列表中选择‘SilverlightWebApp’，然后点击‘新建’按钮。

图12选项运行运行配置，启动运行配置对话框

接着你会看到配置对话框，在名称区域输入SyndicationFeedReader，在用于测试的项目处选择SyndicationFeedReader.Web，开始页SyndicateFeedReaderTestPage.html也将被选中，点击‘应用’，然后点击‘运行’按钮。

图13输入运行配置名称，选择项目开始页面

在你的浏览器中将会显示一个空白页面，但你在上面点击右键就会显示Silverlight配置上下文菜单，这说明Silverlight已经在运行，只不过还没有填充内容吧了。
注意：我们将对SyndicationFeedReaderTestPage.html做一点小小的改动，但它可能不会在项目管理器中作为SyndicationFeedReader.Web项目的一部分列出来，Soyatec已经修复了这个bug，但你在阅读本文的时候可能还没有发布补丁，如果真是这样，你可以手动添加它，在项目名称SyndicationFeedReader.Web上点击右键，选择‘新建’‘添加现有文件’，然后切换到项目目录，将过滤器改为*.*，然后选择文件，将会询问你是否要覆盖现有文件，回答‘不’，文件就会显示在项目列表中了。

#p#

为程序自定义代码

现在我们在Page.xaml文件为用户添加接口代码，XAML即可扩充应用程序标记语言，XAML文件实际上是一个XML文件，双击Page.xaml在编辑器中打开它，下面面板显示源代码，上面面板显示预览效果。你会看到文件中已经包含了一些框架代码，顶层的UserControl元素包含所有的Silverlight内容，我们从移除Width和Height参数开始，这样

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >

Silverlight Grid控制和HTML表类似，但语法稍有不同，我们的Silverlight程序将包括两行，上面的行容纳一个标记和按钮，下面的行容纳反馈项目，及一个反馈项目列表，被选中的项目将以HTML样式显示。

想要添加一个行的定义，使用如下语法：

    Xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    >

接下来我们要添加一个水平方向的StackPanel来容纳标签文本和按钮，可以使用右侧的选项面板，点击‘容器’，然后拖动StackPanel项目到代码窗口，在标记后输入一个空格，然后按Ctrl+空格键，弹出代码提示窗，向下滚动到Orientation，或输入‘O’加速搜索速度，双击选中它，保持默认值‘Horizontal’即可。

我们两个StackPanel控制器将会是一个TextBlock和一个Button，TextBlock将会赋予‘Wired’（本文我们用它作为反馈的名字），注意不是所有的反馈都可以工作，这个域必须通过在服务器上托管一个小文件执行跨域访问，如wired.com上的这个文件。

想要增加一个文本块（TextBlock），在选项面板上点击控制器（Controls），然后拖动TextBlock到你的代码窗口中两个StackPanel标记之间，然后点击按钮，拖动按钮控制器到代码窗口中TextBlock下，象下面这样配置控制器，不用告诉它不要使用grid的***行（row 0），因为默认就是这样了，使用StackPanel时，你可以使用Ctrl+空格键得到语法帮助。


                            VerticalAlignment="Center" 
                FontSize="36" 
                Padding="10"
                Foreground="White" 

                />

迄今为止一切顺利，但按钮还没有起任何作用，我们还需要在按钮上添加事件控制程序，当点击按钮时就访问反馈，在按钮的结束方括号前插入光标，按Ctrl+空格键，代码提示只有一个选项，即点击事件，双击选中它，将会显示一个事件处理程序对话框，输入Btn_Click作为事件的名称，然后点击确定。

图 14 从代码提示中选择点击事件，将会显示一个事件处理程序对话框

#p#

这样将会在代码后台文件Page.xaml.cs中创建一个事件处理程序占位符，然后打开它，事件处理程序只需要三行代码。

首先我们以一个访问服务器数据的WebClient对象为例进行说明，因为我们要异步访问反馈，需要为OpenReadCompleted事件添加一个事件处理程序，最后，我们使用OpenReadAsync方法提交请求。

private void Btn_Click(object sender, RoutedEventArgs arg1)
        {
            WebClient client = new WebClient();
            client.OpenReadCompleted += 
                  new OpenReadCompletedEventHandler(client_OpenReadCompleted);
            client.OpenReadAsync(
                  new Uri("http://feeds.wired.com/wired/index?format=xml"));        
        }
OpenReadCompleted

事件处理程序将会绑定反馈数据到显示它的控制器上，在我们的例子中就是DataGrid，因此在添加处理程序之前，我们先回到Page.xaml添加好DataGrid。

在选项面板中点击容器，拖动DataGrid到代码窗口，把它放在StackPanel下面，在两个关闭标记和之间，这样不仅在代码中添加了DataGrid标记，在文件的顶部还添加了额外的命名空间，然后在项目中添加了一个到System.Windows.Controls.Data的引用。

我们想给DataGrid取一个名字，以便可以在OpenReadCompleted事件处理程序中引用它，我们将把反馈数据绑定到它上面，名字就命名为gridSyndicationItems，然后添加两个属性：Grid.Row="1"（因为列表是从grid的第二行开始的，***行是row=0）和AutoGenerateColumns="false"（稍后会有详细说明）。最后我们想要web页面显示选中的反馈，因此需要一个SelectionChanged事件触发程序，代码提示可以起到帮助作用，只需按Ctrl+空格键即可。

如果你不将AutoGenerateColumns设置为false，DataGrid将会为每个反馈自动产生一列，通常这不是你想要的效果，如果你将其设置为false了，你可以进一步设置显示哪些列，这才是我们想要的，下面就是示例：

          AutoGenerateColumns="false" SelectionChanged="gridFeed_SelectionChanged" >

Binding语句指定了每一列要显示的字段，字段名称是Syndication字段对象的属性。
现在我们再回到我们的代码隐藏文件Page.xaml.cs，为反馈读取完毕添加事件处理程序，在Btn_Click处理程序下面为OpenReadCompleted处理程序添加下面的代码：

private void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
         {
            if (e.Error == null)
            {
                XmlReader reader = XmlReader.Create(e.Result);
                SyndicationFeed feed = SyndicationFeed.Load(reader);
                gridSyndicationItems.ItemsSource = feed.Items;
                reader.Close();
            }
          }

如果在读取反馈时没有遇到错误，我们创建一个XmlReader对象，使用我们的反馈初始化它，然后将XmlReader载入名叫‘feed’的SyndicationFeed对象，它的项目属性包含了反馈项目的集合，为了绑定反馈数据到DataGrid，我们为反馈项目指定DataGrid的ItemsSource属性。

命名空间包含了SyndicationFeed类，但它还不是我们项目的一部分，在项目管理器中，展开SyndicationFeedReader项目，在‘引用’上点击右键，选择‘添加引用’。

图 15 在SyndicationFeedReader项目的引用上点击右键，选择添加引用

此时会弹出一个可用组合的列表，那些在当前项目中已经引用了的项目以灰色高亮显示，选择System.ServiceModel.Syndication，点击‘确定’按钮。

图 16 选择Select System.ServiceModel.Syndication，点击确定

接下来需要为代码隐藏文件Page.xaml.cs添加一些‘using’提示：

using System.ServiceModel.Syndication;
using System.Xml;
using System.Windows.Browser;

在显示选中的反馈时使用到了System.Xml和System.Windows.Browser，它包含两部分内容：

◆当选择的反馈项目发生变化时的事件处理程序

◆在页面上以iframe形式显示选中反馈的HTML

在OpenReadCompleted事件处理程序下面添加SelectionChanged事件处理程序，这次没有自动创建占位符了，代码提示将会在未来的版本中增强。

private void gridFeed_SelectionChanged(object sender, EventArgs e)
        {
            SyndicationItem selectedItem = 
                  (SyndicationItem)gridSyndicationItems.SelectedItem;
            HtmlElement element = 
                   HtmlPage.Document.GetElementById("rssFrame");
            element.SetAttribute("src", selectedItem.Links[0].Uri.ToString());
        }

***行是更新选中的项目，它后面的两行就是显示内容了，注意对rssFrame的引用，实际上它是一个要显示的iframe的名字。

最后一步是将iframe添加到我们的HTML页面中，在SyndicationFeedReader.Web项目中的SyndicationFeedReaderTestPage.html上点击右键，选择‘以…打开’‘文本编辑器’，首先限制Silverlight程序占整个页面的50%，通过将silverlightControlHost的高度值从100调整到50实现。

#silverlightControlHost {
     height: 50%;
    }

然后在标记前添加下面两行代码：

责任编辑：彭凡来源： 51CTO

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区

教育

51CTO学堂精培企业培训 CTO训练营



     </PRE></TD></TR></TBODY></TABLE></P>
<P>搞定！保存所有文件，切换到‘运行’菜单，选择‘Run History’&#61664;‘SyndicationFeedReader’，当浏览器窗口启动后，点击‘Get Feed’按钮，载入反馈项目，当你选择不同的项目时，关联的页面将会自动显示在窗口下方区域，当然你可以脱离Eclipse双击SyndicationFeedReaderTestPage.html运行它。</P>
<P><STRONG>Java Web Service的互操作性</STRONG></P>
<P>本文我只列举了一个非常简单的程序示例，Eclipse的Silverlight插件还可以创建独立的Silverlight程序，它也支持和基于SOAP或REST协议的Java Web Service互操作性，在<A href="http://www.eclipse4sl.org/documentation/userdoc/html/webservice/">http://www.eclipse4sl.org/documentation/userdoc/html/webservice/</A>你可以找到示例。</P>
<P>Eclipse Silverlight插件现在是一个非常活跃的开发插件，欢迎你的加入。</P>
<P>【编辑推荐】</P>
<OL>
<LI><A href="http://developer.51cto.com/art/200903/112627.htm" target=_blank>在Silverlight中进行基本的数据验证</A></LI>
<LI><A href="http://developer.51cto.com/art/200902/110655.htm" target=_blank>详解Silverlight中的Downloader对象</A></LI>
<LI><A href="http://developer.51cto.com/art/200902/107892.htm" target=_blank>Silverlight 2 Twitter 例程</A></LI></OL>