Modifica delle impostazioni internazionali dell’interfaccia utente di AEM Forms Workspace

Ultimo aggiornamento: 2023-05-04
  • Creato per:
  • User
ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Lo spazio di lavoro di AEM Forms supporta le lingue inglese, francese, tedesco e giapponese. Fornisce inoltre la possibilità di localizzare l’interfaccia utente di AEM Forms Workspace in qualsiasi altra lingua.

Per localizzare l’interfaccia utente di AEM Forms Workspace nella lingua desiderata:

  • Localizzare il testo dell’area di lavoro di AEM Forms.
  • Localizzare categorie, code e processi compressi.
  • Localizza selezione data

Prima di eseguire i passaggi precedenti, assicurati di seguire i passaggi elencati in Passaggi generici per la personalizzazione dell’area di lavoro AEM Forms.

NOTA

Per modificare la lingua della schermata di accesso di AEM Forms workspace, vedi Creazione di una nuova schermata di accesso.

Localizzazione del testo

Esegui i seguenti passaggi per aggiungere il supporto per una lingua Nuovo e il codice internazionale del browser nuovo.

  1. Accedi a CRXDE Lite.

    L’URL predefinito di CRXDE Lite è https://[server]:[port]/lc/crx/de/index.jsp.

  2. Passa alla posizione apps/ws/locales e crea una nuova cartella nw.

  3. Copia il file translation.jsondalla posizione /apps/ws/locales/en-US in posizione /apps/ws/locales/nw.

  4. Passa a /apps/ws/locales/nw e aperto translation.json per la modifica. Apporta modifiche specifiche alle impostazioni internazionali del file translation.json.

    Gli esempi seguenti contengono il file translation.json per le impostazioni internazionali inglese e francese dell'area di lavoro AEM Forms.

    translation_json_in_en translation_json_in_fr

Localizzazione di categorie, code e processi compressi

L’area di lavoro di AEM Forms utilizza immagini per visualizzare intestazioni di categorie, code e processi. Per localizzare queste intestazioni è necessario un pacchetto di sviluppo. Per informazioni dettagliate sulla creazione del pacchetto di sviluppo, vedi Creazione del codice dell’area di lavoro di AEM Forms.

Nei passaggi seguenti, si presume che i nuovi file di immagine localizzati siano Categories_nw.png, Queue_nw.png e Processes_nw.png. La larghezza consigliata delle immagini è 19 px.

NOTA

Per trovare il codice internazionale della lingua del browser. Apri https://[server]:[port]/lc/libs/ws/Locale.html.

comprimi_pannelli_immagine

Esegui i seguenti passaggi per localizzare le immagini:

  1. Utilizzando un client WebDAV, inserire i file di immagine nel /apps/ws/images cartella.

  2. Passa a /apps/ws/css. Apri newStyle.css per modificare e aggiungere le voci seguenti:

    #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. Esegui tutte le modifiche semantiche elencate nel Personalizzazione di Workspace articolo.

  4. Passa a js/runtime/utility e apri il file* usersession.js* per la modifica.

  5. Individua il codice elencato nel blocco di codice originale e aggiungi una condizione lang!== 'nw' all’istruzione if:

    // 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;
            }
        }
    

Localizzazione del selettore data

È necessario un pacchetto di sviluppo per localizzare l'API *datepicker *API. Per informazioni dettagliate sulla creazione del pacchetto di sviluppo, vedi Creazione del codice dell’area di lavoro di AEM Forms.

  1. Scarica ed estrai Pacchetto interfaccia utente jQuery, passa a <extracted jquery="" ui="" package="">\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.

  2. Copia il file jquery.ui.datepicker-nw.js per il codice internazionale ora in apps/ws/js/libs/jqueryui e apporta modifiche specifiche alle impostazioni internazionali del file.

  3. Passa a apps/ws/js e aprire jquery.ui.datepicker-nw.js file da modificare.

  4. Nel file main.js crea un alias per jquery.ui.datepicker-nw.js. Codice per creare un alias per il jquery.ui.datepicker-nw.js file:

    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
  5. Usa alias jqueryuidatepickernw per includere jquery.ui.datepicker-nw.js in tutti i file che utilizzano datepicker. Il datepicker viene utilizzato nei file seguenti:

    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js

    Il codice di esempio seguente mostra come aggiungere la voce di 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. In tutti i file che utilizzano l’API datepicker, modifica le impostazioni predefinite dell’API datepicker. L’API del datepicker viene utilizzata nei file seguenti:

    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js

    Modifica il codice seguente per aggiungere le nuove impostazioni internazionali:

    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['']);
    }
    

a

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['']);
}

In questa pagina