Tuto - Gérer le multilingue

Une application multilingue est une application qui peut s'exécuter en anglais, en français, en allemand, en espagnol ou dans une autre langue.

Imaginons que vous avez développé une application proposant une UI dans une langue (le français par exemple) et que vous devez la rendre multilingue pour gérer une autre langue (l'anglais par exemple).

• Le choix des langues gérées par le projet.
• Le choix des langues gérées par l'analyse.
• La mise en place du multilingue pour les différents éléments du projet (fenêtres, états, champs, aide, etc.).
• La mise en place du multilingue pour les messages présents dans le code.
• La programmation du changement de langue dans l'application.

1. Affichez la page d'accueil de WINDEV (Ctrl + <).
2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Application WINDEV : gérer des données", double-cliquez sur "Application complète - Corrigé".

La première opération consiste à définir les différentes langues gérées par le projet. Dans ce exemple, l'application sera proposée en français et en anglais.

1. Affichez la description du projet : sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description".
2. Cliquez sur l'onglet "Langues".
3. Cliquez sur le bouton "Ajouter". La fenêtre de sélection des langues apparaît.
   
4. Cliquez sur "Anglais". Une coche apparaît à droite de la langue.
5. Validez. La langue "Anglais" apparaît dans la liste des langues du projet.

1. Cliquez sur la langue "Anglais".
2. Sélectionnez l'onglet "Date".
3. Par défaut, les options linguistiques de Windows sont utilisées. Si vous sélectionnez l'option "Utiliser les paramètres suivants", il est possible de définir le format de date utilisé ainsi que la traduction des jours et des mois.
4. Conservez l'option "Utiliser les paramètres définis dans les options linguistiques du système d'exploitation".
   

Il ne reste plus qu'à appliquer nos modifications :

1. Validez la fenêtre de description du projet.
2. Un message propose de synchroniser les différents éléments du projet. Répondez "Oui".

Tous les éléments du projet ouverts sous l'éditeur (fenêtres, états, etc.) sont fermés et la ou les langues supplémentaires sont ajoutées à ces éléments.
Remarque : Les libellés existant dans la langue de base du projet sont automatiquement recopiés dans la ou les langues ajoutées.

Par défaut, une analyse est créée dans une langue et ne peut pas être traduite.Pourquoi traduire les informations présentes dans l'analyse ?
Les champs créés à partir des rubriques de l'analyse ont par défaut le libellé de la rubrique spécifié dans l'analyse. Si un libellé a été spécifié dans les informations partagées de la rubrique, ce libellé sera utilisé lors de la création du champ. Dans un projet multilingue, il est donc nécessaire de traduire cette information, afin de créer directement les champs avec des informations multilingues.

Ajout de langues dans l'analyse

Pour gérer plusieurs langues dans l'analyse de l'application WD Application Complète :

1. Affichez l'éditeur d'analyses : cliquez sur parmi les boutons d'accès rapide du menu de WINDEV.
2. Dans la description de l'analyse (option "Description de l'analyse" du menu contextuel), sélectionnez l'onglet "International".
3. La liste des différentes langues gérées par l'analyse s'affiche. L'anglais n'étant pas géré, il nous faut l'ajouter :
   • Cliquez sur le bouton "Ajouter".
   • Sélectionnez "Anglais".
   • Validez la fenêtre d'ajout des langues.
     
4. Validez la fenêtre de description de l'analyse.
   
   

   Pour prendre en compte toutes les langues du projet lié à l'analyse en cours, il est également possible de cliquer sur le bouton "Synchroniser avec le projet".

Informations partagées multilingues

Pour saisir les informations partagées dans plusieurs langues, examinons un cas simple : la saisie de libellé du champ lié à la rubrique "Adresse" du fichier de données "Client" :

1. Sélectionnez le fichier de données Client.
2. Affichez la description des rubriques d'un fichier de données (option "Description des rubriques" du menu contextuel du fichier de données).
3. Sélectionnez la rubrique "Adresse" et affichez les paramètres du champ relié à la rubrique sélectionnée (informations partagées). Pour cela, cliquez sur le lien en bas de l'écran. Les informations partagées sont affichées dans une nouvelle fenêtre.
4. Dans l'onglet "Général", dans la zone "Libellé', saisissez le libellé pour la langue anglaise "Address".
   
   
5. Validez la fenêtre de saisie des informations partagées.
6. Validez la fenêtre de description des rubriques.
   
   

   La traduction des informations partagées de l'analyse peut être faite :

   • en même temps que la création de l'analyse.
   • à tout moment via l'éditeur.
   • à tout moment grâce aux outils WDMSG et WDTRAD, deux outils permettant d'extraire, de traduire et de réintégrer les éléments à traduire. Ces deux outils seront présentés dans la suite de ce tuto.

Prise en compte des modifications

Pour prendre en compte les modifications réalisées dans l'analyse, il est nécessaire de générer l'analyse : sous le volet "Analyse" du ruban, dans le groupe "Analyse", cliquez sur "Génération".

Tous les éléments du projet peuvent devenir multilingues : fenêtres, états, aide, etc. Chacun de ces éléments peut contenir différents objets à traduire : champs, images, menus, messages de code, etc. Selon l'objet à traduire, la méthode utilisée peut être spécifique.

• l'image du bandeau utilisée dans la fenêtre FEN_Menu.
• les libellés des champs de la fenêtre FEN_Menu.
• les options du menu.
• le message affiché par le code WLangage lors de la fermeture de l'application.

1. Ouvrez la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur de projet", par exemple).
2. Affichez la description de la fenêtre (option "Description" du menu contextuel de la fenêtre).
3. Sélectionnez l'onglet "Langue" : les deux langues sélectionnées dans le projet apparaissent.
   
4. Validez la fenêtre de description.

Utiliser une image multilingue

Dans une application, certaines images peuvent être différentes en fonction de la langue utilisée. Pour changer l'image du bandeau utilisé dans la fenêtre FEN_Menu selon la langue d'exécution :

1. Ouvrez la fenêtre "FEN_Menu".
2. L'image du bandeau est contenue dans le modèle associé à la fenêtre. Il est donc nécessaire d'ouvrir le modèle de fenêtres associé :
   • Cliquez sur le champ "WD ApplicationComplète" et affichez le menu contextuel.
   • Sélectionnez l'option "Ouvrir le modèle".
     
   • Le modèle de fenêtres apparaît, entouré d'un cadre orange.
3. Affichez la fenêtre de description du bandeau :
   • Sélectionnez le champ "WD ApplicationComplète" et affichez le menu contextuel.
   • Sélectionnez l'option "Description".
4. Dans la zone "Image", cliquez sur le bouton .
   
5. Dans le menu contextuel qui s'affiche, sélectionnez "Multilingue".
6. La fenêtre de gestion des images multilingues s'affiche. Il est possible d'utiliser une image différente pour chaque langue. Cette fonctionnalité est très utile si vous utilisez des images contenant du texte.
   
7. Pour notre exemple, dans la zone "Anglais", sélectionnez le fichier "header-us.png" :
   • Cliquez sur l'icône .
   • Sélectionnez l'option "Parcourir".
   • Sélectionnez le fichier voulu.
8. Validez. Le libellé "<Valeur Multilingue>" apparaît désormais dans la zone "Image" de la fenêtre de description.
9. Validez la fenêtre de description du champ.
10. Enregistrez le modèle de fenêtres ( ou Ctrl + S).
11. Mettez à jour les fenêtres utilisant le modèle de fenêtres en cliquant sur l'icône dans le bandeau orange. Validez la fenêtre de mise à jour.
12. Fermez le modèle de fenêtres affiché sous l'éditeur.

Traduire les champs de l'application

Un champ peut afficher de nombreuses informations à l'utilisateur :

• un libellé,
• un message d'aide,
• une image, etc.

Toutes ces informations doivent être traduites. Ces informations sont accessibles dans les différents onglets de la fenêtre de description du champ.

1. Double-cliquez sur le champ Onglet pour afficher sa fenêtre de description.
2. Dans l'onglet "Général" de la fenêtre de description, sélectionnez le premier onglet "Liste des produits".
3. Dans la partie "Description d'un volet statique", effectuez les opérations suivantes :
   • saisissez la traduction du libellé du volet : "List of products".
   • définissez une image spécifique pour le volet d'onglet par langue (comme nous l'avons fait précédemment).
   • définissez une bulle d'aide par langue.
4. Fermez la fenêtre de description du champ.

Traduction des messages de programmation

Tous les messages affichés par le code WLangage de votre application peuvent également être saisis dans plusieurs langues. Dans notre exemple, la sélection du menu "Quitter" affiche le message "Quitter l'application". Nous allons traduire ce message.

1. Affichez le code de l'option de menu :
   • Sous l'éditeur déroulez le menu.
   • Sélectionnez l'option "Quitter".
   • Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".
     
     Dans ce code, la chaîne à traduire correspond à "Quitter l'application ?".
2. Positionnez le curseur dans la chaîne "Quitter l'application ?".
3. Utilisez la combinaison de touches Ctrl + T. La fenêtre suivante apparaît :
   
   Cette fenêtre permet de saisir tous les messages de votre programme dans toutes les langues du projet.
4. Dans la zone "Anglais", saisissez "Exit application?" et validez.

Traduction des menus et de leurs options

La traduction des options d'un menu peut être réalisée comme pour les autres champs via la fenêtre de description de l'option, ou directement à partir de l'éditeur de fenêtres. C'est cette dernière méthode que nous allons utiliser pour notre exemple.

1. Sous le volet "Affichage", dans le groupe "Options", déroulez "Langue affichée" et sélectionnez la langue à visualiser sous l'éditeur (anglais dans notre cas).
   Les options de menu s'affichent dans la langue sélectionnée. Si aucune traduction ne correspond à la langue sélectionnée, les options de menu s'affichent en français.
2. Déroulez l'option "Menu".
3. Sélectionnez l'option "Envoyer un email".
4. Tapez sur la touche Espace du clavier : le libellé passe en édition.
5. Saisissez le libellé en anglais : "Send an email" et validez.
6. Repassez la langue affichée en français : sous le volet "Affichage", dans le groupe "Options", déroulez "Langue affichée" et sélectionnez "Français".

Nous avons traduits différents éléments de notre fenêtre FEN_Menu. Maintenant, nous allons voir comment changer la langue de l'application.

Ajout d'une option de menu

Pour ajouter une option de menu :

1. Ouvrez si nécessaire la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur de projet").
2. Cliquez sur l'option "Menu" de la fenêtre. Le menu se déroule.
3. Sélectionnez l'option "Envoyer un email".
4. Affichez le menu contextuel (clic droit). Sélectionnez l'option "Ajouter une option après". Saisissez le libellé "Langues" et validez.
5. Sélectionnez l'option "Langues" que vous venez de créer.
6. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Transformer pour dérouler un sous-menu".
7. Saisissez le libellé de la première sous-option "Français".
8. Appuyez sur la touche Entrée deux fois et saisissez le libellé de la seconde option "Anglais".

Nous allons maintenant saisir le code WLangage nécessaire au changement de langue.

Programmation

Pour saisir le code de gestion des langues :

1. Sélectionnez l'option "Menu .. Langues .. Francais" sous l'éditeur.
2. Affichez le menu contextuel (clic droit). Sélectionnez l'option "Code".
3. Saisissez le code suivant :
   

   Nation(nationFrançais)

4. Enregistrez vos modifications et fermez l'éditeur de code.
5. Sélectionnez l'option "Menu .. Langues .. Anglais" sous l'éditeur.
6. Affichez le menu contextuel (clic droit). Sélectionnez l'option "Code".
7. Saisissez le code suivant :
   

   Nation(nationAnglais)

   La fonction Nation permet de changer la langue d'exécution de l'application. Les constantes passées en paramètre permettent de spécifier la langue à utiliser.
   Le changement de langue effectué par la fonction Nation est immédiatement effectif.
8. Enregistrez vos modifications et fermez l'éditeur de code.

Nous avons traduit quelques éléments de l'application, nous allons maintenant tester le changement de langue.

1. Lancez le test du projet ( parmi les boutons d'accès rapide). La fenêtre apparaît en mode test en français.
2. Sélectionnez l'option "Menu .. Langues .. Anglais".
3. Les différents éléments que nous avons modifiés dans notre application apparaissent en anglais :
   
   • l'image du modèle de la fenêtre.
   • le premier volet d'onglet.
4. Terminez le test en sélectionnant l'option "Menu .. Quitter". Le message s'affiche en anglais.
5. Validez et revenez sous l'éditeur.

Nous venons de traduire manuellement quelques éléments de notre application.

• une traduction directe des messages dans les différents éditeurs. Cette traduction peut être réalisée via un outil de traduction, Google Trad (sous réserve de posséder une licence), etc.
• une traduction réalisée grâce à un outil externe (WDMSG et WDTRAD).

Saisie directe des traductions

Les traductions sont directement saisies dans l'interface du produit. Par exemple, le libellé du bouton "Nouveau" devient "New" en anglais. Il suffit d'ouvrir la fenêtre de description du champ et de saisir dans la langue voulue la traduction correspondante.

1. Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options générales de WINDEV".
2. Affichez l'onglet "Traduction".
   
3. Spécifiez :
   • Si les paramètres régionaux doivent être automatiquement activés selon la langue en cours de saisie. Dans ce cas, si la langue nécessite un alphabet spécifique, cet alphabet sera automatiquement sélectionné.
   • Le logiciel ou le site à utiliser pour la traduction. Il est possible d'utiliser WDDIXIO, dictionnaire de traduction livré avec WDMSG (voir paragraphe suivant), un logiciel ou un site de traduction spécifique, ou Google Traduction.
     Pour plus de détails, consultez Traduction par Google Traduction.
   • Les langues gérées (par exemple "Français" en langue d'origine et "Anglais" en langue destination).
4. Validez.
5. Lorsque les paramètres de traductions sont définis, il est possible d'utiliser le bouton présent dans les différentes fenêtres de description des éléments du projet : ce bouton permettra d'utiliser le logiciel défini pour la traduction.

Traduction avec WDMSG et WDTRAD

Il existe également un outil nommé WDMSG (non fourni en standard avec WINDEV) qui permet :

• d'extraire tous les messages d'un projet (libellé des champs, message de code, titre des fenêtres, etc.) pour les traduire,
• de réintégrer les messages traduits.

Les messages à traduire sont extraits :

• dans un format texte pouvant être configuré pour être utilisé avec la majorité des logiciels de traduction.
• au format HFSQL.

WDMSG est également fourni avec WDTRAD, outil d'aide à la traduction. WDTRAD permet de saisir simplement toutes les traductions des informations multilingues d'un projet.

Autres éléments à traduire : les messages du framework

De nombreuses informations et messages sont présents dans le framework WINDEV. Par exemple, les noms des jours et des mois utilisés par les fonctions de gestion des dates proviennent du framework WINDEV. Pour traduire une ou plusieurs librairies de ce framework, il est nécessaire d'utiliser WDINT (non fourni en standard avec WINDEV).

• vous pouvez utiliser la fonction ChargeErreur.
• vous pouvez intégrer le fichier à la description du projet dans l'onglet "Langues". Il suffit de sélectionner la langue voulue et de sélectionner l'onglet "Divers".
  

Pour obtenir plus d'informations sur WDINT, contactez le Service Commercial de PC SOFT.