更改AEM Forms工作区用户界面的区域设置

AEM Forms工作区为英语、法语、德语和日语提供开箱即用支持。 它还提供将AEM Forms工作区用户界面本地化为任何其他语言的功能。

要将AEM Forms工作区用户界面本地化为您选择的语言，请执行以下操作：

• 将AEM Forms工作区的文本本地化。
• 本地化折叠的类别、队列和进程。
• 本地化日期选取器

在执行上述步骤之前，请确保遵循以下列出的步骤 AEM Forms工作区自定义的常规步骤.

本地化文本

执行以下步骤，以便添加对语言的支持 新建 和浏览器区域设置代码 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. 执行 工作区自定义 文章。

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

本地化日期选取器

您需要开发包才能本地化 日期选取器 API。 有关创建开发包的详细信息，请参阅 构建AEM Forms工作区代码.

1. 下载并解压缩 jQuery UI包，导航到 <extracted jquery="" ui="" package="">\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n。

2. 将区域设置代码为nw的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['']);
   }