Sample App For OpenSocial 0.7

Now that our sandbox supports OpenSocial 0.7, I wanted to post an updated sample app that reflects the changes. There are more updates to come, but here's what you can see so far:

• require opensocial-0.7. views and skins are not yet used here, but will be soon.

• use getDisplayName() instead of getField(opensocial.Person.Field.NAME) for Person objects

• opensocial.newActivity has changed, it takes an options array instead of the String title as a parameter

• opensocial.getEnvironment().getParams() is replaced with gadgets.views.getParams()

• use gadgets.window.adjustHeight() instead of _IG_AdjustIFrameHeight

• requestSendMessage is available. We have implemented the NOTIFICATION type so far, an example is included in this app.

• gadgets.util.registerOnloadHandler replaces _IG_RegisterOnloadHandler

• gadgets.io.makeRequest is now supported for fetching external data, this replaces _IG_Fetch* methods
  

Only the getDisplayName(), opensocial.newActivity, and getParams changes are not backwards compatible. One note though: the UI params are no longer available through args, as you see it done at the bottom of the app. That's getting replaced by gadgets.skins, but we haven't quite finished that part yet, so it's not included here. I'll again continue to keep updating this app as more features become available, including skins support. I should probably also work something in there relating to your friends at some point ;).

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="My Journal" description="Display the Owner's hi5 Journal" title_url="http://www.hi5.com" author="Lou Moore" author_email="lou@hi5.com" author_affiliation="hi5" author_location="San Francisco, CA">
    <Require feature="dynamic-height"/>
    <Require feature="skins"/>
    <Require feature="views"/>
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[

      <!-- Text fields go here -->
      <div id="journal" style="margin: 4px">
        <div id="user"></div>
        <div id="body"></div>
      </div>

      <script>

        var Hi5AuthToken = null;

        /**
         * Store the Hi5AuthToken and load the viewer when the page loads
         */
        var init = function() {

          var p = gadgets.views.getParams();
          Hi5AuthToken = p['Hi5AuthToken'];

          loadUsers();
        }

        // Call the init function onLoad
        gadgets.util.registerOnLoadHandler(init);

        /**
         * Fetch the Owner and Viewer with an opensocial dataRequest
         */
        function loadUsers() {
          var req = opensocial.newDataRequest();
          req.add(req.newFetchPersonRequest('OWNER'), 'owner');
          req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
          req.send(onLoadUsers);
        }

        /**
         * After the Owner is loaded, fetch their journal from the hi5 api server
         */
        function onLoadUsers(dataResponse) {
          var owner = dataResponse.get('owner').getData();
          var viewer = dataResponse.get('viewer').getData();
          var ownerId = owner.getField(opensocial.Person.Field.ID);

          // Create HTML for the user summary
          var userHtml = '<a href="' + owner.getField(opensocial.Person.Field.PROFILE_URL) + '"><img border="0" width="50" src="' + owner.getField(opensocial.Person.Field.THUMBNAIL_URL) + '"/></a> <a href="' + owner.getField(opensocial.Person.Field.PROFILE_URL) + '">' + owner.getDisplayName() + '</a>: ' + owner.getField(opensocial.Person.Field.AGE) + ',' + owner.getField(opensocial.Person.Field.GENDER);
          document.getElementById('user').innerHTML = userHtml;

          // Fetch the journal feed and parse it
          gadgets.io.makeRequest('http://api.hi5.com/rest/feed/journal/'+ownerId,
              function (response) {
                  parseAtom(response);
              }
              , {'METHOD' : 'GET', 'CONTENT_TYPE' : 'DOM'}
          );

          // Request an activity stream entry
          createActivity(viewer, owner);
          sendNotification(viewer, owner);
        }

        /**
         * Request an activity stream entry, with links to owner and viewer and application canvas page
         */
        function createActivity(viewer, owner) {

          var opts = new Object();
          opts[opensocial.Activity.Field.TITLE] = "<a href='" + viewer.getField(opensocial.Person.Field.PROFILE_URL) + "'>" + viewer.getDisplayName() + "</a> viewed <a href='" + owner.getField(opensocial.Person.Field.PROFILE_URL) + "'>" + owner.getDisplayName() + "'s</a> journal with the <a href='/friend/apps/displayAppCanvas.do?appId=192&userid=" + owner.getField(opensocial.Person.Field.ID) + "'>MyJournal</a> application";
          opts[opensocial.Activity.Field.STREAM_FAVICON_URL] = "http://images.hi5.com/images/icons/_/update_widget.png";

          var activity = opensocial.newActivity(opts);
          opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);
        }

        function sendNotification(viewer, owner) {
          var toIds = new Array(1);
          toIds[0] = owner.getField(opensocial.Person.Field.ID);

          var notification = "<a href='" + viewer.getField(opensocial.Person.Field.PROFILE_URL) + "'>" + viewer.getDisplayName() + "</a> viewed your journal with the <a href='/friend/apps/displayAppCanvas.do?appId=192&userid=" + owner.getField(opensocial.Person.Field.ID) + "'>MyJournal</a> application";

          var opts = new Object();
          opts[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION;

          var message = opensocial.newMessage(notification, opts);
          opensocial.requestSendMessage(toIds, message);
        }

        /**
         * Naive parser, just get the titles and content and display the journal by setting innerHTML
         * of the 'journal' div created above
         */
        function parseAtom(response) {
          var html = "";
          var titles = new Array();;

          // Get titles
          var items = response.data.getElementsByTagName('title');
          for(var i = 0; i < items.length; i++) {
            if(i > 0) {
              var title = items.item(i).firstChild.nodeValue;
              titles[i-1] = title;
            }
          }

          // Get bodies
          items  = response.data.getElementsByTagName('content');
          for(var i = 0; i < items.length; i++) {
            var body = items.item(i).firstChild.nodeValue;
            html += "<div style='margin-bottom:10px;font-weight: bold;'>" + titles[i] + "</div><div style='margin-bottom:10px;>" + body + "</div>";
          }

          // Set html and styles
          document.getElementById("body").innerHTML = html;
          document.getElementById("journal").style.backgroundColor = _args()["appBgColor"];
          document.getElementById("journal").style.backgroundImage = "url(" + _args()["appBgImg"] + ")";
          document.getElementById("journal").style.backgroundPosition = _args()["appBgPos"];
          document.getElementById("journal").style.backgroundRepeat = _args()["appBgRep"];
          document.getElementById("journal").style.color = _args()["appColor"];

          // Call this method to adjust the app's IFrame height if necessary
          gadgets.window.adjustHeight();
        }

      </script>

    ]]>

  </Content>
</Module>