Ändern des Gebietsschemas der Benutzeroberfläche von AEM Forms Workspace changing-the-locale-of-aem-forms-workspace-user-interface
AEM Forms Workspace unterstützt standardmäßig die Sprachen Englisch, Französisch, Deutsch und Japanisch. Darüber hinaus besteht die Möglichkeit, die AEM Forms Workspace-Benutzeroberfläche in einer beliebigen anderen Sprache zu lokalisieren.
So lokalisieren Sie die AEM Forms Workspace-Benutzeroberfläche in einer Sprache Ihrer Wahl:
- Lokalisieren Sie den Text des AEM Forms-Arbeitsbereichs.
- Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen
- Datumsauswahl lokalisieren
Bevor Sie die obengenannten Schritte ausführen, achten Sie darauf, die hier aufgeführten Schritte durchzuführen: Generische Schritte zur Anpassung von AEM Forms Workspace.
Lokalisieren von Text localizing-text
Führen Sie die folgenden Schritte aus, um Unterstützung für eine Sprache Neu und den Browser-Gebietsschema-Code nw hinzuzufügen.
-
Melden Sie sich bei CRXDE Lite an.
Die Standard-URL von CRXDE Lite lautet
https://[server]:[port]/lc/crx/de/index.jsp
. -
Navigieren Sie zum Speicherort
apps/ws/locales
und erstellen Sie einen neuen Ordnernw.
-
Kopieren Sie die Datei
translation.json
vom Speicherort/apps/ws/locales/en-US
zum Speicherort/apps/ws/locales/nw
. -
Navigieren Sie zu
/apps/ws/locales/nw
und öffnen Sietranslation.json
zur Bearbeitung. Nehmen Sie gebietsschemaspezifische Änderungen an der Datei translation.json vor.Die folgenden Beispiele enthalten die Datei translation.json für die englischen und französischen Gebietsschemata von AEM Forms Workspace.
Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen localizing-collapsed-categories-queues-and-processes
AEM Forms Workspace verwendet Bilder, um Kopfzeilen von Kategorien, Warteschlangen und Prozessen anzuzeigen. Sie benötigen das Entwicklungspaket um diese Kopfzeilen zu lokalisieren. Ausführliche Informationen zum Erstellen des Entwicklungspakets finden Sie unter AEM Forms Workspace-Code erstellen.
In den folgenden Schritten wird davon ausgegangen, dass es sich bei den neuen lokalisierten Bilddateien um Categories_nw.png, Queue_nw.png und Processes_nw.png handelt. Die empfohlene Breite der Bilder ist 19 px.
https://[server]:[port]/lc/libs/ws/Locale.html
.
Führen Sie die folgenden Schritte aus, um die Bilder zu lokalisieren:
-
Platzieren Sie die Bilddateien mithilfe eines WebDAV-Clients im /apps/ws/images Ordner.
-
Navigieren Sie zu /apps/ws/css. Öffnen Sie newStyle.css zur Bearbeitung und fügen Sie die folgenden Einträge hinzu:
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; }
-
Führen Sie alle semantischen Änderungen durch, die im Artikel Anpassung von Workspace aufgeführt sind.
-
Navigieren Sie zum js/runtime/utility und öffnen Sie die Datei "usersession.js*"zur Bearbeitung.
-
Suchen Sie den Code, der im ursprünglichen Codeblock aufgeführt ist und fügen Sie die folgende Bedingung hinzu: lang !== 'nw' to the if statement:
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; } }
Datumsauswahl lokalisieren localizing-date-picker
Sie benötigen ein Entwicklungspaket, um die *datepicker *API zu lokalisieren. Ausführliche Informationen zum Erstellen des Entwicklungspakets finden Sie unter AEM Forms Workspace-Code erstellen.
-
Laden Sie die jQuery UI Package, navigieren Sie zu <extracted jquery="" ui="" package="">\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.
-
Kopieren Sie die Datei jquery.ui.datepicker-nw.js für Gebietsschema-Code jetzt in apps/ws/js/libs/jqueryui und nehmen Sie gebietsschemaspezifische Änderungen an der Datei vor.
-
Navigieren Sie zu
apps/ws/js
und öffnen Sie die Dateijquery.ui.datepicker-nw.js
zur Bearbeitung. -
Erstellen Sie in der Datei main.js einen Alias für
jquery.ui.datepicker-nw.js.
. Der Code zum Erstellen eines Alias für die Dateijquery.ui.datepicker-nw.js
ist:code language-none jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
-
Verwenden Sie den Alias
jqueryuidatepickernw
, um die Dateijquery.ui.datepicker-nw.js
in allen Dateien einzubinden, die die Datumsauswahl verwenden. Die Datumsauswahl wird in den folgenden Dateien verwendet:js/runtime/views/outofoffice.js
js/runtime/views/searchtemplatedetails.js
Der folgende Beispielcode zeigt, wie der Eintrag von jquery.ui.datepicker-nw.js hinzugefügt wird:
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) {
-
Ändern Sie in allen Dateien, die die Datepicker-API verwenden, die standardmäßigen API-Einstellungen für die Datumsauswahl. Die Datumsauswahl-API wird in den folgenden Dateien verwendet:
- apps\ws\js\runtime\views\searchtemplatedetails.js
- apps\ws\js\runtime\views\outofoffice.js
Ändern Sie den folgenden Code, um das neue Gebietsschema hinzuzufügen:
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['']); }
in
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['']);
}