Programming Social Applications

Putting It All Together

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_6/chapter_final.xml.

Now that you have the knowledge you need to leverage a gadget’s social features, we’ll put it to use in a sample gadget. This gadget will display the activity stream of the viewer’s friends, display their profile images, and then provide a method for the viewer to add a new activity to his stream.

First, we need to build the gadget markup. In this example, we’ll just need the lightweight osapi JavaScript library, so we’ll include that feature in the gadget. We then define the view in which the Content node will be loaded:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Chapter 4 Example"
                description="Display social information fetch and push abilities">
      <Require feature="opensocial-0.9"/>
      <Require feature="osapi" />
   </ModulePrefs>
   <Content type="html" view="canvas">
      <![CDATA[
      <!-- view content -->
      ]]>
   </Content>
</Module>

We now need to include our styles and markup in the Content node. For this example, we use styles to position the page elements and set their font, colors, and spacing. This markup will build a container with two columns. The left column will display the recent updates of the viewer’s friends, and the right column will display profile images for 12 of those friends. Below the photos is a form to allow the user to input a title, description, and URL to push out a new activity ...