Summary

Add support for internationalization to OpenSocial. The mail thread includes a concrete, shareable implementation for currency, date time, and numeric formatting.

Prototype

Here is a complete example which makes use of the opensocial-i18n feature. It provides two drop-down list where different formats for date/time and number of a given locale could be displayed. For date/time, 12 different formats are supported. For numbers, 4 are supported.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs>
    <Require feature="opensocial-i18n"/>
  </ModulePrefs>
   <Content type="html"><![CDATA[
   <div id="content_div"></div>
   <script type="text/javascript">
   // Get userprefs
   var prefs = new gadgets.Prefs();
 
   function displayGreeting () {
     // Get current time
     var today = new Date();
     var html = "";
 
     var element = document.getElementById('content_div');
 
     // Display a greeting based on the myname userpref
     html += "<br><FONT SIZE=6>" + "<br> Your Country:"+ prefs.getCountry() +
           "<br> Your language:" + prefs.getLang() +
           "<br> Date for your locale:" + getDateTime(today) +
           "<br> Number in your locale:" + getNumber(1234.56) +
           "<br><br></FONT>";
 
     element.innerHTML = html;
   }
 
   function getNumber(number) {
     if (!document.myform.mylist1.selectedIndex) return gadgets.i18n.formatNumber(1, number);
     else return gadgets.i18n.formatNumber(document.myform.mylist1.selectedIndex + 1, number);
   }
 
   function getDateTime(date) {
     if (!document.myform.mylist2.selectedIndex) return gadgets.i18n.formatDateTime(0, date);
     else return gadgets.i18n.formatDateTime(document.myform.mylist2.selectedIndex, date);
   }
 
   gadgets.util.registerOnLoadHandler(displayGreeting);
 
   </script>
   <FORM NAME="myform">
     <SELECT NAME="mylist1" onChange="displayGreeting()">
        <OPTION VALUE="1">DECIMAL_PATTERN
        <OPTION VALUE="2">SCIENTIFIC_PATTERN
        <OPTION VALUE="3">PERCENT_PATTERN
        <OPTION VALUE="4">CURRENCY_PATTERN
     </SELECT>
     <SELECT NAME="mylist2" onChange="displayGreeting()">
        <OPTION VALUE="0">FULL_DATE_FORMAT
        <OPTION VALUE="1">LONG_DATE_FORMAT
        <OPTION VALUE="2">MEDIUM_DATE_FORMAT
        <OPTION VALUE="3">SHORT_DATE_FORMAT
        <OPTION VALUE="4">FULL_TIME_FORMAT
        <OPTION VALUE="5">LONG_TIME_FORMAT
        <OPTION VALUE="6">MEDIUM_TIME_FORMAT
        <OPTION VALUE="7">SHORT_TIME_FORMAT
        <OPTION VALUE="8">FULL_DATETIME_FORMAT
        <OPTION VALUE="9">LONG_DATETIME_FORMAT
        <OPTION VALUE="10">MEDIUM_DATETIME_FORMAT
        <OPTION VALUE="11">SHORT_DATETIME_FORMAT
     </SELECT>
   </FORM>
   ]]>
  </Content>
</Module>

Here are some screenshot from running the above gadget on my localhost:

Example 1

This example shows a date/time in SHORT_DATETIME_FORMAT, and number in PERCENT_PATTERN for locale en_US.

Example 2

This example shows a date in FULL_DATE_FORMAT, and a number in DECIMAL_PATTERN for locale de_DE.

Example 3

This example shows a time in FULL_TIME_FORMAT, and a number in CURRENCY_PATTERN for locale zh_CN.

Spec Updates

Resources

Detailed Proposal

Current discussion thread

Browser not supported