Ändern des Gebietsschemas der Benutzeroberfläche von AEM Forms Workspace

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 Benutzeroberfläche von AEM Forms Workspace in die Sprache Ihrer Wahl:

• Lokalisieren Sie den Text von AEM Forms Workspace.
• Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen
• Datumsauswahl lokalisieren

Bevor Sie die oben genannten Schritte ausführen, müssen Sie die unter Generische Schritte zur Anpassung von AEM Forms Workspace.

Lokalisieren von Text

Führen Sie die folgenden Schritte aus, um Unterstützung für eine Sprache hinzuzufügen Neu und dem Gebietsschema-Code des Browsers nw.

1. Melden Sie sich bei CRXDE Lite an.
   Die Standard-URL von CRXDE Lite lautet https://'[server]:[port]'/lc/crx/de/index.jsp.

2. Navigieren zum Speicherort apps/ws/locales und erstellen Sie einen Ordner nw.

3. Kopieren Sie die Datei translation.json vom Speicherort /apps/ws/locales/en-US zum Speicherort /apps/ws/locales/nw.

4. Navigieren Sie zu /apps/ws/locales/nw und öffnen Sie translation.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 des AEM Forms-Arbeitsbereichs.

   

Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen

AEM Forms Workspace verwendet Bilder, um Kopfzeilen von Kategorien, Warteschlangen und Prozessen anzuzeigen. Sie benötigen ein Entwicklungspaket, um diese Header zu lokalisieren. Detaillierte Informationen zum Erstellen eines Entwicklungspakets finden Sie unter Erstellen von AEM Forms Workspace-Code.

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 sollte auf 19 Pixel eingestellt werden.

Um die Bilder zu lokalisieren, führen Sie die folgenden Schritte aus:

1. Platzieren Sie die Bilddateien mithilfe eines WebDAV-Clients im /apps/ws/images Ordner.

2. Navigieren Sie zu /apps/ws/css. Öffnen Sie newStyle.css zur Bearbeitung und fügen Sie die folgenden Einträge hinzu:

   #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. Führen Sie alle semantischen Änderungen durch, die im Artikel Anpassung von Workspace aufgeführt sind.

4. Navigieren Sie zum Ordner /js/runtime/utility und öffnen Sie die Datei usersession.js zur Bearbeitung.

5. Suchen Sie den im ursprünglichen Codeblock aufgelisteten Code und fügen Sie die Bedingung hinzu. 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;
           }
       }
   

Datumsauswahl lokalisieren

Sie benötigen ein Entwicklungspaket, um die datepicker API. Detaillierte Informationen zum Erstellen eines Entwicklungspakets finden Sie unter Erstellen von AEM Forms Workspace-Code.

1. 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.

2. 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.

3. Navigieren Sie zu apps/ws/js und öffnen Sie die Dateijquery.ui.datepicker-nw.js zur Bearbeitung.

4. 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 jquery.ui.datepicker-nw.js Datei ist:

   jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
   

5. Verwenden Sie den Alias jqueryuidatepickernw, um die Datei jquery.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:

   //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. Ä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:

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

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