AEM Forms Workspace ユーザーインターフェイスのロケールの変更 changing-the-locale-of-aem-forms-workspace-user-interface
AEM Forms Workspace では、英語、フランス語、ドイツ語、日本語によるサポートを提供しています。また、AEM Forms Workspace ユーザーインターフェイスをその他の言語にローカライズする機能も提供しています。
AEM Forms Workspace ユーザーインターフェイスを任意の言語にローカライズするには、次のようにします。
- AEM Formsワークスペースのテキストをローカライズする。
- 折りたたまれたカテゴリ、キュー、およびプロセスをローカライズする。
- 日付選択をローカライズする
前述した手順を実行する前に、「AEM Forms Workspace のカスタマイズの一般的な手順」に一覧表示されている手順に従っていることを確認してください。
テキストのローカライズ localizing-text
次の手順を実行して 新規 言語のサポートおよびブラウザのロケールコード「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 ファイルが含まれています。
折りたたまれているカテゴリ、キューおよびプロセスのローカライズ localizing-collapsed-categories-queues-and-processes
AEM Forms Workspace では画像を使用してカテゴリ、キュー、およびプロセスのヘッダを表示します。これらのヘッダをローカライズするには、開発パッケージが必要です。開発パッケージを作成する方法については、「AEM Forms Workspace コードの構築」を参照してください。
次の手順では、新しくローカライズされた画像ファイルは 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 を開いて編集し、次のエントリを追加します。
code language-none #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 ファイルを開きます。
-
元のコードブロックに一覧表示されているコードを探して、ステートメントに条件 lang ! == 'nw' を追加します。
code language-none // 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-none //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
API をローカライズするには、開発パッケージが必要です。 開発パッケージを作成する方法については、「AEM Forms Workspace コードの構築」を参照してください。
-
をダウンロードして抽出します。 jQuery UI パッケージに移動します。 <extracted jquery="" ui="" package="">\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
ファイルにエイリアスを作成するためのコードは、次のとおりです。code language-none 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 のエントリを追加する方法を示しています。
code language-none //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-none // 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 は、次のファイルで使用されます。
- apps\ws\js\runtime\views\searchtemplatedetails.js
- apps\ws\js\runtime\views\outofoffice.js
次のコードを変更して新しいロケールを追加します。
code language-none 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['']);
}