ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - Managing multiple languages in a website
  • Adapting a website to support multiple languages
  • What is a multilingual website?
  • Practical example: integrating multiple languages into a website
  • Step 1: Choosing the project languages
  • Step 2: Choosing the languages in the analysis
  • Adding languages in the analysis
  • Shared multilingual information
  • Applying changes
  • Step 3: Adapting the different elements of the project to support multiple languages
  • Checking the new language is taken into account in the page
  • Translating menu options
  • Translating website controls
  • Translating programming text
  • Changing the language programmatically
  • Language buttons
  • Page test
  • Further information: The translation tools
  • Translating text with translation software
  • Translation with WDMSG and WDTRAD
  • Other elements to translate: the framework messages

Tutorial - Managing multiple languages in a website

Adapting a website to support multiple languages
We will cover the following topics:
  • What is a multilingual website?
  • Creating a multilingual website, step by step.
Durée de la leçon 50 mn
What is a multilingual website?
A multilingual website features a user interface in multiple languages: English, French, German or any other language.
In WEBDEV, the same website can support up to 64 different languages.
We will use a project that can be run in English or French, according to the user's choice.
Practical example: integrating multiple languages into a website
Let's say we have developed a website with a UI in one language (e.g., English) but we need to make some changes so that is supports another language (e.g., French).
There's a specific order to these changes. The first step is to indicate that the project supports multiple languages. This step is absolutely essential in order to develop a multilingual website.
Let's take a look at the main steps to developing a multilingual WEBDEV website. These steps are as follows:
  • Choosing the languages supported by the project.
  • Choosing the languages supported by the analysis.
  • Implementing the languages in the different elements of the project (pages, reports, controls, etc.).
  • Implementing the languages in the code.
  • Programming the change of language in the website.
To illustrate these steps, we will use the "Full_WEBDEV_Site" project. This project will be translated from English into French.
Opening the example project
  1. Go to the WINDEV home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Tutorial - Create a WEBDEV website (Back Office and Front Office)", double-click "Full WEBDEV Site - Answers".
Step 1: Choosing the project languages
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 "Add". The language selection window appears.
    Adding a language to the project
  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. The Windows language options are used by default. Select "Use the following parameters": you now 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 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".
    Project description
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.
Now, let's simply apply changes:
  1. Validate the project description window.
  2. A message prompts you to synchronize the different project elements. Select "Yes". All the open elements in the editor (pages, reports, etc.) are closed and the additional languages are added to these elements.
    Remark: The captions that exist in the main project language are automatically copied to the added languages.
Step 2: Choosing the languages in the analysis
By default, an analysis is created in a specific language and cannot be translated.
However, some information can be written in several languages (notes in the documentation, shared information, etc.).
Why translate the data present in the analysis?
By default, the controls created from analysis items use the caption specified in the analysis. If a caption has been specified in the shared information of the item, it will be used when creating the control. In a multilingual project, this information must be translated so that new elements are created with all the necessary languages.
When you change the language of the project linked to the analysis, this change is not automatically applied to the analysis, since analyses can be shared between multiple projects.

To discover how this works, let's first add the languages in the analysis, then enter the shared information in multiple languages.

Adding languages in the analysis

To use multiple languages in the "Full_WEBDEV_Site" project:
  1. Open the data model editor: click Load project analysis in the quick access buttons of the WEBDEV menu.
  2. In the analysis description ("Analysis description" option in the context menu), select the "International" tab.
  3. The list of languages supported by the analysis is displayed. Since French is not supported, we need to add it:
    • Click the "Add" button.
    • Select "French".
    • Validate the language selection window.
  4. Validate the analysis description window.
    To take into account all the languages of the project linked to the current analysis, click "Synchronize with the project".

Shared multilingual information

Here is a simple example of how to enter shared information in multiple languages: let's define the text of the control bound to the "Address" item in the "Customer" data file:
  1. Select the Customer data file.
  2. Open the description of the items (select "Description of items" in the context menu of the data file).
  3. Select the "Address" item and open the parameters of the control bound to the selected item (shared information). To do so, click the link at the bottom of the screen. The shared information is displayed in a new window.
  4. In the "General" tab, in the French caption, enter "Adresse".
  5. Validate the shared information window.
  6. Validate the description window of the items.
    The shared information of the analysis can be translated:
    • when creating the analysis.
    • at any time via the editor.
    • at any time via WDMSG and WDTRAD, tools used to extract, translate and reintegrate the different elements of the project. These two tools will be presented later in this tutorial.

Applying changes

To take changes into account, you must generate the analysis: on the "Analysis" tab, in the "Analysis" group, click "Generation".
Close the analysis editor (click the "X" icon of the analysis in the open document tabs).
Step 3: Adapting the different elements of the project to support multiple languages
All project elements can be multilingual: pages, reports, etc.
We will modify some elements in "PAGE_List_of_products" to present the different methods that can be used. We are going to see how to modify:
  • 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.

Checking the new language is taken into account in the page

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. Under "Title", we can see that the title specified in English has been automatically copied into the language we added.
    By default, when a language is added to a project, all captions are automatically created with the content of the existing language. This avoids having "blanks" while waiting for the translation of the different elements.
  4. Let's translate the page title: replace the text under French with "Liste des produits".
    Page description
  5. Validate the description window.

Translating menu options

As with controls, menu options can be translated via the description window, or directly in the page editor.

In our example, we are going to translate the "List of products" option.
  1. The menu is contained in the template associated with the page. Open the page template:
    • Click the menu and open the context menu.
    • Select "Open template".
      Menu to open the template
    • The page template appears with a colored frame.
  2. Select the menu in the page template and press Space.
  3. The menu becomes editable and a yellow border appears.
  4. Select the "List of products" option.
  5. Open the option description window: open the context menu and select "Option description".
  6. In the description window, type the option in French: "Liste des produits".
  7. Validate.
The options can also be translated directly in the page editor. Let's use this method to translate the "Product form" 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 "Product form" option.
  4. Press the Space key: the text becomes editable.
  5. Type the caption in French: "Fiche produit".
  6. Press Enter to confirm changes.
  7. Press Esc to exit the edit mode.
  8. Save the page template (Save element 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 Apply changes of the page template icon in the header of the template. Validate the update window.
  11. Close the page template displayed in the editor.

Translating website controls

Controls can display different types of information to the user:
  • a caption,
  • an image, etc.
Sometimes, this information must be translated. This data is available in the different tabs of the control description window.
To translate the "Edit" link of "PAGE_List_of_products":
  1. Select the "Edit" 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 (Save element or Ctrl + S).

Translating programming text

All messages in your program can be translated into multiple languages.
Let's see how to translate a programming message:
  1. Open the code editor (press F2 on the PAGE_List_of_products" page).
  2. Write the following code in the "Global declarations" event:
    Global declarations (server)
    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.
    Multilingual message
  6. The Multilingual 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.
Changing the language programmatically
We have translated different elements in "PAGE_List_of_products". Now let's see how to change the website language.
By default, the project is run in the language defined for the project, in the "Languages" tab of the project description ("Description" in the "Project" tab).
In a website, there are several methods to select the language to be used. In most cases, a menu option (or "Language" button) is used. You can change the language of the running application by calling Nation in the code associated with the menu option.
In our example, the page template already has 2 flags that can be used to switch between languages. Let's use them. This operating mode is as follows: simply click on a flag to see the website in the desired language. For example, clicking on the US flag displays the site in English.
To do so, two Button controls have been created in the template (one for each language).

Language buttons

The language buttons can be found in the template of PAGE_List_of_products.
  1. If necessary, open "PAGE_List_of_products" in the editor (double-click its name in the "Project explorer" pane).
  2. Click the Button control with the US flag and select "Open template" in the context menu.
  3. Select this control in the page template. Right-click to open the context menu and select "Code".
  4. Enter the following code in the server code of the menu option:
    Click on BTN_English (LAYOUT_Language) (server)
    Nation(nationEnglish)
    PageUse(CurrentPage())
    Let's take a quick look at this code:
    • Nation changes the runtime language of the website. 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.
It's your turn: Write the following code in the button with the French flag:
Click on BTN_Français (LAYOUT_Language) (server)
Nation(nationFrench)
PageUse(CurrentPage())

We have made all the necessary changes in the page template.:
  1. Close the code window.
  2. Save the page template (Save element or Ctrl + S).
  3. Update the pages that use the page template by clicking the Update pages icon in the header of the template. Validate the update window.
  4. Close the page template displayed in the editor.

Page test

We have translated some elements of the application. Now, we will change the language in test mode.
To test the language change in PAGE_List_of_products:
  1. Click Test project in the quick access buttons. The page is displayed in test mode in English.
    Test of a multilingual project
  2. Click the French flag at the bottom of the page.
  3. The elements that have been translated are displayed in French:
    Test of a multilingual project
  4. Close the browser.
Further information: The translation tools
We have manually translated some elements of the website.
However, several translation methods are available in WEBDEV:
  • translating text directly in the editors: this is the method we previously used to translate some elements of our website. With this solution, you can use a translation tool such as Google Translate (a license may be required), etc.
  • translating large amounts of text via an external tool (WDMSG and WDTRAD).

Translating text with translation software

Translations can be typed directly in the interface: this is the method we have used so far.
However, you can also configure WEBDEV to use a translation software or website:
  1. On the "Home" tab, in the "Environment" group, expand "Options" and select "General options of WEBDEV".
  2. Go the "Translation" tab.
    General options of WEBDEV
  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 website to be used. You can use WDDIXIO, a translation dictionary included with WDMSG (see next paragraph), a specific translation software or website, 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 Language management button button in the different description windows of the project elements: this button allows you to use the translation software.

Translation with WDMSG and WDTRAD

WDMSG is an optional tool that allows you to:
  • extract all the project messages (control captions, code message, window titles, etc.) to translate them,
  • reintegrate the translated messages.
The messages to translate are extracted:
  • in a text format that can be configured to be used by most translation tools.
  • in HFSQL format.
WDMSG also comes with WDTRAD, a computer-assisted translation tool. WDTRAD makes it easy to enter all the translations of multilingual resources in a project.
Contact PC SOFT Sales Department for more details about WDMSG and WDTRAD.

Other elements to translate: the framework messages

Various pieces of information and messages are located in the WEBDEV framework. For example, the names of the days and months used by the date functions come from the WEBDEV framework. To translate one or more libraries of the framework, you must use WDINT (optional tool provided with WDMSG).
This software is used to get a WDM extension file containing all the translations of the libraries. To use this file in your application:
  • 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.
Contact PC SOFT Sales Department for more details about WDINT.
Table of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/13/2023

Send a report | Local help