2018.01.21 Languages

Language of the User Interface

Target

A real time language switch of the UI.

Let's begin

Like always we got just a target what we want, but we don't have any ideas what we need ;)

So we start to collect the first questions:

• How we want to provide the language data?
• How we want to implement the usage?
• Do we need a central singleton element?

The usage

I'm a developer :P ... so I don't like stupid work. So the usage of the language manager should like very simple but smart. Means: I will not mess-up the whole template code with repeating stuff like:

<div><lang domain="setting" file="../../{$lang}/settings/core.json">LANGUAGE_SWITCH</lang>:</div>
...
<button onClick="save()"><lang domain="setting" file="../../{$lang}/settings/core.json">BUTTON_SAVE</lang></button>

Before we clean that, we must do decision: Do we want to share the language pieces across the project? Pro will be, that we safe duplicated translation like "Save", "OK", "Abort" etc. But as Con we loose direct the overview of the usage. So seems best, that each page, or better, each UI template build a own domain.
That lead us into language definition in a template:

<Lang.Setup domain="Settings/OptionScreen" />

so our example seems now:

<div><Lang>LANGUAGE_SWITCH</Lang>:</div>
...
<button onClick="save()"><Lang>BUTTON_SAVE</Lang></button>

But the wording seems not cool yet. Inside of a page(template) we have sections with maybe word overlapping.
So let's use camel case writing with domain path:

<Lang.Setup domain="Settings/OptionScreen" />
<div><Lang>option.language</Lang>:</div>
...
<button onClick="save()"><Lang>option.save</Lang></button>

to avoid global usage, let's move the setup into the program:

constructor(props, context, updater) {
  super(props, context, updater);
  this.localeAdapter = {
    getDomain: function getLocaleDomain() { return "Settings/OptionScreen"},
    onChange:  this.onLanguageChange.bind(this),
    ...
  };
}

componentWillMount() {
   this.lang = this.props.lang.setup(this.localeAdapter);
}

<div>{this.lang.translate('option.language')}:</div>
...
<button onClick="save()">{this.lang.translate('option.save')}</button>

The data files

After we know that we want to have separated domains for the language usage, we can orient on that to design the data organization:

Lang
  |
  +-- de_DE
  |    |
  |    +-- Settings
  |         |
  |         +-- OptionScreen.json
  |
  +-- en_US
       |
       +-- Settings
            |
            +-- OptionScreen.json

The file himself could be a simple YAML:

option:
  language: Sprachauswahl
  save: Speichern

The manager?

At least: Do we need a central singleton element?
Pro: Point to message when language needs to be change.
Con: Global like element.

To not to be global like we add in the application(core) the manager. Over that manager the locale-loaders receive language change messages.
Do not to strong depend, we use the adapter way, like menuAdapter of application. The communication we be via props shared handlers.