變更AEM Forms工作區使用者介面的地區設定

AEM Forms工作區提供英文、法文、德文和日文語言的立即可用支援。 此外，還提供將AEM Forms工作區使用者介面當地化為任何其他語言的功能。

若要將AEM Forms工作區使用者介面當地化為您所選擇的語言：

  • 將AEM Forms工作區的文字本地化。
  • 將折疊的類別、佇列和程式本地化。
  • 本地化日期選擇器

執行上述步驟之前，請務必遵循AEM Forms工作區自訂的一般步驟中所列的步驟。

注意

若要變更AEM Forms工作區登入畫面的語言，請參閱建立新登入畫面。

將文本本地化

執行下列步驟以新增對語言​New​和瀏覽器地區設定代碼​nw​的支援。

  1. 登入CRXDE Lite。
    CRXDE Lite的預設URL為https://'[server]:[port]'/lc/crx/de/index.jsp。

  2. 導覽至位置apps/ws/locales並建立新資料夾nw.

  3. 將檔案translation.json從/apps/ws/locales/en-US位置複製到/apps/ws/locales/nw位置。

  4. 導覽至/apps/ws/locales/nw並開啟translation.json以進行編輯。 對translation.json檔案進行地區特定變更。

    下列範例包含AEM Forms工作區的英文和法文地區設定的translation.json檔案。

    translation_json_in_ entranslation_json_in_fr

將折疊的類別、隊列和進程本地化

AEM Forms工作區使用影像來顯示類別、佇列和程式的標題。 您需要開發套件才能將這些標題當地化。 如需建立開發套件的詳細資訊，請參閱建立AEM Forms工作區程式碼。🔗

在下列步驟中，假設新的本地化影像檔案為​Categories_nw.png、Queue_nw.png​和​Processes_nw.png。 建議的影像寬度為19px。

注意

查找瀏覽器語言區域代碼。 開啟 https://'[server]:[port]'/lc/libs/ws/Locale.html.

collapping_panels_image

執行下列步驟將影像本地化：

  1. 使用WebDAV客戶端，將影像檔案置於​/apps/ws/images​資料夾中。

  2. 導覽至​/apps/ws/css。 開啟​newStyle.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. 執行Workspace Customization文章中列出的所有語義更改。

  4. 導覽至​js/runtime/utility​資料夾，並開啟​usersession.js​檔案進行編輯。

  5. 找到原始代碼塊中列出的代碼，並添加條件​lang !== 'nw'​到if語句：

    // 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;
        }
    }

本地化日期選擇器

您需要開發套件，將​datepicker API本地化。 如需建立開發套件的詳細資訊，請參閱建立AEM Forms工作區程式碼。

  1. 下載並解壓縮jQuery UI套件，導覽至​<extracted jquery UI套件>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n。

  2. 將區域設定代碼的jquery.ui.datepicker-nw.js檔案複製到apps/ws/js/libs/jqueryui，並對檔案進行區域設定特定的變更。

  3. 導覽至apps/ws/js並開啟jquery.ui.datepicker-nw.js檔案以進行編輯。

  4. 在main.js檔案中為jquery.ui.datepicker-nw.js.建立別名的代碼為：jquery.ui.datepicker-nw.js

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

  5. 使用別名jqueryuidatepickernw將jquery.ui.datepicker-nw.js檔案包含在使用日期選擇器的所有檔案中。 日期選擇器用於下列檔案：

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

    下列范常式式碼顯示如何新增jquery.ui.datepicker-nw.js項目：

    //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. 在使用日期挑選器API的所有檔案中，變更預設的日期挑選器API設定。 日期挑選器API用於下列檔案：

    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js

    更改以下代碼以添加新區域設定：

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

本頁內容