close

Filter

loading table of contents...

Studio Developer Manual / Version 2301

Table Of Contents

5.6 Localization

Note

Localizing CKEditor

This section is about localizing Ext JS components. For embedded richtext editing component CKEditor a different approach is required. For details, see Section 10.1.3.2, “Localizing CKEditor 5”.

Creating Resource Bundles

Text properties in CoreMedia Studio can be localized. English and German are supported out of the box; you can add your own localization bundles if required. To do so, proceed as follows:

  1. Add the new locale to the studio.locales property in your Studio application's application.properties file.

    This property contains a comma-separated list of locales. The first element in the list is en and specifies the locale of values in the default properties files (that is, the files without a locale suffix). Therefore, you must not change this first entry; it must always remain en (see below).

  2. Add properties classes that follow the naming scheme for your added locale, as explained below.

Localized texts are stored in TypeScript classes as constants. The naming scheme of these files is:

<FileName>_<IsoLanguageCode>_properties.ts

A TypeScript properties class with no language code contains properties in the default language English. Note that English is only a technical default. The default locale used for users opening CoreMedia Studio for the first time is determined by the best match between their browser language settings and all supported locales.

When properties are missing in a locale-specific properties class or the complete properties class is missing, the values of the properties are inherited from the default language (that is, they will appear in English rather than in the locale the user has set).

Accessing Resource Bundles

Resource bundles can be accessed via the ResourceManager or by directly accessing the constant of the properties class:

import Config from "@jangaroo/runtime/Config";
import Panel from "@jangaroo/ext-ts/panel/Panel";
import MyPropertiesClass from "./MyPropertiesClass";

Config(Panel, {
    title: MyPropertiesClass.my_constant,
    //...
})

The ResourceManager can be accessed via the constant resourceManager (lower case) which has the type IResourceManager. It is mostly used when values of other property classes should be overwritten or a value from another language is should be read.

Overriding existing properties

If you want to change predefined labels, tooltips or similar, you can override properties from existing properties classes. To this end, you should first define a new properties class and then declare a CopyResourceBundleProperties inside the configuration section of your plugin rules. This plugin will copy all key-value-pairs from the source properties class to the target properties class, overwriting entries with the same keys.

import resourceManager from "@jangaroo/runtime/l10n/resourceManager";
import CopyResourceBundleProperties from "@coremedia/studio-client.main.editor-components/configuration/CopyResourceBundleProperties";
import SomeStudio_properties from "@coremedia/studio-client.main...";
import MyCustomized_properties from "./MyCustomized_properties";

// inside the 'configuration' property:
new CopyResourceBundleProperties({
  destination: resourceManager.getResourceBundle(null, SomeStudio_properties),
  source: resourceManager.getResourceBundle(null, MyCustomized_properties),
})

Generally, each Studio plugin module will contain at least one set of properties class for localizing its own components or for adapting existing properties classes.

For details on UI localization through properties classes see Section 9.4, “Localizing Labels”.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.