In this tutorial you translate an app to another language. You will create a file that contains translated user interface text, then load the file in Magnolia. Don't worry if you are not a developer. You don't need a development environment for this tutorial – all you need is language skills.
Install the Products app
In this tutorial we work with the Products app that was introduced in My first content app. The app is installed by the App Tutorial module. If you are a developer, clone the
app-tutorial project in Git. If you don't have a Java development environment, install the Magnolia bundle on your computer instead.
Option 1: Clone the app-tutorial project in Git
Choose this option if you know how to work with a Magnolia project and Git. Clone the
app-tutorial repository in Git:
Import the project into your IDE. Here's what the project looks like in IntelliJ IDEA:
Note that besides messages in English, it also contains also a i18n file with messages for Spanish.
Option 2: Install the Magnolia bundle
Choose this option if you don't have a Java IDE.
- Install Magnolia on your computer.
- Download the magnolia-app-tutorial-1.4.7.jar file from Nexus.
- Install the App Tutorial module on your Magnolia instance. Follow standard module installation instructions
Create German messages
To translate the Products app to German, we will use the file:
app-products-messages_en.properties, which contains messages for English.
Option 1: To create German messages in an IDE:
- Go to
/src/main/resources/app-tutorial/i18nin the module source files.
- Copy the English message file to a new file
app-products-messages_de.properties. Your folder hierarchy should look like this:
Option 2: To create a German message file in your local Magnolia bundle:
- Go to
- Create a
<module-name>/i18n/subfolder, in this case the
Copy the English message bundle to a new file
Translate the text
Open the German message file and translate the English text into the target language. Here is an example and some translation tips.
The i18n mechanism allows you to define locale-specific icons for apps and actions. Use your knowledge of the target culture to decide if this is necessary. If a symbol is unusual or difficult for readers of the target language to understand, you may want to change it.
For example, the Roman-alphabet question mark ? is mirrored in Arabic ؟. You need to decide if mirroring the help icon for Arabic users is necessary .
In English, we recommend to use short action verbs that are easy to understand:
- Add product
- Add folder
When translating actions, follow any convention that is typical in the target language. For example, in German it is more common to use a noun phrase:
- Neues Produkt
- Neuer Ordner
.properties file with UTF-8 encoding. This ensures that Magnolia reads special characters correctly. UTF-8 is a very extensive character set that supports a variety of languages.
Test the translation
To see the messages translated to German, you must be logged in as a user with language preferences set to German.
To test the translation:
- Change the language preference in your user account to Deutsch. See Setting an editor's language preference.
- Logout of AdminCentral and login again.
- Open the Products app to view the German labels.
Contribute your translations to Magnolia
Have you translated a Magnolia app? Join the Internationalization effort. Send us the translated
.properties files. We will add them to the product.