1. Introduction h2>
In this tutorial, we will describe the implementation of globalization in a hybrid mobile application, developed with Angularjs for Android. We will use the Cordova API to do this.
The main goal is to adapt the content of the screens of our mobile application according to the language (English or French for example) of use of the phone.
2. Prerequisite h2>
We will not talk about creating an application with Phonegap, which is the prerequisite for understanding this tutorial.
We need an application developed under Angularjs and previously created with the Framework Phone gap and a text editor such as Notepad ++.
The method we intend to use is to integrate a Phonegap globalization plugin.
3. Let’s talk about Cordova h2>
The Cordova Globalization API provides globalization capabilities that reflect existing JavaScript globalization features, if possible, without duplicating functions already present in JavaScript. The focus of the Cordova Globalization API is on the analysis and formatting of culturally sensitive data. The Cordova API uses the native features of the underlying operating system, if possible, rather than recreating these functions in JavaScript.
The Cordova Globalization API uses the client locale and all default values are ignored. This design greatly simplifies the use of the globalization API while providing robust support. It is important to note that although all interfaces remain constant across devices that support Cordova, results may vary by device.
4. How to do? H2>
4.1. Integration of the Cordova globalization plugin h3>
The plugin sources are available on git ( https://github.com/apache/cordova-plugin-globalization ). Download and install them in your project as shown in the figure below.
The plugin sources are available on git ( https://github.com/apache/cordova-plugin-globalization ). Download and install them in your project as shown in the figure below.
Figure 01: Installing Cordova strong>
Once this is done, you must now reference the plugin in the application. Insert the code below into AndroidManifest.xml. Em> strong>
pre> And in the res / xml / config.xml em> strong> file insert this one: pre> If you have executed the previous directives well, you have successfully integrated the globalization plugin into your application. It remains now to use the functions of this plugin to recover the language currently used in the phone and whether it is French, English or other, we will adapt the content of our application. 4.2. Recovering the language used by the phone h3> It is important to note that the phone must be ready strong> (close to use) before using the plugin. The script below allows us to recover the language in a Controller or Service (See Angularjs Application Architecture).
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.globalization.getPreferredLanguage( function (language) { data.language = language.value; }, function () { data.language = 'Error getting language'; } ); }The navigator.globalization.getPreferredLanguage strong> function allows us to retrieve the language of the phone. It takes in parameter two functions of which one with a parameter (language) and another without parameter. In line 5, we store the phone language in the data.language variable. Strong> The language is in ISO format ( en-US strong> for French in France and en.US strong> for US English).
In the rest of our application, we will just have to recover the current language used by the phone thanks to the variable data.language strong>.
Now that we have the language, how do we proceed to adapt the content of our application?
4.3. Using Angularjs to organize and display the contents of our application. H3>
Angularjs -translate is a module of angularjs that will allow us to manage the language of the application. It can be downloaded from http://angular-translate.github.io/ .To insert it in our application, it will be enough to load JavaScript files in our application thanks to the instructions below. The involved files are available in previously downloaded sources.
<script scr="js/angular-translate.js"></script> <script scr="js/filters/translate.js"></script>We must then integrate the Angularjs-translate module via the initialization of the module of our application as follows:
var app = angular.module('ngMap', ['onsen.directives', pascalprecht.translate','angularify.semantic.accordion']In the Controller or service where we get the language, we can insert the following code:
app.config(function ($translateProvider) { $translateProvider.translations('en', { TITLE: 'Hello', FOO: 'This is a paragraph.', BUTTON_LANG_EN: 'english', BUTTON_LANG_DE: 'german' }); $translateProvider.translations('de', { TITLE: 'Hallo', FOO: 'Dies ist ein Paragraph.', BUTTON_LANG_EN: 'english', BUTTON_LANG_DE: 'deutsch' }); // La langue qu’on passe en paramètre est celle de notre variable //data.language $translateProvider.preferredLanguage('en'); });At this level, the integration of globalization is over.
To use it, it will be done in binding (angularjs) with as content the key of the language (the expression to translate).
{{TITLE | translate}} strong> pre>
5. Conclusion h2>
To summarize, it was question of setting up globalization in a phonegap application, through the integration of the plugin globalization phonegap and module angularjs-translate. In a future tutorial, we will see how to give the user the opportunity to change languages at any time.