新規ログイン画面の作成

AEM Forms ログイン画面を使用するすべての AEM Forms モジュールのログイン画面を変更することができます。例えば、変更すると Forms Manager および AEM Forms Workspace の両方のログイン画面に影響が及びます。

前提条件

  1. 次の場所にログイン: /lc/crx/de 管理者権限を持つ。

  2. 次のアクションを実行します。

    1. 階層構造をレプリケートします。/ /libs/livecycle/core/content 時刻 /apps/livecycle/core/content. 同じ(ノード/フォルダー)プロパティおよびアクセス制御を保持します。
    2. 次の内容フォルダーをコピーします。から /libs/livecycle/core から /apps/livecycle/core.
    3. のコンテンツを削除 /apps/livecycle/core フォルダー。
  3. 次の操作を実行します。

    1. 階層構造をレプリケートします。/ /libs/livecycle/core/components/login 時刻 /apps/livecycle/core/components/login. 同じ(ノード/フォルダー)プロパティおよびアクセス制御を保持します。
    2. components フォルダーをコピーします。から /libs/livecycle/core から /apps/livecycle/core.
    3. フォルダーのコンテンツを削除します。 /apps/livecycle/core/components/login.

新しいロケールの追加

  1. i18n フォルダー:

    • コピー元:/libs/livecycle/core/components/login
    • コピー先:/apps/livecycle/core/components/login
  2. 内のすべてのフォルダーを削除 i18n ただ一人だけは en.

  3. フォルダー en で、以下のアクションを実行します。

    1. フォルダーの名前をサポートするロケール名に変更します。(例:ar)。
    2. プロパティを変更します。 jcr:languagear( ar フォルダー )。
    メモ

    ar-DZ のようにロケールが言語と国コードの組み合わせである場合は、フォルダー名とプロパティ値を ar-DZ に変更します。

  4. コピー login.jsp:

    • コピー元:/libs/livecycle/core/components/login
    • コピー先:/apps/livecycle/core/components/login
  5. 次のコードのスニペットを /apps/livecycle/core/components/login/login.jsp:

    ロケールが言語コードである場合

    String browserLocale = "en";
        for(int i=0; i<locales.length; i++)
        {
            String prioperty = locales[i];
            if(prioperty.trim().startsWith("en")) {
                browserLocale = "en";
                break;
            }
            if(prioperty.trim().startsWith("de")){
                browserLocale = "de";
                break;
            }
            if(prioperty.trim().startsWith("ja")){
                browserLocale = "ja";
                break;
            }
            if(prioperty.trim().startsWith("fr")){
                browserLocale = "fr";
                break;
            }
        }
    
    To
    
    String browserLocale = "en";
        for(int i=0; i<locales.length; i++)
        {
            String prioperty = locales[i];
            if(prioperty.trim().startsWith("ar")) {
                browserLocale = "ar";
                break;
            }
            if(prioperty.trim().startsWith("en")) {
                browserLocale = "en";
                break;
            }
            if(prioperty.trim().startsWith("de")){
                browserLocale = "de";
                break;
            }
            if(prioperty.trim().startsWith("ja")){
                browserLocale = "ja";
                break;
            }
            if(prioperty.trim().startsWith("fr")){
                browserLocale = "fr";
                break;
            }
        }
    

    ロケールが言語-国コードである場合

    String browserLocale = "en";
        for(int i=0; i<locales.length; i++)
        {
            String prioperty = locales[i];
            if(prioperty.trim().startsWith("en")) {
                browserLocale = "en";
                break;
            }
            if(prioperty.trim().startsWith("de")){
                browserLocale = "de";
                break;
            }
            if(prioperty.trim().startsWith("ja")){
                browserLocale = "ja";
                break;
            }
            if(prioperty.trim().startsWith("fr")){
                browserLocale = "fr";
                break;
            }
        }
    
    To
    
    String browserLocale = "en";
        for(int i=0; i<locales.length; i++)
        {
            String prioperty = locales[i];
            if(prioperty.trim().equalsIgnoreCase("ar-DZ")) {
                browserLocale = "ar-DZ";
                break;
            }
            if(prioperty.trim().startsWith("en")) {
                browserLocale = "en";
                break;
            }
            if(prioperty.trim().startsWith("de")){
                browserLocale = "de";
                break;
            }
            if(prioperty.trim().startsWith("ja")){
                browserLocale = "ja";
                break;
            }
            if(prioperty.trim().startsWith("fr")){
                browserLocale = "fr";
                break;
            }
        }
    

    デフォルトのロケールを変更するには

    String browserLocale = "en";
    for(int i=0; i<locales.length; i++)
    
    To
    
    String browserLocale = "ar";
    for(int i=0; i<locales.length; i++)
    

新しいテキストの追加、または既存のテキストの変更

  1. コピー i18n フォルダー:

    • コピー元:/libs/livecycle/core/components/login
    • コピー先:/apps/livecycle/core/components/login
  2. ここで、テキストを変更するノード(該当するロケールコードフォルダの下)のプロパティ sling:message の値を変更します。翻訳は、ノードのプロパティ sling:key の値に示されているキーを介して行われます。

  3. 新しいキーと値のペアを追加するには、次のアクションを実行します。次に続くスクリーンショットの例を確認してください。

    1. sling:MessageEntry タイプのノードを作成するか、またはすべてのロケールフォルダーの下で既存のノードをコピーして名前を変更します。

    2. コピー login.jsp :

      • コピー元:/libs/livecycle/core/components/login
      • コピー先:/apps/livecycle/core/components/login
    3. 変更 /apps/livecycle/core/components/login/login.jsp 新しく追加したテキストを取り込む。

    キャプチャ

    div class="loginContent">
                        <span class="loginFlow"></span>
                        <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                        <span class="loginTitle"><%= i18n.get("Login") %></span>
                        <% if (loginFailed) {%>
    
    To
    
    div class="loginContent">
                        <span class="loginFlow"></span>
                        <span class="loginVersion"><%= i18n.get("My Welcome Message") %></span>
                        <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                        <span class="loginTitle"><%= i18n.get("Login") %></span>
                        <% if (loginFailed) {%>
    

新しいスタイルの追加、または既存のスタイルの変更

  1. コピー login ノード:

    • コピー元:/libs/livecycle/core/content
    • コピー先:/apps/livecycle/core/content
  2. ファイルを削除 login.js および jquery-1.8.0.min.jsノードから /apps/livecycle/core/content/login.

  3. CSS ファイルのスタイルを変更します。

  4. 新しいスタイルを追加するには:

    1. 新しいスタイルの追加先 /apps/livecycle/core/content/login/login.css

    2. コピー login.jsp

      • コピー元:/libs/livecycle/core/components/login
      • コピー先:/apps/livecycle/core/components/login
    3. 変更 /apps/livecycle/core/components/login/login.jsp 新しく追加されたスタイルを組み込む。

  5. 次に例を示します。

    • 以下をに追加します。 /apps/livecycle/core/content/login/login.css.
    .newLoginContentArea {
     width: 700px;
     padding: 100px 0px 0px 100px;
    }
    
    • /apps/livecycle/core/components/login.jsp で次を変更します。
    <div class="loginContentArea">
    
    To
    
    <div class="newLoginContentArea">
    
メモ

既存の画像が /apps/livecycle/core/content/login ( コピー元: /libs/livecycle/core/content/login) が削除され、対応する参照が CSS から削除されます。

新しい画像の追加

  1. 新しいスタイルの追加または既存のスタイルの変更の手順に従います(前述)。

  2. に新しい画像を追加 /apps/livecycle/core/content/login. 画像を追加するには:

    1. WebDAV クライアントをインストールします。
    2. に移動します。 /apps/livecycle/core/content/login フォルダー、webDAV クライアントを使用。 詳しくは、以下を参照してください。 https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
    3. 新しい画像を追加します。
  3. に新しいスタイルを追加 /apps/livecycle/core/content/login/login.css, ~に追加された新しい画像に対応する /apps/livecycle/core/content/login.

  4. で新しいスタイルを使用 login.jsp 時刻 /apps/livecycle/core/components.

  5. 以下に例を示します。

    • /apps/livecycle/core/content/login/login.css に次の内容を追加します
    .newLoginContainerBkg {
     background-image: url(my_Bg.gif);
     background-repeat: no-repeat;
     background-position: left top;
     width: 727px;
    }
    
    • /apps/livecycle/core/components/login.jsp で次を変更します。
    <div class="loginContainerBkg">
    
    To
    
    <div class="newLginContainerBkg">
    

このページ