Tuto - Gérer le multilingue dans un site

• 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.

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é".

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.

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".
   

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.

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.

Ajout de langues dans l'analyse

1. Affichez l'éditeur d'analyses : cliquez sur 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. 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

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

• les libellés des champs de la page PAGE_Liste_des_produits.
• les options du menu.
• un message affiché par le code WLangage.

Prise en compte de la langue dans la page

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

Traduire les options du menu

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".
     
   • 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.

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 ( 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 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 libellé,
• une image, etc.

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).

Traduction des messages 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.
   
6. L'icône 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.

Boutons de changement de langue

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.

1. Fermez la fenêtre de code.
2. Enregistrez le modèle de pages ( ou Ctrl + S).
3. Mettez à jour les pages utilisant le modèle de pages en cliquant sur l'icône 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

1. Lancez le test de la page ( parmi les boutons d'accès rapide). La page apparaît en mode test en français.
   
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 :
   
4. Fermez le navigateur.

• 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

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

• 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.

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

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

• 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".