AEM Formsのワークスペースでは、英語、フランス語、ドイツ語、日本語に対するサポートがすぐに利用できます。 また、AEM Formsワークスペースユーザーインターフェイスを他の言語にローカライズする機能も提供します。
AEM Formsワークスペースユーザーインターフェイスを任意の言語にローカライズするには:
上記の手順を実行する前に、AEM Formsワークスペースのカスタマイズの一般的な手順に示されている手順に従っていることを確認してください。
AEM Forms Workspace のログイン画面の言語を変更するには、「新しいログイン画面の作成」を参照してください。
次の手順を実行して、言語新しいとブラウザーのロケールコードnwのサポートを追加します。
CRXDE Lite にログインします。CRXDE LiteのデフォルトURLはhttps://'[server]:[port]'/lc/crx/de/index.jsp
です。
場所apps/ws/locales
に移動し、新しいフォルダーnw.
を作成します
ファイルtranslation.json
を/apps/ws/locales/en-US
から/apps/ws/locales/nw
にコピーします。
/apps/ws/locales/nw
に移動し、translation.json
を開いて編集します。 translation.json ファイルにロケール固有の変更を行います。
次の例では、AEM Forms Workspace の英語およびフランス語のロケールの 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;
}
「Workspaceのカスタマイズ」記事に一覧表示されているすべてのセマンティックの変更を実行します。
/js/runtime/utility フォルダーに移動し、usersession.js ファイルを開いて編集します。
元のコードブロックに一覧表示されているコードを探して、if ステートメントに条件 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;
}
}
日付選択 API をローカライズするには、開発パッケージが必要です。開発パッケージの作成について詳しくは、「AEM Formsワークスペースコードの構築」を参照してください。
jQuery UI パッケージをダウンロードして抽出し、<抽出された jquery UI パッケージ>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n に移動します。
ロケールコード nw の 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
を使用します。 日付選択は次のファイルで使用されます。
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) {
日付選択 API を使用するすべてのファイルで、デフォルトの日付選択 API の設定を変更します。日付選択 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['']);
}