變更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工作區程式碼」。](/docs/experience-manager-64/forms/use-aem-forms-workspace/introduction-customizing-html-workspace.html?lang=zh-Hant#building-html-workspace-code)[

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

注意

若要尋找瀏覽器的瀏覽器語言地區設定程式碼。 開啟 https://[server]:[port]/lc/libs/ws/Locale.html.

collapsing_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包,導覽至​<解壓縮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/jquerui,並對檔案進行地區設定特定變更。

  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. 使用別名jqueryuidatepickernwjquery.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['']);
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now