Web UI Framework localization - localizing on the client side

Localizing on the client side involves the localization of user interface labels and other UI non-field text and images. Localizing on the server side involves the localization of field text and images that are referenced by the client side.

1. To localize images, set up a locale-specific CSS file that will be used by a tag library.
2. To localize text, set up a global JavaScript bundle file. This bundle file includes pairs of key values (the string to be localized and the localized value of that string). The Web UI Framework provides a tag library that includes the global bundle file.
   Global bundle file example:

   Note: IBM® recommends that you prefix bundle file keys with "b_" to avoid conflicts with other properties on the screen.

   Ext.override(sc.plat.ui.Screen, {
       'b_key1': 'value one',
       'b_key2': 'value two',
       'b_key3': 'value three'    
   })
   

   Each form in the application has a specific bundle.js file that should be included with the screen file. For example, if the bundle file of form login.js is sc.ui.login.bundle.js, when a screen is accessed, the tag library looks for that bundle file and form and includes them with the screen. The tag library does not automatically include the bundle file for a screen. For a localizable file (such as a bundle file) that is included using the scuitag command, the tag automatically includes the localized file (fr, de, jp, etc.), according to the user's locale.

   When an individual file using JSB definitions is included, the entry for the bundle file should be made after the entry to include the screen file. The screen files should be included in the following order:

   1. <screen>_config.js
   2. <screen>.js
   3. <screen>_bundle.js
   Example of a screen referencing a bundle file:

   com.xyz.MyScreen = Ext.extend(sc.plat.ui.ExtensibleScreen, 
   {
           className: "sc.plat.ui.Screen",
           getUIConfig: function() {
                   return {
                           title: this.b_key1,
   			                     items:[{
   				                            xtype: 'label',
                                   text: this.b_key2
   			                     }]
                    }
   	       },
           getInfoMessage: function() {
   		              return this.b_key3;
           }
   });
   

   The following shows an example of how a form is set up to return a bundle file name when the getBundleFor(form name) method of the SCUILocalizationProvider class is called by the screen. The keyword this returns the instance of the form, so this.First_Name returns the bundle file First Name.

   First_Name = "First Name";
   Last_Name = "Last Name";
   Search_View = "Search View";
   Ext.onReady(function(){ 
   var form = new Ext.FormPanel({
           name: 'view', 
           title: this.Search_View,
           xtype: 'form',
           items: [{
                         fieldLabel: this.First_Name,
                         xtype: 'textfield',
                         appValidator: validatorApplication,
                         validationEvent: 'blur',
                         validator: validateString
                    },
                    {
                         fieldLabel: this.Last_Name,
                         xtype: 'textfield',
                     }]
            });
            form.render(Ext.getBody());
   });