Internationalizing a Custom Application

This section describes internationalizing a custom application that uses the TIBCO Component Services Framework.

1. Register your application to the translation service using BPMTranslationServiceConfig.registerApp, which allows the TranslationService to load your message properties files.

    var yourModule = angular.module("CustomModule", ..
   ..
   yourModule.run(['BPMTranslationServiceConfig',function(BPMTranslationServiceConfig){
    BPMTranslationServiceConfig.registerApp("MyCustomApp", null);
   }]);

   In this example, the Angular module name is 'CustomModule' and the application name as deployed in Application Development is 'MyCustomApp'.

   The second parameter in the registerApp function specifies the prefix to be used for accessing the translation keys. If null is passed, the prefix defaults to 'tcf'.

2. In the application's l10n folder, create message properties files that contain the key / value pairs for localized strings.

   All property file names start with a component name and end with "Messages", and have an extension of properties. For example, BpmBusinessActionsMessages.properties, which means that the component name is BpmBusinessActions, and the keys in the file can be accessed using tcf.BpmBusinessActions.<key_name>.

   For example, in the Workapp sample application, there is a message properties file for each component used in the sample application:

   
   
   

3. Access a translation key, from a message properties file, in a template as follows:

   <div translate="pfx.component.translationKey"></div>

   where:

   • pfx - is the prefix used when referencing message properties files. This must be the value of the second parameter passed in the registerApp function (see Step 1). If null is passed, this must be 'tcf'.
   • component - is the business component displayed by the template. This is the name of the property file in the l10n folder of the application, excluding the 'Messages' suffix.
   • translationKey - is the key part of the key / value pair in the message properties file.

   For example, if you have a BpmBusinessActionsMessages.properties file that contains the following key / value pairs...

   search_holder=Find a Business Action
   loading_tips=Loading...
   reload_text=RELOAD
   reloading_text=RELOADING...

   ... your template can access the "reload_text key as follows:

   <div class="refresh-button" ng-click="reloadCategories()" ng-hide="reloadingCategories"
       translate="tcf.BpmBusinessActions.reload_text" 
       translate-default="RELOAD">RELOAD</div>

   This assumes the prefix is the default 'tcf'. The 'tcf' prefix can also be accessed in a more generic way in the templates, as follows:

   <div class="refresh-button" ng-click="reloadCategories()" ng-hide="reloadingCategories"
       translate="{{$root.appConfig.appId}}.BpmBusinessActions.reload_text" 
       translate-default="RELOAD">RELOAD</div>

   This requires that the $root.appConfig.appId variable be set in the main controller (for example, MyWorkCtrl.js) in the following way:

   $rootScope.appConfig = {
   appId: 'tcf'
   };