AEM Forms 작업 영역 사용자 인터페이스 로케일 변경

AEM Forms 작업 영역은 영어, 프랑스어, 독일어 및 일본어를 즉시 지원합니다. 또한 AEM Forms 작업 영역 유저 인터페이스를 다른 언어로 현지화할 수 있는 기능도 제공합니다.

AEM Forms 작업 영역 사용자 인터페이스를 원하는 언어로 현지화하려면:

  • AEM Forms 작업 영역의 텍스트를 현지화합니다.
  • 축소된 카테고리, 대기열 및 프로세스를 현지화합니다.
  • 날짜 선택기 현지화

위 단계를 수행하기 전에 AEM Forms 작업 영역 사용자 정의](/docs/experience-manager-64/forms/using/generic-steps-html-workspace-customization.html?lang=ko)에 대한 [일반 단계에 나열된 단계를 따라야 합니다.

노트

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

텍스트 지역화

언어 및 브라우저 로케일 코드 ​에 대한 지원을 추가하려면 다음 단계를 수행하십시오.

  1. CRXDE Lite에 로그인합니다.

    CRXDE Lite의 기본 URL은 https://[server]:[port]/lc/crx/de/index.jsp입니다.

  2. apps/ws/locales 위치로 이동하고 새 폴더 nw.을 만듭니다.

  3. /apps/ws/locales/en-US 위치의 translation.json 파일을 /apps/ws/locales/nw 위치로 복사합니다.

  4. /apps/ws/locales/nw으로 이동하여 편집을 위해 translation.json을(를) 엽니다. translation.json 파일을 로케일별로 변경합니다.

    다음 예에는 AEM Forms 작업 영역의 영어 및 프랑스어 로캘에 대한 translation.json 파일이 포함되어 있습니다.

    translation_json_in_ entrsation_json_in_fr

축소된 카테고리, 큐 및 프로세스 지역화

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

다음 단계에서는 현지화된 새 이미지 파일이 Categories_nw.png, Queue_nw.pngProcesses_nw.png​라고 가정합니다. 권장 이미지 너비는 19px입니다.

노트

브라우저의 브라우저 언어 로케일 코드를 찾습니다. 열기 https://[server]:[port]/lc/libs/ws/Locale.html.

collecting_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. 원래 코드 블록에 나열된 코드를 찾고 조건 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/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 파일을 포함시킵니다. 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를 사용하는 모든 파일에서 기본 데이터 피커 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['']);
}

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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