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

AEM Forms Workspace bietet standardmäßig Unterstützung für Englisch, Französisch, Deutsch und Japanisch. Darüber hinaus bietet es die Möglichkeit, die Benutzeroberfläche von AEM Forms Workspace in jeder anderen Sprache zu lokalisieren.

So lokalisieren Sie die Benutzeroberfläche von AEM Forms Workspace in eine Sprache Ihrer Wahl:

• Lokalisieren des Texts von AEM Forms Workspace
• Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen
• Lokalisieren der Datumsauswahl

Bevor Sie die oben genannten Schritte ausführen, führen Sie die unter Generische Schritte zur Anpassung von AEM Forms Workspace aufgeführten Schritte aus.

Text lokalisieren

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

1. Melden Sie sich bei CRXDE Lite an.

   Die Standard-URL der CRXDE Lite ist https://[server]:[port]/lc/crx/de/index.jsp.

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

3. Kopieren Sie die Datei translation.jsonvom Speicherort /apps/ws/locales/en-US in den 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 von AEM Forms Workspace.

   

Lokalisieren von ausgeblendeten Kategorien, Warteschlangen und Prozessen

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 Erstellen des AEM Forms Workspace-Codes.

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.

Führen Sie die folgenden Schritte aus, um die Bilder zu lokalisieren:

1. Mit einem WebDAV-Client platzieren Sie die Bilddateien im Ordner /apps/ws/images.

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 des Arbeitsbereichs aufgeführt sind.

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

5. 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:

   // 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 zu lokalisieren. Ausführliche Informationen zum Erstellen des Entwicklungspakets finden Sie unter Erstellen von AEM Forms Workspace-Code.

1. Laden Sie das jQuery UI Package herunter und extrahieren Sie es, navigieren Sie zu <extrahiertes 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 „nw“ nach „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 Datei jquery.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 Datei jquery.ui.datepicker-nw.js lautet:

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

5. Verwenden Sie den Aliasnamen jqueryuidatepickernw, um die jquery.ui.datepicker-nw.js-Datei in alle Dateien einzuschließen, die den Datumsbereich verwenden. Die Datumsauswahl wird in den folgenden Dateien verwendet:

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

   Der Beispielcode unten zeigt, wie Sie den Eintrag aus „jquery.ui.datepicker-nw.js“ hinzufügen:

   //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 allen Dateien, die die Datumsauswahl-API verwenden, ändern Sie die Standardeinstellungen der Datumsauswahl-API. 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['']);
   }
   

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