代码改变世界

Silverlight 2 打造饭否Show

2008-04-29 09:38 Windie Chai 阅读(...) 评论(...) 编辑 收藏
在Silverlight 1.1的时候,我就像用Silverlight设计一个饭否Show,无奈1.1时代貌似只能通过Web Services来获取跨域的数据,我认为这是一种别扭的开发方式,再加上1.1对中文并不友好,所以就改用Flash实现了这个饭否Show。
Silverlight 2终于解决了上述的两个问题,支持跨域获取数据,支持中文显示,于是我迫不及待的尝试着开发了一个饭否Show(在Silverlight 2 beta SDK 发布的几日后开始开发,开发完成后便忘记了,-___-|||),下面来简要的分享一下开发过程,也望各位Silverlight前辈不吝指教。

UI

UI的界面如下图所示:

UI采用Blend 2.5和Design设计。
如果设计简单的Silverlight界面,那么Blend足矣,但稍复杂的,比如上图中的波浪渐变效果,Blend就无能为力了,而这正是Design的拿手本领。
Design的使用方法就不介绍了,设计完毕后,导出为Silverlight画布,然后我们copy需要的XAML节点即可。
具体的XAML内容就不在此展示了,文末我提供了本文的代码下载,有兴趣的朋友可以下载查看。

饭否API

从上图来分析,我们只用到了饭否中的两部分信息:我的信息和我的消息。
饭否API中,获取这两部分数据的方法如下:
获取用户信息:
http://api.fanfou.com/users/show/用户ID.xml
获取用户消息:
http://api.fanfou.com/statuses/user_timeline/用户ID.rss
那么根据饭否提供的API,我编写了下面两个类:
饭否API类

传入参数

其实我设计这个饭否Show并不是只为了给我一个人使用,那么如何让每位朋友都可以把它变成自己的饭否Show呢?
那么必然要使Silverlight能够接受参数。
在做Flash开发时,可以在HTML中通过Object的“FlashVars”参数来向Flash传递参数列表,在Silverlight中我们同样可以这样做。
通过给“InitParams”参数赋值,我们就可以向Silverlight传递参数了。
给“InitParams”参数赋值的方法如下:
Silverlight的HTML代码块

仅仅把ID参数传入到Silverlight中是不够的,我们还需要在Silverlight中接收这个参数,并做进一步处理。
我们打开Silverlight项目中的App.xaml,为其Application_Startup事件添加如下代码:
Application_Startup
要注意的是Page默认并没有带有一个String参数的构造函数,所以我们接下来还需要为Page类添加这一构造函数重载。

Page.xaml.cs

最后,我们开始编写最关键的代码。我将在Page.xaml.cs中添加方法或事件来调用饭否API、获取用户的信息和消息列表、实现上一条下一条的跳转等。
具体的代码并不难以理解,不再详细解释,大家看注释便好:
Page.xaml.cs代码

预览

Get Microsoft Silverlight
如果你也想要在你的blog中添加这个Widget,那么,Copy上面的HTML代码,修改ID就可以了。

源码下载

点击下载源码包(包括Visual Studio Solution和Expression Design文件)