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

上次更新: 2023-05-04
  • 建立對象:
  • User
注意

AEM 6.4已結束延伸支援,本檔案不再更新。 如需詳細資訊,請參閱 技術支援期. 尋找支援的版本 此處.

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

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

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

執行上述步驟之前,請務必遵循 AEM Forms工作區自訂的一般步驟.

注意

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

將文本本地化

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

  1. 登入CRXDE Lite。

    預設的CRXDE LiteURL為 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_en translation_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. 執行 工作區自訂 文章。

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

  5. 找出原始程式碼區塊中列出的程式碼,並新增條件 朗!== '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="" package="">\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['']);
}

本頁內容