Internationalization

This chapter is about internationalization (translation of elements) in AsTeRICS Grid which can be done in three ways:

1. dom-i18n
2. i18nService.js
3. Vue.js filter

Back to Overview

dom-i18n

The library dom-i18n provides an very easy to use possibility for adding translations to an HTML site. Wherever possible it’s used within AsTeRICS Grid. The file aboutView.vue shows it’s usage within a Vue component:

1. Usage within HTML: <h2 data-i18n="">About AsTeRICS Grid // Über das AsTeRICS Grid</h2>

   • property data-i18n on an HTML element indicates that the content of this h2 tag is internationalized
   • content in different languages is placed directly within the HTML element, separated by " // "
   • first language is English, second German

2. For displaying only the content of the correct language, in the Javascript part of the component this code has to be executed (see aboutView.vue:88):

   mounted() {
       i18nService.initDomI18n();
   }
   

   • the mounted() function is called by Vue.js after initialization of the component
   • i18nService.initDomI18n() initializes the dom-i18n library for this component, showing only the translations of correct language
   • if it’s a dynamic Vue.js component it’s maybe necessary to call i18nService.initDomI18n() also in the Vue.js updated() method which is called after each view update

The dom-i18n library is initialized in i18nService.js. There it would be possible to add additional languages by adding it to the language property within the i18nService.initDomI18n() method.

i18nService.js

If a translation is needed in a piece of Javascript code, the method i18nService.translate(key) can be used. The key property to pass and it’s translations are also defined in i18nService. It’s also possible to pass parameters to the translate method which are inserted in {?} placeholders in the translated strings.

Usage example

In order to ask the user a translated question with parameter this code can be used:

if (confirm(i18nService.translate('CONFIRM_DELETE_GRID', 'My grid'))) {
    // delete grid
}

These could be the defined translations within i18nService.js:

i18nService.translations['en']['CONFIRM_DELETE_GRID'] = 'Do you really want to delete the grid "{?}"?'
i18nService.translations['de']['CONFIRM_DELETE_GRID'] = 'Möchten Sie das Grid "{?}" wirklich löschen?'

The result will be a confirmation dialog containing:

• non-german browser setting: Do you really want to delete the grid “My grid”?
• german browser setting: Möchten Sie das Grid “My grid” wirklich löschen?

Vue.js filter

There is also an implemented Vue.js filter for translation which uses the i18nService.translate() method. It’s implemented in vuePluginManager.js#initFilters(). General usage is a pipe within any double curly braces expression, for instance {{ variableToTranslate | translate }}. A real use-case could look like this:

<li v-for="action in gridElement.actions">
    <span>{{action.modelName | translate}}</span>
</li>

This piece of Vue.js code iterates over the array actions of the object gridElement and generates a span with a translated version of the modelName of each action as content.

← Previous Chapter Next Chapter →

Back to Overview