i18next: A Solution for Front End i18n Message
i18next: A Solution for Front End i18n Message
Purpose
This document is used to introduce a solution which can support below features:
Ø Support displaying i18n message in javascript
Ø Support displaying message with parameters
Ø Support display text for HTML elements
Ø Support resource path custmization
Requirments
Jquery, i18next , JSON, IE Browser
Implementation
Initiation
When we are trying to use the any message in the jsp or javascript, we should make sure the javascript files which are needed should be included in the jsp file:
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/i18next.js " type="text/javascript"></script>
<script src="./js/sample.js" type="text/javascript"></script>
Take above sniplet as exame, if sample.js is our customized javascript, we should make sure all the initiation work should be included in $(document).ready() of this file:
$(document).ready(function(){
$.i18n.init(
{
lng: 'en',
ns: 'message',
resGetPath: 'resource/locales/__lng__/__ns__.json'
},
function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$(".translation").i18n();
$("#userName").i18n();
}
);
});
$.i18n.init() is the init method for i18next, the meanings of the variables used in this method is listed as following:
lng : The locale code for the browser, it can be mannually set, if it is not set manually, it will use defalut value: dev.
ns : name space, name space means the prefix name of message file which will be loaded
resGetPath : the resource files path, in this case, the variable: __lng__ and __ns__ are used, lng is en, ns is message, so the message file: 'resource/locales/en/message.json' will be loaded.
$(".translation").i18n();
$("#userName").i18n();
These two lines means loading required properties in the loaded message file.
If messages will be used in a container with the class name the same as the name in JSON file, It should be like: $(".translation").i18n();
If message will be used in a single element with the id the same as the name in JSON file ,
It should be like: $("#userName").i18n();
Display text for HTML elements
· Display text within a container with class attribute
Like privously mentioned, this container should have a class attribute whose name should be the same as the name in JSON file .
e.g:
menu is defined in JSON file:
"menu": {
"firstName": "First Name:",
"familyName": "Family Name:"
},
When we use menu.firstName and menu.familyName , we shuld make sure menu is a class name of the required container, the elements with in this container can use these two properties by adding an extra attribute: data-i18n
<table width="100%" border="0" id="menu1" class="menu ">
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName "></td>
<td width="50%"><INPUT TYPE="text" id="userFirstName" data-i18n ="[value]userFirstName"></td>
</tr>
<tr id="familyName">
<td width="50%" data-i18n="menu.familyName "></td>
<td width="50%"><INPUT TYPE="text" id="userFamilyName" data-i18n ="[value]userFamilyName"></td>
</tr>
</table>
· Display text for an element with id attribute
The properties in JSON file should be defined as below:
"userFirstName": "Ivar",
"userFamilyName": "Chen",
When we use userFirstName and userFamilyName , we shuld make sure userFirstName or userFamilyName is the id of this element, then add an extra attribute: data-i18n
<INPUT TYPE="text" id="userFirstName " data-i18n ="[value]userFirstName">
<INPUT TYPE="text" id="userFamilyName " data-i18n ="[value]userFamilyName">
The value for added an extra attribute: data-i18n should be like: "[value]userFirstName”
[value] means the attribute of this element,
userFirstName means the key of used property.
Display i18n message with parameters in javascript
Firstly we need to define the properties in JSON files:
"messages": {
"hello": "Hello, __name__"
}
"hello": is the key
"Hello, __name__ " is the value , __name__ is the parameter , multiple paraters are supported.
In javascript, we can simply use method $.i18n.t() to get the message:
$.i18n.t("messages.hello", { name: $("#userFirstName").val() + " " + $("#userFamilyName").val() } )
The second paramter should be written as this format: {param1: param1value, param2:param2value}
Resource path custmization
set resGetPath in $.i18n.init() while initiation