更改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工作区代码。

在以下步骤中,假定新的本地化图像文件为​类别nw.pngQueuenw.png​和​Processesnw.png。 建议的图像宽度为19px。

注意

查找浏览器的浏览器语言区域设置代码。 打开 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包,导航至​<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. 使用别名jqueryuidatepickernwjquery.ui.datepicker-nw.js文件包含在使用datepicker的所有文件中。 日期选取器用于以下文件:

    • 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. 在所有使用datepicker API的文件中,更改默认的datepicker API设置。 datepicker 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['']);
}

On this page

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