UI Plugin Localization - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 11. There's an updated version available that covers our most recent release.

30-04-2018

UI Plugin Localization

Statically compiled resource bundles are used to provide translations for much of Hippo’s CMS UI and plugins. Examples are:

  • Translations for the configuration of custom HST component and Channel information
  • Translations for the configuration of custom Targeting collectors

Statically compiled resource bundles are one source for providing translations for the CMS UI. For more details, see CMS UI localization.

Compile time translations come in two flavours:

  • Java property files which are used by Wicket and ExtJS code
  • JSON files used by AngularJS code in combination with Angular Translate

For an explanation on using Java property files in Wicket code, see the section “Using Java resource bundles in Wicket” below.

For an example how ExtJS code uses the Java property files for translation labels, see the example GroupsCollectionPlugin collector (TODO http://www.onehippo.org/library/enterprise/enterprise-features/targeting/collectors.html). In general, ExtJS can components have their translation labels pushed into them through the WicketExtJS bridge.

Hippo CMS also uses AngularJS code for more and more pieces of functionality. The Angular JS code uses Angular Translate to pull in translations which are stored in separate JSON files. For an example, see translations JSON file for the Channel Manager: https://code.onehippo.org/cms-community/hippo-addon-channel-manager/tree/hippo-addon-channel-manager-4.2.5/frontend-ng/src/i18n.

Using Java resource bundles in Wicket

In Wicket you use a combination of a Java class file and an HTML file of the same name. For localization one can also add .properties files. In Hippo CMS these files all have an underscore and a language code at the end of the filename, except for the default language. For example:

addon/cms/dashboard/src/main/java/org/hippoecm/frontend/plugins/cms/dashboard
   DashboardPerspective.java
   DashboardPerspective.html
   DashboardPerspective.properties
   DashboardPerspective_nl.properties

In Hippo CMS, there can be .properties files and HTML files of the same name in the classes folder of the WAR, which take priority over those located in the jars inside the WAR. For instance, the DashboardPerspective plugin includes the following files:

WEB-INF/default/org/hippoecm/frontend/plugins/cms/dashboard
   DashboardPerspective.html
   DashboardPerspective.properties
   DashboardPerspective_nl.properties

In the html file, you can define Wicket messages. For example a message with key 'todo':

<wicket:message key="todo">todo message</wicket:message>

Here the content of the Wicket message is 'todo message'. The .properties files define what should be inserted instead of the content, in this example instead of 'todo message'. The default language is English so the DashboardPerspective.properties file contains the English property definition:

todo: My todo list

While the DashboardPerspective_nl.properties contains the Dutch property definition:

todo: Dingen die ik moet doen

The string 'My todo list' or the string 'Dingen die ik moet doen' replaces in the HTML file the content of the wicket:message element with key 'todo'. So the string 'todo message' is replaced. Without any properties files, the string 'todo message' would be used.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?