The MetaSieve Blog

August 20, 2010

i18n in web apps with Dashcode

Filed under: Uncategorized — Tags: , , — Björn Wilmsmann @ 1:54 pm

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”.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: