Dojo globalization framework
The following example application demonstrates how to use the Dojo Mobile JavaScript API to construct a globalized application with a native look and feel. Dojo Mobile provides globalization functions for detecting locale, loading and accessing resource bundles, and simple formatting utilities for culture-sensitive display. Figure 1 and Figure 2 show pages of the application that display the resource bundles loaded and the string format determined by the user preferences on the device.
To load the Dojo library...
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: false, packages: [{
name: "resource", location: "../../bundles"
}]
</script>
<script type="text/javascript" src="libs/dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
Dojo resource bundles define a package that maps the location of resource files within the hybrid application to a package name.
In the example, the language resource bundles are part of the application package, and are stored on the client-side instead of being supplied dynamically from the server or inserted directly into the HTML markup. Storing the language resource bundles on the client-side enables the application to be used offline. The resource files are encoded as JSON files.
Globalization application Views
Generate pages as simple HTML markup. The following strings are the strings that you globalize in the application.
<!-- Main page -->
<div id="globalization"
data-dojo-type="dojox.mobile.View"
selected="true">
<h1 id="globalization_heading"
data-dojo-type="dojox.mobile.Heading"
label="msg_globalization"></h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li id="months_choice"
data-dojo-type="dojox.mobile.ListItem"
moveTo="months"
callback="getMonths"
label="msg_months"></li>
<li id="days_choice"
data-dojo-type="dojox.mobile.ListItem"
moveTo="days"
callback="getDays"
label="msg_days"></li>
<li id="formats_choice"
data-dojo-type="dojox.mobile.ListItem"
moveTo="formats"
callback="getFormats"
label="msg_formats"></li>
<li id="icon_choice"
data-dojo-type="dojox.mobile.ListItem"
label="msg_icon"></li>
</ul>
<h1 id="globalization_footer"
data-dojo-type="dojox.mobile.Heading"
fixed="bottom"
label="msg_footer" ></h1>
</div>
<!-- The "Icon" sub-page -->
<div id="icons" data-dojo-type="dojox.mobile.View">
<h1 id="icon_heading"
data-dojo-type="dojox.mobile.Heading"
moveTo="globalization"
label="msg_icon"
back="msg_previous"></h1>
</div>
<!-- The "Months" sub-page -->
<div id="months" data-dojo-type="dojox.mobile.View">
<h1 id="months_heading"
data-dojo-type="dojox.mobile.Heading"
moveTo="globalization"
label="msg_months"
back="msg_previous"></h1>
</div>
<!-- The "Days" sub-page -->
<div id="days" data-dojo-type="dojox.mobile.View">
<h1 id="days_heading"
data-dojo-type="dojox.mobile.Heading"
moveTo="globalization"
label="msg_days"
back="msg_previous"></h1>
</div>
<!-- The "Formats" sub-page -->
<div id="formats" data-dojo-type="dojox.mobile.View">
<h1 id="formats_heading"
data-dojo-type="dojox.mobile.Heading"
moveTo="globalization"
label="msg_formats"
back="msg_previous"></h1>
</div>
Load modules and resource files
Show resources files loaded by dojo/i18n plug-in using Asynchronous Module Definition (AMD).
require(
[
"dojo/domReady", // Make sure DOM are ready
"dojo/i18n!resource/nls/messages", // Load our resource bundle
"dojox/mobile/parser", // This mobile app uses declarative programming
"dojox/mobile", // This is a mobile app
"dojox/mobile/i18n", // Load resources bundle declaratively
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
], function(ready, messages, parser, mobile, mi18n) {
ready( function() {
// Load resources declaratively
mi18n.load("resource", "messages");
parser.parse();
});
);
The dojo.18n.getLocalization API is deprecated. Use dojox/mobile/i18n to load resources declaratively. The dojox/mobile/i18n load() method treats text in all mobile widgets as resource keys, and automatically replaces those keys with the actual resources. To explicitly control how these resources are used, they can be loaded programmatically. The following listings show how to load these resources.
Use an argument such as resource to retrieve loaded resources
require(
[
"dojo/domReady", // Make sure DOM are ready
"dojo/i18n!resource/nls/messages", // Load resource bundle
"dijit/registry", // For registry.byId
"dojox/mobile/parser", // This mobile app uses declarative programming
"dojox/mobile", // This is a mobile app
"dojox/mobile/compat", // This mobile app supports running on desktop browsers
], function(ready, messages, parser, registry) {
ready( function() {
parser.parse();
registry.byId("globalization_heading").set("label", messages["msg_globalization"]);
registry.byId("months_choice").set("label", messages["msg_months"]);
registry.byId("days_choice").set("label", messages["msg_days"]);
registry.byId("formats_choice").set("label", messages["msg_formats"]);
// Get locale by dojo
var footer_msg = bundle["msg_footer"] + dojo.locale;
registry.byId("globalization_footer").set("label", footer_msg);
});
);
Dojo cultural formatting functions
function getFormats(){
var formatsView = dojo.byId("formats");
require(
[
"dojox/mobile/RoundRectList", "dojox/mobile/ListItem",
"dojo/date/locale",
"dojo/number",
"dojo/currency"
], function(RoundRectList,
ListItem,
localeDate,
localeNumber,
localeCurrency){
var formatsList = new RoundRectList({id: "formats_list"}).placeAt(formatsView);
// Get locale by dojo
var myLocale = dojo.locale;
// Format locale date by dojo/date/locale
var date = localeDate.format(new Date(), {locale: myLocale});
var formattedDate = new ListItem({label: "Date: " + date});
formatsList.addChild(formattedDate);
// Format with parameter
date = localeDate.format(new Date(), {selector: 'date', formatLength: 'full'});
formattedDate = new ListItem({label: "Date: " + date});
formatsList.addChild(formattedDate);
// Format number
var number = localeNumber.format(1234567.89);
var formattedNumber = new ListItem({label: "Number: " + number});
formatsList.addChild(formattedNumber);
// Format currency
var currency = localeCurrency.format(1234.567, {currency: "USD"});
var formattedCurrency = new ListItem({label: "Currency: " + currency});
formatsList.addChild(formattedCurrency);
}
);
};
Parent topic: Globalization in JavaScript frameworks