使用 OSDE 开发 OpenSocial 应用

来源：互联网发布：淘宝现在没有一元拍编辑：程序博客网时间：2024/05/16 02:19

OSDE 是一个 Eclipse 的插件，提供了开发者基于 Eclipse 的 OpenSocial 开发环境。 OSDE 使用 Shindig Server 提供本地的开发与调试，用 Java H2 数据库 (http://www.h2database.com/html/main.html) 存储管理 Social 数据。接下来，本节将一步步详解怎样在 Eclipse 中使用 OSDE 进行 OpenSocial 的应用开发。

安装 OSDE

OSDE 的安装要求 Eclipse3.4.1 版本 ( 或者更高版本 ) 以及使用 J2SE1.5( 或者更高版本 ) 。读者可以使用 Eclipse 的 updatesite 机制，连接到 "http://opensocial-development-environment.googlecode.com/svn/update-site/site.xml". 站点，安装 OSDE 。

构建 OpenSocial 应用

首先，我们启动 Shindig 服务器，添加我们测试所需要的 Social 数据。

图 4. 启动 Shindig 服务器

在启动 Shindig 服务器之后，转到 OpenSocial透视图 (Perspective)，在 People View，往 H2 数据库增加我们调试使用的 People 数据。

图 5. 添加 Social 数据
添加Social数据

当然，你也可以选择 [OSDE] -> [Create sample data in Shindig] 菜单 , 让 OSDE 来帮助你创建 Social 数据。

图 6. 创建 Social 数据

在我们的这个例子中，增加了四个数据样本：canonical，john.doe，jane.doe 和 george.doe, john.doe，jane.doe 和 george.doe 都是 canonical 的朋友。

在我们准备好了这些后台的 Social 数据后，就可以在 Eclipse 里创建 OpenSocial 工程了。

选择 [File] -> [New] -> [Project...] 菜单，打开如图 3 所示的对话框，选择创建 OpenSocial 工程。

图 7. 创建 OpenSocial 工程

如图 6 所示，选择 OpenSocial Project, 点击下一步，OpenSocial 工程创建向导启动，帮助你完成工程的创建。

图 8. OpenSocial 工程设置
OpenSocial工程设置

图 7 选择了让向导帮我们自动生成样例代码，获取 Social 数据 (Fetching a person data and friends) 。

当你的工程创建好之后，你可以通过 OSDE 提供的菜单运行它，如图 4 所示。

图 9. 运行 OpenSocial 工程

运行的结果如图 5 所示。

图 10. OpenSocialTest 运行结果

当我们点击” Fetch people and friends ”按钮，我们的 OpenSocial 应用会从 H2 数据库中查出数据，并显示在该页面。

代码分析

OpenSocial 工程创建向导给我们生成的样例代码如清单 1 所示。

清单 1. gadget.xml

<?xml version="1.0" encoding="UTF-8"?> 
 <Module> 
  <ModulePrefs title="test" author_email="lisanh@cn.ibm.com"> 
    <Require feature="opensocial-0.8" /> 
    <Require feature="dynamic-height" /> 
  </ModulePrefs> 
  <Content type="html" view="canvas"><![CDATA[ 

 <!-- Fetching People and Friends --> 
 <div> 
  <button onclick='fetchPeople();'>Fetch people and friends</button> 
  <div> 
    <span id='viewer'></span> 
    <ul id='friends'></ul> 
  </div> 
 </div> 
 <script type='text/javascript'> 
 function fetchPeople() { 
  var req = opensocial.newDataRequest(); 
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer'); 
  var params = {}; 
  params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.VIEWER; 
  params[opensocial.IdSpec.Field.GROUP_ID] = 'FRIENDS'; 
  var idSpec = opensocial.newIdSpec(params); 
  req.add(req.newFetchPeopleRequest(idSpec), 'friends'); 
  req.send(function(data) { 
    var viewer = data.get('viewer').getData(); 
    document.getElementById('viewer').innerHTML = viewer.getId(); 
    var friends = data.get('friends').getData(); 
    document.getElementById('friends').innerHTML = ''; 
    friends.each(function(friend) { 
      document.getElementById('friends').innerHTML += '<li>' + friend.getId() + '</li>'; 
    }); 
    gadgets.window.adjustHeight(); 
  }); 
 } 
 </script> 
  ]]></Content> 
 </Module>

<Module>表示 gadget.xml XML 文件描述的是一个 Gagdet 。 <ModulePrefs> 包括一些附加的信息，比如Gadget 的标题，作者，文字描述等等。 <Require feature="opensocial-0.8" /> 表示这个Gadget 会使用 Opensocial API 0.8 的功能。还可以添加其他 <Require>标签让平台提供更多的功能以供这个 Gadget 使用。 <Content type="html"> 表示这个 Gadget中的内容类型是基于 HTML 的。一般来说，对于大部分 OpenSocial 平台来说推荐使用这种类型。 <![CDATA[ …]]>

是 Gadget 的主要内容，包含了一段 HTML，CSS 和 JavaScript 代码，形式就像一个正常网页中 <body> 内的部分。

“ Fetch people and friends ”逻辑实现在 fetchPeople 的函数里。 OpenSocial 使用了 VIEWER 和 OWNER 两个角色来定义 OpenSocial 用户：

VIEWER：是正在观看这个 Gadget 的人，通常就是浏览器前的用户。一般都使用第一人称“我”。
OWNER：是呈现这个 Gadget 的页面的人，是正被 VIEWER 观看的人，一般使用第三人称直呼其名。

在 fetchPeople 函数里，我们得到的是 VIEWER( 这里的 VIEWER 就是 canonical) 的朋友列表，并把他们显示成为 HTML 内容。

参考资源 (resources)

OpenSocial for Java developers, by Chris Schalk, Jason Cooper
OSDE Tutorial
OpenSocial Specification 0.8
Apache Shindig