설명서AEM 6.5사용 안내서

AEM Forms 작업 공간 사용자 인터페이스의 로케일 변경 changing-the-locale-of-aem-forms-workspace-user-interface

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 사용자
  • 개발자

AEM Forms workspace는 영어, 프랑스어, 독일어 및 일본어 언어를 즉시 지원합니다. 또한 AEM Forms 작업 공간 사용자 인터페이스를 다른 언어로 현지화하는 기능도 제공합니다.

AEM Forms 작업 공간 사용자 인터페이스를 선택한 언어로 현지화하려면 다음 작업을 수행하십시오.

  • AEM Forms 작업 영역의 텍스트를 현지화합니다.
  • 축소된 범주, 큐 및 프로세스를 현지화합니다.
  • 현지화 날짜 선택기

위의 단계를 수행하기 전에 AEM Forms 작업 영역 사용자 지정에 대한 일반 단계에 나열된 단계를 따라야 합니다.

NOTE
AEM Forms 작업 영역의 로그인 화면 언어를 변경하려면 로그인 화면 만들기를 참조하십시오.

텍스트 현지화 localizing-text

언어 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_en translation_json_in_fr

축소된 범주, 큐 및 프로세스 현지화 localizing-collapsed-categories-queues-and-processes

AEM Forms workspace는 이미지를 사용하여 카테고리, 큐 및 프로세스의 헤더를 표시합니다. 이러한 헤더를 현지화하려면 개발 패키지가 필요합니다. 개발 패키지 만들기에 대한 자세한 내용은 AEM Forms 작업 영역 코드 빌드를 참조하십시오.

다음 단계에서는 현지화된 새 이미지 파일이 Categories_nw.png, Queue_nw.png 및 Processes_nw.png ​라고 가정합니다. 이미지의 권장 너비는 19픽셀로 설정해야 합니다.

NOTE
브라우저의 브라우저 언어 로케일 코드를 찾으려면 다음을 수행하십시오. https://'[server]:[port]'/lc/libs/ws/Locale.html 열기

collapsing_panels_image

이미지를 현지화하려면 다음 단계를 수행하십시오.

  1. WebDAV 클라이언트를 사용하여 /apps/ws/images 폴더에 이미지 파일을 넣습니다.

  2. /apps/ws/css(으)로 이동합니다. 편집할 newStyle.css ​을(를) 열고 다음 항목을 추가합니다.

    code language-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 사용자 지정 문서에 나열된 모든 의미 체계 변경을 수행합니다.

  4. js/runtime/utility 폴더로 이동하고 편집할 usersession.js 파일을 엽니다.

  5. 원래 코드 블록에 나열된 코드를 찾아 lang! 조건을 추가합니다.if 문에 'nw' ​을(를) ==.

    code language-javascript 
    // 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;
        }
    }
    code language-javascript 
    //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;
        }
    }

날짜 선택기 현지화 localizing-date-picker

datepicker API를 현지화하려면 개발 패키지가 필요합니다. 개발 패키지 만들기에 대한 자세한 내용은 AEM Forms 작업 영역 코드 작성을 참조하십시오.

  1. jQuery UI 패키지 다운로드 및 추출, <추출된 jquery UI 패키지>\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 파일에 대한 별칭을 만드는 코드는 다음과 같습니다.

    code language-javascript 
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'

  5. jqueryuidatepickernw 별칭을 사용하여 datepicker를 사용하는 모든 파일에 jquery.ui.datepicker-nw.js 파일을 포함합니다. 날짜 선택기는 다음 파일에 사용됩니다.

    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js

    아래 샘플 코드는 jquery.ui.datepicker-nw.js의 항목을 추가하는 방법을 보여 줍니다.

    code language-json 
    //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 language-json 
    // 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

    다음 코드를 변경하여 새 로케일을 추가합니다.

    code language-javascript 
    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['']);
}
    code language-javascript 
    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['']);
}
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2