Wiki source code of Tutorial for Internationalizing a Form
Last modified by Vincent Massol on 2017/09/05
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
8.1 | 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} |
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
 |
1.1 | 4 | |
| |
8.1 | 5 | 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. |
| |
1.1 | 6 | |
| |
8.1 | 7 | In order to facilitate these tasks, here is a tutorial which uses the best practices for achieving the following goals: |
 |
8.2 | 8 | |
| |
8.1 | 9 | * The first section shows how to create properly a small inline form. |
| 10 | * 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. | ||
| |
1.1 | 11 | |
| |
8.1 | 12 | = Step 1: Creating the XWiki Class = |
| |
1.1 | 13 | |
| |
8.2 | 14 | * Create a page called **MyCoolClass.** This will hold the definition of the class. |
| 15 | * Add the following fields: | ||
| |
1.1 | 16 | * name of Type String |
| 17 | * Fill the Pretty Name field with "Your Name" | ||
| 18 | [[image:addNameProprety.png]] | ||
| 19 | |||
| 20 | * street of Type String | ||
| 21 | * Fill the Pretty Name field with "Your Street Name" | ||
| 22 | [[image:addStreetProprety.png]] | ||
| 23 | |||
| 24 | * favColor of Type Static List | ||
| 25 | * Fill the Pretty Name with Favourite Color | ||
| 26 | * Fill the Values field with "red|blue|green|yellow" | ||
| 27 | [[image:addFavColorProprety.png]] | ||
| 28 | |||
| |
10.1 | 29 | * edit the document in wiki mode and add the following line:((( |
| |
1.1 | 30 | {{code}} |
| 31 | {{include document="XWiki.ClassSheet"/}} | ||
| 32 | {{/code}} | ||
| |
8.2 | 33 | ))) |
| 34 | * Click on the "Save & View" button | ||
| |
1.1 | 35 | |
| |
8.1 | 36 | = Step 2: Creating the XWiki Sheet = |
| |
1.1 | 37 | |
| 38 | * Create a page called **MyCoolSheet** | ||
| |
10.1 | 39 | * Edit the page in wiki mode and add the following((( |
| |
1.1 | 40 | {{code}} |
| 41 | {{velocity}} | ||
| 42 | {{html}} | ||
| 43 | <dl><dt><label>$doc.displayPrettyName('name', false, false)</label></dt> | ||
| 44 | <dd>$doc.display('name')</dd> | ||
| 45 | </dl> | ||
| 46 | |||
| 47 | |||
| 48 | <dl><dt><label>$doc.displayPrettyName('street', false, false)</label></dt> | ||
| 49 | <dd>$doc.display('street')</dd> | ||
| 50 | </dl> | ||
| 51 | |||
| 52 | <dl><dt><label>$doc.displayPrettyName('favColor', false, false)</label></dt> | ||
| 53 | <dd>$doc.display('favColor')</dd> | ||
| 54 | </dl> | ||
| 55 | {{/html}} | ||
| 56 | {{/velocity}} | ||
| 57 | {{/code}} | ||
| |
8.2 | 58 | ))) |
| 59 | * Add a new class of type ##XWiki.SheetClass## and set its only property to "inline". | ||
| 60 | * Click on the "Save & View" button | ||
| |
1.1 | 61 | |
| |
8.1 | 62 | = Step 3: Creating the XWiki Template = |
| |
1.1 | 63 | |
| 64 | * Create a page called **MyCoolTemplate** | ||
| |
10.1 | 65 | * Edit the page in wiki mode and add the following line:((( |
| |
1.1 | 66 | {{code}} |
| 67 | {{include document="MyCoolSheet"/}} | ||
| 68 | {{/code}} | ||
| |
8.2 | 69 | ))) |
| 70 | * Click on the "Save & View" button | ||
| |
1.1 | 71 | |
| |
8.1 | 72 | = Step 4: Internationalizing the display = |
| |
1.1 | 73 | |
| |
8.2 | 74 | Before being able to add translations, XWiki must be set to support multiple languages: |
| |
1.1 | 75 | |
| |
8.2 | 76 | * Go to the administration section of the wiki |
| 77 | ** Click on "Localization" | ||
| 78 | ** Set Multilingual to yes | ||
| 79 | ** in the "Supported Languages" field add the languages you want your wiki to support in this format: "fr, en, ro" (without the quotes) | ||
| 80 | ** Click the "Save" button | ||
| 81 | * Create a page called **MyCoolTranslations**; this page will hold the translations to other languages other than the default one. | ||
| 82 | * Open the page in Wiki mode, and on the Document Translations panel from the right side of the page, click the "ro" button; now we will add the translation for the Romanian language. | ||
| |
1.1 | 83 | [[image:MyCoolTranslationsAddTranslations.png]] |
| |
10.1 | 84 | * Insert this text into the content:((( |
| |
8.2 | 85 | {{code}} |
| |
1.1 | 86 | Main.MyCoolClass_name=Numele Tau |
| 87 | Main.MyCoolClass_street=Numele Strazii | ||
| 88 | Main.MyCoolClass_favColor=Culoarea Preferata | ||
| |
8.2 | 89 | |
| 90 | Main.MyCoolClass_favColor_red=Rosu | ||
| |
1.1 | 91 | Main.MyCoolClass_favColor_green=Verde |
| 92 | Main.MyCoolClass_favColor_blue=Albastru | ||
| 93 | Main.MyCoolClass_favColor_yellow=Galben | ||
| |
8.2 | 94 | {{/code}} |
| |
1.1 | 95 | ))) |
| |
8.2 | 96 | * The rule for creating translation keys is the following: |
| |
1.1 | 97 | ** For class proprieties : spacename.classname + _ + property name |
 |
9.1 | 98 | ** For static lists and boolean properties : spacename.classname + _ + property name + _ + property value((( |
| 99 | Note that for boolean properties the possible values are 0 (=false), 1 (=true) and 2 (=undecided). E.g. SomeSpace.SomeClass_enabled_0=Disabled | ||
| 100 | ))) | ||
| |
8.2 | 101 | * Click on the "Save & View" button |
| 102 | * To test your translation, append **?language=ro** to your URL. For a better comparison you can see the English and the Romanian versions below. | ||
| 103 | * For example, if your are using your xwiki on localhost use the following URLs: | ||
| 104 | ** English version: http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate or http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=en | ||
| 105 | ** Romanian version: http://localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=ro | ||
| |
1.1 | 106 | |
| |
8.2 | 107 | * English Version: |
| |
1.1 | 108 | [[image:MyCoolTemplateENView.png]] |
| 109 | |||
| |
8.2 | 110 | * Romanian Version: |
| |
10.1 | 111 | [[image:MyCoolTemplateROView.png]]((( |
| |
1.1 | 112 | {{warning}} |
| |
8.2 | 113 | 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. |
| |
1.1 | 114 | {{/warning}} |
| |
8.2 | 115 | ))) |
