Show Menu
SUJETS×

Modification des paramètres régionaux de l’interface utilisateur de l’espace de travail AEM Forms

L’espace de travail AEM Forms fournit une prise en charge immédiate des langues allemande, anglaise, française et japonaise. Il permet également de localiser l’interface utilisateur de l’espace de travail AEM Forms dans n’importe quelle autre langue.
Pour localiser l’interface utilisateur de l’espace de travail AEM Forms dans la langue de votre choix :
  • Localisez le texte de l’espace de travail AEM Forms.
  • Localisez les catégories réduites, les files d’attente et les processus.
  • Localisez le sélecteur de date.
Before performing above steps, ensure that you follow the steps listed at Generic steps for AEM Forms workspace customization .
Pour modifier la langue de l’écran de connexion de l’espace de travail AEM Forms, voir Création d’un nouvel écran de connexion .

Localisation du texte

Perform the following steps to add support for a language New and the browser locale code nw .
  1. Connectez-vous à CRXDE Lite.
    L’URL par défaut de CRXDE Lite est https://[server]:[port]/lc/crx/de/index.jsp .
  2. Navigate to the location apps/ws/locales and create a new folder nw.
  3. Copiez le fichier translation.json de l’emplacement /apps/ws/locales/en-US vers /apps/ws/locales/nw l’emplacement.
  4. Navigate to /apps/ws/locales/nw and open translation.json for editing. Effectuez des modifications spécifiques aux paramètres régionaux dans le fichier translation.json.
    Les exemples suivants contiennent le fichier translation.json pour les environnements locaux en anglais et en français de l’espace de travail AEM Forms.

Localisation des catégories réduites, des files d’attente et des processus

L’espace de travail AEM Forms utilise des images pour afficher les en-têtes des catégories, des files d’attente et des processus. Vous avez besoin d’un progiciel de développement pour localiser ces en-têtes. For detailed information about creating development package, see Building AEM Forms workspace code.
Dans les étapes suivantes, on considère que les nouveaux fichiers image localisés sont Categories_nw.png , Queue_nw.png et Processes_nw.png . La largeur recommandée des images est de 19 px.
Pour trouver le code de paramètres régionaux de la langue du navigateur de votre navigateur. Ouvrez https://[server]:[port]/lc/libs/ws/Locale.html .
Effectuez les étapes suivantes pour localiser les images :
  1. A l’aide d’un client WebDAV, placez les fichiers images dans le dossier /apps/ws/images .
  2. Naviguez jusqu’à​ /apps/ws/css . Ouvrez newStyle.css pour le modifier et ajoutez les entrées suivantes :
    #categoryListBar .content.nw {
         background: #3e3e3e url(../images/Categories_nw.png) no-repeat 10px 10px;
     }
    
    #filterListBar .content.nw {
        background: #3e3e3e url(../images/Queues_nw.png) no-repeat 10px 10px;
    }
    
    #processNameListBar .content.nw {
        background: #3e3e3e url(../images/Processes_nw.png) no-repeat 10px 10px;
    }
    
    
  3. Perform all the semantic changes listed in the Workspace Customization article.
  4. Navigate to the js/runtime/utility folder and open the* usersession.js* file for editing.
  5. Recherchez le code figurant dans le bloc de code original et ajoutez la condition lang !== 'nw' to the if statement:
    // Orignal code
    setLocale = function () {
            var lang = $.trim(i18n.lng());
            if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP')) {
                window.lcWorkspace.locale = 'en-US';
            } else {
                window.lcWorkspace.locale = lang;
            }
        }
    
    
    //new code
     setLocale = function () {
            var lang = $.trim(i18n.lng());
            if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP' && lang !== 'nw')) {
                window.lcWorkspace.locale = 'en-US';
            } else {
                window.lcWorkspace.locale = lang;
            }
        }
    
    

Localisation du sélecteur de date

Vous avez besoin du paquet de développement pour localiser l’*API du datepicker *API. For detailed information about creating development package, see Building AEM Forms workspace code .
  1. Téléchargez et ouvrez le progiciel d’interface utilisateur jQuery , naviguez jusqu’à <progiciel d’interface utilisateur jQuery extrait> \jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.
  2. Copiez le fichier jquery.ui.datepicker-nw.js du nouveau code de paramètres régionaux dans apps/ws/js/libs/jqueryui et apportez les modifications propres aux paramètres locaux dans le fichier.
  3. Navigate to apps/ws/js and open the jquery.ui.datepicker-nw.js file for editing.
  4. Dans le fichier main.js, créez un alias pour jquery.ui.datepicker-nw.js. Le code permettant de créer un alias pour le jquery.ui.datepicker-nw.js fichier est :
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
    
  5. Use alias jqueryuidatepickernw to include the jquery.ui.datepicker-nw.js file in all the files that use datepicker. L’API datepicker est utilisée dans les fichiers suivants :
    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js
    L’exemple de code ci-dessous indique comment ajouter l’entrée de jquery.ui.datepicker-nw.js :
    //Original Code
    define([
        'jquery',
        'underscore',
        'backbone',
        'jqueryui',
        'jqueryuidatepickerja',
        'jqueryuidatepickerde',
        'jqueryuidatepickerfr',
        'slimscroll',
        'usersearchview',
        'logmanagerutil',
        'loggerutil'
    ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, slimScroll, UserSearch, LogManager, Logger) {
    
    
    // Code with Date Picker alias for new language
    define([
        'jquery',
        'underscore',
        'backbone',
        'jqueryui',
        'jqueryuidatepickerja',
        'jqueryuidatepickerde',
        'jqueryuidatepickerfr',
        'jqueryuidatepickernw', // Date Picker alias
        'slimscroll',
        'usersearchview',
        'logmanagerutil',
        'loggerutil'
    ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, jQueryUIDatePickerNW, slimScroll, UserSearch, LogManager, Logger) {
    
    
  6. Dans tous les fichiers qui utilisent l’API datepicker, modifiez la valeur par défaut de l’API datepicker. L’API datepicker est utilisée dans les fichiers suivants :
    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js
    Modifiez le code suivant pour ajouter les nouveaux paramètres régionaux :
    if (locale === 'ja-JP') {
       $.datepicker.setDefaults($.datepicker.regional.ja);
    } else if (locale === 'de-DE') {
       $.datepicker.setDefaults($.datepicker.regional.de);
    } else if (locale === 'fr-FR') {
       $.datepicker.setDefaults($.datepicker.regional.fr);
    } else {
       $.datepicker.setDefaults($.datepicker.regional['']);
    }
    
    
vers
if (locale === 'ja-JP') {
    $.datepicker.setDefaults($.datepicker.regional.ja);
} else if (locale === 'de-DE') {
    $.datepicker.setDefaults($.datepicker.regional.de);
} else if (locale === 'fr-FR') {
    $.datepicker.setDefaults($.datepicker.regional.fr);
} else if (locale === 'nw') {
    $.datepicker.setDefaults($.datepicker.regional.nw);
} else {
    $.datepicker.setDefaults($.datepicker.regional['']);
}