JavaScript Internationalization Programming - Internationalization By JSON

JavaScript Internationalization Programming
Internationalization By JSON

This section describes resource management using JSON with World Wide Navi Samples.

Resource File Creation

Externalize embedded strings in JS files into a JSON file.

sample_1.js

var msg1 = 'msg1:';  
->var msg1 = wwnRs.sample1_1(*1); 
function msgA() {
    alert(msg1 + "Hello, this is a sample1 text."); 
    ->alert(msg1 + wwnRs.sample1_2(*1));    
}

../wwnaviRs/wwnaviBundle.json

{
'sample1_1' : 'msg1:',(*2)
'sample1_2' : 'Hello, this is a sample1 text.'(*2)
}

*1) wwn.sample1_1 = JSON_VARIABLE.JSON_KEY
*2) 'sample1_1' : 'msg1' = 'JSON_KEY' : 'JSON_VALUE'
   The last "," need to be removed because IE cannot parse JSON correctly.

Creating JSON load process in another JS file.

After externalizing strings into JSON, you need to write the process of loading it to the specified variable above suitable for user locale(browser language settings). You'd better bundle the process in one initially called JS file (named 'wwnaviJs.json.js' in this chapter) and load it in HTML headers.

HTML header

<head>
...
<script src="wwnaviRs/wwnaviJs.json.js" type="text/javascript"></script> (*1)
<script src="sample_1.js" type="text/javascript"></script>
...

wwnaviJs.json.js (initial code)

// Normal Ajax HTTP request function 
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;
    }
}

// File loading function by Ajax in SYCHRONIZED process.
// Normal Ajax communication is DESYNCHRONIZED, but it cannot wait for load completed so 
// SYNCHRONIZED style is used.
function wwnaviLoadJs(url){
    htoj = wwnaviHttpRequest();
    htoj.open("GET", url, false);
    htoj.send(null);
    return htoj.responseText;
}

// Initializing JSON_VARIABLE(wwnRs need to be the same as in sample_1.js).
var wwnRs = eval('({"_rslang":""})');

// Callback function (JSONP) to get user locale via HTTP server access (see the last line).
function wwnParseLang(json) {

    // Parsing HTTP headers to get language and country code (e.g. en-us).
    var l = ''; if(json['Accept-Language'] != undefined) l = json['Accept-Language'];
    if(l.indexOf(',') >=0) l = l.substring(0, l.indexOf(','));

    // Loading master JSON resource (without locale) into JSON_VARIABLE (SYNCHRONIZED Ajax).
    wwnRs = eval("(" + wwnaviLoadJs('wwnaviRs/wwnaviBundle.json') + ")"); 
    wwnRs._rslang='default'; 

    try {
        // Loading USER_LOCALE (variable 'l') JSON resource into JSON_VARIABLE (SYNCHRONIZED Ajax).
        wwnRs = eval("(" + wwnaviLoadJs('wwnaviRs/' + l+ '/wwnaviBundle.json') + ")");
        wwnRs._rslang=l; // Setting used resource locale code.
    }catch(e){
        // If error (user locale resource not found), master gets used.
    }

    wwnRs._ulang=l; // Setting detected user locale code.

}

// To get USER_LOCALE, we use JSONP API of jQuery browser language library(*),
// but you can choose another one.
document.write(
'<script type="text/javascript" src="http://ajaxhttpheaders2.appspot.com/?callback=wwnParseLang"></script>'
);

*)About jQuery browser language library, go to their GitHub.

Locate JSON files
Put the master JSON file ('wwnaviRs/wwnaviBundle.json' in step 1.) and translated (localized) ones in locale directories following the initial code above.
```
LOCALIZED_RESOURCE = wwnaviRs(RESOURCE_PATH)/USER_LOCALE/wwnaviBundle(RESOURCE_NAME).json
```
Just adding the localized resources switch your JavaAScript messages based on user browser settings.
```
../wwnaviRs/wwnaviBundle.json  ... English (default)
../wwnaviRs/ja/wwnaviBundle.json ... Japanese
../wwnaviRs/ko/wwnaviBundle.json ... Korean
```

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

Go to Internationalization Programming Top

JavaScript Internationalization ProgrammingInternationalization By JSON

JavaScript Internationalization Programming
Internationalization By JSON