Статьи

Интернационализация с использованием jquery.i18n.properties.js

Ноябрь 15, 2017

Под интернационализацией понимается автоматическое отображение локализованного текста на ваших страницах для пользователей, посещающих ваш сайт из разных регионов мира, или для локализации контента сайта на основе языковых предпочтений, выбранных пользователем.

В наши дни большинство веб-приложений предназначены для обеспечения богатого пользовательского опыта. Благодаря этому использование компонентов пользовательского интерфейса на основе JavaScript увеличилось во много раз. Нам часто нужно поддерживать интернационализацию в этих многофункциональных интернет-приложениях (RIA) на основе JavaScript. При поиске решения для интернационализации на основе JavaScript я наткнулся на очень хороший плагин jQuery jquery.i18n.properties.js. Этот плагин использует файлы .properties для локализации контента на разные языки. В этом уроке я покажу вам, как мы можем использовать этот плагин.

Получение jquery.i18n.properties.js

Прежде всего нам нужно скачать плагин. Это довольно легкий плагин. Размер файла составляет
около 17,4 КБ, но его можно уменьшить, а размер уменьшится до 4,3 КБ.

Плагин можно загрузить с https://github.com/jquery-i18n-properties/jquery-i18n-properties .

Миниатюрная версия той же версии доступна по адресу http://code.google.com/p/jquery-i18n-properties/downloads/list.

Интернационализация Демо

Первым шагом, как и во всех библиотеках JavaScript, является включение JavaScript в HTML. Jquery.i18n.properties.js — это плагин jQuery; следовательно, мы должны включить jQuery также в HTML перед jquery.i18n.properties.js, как показано ниже:

<HEAD>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.i18n.properties.js"></script>
</HEAD>

Образец HTML-кода

Прежде чем обсуждать, как использовать jquery.i18n.properties.js, давайте сначала создадим образец HTML, который мы будем использовать позже. В приведенном ниже примере HTML-кода есть раскрывающийся список, который позволяет пользователю выбрать язык. В примере HTML отображаются два сообщения, которые будут локализованы в зависимости от языка, выбранного из раскрывающегося списка.

<BODY>
        <h2 style="text-align: center; color:#777;">Internationalization using jQuery.i18n.properties</h2>

        <div style="margin-left: 20px; margin-bottom: 20px;" id="langBox">
            Language:
            <select id="lang">
                <option value="browser" selected>Browser Default</option>
                <option value="en">en</option>
                <option value="de_DE">de_DE</option>
                <option value="es_ES">es_ES</option>
                <option value="fr">fr</option>

            </select>
        </div>
        <div style="margin-left: 20px;" id="msg_welcome">Welcome to the Demo Site!</div><br>
        <div style="margin-left: 20px;" id="msg_selLang">Your Selected Language is: Default </div>
</BODY>

Определить .properties файлы

Плагин jquery.i18n.properties.js использует файлы .properties для выполнения перевода текста. В этой демонстрации мы будем использовать следующие файлы .properties.

Messages.properties
msg_welcome = Welcome to the Demo Site!
msg_selLang = Your Selected Language is: {0}

Messages_es_ES.properties
msg_welcome = Bienvenido al sitio de demostración!
msg_selLang = El idioma seleccionado es: {0}

Загрузка локализованных строк из .properties

Теперь у нас все готово для использования плагина, давайте посмотрим, как мы можем использовать этот плагин для загрузки переведенных строк из файлов свойств. Приведенный ниже пример кода используется для загрузки файла свойств пакета ресурсов с использованием jquery.i18n.properties.js

$.i18n.properties({ 
name: 'Messages', 
path: 'bundle/', 
mode: 'both', 
language: lang, 
callback: function() { 
$("#msg_welcome").text($.i18n.prop('msg_welcome')); $("#msg_selLang").text($.i18n.prop('msg_selLang', lang)); 
}
 });

The below table provides details about the various options available for $.i18n.properties() (source: http://codingwithcoffee.com/?p=272)

Option  Description  Notes 
name Name (or names) of files representing resource bundles
(eg, ‘Messages’ or ['Msg1','Msg2'])		 Required
String or String[]
language ISO-639 Language code and, optionally, ISO-3166
country code (eg, ‘en’, ‘en_US’, ‘pt_PT’). If not specified, language reported by the browser will be used instead.		 Optional
String
path Path to directory that contains ‘.properties‘files
to load.

Optional
String
mode Option to have resource bundle keys available as JavaScript
variables/functions OR as a map. Possible options: ‘vars’ (default), ‘map’ or ‘both’.		 Optional
String
callback Callback function to be called upon script execution
completion		 Optional
function()

Here mode is set to ‘both’ hence the messages can be fetched using map approach as well as JavaScript variables/functions. In the above code sample we used map to retrieve the translated text. The same can be achieved using JavaScript variables/functions as shown below:

$("#msg_welcome").text(msg_welcome); 
$("#msg_selLang").text(msg_selLang(lang));

String parameterization

Jquery.i18n.properties.js also supports parameterization of messages. This we have already used in the sample above for the second message.

$("#msg_selLang").text($.i18n.prop('msg_selLang', lang));

In the properties file the message is defined as

msg_selLang = Your Selected Language is: {0}

Here {0} is replaced by the argument ‘lang’ value. As in java resource bundles, we can use multiple {} to define custom messages with multiple parameters.

The final output

The following screen shots show the output of this demo. The below screen shot is of the default page

When the language in drop down is changed to es_ES the text from Message_es_ES.properties is read and displayed as shown below:

Advantages of jquery.i18n.properties.js

  • The main advantage of this plugin is that it uses .properties files for internationalization. This is helpful as same properties files could be shared with other parts of the program.
  • The support of parameterization of strings is also beneficial as this enables one to have     complex multilingual strings.
  • Has option to use map as well as JavaScript variables/functions for retrieving translated     strings.
  • The plugin is very lightweight and can be easily used with any HTML as it is jQuery based.

38
Share: