DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WEBDEV / Tuto - Gérer le multilingue dans un site
  • Transformer un site en site multilingue
  • Qu'est-ce qu'un site multilingue ?
  • Exemple pratique : intégrer le multilingue dans un site
  • Etape 1 : Choix des langues du projet
  • Etape 2 : Choix des langues dans l'analyse
  • Ajout de langues dans l'analyse
  • Informations partagées multilingues
  • Prise en compte des modifications
  • Etape 3 : Gestion du multilingue pour les différents éléments du projet
  • Prise en compte de la langue dans la page
  • Traduire les options du menu
  • Traduire les champs du site
  • Traduction des messages de programmation
  • Programmation du changement de langue
  • Boutons de changement de langue
  • Test de la page
  • Pour aller plus loin : Les outils de traduction
  • Saisie directe des traductions avec un logiciel de traduction
  • Traduction avec WDMSG et WDTRAD
  • Autres éléments à traduire : les messages du framework

Tuto - Gérer le multilingue dans un site

Transformer un site en site multilingue
Ce que vous allez apprendre :
  • Qu'est-ce qu'un site multilingue ?
  • Etape par étape, création d'un site multilingue.
Durée de la leçon 50 mn
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.
Exemple pratique : intégrer le multilingue dans un site
Imaginons que vous avez développé un site 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).
Ce changement doit suivre différents étapes, dans un ordre bien précis. En effet, la première étape est d'indiquer que le projet gère plusieurs langues. Si cette étape n'est pas réalisée, votre site ne pourra pas être multilingue.
Voyons les principales étapes pour transformer un site WEBDEV en site multilingue. Ces étapes sont les suivantes :
  • 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 (pages, états, champs, etc.).
  • La mise en place du multilingue pour les messages présents dans le code.
  • La programmation du changement de langue dans le site.
Pour effectuer ces manipulations sur un exemple simple, nous allons utiliser le projet "Site_WEBDEV_Complet". Ce projet, disponible en Français, va être traduit en Anglais.
Ouverture du projet exemple
  1. Affichez la page d'accueil de WINDEV (Ctrl + <).
  2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Créer un site WEBDEV (Back Office et Front Office)", double-cliquez sur "Site WEBDEV Complet - Corrigé".
Etape 1 : 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.
    Ajout d'une langue dans le projet
  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.
Le même onglet "Langues" permet également de paramétrer les options linguistiques concernant par exemple 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, 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.
    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".
    Description du projet
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 UI avec une langue s'écrivant de droite à gauche.
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 (pages, é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.
Etape 2 : Choix des langues dans l'analyse
Par défaut, une analyse est créée dans une langue et ne peut pas être traduite.
Cependant, certaines informations peuvent être saisies dans plusieurs langues (notes du dossier, informations partagées, etc.).
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.
Le changement de la langue du projet lié à l'analyse n'est pas automatiquement reporté dans l'analyse car une analyse peut être partagée entre plusieurs projets.

Maintenant, passons à la pratique ! Nous allons tout d'abord ajouter les langues dans l'analyse puis saisir les informations partagées dans plusieurs langues.

Ajout de langues dans l'analyse

Pour gérer plusieurs langues dans l'analyse du projet "Site_WEBDEV_Complet" :
  1. Affichez l'éditeur d'analyses : cliquez sur Charger l'analyse du projet parmi les boutons d'accès rapide du menu de WEBDEV.
  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. La nouvelle langue apparaît dans la liste.

    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".
  5. Validez la fenêtre de description de l'analyse.

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".
Fermez l'éditeur d'analyses (cliquez sur la croix de l'onglet correspondant à l'analyse dans la barre des documents ouverts).
Etape 3 : Gestion du multilingue pour les différents éléments du projet
Tous les éléments du projet peuvent devenir multilingues : pages, états, etc.
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 :
  • 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.

Prise en compte de la langue dans la page

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". Dans la zone "Titre", nous pouvons voir que le titre spécifié en français a été automatiquement copié dans la langue que nous avons ajoutée.
    Par défaut, lors de l'ajout d'une langue dans un projet, tous les libellés sont automatiquement créés avec le contenu de la langue existante. Cela évite d'avoir des textes "vides" en attendant la traduction des différents textes.
  4. Traduisons le titre de la page : remplacez le texte présent dans la zone anglaise par "List of products".
    Description de la page
  5. Validez la fenêtre de description.

Traduire les options 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. Le menu est contenu dans le modèle associé à la page. Il est donc nécessaire d'ouvrir le modèle de pages associé :
    • Cliquez sur le menu et affichez le menu contextuel.
    • Sélectionnez l'option "Ouvrir le modèle".
      Menu permettant d'ouvrir le modèle
    • Le modèle de pages apparaît, entouré d'un cadre coloré.
  2. Sélectionnez le menu présent dans le modèle de pages et appuyez sur la touche Espace du clavier.
  3. Le menu passe en édition et un cadre jaune apparaît.
  4. Sélectionnez l'option "Liste des produits".
  5. Affichez la fenêtre de description de l'option : affichez le menu contextuel et sélectionnez "Description de l'option".
  6. Dans la fenêtre de description, saisissez l'option en anglais : "List of products".
  7. Validez.
La traduction des options peut également être réalisée directement dans l'éditeur de pages. Pour traduire l'option "Fiche produit", nous allons donc utiliser cette méthode :
  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 "Fiche produit".
  4. Tapez sur la touche Espace du clavier : le libellé passe en édition.
  5. Saisissez le libellé en anglais : "Product form".
  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 (Enregistrer l'élément 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 Propager les modifications du modèle de pages dans le bandeau du modèle. Validez la fenêtre de mise à jour.
  11. Fermez le modèle de pages affiché sous l'éditeur.

Traduire les champs du site

Un champ peut afficher de nombreuses informations à l'utilisateur :
  • un libellé,
  • 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.
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 (Enregistrer l'élément ou Ctrl + S).

Traduction des messages 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 l'événement "Déclarations globales", saisissez le code suivant :
    Déclarations globales (serveur)
    MaChaîne est une chaîne = "Liste des produits"
  3. Pour traduire ce type de message, positionnez le curseur dans la chaîne "Liste des produits" 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 multilingue 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 "List of products" et validez.
    Message multilingue
  6. L'icône Multilingue apparaît sous l'éditeur de code. Cette icône indique que le message multilingue existe dans plusieurs langues. Un survol de cette icône permet de visualiser rapidement les différentes traductions.
  7. Fermez l'éditeur de code.
Programmation du changement de langue
Nous avons traduit différents éléments de notre page "PAGE_Liste_des_produits". Maintenant, nous allons voir comment changer la langue du site.
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, plusieurs méthodes peuvent être utilisées pour sélectionner la langue à utiliser. La plus courante est la présence d'une option de menu (ou d'un bouton "Langue"). La fonction Nation utilisée dans le code associé à l'option de menu permet de changer la langue de l'application en cours d'exécution.
Dans notre exemple, le modèle de pages présente déjà 2 drapeaux destinés à changer de langue. Nous allons les utiliser. Le fonctionnement est le suivant : il suffit de cliquer sur un drapeau pour voir le site dans la langue correspondant au drapeau cliqué. Par exemple, un clic sur le drapeau américain affiche le site en langue anglaise.
Pour cela, deux champs Bouton ont été créés dans le modèle (un pour chaque langue).

Boutons de changement de langue

Les boutons de changement de langue sont présents dans le modèle de la page PAGE_Liste_des_produits.
  1. Ouvrez si nécessaire la page "PAGE_Liste_des_produits" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur de projet").
  2. Cliquez sur le champ Bouton avec le drapeau Français et sélectionnez l'option "Ouvrir le modèle" du menu contextuel.
  3. Dans le modèle de pages, sélectionnez le champ. Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".
  4. Saisissez le code suivant dans le code serveur de l'option de menu :
    Clic sur BTN_Français (DISP_Langue) (serveur)
    Nation(nationFrançais)
    PageUtilise(PageCourante())
    Etudions ce code rapidement :
    • 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.
A vous de jouer : De la même manière, saisissez le code suivant dans le bouton avec le drapeau américain :
Clic sur BTN_English (DISP_Langue) (serveur)
Nation(nationAnglais)
PageUtilise(PageCourante())

Nous avons fini les modifications dans le modèle de pages :
  1. Fermez la fenêtre de code.
  2. Enregistrez le modèle de pages (Enregistrer l'élément ou Ctrl + S).
  3. Mettez à jour les pages utilisant le modèle de pages en cliquant sur l'icône Mettre à jour les pages dans le bandeau du modèle. Validez la fenêtre de mise à jour.
  4. Fermez le modèle de pages affiché sous l'éditeur.

Test de la page

Nous avons traduit quelques éléments de l'application, nous allons maintenant tester le changement de langue.
Pour tester le changement de langue dans la page PAGE_Liste_des_produits :
  1. Lancez le test de la page (Tester le projet parmi les boutons d'accès rapide). La page apparaît en mode test en français.
    Test du projet multilingue
  2. Cliquez sur le drapeau Américain en bas de la page.
  3. Les différents éléments que nous avons traduits apparaissent en anglais :
    Test du projet multilingue
  4. Fermez le navigateur.
Pour aller plus loin : Les outils de traduction
Nous venons de traduire manuellement quelques éléments de notre site.
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), etc.
  • une traduction "industrialisée" réalisée grâce à un outil externe (WDMSG et WDTRAD).

Saisie directe des traductions avec un logiciel de traduction

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".
    Options générales de WEBDEV
  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 Bouton de gestion des langues 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, 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.
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 cliquer sur l'onglet "Divers".
    Onglet 'Divers' de la description de projet
Pour obtenir plus d'informations sur WDINT, contactez le Service Commercial de PC SOFT.
Sommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 04/07/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale