中国领先的IT技术网站
|
|

在Eclipse中开始Silverlight编程之旅

现在通过插件,Eclipse开发人员将能够在他们熟悉的IDE中创建Silverlight应用程序了。它提供Visual Studio 2008中Silverlight工具的大部分特性,本文将为大家开始Silverlight编程之旅。

作者:黄永兵 译来源:51CTO|2009-03-13 10:39

沙龙活动 | 去哪儿、陌陌、ThoughtWorks在自动化运维中的实践!10.28不见不散!


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 点击插件详细信息按钮显示所有组件

创建项目模板

至此我们已经准备好可以创建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上点击右键,选择‘新建’‘添加现有文件’,然后切换到项目目录,将过滤器改为*.*,然后选择文件,将会询问你是否要覆盖现有文件,回答‘不’,文件就会显示在项目列表中了。

为程序自定义代码

现在我们在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 从代码提示中选择点击事件,将会显示一个事件处理程序对话框

这样将会在代码后台文件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%;
}

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


点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C# 2005 & .NET 3.0高级编程(第5版)

该书为C#经典名著!是Wrox红皮书中最畅销的品种之一。从第1版开始就名满天下;其第3版被评选为2005年最权威的十大IT图书之一;并荣获“2005...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python最火的编程语言