Programming Social Applications

A Practical Example

Note

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

Now that we know how to initialize the cajoler within an OpenSocial gadget, let’s explore a real gadget to see how this is implemented in practice.

Our gadget’s function is to display a numeric value on the screen that defaults to 0. We will then offer a series of buttons to increment or decrement that value:

<?xml version="1.0" encoding="utf-8"?>
<Module>
   <ModulePrefs title="Caja Sample"
                title_url="http://www.jcleblanc.com"
                description="Displays a simple content section to cajole"
                author="Jonathan LeBlanc">
      <Require feature="opensocial-0.9"/>
      <Require feature="caja" />
   </ModulePrefs>
   <Content type="html">
      <![CDATA[
      <div id="number">0</div>
      <button onclick="changeNum('+')">+</button>
      <button onclick="changeNum('-')">-</button>

      <script type="text/javascript">
      //increment or decrement the counter
      function changeNum(changeType){
         var num = document.getElementById("number");
         num.innerHTML = (changeType == "+") ?
                         parseInt(num.innerHTML) + 1 :
                         parseInt(num.innerHTML) - 1;
      }
      </script>
   ]]>
   </Content>
</Module>

Our gadget includes the Caja feature that makes the JavaScript libraries for the cajoling process available in the gadget. The gadget’s Content section is what will be cajoled when the gadget is rendered in a container that supports Caja.

Once the container has cajoled our gadget’s content, the Content section ...