The first element of the sample to set up is the core gadget architecture that will be used:

<Module>
   <ModulePrefs title="Chapter 4 Example"
                description="Displays some of the key concepts
                             learned in chapter 4"
                author="Jonathan LeBlanc"
                author_link="http://www.jcleblanc.com">
      <Require feature="opensocial-0.9"/>
      <Require feature="tabs" />
      <Require feature="minimessage"/>
      <Require feature="setprefs"/>
      <Locale lang="en" country="us" />
   </ModulePrefs>
   <UserPref name="contactMethod"
             default_value="email"
             datatype="hidden" />
   <UserPref name="contactEmail"
             default_value="None Entered"
             datatype="hidden" />
   <UserPref name="contactTwitter"
             default_value="None Entered"
             datatype="hidden" />
   <Content type="html" view="canvas, home, profile">
      <![CDATA[

      ]]>
   </Content>
</Module>

Within the ModulePrefs node, we set our metadata about the gadget and then define the JavaScript libraries required to run the gadget. These match the features we are using, which include OpenSocial 0.9, tabs, minimessage, and setprefs. Next, we indicate support for US-based English in our Locale element.

Since we will be using stored user preferences, we set the UserPref elements next, specifying the three strings we would like to temporarily store (contact method, email, and Twitter). All three strings have default values set (in case the user doesn’t input his contact information) and are hidden.

Last, we create a Content section to host the HTML, CSS, and JavaScript of the gadget inline to the XML file. This single Content element will display similar content between three views (canvas, home, and profile).

Now that we have our architecture established, we have to fill the Content section with the CSS and HTML markup needed for the gadget:

<style type="text/css">
.tablib_table{ margin-top:10px; }
#messageWindow{ padding:5px;
                margin:5px; }
#tabSetting, #tabInfo{ padding:5px; }
#displayPrefs{ background-color:#eaeaea;
               margin:10px 5px;
               padding:5px;
               display:none; }
</style>

<div id="tabSetting">
   <div id="messageWindow">
      Please click on the "More Information" tab for helpful links
   </div>
   <form name="contactInfo">
      <p>
         <input type="radio" name="contactMethod" value="twitter" />
         Twitter<br />

         <input type="radio" name="contactMethod" value="email" />
         E-Mail
      </p>

      <p>
         <label for="contactEmail">Email Address: </label>
         <input type="text" id="contactEmail" />
      </p>

      <p>
         <label for="contactTwitter">Twitter Address: </label>
         <input type="text" id="contactTwitter" />
      </p>

      <button onclick="savePrefs();return false;">Save Preferences</button>
      <button onclick="showPrefs();return false;">Show Preferences</button>

      <div id="displayPrefs">
         <b>User Preferences:</b><br />
         Contact Method: <span id="listMethod"></span><br />
         E-Mail Address: <span id="listEmail"></span><br />
         Twitter Address: <span id="listTwitter"></span>
      </div>
   </form>
</div>
<div id="tabInfo">
   More information about features in this chapter:
   <ul>
      <li>OpenSocial: http://www.opensocial.org/</li>
      <li>OpenSocial Wiki: http://wiki.opensocial.org/</li>
      <li>Shindig: http://shindig.apache.org/</li>
      <li>Partuza: http://code.google.com/p/partuza/</li>
   </ul>
</div>

We start the gadget markup by adding a few styles for our containers. These are just standard markup styles, but there’s one point to make here about the tablib_table class. When an OpenSocial message, tab, or any other JavaScript library–generated component is rendered, there are classes assigned to the markup, which means that new classes and styles can be applied to those components. In the case of tablib_table, we are adding a top margin to the tab set.

The HTML markup that follows contains the content of the two tabs that we will display in the application. The first one, the settings tab, contains a message window that will display information about the second tab. The second tab is a form element containing buttons that will allow a user to pick her preferred contact method, as well as two input boxes that will allow her to input her email address and Twitter handle. At the bottom are two buttons to control how user preferences are set and displayed. These two buttons will execute their respective JavaScript functions to execute the required set or get method. Below the buttons is a box, hidden by default, that will display the user’s preferences. The second tab will simply display a series of links to additional resources.

Now that we have the XML architecture, styles, and markup ready, we can put everything to work by applying the appropriate OpenSocial JavaScript library methods:

<script type="text/javascript">
var prefs = new gadgets.Prefs();

//get user preferences and save them
function savePrefs(){
   var method = "email";

   //loop through all options to see which contact methods was checked
   for (var i=0; i < document.contactInfo.contactMethod.length; i++){
      if (document.contactInfo.contactMethod[i].checked){
         method = document.contactInfo.contactMethod[i].value;
      }
   }
   var email = document.contactInfo.contactEmail.value;
   var twitter = document.contactInfo.contactTwitter.value;

   //set preferences
   prefs.set("contactMethod", method);
   prefs.set("contactEmail", email);
   prefs.set("contactTwitter", twitter);

   if (document.getElementById("displayPrefs").style.display == "block"){
      showPrefs();
   }
}

//display preferences from stored values
function showPrefs(){
   document.getElementById("displayPrefs").style.display = "block";
   document.getElementById("listMethod").innerHTML =
      prefs.getString("contactMethod");
   document.getElementById("listEmail").innerHTML =
      prefs.getString("contactEmail");
   document.getElementById("listTwitter").innerHTML =
      prefs.getString("contactTwitter");
}

//create a new tabset object with the settings tab set
var tabs = new gadgets.TabSet("tabSet1", "Setting Configuration");
tabs.alignTabs("left", 50);

//create two tabs
tabs.addTab("More Information", {
   contentContainer: document.getElementById("tabInfo"),
   tooltip: "Select this tab for more details"
});
tabs.addTab("Setting Configuration", "tabSetting");

//display message window about more information
var message = new gadgets.MiniMessage("message1");
message.createTimerMessage(document.getElementById("messageWindow"), 2);
</script>

The first two functions within our JavaScript block set and get user preferences, and are triggered from the markup buttons. The savePrefs() function will capture the user preferences entered in the settings form and then, using the setPrefs JavaScript library functions, will temporarily store those session values via the prefs.set() method. If the preference display box is currently visible, the showPrefs() method will be executed to update the values.

The showPrefs() function sets the preference display box to a visible status and then calls the prefs.getString() method to capture the previously stored user preferences. These preferences will be input into their matching value objects in the preference display box. If user preferences were not previously stored in the system, the default values set in the UserPref elements of the XML spec will be displayed instead.

The first automatic code block that will be executed creates the TabSet to hold the two tabs we will create with our markup, and specifies the settings tab as the default tab to open. Once we’ve created the object, we align the tabs horizontally on the left and offset them from the left by 50 pixels. We then begin generating our tabs.

The first block will generate the “More Information” tab with a configuration object. The object sets the HTML block (contentContainer) that will be used to generate the content of the tab, and then adds a tool tip to the tab so that when a user hovers her mouse over it, a short alternative-text note will appear. The second tab just sets the title of the same tab, and the second parameter matches the div node that contains the tab content.

Now that our tabs are created, we display a brief timer-status message to the user to inform her of the second tab’s content. Using the OpenSocial minimessage JavaScript library, we create a new message window object. Finally, we call createTimerMessage() to generate a timed message, which we set to expire after two seconds, and use the message object we created in the settings tab as the message content.