Because Mojito is built with YUI, which has an internationalization utility, localizing
Mojito applications is fairly straightforward and easy. In this module, we’re just going
to localize the title of our dashboard to show you how you would localize your own
applications. In a nutshell, you provide localized strings, Mojito determines the
language environment of the client, and you apply the correct localized string with an
addon from your controller.

We’re going to cover how to store localized strings and how to use the addon to access
those localized strings for a given language environment. We’ll also discuss the ways
that Mojito detects the language environment of the client.

In the screenshot, you can see that our dashboard has three localized pages: English,
simplified Chinese, and Spanish. Our application only localizes the title of the page,
but more importantly, you’ll learn how to localize your own applications in the future.

In the last module, we discussed how to create custom templates, Handlebars partials,
and Handlebars helpers in Mojito. We also looked at how to configure Mojito to select
templates based on the context. In short, we looked at these topics:

Mojito lets you localize applications by detecting the language environment of
the client environment and then using the the YUI Internationalization utility
to dynamically retrieve localized strings. Although Mojito does the work of
detecting the language environment of the client, your application still needs
resource bundles that contain localized strings and the Intl addon, which uses
the YUI Internalization utility to fetch the correct localized string. The YUI
Internationalization utility uses the Intl.lookupBestLang method to determine
the best language based on an application’s request and a module’s language
support.

We’re going to first look at the resource bundle files and then show how to
use the Intl addon to access the localized strings in those files.

The resource bundle is simply a JavaScript file containing a YUI module that
registers a new module and maps a BCP language tag to key-value pairs. BCP 47
language tags are the identifiers for languages used on the Internet. BCP stands
for IETF Best Current Practice, and BCP 47 is currently the combination of RFC
5646 and RFC 4647.

These resource bundles are placed in the lang directory of the mojit. For example,
we’ll be using resource bundles for the PageLayout mojit, so the resource bundles
should be in the following directory: mojits/PageLayout/lang

The YUI module name of your language bundle is registered like other modules with
YUI.add. For example, the resource bundle for simplified Chinese in our
PageLayout, would use the following to register the module:

The controller accesses the YUI intl module through the Intl addon, which is
required like other addons. The Intl addon has methods to get localized
strings from the resource bundles and to format dates. In the
controller.server.js file below, ac.intl.lang gets the localized
string from resource bundles.

When running on the client side, YUI can detect the browser settings to select
the default translation and date format. On the server, the preferred language
and date format is determined by HTTP header from the client and the order of
languages listed in the mojit controller.

Fortunately, Mojito lets you configure applications to run on either the server
or client side. Because this code example illustrates how to localize your
application, we want to configure Mojito to run the application on the client
to improve the chances of serving content in the user’s preferred language and
date format.

After you have copied the application that you made in the last module
(see Setting Up), change into the application
10_localization.

First let’s add the lang directory to the PageLayout mojit.

In the lang directory, create the language resource bundle files
PageLayout_en-US.js, PageLayout_es-419.js, and PageLayout_zh-Hans.js
with the content below. Notice that the YUI registered name is the same as the
directory and file, the inclusion of the intl module, and the registration
of the language bundle with Y.Intl.add.

Launch your application to see the application in its more finished form.

To view the localized title in Chinese for the dashboard, add the query string parameter
?lang=zh-Hans to the URL and refresh the page. You can see the title in Spanish
as well with the query string parameter ?lang=es-419.

Let’s add a functional test to test for a localized title as well. Create the test file
arrow_tests/test_zh-Hans_title.js with the following content:

Add the test scenario below after the first scenario specified in the scenario
array in the test descriptor as well.

Go ahead and run the functional tests again. You should see an additional test case
passing.

Congratulations, you have completed all of the modules in this tutorial. There is still
more to learn about Mojito, but you should have a strong grasp of the basics that you
can build on. If you haven’t already, be sure to read the documentation and
work through the code examples.

Our topic was a bit more focused in this module. We added localization support for
three languages for the application heading using the Intl addon and resource bundles.
To do this we had to learn the following:

creating resource bundles

adding the Intl addon to our controller

using the Intl addon to access the localized strings in the resource bundles

Make sure that in the resource bundle file, the BCP 47 language tag has been
passed to Y.Intl.add and that the language tag matches the tag appended
to the module and file name. For example, the file PageLayout_zh-Hans.js should
register the module "lang/PageLayout_zh-Hans", and the language tag "zh-Hans"
should be passed to Y.Intl.add.

No, the resource bundle has to be associated with a YUI module. Each mojit
is registered as a YUI module that can then be associated with a resource bundle.

Can the Intl addon format dates for a given language environment?

Yes, although we didn’t use it in our application, the Intl addon has the method
formatData that will format dates for you. Again,
Mojito is relying on YUI (the YUI module datatype-date) to do this for you.

resource bundle - Files that provide resources to YUI modules. In the case of
localization, we are using language resource bundles that associates a BCP 47 language
tag and localized strings to the YUI module that can access it.