PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 24 feature!
  • This lesson will teach you the following concepts
  • What is a multilingual site?
  • Choosing the project languages
  • Localizing the project elements
  • Localizing an image
  • Localizing the menu
  • Localizing controls
  • Localizing a programming message
  • The translation tools
  • Direct input of translations
  • Translation with WDMSG and WDTRAD
  • Other elements to translate: the framework messages
  • Programming the change of language
  • Adding a menu option
  • Programming
  • Project test
Lesson 5.5. Managing the multilingual feature
This lesson will teach you the following concepts
  • What is a multilingual site?
  • Creating a multilingual site, step by step.

Estimated time: 50 mn
Previous LessonTable of contentsNext Lesson
What is a multilingual site?
A multilingual site is a site that proposes an interface in several languages: English, French, German or any other language.
The same site created with WEBDEV can propose up to 64 different languages.
We are going to handle a project that can be run in English or in French, according to the user's choice.
The following steps are used to transform a site into a multilingual site:
  • Choosing the project languages.
  • Localizing the project elements (pages, reports, controls, ...).
  • Localizing the messages found in the code.
  • Programming the change of language in the site.
We are going to apply these different steps to the "Full_WEBDEV_Site" project. This project, available in English, will be translated into French.

Answer

If you did not perform the operations in the previous lessons, you can follow this lesson by opening a corrected project: in the WEBDEV home page (Ctrl + <), click "Tutorial" and select "Full WEBDEV Site (With pages)".
Choosing the project languages
  • The first operation consists in choosing the project languages.
    1. Display the project description: on the "Project" pane, in the "Project" group, click "Description".
    2. Click the "Languages" tab. Our project will support English and French.
    3. Click the "Add" button. The window for selecting languages is displayed.
    4. Click "French". A checkmark is displayed on the right of language.
    5. Validate. The "French" language appears in the list of project languages.
  • The "Languages" tab can also be used to configure the linguistic options regarding the numbers, the currencies, the dates, ... for the selected language. Let's see an example:
    1. Click the "French" language.
    2. Select the "Date" tab.
    3. Specific linguistic options are used by default: you have the ability to define the date format as well as the translation used for the days and months. If you select "Use the settings defined in the linguistic options of the operating system", the parameters used in deployment will be the server parameters (and not the user parameters).
    4. Keep "Use the following parameters".

Note

In the linguistic options, you have the ability to choose the text direction for the language ("Various" tab, "Text direction" option). This allows you to create interfaces with a language written from right to left.
  • Validate. A message proposes to synchronize the different project elements. Answer "Yes". All project elements opened in the editor (pages, reports, ...) are closed and the additional languages are added to these elements.

Note

GUI errors may occur. We will ignore them for now. These errors will be processed later in this tutorial.
Localizing the project elements
All project elements can become multilingual elements: pages, reports, ... We are going to modify some elements in the "PAGE_List_of_products" page to present the different methods that can be used. We are going to see how to modify:
  • the logo image used in the PAGE_List_of_products page.
  • the captions of controls in the PAGE_List_of_products page.
  • the menu options.
  • a message displayed by the WLanguage code.
  • Open the "PAGE_List_of_products" page in the editor (double-click its name in the "Project explorer" pane for example).
  • Validate the update of template if necessary.
  • First of all, check whether the PAGE_List_of_products page is associated with the different languages defined in the project:
    1. Display the page description ("Description" from the popup 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 found in the French section by "Liste des produits".
    5. Validate the window.

Localizing an image

  • To change the logo image used in the PAGE_List_of_products page according to the runtime language:
    1. Open the "PAGE_List_of_products" page if necessary.
    2. The logo image is found in the template associated with the page. Therefore, the associated page template must be opened:
      • Click the logo and display the popup menu.
      • Select "Open the template".
      • The page template appears, enclosed by an orange border.
    3. Display the description window of logo (double-click the control).
    4. In the "General" tab, on the right of "Image" section, click . Select "Multilingual" from the menu that is displayed.
    5. The window for managing multilingual images is displayed.
    6. A different image can be used for each language:
      • Click the button.
      • Select "Browse" from the menu that is displayed.
      This feature is very useful if you are using images containing text. The same image is used in our case.
    7. Validate the window for multilingual edit.
    8. Close the description window of control.
  • As we are located in the page template, we are going to take the opportunity to translate the "List of products" menu option.

Localizing the menu

The menu options can be translated like the other controls via the description window of option, or from the page editor.
  • In our example, we are going to translate the "List of products" option.
    1. Select then click the menu found in the page template.
    2. The menu becomes editable and a yellow border is displayed.
    3. Select the "List of products" option.
    4. Display the description window of option: display the popup menu and select "Option description".
    5. In the description window, type the option in French: "Liste des produits".
    6. Validate.
The options can also be translated in the page editor.
  • To translate the "Add a product" option:
    1. On the "Display" pane, in the "Options" group, expand "Language displayed" and select the language that will be viewed 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 on the keyboard: the caption becomes editable.
    5. Type the caption in French: "Ajouter un produit".
    6. Press Enter to validate the caption.
    7. Press Esc to exit from the edit mode.
    8. Save the page template ( or Ctrl + S).
    9. Restore the English display mode: on the "Display" pane, 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 orange bar. Validate the update window.
    11. Close the page template displayed in the editor.

Localizing controls

A control can display various information to the user:
  • a caption,
  • an image, ...
This information must be translated. This information is accessible in the different tabs of the description window of control.
  • To translate the "Modify" link found in the "PAGE_List_of_products" page:
    1. Select the "Modify" link.
    2. Display the description window of control ("Description" from the popup menu).
    3. Type the caption in French: "Modifier".
    4. Validate.
    5. Save the page ( or Ctrl + S).

Localizing a programming message

All messages found in your program can be translated into several languages. Let's see how to translate a programming message:
  1. Display the code editor (press F2 on the PAGE_List_of_products" page).
  2. Write the following code in the "Global declarations" event:
    sMyString is string = "French"
  3. To translate this type of message, position the cursor in the "French" string and press Ctrl + T. You also have the ability, on the "Code" pane, in the "Languages" group, to expand "Translate the strings" and select "Translate the messages".
  4. The window for editing a multilingual message is displayed. This window allows you to translate all messages of your program into all project languages.
  5. In the "French" section, type "Français" and validate.
  6. The icon as well as a digit appear in the code editor. These icons indicate that the multilingual message exists in 2 languages.
  7. Close the code editor.
The translation tools
Some application elements have been translated manually.
Several methods can be used to translate this information:
  • a direct translation of messages performed in the different editors: this is the feature that was just used to translate some elements of our site. This translation can possibly use a translation tool, Google Translate (providing that you own a license), ...
  • an "industrialized" translation performed via an external tool (WDMSG and WDTRAD).

Direct input of translations

The translations are typed in the product interface directly: this is the method that was used until now.
If you want to use a translation software or a translation site, WEBDEV can be configured to use this software:
  1. On the "Home" pane, in the "Environment" group, expand "Options" and select "General options of WEBDEV".
  2. Display 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, this character set will be automatically selected.
    • The software or the site that will be used for translation. You have the ability to use WDDixio, translation dictionary supplied with WDMSG (see next paragraph), a specific translation software or site, or Google Translate.
      See Translation by Google Translation for more details.
    • The supported languages.
  4. When the translation parameters are defined, you have the ability to click the button found in the different description windows of project elements: this button allows you to use the software defined for translation.

Translation with WDMSG and WDTRAD

An optional tool named WDMSG is available, allowing you to:
  • check out all project messages (caption of controls, code message, title of windows, ...) in order to translate them,
  • check the translated messages back in.
The messages to translate are checked out:
  • in a text format that can be configured to be used by most translation tools
  • in HFSQL format.
WDMSG is also supplied with WDTRAD, a computer-assisted translation tool. WDTRAD is used to easily type all translations for the multilingual information of a project.
Contact PC SOFT Sales Department for more details about WDMSG and WDTRAD.

Other elements to translate: the framework messages

Various information and messages are found in the WEBDEV framework. For example, the names of days and months used by the functions for date management come from the WEBDEV framework. To translate one or more libraries of this framework, you must use WDINT (optional tool supplied with WDMSG).
This software is used to get a WDM extension file containing all the translations of libraries. To use this file in your application:
  • you have the ability to use LoadError.
  • you have the ability to include the file to the project description in the "Languages" tab. All you have to do is select the requested language and select the "Various" tab.
Contact PC SOFT Sales Department for more details about WDINT.
Programming the change of language
By default, the project is run in the runtime language defined for the project, in the "Languages" tab of project description ("Description" in the "Project" pane).
In a site, the language can be chosen via a menu option. You can change the language of the application being run using Nation in the code associated with the menu option.

Adding a menu option

  • To add a menu option:
    1. Open (if necessary) the "PAGE_List_of_products" page in the editor (double-click its name in the project explorer).
    2. Click the menu and select "Open the template" from the popup menu.
    3. In the page template, select and click "Pages".
    4. The menu becomes editable and a yellow border is displayed.
    5. Press the Space key on the keyboard: the caption becomes editable.
    6. Type the caption ("Languages") and validate.
    7. Select the "Languages"' option you have just created.
    8. Display the popup menu (right mouse click) and select "Insert a sub-menu".
    9. Select the menu option that was just created.
    10. Press Enter to edit the caption.
    11. Type the caption of first sub-option: "English". Press the Enter key to validate the input.
    12. Select the first sub-option again.
    13. Press the Enter key: a second sub-option is created.
    14. Press the Space key and type the caption of second sub-option: "French".
  • As we are positioned in the page template, let's translate the last menu option:
    1. Select "Contact".
    2. Display the description window of option.
    3. Type "Contact us" for the English language.
We are now going to type the WLanguage code required to change language.

Programming

  • To type the code for managing languages:
    1. Select "Languages .. French" in the page template displayed in the editor.
    2. Display the popup menu (right mouse click). Select "Code".
    3. Type the following code in the server code of menu option:
      Nation(nationFrench)
      PageUse(CurrentPage())
    4. Close the code window.
    5. Select "Languages .. English" in the page template displayed in the editor.
    6. Display the popup menu (right mouse click). Select "Code".
    7. Write the following code:
      Nation(nationEnglish)
      PageUse(CurrentPage())
      In this code:
      • Nation is used to change the runtime language of the site. The constants passed in parameter allow you to specify the language to use.
      • PageUse is used to reload a page (the current page in our case) in order to take the change of language into account.
    8. Close the code window.
    9. Press Esc to exit from 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 orange bar. Validate the update window.
    12. Close the page template displayed in the editor.

Project test

Some application elements being translated, we are now going to check the change of language.
  • To run the site test:
    1. Run the project test ( among the quick access buttons). The page is displayed in test mode in English.
    2. Select "Languages .. French".
    3. The elements that have been translated are displayed in French:
    4. Close the browser
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment