i18n in web apps with Dashcode

For quite some time I’ve been searching for a way to properly localize strings in a web app created with Apple‘s otherwise fantastic Dashcode application.

When creating a Dashboard widget there is a special panel for adding languages and translations to your project. However, for some reason that panel is missing from web application projects in Dashcode, so there seems to be no straightforward way to provide a web app created with Dashcode in multiple languages.

Apple’s documentation on the subject – being sparse as usual – wasn’t any help either.

So finally, be reverse engineering the way localization is done in Dashboard widgets I was able to come with my own solution. Here goes:

1. Add a file named utilities.js with the following content to the project root:
   
function getUrlParameters()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

2. Add a file named i18n.js with the following content to the project root:
   
var lang = getUrlParameters()['lang'];
if (!lang || lang === '') {
lang = 'en_GB';
}

3. Add a file named localizedStrings.js with the following content to the project root (The hash entries and languages are of course mere examples.):
   
   var localizedStrings = {}

   if (lang === 'de_DE') {
   localizedStrings = {
   "Konto": "Konto",
   };
   }

   if (lang === 'en_GB') {
localizedStrings = {
"Konto": "Account",
};
}


4. Add the following lines (in exactly the same order) to your index.html right above the entry for main.js:
   
<script type="text/javascript" src="../utilities.js" charset="utf-8"></script>
<script type="text/javascript" src="../i18n.js" charset="utf-8"></script>
<script type="text/javascript" src="../localizedStrings.js" charset="utf-8"></script>


Voilà, you’re ready to go. In the example above any text, e.g. button labels, in your app that equals “Konto” will automatically be translated to “Account” if lang is set to “en_GB”.