ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
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 multilingualism into a site
  • Step 1: Choosing the project languages
  • Step 2: Choice of languages in the analysis
  • Adding languages in the analysis
  • Shared multilingual information
  • Applying changes
  • Step 3: Multilingual management of project components
  • 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: 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 site is a site that proposes an interface in several 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 multilingualism into a site
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 WEBDEV home page (Ctrl + <).
  2. On the home page, click on "Tutorial", then in the "Tutorial - Managing multilingualism" area, click on the "Open exercise project" link.
Step 1: Choosing the project languages
First, we will select the project languages.
  1. Open the project description window. To do so, go to the "Project" tab, "Project" group, and select "Description".
  2. Click the "Languages" tab. Our project will support English and French.
  3. Click "Add". The window for selecting languages is displayed.
    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.
    Note: Labels existing in the project's base language are automatically copied to the added language(s).
Step 2: Choice of 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. Display the data model editor: click on Load project analysis in WEBDEV's menu of quick access buttons.
  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. The new language appears in the list.

    To take into account all the languages of the project linked to the current analysis, click "Synchronize with the project".
  5. Validate the description window of the analysis.

Shared multilingual information

To enter shared information in several languages, let's look at a simple case: entering the label of the field linked 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. On the "General" tab, in the French caption, enter "Adresse".
  5. Validate the shared information window.
  6. Confirm changes in the description window of 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 account of changes made in the analysis, it is necessary to generate the analysis: under the "Analysis" ribbon pane, in the "Analysis" group, click on "Generation".
Close the data model editor (click the "X" icon of the analysis in the open document tabs).
Step 3: Multilingual management of project components
All project elements can become 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 in the English box with "List of products".
    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 the 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. Display the option description window: open the context menu and select "Option description".
  6. In the description window, enter the "List of products" option.
  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 on the keyboard: the label is edited.
  5. Enter the wording in English: "Product form".
  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. Switch back to French display mode: in the "Display" pane, in the "Options" group, pull down "Language displayed" and select "Français".
  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. It works as follows: click on a flag to see the site in the language corresponding to the flag clicked. 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 up to you In the same way, enter the following code in the button with the American 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. Test the page (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: Translation tools
We have manually translated some elements of the website.
However, several translation methods are available in WEBDEV:
  • direct translation of messages in different editors This is the feature we've just used to translate a few elements of our site. 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

The translations are typed in the product interface directly: this is the method that was used until now.
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 "WEBDEV general options".
  2. Go the "Translation" tab.
    General WEBDEV options
  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 Using Google Translate.
    • The supported languages.
  4. Once the translation parameters have been set, you can use the Language management button button in the various project element description windows to use the software defined for the translation.

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: 11/19/2024

Send a report | Local help