content/samplecontainer/examples/SocialHelloWorld.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
-->
<Module>
 <ModulePrefs title="Social Hello World"
              description="The Social Hello World Application Displays multilingual hello messages"
              thumbnail="http://localhost:8080/"
              icon="http://localhost:8080/samplecontainer/examples/icon.png">
   <Require feature="osapi"></Require>
       <Require feature="settitle"/>
   <Require feature="dynamic-height"></Require>
 </ModulePrefs>
 <Content type="html">
   <![CDATA[
   <style type="text/css">
     #helloworlds {
       margin: 20px;
       font-family: arial, sans-serif;
       width: 310px;
     }

     div.person img {
       margin-bottom: 10px;
     }

     div.bubble {
       background-image: url(/samplecontainer/examples/bubble.gif);
       background-repeat: no-repeat;
       width: 202px;
       height: 66px;
       padding: 12px 0px 0px 12px;
       font-weight: bold;
       font-size: 18px;
       float: right;
     }

     .c0 { color: #008000; }
     .c1 { color: #FF8A00; }
     .c2 { color: #7777CC; }
     .c3 { color: #008000; }
     .c4 { color: #CC0000; }
     .c5 { color: #73A6FF; }

     div.name {
       width: 150px;
       text-align: right;
       font-weight: normal;
       font-size: 12px;
       color: #999;
       position:relative;
       top: 10px;
       right: -35px;
     }
   </style>

   <script type="text/javascript">
   gadgets.window.setTitle('Social Hello World');
     var hellos = new Array('Hello World', 'Hallo Welt', 'Ciao a tutti', 'Hola mundo',
       '&#1055;&#1086;&#1103;&#1074;&#1083;&#1077;&#1085;&#1080;&#1077; &#1085;&#1072; &#1089;&#1074;&#1077;&#1090;', '&#12371;&#12435;&#12395;&#12385;&#12399;&#19990;&#30028;', '&#20320;&#22909;&#19990;&#30028;', '&#50668;&#47084;&#48516;, &#50504;&#45397;&#54616;&#49464;&#50836;');
     var numberOfStyles = 6;
     var viewerCount;

     var allPeople, viewerFriendData;
     function render(data) {
       var viewer = data.viewer;
       allPeople = data.viewerFriends.list;
       if (viewer) {
         allPeople.push(viewer);
       }

       var viewerData = data.viewerData;
       viewerCount = getCount(viewerData[viewer.id]);

       viewerFriendData = data.viewerFriendData;
       viewerFriendData[viewer.id] = viewerData[viewer.id];

       var html = '';
       for (var i = 0; i < allPeople.length; i++) {
         var count = getCount(viewerFriendData[allPeople[i].id]);
         if (count == 0) {
           //continue;
         }

         html += '<div class="person">';
         html += '<div class="bubble c' + count % numberOfStyles + '">' + hellos[count % hellos.length];
         html += '<div class="name">' + allPeople[i].name.formatted + ' (' + count + ') '
          + allPeople[i].gender;
         html += '</div></div>';

         if (allPeople[i].thumbnailUrl
             && allPeople[i].thumbnailUrl.indexOf('null') == -1) {
           html += '<img src="' + allPeople[i].thumbnailUrl + '"/>';
         } else {
           html += '<img src="/samplecontainer/examples/nophoto.gif"/>';
         }
         html += '<br style="clear:both"></div>';
       }
       document.getElementById('helloworlds').innerHTML = html;

       gadgets.window.adjustHeight();
     }

     function getCount(data) {
       return data && data['count'] ? Number(data['count']) : 0;
     }

     function sayHelloWorld() {
       viewerCount++;
       osapi.appdata.update({data:{count:viewerCount}}).execute(initData);
     }

     function initData() {
       var fields = ['id','age','name','gender','profileUrl','thumbnailUrl'];
       var batch = osapi.newBatch();
       batch.add('viewer', osapi.people.getViewer({sortBy:'name',fields:fields}));
       batch.add('viewerFriends', osapi.people.getViewerFriends({sortBy:'name',fields:fields}));
       batch.add('viewerData', osapi.appdata.get({keys:['count']}));
       batch.add('viewerFriendData', osapi.appdata.get({groupId:'@friends',keys:['count']}));
       batch.execute(render);
     }

     gadgets.util.registerOnLoadHandler(initData);
   </script>

   <div style="margin-bottom: 1em">
     <input type="button" value="Say hello" onclick="sayHelloWorld(); return false;"/>
   </div>
   <div id="helloworlds" style="margin: 4px">
   </div>
  ]]>
  </Content>
</Module>