變更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檔案。

   

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

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

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

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

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