Wiki source code of TranslationsTutorial
Version 1.1 by Sorin Burjan on 2011/03/30
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | 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. | ||
| 2 | |||
| 3 | In order to facilitate these tasks, here is a tutorial which uses the best practices for achieving your goal. | ||
| 4 | |||
| 5 | {{box}} | ||
| 6 | This tutorial is divided in two sections. First section shows users how to create properly a small inline form. | ||
| 7 | 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. | ||
| 8 | {{/box}} | ||
| 9 | |||
| 10 | |||
| 11 | = Step 1 = | ||
| 12 | |||
| 13 | * Create a page called **MyCoolClass.**(% style="font-weight: bold;" %) (%%)This will hold the definition of the class. | ||
| 14 | * Add the following fields : | ||
| 15 | * name of Type String | ||
| 16 | * Fill the Pretty Name field with "Your Name" | ||
| 17 | [[image:addNameProprety.png]] | ||
| 18 | |||
| 19 | * street of Type String | ||
| 20 | * Fill the Pretty Name field with "Your Street Name" | ||
| 21 | [[image:addStreetProprety.png]] | ||
| 22 | |||
| 23 | * favColor of Type Static List | ||
| 24 | * Fill the Pretty Name with Favourite Color | ||
| 25 | * Fill the Values field with "red|blue|green|yellow" | ||
| 26 | [[image:addFavColorProprety.png]] | ||
| 27 | |||
| 28 | * edit the document in wiki mode and add the following line: | ||
| 29 | |||
| 30 | {{code}} | ||
| 31 | {{include document="XWiki.ClassSheet"/}} | ||
| 32 | {{/code}} | ||
| 33 | |||
| 34 | * Click on the Save & View Button | ||
| 35 | |||
| 36 | = Step 2 = | ||
| 37 | |||
| 38 | * Create a page called **MyCoolSheet** | ||
| 39 | * Edit the page in wiki mode and add the following | ||
| 40 | |||
| 41 | {{code}} | ||
| 42 | {{velocity}} | ||
| 43 | {{html}} | ||
| 44 | <dl><dt><label>$doc.displayPrettyName('name', false, false)</label></dt> | ||
| 45 | <dd>$doc.display('name')</dd> | ||
| 46 | </dl> | ||
| 47 | |||
| 48 | |||
| 49 | <dl><dt><label>$doc.displayPrettyName('street', false, false)</label></dt> | ||
| 50 | <dd>$doc.display('street')</dd> | ||
| 51 | </dl> | ||
| 52 | |||
| 53 | <dl><dt><label>$doc.displayPrettyName('favColor', false, false)</label></dt> | ||
| 54 | <dd>$doc.display('favColor')</dd> | ||
| 55 | </dl> | ||
| 56 | {{/html}} | ||
| 57 | {{/velocity}} | ||
| 58 | |||
| 59 | {{/code}} | ||
| 60 | |||
| 61 | * Add a new class of type XWiki.SheetClass and set its only proprety to "inline". | ||
| 62 | * Click on the Save & View Button | ||
| 63 | |||
| 64 | = Step 3 = | ||
| 65 | |||
| 66 | * Create a page called **MyCoolTemplate** | ||
| 67 | * Edit the page in wiki mode and add the following line: | ||
| 68 | |||
| 69 | {{code}} | ||
| 70 | {{include document="MyCoolSheet"/}} | ||
| 71 | {{/code}} | ||
| 72 | |||
| 73 | * Click on the Save & View Button | ||
| 74 | |||
| 75 | = Step 4 = | ||
| 76 | |||
| 77 | Before to be able to add translations, the XWiki must be set to support multiple languages. | ||
| 78 | |||
| 79 | |||
| 80 | * Go to administration section of the wiki, | ||
| 81 | ** Set Multi Lingual to yes | ||
| 82 | ** in the Languages field, add the languages you want your wiki to support | ||
| 83 | * Click the Save button | ||
| 84 | * Create a page called **MyCoolTranslations**. This page will hold the translations to other languages other than the default one. | ||
| 85 | * 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. | ||
| 86 | [[image:MyCoolTranslationsAddTranslations.png]] | ||
| 87 | * Insert this text into the content | ||
| 88 | |||
| 89 | (% class="macro-output" style="display: block;" %) | ||
| 90 | ((( | ||
| 91 | (% class="box code" %) | ||
| 92 | ((( | ||
| 93 | Main.MyCoolClass_name=Numele Tau | ||
| 94 | Main.MyCoolClass_street=Numele Strazii | ||
| 95 | Main.MyCoolClass_favColor=Culoarea Preferata | ||
| 96 | \\Main.MyCoolClass_favColor_red=Rosu | ||
| 97 | Main.MyCoolClass_favColor_green=Verde | ||
| 98 | Main.MyCoolClass_favColor_blue=Albastru | ||
| 99 | Main.MyCoolClass_favColor_yellow=Galben | ||
| 100 | ))) | ||
| 101 | ))) | ||
| 102 | |||
| 103 | * The rule for creating translations key is the following | ||
| 104 | ** For class proprieties : spacename.classname + _ + property name | ||
| 105 | ** For static lists : spacename.classname + _ + property name + _ + property value | ||
| 106 | * Click on the Save & View Button | ||
| 107 | * 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. | ||
| 108 | * For example, if your are using your xwiki on localhost use the following URL's: | ||
| 109 | ** English Version: http:~/~/localhost:8080/xwiki/bin/view/Main/MyCoolTemplate or http:~/~/localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=en | ||
| 110 | ** Romanian versions: http:~/~/localhost:8080/xwiki/bin/view/Main/MyCoolTemplate?language=ro | ||
| 111 | |||
| 112 | * English Version. | ||
| 113 | [[image:MyCoolTemplateENView.png]] | ||
| 114 | |||
| 115 | * Romanian Version. | ||
| 116 | [[image:MyCoolTemplateROView.png]] | ||
| 117 | |||
| 118 | {{warning}} | ||
| 119 | 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. | ||
| 120 | {{/warning}} |
