PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Qu'est-ce qu'un site multilingue ?
  • Choix des langues du projet
  • Internationalisation des éléments du projet
  • Internationalisation d'une image
  • Internationalisation du menu
  • Internationalisation des champs
  • Internationalisation d'un message de programmation
  • Les outils de traduction
  • Saisie directe des traductions
  • Traduction avec WDMSG et WDTRAD
  • Autres éléments à traduire : les messages du framework
  • Programmation du changement de langue
  • Ajout d'une option de menu
  • Programmation
  • Test du projet
Leçon 5.5. Gérer le multilingue
Ce que vous allez apprendre dans cette leçon
  • Qu'est-ce qu'un site multilingue ?
  • Etape par étape, création d'un site multilingue.

Durée estimée : 50 mn
Leçon précédenteSommaireLeçon suivante
Qu'est-ce qu'un site multilingue ?
Un site multilingue est un site qui propose une interface dans plusieurs langues : anglais, français, allemand ou une autre langue.
Un seul et même site créé avec WEBDEV peut proposer jusqu'à 64 langues différentes.
Nous allons manipuler un projet qui pourra s'exécuter en français ou en anglais, selon le choix de l'utilisateur.
Les principales étapes pour rendre un site multilingue sont :
  • Le choix des langues du projet.
  • L'internationalisation des éléments du projet (pages, états, champs, ...).
  • L'internationalisation des messages présents dans le code.
  • La programmation du changement de langue dans le site.
Nous allons appliquer ces différentes étapes au projet "Site_WEBDEV_Complet". Ce projet, disponible en Français, va être traduit en Anglais.

Corrigé

Si vous n'avez pas réalisé les manipulations des leçons précédentes, vous pouvez suivre cette leçon en ouvrant un projet corrigé : sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez "Site WEBDEV Complet (Avec pages)".
Choix des langues du projet
  • La première opération consiste à choisir les langues du projet.
    1. Affichez la description du projet : sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description".
    2. Cliquez sur l'onglet "Langues". Notre projet va gérer le Français et l'Anglais.
    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.
  • L'onglet "Langues" permet également de paramétrer les options linguistiques concernant les nombres, les monétaires, les dates, ... pour la langue sélectionnée. Voyons un exemple :
    1. Cliquez sur la langue "Anglais".
    2. Sélectionnez l'onglet "Date".
    3. Par défaut, des options linguistiques spécifiques sont utilisées : il est possible de définir le format de date utilisé ainsi que la traduction des jours et des mois. Si vous sélectionnez l'option "Utiliser les paramètres définis dans les options linguistiques du système d'exploitation", les paramètres utilisés en déploiement seront les paramètres du poste serveur et non les paramètres de l'utilisateur.
    4. Conservez l'option "Utiliser les paramètres suivants".

Note

Dans les options linguistiques, il est possible de choisir le sens d'écriture de la langue (onglet "Divers", option "Sens d'écriture"). Il est ainsi possible de créer des interfaces avec une langue s'écrivant de droite à gauche.
  • Validez. 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 (pages, états, ...) sont fermés et la ou les langues supplémentaires sont ajoutées à ces éléments.

Note

Des erreurs d'IHM sont susceptibles d'apparaître. Nous allons les ignorer pour le moment. Ces erreurs seront traitées plus loin dans ce cours.
Internationalisation des éléments du projet
Tous les éléments du projet peuvent devenir multilingues : pages, états, ... Nous allons modifier quelques éléments de la page "PAGE_Liste_des_produits" pour voir les différentes méthodes à utiliser. Nous allons ainsi voir comment modifier :
  • l'image du logo utilisée dans la page PAGE_Liste_des_produits.
  • les libellés des champs de la page PAGE_Liste_des_produits.
  • les options du menu.
  • un message affiché par le code WLangage.
  • Ouvrez la page "PAGE_Liste_des_produits" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur de projet" par exemple).
  • Si nécessaire, validez la mise à jour du modèle.
  • Vérifions tout d'abord que la page PAGE_Liste_des_produits est bien associée aux différentes langues définies dans le projet :
    1. Affichez la description de la page (option "Description" du menu contextuel de la page).
    2. Sélectionnez l'onglet "Langue" : les deux langues sélectionnées dans le projet apparaissent.
    3. Sélectionnez l'onglet "Général" : il faut traduire le titre de la page.
    4. Remplacez le texte présent dans la zone anglaise par "List of products".
    5. Validez la fenêtre.

Internationalisation d'une image

  • Pour changer l'image du logo utilisé dans la page PAGE_Liste_des_produits selon la langue d'exécution :
    1. Ouvrez la page "PAGE_Liste_des_produits" si nécessaire.
    2. L'image du logo est contenue dans le modèle associé à la page. Il est donc nécessaire d'ouvrir le modèle de pages associé :
      • Cliquez sur le logo et affichez le menu contextuel.
      • Sélectionnez l'option "Ouvrir le modèle".
      • Le modèle de pages apparaît, entouré d'un cadre orange.
    3. Affichez la fenêtre de description du logo (double-cliquez sur le champ).
    4. Dans l'onglet "Général", à droite de la zone "Image", cliquez sur le bouton . Dans le menu qui s'affiche, sélectionnez l'option "Multi-langues".
    5. La fenêtre de gestion des images multilingues s'affiche.
    6. Il est possible d'utiliser une image différente pour chaque langue :
      • Cliquez sur le bouton .
      • Dans le menu qui s'affiche, sélectionnez l'option "Parcourir".
      Cette fonctionnalité est très utile si vous utilisez des images contenant du texte. Dans notre cas, la même image est utilisée.
    7. Validez la fenêtre d'édition multi-langue.
    8. Refermez la fenêtre de description du champ.
  • Comme nous sommes dans le modèle de pages, nous allons également en profiter pour traduire l'option de menu "Liste des produits".

Internationalisation du menu

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 pages.
  • Pour notre exemple, nous allons traduire l'option de menu "Liste des produits".
    1. Sélectionnez puis cliquez sur le menu présent dans le modèle de pages.
    2. Le menu passe en édition et un cadre jaune apparaît.
    3. Sélectionnez l'option "Liste des produits".
    4. Affichez la fenêtre de description de l'option : affichez le menu contextuel et sélectionnez "Description de l'option".
    5. Dans la fenêtre de description, saisissez l'option en anglais : "List of products".
    6. Validez.
La traduction des options peut également être réalisée directement dans l'éditeur de pages.
  • Pour traduire l'option "Ajouter un produit" :
    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).
    2. 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.
    3. Sélectionnez l'option "Ajouter un produit".
    4. Tapez sur la touche Espace du clavier : le libellé passe en édition.
    5. Saisissez le libellé en anglais : "Add a product".
    6. Validez le libellé avec la touche Entrée.
    7. Utilisez la touche Echap pour sortir du mode édition.
    8. Enregistrez le modèle de pages ( ou Ctrl + S).
    9. Repassez en mode d'affichage français : sous le volet "Affichage", dans le groupe "Options", déroulez "Langue affichée" et sélectionnez "Français".
    10. Mettez à jour les pages utilisant le modèle de pages en cliquant sur l'icône dans le bandeau orange. Validez la fenêtre de mise à jour.
    11. Fermez le modèle de pages affiché sous l'éditeur.

Internationalisation des champs

Un champ peut afficher de nombreuses informations à l'utilisateur :
  • un libellé,
  • une image, ...
Toutes ces informations doivent être traduites. Ces informations sont accessibles dans les différents onglets de la fenêtre de description du champ.
  • Pour traduire le lien "Modifier" dans la page "PAGE_Liste_des_produits" :
    1. Sélectionnez le lien "Modifier".
    2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
    3. Saisissez le libellé en anglais : "Modify".
    4. Validez.
    5. Enregistrez la page ( ou Ctrl + S).

Internationalisation d'un message de programmation

Tous les messages de votre programme peuvent également être saisis dans plusieurs langues. Regardons comment traduire un message de programmation :
  1. Affichez l'éditeur de code (touche F2 sur la page "PAGE_Liste_des_produits").
  2. Dans le traitement "Déclarations globales", saisissez le code suivant :
    sMaChaîne est une chaîne = "Français"
  3. Pour traduire ce type de message, positionnez le curseur dans la chaîne "Français" et utilisez la combinaison de touches Ctrl + T. Il est également possible, sous le volet "Code", dans le groupe "Langues", de dérouler "Traduire les chaînes" et sélectionner "Traduction des messages".
  4. La fenêtre d'édition d'un message multilangue apparaît. Cette fenêtre permet de saisir tous les messages de votre programme dans toutes les langues du projet.
  5. Dans la zone "Anglais", saisissez "French" et validez.
  6. L'icône ainsi qu'un chiffre apparaissent sous l'éditeur de code. Ces icônes indiquent que le message multilingue existe en 2 langues.
  7. Fermez l'éditeur de code.
Les outils de traduction
Nous venons de traduire manuellement quelques éléments de notre application.
Pour traduire ces informations, WEBDEV met plusieurs moyens à votre disposition :
  • une traduction directe des messages dans les différents éditeurs : c'est cette fonctionnalité que nous venons d'utiliser pour traduire quelques éléments de notre site. Cette traduction peut éventuellement utiliser un outil de traduction, Google Traduction (sous réserve de posséder une licence), ...
  • une traduction "industrialisée" 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 : c'est la méthode que nous avons utilisée jusqu'à présent.
Si vous disposez d'un logiciel de traduction ou d'un site de traduction, vous pouvez configurer WEBDEV pour utiliser ce logiciel :
  1. Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options générales de WEBDEV".
  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.
  4. 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 optionnel WDMSG qui permet :
  • d'extraire tous les messages d'un projet (libellé des champs, message de code, titre des fenêtres, ...) 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 un outil d'aide à la traduction, WDTRAD. WDTRAD permet de saisir simplement toutes les traductions des informations multilingues d'un projet.
Pour obtenir plus d'informations sur WDMSG et WDTRAD, contactez le Service Commercial de PC SOFT.

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

De nombreuses informations et messages sont présents dans le framework WEBDEV. Par exemple, les noms des jours et des mois utilisés par les fonctions de gestion des dates proviennent du framework WEBDEV. Pour traduire une ou plusieurs librairies de ce framework, il est nécessaire d'utiliser WDINT (outil optionnel fourni avec WDMSG).
Ce logiciel permet d'obtenir un fichier d'extension WDM contenant toutes les traductions des librairies. Pour utiliser ce fichier dans votre application :
  • 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.
Programmation du changement de langue
Par défaut, le projet s'exécute dans la langue d'exécution définie pour le projet, dans l'onglet "Langues" de la description du projet (option "Description" sous le volet "Projet").
Dans un site, le choix de la langue peut s'effectuer via une option de menu. La fonction Nation utilisée dans le traitement associé à l'option de menu permet de changer la langue de l'application en cours d'exécution.

Ajout d'une option de menu

  • Pour ajouter une option de menu :
    1. Ouvrez si nécessaire la page "PAGE_Liste_des_produits" sous l'éditeur (double-cliquez sur son nom dans l'explorateur de projet).
    2. Cliquez sur le menu et sélectionnez l'option "Ouvrir le modèle" du menu contextuel.
    3. Dans le modèle de pages, sélectionnez puis cliquez sur "Option 3".
    4. Le menu passe en édition et un cadre jaune apparaît.
    5. Tapez sur la touche Espace du clavier : le libellé passe en édition.
    6. Saisissez le libellé "Langues" et validez.
    7. Sélectionnez l'option "Langues" que vous venez de créer.
    8. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Insérer un sous-menu".
    9. Appuyez sur la touche Entrée pour éditer le libellé.
    10. Saisissez le libellé de la première sous-option : "Français".
    11. Appuyez sur la touche Entrée.
    12. Appuyez sur la touche Espace et saisissez le libellé de la seconde sous-option : "Anglais".
  • Nous allons profiter d'être dans le modèle de pages pour supprimer les deux dernières options du menu :
    1. Sélectionnez l'option "Option 5". Affichez le menu contextuel de l'option et sélectionnez "Supprimer". L'option est supprimée.
    2. Répétez cette manipulation pour supprimer l'option 4.
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 "Langues .. Français" dans le modèle de pages affiché sous l'éditeur.
    2. Affichez le menu contextuel (clic droit). Sélectionnez l'option "Code".
    3. Saisissez le code suivant dans le code serveur de l'option de menu :
      Nation(nationFrançais)
      PageUtilise(PageCourante())
    4. Fermez la fenêtre de code.
    5. Sélectionnez l'option "Langues .. Anglais" dans le modèle de pages affiché sous l'éditeur.
    6. Affichez le menu contextuel (clic droit). Sélectionnez l'option "Code".
    7. Saisissez le code suivant :
      Nation(nationAnglais)
      PageUtilise(PageCourante())
      Dans ce code :
      • La fonction Nation permet de changer la langue d'exécution du site. Les constantes passées en paramètre permettent de spécifier la langue à utiliser.
      • La fonction PageUtilise permet de réafficher une page (dans notre cas, la page en cours) afin de prendre en compte le changement de langue.
    8. Fermez la fenêtre de code.
    9. Utilisez la touche Echap pour sortir du mode édition.
    10. Enregistrez le modèle de pages ( ou Ctrl + S).
    11. Mettez à jour les pages utilisant le modèle de pages en cliquant sur l'icône dans le bandeau orange. Validez la fenêtre de mise à jour.
    12. Fermez le modèle de pages affiché sous l'éditeur.

Test du projet

Nous avons traduit quelques éléments de l'application, nous allons maintenant tester le changement de langue.
  • Pour tester le site :
    1. Lancez le test du projet ( parmi les boutons d'accès rapide). La page apparaît en mode test en français.
    2. Sélectionnez l'option "Langues .. Anglais".
    3. Les différents éléments que nous avons traduits apparaissent en anglais :
    4. Fermez le navigateur
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire