Opensocial使用OpenSocial开发IGoogle小工具：代码结构

整体来说，小工具就是XML文件，外加一些其他的引用文件。比如说图片，javascript文件，或者是其他的XML文件等等。

先不说复杂的代码，先看Hello World程序：

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="List Friends Example">    <!--小工具标题-->
        <Require feature="opensocial-0.7"/>        <!--导入 OpenSocial Library-->
    </ModulePrefs>
    <Content type="html">    <!--内容形式为HTML，可能还有其他的形式-->
        <![CDATA[                 <!--包括小工具的详细内容：HTML，CSS，JavaScript，可以引用其他文件-->
            Hello, world!
        ]]>
    </Content>
</Module>

上面是最简单的代码，如果稍微复杂一点代码，使用和HTML差不多的方式来写：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="List Friends Example">
        <Require feature="opensocial-0.7"/>
    </ModulePrefs>
    <Content type="html">

    <![CDATA[
    <!--引用外部的JavaScript的写法-->
    <script src="http://opensocial-resources.googlecode.com/svn/samples/tutorial/tags/api-0.7/gifts_1_friends.js"></script>

    <script type="text/javascript"> //JavaScript的写法

    /**
    * Request for friend information.
    */
    function getData() {
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), 'viewer');
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS), 'viewerFriends');
        req.send(onLoadFriends);
    };

    /**
    * Parses the response to the friend information request and generates
    * html to list the friends along with their display name.
    *
    * @param {Object} dataResponse Friend information that was requested.
    */
    function onLoadFriends(dataResponse) {
        var viewer = dataResponse.get('viewer').getData();
        var html = 'Friends of ' + viewer.getDisplayName();
        html += ':<br><ul>';
        var viewerFriends = dataResponse.get('viewerFriends').getData();
        viewerFriends.each(function(person) {
            html += '<li>' + person.getDisplayName() + '</li>';
        });
        html += '</ul>';
        document.getElementById('message').innerHTML = html;
    };

    gadgets.util.registerOnLoadHandler(getData);

    </script>
    <div id="message"> </div> <!--HTML的写法-->
    ]]>
    </Content>
</Module>

以上代码已经使用了OpenSocial的API了，接下来会做详细的介绍。