Localization for Nokia Asha Web Apps
This article shows how to localize an S40 Web App for different languages. A working example is available for download.
Article Metadata
Code Example
Tested with
Compatibility
Article
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.
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.
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\
6. The Localized files are placed inside subfolders of the locales folder.
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.
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.
(no comments yet)