• What is a multilingual site?
• Creating a multilingual site, step by step.

	Estimated time: 50 mn

• Choosing the project languages.
• Internationalizing the project elements (pages, reports, controls, etc.).
• Internationalizing messages in the code.
• Programming the change of language in the site.

• Open the project you worked on in the previous lesson.
  1. Go to the WEBDEV home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site (Exercise)".
  3. A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".

	Answers	A completed project is available. This project contains the results of the different operations performed in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site (Answers)".

• First, we will select the project languages.
  1. Open the project description: on the "Project" tab, in the "Project" group, click "Description".
  2. Click the "Languages" tab. Our project will support English and French.
  3. Click the "Add" button. The language selection window appears.
     
  4. Click "French". A checkmark is displayed on the right of the language.
  5. Validate. "French" appears in the list of project languages.

• The "Languages" tab also allows you to set the language options for numbers, currencies, dates, etc., in the selected language. Let's see an example:
  1. Click "French".
  2. Select the "Date" tab.
  3. Specific language options are used by default: you can also define the date format as well as the translation of days and months. If you select "Use the settings defined in the language options of the operating system", the settings used to deploy will be those of the server and not the ones defined by the user.
  4. Keep "Use the following parameters".
     

	Note	In the language options, you can set the text direction ("Miscellaneous" tab, "Text direction" option). This allows you to create interfaces with a language written from right to left.

• Validate. A message prompts you to synchronize the different project elements. Answer "Yes". All the project elements open in the editor (pages, reports, etc.) are closed and the new languages are added to these elements.

	Note	UI errors may occur. We will ignore them for now. We will see how to handle these errors later in this tutorial.

• the logo used in PAGE_List_of_products.
• the captions of the controls in PAGE_List_of_products.
• the menu options.
• a message displayed by the WLanguage code.

• Open "PAGE_List_of_products" in the editor (double-click its name in the "Project explorer" pane, for example).

• Confirm the template update if necessary.

• First, check whether PAGE_List_of_products is associated with the different languages defined in the project:
  1. Open the page description ("Description" in the context menu of the page).
  2. Select the "Language" tab: the two languages selected in the project are displayed.
  3. Select the "General" tab: the page title must be translated.
     
  4. Replace the text in the French section with "Liste des produits".
  5. Validate the window.

Internationalizing an image

• To change the logo used in PAGE_List_of_products according to the runtime language:
  1. Open "PAGE_List_of_products" if necessary.
  2. The logo is in the template associated with the page. Open the page template:
     • Click the logo and open the context menu.
     • Select "Open template".
       
     • The page template appears with a colored frame.
  3. Open the logo description window (double-click the control).
  4. In the "General" tab, next to the "Image" field, click . In the menu that appears, select "Multilingual".
  5. The multilingual image management window opens.
     
  6. A different image can be used for each language:
     • Click .
     • In the menu that appears, select "Browse".
     This feature is very useful if you use images that contain text. In our case, we use the same image.
  7. Validate the multilingual editing window.
  8. Close the control description window.

• As we are in the page template, we will translate the "List of products" menu option.

Internationalizing the menu

• In our example, we are going to translate the "List of products" option.
  1. Select the menu in the page template and press Space.
  2. The menu becomes editable and a yellow border appears.
  3. Select the "List of products" option.
  4. Open the option description window: open the context menu and select "Option description".
  5. In the description window, type the option in French: "Liste des produits".
  6. Validate.

• To translate the "Add a product" option:
  1. On the "Display" tab, in the "Options" group, expand "Language displayed" and select the language to display in the editor (French in our case).
  2. The menu options are displayed in the selected language. If no translation corresponds to the selected language, the menu options are displayed in English.
  3. Select the "Add a product" option.
  4. Press the Space key: the text becomes editable.
  5. Type the caption in French: "Ajouter un produit".
  6. Press Enter to confirm changes.
  7. Press Esc to exit the edit mode.
  8. Save the page template ( or Ctrl + S).
  9. Change the display mode back to English: on the "Display" tab, in the "Options" group, expand "Language displayed" and select "English".
  10. Update the pages that use the page template by clicking the icon in the header of the template. Validate the update window.
  11. Close the page template displayed in the editor.

Internationalizing controls

• a caption,
• an image, etc.

• To translate the "Modify" link of "PAGE_List_of_products":
  1. Select the "Modify" link.
  2. Open the control description window (select "Description" in the context menu).
  3. Type the caption in French: "Modifier".
  4. Validate.
  5. Save the page ( or Ctrl + S).

Internationalizing messages in the code

1. Open the code editor (press F2 on the PAGE_List_of_products" page).
2. Write the following code in the "Global declarations" event:
   
   MyString is string = "List of products"
   
3. To translate this type of message, position the cursor in the "List of products" string and press Ctrl + T. You can also go to the "Code" tab, "Languages" group, expand "Translate strings" and select "Translate messages".
4. The multilingual message editing window appears. This window allows you to translate all the messages of your program into all the languages of the project.
5. In "French", enter "Liste des produits" and validate.
   
6. The icon appears in the code editor. This icon indicates that the multilingual message exists in multiple languages. You can quickly view the different translations by hovering over the icon.
7. Close the code editor.

• translating the messages directly in the editors: this is the method we previously used to translate some elements of our site. With this solution, you can use a translation tool such as Google Translate (a license may be required).
• translating the messages via an external tool (WDMSG and WDTRAD).

Entering the translations directly

1. On the "Home" tab, in the "Environment" group, expand "Options" and select "General options of WEBDEV".
2. Go the "Translation" tab.
   
3. Specify:
   • Whether the regional settings must be automatically enabled according to the language used for the input. In this case, if the language requires a specific character set, it will be automatically selected.
   • The translation software or site to be used. You can use WDDIXIO, a translation dictionary included with WDMSG (see next paragraph), a specific translation software or site, or Google Translate.
     For more details, see Translation with Google Translate.
   • The supported languages.
4. Once the translation settings are defined, you can use the button in the different description windows of the project elements: this button allows you to use the translation software.

Translation with WDMSG and WDTRAD

• extract all the project messages (control captions, code message, window titles, etc.) to translate them,
• reintegrate the translated messages.

• in a text format that can be configured to be used by most translation tools.
• in HFSQL format.

Other elements to translate: the framework messages

• use the LoadError function.
• include the file in the "Languages" tab of the project description. Simply select the desired language and click on the "Miscellaneous" tab.
  

Adding a menu option

• To add a menu option:
  1. If necessary, open "PAGE_List_of_products" in the editor (double-click its name in the "Project explorer" pane).
  2. Click the menu, then right-click to open the context menu and select "Open template".
  3. In the page template, select the menu. Right-click to open the context menu and select "Edit menu".
  4. The menu becomes editable and a yellow border appears.
  5. Click "Pages".
  6. Press the Space key: the text becomes editable.
  7. Enter "Languages" and validate.
  8. Select the "LANGUAGES"' option you have just created.
  9. Right-click to open the context menu and select the "Insert a sub-menu" option.
  10. Select the menu option that was just created.
  11. Press Space to edit the text.
  12. Enter the text of the first sub-option: "Français". Press Enter to validate.
  13. Select the first sub-option again.
  14. Press Enter: a second sub-option is created.
  15. Press Space and type the text of the second sub-option: "English".

• We will translate the last menu option in the page template:
  1. Select "CONTACT".
  2. Open the option description window.
  3. Type "Contactez-nous" in French.

Programming

• To enter the language management code:
  1. Select "LANGUAGES .. ENGLISH" in the page template displayed in the editor.
  2. Right-click to open the context menu. Select "Code".
  3. Enter the following code in the server code of the menu option:
     
     Nation(nationEnglish)
     PageUse(CurrentPage())
     
  4. Close the code window.
  5. Select "LANGUAGES .. FRANÇAIS" in the page template displayed in the editor.
  6. Right-click to open the context menu. Select "Code".
  7. Write the following code:
     
     Nation(nationFrench)
     PageUse(CurrentPage())
     
     In this code:
     • Nation changes the runtime language of the site. The constants passed as parameters specify the language to be used.
     • PageUse reloads the page (the current page in our case) to apply the new language.
  8. Close the code window.
  9. Press Esc to exit the edit mode.
  10. Save the page template ( or Ctrl + S).
  11. Update the pages that use the page template by clicking the icon in the header of the template. Validate the update window.
  12. Close the page template displayed in the editor.

Project test

• To test the site:
  1. Test the project (click in the quick access buttons). The page is displayed in test mode in English.
  2. Select "LANGUAGES .. FRANÇAIS".
  3. The elements that have been translated are displayed in French:
     
  4. Close the browser.