AEM Forms 작업 영역은 영어, 프랑스어, 독일어 및 일본어를 즉시 지원합니다. 또한 AEM Forms 작업 영역 유저 인터페이스를 다른 언어로 현지화할 수 있는 기능도 제공합니다.
AEM Forms 작업 영역 사용자 인터페이스를 원하는 언어로 현지화하려면:
위 단계를 수행하기 전에 AEM Forms 작업 영역 사용자 정의](…/…/forms/using/generic-steps-html-workspace-customization.md)에 대한 [일반 단계에 나열된 단계를 따라야 합니다.
AEM Forms 작업 영역의 로그인 화면의 언어를 변경하려면 새 로그인 화면 만들기를 참조하십시오.
언어 새 및 브라우저 로케일 코드 새에 대한 지원을 추가하려면 다음 단계를 수행하십시오.
CRXDE Lite에 로그인합니다.
CRXDE Lite의 기본 URL은 https://'[server]:[port]'/lc/crx/de/index.jsp
입니다.
apps/ws/locales
위치로 이동하고 새 폴더 nw.
을 만듭니다.
/apps/ws/locales/en-US
위치의 translation.json
파일을 /apps/ws/locales/nw
위치로 복사합니다.
/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라고 가정합니다. 권장 이미지 너비는 19px입니다.
브라우저의 브라우저 언어 로케일 코드를 찾습니다. 열기 https://'[server]:[port]'/lc/libs/ws/Locale.html
.
이미지를 현지화하려면 다음 단계를 수행합니다.
WebDAV 클라이언트를 사용하여 이미지 파일을 /apps/ws/images 폴더에 배치합니다.
/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;
}
작업 공간 사용자 지정 아티클에 나열된 모든 의미 변경 사항을 수행합니다.
js/runtime/utility 폴더로 이동하여 편집할 usersession.js 파일을 엽니다.
원래 코드 블록에 나열된 코드를 찾고 조건 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 작업 영역 코드 작성을 참조하십시오.
jQuery UI 패키지를 다운로드하고 추출하려면 <압축을 푼 jquery UI 패키지>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n으로 이동합니다.
이제 로케일 코드에 대한 jquery.ui.datepicker-nw.js 파일을 apps/ws/js/libs/jqueryui에 복사하고 로케일 특정 파일 변경 작업을 수행할 수 있습니다.
apps/ws/js
으로 이동하여 편집할 jquery.ui.datepicker-nw.js
파일을 엽니다.
main.js 파일에서 jquery.ui.datepicker-nw.js.
에 대한 별칭을 만듭니다. jquery.ui.datepicker-nw.js
파일에 대한 별칭을 만드는 코드는 다음과 같습니다.
jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
앨리어스 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) {
Datepicker API를 사용하는 모든 파일에서 기본 데이터 피커 API 설정을 변경합니다. Datepicker API는 다음 파일에 사용됩니다.
다음 코드를 변경하여 새 로케일을 추가합니다.
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['']);
}