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

Zum Lokalisieren der AEM Forms Workspace-Benutzeroberfläche in einer Sprache Ihrer Wahl gehört:

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

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.

NOTE
Informationen zum Ändern der Sprache des Anmeldebildschirms von AEM Forms Workspace finden Sie unter Anmeldebildschirm erstellen.

Lokalisieren von Text localizing-text

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

  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 Sie zum Speicherort apps/ws/locales und erstellen Sie einen neuen 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 von AEM Forms Workspace.

    translation_json_in_en translation_json_in_fr

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 ein Entwicklungspaket, um diese Kopfzeilen zu lokalisieren. Ausführliche Informationen zum Erstellen eines Entwicklungspakets finden Sie unter Erstellen von Code für AEM Forms Workspace.

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 px festgelegt werden.

NOTE
Den Browser-Sprachschema-Code Ihres Browsers finden. Öffnen Sie https://'[server]:[port]'/lc/libs/ws/Locale.html.

collapsing_panels_image

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

  1. Platzieren Sie mit einem WebDAV-Client 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:

    code language-css
    #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 Code, der im ursprünglichen Code-Block aufgeführt ist und fügen Sie die folgende Bedingung hinzu: lang !== 'nw' to the if statement:

    code language-javascript
    // 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-javascript
    //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 Datumsauswahl-API zu lokalisieren. Ausführliche Informationen zum Erstellen eines Entwicklungspakets finden Sie unter Erstellen von Code für AEM Forms Workspace.

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

    code language-javascript
    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 Beispiel-Code unten zeigt, wie Sie den Eintrag aus „jquery.ui.datepicker-nw.js“ hinzufügen:

    code language-json
    //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-json
    // 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:

    code language-javascript
    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['']);
    }
    
    code language-javascript
    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['']);
    }
    
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2