• Download LanguageTranslator - 74.3 KB

Introduction

This article is all about my experience with one of the toughest job (Initially) i was involved in, but it turned out to be one of the easiest one thanks to JQuery and Jquery-Translator which uses Google Language Translator.

Background

The requirement was stated in very simple words "Language translation capability for a successfully running asp.net application". But this application was never designed with an intention for supporting the language translation. It didn't had any concept of localizations/resource files and other things. The ground work was started by bulding a concept that needed me to change the basic structure and include the concept of Localization, resource files and all the stuff which in turn meant lot of effor and business hours, but JQuery-Translator changed all of this it just took me 12 hours to understand and have it implemented with in the asp.net application.

Using the code

This article will be helpful to all those who wish to have the Language Translator integrated into their existing application/websites. This will now be minutes work. Please find all the libraries and scritps required in the source files attached along with the article. Now you need to just include a reference to one of the script into your application's page and you can start using the language translator inside your application's page.

<script src="Scripts/TranslatorScript.js" type="text/javascript"></script>		

The code is simple and easy to understand, much of it can be understood by just going through the the code. The "TranslatorScript.js" holds the key for the implementation. The initial section loads all the required script files

LoadScript(scriptPath + "jQuery-BlockUI.js");
LoadScript(scriptPath + "jquery.translate-1.4.7.min.js");
LoadScript(scriptPath + "jquery.cookie.js");		

Here LoadScript is the function which finds the location of the script files and loads them

function getScriptsPath() {
    var scripts = document.getElementsByTagName("script");
    var regex = /(.*\/)TranslatorScript/i;
    for (var i = 0; i < scripts.length; i++) {
        var currentScriptSrc = scripts[i].src;
        if (currentScriptSrc.match(regex))
            return currentScriptSrc.match(regex)[1];
    }

    return null;
}

The loadTranslator() function is the center of the article which does all the magic. This is the function which handles the language translation during the DOM structuring. This function holds the UI code which is added to the page which provides a UI Interface for language selection.

function loadTranslator() {

    $.translate(function() {

        try {
            $('#translate-bar').html("");
        }
        catch (e) {
        }

        var selectedLanguage = $.cookie('selectedLanguage'); //get previously translated language

        if (selectedLanguage) {
            if(selectedLanguage != 'en')
                translateTo(selectedLanguage);
        }

        function translateTo(selectedLanguage) {
            $('body').translate('english', selectedLanguage, {
                not: '.jq-translate-ui',
                fromOriginal: true,
                start: function() {
                    $('#jq-translate-ui').val(selectedLanguage);
                    $.blockUI.defaults.applyPlatformOpacityRules = false;
                    $.blockUI(
                            {
                                message: 'Language Translation In Progress, Please Wait...',
                                css:
                                {
                                    border: 'none',
                                    padding: '10px',
                                    backgroundColor: '#000',
                                    '-webkit-border-radius': '9px',
                                    '-moz-border-radius': '9px',
                                    opacity: .9,
                                    color: '#fff'
                                },
                                overlayCSS: { backgroundColor: '#000', opacity: 0.6, '-moz-opacity': '0.6', width: '100%', height: '100%' }
                            });
                },
                complete: function() { $.unblockUI({ css: { cursor: 'default'} }); }
            });
        }
	// Languages are loaded into the selection box	
        $.translate.ui({
            tags: ["select", "option"],
            //a function that filters the languages:
            filter: $.translate.isTranslatable, //this can be an array of languages/language codes too
            //a function that returns the text to display based on the language code:
            label: $.translate.toNativeLanguage ||
                function(langCode, lang) { return $.translate.capitalize(lang); },
            //whether to include the UNKNOWN:"" along with the languages:
            includeUnknown: false
            }).change(function() {
            $.cookie('selectedLanguage', $(this).val(), { path: '/' });
            translateTo($(this).val());
            return true;
        }).appendTo('#translate-bar');
    }); 
}

The source files includes scripts and other related file along with images which will help in building a layer above the existing page content and provides the suitable UI required for the Language translation. This is a very simple and basic implementation. The scripts files work on the DOM structure of the page content. When a page is being loaded and once the DOM structure of the page is ready the content is translated into the required language by JQuery Translator. For more information on JQuery-Translator, please visit http://code.google.com/p/jquery-translate/.

Points of Interest

This article will be helpful to all those who wish to integrate Language Translator in their site/application with minimal effort and implementation time.