Popfly是Microsoft新推出的mashup服务, 其目的是"使得任何技术水平的用户都能够轻松创建或编辑他们自己的mash-up" (http://blog.joycode.com/soma/archive/2007/10/29/109761.aspx ) . OK, 轻松创建, 那就来试试吧. 因为对饭否的API比较熟, 就拿它开刀了. Popfly已经提供了一些知名网站的block, 但没有Fanfou的. 我们就从创建一个Block开始. 选择 crate new -> block. 左边的会出现两个tab, 一个来编辑描述XML文件, 一个来编辑javascript文件. (XML+Javascript, 又见黄金组合).
XML描述文件里除了一些信息如提供者的名字. URL之外, 主要的是Operations元素和Objects元素. 这两个元素一个定义了外部能调用的方法, 一个定义了自定义类的数据成员. 我这个Block准备提供饭否的随便看看的数据, 所以定义一个Operation: getFriendsTimeLine; 一个自定义类: TimeLineCPI. 文件内容如下:

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <block class="FanfouClass">
 3   <providerName>Fanfou</providerName>
 4   <providerUrl>http://monologue.wordpress.com.cn</providerUrl>
 5   <providerLogoUrl></providerLogoUrl>
 6   <blockIconUrl></blockIconUrl>
 7   <operations>
 8     <operation name="getFriendsTimeLine">
 9       <description>
10         Retrieves a list friends' talk.
11       </description>
12       <inputs />
13       <outputs>
14         <output isArray="true" type="custom" object="TimeLineCPI" />
15       </outputs>
16     </operation>
17   </operations>
18   <objects>
19     <object name="TimeLineCPI">
20       <field name="created_at" type="date" isArray="false" />
21       <field name="id" type="string" isArray="false" />
22       <field name="text" type="title" isArray="false" />
23       <field name="user_screen_name" type="name" isArray="false" />
24       <field name="user_id" type="string" isArray="false" />
25       <field name="user_profile_image_url" type="url" isArray="false" />
26       <field name="user_profile_url" type="url" isArray="false" />
27     </object>
28   </objects>
29 </block>

下面就要来看看JS文件了. 这里面主要就是Operation的实现了. 我是取得XML后, 分析一下, 得到各个Field的值. 代码如下:

 1 function FanfouClass()
 2 {
 3 
 4 }
 5 
 6 FanfouClass.prototype.getFriendsTimeLine = function (){
 7     var url = "http://api.fanfou.com/statuses/public_timeline.xml";
 8     var resultXML = environment.getXml(url);
 9 
10     var resultArray  = new Array();
11     if(resultXML.getElementsByTagName("statuses").length >= 1)
12     {  
13             var itemNodeList = resultXML.getElementsByTagName('status');
14             var UserNodeList = resultXML.getElementsByTagName('user');
15             var resultNodeCount = itemNodeList.length;           
16             var resultArray  = new Array(resultNodeCount);
17             
18             if(!resultNodeCount || resultNodeCount < 1)
19             {
20                 throw "Sorry, it seems that no item returned.";                
21             }
22            
23             for(var i = 0; i < resultNodeCount; i++)
24             {  
25                 var itemNode = itemNodeList[i];
26                 var userNode = UserNodeList[i];
27                 if(itemNode)
28                 {               
29                     var created_at = this.getNodeValue(itemNode, 'created_at');
30                     var id = this.getNodeValue(itemNode, 'id');
31                     var text = this.getNodeValue(itemNode, 'text');
32                                 var    user_name = this.getNodeValue(userNode, 'name');
33                                 var    user_screen_name = this.getNodeValue(userNode, 'screen_name');
34                                 var    user_profile_image_url = this.getNodeValue(userNode, 'profile_image_url');
35                                 var    user_profile_url = this.getNodeValue(userNode, 'profile_url');
36                                 var    user_id = this.getNodeValue(userNode, 'id');
37                  
38                     resultArray[i] = new TimeLineCPI(created_at, id, text, user_name, user_screen_name, user_id, user_location, user_description, user_profile_image_url, user_profile_url);
39                 }
40             }
41             return resultArray;
42       
43     }
44     else
45     {         
46         return resultArray; 
47     }    
48 };
49 
50 
51 FanfouClass.prototype.getNodeValue = function(node, nodeName)
52 {
53     if(node.getElementsByTagName(nodeName) && node.getElementsByTagName(nodeName)[0])
54     {
55         return node.getElementsByTagName(nodeName)[0].firstChild.nodeValue;
56     }
57     else
58     {
59         return "";
60     }
61 };
62 
63 function TimeLineCPI(created_at, id, text, user_name, user_screen_name, user_id, user_profile_image_url, user_profile_url)
64 {
65     this.created_at  = created_at;
66     this.text  = text;
67     this.id  = id;
68     this.user_name = user_name;
69     this.user_screen_name = user_screen_name;
70     this.user_id  = user_id;
71     this.user_profile_image_url  = user_profile_image_url;
72     this.user_profile_url  = user_profile_url;
73 }
74 
75 TimeLineCPI.prototype.toString = function() {
76     return "<p>"+this.text+"</p>";
77 };

没有错误处理, 呵呵, 仅仅是demo code. 好, 这个Block就算结束了. 怎么用到一个Mashup里去呢? 下一篇再讲. 另外, 这个Block我已经共享了, 就叫Fanfou, 在Popfly上可以搜到.