Show Menu
トピック×

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

AEM Formsワークスペースでは、英語、フランス語、ドイツ語、日本語のサポートがすぐに利用できます。 また、AEM Formsワークスペースユーザーインターフェイスを他の言語にローカライズする機能も提供します。
AEM Formsワークスペースユーザーインターフェイスを任意の言語にローカライズするには:
  • AEM Forms Workspace のテキストをローカライズします。
  • 折りたたまれているカテゴリ、キュー、およびプロセスをローカライズする。
  • 日付選択をローカライズする。
Before performing above steps, ensure that you follow the steps listed at Generic steps for AEM Forms workspace customization .
AEM Forms Workspace のログイン画面の言語を変更するには、「 新しいログイン画面の作成 」を参照してください。

テキストのローカライズ

Perform the following steps to add support for a language New and the browser locale code nw .
  1. CRXDE Lite にログインします。The default URL of CRXDE Lite is https://'[server]:[port]'/lc/crx/de/index.jsp .
  2. Navigate to the location apps/ws/locales and create a new folder nw.
  3. その場所 translation.json から場所にファイル /apps/ws/locales/en-US をコピーし /apps/ws/locales/nw ます。
  4. Navigate to /apps/ws/locales/nw and open translation.json for editing. translation.json ファイルにロケール固有の変更を行います。
    次の例では、AEM Forms Workspace の英語およびフランス語のロケールの translation.json ファイルを示します。

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

AEM Formsワークスペースは、カテゴリ、キューおよびプロセスのヘッダーを表示するために画像を使用します。 これらのヘッダをローカライズするには、開発パッケージが必要です。For detailed information about creating development package, see Building AEM Forms workspace code.
次の手順では、新しくローカライズされた画像ファイルは​ Categories_nw.png Queue_nw.png 、および Processes_nw.png であると想定しています。画像の推奨される幅は19pxです。
お使いのブラウザのブラウザ言語ロケールコードを検索するには、次のようにします。開く https://'[server]:[port]'/lc/libs/ws/Locale.html .
次の手順を実行して画像をローカライズします。
  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. Perform all the semantic changes listed in the Workspace Customization article.
  4. /js/runtime/utility フォルダーに移動し、 usersession.js ファイルを開いて編集します。
  5. 元のコードブロックに一覧表示されているコードを探して、if ステートメントに条件 lang !== 'nw' to the if statement:
    // 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 をローカライズするには、開発パッケージが必要です。For detailed information about creating development package, see Building AEM Forms workspace code .
  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. Navigate to apps/ws/js and open the jquery.ui.datepicker-nw.js file for editing.
  4. main.jsファイルで、ファイルのエイリアスを作成 jquery.ui.datepicker-nw.js. するコードは次のとおりです。 jquery.ui.datepicker-nw.js ファイルのエイリアスを作成します。
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
    
  5. Use alias jqueryuidatepickernw to include the jquery.ui.datepicker-nw.js file in all the files that use 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. 日付選択 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['']);
    }