TranslationsTutorial

Last modified by Sorin Burjan on 2011/01/03 13:29

 There are multiple ways you can integrate translation in XWiki. If you are a web developer which builds custom applications on top of XWiki, you certainly tried to create pages that contain multiple translations.

In order to facilitate these tasks, here is a tutorial which uses the best practices for achieving your goal.

This tutorial is divided in two sections. First section shows users how to create properly a small inline form.
The second section shows you how to add translations in Romanian language to that form in the proper and recommended way. If you are interested only on the translations tutorial, you can skip the first section.

Step 1

  • Create a page called MyCoolClass. This will hold the definition of the class.
  • Add the following fields :
  • name of Type String
  • Fill the Pretty Name field with "Your Name"
    addNameProprety.png
  • street of Type String
  • Fill the Pretty Name field with "Your Street Name"
    addStreetProprety.png
  • favColor of Type Static List
  • Fill the Pretty Name with Favourite Color
  • Fill the Values field with "red|blue|green|yellow"
    addFavColorProprety.png
  • edit the document in wiki mode and add the following line:
{{include document="XWiki.ClassSheet"/}}
  • Click on the Save & View Button

Step 2

  • Create a page called MyCoolSheet
  • Edit the page in wiki mode and add the following
{{velocity}}
{{html}}
<dl><dt><label>$doc.displayPrettyName('name', false, false)</label></dt>
<dd>$doc.display('name')</dd>
</dl>


<dl><dt><label>$doc.displayPrettyName('street', false, false)</label></dt>
<dd>$doc.display('street')</dd>
</dl>

<dl><dt><label>$doc.displayPrettyName('favColor', false, false)</label></dt>
<dd>$doc.display('favColor')</dd>
</dl>
{{/html}}
{{/velocity}}
  • Add a new class of type  XWiki.SheetClass and set its only proprety to "inline".
  • Click on the Save & View Button

Step 3

  • Create a page called MyCoolTemplate
  • Edit the page in wiki mode and add the following line:
{{include document="MyCoolSheet"/}}
  • Click on the Save & View Button

Step 4

Before to be able to add translations, the XWiki must be set to support multiple languages.

  • Go to administration section of  the wiki,
    • Set Multi Lingual to yes
    • in the Languages field, add the languages you want your wiki to support
  • Click the Save button
  • Create a page called MyCoolTranslations. This page will hold the translations to other languages other than the default one.
  • Open the page in Wiki mode, and on the Document Translations panel from the right side of the page, click the translate this document in Ro button. Now we will add the translation for the Romanian language.
    MyCoolTranslationsAddTranslations.png
  • Insert this text into the content

Main.MyCoolClass_name=Numele Tau
Main.MyCoolClass_street=Numele Strazii
Main.MyCoolClass_favColor=Culoarea Preferata

Main.MyCoolClass_favColor_red=Rosu
Main.MyCoolClass_favColor_green=Verde
Main.MyCoolClass_favColor_blue=Albastru
Main.MyCoolClass_favColor_yellow=Galben

  • The rule for creating translations key is the following
    • For class proprieties : spacename.classname + _ + property name
    • For static lists : spacename.classname + _ + property name + _ + property value
  • Click on the Save & View Button
  • To test your translation, append to your URL ?language=ro. For a better comparison you can see below the English version, and the Romanian version.
  • For example, if your are using your xwiki on localhost use the following URL's:
    • English Version: http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate or http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=en
    • Romanian versions: http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=ro
  • English Version.
    MyCoolTemplateENView.png
  • Romanian Version.
    MyCoolTemplateROView.png

Note that only the Translation document needs to have translations. The class, sheet, template and instance pages don't need to be translated, the localized messages will automatically be displayed in the selected language.

Get Connected