JavaScript Internationalization Programming - Internationalization By jQuery

JavaScript Internationalization Programming
Internationalization By jQuery

This section describes resource management using Java properties file by jQuery library, jquery.i18n.properties.

Resource File (property file) Creation
Externalize embedded strings in JS files into property files(.properties).

About property file creation, refer to Java Internationalization Programming - Message.

Load jQuery Library

Load necessary JS files (jquery.min.js、jquery.i18n.properties.js).
The loading has two styles described below.

A. Include in HTMLs which use JS files. (standard style)

<head>
...
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.i18n.properties.js" type="text/javascript"></script>
...

B. Load in each JS dynamically.

function wwnaviHttpRequest(){
    if(window.ActiveXObject){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e2){
                return null;
            }
         }
    }else if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else{
        return null;
    }
}
function wwnaviLoadJs(url){
    htoj = wwnaviHttpRequest();
    htoj.open("GET", url, false);
    htoj.send(null);
    return htoj.responseText;
}

eval(wwnaviLoadJs('wwnaviRs/jquery.min.js'));
eval(wwnaviLoadJs('wwnaviRs/jquery.i18n.properties.js'));

*Loading necessary JS files by synchronized communication(*1) and execute them.

... (JS codes)

(*1)By desynchronized communication, the code will be executed before the loading completed  
and the execution will be failed.

Write Initializing Code
After the loading above, write the code of setting property file location, name and language.
```
jQuery.i18n.properties({name:'wwnaviBundle(*1)',path:'wwnaviRs(*2)/',mode:'both',
   language:wwnaviGetLang()(*3),callback:function(){}});
```
(*1)Property file name (base name)
(*2)Property file path
(*3)Target language code (e.g. 'en' or 'ja'), specified by the following function to get browser language in this case.
```
function wwnaviGetLang(){
    return (navigator.userLanguage||navigator.browserLanguage||navigator.language).substr(0,2);
}
```
*If you want to use browser language setting values, you can use jQuery-Browser-Language.
This can parse the HTTP request headers accessing to a remote host.

The following is a initializing code using that library (aware of browser language settings).
```
$.browserLanguage(function( language , acceptHeader ){
    var l  = acceptHeader; l = l.substring(0,2);
    jQuery.i18n.properties({name:'wwnaviBundle',path:'wwnaviRs/',mode:'both',language:l,callback:function(){}});
});
```
*About browser language detection, refer to Locale, Format, and Time Zone.
Write Message Loading Functions
Replace the string literals with the functions to load messages.
```
var msg1 = jQuery.i18n.prop("sample1_1(*1)");
```
(*1)The keys in the property files created in step 1.
Locate .properties files
Put the .properties files in the location specified in the initializing code.
The file name has the following rule.
```
base name(e.g. "wwnaviBundle") + "_" + language code(e.g. "ja")
```
The file with base name only is the default resource. if the corresponding language file exists, it will be loaded.
You can switch the language only by adding other language resources described below.
```
../wwnaviRs/wwnaviBundle.properties  ... English (default)
../wwnaviRs/wwnaviBundle_ja.properties ... Japanese
../wwnaviRs/wwnaviBundle_ko.properties ... Korean
```

These process can be checked with JavaScript string externalization samples in World Wide Navi.

Go to Internationalization Programming Top

JavaScript Internationalization ProgrammingInternationalization By jQuery

JavaScript Internationalization Programming
Internationalization By jQuery