Ajout des paramètres régionaux pour les formulaires adaptatifs sur la base des composants principaux supporting-new-locales-for-adaptive-forms-localization

Sélecteur de paramètre régional d’URL ([paramètre régional]) :

Le système donne la priorité au paramètre régional spécifié dans l’URL à l’aide du sélecteur [locale]. Ce format permet la mise en cache pour de meilleures performances.

Format : l’URL suit ce format : http:/[URL du serveur AEM Forms]/content/forms/af/[afName].[locale].html?wcmmode=disabled.

Exemple : https://[server]/content/forms/af/contact-us.hi.html effectue le rendu du formulaire en hindi.

afAcceptLang, paramètre de requête :

Pour remplacer les paramètres régionaux du navigateur de l’utilisateur, vous pouvez utiliser le paramètre afAcceptLang dans l’URL.

Exemple : https://[server]/forms/af/survey.ca-fr.html?afAcceptLang=ca-fr force le rendu du formulaire en français canadien.

Paramètres régionaux du navigateur de l’utilisateur (en-tête Accept-Language) :

Si aucun autre paramètre régional n’est spécifié, AEM Forms prend en compte les paramètres régionaux du navigateur de l’utilisateur envoyés à l’aide de l’en-tête Accept-Language.

Ouvrez la ligne de commande ou la fenêtre du terminal.

Accédez à l’emplacement souhaité sur votre ordinateur, où vous souhaitez stocker le référentiel (par exemple, /adaptive-forms-core-components).

Exécutez la commande suivante pour cloner le référentiel :

git clone https://github.com/adobe/aem-core-forms-components.git

Cette commande télécharge le référentiel et crée un dossier nommé aem-core-forms-components sur votre ordinateur. Tout au long de ce guide, nous nous référons à ce dossier sous le nom de [Adaptive Forms Core Components repository].

Ouvrez la ligne de commande et sélectionnez un répertoire pour stocker votre référentiel AEM as a Cloud Service, tel que /cloud-service-repository/.

Exécutez la commande ci-dessous pour cloner le référentiel :

git clone https://git.cloudmanager.adobe.com/<organization-name>/<program id>/

Pour cloner votre référentiel Git, vous avez besoin de certaines informations :

• Nom de l’organisation : identifie votre équipe ou votre projet dans Adobe Experience Manager as a Cloud Service (AEM as a Cloud Service).

• ID du programme : il s’agit du programme associé à votre référentiel.

• Informations d’identification : vous avez besoin d’un nom d’utilisateur et d’un mot de passe (ou d’un jeton d’accès personnel) pour accéder au référentiel en toute sécurité.

Où trouver ces informations ?

Pour obtenir des instructions détaillées sur la localisation de ces détails, reportez-vous à l’article Adobe Experience League « Accès à Git ».

Votre projet est prêt !

Une fois la commande terminée, un nouveau dossier est créé dans votre répertoire local. Ce dossier porte le nom de votre programme (par exemple, program-id). Ce dossier contient tous les fichiers et le code téléchargés à partir de votre référentiel Git AEM as a Cloud Service.

Tout au long de ce guide, nous nous référons à ce dossier sous le nom de [AEMaaCS project directory].

Ouvrez le dossier du référentiel dans un éditeur.

Recherchez le fichier Guide Localization Service.cfg.json. Ce fichier contrôle les paramètres régionaux pris en charge par votre application AEM Forms. Vous pouvez modifier ce fichier pour ajouter un nouveau paramètre régional.

• Fichier existant : si le fichier existe déjà, localisez-le dans votre répertoire de projet AEM Forms. L’emplacement type est :

  code language-shell
  [AEMaaCS project directory]/ui.config/src/main/content/jcr_root/apps/<appid>/osgiconfig/config`.

  Remplacez <appid> par l’ID d’application spécifique à votre projet. Le <appid> de votre projet AEM se trouve dans le fichier archetype.properties.

  

• Nouveau fichier : si le fichier n'existe pas, vous devez le créer au même emplacement que celui mentionné ci-dessus. Ne copiez pas et ne collez pas le nom du fichier à partir de ce document, mais saisissez-le manuellement. Le nom du fichier Guide Localization Service.cfg.json comprend des espaces. Il s’agit d’une intention et non d’une faute de frappe dans la documentation.

  Voici un exemple de fichier avec la liste des paramètres régionaux pris en charge par l’usine :

  code language-none
  { "supportedLocales":[ "en", "fr", "de", "ja", "pt-br", "zh-cn", "zh-tw", "ko-kr", "it", "es" ] }

Ajoutez au fichier le code de paramètre régional correspondant à la langue souhaitée.

1. Utilisez la Liste des codes ISO 639-1 pour trouver le code à deux lettres représentant la langue souhaitée.

2. Incluez le code de paramètre régional dans le fichier Guide Localization Service.cfg.json. Voici quelques exemples :

   • Langues de gauche à droite :

     • Anglais (États-Unis) : en-US
     • Espagnol (Espagne) : es-ES
     • Français (France) : fr-FR

   • Langues écrites de droite à gauche :

     • Arabe (Émirats arabes unis) : ar-ae
     • Hébreu : il (ou est pour référence historique)
     • Farsi : fa

Après avoir apporté des modifications, assurez-vous que le fichier Guide Localization Service.cfg.json est correctement formaté en tant que fichier JSON valide. Des erreurs de formatage JSON peuvent empêcher le système de fonctionner correctement. Enregistrez le fichier.

Recherchez l’exemple de bibliothèque cliente :

Dans votre copie locale du [référentiel des composants principaux de Forms adaptatif], accédez au chemin suivant :

    /aem-core-forms-components/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs

Copiez et collez la bibliothèque :

1. Copiez le dossier clientlib-it-custom-locale.

   

2. Accédez au répertoire suivant dans votre [répertoire de projet AEMaaCS] :

   code language-none
   /ui.apps/src/main/content/jcr_root/apps/<app-id>/clientlib

   Important : remplacez <app-id> par l’ID réel de votre application.

3. Collez le dossier clientlib-it-custom-locale copié dans ce répertoire.

   

Mettre à jour aemLangUrl chemin dans languageinit.js

1. Accédez au répertoire suivant dans votre [répertoire de projet AEMaaCS] :

   code language-none
   /ui.apps/src/main/content/jcr_root/apps/<app-id>/clientlib/clientlib-it-custom-locale/js

2. Ouvrez le fichier languageinit.js dans l’éditeur.

3. Recherchez la ligne suivante dans le fichier languageinit.js :

   const aemLangUrl = /etc.clientlibs/forms-core-components-it/clientlibs/clientlib-it-custom-locale/resources/i18n/${lang}.json;

4. Remplacez forms-core-components-it par votre <app-id> (ID réel de votre application) dans la ligne ci-dessus.

   const aemLangUrl = '/etc.clientlibs/<app-id>/clientlibs/clientlib-it-custom-locale/resources/i18n/${lang}.json';

   

Accédez au répertoire des paramètres régionaux :

Dans votre [AEMaaCS project directory], accédez au chemin suivant :

    /ui.apps/src/main/content/jcr_root/apps/<program-id>/clientlibs/clientlib-it-custom-locale/resources/i18n/

Important : remplacez <program-id> par votre ID d’application réel.

Recherchez l’exemple de fichier de langue anglaise :

AEM Forms fournit un exemple de fichier de paramètres régionaux d’anglais (.json) sur GitHub.

Le fichier de langue anglaise inclut l’ensemble par défaut de chaînes à titre de référence. Votre fichier spécifique aux paramètres régionaux doit imiter la structure du fichier de langue anglaise.

Pour des langues comme l’arabe, l’hébreu et le farsi, le texte se lit de droite à gauche (RTL) au lieu de gauche à droite (LTR) comme l’anglais. Pour que vos formulaires s’affichent correctement dans ces langues, nous vous recommandons d’utiliser nos exemples de fichiers de paramètres régionaux comme guide. Ces fichiers fournissent une référence pour le format du texte, des dates et d’autres éléments pour les langues de RTL. Vous trouverez des exemples de fichiers de paramètres régionaux pour :

• Arabe
• Hébreu
• farsi

En utilisant ces fichiers d’exemple, vous pouvez vous assurer que vos formulaires offrent une expérience transparente aux utilisateurs qui travaillent dans des langues de RTL.

Créez votre fichier de paramètres régionaux :

1. Créez un fichier .json dans le répertoire i18n.
2. Nommez le fichier à l’aide du code de paramètre régional approprié à la langue souhaitée (par exemple, fr-FR.json pour le français et ar-ae.json pour l’arabe). La structure de ce fichier doit refléter le fichier de paramètres régionaux anglais.

Structure et traduction :

1. Ouvrez le fichier nouvellement créé dans un éditeur de texte.

2. Remplacez les valeurs de l’anglais par les traductions correspondantes pour votre langue cible.

3. Une fois que vous avez terminé de traduire les chaînes, enregistrez le fichier.

Recherchez le dossier de configuration :

Accédez au répertoire suivant dans votre [répertoire de projet AEMaaCS] :

/ui.content/src/main/content/jcr_root/etc

Créez les dossiers nécessaires (s’ils sont manquants) :

Si le dossier etc n’existe pas dans jcr_root dossier, créez-le. Dans etc, créez un autre dossier nommé languages s’il n’est pas présent.

Créez le fichier de configuration des paramètres régionaux :

Dans le dossier languages, créez un fichier nommé .content.xml. Ne copiez pas et ne collez pas le nom du fichier à partir de ce document, mais saisissez-le manuellement.

Ouvrez ce fichier et collez le contenu suivant, en remplaçant [LOCALE_CODE] par le code de paramètre régional réel (par exemple, ar-ae pour l’arabe).

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
      jcr:primaryType="nt:unstructured"
      languages="[de,es,fr,it,pt-br,zh-cn,zh-tw,ja,ko-kr,hi]"/>

AVERTISSEMENT : ne pas remplacer la liste existante. Au lieu de cela, ajoutez votre nouveau code de paramètre régional entre crochets, séparés par des virgules, comme suit (en utilisant ar-ae comme exemple) :

languages="[de,es,fr,it,pt-br,zh-cn,zh-tw,ja,ko-kr,hi,ar-ae]"

Incluez les nouveaux dossiers dans filter.xml :

Accédez au fichier /ui.content/src/main/content/meta-inf/vault/filter.xml dans votre [répertoire de projet AEMaaCS].

Ouvrez le fichier et ajoutez la ligne suivante à la fin :

<filter root="/etc/languages"/>

Enregistrez le fichier.