Modifica delle impostazioni internazionali dell’interfaccia utente di AEM Forms Workspace changing-the-locale-of-aem-forms-workspace-user-interface
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.
Localizzazione del testo localizing-text
Esegui i seguenti passaggi per aggiungere il supporto per una lingua Nuovo e il codice internazionale del browser nuovo.
-
Accedi a CRXDE Lite.
L’URL predefinito di CRXDE Lite è
https://[server]:[port]/lc/crx/de/index.jsp
. -
Passa alla posizione
apps/ws/locales
e crea una nuova cartellanw.
-
Copia il file
translation.json
dalla posizione/apps/ws/locales/en-US
in posizione/apps/ws/locales/nw
. -
Passa a
/apps/ws/locales/nw
e apertotranslation.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.
Localizzazione di categorie, code e processi compressi localizing-collapsed-categories-queues-and-processes
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.
https://[server]:[port]/lc/libs/ws/Locale.html
.
Esegui i seguenti passaggi per localizzare le immagini:
-
Utilizzando un client WebDAV, inserire i file di immagine nel /apps/ws/images cartella.
-
Passa a /apps/ws/css. Apri newStyle.css per modificare e aggiungere le voci seguenti:
code language-none #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; }
-
Esegui tutte le modifiche semantiche elencate nel Personalizzazione di Workspace articolo.
-
Passa a js/runtime/utility e apri il file* usersession.js* per la modifica.
-
Individua il codice elencato nel blocco di codice originale e aggiungi una condizione lang!== 'nw' all’istruzione if:
code language-none // 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; } }
code language-none //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 localizing-date-picker
È 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.
-
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.
-
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.
-
Passa a
apps/ws/js
e aprirejquery.ui.datepicker-nw.js
file da modificare. -
Nel file main.js crea un alias per
jquery.ui.datepicker-nw.js.
Codice per creare un alias per iljquery.ui.datepicker-nw.js
file:code language-none jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
-
Usa alias
jqueryuidatepickernw
per includerejquery.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:
code language-none //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 language-none // 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) {
-
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:
code language-none 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['']);
}