AEM Forms Workspace ユーザーインターフェイスのロケールの変更

AEM Forms workspace は、英語、フランス語、ドイツ語、日本語の各言語を標準でサポートしています。 また、AEM Forms Workspace のユーザーインターフェイスを他の言語にローカライズする機能も提供しています。

AEM Forms Workspace ユーザーインターフェイスを選択した言語にローカライズするには：

  • AEM Forms Workspace のテキストをローカライズします。
  • 折りたたまれているカテゴリ、キュー、およびプロセスをローカライズする。
  • 日付選択をローカライズする。

上記の手順を実行する前に、次の手順に従ってください： AEM Forms Workspace のカスタマイズの一般的な手順.

メモ

AEM Forms Workspace のログイン画面の言語を変更するには、「新しいログイン画面の作成」を参照してください。

テキストのローカライズ

言語のサポートを追加するには、次の手順を実行します。 新規 ブラウザのロケールコード nw.

  1. CRXDE Lite にログインします。

    デフォルトのCRXDE LiteURL は 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 Workspace の英語およびフランス語のロケールの translation.json ファイルを示します。

    translation_json_in_en translation_json_in_fr

折りたたまれているカテゴリ、キュー、およびプロセスのローカライズ

AEM Forms workspace は、カテゴリ、キュー、プロセスのヘッダーを表示するために画像を使用します。 これらのヘッダをローカライズするには、開発パッケージが必要です。開発パッケージの作成について詳しくは、 AEM Forms Workspace コードを構築しています。

次の手順では、新しくローカライズされた画像ファイルは​Categories_nw.png、Queue_nw.png、および Processes_nw.png であると想定しています。画像の推奨幅は 19px です。

メモ

お使いのブラウザのブラウザ言語ロケールコードを検索するには、次のようにします。次を開きます： https://[server]:[port]/lc/libs/ws/Locale.html.

collapsing_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. 次に示すセマンティックの変更をすべて実行します： Workspace のカスタマイズ 記事。

  4. 次に移動： js/runtime/utility フォルダーに移動し、編集用にusersession.jsファイルを開きます。

  5. 元のコードブロックに一覧表示されているコードを探して、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 Workspace コードの構築.

  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 ファイル：

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

  5. エイリアスを使用 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) {

  6. 日付選択 API を使用するすべてのファイルで、デフォルトの日付選択 API の設定を変更します。日付選択 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['']);
}

このページ