Getting Started with Kapsel - Part 15 -- Localization (SP09+)

[Dan_vL]

Localization

The text displayed by an application should appear in the language the device is set to.  One way to do this is to place the user visible strings an application displays in a file separate from the rest of the files that make up the application.  When the application needs to support a new language, a new language file can be added that includes the translated versions of the text.  When the application loads, the application will determine the language the device or emulator is set to and will load the language file that most closely matches current language.

Kapsel provides an i18n plugin that can be used to determine the language of the device and based on the language will attempt to load the appropriate language bundle.  In SP09 the Kapsel plugins have been localized for many different languages.  The list of available languages can be seen below.

 Directory of C:\SAP\MobileSDK3\KapselSDK\plugins\appupdate\www



06/18/2015  08:15 PM            12,821 appupdate.js

06/18/2015  08:15 PM               312 messages.properties

06/18/2015  08:15 PM               339 messages_de.properties

06/18/2015  08:15 PM               135 messages_en.json

06/18/2015  08:15 PM               312 messages_en.properties

06/18/2015  08:15 PM               351 messages_es.properties

06/18/2015  08:15 PM               351 messages_fr.properties

06/18/2015  08:15 PM               395 messages_ja.properties

06/18/2015  08:15 PM               345 messages_pt.properties

06/18/2015  08:15 PM               602 messages_ru.properties

06/18/2015  08:15 PM               371 messages_zh_CN.properties

If a Kapsel app is to support an additional language, the strings for that language need to be provided.  The following topic will demonstrate how to use the Kapsel i18n plugin and the SAPUI5 resources module to provide different strings depending on the language selected for the device.
Note that as of SP08, the Kapsel i18n plugin switched from using .json files to .properties files.
For additional details on this topic in general see Internationalization and localization.

Using the Kapsel i18n Plugin
Using jQuery.sap.resources
Language Files Used by Kapsel Plugins

Using the Kapsel i18n Plugin

• Add the i18n plugin to the LogonDemo project created in the Logonsection.

  cordova plugin add kapsel-plugin-i18n --searchpath %KAPSEL_HOME%/plugins
  
  or
  
  cordova plugin add kapsel-plugin-i18n --searchpath $KAPSEL_HOME/plugins
  
  

• Create a i18n folder and add a new language files.

  www/i18n/messages_en.properties

  www/i18n/messages_fr.properties

      These files must be saved as UTF-8.  One way to verify that these are properly encoded is to open the file in Notepad on Windows and choose File > Save As. 
  
  
  
• Modify index.html to use the resource bundles.  In the init method add

      var i18n = cordova.require("kapsel-plugin-i18n.i18n");
  
      console.log("Locale is " + navigator.language);
  
      i18n.load({path: "i18n", name: "messages"}, bundleCallback);
  
      

  Add the following method.

  function bundleCallback(languageBundle) {
  
      bundle = languageBundle;
  
      document.getElementById("register").innerText = bundle.get("RegisterKey");
  
      document.getElementById("read").innerText = bundle.get("ReadKey");
  
      document.getElementById("unregister").innerText = bundle.get("UnregisterKey");
  
      document.getElementById("lock").innerText = bundle.get("LockKey");
  
      document.getElementById("unlock").innerText = bundle.get("UnlockKey");
  
  }
  
      

•     In an Android device or emulator, change the language to French via Settings > Language & input > Language > Francais (Canada).
      In an iOS device or simulator, change the language to French via Settings > General > Language and Region > Device Language > French.
      Deploy and run the app.  Notice that the Logon screens are localized as French is one of the languages that the Kapsel SDK has been localized for.
  
  
  
  

Using jQuery.sap.resources

Another option is to use jQuery.sap.resources as described in Use of Localized Texts in Applications.  The Logon plugin uses this for its resources.  The logon plugin's resource files are located in the following folder.

C:\Kapsel_Projects\LogonDemo\plugins\kapsel-plugin-logon\www\common\assets\i18n

or

~/Documents/Kapsel_Projects/LogonDemo/plugins/kapsel-plugin-logon/www/common/assets/i18n

Note that these files have had non ascii characters converted to Unicode characters.  It is possible to convert between formats using the following commands which make reading and editing these files easier.

native2ascii -reverse -encoding UTF-8 i18n_fr.properties i18n_unescaped_fr.properties

native2ascii -encoding UTF-8 i18n_unescaped_fr.properties i18n_escaped_fr.properties 

Copy the file i18n_unescaped_fr.properties to i18n_fr_CA.properties and make a few changes such as the following (adding on _FR_CA).

SCR_REGISTRATION_BTN_SUBMIT=Enregistrer_FR_CA

BTN_CANCEL=Interrompre_FR_CA

SCR_REGISTRATION_SCREEN_TITLE=Enregistrement_FR_CA

FLD_HOST_LABEL=Hôte_FR_CA

Prepare, build and deploy the app with the following command.

cordova run android

or

cordova run ios

Language Files Used by Kapsel Plugins

The following are the list of localizable strings used by the Kapsel plugins in SP09.

C:\SAP\MobileSDK3\KapselSDK\plugins\appupdate\www\messages.properties

C:\SAP\MobileSDK3\KapselSDK\plugins\attachmentviewer\www\messages.json

C:\SAP\MobileSDK3\KapselSDK\plugins\cachemanager\www\messages.properties

C:\SAP\MobileSDK3\KapselSDK\plugins\fioriclient\www\i18n.properties

C:\SAP\MobileSDK3\KapselSDK\plugins\logon\www\common\assets\i18n\i18n.properties

C:\SAP\MobileSDK3\KapselSDK\plugins\online\i18n.properties

Back to Getting Started With Kapsel