Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Localization for Nokia Asha Web Apps

From Wiki
Jump to: navigation, search

This article shows how to localize an S40 Web App for different languages. A working example is available for download.

Article Metadata
Code ExampleTested with
SDK: Nokia Web Tools 2.3
Devices(s): Asha 311
Compatibility
Platform(s): Series 40
Series 40
Article
Created: croozeus (04 Mar 2013)
Last edited: hamishwillee (09 May 2013)

Contents

Introduction

S40 Web Apps are the best suited for creating content driven applications and present organized content to users. These apps are wide reaching since the platform (Nokia Xpress Browser) is available on many S40 devices (including the inexpensive ones). In this article, we see how to localize an S40 Web App for different languages.

LocalizationEnglish.png LocalizationRussian.png

Implementation

S40 Web Apps support W3C widget localization, as described below.

1. Develop your S40 Web App (using English or any language of your choice). It's now ready for localization.

2. Create a javascript file strings.js in the root folder of your project.
S40Localization FolderStructureStringjs.png
3. Collect all the strings from the Web App into strings.js as variables:

var string_header = 'Localization';
var string_list_item1 = 'Mercury';
var string_list_item2 = 'Venus';
var string_list_item3 = 'Earth';
var string_list_item4 = 'Mars';
var string_list_item5 = 'Jupiter';
var string_list_item6 = 'Saturn';
var string_list_item7 = 'Uranus';
var string_list_item8 = 'Neptune';
var string_list_item9 = 'Pluto';

4. Create a folder locales in your project.

5. Create language specific folders in the locales folder. The names of subfolders must comply with values derived from the IANA Language Subtag Registry such as “fr”, ”fi” and “en-US”. E.g. \locales\fi-Fi\
S40Localization FolderStructure.png

6. The Localized files are placed inside subfolders of the locales folder.
S40Localization FolderStructure1.png

7. Load strings.js in your main.html file:

<script language="javascript" type="text/javascript" src="strings.js" />

8. Depending upon the phone language, the corresponding localized strings.js is loaded in your .html file. However, if no localized files are found for the selected phone language, the default strings.js (placed in the root of your project) is loaded.

9. Use the string variables, instead of hard coded strings in your project. For example, below is HTML body from a localized project (screenshots shown in the beginning).

<body>
<div class="ui-page">
<!-- header -->
<div class="ui-header">
<div id="header" class="ui-title inline"></div>
<div class="refresh-icon inline">
<a><img alt="icon" src="s40-theme/images/refresh_40x40.png" />
</a>
</div>
</div>
<div class="ui-content">
 
<div class="ui-category-list" id="accordianGroup">
<div class="ui-category-list-item-title ui-open"
id="category_items_title1"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_1', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title1', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title2"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_2', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title2', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title3"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_3', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title3', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title4"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_4', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title4', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title5"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_5', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title5', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title6"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_6', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title6', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title7"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_7', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title7', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title8"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_8', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title8', 'ui-open', 'ui-close'); return false;"></div>
<div class="ui-category-list-item-title ui-close"
id="category_items_title9"
onclick="mwl.setGroupTarget('#accordianGroup','#category_items_9', 'ui-show', 'ui-hide'); mwl.setGroupTarget('#accordianGroup','#category_items_title9', 'ui-open', 'ui-close'); return false;"></div>
 
</div>
</div>
</div>
<script type="text/javascript">
function populateList() {
document.getElementById('header').innerHTML = "<h2>"
+ string_header + "</h2>";
document.getElementById('category_items_title1').innerHTML = string_list_item1;
document.getElementById('category_items_title2').innerHTML = string_list_item2;
document.getElementById('category_items_title3').innerHTML = string_list_item3;
document.getElementById('category_items_title4').innerHTML = string_list_item4;
document.getElementById('category_items_title5').innerHTML = string_list_item5;
document.getElementById('category_items_title6').innerHTML = string_list_item6;
document.getElementById('category_items_title7').innerHTML = string_list_item7;
document.getElementById('category_items_title8').innerHTML = string_list_item8;
document.getElementById('category_items_title9').innerHTML = string_list_item9;
}
 
populateList();
</script>
 
</body>

Your web app is now localized for all the language files that you added. You can deploy the web app to check it on a device or you may use the Device Settings to check the localization in the Simulator. The Simulator only supports English, Indonesian, Chinese and Russian languages, at the time of writing.

DeviceSettings.png

Note.pngNote: On some mobile platforms, if localization files are missing a string, the variable name is displayed. However, in S40 Web Apps, the page wouldn't load if any string variables are found to be undefined.

Source Code

A working example of an S40 Web App with localization is available here: Media:LocalizationExample.zip

Summary

The article showed localization for strings. Just like strings, S40 Web Apps also support localization for HTML files and image files. For more details, see here.

This page was last modified on 9 May 2013, at 10:52.
240 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×