Search code examples
tizentizen-wearable-sdktizen-web-apptizen-studio

Tizen wearable web app with localization

I am trying to get localization enabled in a tizen web application for wearables. I am following https://developer.tizen.org/ko/development/guides/web-application/localization to get localization.

I have language.js set up for languages inside locales and a default one. The contents are generated by tizen studio and look like 

TIZEN_L10N=
{
	"todays_food_intake" : "Today's food intake",
	"todays_water_intake" : "Today's water intake"
};

In my index.html, I have put <script src="language.js"></script> inside the <head>.

and trying to use it in divs as <h4 class="some-class">TIZEN_L10N['todays_food_intake']</h4>

But it does not seem to be working.

In the wearable app I am getting TIZEN_L10N['todays_food_intake'] and not the localized string.

What may I be missing.

PS: I am an Android dev.

Solution

  • Add your translations in languages.js files in /locales/de-de, /locales/en-us etc. Example language.js:

    TIZEN_L10N = {
    'lorem': 'ipsum',
    'foo': 'bar'
}

    Then add an attribute to the elements in your HTML that should have a localized string:

    <span data-l10n="lorem"></span>

    In your JS, add this:

    for (var i = 0; i < document.querySelectorAll('[data-l10n]').length; i++) {
    var elem = document.querySelectorAll('[data-l10n]')[i];
    elem.innerHTML = TIZEN_L10N[elem.getAttribute('data-l10n')];
}

    This will loop through all elements with the data-l10n attribute and set its innerHTML to the translated string for the key found in its data-l10n attribute.